@start-base/react-form-elements/CheckboxCards/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 o=t(e),r=a(l),u=Object.defineProperty,n=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable,d=(e,l,a)=>l in e?u(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(n)for(var a of n(l))s.call(l,a)&&d(e,a,l[a]);return e},b=e=>o.createElement("svg",m({xmlns:"http://www.w3.org/2000/svg",width:12,height:12,fill:"none"},e),o.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",C="SUI-Checkbox-module-label-tLN4u",h="SUI-Checkbox-module-box-XqQz7",p="SUI-Checkbox-module-noLabel-Yw7Pk",k="SUI-Checkbox-module-inputError-gCI-z",x="SUI-Checkbox-module-boxDisabled-8Rl3P",v="SUI-Checkbox-module-icon-pLAK2",I="SUI-Checkbox-module-input-fHLWQ",N="SUI-Checkbox-module-errorLabel-mLjpi",g=e.forwardRef((({name:l,onChange:a,label:t=null,checked:u=!1,inputClassName:n=null,labelClassName:c=null,errorClassName:s=null,disabled:d=!1,error:g=null},S)=>{const U=e.useMemo((()=>g&&"string"==typeof g?g:g&&"object"==typeof g&&(null==g?void 0:g.message)?g.message:null),[g]);return o.default.createElement("label",{htmlFor:`checkbox_${l}`,className:i},o.default.createElement("div",{className:r.default(f)},o.default.createElement("input",{ref:S,className:I,name:l,type:"checkbox",checked:u,onChange:a,id:`checkbox_${l}`,disabled:d}),o.default.createElement("span",{className:r.default(h,m({[x]:d,[p]:!t,[k]:"boolean"==typeof g&&g},n?{[n]:!0}:{}))},o.default.createElement(b,{className:v})),o.default.createElement("div",{className:r.default(C,m({},c?{[c]:!0}:{}))},t)),U?o.default.createElement("div",{className:r.default(N,m({},s?{[s]:!0}:{}))},U):null)}));g.displayName="Checkbox";var S=g,U="SUI-CheckboxCards-module-root-TgRwl",y="SUI-CheckboxCards-module-label-EFY11",E="SUI-CheckboxCards-module-errorLabel-FsUAA",w="SUI-CheckboxCards-module-container-PaN-t",j="SUI-CheckboxCards-module-row-PB9ZT",O="SUI-CheckboxCards-module-column-GrIxv",L="SUI-CheckboxCards-module-card-W3ujF",P="SUI-CheckboxCards-module-selected--4Mzc",_="SUI-CheckboxCards-module-disabled-hIlcT",M="SUI-CheckboxCards-module-hide-sqWiS",R="SUI-CheckboxCards-module-inputError-Gwc0Z",q=e.forwardRef((({name:l,onChange:a,value:t=[],options:u=[],label:n=null,inputClassName:c=null,cardClassName:s=null,labelClassName:d=null,optionLabelClassName:b=null,direction:i="column",hideInput:f=!0,errorClassName:C=null,disabled:h=!1,error:p=null},k)=>{const x=e.useCallback(((e,o)=>{let r;r=e?[...t,o]:null==t?void 0:t.filter((e=>e!==o)),a({target:{name:l,value:r}})}),[a,t,l]),v=e.useMemo((()=>"string"==typeof p?p:p&&"object"==typeof p&&p.message?p.message:null),[p]);return o.default.createElement("label",{className:U},n&&o.default.createElement("span",{className:r.default(y,{[d]:d})},n),o.default.createElement("div",{className:r.default(w,{[j]:"row"===i,[O]:"column"===i})},u.map(((e,a)=>o.default.createElement("div",{key:a,className:r.default(s,L,{[P]:!!t&&t.includes(e.value),[_]:h,[R]:"boolean"==typeof p&&p}),onClick:()=>x(!!t&&t.includes(e.value),e.value)},o.default.createElement(S,{ref:k,inputClassName:r.default(m({[M]:f},c?{[c]:!0}:{})),labelClassName:null!=b?b:"",checked:!!t&&t.includes(e.value),label:e.label,value:e.value,error:"boolean"==typeof p&&p,disabled:h,name:`${l}_${a}`,onChange:l=>x(l.target.checked,e.value)}))))),v&&o.default.createElement("div",{className:r.default(E,{[C]:C})},v))}));q.displayName="CheckboxCards";var z=q;module.exports=z;