@snowball-tech/fractal/dist/src/components/InputCheckbox/InputCheckbox.js

Fractal's (Snowball's design system) React component library based on RadixUI and TailwindCSS

"use client";import{PREFIX as e}from"../../constants.js";import{cj as t,cn as n}from"../../styles/helpers.js";import r from"../Typography/Typography.js";import{onlyText as i}from"../../utils.js";import{DEFAULT_COLOR as a,DEFAULT_VARIANT as o,GROUP_NAME as s}from"./InputCheckbox.constants.js";import{forwardRef as c,startTransition as l,useId as u,useImperativeHandle as d,useRef as f}from"react";import p from"lodash/fp/isEmpty.js";import m from"lodash/fp/isFunction.js";import h from"lodash/fp/isString.js";import g from"lodash/fp/omit.js";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{Label as y}from"@radix-ui/react-label";import{UilCheck as b}from"@tooni/iconscout-unicons-react";import*as x from"@radix-ui/react-checkbox";const S=c(({checked:c,children:S,color:C=a,defaultChecked:w,disabled:T=!1,fullWidth:E=!1,id:D,label:O,labelElement:k,name:A,onCheckedChange:j,readOnly:M=!1,required:N=!1,value:P=`on`,variant:F=o,...I},L)=>{let R=!!S;!R&&!O&&console.warn("You must provide a `label` or `children` to the `InputCheckbox` component");let z=h(O)?O:p(O)?i(S):i(O),B={primary:`bg-white shadow-subtle border-1 border-normal`,secondary:`bg-white border-1 border-normal`,tertiary:`bg-transparent`},V={checked:{blue:`[&>:first-child]:data-state-checked:bg-decorative-blue-70`,green:`[&>:first-child]:data-state-checked:bg-decorative-green-70`,pink:`[&>:first-child]:data-state-checked:bg-decorative-pink-70`,purple:`[&>:first-child]:data-state-checked:bg-decorative-purple-70`,yellow:`[&>:first-child]:data-state-checked:bg-decorative-yellow-70`},hover:{blue:`group-hover/checkbox:[&>:first-child]:data-state-unchecked:bg-decorative-blue-90`,green:`group-hover/checkbox:[&>:first-child]:data-state-unchecked:bg-decorative-green-90`,pink:`group-hover/checkbox:[&>:first-child]:data-state-unchecked:bg-decorative-pink-90`,purple:`group-hover/checkbox:[&>:first-child]:data-state-unchecked:bg-decorative-purple-90`,yellow:`group-hover/checkbox:[&>:first-child]:data-state-unchecked:bg-decorative-yellow-90`}},H=u(),U=(D??H)||H,W=f(null);d(L,()=>W.current);let G=k||(h(R?S:O)?`label`:`div`),K=()=>{l(()=>{W.current?.blur()})};return v(r,{className:n(`${e}-${s}`,`${e}-${s}--${C}`,`${e}-${s}--${F}`,`group/checkbox`,`flex w-full max-w-full cursor-default rounded-sm`,B[F],T?`${e}-${s}--disabled text-disabled`:`text-dark`,E?`${e}-${s}--full-width`:`sm:w-fit`,N?`${e}-${s}--required`:``,I.className),element:`div`,onClick:G===`label`?void 0:e=>{if(M||T){e.preventDefault();return}e.target!==W.current&&e.target.parentElement!==W.current&&W.current?.click(),K()},children:[_(x.Root,{id:U,ref:W,"aria-label":z,"aria-readonly":M,className:t(`${e}-${s}__box`,`${e}-${s}__box--${C}`,`flex rounded-xs border-none bg-unset p-unset`,F===`tertiary`?`pt-half`:`min-h-6 pt-2`,T?`cursor-not-allowed`:`${V.checked[C]}`,!T&&M?`cursor-default`:``,!T&&!M?`${V.hover[C]} cursor-pointer`:``),disabled:T||M,name:A||U,required:N,title:z,value:P,...c===void 0?{}:{checked:c},...w===void 0?{}:{defaultChecked:w},...m(j)?{onCheckedChange:j}:{},onFocus:K,...g([`className`],I),children:_(`div`,{className:t(`${e}-${s}__box__mark`,`${e}-${s}__box__mark--${C}`,`flex h-3 max-h-3 min-h-3 w-3 min-w-3 max-w-3 items-center justify-center rounded-xs border-2 pt-half`,F===`tertiary`?`mr-2`:`mx-2`,T||M?`border-disabled bg-transparent text-disabled`:`border-normal text-dark`),children:_(x.Indicator,{children:_(b,{})})})}),_(y,{asChild:!0,className:t(`${e}-${s}__label`,`${e}-${s}__label--${C}`,`flex-1 overflow-auto break-words`,F===`tertiary`?`py-half`:`py-2 pr-2`,T?`cursor-not-allowed`:``,!T&&M?`cursor-default`:``,!T&&!M?`cursor-pointer`:``,N?`${e}-${s}__label--required after:text-feedback-danger-50 after:content-required`:``),htmlFor:U,children:_(r,{element:G,children:R?S:O})})]})});S.displayName=`InputCheckbox`;export{S as default};
//# sourceMappingURL=InputCheckbox.js.map