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