@start-base/react-form-elements/CheckboxCards/index.mjs

Simplify form elements and form management. Selection of user friendly inputs and wide customization abilities to match your design and functionality.

import*as e from"react";import l,{forwardRef as a,useMemo as o,useCallback as r}from"react";import t from"clsx";var n=Object.defineProperty,s=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable,u=(e,l,a)=>l in e?n(e,l,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[l]=a,d=(e,l)=>{for(var a in l||(l={}))c.call(l,a)&&u(e,a,l[a]);if(s)for(var a of s(l))m.call(l,a)&&u(e,a,l[a]);return e},b=l=>e.createElement("svg",d({xmlns:"http://www.w3.org/2000/svg",width:12,height:12,fill:"none"},l),e.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M9.666 3.666 4.999 8.332 2.666 6"})),i="SUI-Checkbox-module-root-B5Qjx",C="SUI-Checkbox-module-inputRoot-evAlL",h="SUI-Checkbox-module-label-tLN4u",p="SUI-Checkbox-module-box-XqQz7",k="SUI-Checkbox-module-noLabel-Yw7Pk",x="SUI-Checkbox-module-inputError-gCI-z",v="SUI-Checkbox-module-boxDisabled-8Rl3P",I="SUI-Checkbox-module-icon-pLAK2",N="SUI-Checkbox-module-input-fHLWQ",S="SUI-Checkbox-module-errorLabel-mLjpi",f=a((({name:e,onChange:a,label:r=null,checked:n=!1,inputClassName:s=null,labelClassName:c=null,errorClassName:m=null,disabled:u=!1,error:f=null},U)=>{const g=o((()=>f&&"string"==typeof f?f:f&&"object"==typeof f&&(null==f?void 0:f.message)?f.message:null),[f]);return l.createElement("label",{htmlFor:`checkbox_${e}`,className:i},l.createElement("div",{className:t(C)},l.createElement("input",{ref:U,className:N,name:e,type:"checkbox",checked:n,onChange:a,id:`checkbox_${e}`,disabled:u}),l.createElement("span",{className:t(p,d({[v]:u,[k]:!r,[x]:"boolean"==typeof f&&f},s?{[s]:!0}:{}))},l.createElement(b,{className:I})),l.createElement("div",{className:t(h,d({},c?{[c]:!0}:{}))},r)),g?l.createElement("div",{className:t(S,d({},m?{[m]:!0}:{}))},g):null)}));f.displayName="Checkbox";var U=f,g="SUI-CheckboxCards-module-root-TgRwl",E="SUI-CheckboxCards-module-label-EFY11",y="SUI-CheckboxCards-module-errorLabel-FsUAA",w="SUI-CheckboxCards-module-container-PaN-t",L="SUI-CheckboxCards-module-row-PB9ZT",j="SUI-CheckboxCards-module-column-GrIxv",P="SUI-CheckboxCards-module-card-W3ujF",O="SUI-CheckboxCards-module-selected--4Mzc",A="SUI-CheckboxCards-module-disabled-hIlcT",F="SUI-CheckboxCards-module-hide-sqWiS",W="SUI-CheckboxCards-module-inputError-Gwc0Z",$=a((({name:e,onChange:a,value:n=[],options:s=[],label:c=null,inputClassName:m=null,cardClassName:u=null,labelClassName:b=null,optionLabelClassName:i=null,direction:C="column",hideInput:h=!0,errorClassName:p=null,disabled:k=!1,error:x=null},v)=>{const I=r(((l,o)=>{let r;r=l?[...n,o]:null==n?void 0:n.filter((e=>e!==o)),a({target:{name:e,value:r}})}),[a,n,e]),N=o((()=>"string"==typeof x?x:x&&"object"==typeof x&&x.message?x.message:null),[x]);return l.createElement("label",{className:g},c&&l.createElement("span",{className:t(E,{[b]:b})},c),l.createElement("div",{className:t(w,{[L]:"row"===C,[j]:"column"===C})},s.map(((a,o)=>l.createElement("div",{key:o,className:t(u,P,{[O]:!!n&&n.includes(a.value),[A]:k,[W]:"boolean"==typeof x&&x}),onClick:()=>I(!!n&&n.includes(a.value),a.value)},l.createElement(U,{ref:v,inputClassName:t(d({[F]:h},m?{[m]:!0}:{})),labelClassName:null!=i?i:"",checked:!!n&&n.includes(a.value),label:a.label,value:a.value,error:"boolean"==typeof x&&x,disabled:k,name:`${e}_${o}`,onChange:e=>I(e.target.checked,a.value)}))))),N&&l.createElement("div",{className:t(y,{[p]:p})},N))}));$.displayName="CheckboxCards";var z=$;export{z as default};