@start-base/react-form-elements/CheckboxGroup/index.js

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

"use strict";var e=require("react"),l=require("clsx");function a(e){return e&&e.__esModule?e:{default:e}}function t(e){if(e&&e.__esModule)return e;var l=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var t=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(l,a,t.get?t:{enumerable:!0,get:function(){return e[a]}})}})),l.default=e,Object.freeze(l)}var r=t(e),o=a(l),n=Object.defineProperty,u=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable,d=(e,l,a)=>l in e?n(e,l,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[l]=a,m=(e,l)=>{for(var a in l||(l={}))c.call(l,a)&&d(e,a,l[a]);if(u)for(var a of u(l))s.call(l,a)&&d(e,a,l[a]);return e},b=e=>r.createElement("svg",m({xmlns:"http://www.w3.org/2000/svg",width:12,height:12,fill:"none"},e),r.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",f="SUI-Checkbox-module-inputRoot-evAlL",p="SUI-Checkbox-module-label-tLN4u",h="SUI-Checkbox-module-box-XqQz7",C="SUI-Checkbox-module-noLabel-Yw7Pk",k="SUI-Checkbox-module-inputError-gCI-z",x="SUI-Checkbox-module-boxDisabled-8Rl3P",v="SUI-Checkbox-module-icon-pLAK2",g="SUI-Checkbox-module-input-fHLWQ",N="SUI-Checkbox-module-errorLabel-mLjpi",y=e.forwardRef((({name:l,onChange:a,label:t=null,checked:n=!1,inputClassName:u=null,labelClassName:c=null,errorClassName:s=null,disabled:d=!1,error:y=null},E)=>{const I=e.useMemo((()=>y&&"string"==typeof y?y:y&&"object"==typeof y&&(null==y?void 0:y.message)?y.message:null),[y]);return r.default.createElement("label",{htmlFor:`checkbox_${l}`,className:i},r.default.createElement("div",{className:o.default(f)},r.default.createElement("input",{ref:E,className:g,name:l,type:"checkbox",checked:n,onChange:a,id:`checkbox_${l}`,disabled:d}),r.default.createElement("span",{className:o.default(h,m({[x]:d,[C]:!t,[k]:"boolean"==typeof y&&y},u?{[u]:!0}:{}))},r.default.createElement(b,{className:v})),r.default.createElement("div",{className:o.default(p,m({},c?{[c]:!0}:{}))},t)),I?r.default.createElement("div",{className:o.default(N,m({},s?{[s]:!0}:{}))},I):null)}));y.displayName="Checkbox";var E=y,I="SUI-CheckboxGroup-module-root-n-qtL",j="SUI-CheckboxGroup-module-label--iw5b",w="SUI-CheckboxGroup-module-errorLabel--QWwK",S=e.forwardRef((({name:l,onChange:a,value:t=[],options:n=[],label:u=null,inputClassName:c=null,labelClassName:s=null,optionLabelClassName:d=null,errorClassName:m=null,disabled:b=!1,error:i=null},f)=>{const p=e.useCallback(((e,r)=>{let o;o=e?[...t,r]:t.filter((e=>e!==r)),a({target:{name:l,value:o}})}),[a,t,l]),h=e.useMemo((()=>"string"==typeof i?i:i&&"object"==typeof i&&i.message?i.message:null),[i]);return r.default.createElement("label",{className:I},u&&r.default.createElement("span",{className:o.default(j,{[s]:s})},u),n.map(((e,a)=>r.default.createElement(E,{ref:f,key:a,inputClassName:null!=c?c:"",labelClassName:null!=d?d:"",checked:!!t&&t.includes(e.value),label:e.label,value:e.value,error:"boolean"==typeof i&&i,disabled:b,name:`${l}_${a}`,onChange:l=>p(l.target.checked,e.value)}))),h&&r.default.createElement("div",{className:o.default(w,{[m]:m})},h))}));S.displayName="CheckboxGroup";var U=S;module.exports=U;