@start-base/react-form-elements/RadioCards/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 a,{forwardRef as l,useMemo as o}from"react";import r from"clsx";var n=Object.defineProperty,s=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable,m=(e,a,l)=>a in e?n(e,a,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[a]=l,i=(e,a)=>{for(var l in a||(a={}))t.call(a,l)&&m(e,l,a[l]);if(s)for(var l of s(a))d.call(a,l)&&m(e,l,a[l]);return e},u=a=>e.createElement("svg",i({xmlns:"http://www.w3.org/2000/svg",width:12,height:12,fill:"none"},a),e.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M9.666 3.666 4.999 8.332 2.666 6"})),c="SUI-Radio-module-root-qaRs5",p="SUI-Radio-module-inputRoot-trne7",b="SUI-Radio-module-label-Znh-K",C="SUI-Radio-module-box-9vZnw",v="SUI-Radio-module-noLabel-q3TUN",N="SUI-Radio-module-boxDisabled-WM5wd",f="SUI-Radio-module-inputError-3q29C",R="SUI-Radio-module-icon-58EOO",S="SUI-Radio-module-input-9rDt5",I="SUI-Radio-module-errorLabel-l016C",U=l(((e,l)=>{var n=e,{name:m,onChange:U,value:g,label:y=null,checked:h=!1,inputClassName:E=null,labelClassName:w=null,errorClassName:O=null,disabled:k=!1,error:x=null}=n,j=((e,a)=>{var l={};for(var o in e)t.call(e,o)&&a.indexOf(o)<0&&(l[o]=e[o]);if(null!=e&&s)for(var o of s(e))a.indexOf(o)<0&&d.call(e,o)&&(l[o]=e[o]);return l})(n,["name","onChange","value","label","checked","inputClassName","labelClassName","errorClassName","disabled","error"]);const L=o((()=>x&&"string"==typeof x?x:x&&"object"==typeof x&&x.message?x.message:null),[x]);return a.createElement("label",{htmlFor:`radio_${m}_${g}`,className:r(c)},a.createElement("div",{className:r(p)},a.createElement("input",i({ref:l,className:S,name:m,type:"radio",checked:h,value:g,onChange:U,id:`radio_${m}_${g}`,disabled:k},j)),a.createElement("span",{className:r(C,i({[N]:k,[f]:"boolean"==typeof x&&x,[v]:!y},E?{[E]:!0}:{}))},a.createElement(u,{className:R})),a.createElement("div",{className:r(b,i({},w?{[w]:!0}:{}))},y)),L&&a.createElement("div",{className:r(I,i({},O?{[O]:!0}:{}))},L))}));U.displayName="Radio";var g=U,y="SUI-RadioCards-module-root-oVvy9",h="SUI-RadioCards-module-label-p6HCA",E="SUI-RadioCards-module-errorLabel-FqLsK",w="SUI-RadioCards-module-container-3d0DC",O="SUI-RadioCards-module-row-VFSRG",k="SUI-RadioCards-module-column-yfaSj",x="SUI-RadioCards-module-card-OyarA",j="SUI-RadioCards-module-selected-NosOT",L="SUI-RadioCards-module-disabled-Wxggx",q="SUI-RadioCards-module-hide-4XxEs",$="SUI-RadioCards-module-inputError-45Zgi",_=l((({name:e,onChange:l,value:n=null,options:s=[],label:t=null,inputClassName:d=null,cardClassName:m=null,labelClassName:u=null,optionLabelClassName:c=null,direction:p="column",errorClassName:b=null,disabled:C=!1,hideInput:v=!0,error:N=null},f)=>{const R=o((()=>N&&"string"==typeof N?N:N&&"object"==typeof N&&N.message?N.message:null),[N]);return a.createElement("label",{className:y},a.createElement("span",{className:r(h,i({},u?{[u]:!0}:{}))},t),a.createElement("div",{className:r(w,{[O]:"row"===p,[k]:"column"===p})},s.map(((o,s)=>a.createElement("div",{key:s,className:r(m,x,{[j]:o.value===n,[L]:C,[$]:"boolean"==typeof N&&N}),onClick:()=>{return a=o.value,void(C||l({target:{name:e,value:a}}));var a}},a.createElement(g,{ref:f,inputClassName:r(d,i({},v?{[q]:!0}:{})),labelClassName:c,checked:o.value===n,label:o.label,value:o.value,error:N&&"boolean"==typeof N,disabled:C,name:e,onChange:l}))))),R&&a.createElement("div",{className:r(E,i({},b?{[b]:!0}:{}))},R))}));_.displayName="RadioCards";var D=_;export{D as default};