@infinityfx/fluid/dist/components/input/switch.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsxs as r,jsx as e}from"react/jsx-runtime";import{combineClasses as i,classes as a}from"../../core/utils.js";import{useState as o,useRef as t}from"react";import n from"../feedback/halo.js";import s from"../../hooks/use-input-props.js";import{createStyles as c}from"../../core/style.js";import{Animatable as d}from"@infinityfx/lively";const l=c("switch",{".wrapper":{position:"relative",width:"max-content"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".input":{position:"absolute",opacity:0,inset:0,width:"100%",height:"100%",zIndex:2,WebkitTapHighlightColor:"transparent"},".input:enabled":{cursor:"pointer"},".switch":{position:"relative",height:"1.5em",width:"calc(calc(1.5em - 6px) * 2 + 6px)",padding:"3px",aspectRatio:2,backgroundColor:"var(--f-clr-fg-200)",borderRadius:"var(--f-radius-sml)",transition:"background-color .35s"},".icons":{position:"absolute",inset:0,display:"flex"},".icon":{flexGrow:1,flexBasis:0,display:"flex",alignItems:"center",justifyContent:"center",fontSize:".75em"},".icon:first-child":{color:"white"},".icon:last-child":{color:"var(--f-clr-grey-400)"},".handle__wrapper":{position:"relative",borderRadius:"calc(var(--f-radius-sml) - 1px)",height:"100%",aspectRatio:1,zIndex:1},".handle":{width:"inherit",height:"inherit",borderRadius:"inherit",backgroundColor:"white",boxShadow:"var(--f-shadow-sml)"},".wrapper.round .switch":{borderRadius:"999px"},".wrapper.round .handle__wrapper":{borderRadius:"999px"},'.wrapper[data-error="true"] .input:enabled + .switch':{backgroundColor:"var(--f-clr-error-400)"},".input:checked:enabled + .switch":{backgroundColor:"var(--color, var(--f-clr-primary-300))"},'.wrapper[data-error="true"] .input:checked:enabled + .switch':{backgroundColor:"var(--f-clr-error-200)"},".input:disabled + .switch .handle":{backgroundColor:"var(--f-clr-grey-200)"},".wrapper .halo":{borderRadius:"var(--f-radius-sml)",inset:"-.5em"},".wrapper.round .halo":{borderRadius:"999px"}});function p({cc:c={},error:p,size:h="med",color:m,round:f=!0,iconOff:u,iconOn:v,checked:w,defaultChecked:b,...g}){const x=i(l,c),[k,_]=s(g),[y,z]=void 0!==w?[w]:o(b||!1),C=t(null);return r("div",{..._,className:a(x.wrapper,x[`s__${h}`],f&&x.round,_.className),"data-error":!!p,children:[e("input",{...k,ref:C,type:"checkbox",className:x.input,"aria-invalid":!!p,checked:y,onChange:r=>{z?.(r.target.checked),g.onChange?.(r)}}),r("div",{className:x.switch,style:{"--color":m},children:[r("div",{className:x.icons,children:[e("div",{className:x.icon,children:v}),e("div",{className:x.icon,children:u})]}),e(d,{order:-1,initial:{translate:y?"100% 0%":"0% 0%"},animate:{translate:["0% 0%","100% 0%"],duration:.35},triggers:[{on:y,immediate:!0},{on:!y,reverse:!0,immediate:!0}],children:e(n,{target:C,hover:!1,cc:{...c,halo:x.halo},children:e("div",{className:x.handle__wrapper,children:e(d,{inherit:!0,order:-1,deform:!1,initial:{},animate:{scale:[1,"1.6 1",1],duration:.35},children:e("div",{className:x.handle})})})})})]})]})}export{p as default};
//# sourceMappingURL=switch.js.map