@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 25.6 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=(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"}),$=(e,t)=>{let{valid:o,invalid:a,hover:l,focus:u,checked:s,active:m,selected:d,disabled:b,indeterminate:p,loading:h,empty:x,readonly:A,highlighted:C,...S}=t;return i({"k-valid":o,"k-invalid":a,"k-hover":l,"k-focus":u,"k-checked":s,"k-active":m,"k-selected":d,"k-disabled":b,"k-indeterminate":p&&!s,"k-loading":h,"k-empty":x,"k-readonly":A,"k-highlighted":C},Object.keys(S).reduce((I,y)=>(y.startsWith("k-")?I[y]=S[y]:I[`k-${y}`]=S[y],I),{}))};function _e(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];return Object.fromEntries(o.map(a=>[`k-${a}`,!0]))}var r={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},L={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},N={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},R={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 Lt,jsx as Re}from"react/jsx-runtime";var de="k-font-icon",At=[],Et={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]},St={},Z=e=>{let{size:t,themeColor:o,icon:a,rotate:l,flip:u,...s}=e;return a?Re("span",{...s,className:i(e.className,de,E(de,{size:t}),{[`k-i-${a}`]:a,[`k-color-${o}`]:o,[`k-rotate-${l}`]:l,"k-flip-h":u==="h"||u==="both","k-flip-v":u==="v"||u==="both"}),"aria-hidden":"true"}):Re(Lt,{})};Z.states=At;Z.options=Et;Z.className=de;Z.defaultOptions=St;var Ke=Z;import{Fragment as wt,jsx as se}from"react/jsx-runtime";var fe="k-svg-icon",Tt=[],yt={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:[R.outline,R.solid,R.duotone]},be={viewBox:"0 0 24 24",variant:R.outline},j=e=>{let{size:t,themeColor:o,rotate:a,flip:l,viewBox:u=be.viewBox,variant:s=be.variant,icon:m,...d}=e;if(!m)return se(wt,{});if(m==="none")return se("span",{...d,className:i(e.className,fe,E("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let b=typeof m=="object"&&m.name&&m.name,p=typeof m=="object"?s&&m.variants?.[s]||m.variants?.outline||m.content:void 0;return se("span",{...d,className:i(e.className,fe,E("k-icon",{size:t}),{[`k-svg-i-${b}`]:b,[`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",children:se("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof m=="object"?m.viewBox:u,dangerouslySetInnerHTML:p!==void 0?{__html:p}:void 0,children:m?void 0:e.children})})};j.states=Tt;j.options=yt;j.className=fe;j.defaultOptions=be;var Me=j;import*as he from"@progress/kendo-svg-icons";var ze="icon",Ue="icons";import{useContext as Ct}from"react";import{createContext as Ot}from"react";var He=Ot({iconsType:"svg"});import{Fragment as De,jsx as ee}from"react/jsx-runtime";var ie="k-icon",Bt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Pt=[],_t={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:[R.outline,R.solid,R.duotone]},le={viewBox:"0 0 24 24",type:"svg",variant:R.outline},M=e=>{let{iconsType:t}=Ct(He),{size:o,themeColor:a,icon:l,type:u=t||le.type,rotate:s,flip:m,viewBox:d=le.viewBox,variant:b=le.variant,...p}=e;if(!l)return ee(De,{});if((t||u)==="svg"){if(l==="none")return ee(Me,{...p,className:i(e.className,ie),icon:l,size:o,variant:b});let x=he[l]?l:Bt(`${l}-icon`);return he[x]?ee(Me,{...p,className:i(e.className,ie),icon:he[x],size:o,themeColor:a,rotate:s,flip:m,viewBox:d,variant:b}):ee(De,{})}return ee(Ke,{...p,className:i(e.className,ie),icon:l,size:o,themeColor:a,rotate:s,flip:m})};M.states=Pt;M.options=_t;M.defaultOptions=le;M.className=ie;M.moduleName=ze;M.folderName=Ue;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 xe="button",$e=xe;import{Fragment as Fe,jsx as J,jsxs as Ve}from"react/jsx-runtime";var te="k-button",Rt=["icon-button"],Kt=[f.hover,f.focus,f.active,f.selected,f.disabled,f.generating],zt={size:[r.undefined,r.xsmall,r.small,r.medium,r.large],rounded:[L.undefined,L.none,L.small,L.medium,L.large,L.full],fillMode:[N.undefined,N.solid,N.flat,N.outline,N.clear,N.link],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.inverse]},Ne={showArrow:!1,arrowIconName:"chevron-down"},c=e=>{let{as:t="button",size:o,rounded:a,fillMode:l,themeColor:u,showArrow:s=Ne.showArrow,arrowIconName:m=Ne.arrowIconName,variant:d,hover:b,focus:p,active:h,selected:x,disabled:A,togglable:C,ariaDisabled:S,icon:I,iconSize:y,text:z,iconClassName:Nt,className:vt,...It}=e,kt=I!=null,gt=e.children!==void 0;return Ve(t,{className:i(vt,te,_e(te,d),E(te,{size:o,rounded:a,fillMode:l,themeColor:u}),$(te,{hover:b,focus:p,active:h,disabled:A||S,selected:x}),{"k-icon-button":!z&&!gt&&kt}),"aria-pressed":C?x?"true":"false":void 0,...It,"aria-disabled":S?"true":void 0,disabled:A||void 0,children:[typeof I=="string"&&I&&J(M,{className:i(Nt,"k-button-icon"),icon:I,size:y}),I&&typeof I!="string"&&J(Fe,{children:I}),z?Ve(Fe,{children:[z&&J("span",{className:"k-button-text",children:z}),e.children]}):e.children&&J("span",{className:"k-button-text",children:e.children}),s&&J("span",{className:"k-menu-button-arrow k-button-arrow",children:J(M,{icon:m})})]})};c.states=Kt;c.options=zt;c.variants=Rt;c.className=te;c.defaultOptions=Ne;c.moduleName=xe;c.folderName=$e;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 Ut}from"react/jsx-runtime";var We=e=>Ut(c,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as Ht}from"react/jsx-runtime";var Je=e=>Ht(c,{icon:"folder",children:"Button",...e});import{jsx as Dt}from"react/jsx-runtime";var Xe=e=>Dt(c,{children:"Button",...e});import{jsx as ve}from"react/jsx-runtime";var $t=c.options,Ft=c.states,Vt={...c.defaultOptions,variant:"text"},Wt=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Jt=[],X=e=>{let{variant:t,...o}=e;switch(t){case"icon-only":return ve(We,{...o,icon:"star"});case"icon-and-text":return ve(Je,{...o,icon:"star",children:"Button"});default:return ve(Xe,{...o,children:"Button"})}};X.options=$t;X.states=Ft;X.variants=Wt;X.defaultOptions=Vt;X.modifiers=Jt;X.className=c.className;var Ie="menu-button",Ge=Ie;import{jsx as qt}from"react/jsx-runtime";var qe="k-menu-button",Xt=[f.hover,f.focus,f.active,f.selected,f.disabled],Gt={size:[r.undefined,r.xsmall,r.small,r.medium,r.large],rounded:[L.undefined,L.none,L.small,L.medium,L.large,L.full],fillMode:[N.undefined,N.solid,N.flat,N.outline,N.clear,N.link],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.inverse]},ke={showArrow:!0,arrowIconName:"chevron-down"},T=e=>{let{size:t,rounded:o,fillMode:a,themeColor:l,hover:u,focus:s,active:m,selected:d,disabled:b,icon:p,text:h,showArrow:x=ke.showArrow,arrowIconName:A=ke.arrowIconName,expanded:C,...S}=e;return qt(c,{...S,className:i(e.className,qe),text:h,size:t,rounded:o,fillMode:a,themeColor:l,hover:u,focus:s,active:m,selected:d,disabled:b,ariaDisabled:b||void 0,icon:p,showArrow:x,arrowIconName:A,"aria-expanded":C?"true":"false",...!h&&p&&!e["aria-label"]&&{"aria-label":"Menu"}})};T.states=Xt;T.options=Gt;T.className=qe;T.defaultOptions=ke;T.moduleName=Ie;T.folderName=Ge;T.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."}]};import{jsx as Yn}from"react/jsx-runtime";import{jsx as tr}from"react/jsx-runtime";import{jsx as ar}from"react/jsx-runtime";var w="menu",B=w;import{jsx as oe,jsxs as Qe}from"react/jsx-runtime";var ge="k-menu-item",Qt=[f.hover,f.focus,f.active,f.selected,f.disabled],Yt={},Ye={iconPosition:"before"},k=e=>{let{hover:t,focus:o,active:a,selected:l,disabled:u,icon:s,text:m,first:d,last:b,showArrow:p,arrowIconName:h,iconPosition:x=Ye.iconPosition,dir:A,children:C,expanded:S,...I}=e,y=h;return y||(y=A==="rtl"?"chevron-left":"chevron-right"),Qe("li",{...I,className:i(e.className,ge,"k-item",$(ge,{focus:o,disabled:u,hover:t,active:a,selected:l}),{"k-first":d,"k-last":b}),role:"menuitem",...p&&{"aria-haspopup":"menu"},...p&&{"aria-expanded":S?"true":"false"},...u&&{"aria-disabled":"true"},...o&&{tabIndex:0},children:[Qe("span",{className:i("k-link k-menu-link"),children:[s&&x==="before"&&oe(M,{className:"k-menu-link-icon",icon:s}),oe("span",{className:"k-menu-link-text",children:m}),s&&x==="after"&&oe(M,{className:"k-menu-link-icon",icon:s}),p&&oe("span",{className:"k-menu-expand-arrow","aria-hidden":"true",children:oe(M,{icon:y})})]}),C]})};k.states=Qt;k.options=Yt;k.className=ge;k.defaultOptions=Ye;k.moduleName=w;k.folderName=B;import{jsx as ne,jsxs as Ze}from"react/jsx-runtime";var Ae="k-menu-item",Zt=[f.hover,f.focus,f.active,f.selected,f.disabled],jt={},Ee={dir:"ltr",iconPosition:"before"},g=e=>{let{hover:t,focus:o,active:a,selected:l,disabled:u,icon:s,text:m,first:d,last:b,showArrow:p,arrowIconName:h,iconPosition:x=Ee.iconPosition,dir:A=Ee.dir,children:C,popup:S,expanded:I,...y}=e,z=h;return z||(z=A==="rtl"?"chevron-left":"chevron-right"),Ze("li",{role:"menuitem",...y,className:i(e.className,Ae,"k-item",$(Ae,{focus:o,disabled:u}),{"k-first":d,"k-last":b}),...p&&{"aria-haspopup":"menu"},...p&&{"aria-expanded":I?"true":"false"},...u&&{"aria-disabled":"true"},...o&&{tabIndex:0},children:[Ze("span",{className:i("k-link k-menu-link",$("k-menu-link",{hover:t,active:a,selected:l,disabled:u})),children:[s&&x==="before"&&ne(M,{className:"k-menu-link-icon",icon:s}),ne("span",{className:"k-menu-link-text",children:m}),s&&x==="after"&&ne(M,{className:"k-menu-link-icon",icon:s}),p&&ne("span",{className:"k-menu-expand-arrow","aria-hidden":"true",children:ne(M,{icon:z})})]}),C,S]})};g.states=Zt;g.options=jt;g.className=Ae;g.defaultOptions=Ee;g.moduleName=w;g.folderName=B;import{jsx as no}from"react/jsx-runtime";var je="k-menu-scroll-wrapper",eo=[],to={},oo={},F=e=>{let{className:t,children:o,orientation:a,...l}=e;return no("div",{...l,className:i(t,je,{"k-menu-scroll-wrapper-vertical":a==="vertical"}),children:o})};F.states=eo;F.options=to;F.className=je;F.defaultOptions=oo;F.moduleName=w;F.folderName=B;var et=F;import{Fragment as Se,jsx as V,jsxs as me}from"react/jsx-runtime";var Le="k-menu",ro=[],ao={},ce={orientation:"horizontal",header:!0,scrollButtonsPosition:"around"},v=e=>{let{children:t,orientation:o=ce.orientation,header:a=ce.header,scrollable:l,scrollButtonsPosition:u=ce.scrollButtonsPosition,wrapperStyles:s,dir:m,popup:d,contextMenu:b,...p}=e,h={horizontal:{prev:m!=="rtl"?"left":"right",next:m!=="rtl"?"right":"left"},vertical:{prev:"up",next:"down"}},x=V("ul",{dir:m,...p,className:i(e.className,"k-reset",Le,{[`${Le}-${o}`]:o,"k-header":a}),role:b?"menu":"menubar",...o==="vertical"&&{"aria-orientation":"vertical"},children:t});return me(Se,{children:[l?me(et,{orientation:o,style:s,dir:e.dir,children:[u==="start"&&me(Se,{children:[V(c,{fillMode:"flat",icon:`chevron-${h[o].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev",tabIndex:-1,"aria-label":"Scroll previous"}),V(c,{fillMode:"flat",icon:`chevron-${h[o].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next",tabIndex:-1,"aria-label":"Scroll next"})]}),u==="around"&&V(c,{fillMode:"flat",icon:`chevron-${h[o].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev",tabIndex:-1,"aria-label":"Scroll previous"}),x,u==="end"&&me(Se,{children:[V(c,{fillMode:"flat",icon:`chevron-${h[o].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev",tabIndex:-1,"aria-label":"Scroll previous"}),V(c,{fillMode:"flat",icon:`chevron-${h[o].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next",tabIndex:-1,"aria-label":"Scroll next"})]}),u==="around"&&V(c,{fillMode:"flat",icon:`chevron-${h[o].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next",tabIndex:-1,"aria-label":"Scroll next"})]}):x,d]})};v.states=ro;v.options=ao;v.className=Le;v.defaultOptions=ce;v.moduleName=w;v.folderName=B;v.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 so}from"react/jsx-runtime";var Te="k-separator",tt={orientation:"horizontal"},G=e=>{let{orientation:t=tt.orientation,...o}=e;return so("li",{...o,className:i(e.className,"k-item",Te,{[`${Te}-${t}`]:t}),role:"separator"})};G.className=Te;G.defaultOptions=tt;G.moduleName=w;G.folderName=B;import{Fragment as Pr,jsx as _r}from"react/jsx-runtime";import{jsx as mo}from"react/jsx-runtime";var ye="k-menu-group",io=[],lo={size:[r.undefined,r.small,r.medium,r.large]},uo={},P=e=>{let{children:t,size:o,...a}=e;return mo("ul",{role:"menu",...a,className:i(e.className,ye,E(ye,{size:o})),children:t})};P.states=io;P.options=lo;P.className=ye;P.defaultOptions=uo;P.moduleName=w;P.folderName=B;import{Fragment as co,jsx as q,jsxs as po}from"react/jsx-runtime";var we=e=>q(v,{children:po(co,{children:[q(k,{first:!0,text:"Item 1"}),q(k,{showArrow:!0,arrowIconName:"chevron-down",text:"Item 2"}),q(k,{showArrow:!0,arrowIconName:"chevron-down",text:"Item 3"}),q(k,{text:"Item 4"}),q(k,{last:!0,text:"Item 5"})]}),...e});var Oe="popup",ot=Oe;import{jsx as nt}from"react/jsx-runtime";var rt="k-animation-container",fo=[],bo={},Ce={positionMode:"absolute",shown:!0},U=e=>{let{positionMode:t=Ce.positionMode,shown:o=Ce.shown,animationStyle:a,offset:l,...u}=e;return nt("div",{...u,style:{...l,...e.style},className:i(e.className,rt,{"k-animation-container-shown":o,"k-animation-container-fixed":t==="fixed"}),children:nt("div",{className:"k-child-animation-container",style:a,children:e.children})})};U.states=fo;U.options=bo;U.className=rt;U.defaultOptions=Ce;U.moduleName=Oe;U.folderName=ot;var Be="popup",at=Be;import{jsx as st}from"react/jsx-runtime";var it="k-popup",Mo=[],ho={},lt={positionMode:"absolute"},O=e=>{let{offset:t,positionMode:o=lt.positionMode,animationStyle:a,containerClassName:l,containerRole:u,containerAriaLabel:s,...m}=e;return st(U,{positionMode:o,offset:t,animationStyle:a,className:l,role:u,"aria-label":s,children:st("div",{...m,className:i(e.className,it),children:e.children})})};O.states=Mo;O.options=ho;O.className=it;O.defaultOptions=lt;O.moduleName=Be;O.folderName=at;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.'}]};import{Fragment as ma,jsx as la,jsxs as ua}from"react/jsx-runtime";import{Fragment as ba,jsx as fa,jsxs as Ma}from"react/jsx-runtime";import{Fragment as Ia,jsx as va,jsxs as ka}from"react/jsx-runtime";import{Fragment as La,jsx as Sa,jsxs as Ta}from"react/jsx-runtime";import{jsx as W,jsxs as ko}from"react/jsx-runtime";var xo={...v.options,scrollable:{type:"boolean"}},No=v.states,ut={...v.defaultOptions,variant:"horizontal"},vo=[{name:"horizontal",title:"Horizontal"},{name:"vertical",title:"Vertical"}],Io=[{name:"opened",title:"Opened"}],Q=e=>{let{variant:t,modifiers:o,...a}={...ut,...e},l={},u=t==="vertical"?{left:"200px",top:"30px"}:{left:"90px",top:"auto"};return Object.keys(o||{}).forEach(s=>{s==="opened"&&(l.opened=!!o?.[s],l.popup=o?.[s]?W(O,{className:"k-menu-popup",offset:u,children:ko(P,{children:[W(g,{text:"Item 1"}),W(g,{text:"Item 2"}),W(G,{}),W(g,{text:"Item 3"})]})}):null)}),t==="vertical"?W(we,{...a,...l,orientation:"vertical",style:{width:"200px"}}):W(we,{...a,...l})};Q.options=xo;Q.states=No;Q.variants=vo;Q.defaultOptions=ut;Q.modifiers=Io;Q.className=v.className;import{Fragment as is,jsx as as,jsxs as ss}from"react/jsx-runtime";import{jsx as cs}from"react/jsx-runtime";import{Fragment as Lo,jsx as K,jsxs as mt}from"react/jsx-runtime";var go=c.states,ct={...c.defaultOptions,variant:"text"},Ao=c.options,Eo=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],So=[{name:"opened",title:"Opened"}],Y=e=>{let{variant:t,modifiers:o,...a}={...ct,...e},l={},u=K(O,{className:"k-menu-popup",children:mt(P,{size:a.size,children:[K(g,{first:!0,text:"Menu Item"}),K(g,{text:"Menu Item"}),K(g,{last:!0,text:"Menu Item"})]})}),s;switch(t){case"icon-only":s=K("div",{children:K(T,{...a,...l,icon:"star"})});break;case"icon-and-text":s=K("div",{children:K(T,{...a,...l,icon:"star",children:"Dropdown Button"})});break;default:s=K("div",{children:K(T,{...a,...l,children:"Dropdown Button"})});break}return mt(Lo,{children:[s,o?.opened&&u]})};Y.options=Ao;Y.states=go;Y.variants=Eo;Y.defaultOptions=ct;Y.modifiers=So;Y.className=T.className;import{jsx as Oo}from"react/jsx-runtime";var pt="k-tabstrip-items",To=[],yo={},wo={tabAlignment:"start"},re=e=>{let{children:t,tabAlignment:o,orientation:a,...l}=e;return Oo("ul",{...l,className:i(e.className,pt,"k-reset",`k-tabstrip-items-${o}`),role:"tablist",...a==="vertical"&&{"aria-orientation":"vertical"},children:t})};re.states=To;re.options=yo;re.className=pt;re.defaultOptions=wo;var dt=re;import{jsx as Po}from"react/jsx-runtime";var ft="k-tabstrip-items-wrapper",Co=[],Bo={},bt={orientation:"horizontal"},ae=e=>{let{children:t,orientation:o=bt.orientation,...a}=e;return Po("div",{...a,className:i(e.className,ft,{"k-hstack":o==="horizontal","k-vstack":o==="vertical"}),children:t})};ae.states=Co;ae.options=Bo;ae.className=ft;ae.defaultOptions=bt;var Mt=ae;var Pe="tabstrip",ht=Pe;import{jsx as _,jsxs as xt}from"react/jsx-runtime";var H="k-tabstrip",_o=[],Ro={size:[r.undefined,r.small,r.medium,r.large]},pe={position:"top",tabAlignment:"start",scrollButtons:"around"},D=e=>{let{size:t,scrollable:o,children:a,tabStripItems:l,tabStripItemsId:u,position:s=pe.position,tabAlignment:m=pe.tabAlignment,scrollButtons:d=pe.scrollButtons,dir:b,scrollingPosition:p,overflow:h,...x}=e,A={top:{prev:b!=="rtl"?"left":"right",next:b!=="rtl"?"right":"left"},bottom:{prev:b!=="rtl"?"left":"right",next:b!=="rtl"?"right":"left"},right:{prev:"up",next:"down"},left:{prev:"up",next:"down"}},C={top:"horizontal",bottom:"horizontal",left:"vertical",right:"vertical"},S={start:"start",center:"center",end:"end",justify:"justify",stretched:"stretched"};return xt("div",{dir:b,...x,className:i(H,e.className,{[`${H}-${s}`]:s,[`${H}-scrollable`]:o,[`${H}-scrollable-overlay`]:o&&(d==="hidden"||!d),[`${H}-scrollable-${p}`]:p&&p!=="both",[`${H}-overflow`]:h},E(H,{size:t})),children:[s==="bottom"&&a,xt(Mt,{orientation:C[s],children:[o&&(d==="around"||d==="start")&&_("span",{className:i("k-tabstrip-prev","k-button",E("k-button",{size:t,fillMode:N.flat}),"k-icon-button"),"aria-hidden":"true",children:_(M,{className:"k-button-icon",icon:`chevron-${A[s].prev}`})}),o&&d==="start"&&_("span",{className:i("k-tabstrip-next","k-button",E("k-button",{size:t,fillMode:N.flat}),"k-icon-button"),"aria-hidden":"true",children:_(M,{className:"k-button-icon",icon:`chevron-${A[s].next}`})}),_(dt,{className:i({"k-tabstrip-items-scroll":o&&d==="hidden"}),tabAlignment:S[m],orientation:C[s],...u&&{id:u},children:l}),o&&d==="end"&&_("span",{className:i("k-tabstrip-prev","k-button",E("k-button",{size:t,fillMode:N.flat}),"k-icon-button"),"aria-hidden":"true",children:_(M,{className:"k-button-icon",icon:`chevron-${A[s].prev}`})}),o&&(d==="around"||d==="end")&&_("span",{className:i("k-tabstrip-next","k-button",E("k-button",{size:t,fillMode:N.flat}),"k-icon-button"),"aria-hidden":"true",children:_(M,{className:"k-button-icon",icon:`chevron-${A[s].next}`})}),h&&_("div",{className:"k-tabstrip-actions k-hstack",children:_(T,{className:"k-tabstrip-overflow-button",icon:"more-vertical",fillMode:"flat",size:t,showArrow:!1})})]}),s!=="bottom"&&a]})};D.states=_o;D.options=Ro;D.className=H;D.defaultOptions=pe;D.moduleName=Pe;D.folderName=ht;D.ariaSpec={selector:".k-tabstrip",rules:[{selector:".k-tabstrip-items",attribute:"role=tablist",usage:"Indicates the tablist role for the ul element."},{selector:".k-tabstrip.k-tabstrip-left .k-tabstrip-items,.k-tabstrip.k-tabstrip-right .k-tabstrip-items",attribute:"aria-orientation=vertical",usage:"Indicates the orientation when vertical."},{selector:".k-tabstrip-item",attribute:"role=tab",usage:"The tab li element."},{selector:".k-tabstrip .k-tabstrip-item.k-active",attribute:"aria-selected=true",usage:"Announces the selected state of the tab."},{selector:".k-tabstrip-content",attribute:"role=tabpanel",usage:"The content div of the tab."},{selector:".k-tabstrip .k-tabstrip-item.k-active",attribute:"aria-controls (when present)",usage:"Announces the relation between the panel and active tab. Only present when tab controls a specific panel."},{selector:".k-tabstrip-content",attribute:"aria-hidden=true (when not active)",usage:"Only if the component implements a feature to control whether the content should be persisted."},{selector:".k-tabstrip-content",attribute:"aria-labelledby (when present)",usage:"Refers to the tab element that controls the panel. Only present when panel has an associated tab."},{selector:".k-tabstrip-scrollable .k-button",attribute:"aria-hidden=true",usage:"Scroll buttons are hidden from assistive technologies."}]};var $s=D;export{H as TABSTRIP_CLASSNAME,D as TabStrip,$s as default};