@infinityfx/fluid/dist/components/input/chip.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 o}from"../../core/utils.js";import c from"../../hooks/use-input-props.js";import{useState as a,useEffect as n}from"react";import{createStyles as t}from"../../core/style.js";import{Animatable as d}from"@infinityfx/lively";import{useLink as s}from"@infinityfx/lively/hooks";const l=t("chip",{".wrapper":{position:"relative",borderRadius:"var(--f-radius-sml)"},".wrapper.round":{borderRadius:"999px"},".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%",borderRadius:"inherit",WebkitTapHighlightColor:"transparent"},'.input[type="checkbox"]:enabled':{cursor:"pointer"},'.input[type="radio"]:enabled:not(:checked)':{cursor:"pointer"},".chip":{display:"flex",alignItems:"center",backgroundColor:"var(--f-clr-fg-100)",borderRadius:"inherit",color:"var(--f-clr-text-100)",fontWeight:600,padding:".5em",paddingRight:".7em",gap:".7em",userSelect:"none",lineHeight:1.2,transition:"background-color .15s, color .15s"},".checkmark":{backgroundColor:"var(--f-clr-bg-100)",borderRadius:"3px",padding:".2em",width:"1.2em",stroke:"white",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round",transition:"background-color .15s"},".wrapper.round .checkmark":{borderRadius:"999px"},".input:enabled:checked + .chip":{backgroundColor:"var(--f-clr-primary-600)",color:"var(--f-clr-primary-100)"},".input:enabled:checked + .chip .checkmark":{backgroundColor:"var(--f-clr-primary-100)"},".input:disabled + .chip":{color:"var(--f-clr-grey-300)"},".input:disabled + .chip .checkmark":{backgroundColor:"var(--f-clr-grey-100)"},".input:checked:disabled + .chip":{backgroundColor:"var(--f-clr-grey-200)",color:"var(--f-clr-grey-500)"},".input:checked:disabled + .chip .checkmark":{backgroundColor:"var(--f-clr-grey-300)",stroke:"var(--f-clr-grey-500)"},".input:enabled:focus-visible + .chip":{backgroundColor:"var(--f-clr-primary-600)"},".input:enabled:checked:focus-visible + .chip":{backgroundColor:"var(--f-clr-primary-500)"}});function p({children:t,cc:p={},size:h="med",type:u="checkbox",round:f,checked:m,defaultChecked:k,...g}){const b=i(l,p),[v,y]=c(g),x=s(k?1:0),[C,_]=void 0!==m?[m]:a(k||!1);return n((()=>x.set(C?1:0,{duration:.15})),[C]),r("div",{...y,className:o(b.wrapper,b[`s__${h}`],f&&b.round,y.className),children:[e("input",{...v,type:u,className:b.input,checked:C,onChange:r=>{_?.(r.target.checked),g.onChange?.(r)}}),r("div",{className:b.chip,children:[e("svg",{viewBox:"0 0 18 18",className:b.checkmark,children:e(d,{animate:{strokeLength:x},initial:{strokeDashoffset:C?0:1},children:e("path",{d:"M 3 9 L 8 13 L 15 5",fill:"none"})})}),t]})]})}export{p as default};
//# sourceMappingURL=chip.js.map