UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

6 lines (5 loc) 27.7 kB
var a=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?a(...t):typeof t=="object"?Object.keys(t).map((o,r)=>t[r]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var G=(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"}),O=(e,t)=>{let{valid:o,invalid:r,hover:n,focus:c,checked:d,active:m,selected:I,disabled:k,indeterminate:L,loading:Le,empty:V,readonly:Ae,highlighted:Re,...ee}=t;return a({"k-valid":o,"k-invalid":r,"k-hover":n,"k-focus":c,"k-checked":d,"k-active":m,"k-selected":I,"k-disabled":k,"k-indeterminate":L&&!d,"k-loading":Le,"k-empty":V,"k-readonly":Ae,"k-highlighted":Re},Object.keys(ee).reduce((S,$)=>($.startsWith("k-")?S[$]=ee[$]:S[`k-${$}`]=ee[$],S),{}))};function rt(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];return Object.fromEntries(o.map(r=>[`k-${r}`,!0]))}var s={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},J={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},q={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},R={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},i={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},p={open:"open",hover:"hover",focus:"focus",active:"active",selected:"selected",disabled:"disabled",valid:"valid",invalid:"invalid",loading:"loading",required:"required",empty:"empty",indeterminate:"indeterminate",checked:"checked",readonly:"readonly",highlighted:"highlighted",generating:"generating",expanded:"expanded"},nt={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};var He={};function H(e){return He[e]=(He[e]||0)+1,`k-${e}-${He[e]}`}import{Fragment as no,jsx as it}from"react/jsx-runtime";var Be="k-font-icon",oo=[],ao={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[i.undefined,i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info]},ro={},ue=e=>{let{size:t,themeColor:o,icon:r,rotate:n,flip:c,...d}=e;return r?it("span",{...d,className:a(e.className,Be,G(Be,{size:t}),{[`k-i-${r}`]:r,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):it(no,{})};ue.states=oo;ue.options=ao;ue.className=Be;ue.defaultOptions=ro;var lt=ue;import{Fragment as so,jsx as ye}from"react/jsx-runtime";var we="k-svg-icon",io=[],lo={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[i.undefined,i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info],variant:[R.outline,R.solid,R.duotone]},Pe={viewBox:"0 0 24 24",variant:R.outline},fe=e=>{let{size:t,themeColor:o,rotate:r,flip:n,viewBox:c=Pe.viewBox,variant:d=Pe.variant,icon:m,...I}=e;if(!m)return ye(so,{});if(m==="none")return ye("span",{...I,className:a(e.className,we,G("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let k=typeof m=="object"&&m.name&&m.name,L=typeof m=="object"?d&&m.variants?.[d]||m.variants?.outline||m.content:void 0;return ye("span",{...I,className:a(e.className,we,G("k-icon",{size:t}),{[`k-svg-i-${k}`]:k,[`k-color-${o}`]:o,[`k-rotate-${r}`]:r,"k-flip-h":n==="h"||n==="both","k-flip-v":n==="v"||n==="both"}),"aria-hidden":"true",children:ye("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof m=="object"?m.viewBox:c,dangerouslySetInnerHTML:L!==void 0?{__html:L}:void 0,children:m?void 0:e.children})})};fe.states=io;fe.options=lo;fe.className=we;fe.defaultOptions=Pe;var Fe=fe;import*as ze from"@progress/kendo-svg-icons";var st="icon",dt="icons";import{useContext as co}from"react";import{createContext as mo}from"react";var mt=mo({iconsType:"svg"});import{Fragment as ct,jsx as Te}from"react/jsx-runtime";var Ie="k-icon",po=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),uo=[],fo={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[i.undefined,i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info],variant:[R.outline,R.solid,R.duotone]},Se={viewBox:"0 0 24 24",type:"svg",variant:R.outline},D=e=>{let{iconsType:t}=co(mt),{size:o,themeColor:r,icon:n,type:c=t||Se.type,rotate:d,flip:m,viewBox:I=Se.viewBox,variant:k=Se.variant,...L}=e;if(!n)return Te(ct,{});if((t||c)==="svg"){if(n==="none")return Te(Fe,{...L,className:a(e.className,Ie),icon:n,size:o,variant:k});let V=ze[n]?n:po(`${n}-icon`);return ze[V]?Te(Fe,{...L,className:a(e.className,Ie),icon:ze[V],size:o,themeColor:r,rotate:d,flip:m,viewBox:I,variant:k}):Te(ct,{})}return Te(lt,{...L,className:a(e.className,Ie),icon:n,size:o,themeColor:r,rotate:d,flip:m})};D.states=uo;D.options=fo;D.defaultOptions=Se;D.className=Ie;D.moduleName=st;D.folderName=dt;D.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 We="button",pt=We;import{Fragment as ut,jsx as te,jsxs as ft}from"react/jsx-runtime";var Ne="k-button",To=["icon-button"],No=[p.hover,p.focus,p.active,p.selected,p.disabled,p.generating],Co={size:[s.undefined,s.xsmall,s.small,s.medium,s.large],rounded:[J.undefined,J.none,J.small,J.medium,J.large,J.full],fillMode:[q.undefined,q.solid,q.flat,q.outline,q.clear,q.link],themeColor:[i.undefined,i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info,i.inverse]},Ue={showArrow:!1,arrowIconName:"chevron-down"},l=e=>{let{as:t="button",size:o,rounded:r,fillMode:n,themeColor:c,showArrow:d=Ue.showArrow,arrowIconName:m=Ue.arrowIconName,variant:I,hover:k,focus:L,active:Le,selected:V,disabled:Ae,togglable:Re,ariaDisabled:ee,icon:S,iconSize:$,text:ge,iconClassName:Zt,className:Qt,...jt}=e,eo=S!=null,to=e.children!==void 0;return ft(t,{className:a(Qt,Ne,rt(Ne,I),G(Ne,{size:o,rounded:r,fillMode:n,themeColor:c}),O(Ne,{hover:k,focus:L,active:Le,disabled:Ae||ee,selected:V}),{"k-icon-button":!ge&&!to&&eo}),"aria-pressed":Re?V?"true":"false":void 0,...jt,"aria-disabled":ee?"true":void 0,disabled:Ae||void 0,children:[typeof S=="string"&&S&&te(D,{className:a(Zt,"k-button-icon"),icon:S,size:$}),S&&typeof S!="string"&&te(ut,{children:S}),ge?ft(ut,{children:[ge&&te("span",{className:"k-button-text",children:ge}),e.children]}):e.children&&te("span",{className:"k-button-text",children:e.children}),d&&te("span",{className:"k-menu-button-arrow k-button-arrow",children:te(D,{icon:m})})]})};l.states=No;l.options=Co;l.variants=To;l.className=Ne;l.defaultOptions=Ue;l.moduleName=We;l.folderName=pt;l.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 bo}from"react/jsx-runtime";var Tt=e=>bo(l,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as Eo}from"react/jsx-runtime";var Nt=e=>Eo(l,{icon:"folder",children:"Button",...e});import{jsx as ho}from"react/jsx-runtime";var Ct=e=>ho(l,{children:"Button",...e});import{jsx as Ve}from"react/jsx-runtime";var vo=l.options,xo=l.states,Mo={...l.defaultOptions,variant:"text"},ko=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Lo=[],oe=e=>{let{variant:t,...o}=e;switch(t){case"icon-only":return Ve(Tt,{...o,icon:"star"});case"icon-and-text":return Ve(Nt,{...o,icon:"star",children:"Button"});default:return Ve(Ct,{...o,children:"Button"})}};oe.options=vo;oe.states=xo;oe.variants=ko;oe.defaultOptions=Mo;oe.modifiers=Lo;oe.className=l.className;var u="timeline",f=u;import{Fragment as yo,jsx as bt}from"react/jsx-runtime";var Ce="k-timeline",Ao=[],go={},Et={orientation:"vertical"},N=e=>{let{orientation:t=Et.orientation,collapsibleEvents:o,alternatingMode:r,...n}=e;return bt("div",{...n,className:a(e.className,Ce,{[`${Ce}-${t}`]:t,[`${Ce}-alternating`]:r,[`${Ce}-collapsible`]:o}),children:bt(yo,{children:e.children})})};N.states=Ao;N.options=go;N.className=Ce;N.defaultOptions=Et;N.moduleName=u;N.folderName=f;N.ariaSpec={rules:[{selector:".k-timeline.k-timeline-horizontal .k-timeline-track-wrap .k-timeline-scrollable-wrap",attribute:"role=tablist",usage:"Indicates the tablist role for the scrollable wrap element."},{selector:".k-timeline.k-timeline-horizontal .k-timeline-track-item:not(.k-timeline-flag-wrap)",attribute:"role=tab",usage:"Individual tab element on the track."},{selector:".k-timeline.k-timeline-horizontal .k-timeline-track-item:not(.k-timeline-flag-wrap).k-focus",attribute:"aria-selected=true",usage:"Announces the selected state of the focused tab."},{selector:".k-timeline.k-timeline-horizontal .k-timeline-flag-wrap",attribute:"role=none",usage:"The flag-wrap items have semantics removed."},{selector:".k-timeline.k-timeline-horizontal .k-timeline-flag-wrap",attribute:"aria-hidden=true",usage:"Flag-wrap items are hidden from the accessibility tree."},{selector:".k-timeline.k-timeline-horizontal .k-card:not(:empty)",attribute:"role=tabpanel",usage:"The card serves as the tab panel content."},{selector:".k-timeline.k-timeline-horizontal .k-card:not(:empty)",attribute:"aria-label",usage:"Refers to the tab element that controls the panel."},{selector:".k-timeline-arrow",attribute:"aria-hidden=true",usage:"Arrow buttons are hidden from the accessibility tree."},{selector:".k-timeline.k-timeline-vertical .k-card",attribute:"role=button",usage:"Items in the vertical timeline are buttons."},{selector:".k-timeline.k-timeline-vertical .k-card",attribute:"aria-describedby",usage:"Vertical timeline cards are described by their date elements."},{selector:".k-timeline.k-timeline-vertical .k-card",attribute:"aria-live=polite",usage:"Vertical timeline cards are live regions."},{selector:".k-timeline.k-timeline-vertical .k-card",attribute:"tabindex=0",usage:"Vertical timeline cards are focusable."},{selector:".k-timeline.k-timeline-collapsible .k-collapsed .k-card",attribute:"aria-expanded=false",usage:"Collapsed cards announce their collapsed state."},{selector:".k-timeline.k-timeline-collapsible .k-timeline-card:not(.k-collapsed) .k-card",attribute:"aria-expanded=true",usage:"Expanded cards announce their expanded state."}]};import{jsx as So}from"react/jsx-runtime";var Io="k-card-callout",Oe=e=>{let{callout:t,...o}=e;return So("span",{...o,className:a(e.className,Io,{[`k-callout-${nt.calloutMap[t]||t}`]:t})})};var A="card",K=A;import{Fragment as _o,jsx as ht,jsxs as Ro}from"react/jsx-runtime";var $e="k-card",Oo=[p.hover,p.focus,p.selected,p.disabled],Do={},Ko={},T=e=>{let{orientation:t,callout:o,hover:r,focus:n,selected:c,disabled:d,...m}=e;return Ro("div",{...m,className:a(e.className,$e,O($e,{hover:r,focus:n,disabled:d,selected:c}),{[`k-card-${t}`]:t,"k-card-with-callout":o}),children:[o&&o!=="true"&&ht(Oe,{callout:o}),ht(_o,{children:e.children})]})};T.states=Oo;T.options=Do;T.className=$e;T.defaultOptions=Ko;T.moduleName=A;T.folderName=K;T.ariaSpec={selector:".k-card",rules:[{selector:".k-card-list .k-card",attribute:"role=listitem",usage:"When the card is located in a list, it should have the listitem role."},{selector:".k-card-list .k-card",attribute:"tabindex=0",usage:"The card component is focusable when navigatable."},{selector:".k-card-list .k-card",attribute:"aria-describedby=.k-card-title id",usage:"Associate the card to the title element."},{selector:".k-card-list .k-card",attribute:"aria-keyshortcuts=Enter",usage:"Announces the bound Enter key that enables navigation inside the card."}]};import{Fragment as Po,jsx as vt}from"react/jsx-runtime";var Ge="k-card-list",Ho=[],Bo={},wo={},z=e=>{let{...t}=e;return vt("div",{...t,className:a(e.className,Ge,O(Ge,{})),role:"list",children:vt(Po,{children:e.children})})};z.states=Ho;z.options=Bo;z.className=Ge;z.defaultOptions=wo;z.moduleName=A;z.folderName=K;z.ariaSpec={selector:".k-card-list",rules:[{selector:".k-card-list",attribute:"role=list",usage:"The card list container announces its list role."},{selector:".k-card-list .k-card",attribute:"role=listitem",usage:"Each card in the list has the listitem role."},{selector:".k-card-list .k-card",attribute:"tabindex=0",usage:"The card is focusable when navigatable."},{selector:".k-card-list .k-card",attribute:"aria-describedby=.k-card-title id",usage:"Associate the card to its title element."},{selector:".k-card-list .k-card",attribute:"aria-keyshortcuts=Enter",usage:"Announces the Enter key for navigation inside the card."}]};import{jsx as Uo}from"react/jsx-runtime";var xt="k-card-group",Fo=[],zo={},Wo={},ae=e=>{let{...t}=e;return Uo("div",{...t,className:a(e.className,xt),children:e.children})};ae.states=Fo;ae.options=zo;ae.className=xt;ae.defaultOptions=Wo;ae.moduleName=A;ae.folderName=K;import{jsx as Jo}from"react/jsx-runtime";var Je="k-card-wrap",Vo=[p.focus,p.selected],$o={},Go={},re=e=>{let{focus:t,selected:o,...r}=e;return Jo("div",{...r,className:a(e.className,Je,O(Je,{focus:t,selected:o})),children:e.children})};re.states=Vo;re.options=$o;re.className=Je;re.defaultOptions=Go;re.moduleName=A;re.folderName=K;import{jsx as Xo}from"react/jsx-runtime";var qe="k-card-title",qo=[p.hover,p.focus],X=e=>{let{hover:t,focus:o,...r}=e;return Xo("div",{...r,className:a(e.className,qe,O(qe,{hover:t,focus:o})),children:e.children})};X.states=qo;X.className=qe;import{jsx as Zo}from"react/jsx-runtime";var Yo="k-card-subtitle",W=e=>{let{...t}=e;return Zo("div",{...t,className:a(e.className,Yo),children:e.children})};import{Fragment as kt,jsx as De}from"react/jsx-runtime";var Mt="k-card-media",Xe=e=>{let{src:t,...o}=e;return De(kt,{children:t?De("img",{...o,className:a(e.className,Mt),src:t}):De("span",{...o,className:a(e.className,Mt),children:De(kt,{children:e.children})})})};import{Fragment as jo,jsx as be,jsxs as ea}from"react/jsx-runtime";var Qo="k-card-header",w=e=>{let{title:t,subtitle:o,details:r,...n}=e;return ea("div",{...n,className:a(e.className,Qo),children:[t&&be(X,{children:t}),o&&be(W,{children:o}),be(jo,{children:e.children}),r&&be("span",{className:"k-card-header-actions",children:be(l,{className:"k-card-details",icon:"more-vertical",fillMode:"flat","aria-label":"Card details"})})]})};import{jsx as oa}from"react/jsx-runtime";var ta="k-card-footer",Ye=e=>{let{...t}=e;return oa("div",{...t,className:a(e.className,ta),children:e.children})};import{Fragment as ra,jsx as Ee,jsxs as na}from"react/jsx-runtime";var aa="k-card-body",_=e=>{let{title:t,subtitle:o,details:r,...n}=e;return na("div",{...n,className:a(e.className,aa),children:[t&&Ee(X,{children:t}),o&&Ee(W,{children:o}),Ee(ra,{children:e.children}),r&&Ee("span",{className:"k-card-header-actions",children:Ee(l,{className:"k-card-details",icon:"more-vertical",fillMode:"flat","aria-label":"Card details"})})]})};import{jsx as da}from"react/jsx-runtime";var Lt="k-card-deck",ia=[],la={},sa={},ne=e=>{let{...t}=e;return da("div",{...t,className:a(e.className,Lt),children:e.children})};ne.states=ia;ne.options=la;ne.className=Lt;ne.defaultOptions=sa;ne.moduleName=A;ne.folderName=K;import{jsx as ua}from"react/jsx-runtime";var At="k-card-deck-scrollwrap",ma=[],ca={},pa={},ie=e=>{let{...t}=e;return ua("div",{...t,className:a(e.className,At),children:e.children})};ie.states=ma;ie.options=ca;ie.className=At;ie.defaultOptions=pa;ie.moduleName=A;ie.folderName=K;var Ze="action-buttons",gt=Ze;import{jsx as Na}from"react/jsx-runtime";var Ke="k-actions",fa=[],Ta={},Qe={alignment:"start",orientation:"horizontal"},v=e=>{let{alignment:t=Qe.alignment,orientation:o=Qe.orientation,...r}=e;return Na("div",{...r,className:a(Ke,{[`${Ke}-${t}`]:t,[`${Ke}-${o}`]:o},e.className),children:e.children})};v.states=fa;v.options=Ta;v.className=Ke;v.defaultOptions=Qe;v.moduleName=Ze;v.folderName=gt;import{Fragment as Ca,jsx as le,jsxs as yt}from"react/jsx-runtime";var It=e=>le(T,{orientation:"vertical",children:yt(Ca,{children:[le(w,{children:"Card Header"}),le(_,{children:le("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),yt(v,{className:"k-card-actions",children:[le(l,{fillMode:"flat",themeColor:"primary",children:"Action 1"}),le(l,{fillMode:"flat",themeColor:"primary",children:"Action 2"})]})]}),...e});import{Fragment as ba,jsx as he,jsxs as St}from"react/jsx-runtime";var Ot=e=>he(T,{orientation:"horizontal",children:St(ba,{children:[he(_,{title:"Card Title",children:he("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),St(v,{orientation:"vertical",className:"k-card-actions",children:[he(l,{fillMode:"flat",themeColor:"primary",children:"Action 1"}),he(l,{fillMode:"flat",themeColor:"primary",children:"Action 2"})]})]}),...e});import{jsx as Ri,jsxs as Hi}from"react/jsx-runtime";import{jsx as h,jsxs as ve}from"react/jsx-runtime";var Ea=T.options,ha=T.states,Dt={...T.defaultOptions,variant:"vertical"},va=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],xa=[{name:"media",title:"Card with Media"},{name:"header",title:"Card with Header"},{name:"footer",title:"Card with Footer"}],se=e=>{let{variant:t,modifiers:o,...r}={...Dt,...e},n=!1,c=!1,d=!1;return Object.keys(o||{}).forEach(m=>{switch(m){case"media":{n=!!o?.[m];break}case"header":{c=!!o?.[m];break}case"footer":{d=!!o?.[m];break}}}),t==="horizontal"?ve(Ot,{style:{maxWidth:"420px"},...r,children:[n&&h(Xe,{src:"https://demos.telerik.com/kendo-ui/content/web/cards/rome.jpg"}),ve("div",{children:[c&&h(w,{title:"Header Title",subtitle:"Header Subtitle"}),h(_,{title:"Title",subtitle:"Subtitle",children:h("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),d&&h(Ye,{children:"Card Footer"})]}),(c||d)&&h("span",{className:"k-separator k-separator-vertical"}),ve(v,{orientation:"vertical",alignment:"stretched",className:"k-card-actions",children:[h(l,{fillMode:"flat",themeColor:"primary",children:"Button"}),h(l,{fillMode:"flat",themeColor:"primary",children:"Button"})]})]}):ve(It,{style:{maxHeight:"450px",width:"300px"},...r,children:[c&&h(w,{title:"Header Title",subtitle:"Header Subtitle"}),n&&h(Xe,{src:"https://demos.telerik.com/kendo-ui/content/web/cards/rome.jpg"}),h(_,{title:"Title",subtitle:"Subtitle",children:h("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),d&&h(Ye,{children:"Card Footer"}),ve(v,{className:"k-card-actions",children:[h(l,{fillMode:"flat",themeColor:"primary",children:"Button"}),h(l,{fillMode:"flat",themeColor:"primary",children:"Button"})]})]})};se.options=Ea;se.states=ha;se.variants=va;se.defaultOptions=Dt;se.modifiers=xa;se.className=T.className;import{jsx as P,jsxs as je}from"react/jsx-runtime";var Kt="k-timeline-event",Ma=[],ka={},de={collapsed:!1,reverse:!1,title:"Event title",subtitle:"Event subtitle",content:"Event content"},b=e=>{let{date:t,content:o=de.content,collapsed:r=de.collapsed,reverse:n=de.reverse,title:c=de.title,subtitle:d=de.subtitle,showCollapseButton:m,id:I=H("timeline-event"),...k}=e,L=`${I}-date`;return je("li",{...k,className:a(e.className,Kt,{"k-reverse":n}),children:[t&&P("div",{className:"k-timeline-date-wrap",children:P("span",{className:"k-timeline-date",id:L,children:t})}),P(g,{}),o&&P("div",{className:a("k-timeline-card",{"k-collapsed":r}),children:P(me,{...n?{callout:"right"}:{callout:"left"},ariaRole:"button",ariaDescribedBy:t?L:void 0,ariaLive:"polite",cardTabIndex:0,ariaExpanded:m?!r:void 0,children:je("div",{className:"k-card-inner",children:[je(w,{children:[P(Y,{collapsible:m,children:c}),P(W,{children:d})]}),P(_,{children:P("div",{className:"k-card-description",children:o})})]})})}),e.children]})};b.states=Ma;b.options=ka;b.className=Kt;b.defaultOptions=de;b.moduleName=u;b.folderName=f;import{jsx as ce,jsxs as et}from"react/jsx-runtime";var _t="k-timeline-event",La=[],Aa={},_e={title:"Event title",subtitle:"Event subtitle",content:"Event content"},B=e=>{let{content:t=_e.content,title:o=_e.title,subtitle:r=_e.subtitle,ariaLabel:n,panelTabIndex:c,...d}=e;return et("li",{...d,className:a(e.className,_t),children:[t&&ce("div",{className:a("k-timeline-card"),children:ce(me,{orientation:"vertical",callout:"top",ariaRole:"tabpanel",ariaLabel:n,cardTabIndex:c,children:et("div",{className:"k-card-inner",children:[et(w,{children:[ce(Y,{children:o}),ce(W,{children:r})]}),ce(_,{children:ce("div",{className:"k-card-description",children:t})})]})})}),e.children]})};B.states=La;B.options=Aa;B.className=_t;B.defaultOptions=_e;B.moduleName=u;B.folderName=f;import{jsx as Rt}from"react/jsx-runtime";var Ht="k-timeline-events-list",Z=e=>{let{...t}=e;return Rt("div",{...t,className:a(e.className,Ht),children:Rt("ul",{className:"k-timeline-scrollable-wrap",children:e.children})})};Z.className=Ht;Z.moduleName=u;Z.folderName=f;import{jsx as Ia,jsxs as Sa}from"react/jsx-runtime";var Bt="k-timeline-flag-wrap",ga=[p.focus,p.selected],ya={},wt={year:"2020"},x=e=>{let{year:t=wt.year,...o}=e;return Sa("li",{...o,className:a(e.className,Bt),children:[Ia("span",{className:"k-timeline-flag",children:t}),e.children]})};x.states=ga;x.options=ya;x.className=Bt;x.defaultOptions=wt;x.moduleName=u;x.folderName=f;import{jsx as Oa}from"react/jsx-runtime";var Pt="k-timeline-circle",g=e=>{let{...t}=e;return Oa("span",{...t,className:a(e.className,Pt)})};g.className=Pt;g.moduleName=u;g.folderName=f;import{jsx as Da}from"react/jsx-runtime";var Ft="k-timeline-flag",F=e=>{let{content:t,...o}=e;return Da("span",{...o,className:a(e.className,Ft),children:t})};F.className=Ft;F.moduleName=u;F.folderName=f;import{jsx as Ra,jsxs as Ha}from"react/jsx-runtime";var Ka=[],_a={},me=e=>{let{callout:t,children:o,ariaRole:r,ariaDescribedBy:n,ariaLive:c,ariaExpanded:d,ariaLabel:m,cardTabIndex:I,...k}=e;return Ha(T,{className:a(e.className),orientation:"vertical",callout:"true",role:r,"aria-describedby":n,"aria-live":c,"aria-expanded":d!==void 0?d?"true":"false":void 0,"aria-label":m,tabIndex:I,...k,children:[t&&Ra(xe,{callout:t}),o]})};me.states=Ka;me.defaultOptions=_a;import{jsx as tt,jsxs as Pa}from"react/jsx-runtime";var zt="k-card-title",Ba=[],wa={},Y=e=>{let{collapsible:t,children:o,...r}=e;return Pa("div",{className:a(e.className,zt),...r,children:[tt("span",{className:"k-event-title",children:o}),t&&tt("span",{className:"k-event-collapse k-button k-button-flat k-button-xs k-icon-button",children:tt(D,{icon:"chevron-right",className:"k-button-icon"})})]})};Y.states=Ba;Y.className=zt;Y.defaultOptions=wa;import{jsx as Wa}from"react/jsx-runtime";var Wt="k-timeline-card-callout",Fa=[],za={},xe=e=>{let{...t}=e;return Wa(Oe,{className:a(e.className,Wt),...t})};xe.states=Fa;xe.className=Wt;xe.defaultOptions=za;import{jsx as Ut}from"react/jsx-runtime";var Vt="k-timeline-date-wrap",Ua=[],Va={},$t={date:"May 25, 2008"},M=e=>{let{date:t=$t.date,...o}=e;return Ut("div",{...o,className:a(e.className,Vt),children:Ut("span",{className:"k-timeline-date",children:t})})};M.states=Ua;M.options=Va;M.className=Vt;M.defaultOptions=$t;M.moduleName=u;M.folderName=f;import{jsx as Gt}from"react/jsx-runtime";var Jt="k-timeline-track",Me=e=>{let{...t}=e;return Gt("div",{...t,className:a(e.className,Jt),children:Gt("ul",{className:"k-timeline-scrollable-wrap",role:"tablist",children:e.children})})};Me.className=Jt;Me.moduleName=u;Me.folderName=f;import{jsxs as Ga}from"react/jsx-runtime";var ot="k-timeline-track-item",$a=[p.focus],E=e=>{let{content:t,focus:o,ariaSelected:r,ariaDescribedBy:n,...c}=e,d=c.className?.includes("k-timeline-flag-wrap");return Ga("li",{...c,className:a(e.className,ot,O(ot,{focus:o})),role:d?"none":"tab","aria-hidden":d?"true":void 0,"aria-selected":!d&&r?"true":void 0,"aria-describedby":d?void 0:n,children:[t,e.children]})};E.states=$a;E.className=ot;E.moduleName=u;E.folderName=f;import{jsx as bs,jsxs as Es}from"react/jsx-runtime";import{jsx as ks,jsxs as Ls}from"react/jsx-runtime";import{jsx as Q,jsxs as Ja}from"react/jsx-runtime";var qt=e=>{let t=H("tl-ev"),o=H("tl-ev"),r=H("tl-ev"),n=H("tl-ev");return Q(N,{alternatingMode:!0,children:Ja("ul",{children:[Q(x,{year:"2010"}),Q(b,{id:t,date:"Apr 11, 2010",reverse:!0}),Q(b,{id:o,date:"May 11, 2010"}),Q(x,{year:"2011"}),Q(b,{id:r,date:"Oct 11, 2011",reverse:!0}),Q(b,{id:n,date:"Dec 11, 2011"})]}),...e})};import{Fragment as qa,jsx as y,jsxs as ke}from"react/jsx-runtime";var Xt=e=>y(N,{orientation:"horizontal",children:ke(qa,{children:[ke(U,{children:[y(E,{className:"k-timeline-flag-wrap",children:y(F,{content:"2015"})}),ke(E,{children:[y(M,{date:"Jan 14, 2015"}),y(g,{})]}),ke(E,{focus:!0,ariaSelected:!0,ariaDescribedBy:"panel-1",children:[y(M,{date:"Jun 1, 2015"}),y(g,{})]}),ke(E,{children:[y(M,{date:"Sep 29, 2015"}),y(g,{})]}),y(E,{className:"k-timeline-flag-wrap",children:y(F,{content:"2016"})})]}),y(Z,{children:y(B,{ariaLabel:"Jun 1, 2015",panelTabIndex:0})})]}),...e});import{Fragment as tr,jsx as C,jsxs as j}from"react/jsx-runtime";var Xa=N.options,Ya=N.states,Za={...N.defaultOptions,variant:"vertical"},Qa=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],ja=[],er=` .k-timeline-events-list .k-timeline-scrollable-wrap { height: 115px !important; } `,pe=e=>{let{variant:t,...o}=e;return t==="horizontal"?j(tr,{children:[C("style",{children:er}),j(Xt,{...o,children:[j(U,{children:[C(E,{className:"k-timeline-flag-wrap",children:C(F,{content:"Timeline Flag"})}),j(E,{children:[C(M,{date:"Date"}),C(g,{})]}),j(E,{className:"k-focus",children:[C(M,{date:"Current Date"}),C(g,{})]}),j(E,{children:[C(M,{date:"Date"}),C(g,{})]}),C(E,{className:"k-timeline-flag-wrap",children:C(F,{content:"Timeline Flag"})})]}),C(Z,{children:C(B,{})})]})]}):C(qt,{...o,children:j("ul",{children:[C(x,{year:"Timeline Flag"}),C(b,{title:"Header",subtitle:"Subheader",showCollapseButton:!0,date:"Timeline Date",reverse:!0}),C(x,{year:"Timeline Flag"}),C(b,{title:"Header",subtitle:"Subheader",showCollapseButton:!0,date:"Timeline Date"})]})})};pe.options=Xa;pe.states=Ya;pe.variants=Qa;pe.defaultOptions=Za;pe.modifiers=ja;pe.className=N.className;import{jsx as at,jsxs as or}from"react/jsx-runtime";var Yt="k-timeline-track-wrap",U=e=>{let{...t}=e;return or("div",{...t,className:a(e.className,Yt),children:[at(l,{className:"k-timeline-arrow k-timeline-arrow-left",rounded:"full",icon:"chevron-left",disabled:!0,"aria-hidden":"true",tabIndex:-1}),at(l,{className:"k-timeline-arrow k-timeline-arrow-right",rounded:"full",icon:"chevron-right","aria-hidden":"true",tabIndex:-1}),at(Me,{children:e.children})]})};U.className=Yt;U.moduleName=u;U.folderName=f;var Ed=U;export{Yt as TIMELINETRACKWRAP_CLASSNAME,U as TimelineTrackWrap,Ed as default};