@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 21.3 kB
JavaScript
var i=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?i(...t):typeof t=="object"?Object.keys(t).map((o,a)=>t[a]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var _=(e,t)=>i({[`${e}-xs`]:t.size==="xsmall",[`${e}-sm`]:t.size==="small",[`${e}-md`]:t.size==="medium",[`${e}-lg`]:t.size==="large",[`${e}-xl`]:t.size==="xlarge",[`${e}-xxl`]:t.size==="xxlarge",[`${e}-xxxl`]:t.size==="xxxlarge"},{[`${e}-${t.fillMode}`]:t.fillMode},{[`${e}-${t.themeColor}`]:t.themeColor},{"k-rounded-sm":t.rounded==="small","k-rounded-md":t.rounded==="medium","k-rounded-lg":t.rounded==="large","k-rounded-full":t.rounded==="full","k-rounded-none":t.rounded==="none"}),U=(e,t)=>{let{valid:o,invalid:a,hover:r,focus:u,checked:l,active:m,selected:I,disabled:f,indeterminate:d,loading:b,empty:x,readonly:T,highlighted:C,...y}=t;return i({"k-valid":o,"k-invalid":a,"k-hover":r,"k-focus":u,"k-checked":l,"k-active":m,"k-selected":I,"k-disabled":f,"k-indeterminate":d&&!l,"k-loading":b,"k-empty":x,"k-readonly":T,"k-highlighted":C},Object.keys(y).reduce((M,L)=>(L.startsWith("k-")?M[L]=y[L]:M[`k-${L}`]=y[L],M),{}))};function ye(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];return Object.fromEntries(o.map(a=>[`k-${a}`,!0]))}var s={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},S={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},A={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},B={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},n={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},p={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"};import{Fragment as dt,jsx as Oe}from"react/jsx-runtime";var ae="k-font-icon",mt=[],ct={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info]},pt={},q=e=>{let{size:t,themeColor:o,icon:a,rotate:r,flip:u,...l}=e;return a?Oe("span",{...l,className:i(e.className,ae,_(ae,{size:t}),{[`k-i-${a}`]:a,[`k-color-${o}`]:o,[`k-rotate-${r}`]:r,"k-flip-h":u==="h"||u==="both","k-flip-v":u==="v"||u==="both"}),"aria-hidden":"true"}):Oe(dt,{})};q.states=mt;q.options=ct;q.className=ae;q.defaultOptions=pt;var we=q;import{Fragment as xt,jsx as te}from"react/jsx-runtime";var ie="k-svg-icon",ft=[],bt={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[B.outline,B.solid,B.duotone]},le={viewBox:"0 0 24 24",variant:B.outline},Q=e=>{let{size:t,themeColor:o,rotate:a,flip:r,viewBox:u=le.viewBox,variant:l=le.variant,icon:m,...I}=e;if(!m)return te(xt,{});if(m==="none")return te("span",{...I,className:i(e.className,ie,_("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let f=typeof m=="object"&&m.name&&m.name,d=typeof m=="object"?l&&m.variants?.[l]||m.variants?.outline||m.content:void 0;return te("span",{...I,className:i(e.className,ie,_("k-icon",{size:t}),{[`k-svg-i-${f}`]:f,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:te("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof m=="object"?m.viewBox:u,dangerouslySetInnerHTML:d!==void 0?{__html:d}:void 0,children:m?void 0:e.children})})};Q.states=ft;Q.options=bt;Q.className=ie;Q.defaultOptions=le;var ue=Q;import*as me from"@progress/kendo-svg-icons";var Te="icon",Ce="icons";import{useContext as ht}from"react";import{createContext as Mt}from"react";var _e=Mt({iconsType:"svg"});import{Fragment as Pe,jsx as Y}from"react/jsx-runtime";var oe="k-icon",Nt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),It=[],vt={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[B.outline,B.solid,B.duotone]},ne={viewBox:"0 0 24 24",type:"svg",variant:B.outline},h=e=>{let{iconsType:t}=ht(_e),{size:o,themeColor:a,icon:r,type:u=t||ne.type,rotate:l,flip:m,viewBox:I=ne.viewBox,variant:f=ne.variant,...d}=e;if(!r)return Y(Pe,{});if((t||u)==="svg"){if(r==="none")return Y(ue,{...d,className:i(e.className,oe),icon:r,size:o,variant:f});let x=me[r]?r:Nt(`${r}-icon`);return me[x]?Y(ue,{...d,className:i(e.className,oe),icon:me[x],size:o,themeColor:a,rotate:l,flip:m,viewBox:I,variant:f}):Y(Pe,{})}return Y(we,{...d,className:i(e.className,oe),icon:r,size:o,themeColor:a,rotate:l,flip:m})};h.states=It;h.options=vt;h.defaultOptions=ne;h.className=oe;h.moduleName=Te;h.folderName=Ce;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 ce="button",Be=ce;import{Fragment as Ke,jsx as V,jsxs as Re}from"react/jsx-runtime";var Z="k-button",gt=["icon-button"],kt=[p.hover,p.focus,p.active,p.selected,p.disabled,p.generating],St={size:[s.undefined,s.xsmall,s.small,s.medium,s.large],rounded:[S.undefined,S.none,S.small,S.medium,S.large,S.full],fillMode:[A.undefined,A.solid,A.flat,A.outline,A.clear,A.link],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.inverse]},pe={showArrow:!1,arrowIconName:"chevron-down"},c=e=>{let{as:t="button",size:o,rounded:a,fillMode:r,themeColor:u,showArrow:l=pe.showArrow,arrowIconName:m=pe.arrowIconName,variant:I,hover:f,focus:d,active:b,selected:x,disabled:T,togglable:C,ariaDisabled:y,icon:M,iconSize:L,text:R,iconClassName:st,className:at,...it}=e,lt=M!=null,ut=e.children!==void 0;return Re(t,{className:i(at,Z,ye(Z,I),_(Z,{size:o,rounded:a,fillMode:r,themeColor:u}),U(Z,{hover:f,focus:d,active:b,disabled:T||y,selected:x}),{"k-icon-button":!R&&!ut&<}),"aria-pressed":C?x?"true":"false":void 0,...it,"aria-disabled":y?"true":void 0,disabled:T||void 0,children:[typeof M=="string"&&M&&V(h,{className:i(st,"k-button-icon"),icon:M,size:L}),M&&typeof M!="string"&&V(Ke,{children:M}),R?Re(Ke,{children:[R&&V("span",{className:"k-button-text",children:R}),e.children]}):e.children&&V("span",{className:"k-button-text",children:e.children}),l&&V("span",{className:"k-menu-button-arrow k-button-arrow",children:V(h,{icon:m})})]})};c.states=kt;c.options=St;c.variants=gt;c.className=Z;c.defaultOptions=pe;c.moduleName=ce;c.folderName=Be;c.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 At}from"react/jsx-runtime";var ze=e=>At(c,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as Lt}from"react/jsx-runtime";var Ue=e=>Lt(c,{icon:"folder",children:"Button",...e});import{jsx as Et}from"react/jsx-runtime";var He=e=>Et(c,{children:"Button",...e});import{jsx as de}from"react/jsx-runtime";var yt=c.options,Ot=c.states,wt={...c.defaultOptions,variant:"text"},Tt=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Ct=[],W=e=>{let{variant:t,...o}=e;switch(t){case"icon-only":return de(ze,{...o,icon:"star"});case"icon-and-text":return de(Ue,{...o,icon:"star",children:"Button"});default:return de(He,{...o,children:"Button"})}};W.options=yt;W.states=Ot;W.variants=Tt;W.defaultOptions=wt;W.modifiers=Ct;W.className=c.className;var fe="popup",De=fe;import{jsx as $e}from"react/jsx-runtime";var Fe="k-animation-container",_t=[],Pt={},be={positionMode:"absolute",shown:!0},z=e=>{let{positionMode:t=be.positionMode,shown:o=be.shown,animationStyle:a,offset:r,...u}=e;return $e("div",{...u,style:{...r,...e.style},className:i(e.className,Fe,{"k-animation-container-shown":o,"k-animation-container-fixed":t==="fixed"}),children:$e("div",{className:"k-child-animation-container",style:a,children:e.children})})};z.states=_t;z.options=Pt;z.className=Fe;z.defaultOptions=be;z.moduleName=fe;z.folderName=De;var xe="popup",Ve=xe;import{jsx as We}from"react/jsx-runtime";var Je="k-popup",Bt=[],Kt={},Xe={positionMode:"absolute"},O=e=>{let{offset:t,positionMode:o=Xe.positionMode,animationStyle:a,containerClassName:r,containerRole:u,containerAriaLabel:l,...m}=e;return We(z,{positionMode:o,offset:t,animationStyle:a,className:r,role:u,"aria-label":l,children:We("div",{...m,className:i(e.className,Je),children:e.children})})};O.states=Bt;O.options=Kt;O.className=Je;O.defaultOptions=Xe;O.moduleName=xe;O.folderName=Ve;O.ariaSpec={selector:".k-popup",rules:[{selector:".k-animation-container",attribute:"role (when appended to body)",usage:'Container gets role="region" when appended to document body. Popup is a building block \u2014 ARIA semantics come from consuming components.'}]};var Me="split-button",Ge=Me;import{Fragment as Ut,jsx as he,jsxs as qe}from"react/jsx-runtime";var Ne="k-split-button",Rt=[p.hover,p.focus,p.active,p.selected,p.disabled],zt={size:[s.undefined,s.small,s.medium,s.large],rounded:[S.undefined,S.none,S.small,S.medium,S.large,S.full],fillMode:[A.undefined,A.solid,A.flat,A.outline,A.clear,A.link],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.inverse]},Qe={arrowIconName:"chevron-down"},g=e=>{let{size:t,rounded:o,fillMode:a,themeColor:r,hover:u,focus:l,active:m,selected:I,disabled:f,icon:d,text:b,arrowIconName:x=Qe.arrowIconName,popup:T,opened:C,popupId:y,...M}=e;return qe(Ut,{children:[qe("div",{...M,className:i(e.className,Ne,"k-button-group",_(Ne,{rounded:o})),children:[he(c,{text:b,icon:d,size:t,rounded:o,fillMode:a,themeColor:r,hover:u,focus:l,active:m,selected:I,disabled:f,...!b&&!e.children&&d&&{"aria-label":"Action"},children:e.children}),he(c,{className:"k-split-button-arrow",icon:x,size:t,rounded:o,fillMode:a,disabled:f,ariaDisabled:f||void 0,"aria-label":"Toggle dropdown","aria-expanded":C?"true":"false","aria-controls":C?y:void 0,tabIndex:-1})]}),C&&T&&he(O,{className:"k-menu-popup",children:T})]})};g.states=Rt;g.options=zt;g.className=Ne;g.defaultOptions=Qe;g.moduleName=Me;g.folderName=Ge;g.ariaSpec={selector:".k-split-button",rules:[{selector:".k-split-button-arrow",attribute:"role=button or nodeName=button",usage:"Omitted if the <button> DOM element is used."},{selector:".k-split-button-arrow",attribute:"aria-label",usage:"The attribute must be present when no text is initially visible in the button."},{selector:".k-split-button-arrow",attribute:"aria-expanded=true/false",usage:"Announces the state of the popup visibility."},{selector:".k-split-button-arrow",attribute:"aria-controls=.k-menu-group id (when open)",usage:"Points to the popup element. Builds a relationship between the button and the popup."},{selector:".k-split-button-arrow",attribute:"tabindex=-1",usage:"The arrow button is removed from the tab sequence."},{selector:".k-split-button-arrow.k-disabled",attribute:"aria-disabled=true",usage:"Rendered only when the button is disabled."},{selector:".k-menu-group",attribute:"role=list",usage:"Announces the list role of the popup."},{selector:".k-menu-item",attribute:"role=listitem",usage:"Announces the listitem role of the popup items."}]};var E="menu",w=E;import{jsx as j,jsxs as Ye}from"react/jsx-runtime";var Ie="k-menu-item",Ht=[p.hover,p.focus,p.active,p.selected,p.disabled],Dt={},Ze={iconPosition:"before"},v=e=>{let{hover:t,focus:o,active:a,selected:r,disabled:u,icon:l,text:m,first:I,last:f,showArrow:d,arrowIconName:b,iconPosition:x=Ze.iconPosition,dir:T,children:C,expanded:y,...M}=e,L=b;return L||(L=T==="rtl"?"chevron-left":"chevron-right"),Ye("li",{...M,className:i(e.className,Ie,"k-item",U(Ie,{focus:o,disabled:u,hover:t,active:a,selected:r}),{"k-first":I,"k-last":f}),role:"menuitem",...d&&{"aria-haspopup":"menu"},...d&&{"aria-expanded":y?"true":"false"},...u&&{"aria-disabled":"true"},...o&&{tabIndex:0},children:[Ye("span",{className:i("k-link k-menu-link"),children:[l&&x==="before"&&j(h,{className:"k-menu-link-icon",icon:l}),j("span",{className:"k-menu-link-text",children:m}),l&&x==="after"&&j(h,{className:"k-menu-link-icon",icon:l}),d&&j("span",{className:"k-menu-expand-arrow","aria-hidden":"true",children:j(h,{icon:L})})]}),C]})};v.states=Ht;v.options=Dt;v.className=Ie;v.defaultOptions=Ze;v.moduleName=E;v.folderName=w;import{jsx as ee,jsxs as je}from"react/jsx-runtime";var ve="k-menu-item",$t=[p.hover,p.focus,p.active,p.selected,p.disabled],Ft={},ge={dir:"ltr",iconPosition:"before"},k=e=>{let{hover:t,focus:o,active:a,selected:r,disabled:u,icon:l,text:m,first:I,last:f,showArrow:d,arrowIconName:b,iconPosition:x=ge.iconPosition,dir:T=ge.dir,children:C,popup:y,expanded:M,...L}=e,R=b;return R||(R=T==="rtl"?"chevron-left":"chevron-right"),je("li",{role:"menuitem",...L,className:i(e.className,ve,"k-item",U(ve,{focus:o,disabled:u}),{"k-first":I,"k-last":f}),...d&&{"aria-haspopup":"menu"},...d&&{"aria-expanded":M?"true":"false"},...u&&{"aria-disabled":"true"},...o&&{tabIndex:0},children:[je("span",{className:i("k-link k-menu-link",U("k-menu-link",{hover:t,active:a,selected:r,disabled:u})),children:[l&&x==="before"&&ee(h,{className:"k-menu-link-icon",icon:l}),ee("span",{className:"k-menu-link-text",children:m}),l&&x==="after"&&ee(h,{className:"k-menu-link-icon",icon:l}),d&&ee("span",{className:"k-menu-expand-arrow","aria-hidden":"true",children:ee(h,{icon:R})})]}),C,y]})};k.states=$t;k.options=Ft;k.className=ve;k.defaultOptions=ge;k.moduleName=E;k.folderName=w;import{jsx as Xt}from"react/jsx-runtime";var et="k-menu-scroll-wrapper",Vt=[],Wt={},Jt={},H=e=>{let{className:t,children:o,orientation:a,...r}=e;return Xt("div",{...r,className:i(t,et,{"k-menu-scroll-wrapper-vertical":a==="vertical"}),children:o})};H.states=Vt;H.options=Wt;H.className=et;H.defaultOptions=Jt;H.moduleName=E;H.folderName=w;var tt=H;import{Fragment as ke,jsx as D,jsxs as re}from"react/jsx-runtime";var Se="k-menu",Gt=[],qt={},se={orientation:"horizontal",header:!0,scrollButtonsPosition:"around"},N=e=>{let{children:t,orientation:o=se.orientation,header:a=se.header,scrollable:r,scrollButtonsPosition:u=se.scrollButtonsPosition,wrapperStyles:l,dir:m,popup:I,contextMenu:f,...d}=e,b={horizontal:{prev:m!=="rtl"?"left":"right",next:m!=="rtl"?"right":"left"},vertical:{prev:"up",next:"down"}},x=D("ul",{dir:m,...d,className:i(e.className,"k-reset",Se,{[`${Se}-${o}`]:o,"k-header":a}),role:f?"menu":"menubar",...o==="vertical"&&{"aria-orientation":"vertical"},children:t});return re(ke,{children:[r?re(tt,{orientation:o,style:l,dir:e.dir,children:[u==="start"&&re(ke,{children:[D(c,{fillMode:"flat",icon:`chevron-${b[o].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev",tabIndex:-1,"aria-label":"Scroll previous"}),D(c,{fillMode:"flat",icon:`chevron-${b[o].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next",tabIndex:-1,"aria-label":"Scroll next"})]}),u==="around"&&D(c,{fillMode:"flat",icon:`chevron-${b[o].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev",tabIndex:-1,"aria-label":"Scroll previous"}),x,u==="end"&&re(ke,{children:[D(c,{fillMode:"flat",icon:`chevron-${b[o].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev",tabIndex:-1,"aria-label":"Scroll previous"}),D(c,{fillMode:"flat",icon:`chevron-${b[o].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next",tabIndex:-1,"aria-label":"Scroll next"})]}),u==="around"&&D(c,{fillMode:"flat",icon:`chevron-${b[o].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next",tabIndex:-1,"aria-label":"Scroll next"})]}):x,I]})};N.states=Gt;N.options=qt;N.className=Se;N.defaultOptions=se;N.moduleName=E;N.folderName=w;N.ariaSpec={selector:".k-menu",rules:[{selector:".k-menu:not(.k-context-menu)",attribute:"role=menubar",usage:"Announces the Menu menubar role."},{selector:".k-menu.k-menu-vertical",attribute:"aria-orientation=vertical",usage:"Announces the Menu orientation when vertical."},{selector:".k-menu-item",attribute:"role=menuitem",usage:"Announces the Menu item role."},{selector:".k-menu-item",attribute:"aria-haspopup=menu (when present)",usage:"Indicates a popup menu is associated with the item."},{selector:".k-menu-item",attribute:"aria-expanded=true/false (when present)",usage:"Indicates whether the submenu is expanded."},{selector:".k-menu-item.k-disabled",attribute:"aria-disabled=true",usage:"Informs assistive technologies that a Menu item is disabled."},{selector:".k-menu-expand-arrow",attribute:"aria-hidden=true",usage:"Expand arrow elements are hidden from assistive technologies."},{selector:".k-menu-popup .k-menu-group",attribute:"role=menu",usage:"The role of the nested menu displayed in a popup."},{selector:".k-menu-scroll-button",attribute:"tabindex=-1",usage:"Scroll buttons are removed from the tab sequence."},{selector:".k-menu-scroll-button",attribute:"aria-label",usage:"Scroll buttons have an accessible label."},{selector:".k-menu-item.k-focus",attribute:"tabindex=0",usage:"The focused item has tabindex 0."},{selector:".k-menu-item",attribute:"aria-controls=ul.k-menu-group id (when present)",usage:"Points to the ID of the submenu. Only present when the item controls a submenu element."},{selector:".k-menu-popup .k-menu-group",attribute:"id",usage:"Each nested menu has a deterministic id linked to the parent aria-controls."}]};import{jsx as Qt}from"react/jsx-runtime";var Ae="k-separator",ot={orientation:"horizontal"},J=e=>{let{orientation:t=ot.orientation,...o}=e;return Qt("li",{...o,className:i(e.className,"k-item",Ae,{[`${Ae}-${t}`]:t}),role:"separator"})};J.className=Ae;J.defaultOptions=ot;J.moduleName=E;J.folderName=w;import{Fragment as br,jsx as xr}from"react/jsx-runtime";import{jsx as eo}from"react/jsx-runtime";var Le="k-menu-group",Yt=[],Zt={size:[s.undefined,s.small,s.medium,s.large]},jt={},P=e=>{let{children:t,size:o,...a}=e;return eo("ul",{role:"menu",...a,className:i(e.className,Le,_(Le,{size:o})),children:t})};P.states=Yt;P.options=Zt;P.className=Le;P.defaultOptions=jt;P.moduleName=E;P.folderName=w;import{Fragment as to,jsx as X,jsxs as oo}from"react/jsx-runtime";var Ee=e=>X(N,{children:oo(to,{children:[X(v,{first:!0,text:"Item 1"}),X(v,{showArrow:!0,arrowIconName:"chevron-down",text:"Item 2"}),X(v,{showArrow:!0,arrowIconName:"chevron-down",text:"Item 3"}),X(v,{text:"Item 4"}),X(v,{last:!0,text:"Item 5"})]}),...e});import{Fragment as wr,jsx as yr,jsxs as Or}from"react/jsx-runtime";import{Fragment as Br,jsx as Pr,jsxs as Kr}from"react/jsx-runtime";import{Fragment as Dr,jsx as Hr,jsxs as $r}from"react/jsx-runtime";import{Fragment as Xr,jsx as Jr,jsxs as Gr}from"react/jsx-runtime";import{jsx as $,jsxs as io}from"react/jsx-runtime";var no={...N.options,scrollable:{type:"boolean"}},ro=N.states,nt={...N.defaultOptions,variant:"horizontal"},so=[{name:"horizontal",title:"Horizontal"},{name:"vertical",title:"Vertical"}],ao=[{name:"opened",title:"Opened"}],G=e=>{let{variant:t,modifiers:o,...a}={...nt,...e},r={},u=t==="vertical"?{left:"200px",top:"30px"}:{left:"90px",top:"auto"};return Object.keys(o||{}).forEach(l=>{l==="opened"&&(r.opened=!!o?.[l],r.popup=o?.[l]?$(O,{className:"k-menu-popup",offset:u,children:io(P,{children:[$(k,{text:"Item 1"}),$(k,{text:"Item 2"}),$(J,{}),$(k,{text:"Item 3"})]})}):null)}),t==="vertical"?$(Ee,{...a,...r,orientation:"vertical",style:{width:"200px"}}):$(Ee,{...a,...r})};G.options=no;G.states=ro;G.variants=so;G.defaultOptions=nt;G.modifiers=ao;G.className=N.className;import{jsx as K,jsxs as po}from"react/jsx-runtime";var lo=g.states,rt={...g.defaultOptions,variant:"text"},uo=g.options,mo=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],co=[{name:"opened",title:"Opened"}],F=e=>{let{variant:t,modifiers:o,...a}={...rt,...e},r={},u=po(P,{size:a.size,children:[K(k,{first:!0,text:"Menu Item"}),K(k,{text:"Menu Item"}),K(k,{last:!0,text:"Menu Item"})]});switch(Object.keys(o||{}).forEach(l=>{l==="opened"&&(r.opened=!!o?.[l],r.popup=o?.[l]?u:"")}),t){case"icon-only":return K("div",{children:K(g,{...a,...r,icon:"star"})});case"icon-and-text":return K("div",{children:K(g,{...a,...r,icon:"star",children:"Split Button"})});default:return K("div",{children:K(g,{...a,...r,children:"Split Button"})})}};F.options=uo;F.states=lo;F.variants=mo;F.defaultOptions=rt;F.modifiers=co;F.className=g.className;var gs=F;export{F as SplitButtonDemo,gs as default};