@progress/kendo-themes-html/dist/esm/radio/demos/radio-group.mjs

A collection of HTML helpers used for developing Kendo UI themes

var r=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?r(...e):typeof e=="object"?Object.keys(e).map((o,f)=>e[f]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var I=(t,e)=>r({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),E=(t,e)=>{let{valid:o,invalid:f,hover:k,focus:x,checked:b,active:v,selected:y,disabled:A,indeterminate:L,loading:K,empty:$,readonly:C,highlighted:H,...M}=e;return r({"k-valid":o,"k-invalid":f,"k-hover":k,"k-focus":x,"k-checked":b,"k-active":v,"k-selected":y,"k-disabled":A,"k-indeterminate":L&&!b,"k-loading":K,"k-empty":$,"k-readonly":C,"k-highlighted":H},Object.keys(M).reduce((N,p)=>(p.startsWith("k-")?N[p]=M[p]:N[`k-${p}`]=M[p],N),{}))};var R={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var d={open:"open",hover:"hover",focus:"focus",active:"active",selected:"selected",disabled:"disabled",valid:"valid",invalid:"invalid",loading:"loading",required:"required",empty:"empty",indeterminate:"indeterminate",checked:"checked",readonly:"readonly",highlighted:"highlighted",generating:"generating",expanded:"expanded"};var O={};function l(t){return O[t]=(O[t]||0)+1,`k-${t}-${O[t]}`}var u="radio",h=u;import{jsx as W}from"react/jsx-runtime";var B="k-radio-list",G=[],P={},w={layout:"vertical"},a=t=>{let{layout:e=w.layout,...o}=t;return W("ul",{...o,className:r(t.className,B,{[`k-list-${e}`]:e}),role:"radiogroup",children:t.children})};a.states=G;a.options=P;a.className=B;a.defaultOptions=w;a.moduleName=u;a.folderName=h;a.ariaSpec={selector:".k-radio-list",rules:[{selector:".k-radio-list",attribute:"role=radiogroup",usage:"Announces the radiogroup role of the element."},{selector:".k-radio-list-item",attribute:"role=none",usage:"Due to issues with nested items, forces a no-role state."},{selector:".k-radio",attribute:"readonly or aria-readonly (when readonly)",usage:"The attribute is rendered only when the radio button is read-only."},{selector:".k-radio",attribute:"aria-invalid=true (when invalid)",usage:"The attribute is rendered only when the radio button is in a form and announces the invalid state of the component."},{selector:".k-radio-list-item.k-disabled .k-radio",attribute:"disabled or aria-disabled (when disabled)",usage:"The attribute is rendered only when the radio button is disabled."}]};import{jsx as V}from"react/jsx-runtime";var D="k-radio-list-item",U=[],q={},F={},i=t=>{let{...e}=t;return V("li",{...e,className:r(t.className,D),role:"none",children:t.children})};i.states=U;i.options=q;i.className=D;i.defaultOptions=F;i.moduleName=u;i.folderName=h;import{jsx as T}from"react/jsx-runtime";var g="k-radio",j=[d.hover,d.focus,d.valid,d.invalid,d.required,d.disabled,d.checked],J={size:[R.undefined,R.small,R.medium,R.large]},Q={},s=t=>{let{id:e,checked:o,hover:f,focus:k,disabled:x,invalid:b,valid:v,required:y,size:A,...L}=t;return T("span",{className:"k-radio-wrap",children:T("input",{...L,id:e,type:"radio",checked:o,required:y,disabled:x||void 0,"aria-invalid":b?"true":void 0,className:r(t.className,g,I(g,{size:A}),E(g,{hover:f,focus:k,disabled:x,invalid:b,valid:v,checked:o}))})})};s.states=j;s.options=J;s.className=g;s.defaultOptions=Q;s.moduleName=u;s.folderName=h;s.ariaSpec={selector:".k-radio",rules:[{selector:".k-radio",attribute:"type=radio",usage:"Announces the radio type of the input."},{selector:".k-radio",attribute:"label for or aria-label or aria-labelledby (when has accessible name)",usage:"The input requires an accessible name to which it will be assigned."},{selector:".k-radio",attribute:"checked (when checked)",usage:"Boolean attribute that announces the checked state of the radio button."},{selector:".k-radio",attribute:"aria-describedby (when has hint or error)",usage:"Points to the hint or error message for the radio."},{selector:".k-radio",attribute:"disabled=disabled or aria-disabled=true (when disabled)",usage:"Rendered only when the radio input is disabled."},{selector:".k-invalid, .ng-invalid",attribute:"aria-invalid=true (when invalid)",usage:"Rendered only when the radio button is in a form and announces the invalid state."}]};var _=s;import{Fragment as X,jsx as z,jsxs as Y}from"react/jsx-runtime";var c=({children:t,id:e,...o})=>Y(X,{children:[z(_,{...o,id:e}),z("label",{className:"k-radio-label",htmlFor:e,children:t})]});import{jsx as n,jsxs as S}from"react/jsx-runtime";var Z=a.options,ee=a.states,te={...a.defaultOptions,variant:"vertical"},oe=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],ae=[],m=t=>{let{variant:e,...o}=t;return e==="horizontal"?S(a,{layout:"horizontal",...o,children:[n(i,{children:n(c,{id:l("rb"),name:"value",defaultChecked:!0,children:"Label"})}),n(i,{children:n(c,{id:l("rb"),name:"value",children:"Label"})}),n(i,{children:n(c,{id:l("rb"),name:"value",children:"Label"})})]}):S(a,{...o,children:[n(i,{children:n(c,{id:l("rb"),name:"value",defaultChecked:!0,children:"Label"})}),n(i,{children:n(c,{id:l("rb"),name:"value",children:"Label"})}),n(i,{children:n(c,{id:l("rb"),name:"value",children:"Label"})})]})};m.options=Z;m.states=ee;m.variants=oe;m.defaultOptions=te;m.modifiers=ae;m.className=a.className;var ze=m;export{m as RadioGroupDemo,ze as default};