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

A collection of HTML helpers used for developing Kendo UI themes

var u=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?u(...e):typeof e=="object"?Object.keys(e).map((i,r)=>e[r]||e[i]&&i||null).filter(i=>i!==null).join(" "):e).filter(e=>!!e).join(" ");var v=(t,e)=>u({[`${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"}),G=(t,e)=>{let{valid:i,invalid:r,hover:a,focus:m,checked:p,active:l,selected:B,disabled:g,indeterminate:x,loading:L,empty:k,readonly:K,highlighted:F,...M}=e;return u({"k-valid":i,"k-invalid":r,"k-hover":a,"k-focus":m,"k-checked":p,"k-active":l,"k-selected":B,"k-disabled":g,"k-indeterminate":x&&!p,"k-loading":L,"k-empty":k,"k-readonly":K,"k-highlighted":F},Object.keys(M).reduce((f,O)=>(O.startsWith("k-")?f[O]=M[O]:f[`k-${O}`]=M[O],f),{}))};function j(t,e){if(!e)return{};let i=Array.isArray(e)?e:[e];return Object.fromEntries(i.map(r=>[`k-${r}`,!0]))}var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},T={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},d={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},b={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},N={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 D="button",ee=D;import{jsx as ye}from"react/jsx-runtime";var w="k-button-group",ge=[N.disabled],ve={fillMode:[d.undefined,d.solid,d.flat,d.outline,d.clear,d.link]},Ne={},c=t=>{let{fillMode:e,disabled:i,stretched:r,...a}=t;return ye("div",{role:"group",...a,className:u(t.className,w,v(w,{fillMode:e}),G(w,{disabled:i}),{[`${w}-stretched`]:r}),...i&&{"aria-disabled":"true"},children:t.children})};c.states=ge;c.options=ve;c.className=w;c.defaultOptions=Ne;c.moduleName=D;c.folderName=ee;c.ariaSpec={selector:".k-button-group",rules:[{selector:".k-button-group:not(.k-split-button)",attribute:"role=group",usage:"Sets the proper role for the group of buttons."},{selector:".k-button-group.k-disabled",attribute:"aria-disabled=true",usage:"The attribute is rendered only when the entire button group is disabled."},{selector:".k-button-group:not(.k-split-button):not(.k-scheduler-navigation):not(.k-zoom-control) .k-button",attribute:"aria-pressed (when selected)",usage:"Specifies the current state of the ButtonGroup. Only the selected button within the group will have this attribute set to true."}]};import{Fragment as Te,jsx as te}from"react/jsx-runtime";var H="k-font-icon",Be=[],ke={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info]},Oe={},A=t=>{let{size:e,themeColor:i,icon:r,rotate:a,flip:m,...p}=t;return r?te("span",{...p,className:u(t.className,H,v(H,{size:e}),{[`k-i-${r}`]:r,[`k-color-${i}`]:i,[`k-rotate-${a}`]:a,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"}),"aria-hidden":"true"}):te(Te,{})};A.states=Be;A.options=ke;A.className=H;A.defaultOptions=Oe;var oe=A;import{Fragment as Se,jsx as P}from"react/jsx-runtime";var V="k-svg-icon",Ce=[],Me={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[b.outline,b.solid,b.duotone]},q={viewBox:"0 0 24 24",variant:b.outline},_=t=>{let{size:e,themeColor:i,rotate:r,flip:a,viewBox:m=q.viewBox,variant:p=q.variant,icon:l,...B}=t;if(!l)return P(Se,{});if(l==="none")return P("span",{...B,className:u(t.className,V,v("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let g=typeof l=="object"&&l.name&&l.name,x=typeof l=="object"?p&&l.variants?.[p]||l.variants?.outline||l.content:void 0;return P("span",{...B,className:u(t.className,V,v("k-icon",{size:e}),{[`k-svg-i-${g}`]:g,[`k-color-${i}`]:i,[`k-rotate-${r}`]:r,"k-flip-h":a==="h"||a==="both","k-flip-v":a==="v"||a==="both"}),"aria-hidden":"true",children:P("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof l=="object"?l.viewBox:m,dangerouslySetInnerHTML:x!==void 0?{__html:x}:void 0,children:l?void 0:t.children})})};_.states=Ce;_.options=Me;_.className=V;_.defaultOptions=q;var W=_;import*as J from"@progress/kendo-svg-icons";var ne="icon",re="icons";import{useContext as we}from"react";import{createContext as Ie}from"react";var se=Ie({iconsType:"svg"});import{Fragment as ie,jsx as z}from"react/jsx-runtime";var U="k-icon",Ae=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),_e=[],ze={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[b.outline,b.solid,b.duotone]},$={viewBox:"0 0 24 24",type:"svg",variant:b.outline},h=t=>{let{iconsType:e}=we(se),{size:i,themeColor:r,icon:a,type:m=e||$.type,rotate:p,flip:l,viewBox:B=$.viewBox,variant:g=$.variant,...x}=t;if(!a)return z(ie,{});if((e||m)==="svg"){if(a==="none")return z(W,{...x,className:u(t.className,U),icon:a,size:i,variant:g});let k=J[a]?a:Ae(`${a}-icon`);return J[k]?z(W,{...x,className:u(t.className,U),icon:J[k],size:i,themeColor:r,rotate:p,flip:l,viewBox:B,variant:g}):z(ie,{})}return z(oe,{...x,className:u(t.className,U),icon:a,size:i,themeColor:r,rotate:p,flip:l})};h.states=_e;h.options=ze;h.defaultOptions=$;h.className=U;h.moduleName=ne;h.folderName=re;h.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var Q="button",ae=Q;import{Fragment as le,jsx as S,jsxs as ue}from"react/jsx-runtime";var E="k-button",Ee=["icon-button"],Le=[N.hover,N.focus,N.active,N.selected,N.disabled,N.generating],Ke={size:[n.undefined,n.xsmall,n.small,n.medium,n.large],rounded:[T.undefined,T.none,T.small,T.medium,T.large,T.full],fillMode:[d.undefined,d.solid,d.flat,d.outline,d.clear,d.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},X={showArrow:!1,arrowIconName:"chevron-down"},s=t=>{let{as:e="button",size:i,rounded:r,fillMode:a,themeColor:m,showArrow:p=X.showArrow,arrowIconName:l=X.arrowIconName,variant:B,hover:g,focus:x,active:L,selected:k,disabled:K,togglable:F,ariaDisabled:M,icon:f,iconSize:O,text:R,iconClassName:pe,className:fe,...xe}=t,be=f!=null,he=t.children!==void 0;return ue(e,{className:u(fe,E,j(E,B),v(E,{size:i,rounded:r,fillMode:a,themeColor:m}),G(E,{hover:g,focus:x,active:L,disabled:K||M,selected:k}),{"k-icon-button":!R&&!he&&be}),"aria-pressed":F?k?"true":"false":void 0,...xe,"aria-disabled":M?"true":void 0,disabled:K||void 0,children:[typeof f=="string"&&f&&S(h,{className:u(pe,"k-button-icon"),icon:f,size:O}),f&&typeof f!="string"&&S(le,{children:f}),R?ue(le,{children:[R&&S("span",{className:"k-button-text",children:R}),t.children]}):t.children&&S("span",{className:"k-button-text",children:t.children}),p&&S("span",{className:"k-menu-button-arrow k-button-arrow",children:S(h,{icon:l})})]})};s.states=Le;s.options=Ke;s.variants=Ee;s.className=E;s.defaultOptions=X;s.moduleName=Q;s.folderName=ae;s.ariaSpec={selector:".k-button",rules:[{selector:".k-button",attribute:"role=button or nodeName=button",usage:"The button role is implicit from the native <button> element."},{selector:".k-button",attribute:"aria-label (when icon-only)",usage:"Required for icon-only buttons that have no visible text."},{selector:".k-button",attribute:"aria-pressed (when togglable)",usage:"Indicates the pressed state of a toggle button."},{selector:".k-button",attribute:"disabled (when disabled)",usage:"Rendered when the button is disabled."}]};import{jsx as Re}from"react/jsx-runtime";var de=t=>Re(s,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as Ge}from"react/jsx-runtime";var ce=t=>Ge(s,{icon:"folder",children:"Button",...t});import{jsx as Pe}from"react/jsx-runtime";var me=t=>Pe(s,{children:"Button",...t});import{jsx as Y}from"react/jsx-runtime";var Ue=s.options,$e=s.states,Fe={...s.defaultOptions,variant:"text"},De=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],He=[],I=t=>{let{variant:e,...i}=t;switch(e){case"icon-only":return Y(de,{...i,icon:"star"});case"icon-and-text":return Y(ce,{...i,icon:"star",children:"Button"});default:return Y(me,{...i,children:"Button"})}};I.options=Ue;I.states=$e;I.variants=De;I.defaultOptions=Fe;I.modifiers=He;I.className=s.className;import{jsx as y,jsxs as Z}from"react/jsx-runtime";var Ve={...s.options,...c.options},qe=s.states,We={...s.defaultOptions,...c.defaultOptions,variant:"text-button"},Je=[{name:"icon-button",title:"Icon Only"},{name:"text-button",title:"Text"},{name:"icon-text-button",title:"Icon Text"}],Qe=[],C=t=>{let{variant:e,className:i,...r}=t;return e==="icon-button"?Z(c,{fillMode:r.fillMode,className:i,children:[y(s,{...r,icon:"star"}),y(s,{...r,icon:"star"}),y(s,{...r,icon:"star"})]}):e==="icon-text-button"?Z(c,{fillMode:r.fillMode,className:i,children:[y(s,{...r,icon:"star",children:"First"}),y(s,{...r,icon:"star",children:"Middle"}),y(s,{...r,icon:"star",children:"Last"})]}):Z(c,{fillMode:r.fillMode,className:i,children:[y(s,{...r,children:"First"}),y(s,{...r,children:"Middle"}),y(s,{...r,children:"Last"})]})};C.options=Ve;C.states=qe;C.variants=Je;C.defaultOptions=We;C.modifiers=Qe;C.className=c.className;var uo=C;export{C as ButtonGroupDemo,uo as default};