@start-base/react-form-elements/CheckboxGroup/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,b=(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},i=l=>e.createElement("svg",b({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"})),p="SUI-Checkbox-module-root-B5Qjx",d="SUI-Checkbox-module-inputRoot-evAlL",h="SUI-Checkbox-module-label-tLN4u",C="SUI-Checkbox-module-box-XqQz7",k="SUI-Checkbox-module-noLabel-Yw7Pk",x="SUI-Checkbox-module-inputError-gCI-z",N="SUI-Checkbox-module-boxDisabled-8Rl3P",f="SUI-Checkbox-module-icon-pLAK2",v="SUI-Checkbox-module-input-fHLWQ",g="SUI-Checkbox-module-errorLabel-mLjpi",y=a((({name:e,onChange:a,label:r=null,checked:n=!1,inputClassName:s=null,labelClassName:c=null,errorClassName:m=null,disabled:u=!1,error:y=null},E)=>{const I=o((()=>y&&"string"==typeof y?y:y&&"object"==typeof y&&(null==y?void 0:y.message)?y.message:null),[y]);return l.createElement("label",{htmlFor:`checkbox_${e}`,className:p},l.createElement("div",{className:t(d)},l.createElement("input",{ref:E,className:v,name:e,type:"checkbox",checked:n,onChange:a,id:`checkbox_${e}`,disabled:u}),l.createElement("span",{className:t(C,b({[N]:u,[k]:!r,[x]:"boolean"==typeof y&&y},s?{[s]:!0}:{}))},l.createElement(i,{className:f})),l.createElement("div",{className:t(h,b({},c?{[c]:!0}:{}))},r)),I?l.createElement("div",{className:t(g,b({},m?{[m]:!0}:{}))},I):null)}));y.displayName="Checkbox";var E=y,I="SUI-CheckboxGroup-module-root-n-qtL",S="SUI-CheckboxGroup-module-label--iw5b",U="SUI-CheckboxGroup-module-errorLabel--QWwK",L=a((({name:e,onChange:a,value:n=[],options:s=[],label:c=null,inputClassName:m=null,labelClassName:u=null,optionLabelClassName:b=null,errorClassName:i=null,disabled:p=!1,error:d=null},h)=>{const C=r(((l,o)=>{let r;r=l?[...n,o]:n.filter((e=>e!==o)),a({target:{name:e,value:r}})}),[a,n,e]),k=o((()=>"string"==typeof d?d:d&&"object"==typeof d&&d.message?d.message:null),[d]);return l.createElement("label",{className:I},c&&l.createElement("span",{className:t(S,{[u]:u})},c),s.map(((a,o)=>l.createElement(E,{ref:h,key:o,inputClassName:null!=m?m:"",labelClassName:null!=b?b:"",checked:!!n&&n.includes(a.value),label:a.label,value:a.value,error:"boolean"==typeof d&&d,disabled:p,name:`${e}_${o}`,onChange:e=>C(e.target.checked,a.value)}))),k&&l.createElement("div",{className:t(U,{[i]:i})},k))}));L.displayName="CheckboxGroup";var w=L;export{w as default};