UNPKG

@snowball-tech/fractal

Version:

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

3 lines 3.56 kB
'use client'; import{a as t,c as _,e as R}from"./chunk-G742W5Y5.js";import{a as w}from"./chunk-HTOKQYVM.js";import{b as e}from"./chunk-CMFNILWJ.js";import{a as i,b as v}from"./chunk-XYM7TA65.js";import*as l from"@radix-ui/react-checkbox";import{composeRefs as A}from"@radix-ui/react-compose-refs";import{Label as H}from"@radix-ui/react-label";import{UilCheck as U}from"@tooni/iconscout-unicons-react";import{forwardRef as q,useId as D,useRef as G}from"react";import Y from"lodash/fp/isEmpty";import V from"lodash/fp/isFunction";import j from"lodash/fp/omit";import{jsx as c,jsxs as S}from"react/jsx-runtime";var C=q(({checked:h,children:m,color:a=R,defaultChecked:f,disabled:r=!1,fullWidth:y=!1,id:I,label:p,labelAsDiv:T=!1,name:E,onCheckedChange:b,readOnly:o=!1,required:n=!1,value:L="on",variant:s=_,...x},N)=>{let k=!!m;!k&&Y(p)&&console.warn("You must provide a `label` or `children` to the `InputCheckbox` component");let P={primary:"bg-white shadow-subtle border-1 border-normal",secondary:"bg-white border-1 border-normal",tertiary:"bg-transparent"},$={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"}},g=D(),d=(I??g)||g,B=G(null),M=A(N,B),F=u=>{if(o){u.preventDefault();return}u.target&&u.target.blur()};return S("div",{className:v(`${e}-${t}`,`${e}-${t}--${a}`,`${e}-${t}--${s}`,"group/checkbox","flex w-full cursor-default items-start rounded-sm",P[s],r?`${e}-${t}--disabled text-disabled`:"text-dark",y?`${e}-${t}--full-width`:"sm:w-fit",n?`${e}-${t}--required`:"",x.className),children:[c(l.Root,{id:d,ref:M,...h===void 0?{}:{checked:h},className:i(`${e}-${t}__box`,`${e}-${t}__box--${a}`,"mt-half h-full max-h-6 flex-grow-0 rounded-xs border-none bg-unset px-unset py-unset",s==="tertiary"?"":"min-h-6",r?"cursor-not-allowed":`${$.checked[a]}`,!r&&o?"cursor-default":"",!r&&!o?`${$.hover[a]} cursor-pointer`:""),...f===void 0?{}:{defaultChecked:f},"aria-readonly":o,disabled:r,name:E||d,required:n,value:L,onClick:F,...V(b)?{onCheckedChange:b}:{},...j(["className"],x),children:c("div",{className:i(`${e}-${t}__box__mark`,`${e}-${t}__box__mark--${a}`,"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",s==="tertiary"?"mr-2":"mx-2",r||o?"border-disabled bg-transparent text-disabled":"border-normal text-dark"),children:c(l.Indicator,{children:c(U,{})})})}),c(H,{asChild:!0,className:i(`${e}-${t}__label`,`${e}-${t}__label--${a}`,"flex-1 overflow-auto break-words",s==="tertiary"?"py-half":"py-2 pr-2",r?"cursor-not-allowed":"",!r&&o?"cursor-default":"",!r&&!o?"cursor-pointer":"",n?`${e}-${t}__label--required after:text-feedback-danger-50 after:content-required`:""),htmlFor:d,children:c(w,{element:T?"div":"label",children:k?m:p})})]})});C.displayName="InputCheckbox";var ce=C;export{C as a,ce as b}; //# sourceMappingURL=chunk-J65BZOTD.js.map