@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 29.3 kB
JavaScript
var r=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?r(...e):typeof e=="object"?Object.keys(e).map((o,n)=>e[n]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var E=(t,e)=>r({[`${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"}),K=(t,e)=>{let{valid:o,invalid:n,hover:s,focus:m,checked:i,active:p,selected:f,disabled:b,indeterminate:d,loading:M,empty:x,readonly:v,highlighted:L,...y}=e;return r({"k-valid":o,"k-invalid":n,"k-hover":s,"k-focus":m,"k-checked":i,"k-active":p,"k-selected":f,"k-disabled":b,"k-indeterminate":d&&!i,"k-loading":M,"k-empty":x,"k-readonly":v,"k-highlighted":L},Object.keys(y).reduce((g,P)=>(P.startsWith("k-")?g[P]=y[P]:g[`k-${P}`]=y[P],g),{}))};function Gt(t,e){if(!e)return{};let o=Array.isArray(e)?e:[e];return Object.fromEntries(o.map(n=>[`k-${n}`,!0]))}var l={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},O={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"},U={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},a={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},c={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 Xe,jsx as qt}from"react/jsx-runtime";var kt="k-font-icon",We=[],Ve={size:[l.undefined,l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info]},Je={},at=t=>{let{size:e,themeColor:o,icon:n,rotate:s,flip:m,...i}=t;return n?qt("span",{...i,className:r(t.className,kt,E(kt,{size:e}),{[`k-i-${n}`]:n,[`k-color-${o}`]:o,[`k-rotate-${s}`]:s,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"}),"aria-hidden":"true"}):qt(Xe,{})};at.states=We;at.options=Ve;at.className=kt;at.defaultOptions=Je;var Qt=at;import{Fragment as Qe,jsx as ft}from"react/jsx-runtime";var gt="k-svg-icon",Ge=[],qe={size:[l.undefined,l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[U.outline,U.solid,U.duotone]},At={viewBox:"0 0 24 24",variant:U.outline},st=t=>{let{size:e,themeColor:o,rotate:n,flip:s,viewBox:m=At.viewBox,variant:i=At.variant,icon:p,...f}=t;if(!p)return ft(Qe,{});if(p==="none")return ft("span",{...f,className:r(t.className,gt,E("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let b=typeof p=="object"&&p.name&&p.name,d=typeof p=="object"?i&&p.variants?.[i]||p.variants?.outline||p.content:void 0;return ft("span",{...f,className:r(t.className,gt,E("k-icon",{size:e}),{[`k-svg-i-${b}`]:b,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":s==="h"||s==="both","k-flip-v":s==="v"||s==="both"}),"aria-hidden":"true",children:ft("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof p=="object"?p.viewBox:m,dangerouslySetInnerHTML:d!==void 0?{__html:d}:void 0,children:p?void 0:t.children})})};st.states=Ge;st.options=qe;st.className=gt;st.defaultOptions=At;var Et=st;import*as Lt from"@progress/kendo-svg-icons";var Yt="icon",Zt="icons";import{useContext as Ze}from"react";import{createContext as Ye}from"react";var jt=Ye({iconsType:"svg"});import{Fragment as te,jsx as it}from"react/jsx-runtime";var bt="k-icon",je=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),to=[],eo={size:[l.undefined,l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[U.outline,U.solid,U.duotone]},ht={viewBox:"0 0 24 24",type:"svg",variant:U.outline},h=t=>{let{iconsType:e}=Ze(jt),{size:o,themeColor:n,icon:s,type:m=e||ht.type,rotate:i,flip:p,viewBox:f=ht.viewBox,variant:b=ht.variant,...d}=t;if(!s)return it(te,{});if((e||m)==="svg"){if(s==="none")return it(Et,{...d,className:r(t.className,bt),icon:s,size:o,variant:b});let x=Lt[s]?s:je(`${s}-icon`);return Lt[x]?it(Et,{...d,className:r(t.className,bt),icon:Lt[x],size:o,themeColor:n,rotate:i,flip:p,viewBox:f,variant:b}):it(te,{})}return it(Qt,{...d,className:r(t.className,bt),icon:s,size:o,themeColor:n,rotate:i,flip:p})};h.states=to;h.options=eo;h.defaultOptions=ht;h.className=bt;h.moduleName=Yt;h.folderName=Zt;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 yt="button",ee=yt;import{Fragment as oe,jsx as Y,jsxs as ne}from"react/jsx-runtime";var lt="k-button",oo=["icon-button"],no=[c.hover,c.focus,c.active,c.selected,c.disabled,c.generating],ro={size:[l.undefined,l.xsmall,l.small,l.medium,l.large],rounded:[O.undefined,O.none,O.small,O.medium,O.large,O.full],fillMode:[N.undefined,N.solid,N.flat,N.outline,N.clear,N.link],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.inverse]},Ot={showArrow:!1,arrowIconName:"chevron-down"},u=t=>{let{as:e="button",size:o,rounded:n,fillMode:s,themeColor:m,showArrow:i=Ot.showArrow,arrowIconName:p=Ot.arrowIconName,variant:f,hover:b,focus:d,active:M,selected:x,disabled:v,togglable:L,ariaDisabled:y,icon:g,iconSize:P,text:W,iconClassName:He,className:Ue,...De}=t,$e=g!=null,Fe=t.children!==void 0;return ne(e,{className:r(Ue,lt,Gt(lt,f),E(lt,{size:o,rounded:n,fillMode:s,themeColor:m}),K(lt,{hover:b,focus:d,active:M,disabled:v||y,selected:x}),{"k-icon-button":!W&&!Fe&&$e}),"aria-pressed":L?x?"true":"false":void 0,...De,"aria-disabled":y?"true":void 0,disabled:v||void 0,children:[typeof g=="string"&&g&&Y(h,{className:r(He,"k-button-icon"),icon:g,size:P}),g&&typeof g!="string"&&Y(oe,{children:g}),W?ne(oe,{children:[W&&Y("span",{className:"k-button-text",children:W}),t.children]}):t.children&&Y("span",{className:"k-button-text",children:t.children}),i&&Y("span",{className:"k-menu-button-arrow k-button-arrow",children:Y(h,{icon:p})})]})};u.states=no;u.options=ro;u.variants=oo;u.className=lt;u.defaultOptions=Ot;u.moduleName=yt;u.folderName=ee;u.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 ao}from"react/jsx-runtime";var re=t=>ao(u,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as so}from"react/jsx-runtime";var ae=t=>so(u,{icon:"folder",children:"Button",...t});import{jsx as io}from"react/jsx-runtime";var se=t=>io(u,{children:"Button",...t});import{jsx as wt}from"react/jsx-runtime";var lo=u.options,mo=u.states,po={...u.defaultOptions,variant:"text"},uo=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],co=[],Z=t=>{let{variant:e,...o}=t;switch(e){case"icon-only":return wt(re,{...o,icon:"star"});case"icon-and-text":return wt(ae,{...o,icon:"star",children:"Button"});default:return wt(se,{...o,children:"Button"})}};Z.options=lo;Z.states=mo;Z.variants=uo;Z.defaultOptions=po;Z.modifiers=co;Z.className=u.className;var Ct="menu-button",ie=Ct;import{jsx as ho}from"react/jsx-runtime";var le="k-menu-button",fo=[c.hover,c.focus,c.active,c.selected,c.disabled],bo={size:[l.undefined,l.xsmall,l.small,l.medium,l.large],rounded:[O.undefined,O.none,O.small,O.medium,O.large,O.full],fillMode:[N.undefined,N.solid,N.flat,N.outline,N.clear,N.link],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.inverse]},Pt={showArrow:!0,arrowIconName:"chevron-down"},w=t=>{let{size:e,rounded:o,fillMode:n,themeColor:s,hover:m,focus:i,active:p,selected:f,disabled:b,icon:d,text:M,showArrow:x=Pt.showArrow,arrowIconName:v=Pt.arrowIconName,expanded:L,...y}=t;return ho(u,{...y,className:r(t.className,le),text:M,size:e,rounded:o,fillMode:n,themeColor:s,hover:m,focus:i,active:p,selected:f,disabled:b,ariaDisabled:b||void 0,icon:d,showArrow:x,arrowIconName:v,"aria-expanded":L?"true":"false",...!M&&d&&!t["aria-label"]&&{"aria-label":"Menu"}})};w.states=fo;w.options=bo;w.className=le;w.defaultOptions=Pt;w.moduleName=Ct;w.folderName=ie;w.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 Rr}from"react/jsx-runtime";import{jsx as Ur}from"react/jsx-runtime";import{jsx as Wr}from"react/jsx-runtime";var B="menu",R=B;import{jsx as mt,jsxs as me}from"react/jsx-runtime";var Bt="k-menu-item",Mo=[c.hover,c.focus,c.active,c.selected,c.disabled],xo={},pe={iconPosition:"before"},A=t=>{let{hover:e,focus:o,active:n,selected:s,disabled:m,icon:i,text:p,first:f,last:b,showArrow:d,arrowIconName:M,iconPosition:x=pe.iconPosition,dir:v,children:L,expanded:y,...g}=t,P=M;return P||(P=v==="rtl"?"chevron-left":"chevron-right"),me("li",{...g,className:r(t.className,Bt,"k-item",K(Bt,{focus:o,disabled:m,hover:e,active:n,selected:s}),{"k-first":f,"k-last":b}),role:"menuitem",...d&&{"aria-haspopup":"menu"},...d&&{"aria-expanded":y?"true":"false"},...m&&{"aria-disabled":"true"},...o&&{tabIndex:0},children:[me("span",{className:r("k-link k-menu-link"),children:[i&&x==="before"&&mt(h,{className:"k-menu-link-icon",icon:i}),mt("span",{className:"k-menu-link-text",children:p}),i&&x==="after"&&mt(h,{className:"k-menu-link-icon",icon:i}),d&&mt("span",{className:"k-menu-expand-arrow","aria-hidden":"true",children:mt(h,{icon:P})})]}),L]})};A.states=Mo;A.options=xo;A.className=Bt;A.defaultOptions=pe;A.moduleName=B;A.folderName=R;import{jsx as pt,jsxs as ue}from"react/jsx-runtime";var _t="k-menu-item",No=[c.hover,c.focus,c.active,c.selected,c.disabled],vo={},Rt={dir:"ltr",iconPosition:"before"},k=t=>{let{hover:e,focus:o,active:n,selected:s,disabled:m,icon:i,text:p,first:f,last:b,showArrow:d,arrowIconName:M,iconPosition:x=Rt.iconPosition,dir:v=Rt.dir,children:L,popup:y,expanded:g,...P}=t,W=M;return W||(W=v==="rtl"?"chevron-left":"chevron-right"),ue("li",{role:"menuitem",...P,className:r(t.className,_t,"k-item",K(_t,{focus:o,disabled:m}),{"k-first":f,"k-last":b}),...d&&{"aria-haspopup":"menu"},...d&&{"aria-expanded":g?"true":"false"},...m&&{"aria-disabled":"true"},...o&&{tabIndex:0},children:[ue("span",{className:r("k-link k-menu-link",K("k-menu-link",{hover:e,active:n,selected:s,disabled:m})),children:[i&&x==="before"&&pt(h,{className:"k-menu-link-icon",icon:i}),pt("span",{className:"k-menu-link-text",children:p}),i&&x==="after"&&pt(h,{className:"k-menu-link-icon",icon:i}),d&&pt("span",{className:"k-menu-expand-arrow","aria-hidden":"true",children:pt(h,{icon:W})})]}),L,y]})};k.states=No;k.options=vo;k.className=_t;k.defaultOptions=Rt;k.moduleName=B;k.folderName=R;import{jsx as ko}from"react/jsx-runtime";var ce="k-menu-scroll-wrapper",To=[],Io={},So={},G=t=>{let{className:e,children:o,orientation:n,...s}=t;return ko("div",{...s,className:r(e,ce,{"k-menu-scroll-wrapper-vertical":n==="vertical"}),children:o})};G.states=To;G.options=Io;G.className=ce;G.defaultOptions=So;G.moduleName=B;G.folderName=R;var de=G;import{Fragment as Kt,jsx as q,jsxs as xt}from"react/jsx-runtime";var zt="k-menu",go=[],Ao={},Nt={orientation:"horizontal",header:!0,scrollButtonsPosition:"around"},T=t=>{let{children:e,orientation:o=Nt.orientation,header:n=Nt.header,scrollable:s,scrollButtonsPosition:m=Nt.scrollButtonsPosition,wrapperStyles:i,dir:p,popup:f,contextMenu:b,...d}=t,M={horizontal:{prev:p!=="rtl"?"left":"right",next:p!=="rtl"?"right":"left"},vertical:{prev:"up",next:"down"}},x=q("ul",{dir:p,...d,className:r(t.className,"k-reset",zt,{[`${zt}-${o}`]:o,"k-header":n}),role:b?"menu":"menubar",...o==="vertical"&&{"aria-orientation":"vertical"},children:e});return xt(Kt,{children:[s?xt(de,{orientation:o,style:i,dir:t.dir,children:[m==="start"&&xt(Kt,{children:[q(u,{fillMode:"flat",icon:`chevron-${M[o].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev",tabIndex:-1,"aria-label":"Scroll previous"}),q(u,{fillMode:"flat",icon:`chevron-${M[o].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next",tabIndex:-1,"aria-label":"Scroll next"})]}),m==="around"&&q(u,{fillMode:"flat",icon:`chevron-${M[o].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev",tabIndex:-1,"aria-label":"Scroll previous"}),x,m==="end"&&xt(Kt,{children:[q(u,{fillMode:"flat",icon:`chevron-${M[o].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev",tabIndex:-1,"aria-label":"Scroll previous"}),q(u,{fillMode:"flat",icon:`chevron-${M[o].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next",tabIndex:-1,"aria-label":"Scroll next"})]}),m==="around"&&q(u,{fillMode:"flat",icon:`chevron-${M[o].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next",tabIndex:-1,"aria-label":"Scroll next"})]}):x,f]})};T.states=go;T.options=Ao;T.className=zt;T.defaultOptions=Nt;T.moduleName=B;T.folderName=R;T.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 Eo}from"react/jsx-runtime";var Ht="k-separator",fe={orientation:"horizontal"},j=t=>{let{orientation:e=fe.orientation,...o}=t;return Eo("li",{...o,className:r(t.className,"k-item",Ht,{[`${Ht}-${e}`]:e}),role:"separator"})};j.className=Ht;j.defaultOptions=fe;j.moduleName=B;j.folderName=R;import{Fragment as Na,jsx as va}from"react/jsx-runtime";import{jsx as wo}from"react/jsx-runtime";var Ut="k-menu-group",Lo=[],yo={size:[l.undefined,l.small,l.medium,l.large]},Oo={},_=t=>{let{children:e,size:o,...n}=t;return wo("ul",{role:"menu",...n,className:r(t.className,Ut,E(Ut,{size:o})),children:e})};_.states=Lo;_.options=yo;_.className=Ut;_.defaultOptions=Oo;_.moduleName=B;_.folderName=R;import{Fragment as Co,jsx as tt,jsxs as Po}from"react/jsx-runtime";var Dt=t=>tt(T,{children:Po(Co,{children:[tt(A,{first:!0,text:"Item 1"}),tt(A,{showArrow:!0,arrowIconName:"chevron-down",text:"Item 2"}),tt(A,{showArrow:!0,arrowIconName:"chevron-down",text:"Item 3"}),tt(A,{text:"Item 4"}),tt(A,{last:!0,text:"Item 5"})]}),...t});var $t="popup",be=$t;import{jsx as he}from"react/jsx-runtime";var Me="k-animation-container",Bo=[],_o={},Ft={positionMode:"absolute",shown:!0},V=t=>{let{positionMode:e=Ft.positionMode,shown:o=Ft.shown,animationStyle:n,offset:s,...m}=t;return he("div",{...m,style:{...s,...t.style},className:r(t.className,Me,{"k-animation-container-shown":o,"k-animation-container-fixed":e==="fixed"}),children:he("div",{className:"k-child-animation-container",style:n,children:t.children})})};V.states=Bo;V.options=_o;V.className=Me;V.defaultOptions=Ft;V.moduleName=$t;V.folderName=be;var Wt="popup",xe=Wt;import{jsx as Ne}from"react/jsx-runtime";var ve="k-popup",Ro=[],Ko={},Te={positionMode:"absolute"},C=t=>{let{offset:e,positionMode:o=Te.positionMode,animationStyle:n,containerClassName:s,containerRole:m,containerAriaLabel:i,...p}=t;return Ne(V,{positionMode:o,offset:e,animationStyle:n,className:s,role:m,"aria-label":i,children:Ne("div",{...p,className:r(t.className,ve),children:t.children})})};C.states=Ro;C.options=Ko;C.className=ve;C.defaultOptions=Te;C.moduleName=Wt;C.folderName=xe;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 qa,jsx as Xa,jsxs as Ga}from"react/jsx-runtime";import{Fragment as ts,jsx as ja,jsxs as es}from"react/jsx-runtime";import{Fragment as ss,jsx as as,jsxs as is}from"react/jsx-runtime";import{Fragment as cs,jsx as us,jsxs as ds}from"react/jsx-runtime";import{jsx as Q,jsxs as $o}from"react/jsx-runtime";var zo={...T.options,scrollable:{type:"boolean"}},Ho=T.states,Ie={...T.defaultOptions,variant:"horizontal"},Uo=[{name:"horizontal",title:"Horizontal"},{name:"vertical",title:"Vertical"}],Do=[{name:"opened",title:"Opened"}],et=t=>{let{variant:e,modifiers:o,...n}={...Ie,...t},s={},m=e==="vertical"?{left:"200px",top:"30px"}:{left:"90px",top:"auto"};return Object.keys(o||{}).forEach(i=>{i==="opened"&&(s.opened=!!o?.[i],s.popup=o?.[i]?Q(C,{className:"k-menu-popup",offset:m,children:$o(_,{children:[Q(k,{text:"Item 1"}),Q(k,{text:"Item 2"}),Q(j,{}),Q(k,{text:"Item 3"})]})}):null)}),e==="vertical"?Q(Dt,{...n,...s,orientation:"vertical",style:{width:"200px"}}):Q(Dt,{...n,...s})};et.options=zo;et.states=Ho;et.variants=Uo;et.defaultOptions=Ie;et.modifiers=Do;et.className=T.className;import{Fragment as Js,jsx as Ws,jsxs as Vs}from"react/jsx-runtime";import{jsx as Qs}from"react/jsx-runtime";import{Fragment as Xo,jsx as D,jsxs as Se}from"react/jsx-runtime";var Fo=u.states,ke={...u.defaultOptions,variant:"text"},Wo=u.options,Vo=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Jo=[{name:"opened",title:"Opened"}],ot=t=>{let{variant:e,modifiers:o,...n}={...ke,...t},s={},m=D(C,{className:"k-menu-popup",children:Se(_,{size:n.size,children:[D(k,{first:!0,text:"Menu Item"}),D(k,{text:"Menu Item"}),D(k,{last:!0,text:"Menu Item"})]})}),i;switch(e){case"icon-only":i=D("div",{children:D(w,{...n,...s,icon:"star"})});break;case"icon-and-text":i=D("div",{children:D(w,{...n,...s,icon:"star",children:"Dropdown Button"})});break;default:i=D("div",{children:D(w,{...n,...s,children:"Dropdown Button"})});break}return Se(Xo,{children:[i,o?.opened&&m]})};ot.options=Wo;ot.states=Fo;ot.variants=Vo;ot.defaultOptions=ke;ot.modifiers=Jo;ot.className=w.className;import{jsx as Yo}from"react/jsx-runtime";var ge="k-tabstrip-items",Go=[],qo={},Qo={tabAlignment:"start"},ut=t=>{let{children:e,tabAlignment:o,orientation:n,...s}=t;return Yo("ul",{...s,className:r(t.className,ge,"k-reset",`k-tabstrip-items-${o}`),role:"tablist",...n==="vertical"&&{"aria-orientation":"vertical"},children:e})};ut.states=Go;ut.options=qo;ut.className=ge;ut.defaultOptions=Qo;var Ae=ut;import{jsx as tn}from"react/jsx-runtime";var Ee="k-tabstrip-items-wrapper",Zo=[],jo={},Le={orientation:"horizontal"},ct=t=>{let{children:e,orientation:o=Le.orientation,...n}=t;return tn("div",{...n,className:r(t.className,Ee,{"k-hstack":o==="horizontal","k-vstack":o==="vertical"}),children:e})};ct.states=Zo;ct.options=jo;ct.className=Ee;ct.defaultOptions=Le;var ye=ct;var dt="tabstrip",vt=dt;import{jsx as z,jsxs as Oe}from"react/jsx-runtime";var J="k-tabstrip",en=[],on={size:[l.undefined,l.small,l.medium,l.large]},Tt={position:"top",tabAlignment:"start",scrollButtons:"around"},I=t=>{let{size:e,scrollable:o,children:n,tabStripItems:s,tabStripItemsId:m,position:i=Tt.position,tabAlignment:p=Tt.tabAlignment,scrollButtons:f=Tt.scrollButtons,dir:b,scrollingPosition:d,overflow:M,...x}=t,v={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"}},L={top:"horizontal",bottom:"horizontal",left:"vertical",right:"vertical"},y={start:"start",center:"center",end:"end",justify:"justify",stretched:"stretched"};return Oe("div",{dir:b,...x,className:r(J,t.className,{[`${J}-${i}`]:i,[`${J}-scrollable`]:o,[`${J}-scrollable-overlay`]:o&&(f==="hidden"||!f),[`${J}-scrollable-${d}`]:d&&d!=="both",[`${J}-overflow`]:M},E(J,{size:e})),children:[i==="bottom"&&n,Oe(ye,{orientation:L[i],children:[o&&(f==="around"||f==="start")&&z("span",{className:r("k-tabstrip-prev","k-button",E("k-button",{size:e,fillMode:N.flat}),"k-icon-button"),"aria-hidden":"true",children:z(h,{className:"k-button-icon",icon:`chevron-${v[i].prev}`})}),o&&f==="start"&&z("span",{className:r("k-tabstrip-next","k-button",E("k-button",{size:e,fillMode:N.flat}),"k-icon-button"),"aria-hidden":"true",children:z(h,{className:"k-button-icon",icon:`chevron-${v[i].next}`})}),z(Ae,{className:r({"k-tabstrip-items-scroll":o&&f==="hidden"}),tabAlignment:y[p],orientation:L[i],...m&&{id:m},children:s}),o&&f==="end"&&z("span",{className:r("k-tabstrip-prev","k-button",E("k-button",{size:e,fillMode:N.flat}),"k-icon-button"),"aria-hidden":"true",children:z(h,{className:"k-button-icon",icon:`chevron-${v[i].prev}`})}),o&&(f==="around"||f==="end")&&z("span",{className:r("k-tabstrip-next","k-button",E("k-button",{size:e,fillMode:N.flat}),"k-icon-button"),"aria-hidden":"true",children:z(h,{className:"k-button-icon",icon:`chevron-${v[i].next}`})}),M&&z("div",{className:"k-tabstrip-actions k-hstack",children:z(w,{className:"k-tabstrip-overflow-button",icon:"more-vertical",fillMode:"flat",size:e,showArrow:!1})})]}),i!=="bottom"&&n]})};I.states=en;I.options=on;I.className=J;I.defaultOptions=Tt;I.moduleName=dt;I.folderName=vt;I.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."}]};import{jsx as sn}from"react/jsx-runtime";var we="k-tabstrip-wrapper",nn=[],rn={},an={},nt=t=>{let{...e}=t;return sn("div",{...e,className:r(t.className,we),children:t.children})};nt.states=nn;nt.options=rn;nt.className=we;nt.defaultOptions=an;nt.moduleName=dt;nt.folderName=vt;import{jsx as It,jsxs as Vt}from"react/jsx-runtime";var Jt="k-tabstrip-item",ln=[c.active,c.hover,c.disabled,c.focus],mn={},Ce={iconPosition:"before"},S=t=>{let{dragging:e,active:o,hover:n,focus:s,disabled:m,children:i,first:p,last:f,closable:b,icon:d,iconPosition:M=Ce.iconPosition,value:x,actions:v,...L}=t;return Vt("li",{...L,className:r(t.className,Jt,K(Jt,{hover:n,active:o,disabled:m,focus:s}),{"k-tabstrip-dragging":e,"k-first":p,"k-last":f}),role:"tab",...o&&{"aria-selected":"true"},...m&&{"aria-disabled":"true"},children:[Vt("span",{className:"k-link",children:[d&&M==="before"&&It(h,{icon:d}),x&&It("span",{className:"k-link-text",children:x}),d&&M==="after"&&It(h,{icon:d})]}),(v||b)&&Vt("span",{className:"k-item-actions",children:[v,b&&It(u,{as:"span",className:"k-remove-tab",icon:"x",fillMode:"flat",size:"xsmall",title:"Close","aria-hidden":"true"})]}),i]})};S.states=ln;S.options=mn;S.className=Jt;S.item=Ce;import{jsx as dn}from"react/jsx-runtime";var Xt="k-tabstrip-content",pn=[c.active,c.focus],un={},cn={},H=t=>{let{active:e,focus:o,children:n,...s}=t;return dn("div",{...s,className:r(t.className,Xt,K(Xt,{active:e,focus:o}),t.className),role:"tabpanel",children:n})};H.states=pn;H.options=un;H.className=Xt;H.defaultOptions=cn;import{Fragment as fn,jsx as X,jsxs as bn}from"react/jsx-runtime";var $=({children:t,...e})=>X(I,{tabStripItems:bn(fn,{children:[X(S,{first:!0,value:"First"}),X(S,{active:!0,value:"Second"}),X(S,{value:"Third"}),X(S,{value:"Fourth"}),X(S,{last:!0,value:"Fifth"})]}),...e,children:t||X(H,{active:!0,children:X("div",{children:"TabStrip Content"})})});import{jsx as hn}from"react/jsx-runtime";var Pe=t=>hn($,{position:"bottom",...t});import{jsx as Mn}from"react/jsx-runtime";var Be=t=>Mn($,{position:"right",...t});import{jsx as xn}from"react/jsx-runtime";var _e=t=>xn($,{position:"left",...t});import{jsx as el}from"react/jsx-runtime";import{Fragment as sl,jsx as al,jsxs as il}from"react/jsx-runtime";import{jsx as ul}from"react/jsx-runtime";import{Fragment as xl,jsx as Ml,jsxs as Nl}from"react/jsx-runtime";import{jsx as St}from"react/jsx-runtime";var Nn={...I.options,scrollable:{type:"boolean"}},vn=I.states,Re={...I.defaultOptions,scrollable:!1,variant:"up"},Tn=[{name:"up",title:"Position Up"},{name:"bottom",title:"Position Bottom"},{name:"left",title:"Position Left"},{name:"right",title:"Position Right"}],In=[],rt=t=>{let{variant:e,...o}={...Re,...t},n={};switch(e){case"right":return St(Be,{style:{height:"230px"},...o,...n,position:"right"});case"left":return St(_e,{style:{height:"230px"},...o,...n,position:"left"});case"bottom":return St(Pe,{style:{width:"350px"},...o,...n,position:"bottom"});default:return St($,{style:{width:"350px"},...o,...n})}};rt.options=Nn;rt.states=vn;rt.variants=Tn;rt.defaultOptions=Re;rt.modifiers=In;rt.className=I.className;import{Fragment as Ke,jsx as F,jsxs as ze}from"react/jsx-runtime";var Xl=({children:t,...e})=>F(I,{tabStripItems:ze(Ke,{children:[F(S,{first:!0,value:"First"}),F(S,{active:!0,value:"Second","aria-controls":"panel-second"}),F(S,{value:"Third"}),F(S,{value:"Fourth"}),F(S,{last:!0,value:"Fifth"})]}),...e,children:t||ze(Ke,{children:[F(H,{"aria-labelledby":"tab-second","aria-hidden":"true",children:F("div",{children:"First Panel (hidden)"})}),F(H,{active:!0,id:"panel-second","aria-labelledby":"tab-second",children:F("div",{children:"Second Panel (active)"})})]})});export{Xl as TabStripWithPanels};