import{jsxs as d,jsx as e}from"react/jsx-runtime";import{token as y}from"@styled/tokens";import k from"../icons/ico-checkmark.js";import C from"./text.js";import{useToggleState as S}from"../../hooks/useToggleState.js";import{css as n}from"@styled/css";import{Box as j}from"@styled/jsx";import{Flex as v}from"@styled/jsx/flex";import{forwardRef as w,useRef as I,useEffect as N}from"react";import{useCheckbox as F,useFocusRing as P,VisuallyHidden as R,mergeProps as W}from"react-aria";const m=w((l,u)=>{const{label:o,indeterminate:r=!1,disabled:s=!1,checked:b,"aria-label":p,...f}=l,t=S({...l,isSelected:b}),h=I(null),i=u||h;N(()=>{const c="current"in i?i.current:null;c&&(c.indeterminate=!!r)},[r,i]);const{inputProps:g}=F({...f,"aria-label":o||p||"Checkbox",isDisabled:s,isIndeterminate:r},t,i),{isFocusVisible:a,focusProps:x}=P();return d("label",{className:n({display:"flex",alignItems:"center",rounded:"sm",opacity:s?.3:1}),children:[e(R,{children:e("input",{...W(g,x),ref:i})}),e("div",{className:n({display:"flex",alignItems:"center",justifyContent:"center",width:5,height:5,bg:t.isSelected?"brand.base":"transparent",borderWidth:"thick",borderColor:t.isSelected||a?"brand.base":"text.tertiary",transition:"background-color 0.2s ease, border-color 0.2s ease",_hover:{cursor:"pointer",borderColor:"brand.base"},pointerEvents:s?"none":"auto",rounded:"sm",boxSizing:"border-box",outlineColor:a?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5}),children:d("span",{children:[t.isSelected&&!r&&e(k,{height:16,width:16,color:y("colors.surface.primary")}),t.isSelected&&!!r&&e(v,{justifyContent:"center",alignItems:"center",children:e("div",{className:n({w:2.5,h:.5,bg:"surface.primary"})})})]})}),o&&e(j,{ml:3,children:e(C,{fontWeight:"medium",styles:{lineHeight:1},children:o})})]})});m.displayName="Checkbox";export{m as default};
//# sourceMappingURL=checkbox.js.map
