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