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

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

"use client";
import{jsx as r,jsxs as e}from"react/jsx-runtime";import{combineClasses as o,classes as i}from"../../core/utils.js";import{Animatable as t}from"@infinityfx/lively";import{useLink as a}from"@infinityfx/lively/hooks";import{useState as c,useEffect as n}from"react";import s from"../feedback/halo.js";import l from"../../hooks/use-input-props.js";import{createStyles as d}from"../../core/style.js";const f=d("checkbox",{".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:1},".checkbox":{width:"1.5em",height:"1.5em",borderRadius:"var(--f-radius-sml)",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",transition:"background-color .25s, border-color .25s",display:"flex",alignItems:"center",justifyContent:"center"},".input:enabled":{cursor:"pointer"},".checkmark":{width:"1em",stroke:"white",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"},".input:disabled + .checkbox":{backgroundColor:"var(--f-clr-grey-100)",borderColor:"var(--f-clr-grey-200)"},".input:disabled + .checkbox .checkmark":{stroke:"var(--f-clr-grey-500)"},".input:disabled:checked + .checkbox":{backgroundColor:"var(--f-clr-grey-200)",borderColor:"var(--f-clr-grey-200)"},'.wrapper[data-error="true"] .input:enabled + .checkbox':{borderColor:"var(--f-clr-error-200)"},".input:checked:enabled + .checkbox":{backgroundColor:"var(--color, var(--f-clr-primary-300))",borderColor:"var(--color, var(--f-clr-primary-300))"},'.wrapper[data-error="true"] .input:checked:enabled + .checkbox':{backgroundColor:"var(--f-clr-error-200)"},".wrapper .halo":{borderRadius:"var(--f-radius-sml)",inset:"-.5em"}});function h({cc:d={},error:h,size:m="med",color:p,intermediate:k,checked:u,defaultChecked:b,...v}){const g=o(f,d),x=a(b?1:0),[y,C]=l(v),[w,z]=void 0!==u?[u]:c(b||!1);return n((()=>x.set(w?1:0,{duration:.25})),[w]),r(s,{hover:!1,cc:{...d,halo:g.halo},children:e("div",{...C,className:i(g.wrapper,g[`s__${m}`],C.className),"data-error":!!h,children:[r("input",{...y,checked:w,type:"checkbox",className:g.input,"aria-invalid":!!h,onChange:r=>{z?.(r.target.checked),v.onChange?.(r)}}),r("div",{className:g.checkbox,style:{"--color":p},children:r("svg",{viewBox:"0 0 18 18",className:g.checkmark,children:r(t,k?{animate:{strokeLength:x},initial:{strokeDashoffset:w?0:1},children:r("path",{d:"M 3 9 L 15 9",fill:"none"})}:{animate:{strokeLength:x},initial:{strokeDashoffset:w?0:1},children:r("path",{d:"M 3 9 L 8 13 L 15 5",fill:"none"})})})})]})})}export{h as default};
//# sourceMappingURL=checkbox.js.map