UNPKG

@snowball-tech/fractal

Version:

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

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