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

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

"use client";
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as a,useState as t}from"react";import o from"../feedback/halo.js";import i from"../../hooks/use-input-props.js";import{Animatable as n}from"@infinityfx/lively";import{combineClasses as l,classes as c}from"../../core/utils.js";import{createStyles as d}from"../../core/style.js";const s=d("toggle",{".input":{position:"absolute",opacity:0,inset:0,width:"100%",height:"100%",zIndex:2,WebkitTapHighlightColor:"transparent"},".input:enabled":{cursor:"pointer"},".toggle":{position:"relative",display:"block",backgroundColor:"var(--f-clr-fg-100)",color:"var(--f-clr-text-100)",borderRadius:"var(--f-radius-sml)",transition:"background-color .25s, color .25s"},".toggle.round":{borderRadius:"calc(1.4em + 1px)"},".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)"},".v__minimal":{backgroundColor:"transparent"},".v__neutral":{backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)"},".content":{display:"flex",alignItems:"center",justifyContent:"center",gap:"var(--f-spacing-xsm)",gridArea:"1 / 1 / 1 / 1",lineHeight:1,padding:".8em"},".container":{display:"grid",overflow:"hidden",height:"100%"},".toggle.compact .content":{padding:".6em"},'.toggle[data-checked="true"]:not(.v__neutral)':{backgroundColor:"var(--f-clr-primary-100)",color:"var(--f-clr-text-200)"},'.v__neutral[data-checked="true"]':{backgroundColor:"var(--f-clr-fg-200)"},'.v__minimal[data-checked="true"]':{backgroundColor:"var(--f-clr-primary-300)"},'.toggle[data-checked="false"][data-disabled="true"]':{color:"var(--f-clr-grey-500)"},'.toggle[data-checked="true"][data-disabled="true"]':{backgroundColor:"var(--f-clr-grey-300)",color:"var(--f-clr-grey-100)"}});function m({children:d,cc:m={},size:g="med",compact:f=!1,round:u=!1,variant:p="default",checkedContent:v,...h}){const b=l(s,m),k=a(null),[_,x]=void 0!==h.checked?[h.checked]:t(!!h.defaultChecked),[y,C]=i(h),z=[{on:_,immediate:!0},{on:!_,reverse:!0,immediate:!0}];return e(o,{disabled:h.disabled,color:"minimal"!==p||_?void 0:"var(--f-clr-primary-400)",target:k,children:r("div",{...C,className:c(b.toggle,u&&b.round,f&&b.compact,b[`s__${g}`],b[`v__${p}`],h.className),"data-checked":_,"data-disabled":!!h.disabled,"data-fb":"neutral"===p?"true":void 0,children:[e("input",{...y,ref:k,type:"checkbox",className:b.input,onChange:e=>{x?.(e.target.checked),y.onChange?.(e)}}),r("div",{className:b.container,children:[v?e(n,{animate:{translate:["0 0","0 -100%"],duration:.4},initial:{translate:_?"0 -100%":"0 0"},triggers:z,children:e("div",{className:b.content,children:d})}):e("div",{className:b.content,children:d}),v?e(n,{animate:{translate:["0 100%","0 0"],duration:.4},initial:{translate:_?"0 0":"0 100%"},triggers:z,children:e("div",{className:b.content,children:v})}):null]})]})})}export{m as default};
//# sourceMappingURL=toggle.js.map