UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

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