@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 23.4 kB
JavaScript
var l=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?l(...t):typeof t=="object"?Object.keys(t).map((o,s)=>t[s]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var x=(e,t)=>l({[`${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"}),U=(e,t)=>{let{valid:o,invalid:s,hover:n,focus:d,checked:c,active:u,selected:N,disabled:g,indeterminate:v,loading:S,empty:O,readonly:D,highlighted:V,...B}=t;return l({"k-valid":o,"k-invalid":s,"k-hover":n,"k-focus":d,"k-checked":c,"k-active":u,"k-selected":N,"k-disabled":g,"k-indeterminate":v&&!c,"k-loading":S,"k-empty":O,"k-readonly":D,"k-highlighted":V},Object.keys(B).reduce((y,C)=>(C.startsWith("k-")?y[C]=B[C]:y[`k-${C}`]=B[C],y),{}))};function We(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];return Object.fromEntries(o.map(s=>[`k-${s}`,!0]))}var r={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},p={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},f={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},w={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"},i={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"};var ke="appbar",Ye=ke;import{jsx as Et}from"react/jsx-runtime";var Se="k-appbar",St=[],Ot={themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.inverse]},Ct={},I=e=>{let{themeColor:t,positionMode:o,position:s,...n}=e;return Et("div",{...n,className:l(e.className,Se,x(Se,{themeColor:t}),{[`k-appbar-${o}`]:o,[`k-appbar-${s}`]:s}),children:e.children})};I.states=St;I.options=Ot;I.className=Se;I.defaultOptions=Ct;I.moduleName=ke;I.folderName=Ye;I.ariaSpec={selector:".k-appbar",rules:[]};import{jsx as Bt}from"react/jsx-runtime";var Lt="k-appbar-section",E=e=>{let{...t}=e;return Bt("div",{...t,className:l(Lt,e.className),children:e.children})};var Oe="avatar",Ze=Oe;import{jsx as je}from"react/jsx-runtime";var ee="k-avatar";var Pt=[i.hover,i.focus,i.active,i.selected,i.disabled],wt={size:[r.undefined,r.small,r.medium,r.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[f.undefined,f.solid,f.outline],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary]},Ce={type:"text",border:!1},M=e=>{let{size:t,rounded:o,fillMode:s,themeColor:n,type:d=Ce.type,border:c=Ce.border,...u}=e;return je("div",{...u,className:l(e.className,ee,x(ee,{size:t,rounded:o,fillMode:s,themeColor:n}),{[`${ee}-bordered`]:c}),children:je("span",{className:`${ee}-${d}`,children:e.children})})};M.states=Pt;M.options=wt;M.className=ee;M.defaultOptions=Ce;M.moduleName=Oe;M.folderName=Ze;M.ariaSpec={selector:".k-avatar",rules:[{selector:".k-avatar img",attribute:"alt",usage:"Images inside Avatar must have alt text for screen readers."}]};var _=M;import{jsx as Rt}from"react/jsx-runtime";var et=e=>Rt(_,{type:"icon",...e});import{jsx as zt}from"react/jsx-runtime";var tt=e=>zt(_,{type:"text",...e});import{jsx as _t}from"react/jsx-runtime";var de=e=>_t(_,{type:"image",...e});import{jsx as Un}from"react/jsx-runtime";import{Fragment as Dt,jsx as ot}from"react/jsx-runtime";var Ee="k-font-icon",Kt=[],qt={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info]},Ht={},te=e=>{let{size:t,themeColor:o,icon:s,rotate:n,flip:d,...c}=e;return s?ot("span",{...c,className:l(e.className,Ee,x(Ee,{size:t}),{[`k-i-${s}`]:s,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):ot(Dt,{})};te.states=Kt;te.options=qt;te.className=Ee;te.defaultOptions=Ht;var nt=te;import{Fragment as $t,jsx as ue}from"react/jsx-runtime";var Le="k-svg-icon",Vt=[],Ut={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[w.outline,w.solid,w.duotone]},Be={viewBox:"0 0 24 24",variant:w.outline},oe=e=>{let{size:t,themeColor:o,rotate:s,flip:n,viewBox:d=Be.viewBox,variant:c=Be.variant,icon:u,...N}=e;if(!u)return ue($t,{});if(u==="none")return ue("span",{...N,className:l(e.className,Le,x("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let g=typeof u=="object"&&u.name&&u.name,v=typeof u=="object"?c&&u.variants?.[c]||u.variants?.outline||u.content:void 0;return ue("span",{...N,className:l(e.className,Le,x("k-icon",{size:t}),{[`k-svg-i-${g}`]:g,[`k-color-${o}`]:o,[`k-rotate-${s}`]:s,"k-flip-h":n==="h"||n==="both","k-flip-v":n==="v"||n==="both"}),"aria-hidden":"true",children:ue("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof u=="object"?u.viewBox:d,dangerouslySetInnerHTML:v!==void 0?{__html:v}:void 0,children:u?void 0:e.children})})};oe.states=Vt;oe.options=Ut;oe.className=Le;oe.defaultOptions=Be;var Pe=oe;import*as we from"@progress/kendo-svg-icons";var at="icon",rt="icons";import{useContext as Xt}from"react";import{createContext as Ft}from"react";var it=Ft({iconsType:"svg"});import{Fragment as st,jsx as ne}from"react/jsx-runtime";var ce="k-icon",Gt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Jt=[],Qt={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[w.outline,w.solid,w.duotone]},me={viewBox:"0 0 24 24",type:"svg",variant:w.outline},m=e=>{let{iconsType:t}=Xt(it),{size:o,themeColor:s,icon:n,type:d=t||me.type,rotate:c,flip:u,viewBox:N=me.viewBox,variant:g=me.variant,...v}=e;if(!n)return ne(st,{});if((t||d)==="svg"){if(n==="none")return ne(Pe,{...v,className:l(e.className,ce),icon:n,size:o,variant:g});let O=we[n]?n:Gt(`${n}-icon`);return we[O]?ne(Pe,{...v,className:l(e.className,ce),icon:we[O],size:o,themeColor:s,rotate:c,flip:u,viewBox:N,variant:g}):ne(st,{})}return ne(nt,{...v,className:l(e.className,ce),icon:n,size:o,themeColor:s,rotate:c,flip:u})};m.states=Jt;m.options=Qt;m.defaultOptions=me;m.className=ce;m.moduleName=at;m.folderName=rt;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."}]};import{jsx as ae}from"react/jsx-runtime";var Wt=M.options,Yt=M.states,Zt={...M.defaultOptions,variant:"image"},jt=[{name:"image",title:"Image"},{name:"icon",title:"Icon Avatar"},{name:"text",title:"Text Avatar"}],eo=[],$=e=>{let{variant:t,...o}=e;switch(t){case"icon":return ae(et,{...o,children:ae(m,{icon:"star"})});case"text":return ae(tt,{...o,children:"JO"});default:return ae(de,{...o,children:ae("img",{src:"https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg"})})}};$.options=Wt;$.states=Yt;$.variants=jt;$.defaultOptions=Zt;$.modifiers=eo;$.className=M.className;var Re="button",lt=Re;import{Fragment as pt,jsx as F,jsxs as dt}from"react/jsx-runtime";var re="k-button",to=["icon-button"],oo=[i.hover,i.focus,i.active,i.selected,i.disabled,i.generating],no={size:[r.undefined,r.xsmall,r.small,r.medium,r.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[f.undefined,f.solid,f.flat,f.outline,f.clear,f.link],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.inverse]},ze={showArrow:!1,arrowIconName:"chevron-down"},h=e=>{let{as:t="button",size:o,rounded:s,fillMode:n,themeColor:d,showArrow:c=ze.showArrow,arrowIconName:u=ze.arrowIconName,variant:N,hover:g,focus:v,active:S,selected:O,disabled:D,togglable:V,ariaDisabled:B,icon:y,iconSize:C,text:P,iconClassName:pe,className:ye,...Ae}=e,Te=y!=null,Me=e.children!==void 0;return dt(t,{className:l(ye,re,We(re,N),x(re,{size:o,rounded:s,fillMode:n,themeColor:d}),U(re,{hover:g,focus:v,active:S,disabled:D||B,selected:O}),{"k-icon-button":!P&&!Me&&Te}),"aria-pressed":V?O?"true":"false":void 0,...Ae,"aria-disabled":B?"true":void 0,disabled:D||void 0,children:[typeof y=="string"&&y&&F(m,{className:l(pe,"k-button-icon"),icon:y,size:C}),y&&typeof y!="string"&&F(pt,{children:y}),P?dt(pt,{children:[P&&F("span",{className:"k-button-text",children:P}),e.children]}):e.children&&F("span",{className:"k-button-text",children:e.children}),c&&F("span",{className:"k-menu-button-arrow k-button-arrow",children:F(m,{icon:u})})]})};h.states=oo;h.options=no;h.variants=to;h.className=re;h.defaultOptions=ze;h.moduleName=Re;h.folderName=lt;h.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 ie=e=>ao(h,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as ro}from"react/jsx-runtime";var ut=e=>ro(h,{icon:"folder",children:"Button",...e});import{jsx as io}from"react/jsx-runtime";var L=e=>io(h,{children:"Button",...e});import{jsx as _e}from"react/jsx-runtime";var so=h.options,lo=h.states,po={...h.defaultOptions,variant:"text"},uo=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],co=[],X=e=>{let{variant:t,...o}=e;switch(t){case"icon-only":return _e(ie,{...o,icon:"star"});case"icon-and-text":return _e(ut,{...o,icon:"star",children:"Button"});default:return _e(L,{...o,children:"Button"})}};X.options=so;X.states=lo;X.variants=uo;X.defaultOptions=po;X.modifiers=co;X.className=h.className;var Ke="textbox",ct=Ke;var se="input",fe=se;import{jsx as bo}from"react/jsx-runtime";var xe="k-input",mo=[i.hover,i.focus,i.valid,i.invalid,i.required,i.disabled,i.loading,i.readonly],fo={size:[r.undefined,r.small,r.medium,r.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[f.undefined,f.solid,f.flat,f.outline]},xo={},A=e=>{let{hover:t,focus:o,disabled:s,invalid:n,valid:d,loading:c,readonly:u,size:N,rounded:g,fillMode:v,...S}=e;return bo("span",{...S,className:l(e.className,xe,x(xe,{size:N,rounded:g,fillMode:v}),U(xe,{hover:t,focus:o,disabled:s,invalid:n,valid:d,loading:c,readonly:u}))})};A.states=mo;A.options=fo;A.className=xe;A.defaultOptions=xo;A.moduleName=se;A.folderName=fe;import{jsx as go}from"react/jsx-runtime";var be="k-picker",vo=[i.hover,i.focus,i.valid,i.invalid,i.required,i.disabled,i.loading,i.readonly],ho={size:[r.undefined,r.small,r.medium,r.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[f.undefined,f.solid,f.flat,f.outline]},No={},G=e=>{let{hover:t,focus:o,disabled:s,invalid:n,valid:d,loading:c,readonly:u,size:N,rounded:g,fillMode:v,...S}=e;return go("span",{...S,className:l(e.className,be,x(be,{size:N,rounded:g,fillMode:v}),U(be,{hover:t,focus:o,disabled:s,invalid:n,valid:d,loading:c,readonly:u})),children:e.children})};G.states=vo;G.options=ho;G.className=be;G.defaultOptions=No;G.moduleName=se;G.folderName=fe;import{Fragment as Ao,jsx as qe}from"react/jsx-runtime";var mt="k-clear-value",Io=[i.disabled,i.loading,i.readonly],yo={},K=e=>{let{disabled:t,loading:o,readonly:s,value:n}=e;return t||s||o||!n?qe(Ao,{}):qe("span",{className:l(e.className,mt),children:qe(m,{icon:"x"})})};K.states=Io;K.options=yo;K.className=mt;import{jsx as ko}from"react/jsx-runtime";var He="k-input-inner",To=[],Mo={},ve={type:"text",autocomplete:"off",value:"",placeholder:""},q=e=>{let{value:t=ve.value,type:o=ve.type,placeholder:s=ve.placeholder,autocomplete:n=ve.autocomplete,disabled:d,readOnly:c,...u}=e;return ko("input",{...u,type:o,className:l(e.className,He,x(He,e)),placeholder:s,autoComplete:n,defaultValue:t,disabled:d||void 0,readOnly:c||void 0})};q.states=To;q.options=Mo;q.className=He;import{jsx as ft,jsxs as Co}from"react/jsx-runtime";var De="k-input-inner",So=[],Oo={},Ve=e=>{let{value:t,placeholder:o,showValue:s,valueIcon:n,valueIconName:d,...c}=e;return Co("span",{...c,className:l(e.className,De,x(De,e)),children:[n,!n&&d&&ft(m,{className:"k-input-value-icon",icon:d}),s&&!t&&o,s&&t&&ft("span",{className:"k-input-value-text",children:t})]})};Ve.states=So;Ve.options=Oo;Ve.className=De;import{jsx as Bo}from"react/jsx-runtime";var Ue="k-input-inner",Eo=[],Lo={},xt={value:"",placeholder:""},$e=e=>{let{value:t=xt.value,placeholder:o=xt.placeholder,rows:s,disabled:n,...d}=e;return Bo("textarea",{...d,className:l(e.className,Ue,x(Ue,e)),placeholder:o,rows:s,defaultValue:t,disabled:n||void 0})};$e.states=Eo;$e.options=Lo;$e.className=Ue;import{Fragment as wo,jsx as bt}from"react/jsx-runtime";var vt="k-input-loading-icon",Po=[i.disabled,i.loading],J=e=>{let{disabled:t,loading:o}=e;return t||!o?bt(wo,{}):bt("span",{className:l(e.className,vt,"k-icon k-i-loading")})};J.states=Po;J.className=vt;import{Fragment as _o,jsx as ht}from"react/jsx-runtime";var Nt="k-input-validation-icon",Ro=[i.valid,i.invalid,i.disabled,i.loading],zo={},H=e=>{let{valid:t,invalid:o,disabled:s,loading:n}=e,d=o?"warning-circle":"check-circle";return s||n||!!!(t||o)?ht(_o,{}):ht(m,{className:l(Nt),icon:d})};H.states=Ro;H.options=zo;H.className=Nt;import{Fragment as Ho,jsx as gt}from"react/jsx-runtime";var Ko="k-input-prefix",qo={direction:"horizontal"},he=e=>{let{direction:t=qo.direction,...o}=e;return e.children?gt("span",{...o,className:l(Ko,e.className,{[`k-input-prefix-${t}`]:t}),children:e.children}):gt(Ho,{})};import{Fragment as Uo,jsx as It}from"react/jsx-runtime";var Do="k-input-suffix",Vo={direction:"horizontal"},Ne=e=>{let{direction:t=Vo.direction,...o}=e;return e.children?It("span",{...o,className:l(Do,e.className,{[`k-input-suffix-${t}`]:t}),children:e.children}):It(Uo,{})};import{jsx as Hr}from"react/jsx-runtime";import{jsx as $r}from"react/jsx-runtime";import{jsx as Fo}from"react/jsx-runtime";var yt="k-input-separator",$o={direction:"vertical"},Q=e=>{let{direction:t=$o.direction,...o}=e;return Fo("span",{...o,className:l(yt,e.className,{[`${yt}-${t}`]:t})})};import{Fragment as At,jsx as R,jsxs as Fe}from"react/jsx-runtime";var Xo=A.states,Go=A.defaultOptions,Jo=A.options,Qo=[{name:"prefix",title:"Prefix"},{name:"suffix",title:"Suffix"},{name:"clear-button",title:"`Clear` Button"},{name:"validation-icon",title:"Validation Icon"},{name:"separators",title:"Separators"}],Wo=[],W=e=>{let{modifiers:t,valid:o,invalid:s,loading:n,disabled:d,readonly:c,...u}=e,N=t?.prefix,g=t?.suffix,v=t?.["clear-button"],S=t?.["validation-icon"],O=t?.separators;return Fe(A,{...u,valid:o,invalid:s,loading:n,disabled:d,readonly:c,style:{width:300},children:[N&&Fe(At,{children:[R(he,{children:R(m,{icon:"lock"})}),O&&R(Q,{})]}),R(q,{placeholder:"Placeholder",value:"Value"}),S&&R(H,{valid:o,invalid:s,loading:n,disabled:d}),R(J,{loading:n,disabled:d}),v&&R(K,{loading:n,disabled:d,readonly:c,value:"Value"}),g&&Fe(At,{children:[O&&R(Q,{}),R(Ne,{children:R(L,{size:u.size,fillMode:"clear",children:"Send"})})]})]})};W.options=Jo;W.states=Xo;W.variants=Wo;W.defaultOptions=Go;W.modifiers=Qo;W.className=A.className;import{Fragment as Tt,jsx as z,jsxs as Xe}from"react/jsx-runtime";var Mt="k-textbox",Yo=[i.hover,i.focus,i.valid,i.invalid,i.required,i.disabled,i.loading,i.readonly],Zo={size:[r.undefined,r.small,r.medium,r.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[f.undefined,f.solid,f.flat,f.outline]},ge={showClearButton:!0,showValidationIcon:!0,separators:!0},k=e=>{let{size:t,rounded:o,fillMode:s,separators:n=ge.separators,showClearButton:d=ge.showClearButton,showValidationIcon:c=ge.showValidationIcon,prefix:u,suffix:N,type:g,value:v,placeholder:S,hover:O,focus:D,valid:V,invalid:B,required:y,loading:C,disabled:P,readonly:pe,id:ye,"aria-label":Ae,"aria-describedby":Te,...Me}=e;return Xe(A,{...Me,size:t,rounded:o,fillMode:s,hover:O,focus:D,valid:V,invalid:B,required:y,loading:C,disabled:P,readonly:pe,className:l(e.className,Mt),children:[u&&Xe(Tt,{children:[z(he,{children:u}),n&&z(Q,{})]}),z(q,{id:ye,placeholder:S,value:v,type:g,disabled:P,"aria-label":Ae,"aria-describedby":Te,"aria-invalid":B?"true":void 0}),c&&z(H,{valid:V,invalid:B,loading:C,disabled:P}),z(J,{loading:C,disabled:P}),d&&z(K,{loading:C,disabled:P,readonly:pe,value:v}),N&&Xe(Tt,{children:[n&&z(Q,{}),z(Ne,{children:N})]})]})};k.states=Yo;k.options=Zo;k.className=Mt;k.defaultOptions=ge;k.moduleName=Ke;k.folderName=ct;k.ariaSpec={selector:".k-textbox",rules:[{selector:".k-textbox > .k-input-inner",attribute:"role=textbox or nodeName=input",usage:"Describes the role of the component."},{selector:".k-textbox > .k-input-inner",attribute:"label for or aria-label or aria-labelledby (when has accessible name)",usage:"The input requires an accessible name (provided by consuming app)."},{selector:".k-textbox > .k-input-inner",attribute:"aria-invalid=true (when invalid)",usage:"Rendered when the TextBox is in an invalid state."},{selector:".k-textbox > .k-input-inner",attribute:"aria-describedby (when has hint or error)",usage:"Points to the hint or error message for the input."},{selector:".k-textbox.k-disabled > .k-input-inner",attribute:"disabled=disabled or aria-disabled=true",usage:"Rendered when the TextBox is disabled."}]};var le=k;import{jsx as jo}from"react/jsx-runtime";var Ie=e=>jo(le,{...e});import{Fragment as zi,jsx as Ri}from"react/jsx-runtime";import{Fragment as Vi,jsx as Di}from"react/jsx-runtime";import{jsx as Xi}from"react/jsx-runtime";import{jsx as Ge}from"react/jsx-runtime";var en=k.states,tn=k.defaultOptions,on=k.options,nn=[{name:"prefix",title:"Prefix"},{name:"suffix",title:"Suffix"},{name:"clear-button",title:"`Clear` Button"}],an=[],Y=e=>{let{modifiers:t,...o}=e,s={};return Object.keys(t||{}).forEach(n=>{switch(n){case"prefix":s.prefix=t?.[n]?Ge(m,{icon:"lock"}):void 0;break;case"suffix":s.suffix=t?.[n]?Ge(L,{size:o.size,fillMode:"clear",children:"Send"}):void 0;break;case"clear-button":s.showClearButton=t?.[n];break;default:break}}),Ge(Ie,{value:"Value",style:{width:300},...o,...s})};Y.options=on;Y.states=en;Y.variants=an;Y.defaultOptions=tn;Y.modifiers=nn;Y.className=k.className;import{jsx as b,jsxs as Z}from"react/jsx-runtime";var Je={...I.options,positionMode:["static","sticky","fixed"]},rn=I.states,kt={...I.defaultOptions,themeColor:"primary",variant:"top",positionMode:"sticky"};Je.themeColor=["primary",...Je.themeColor.filter(e=>e!=="primary")];var sn=[{name:"top",title:"Top"},{name:"bottom",title:"Bottom"}],j=e=>{let{variant:t,...o}={...kt,...e},s=Z(I,{position:t,...o,children:[b(E,{children:b(ie,{fillMode:"flat",icon:"menu"})}),b("span",{className:"k-spacer k-spacer-sized",style:{width:"8px"}}),b(E,{children:b("h3",{className:"k-m-0",children:"AppBar"})}),b("span",{className:"k-spacer"}),Z(E,{children:[b(L,{fillMode:"flat",children:"Button"}),b(L,{fillMode:"flat",children:"Button"}),b(L,{fillMode:"flat",children:"Button"})]}),b("span",{className:"k-spacer k-spacer-sized",style:{width:"8px"}}),b(E,{children:b(Ie,{value:"Input value"})}),Z(E,{children:[b(ie,{className:"k-mx-sm",fillMode:"flat",icon:"bell"}),b("span",{className:"k-appbar-separator"}),b(de,{className:"k-mx-sm",children:b("img",{src:"https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg"})})]})]}),n=Z("div",{style:{padding:"25px 10px"},children:[b("p",{children:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, harum magnam? Possimus magnam non natus error consectetur voluptatum, unde quasi rerum ad facere, hic in! Qui ducimus ab sed consequuntur excepturi fugiat! Facilis fuga asperiores pariatur sed. Eligendi aliquid vel nemo, ipsum tempora minima consequatur culpa molestias maiores nihil eveniet accusantium porro. Inventore saepe ut ad in a. Quo itaque est expedita quidem consectetur enim quam minima, quisquam harum velit, earum adipisci provident, officia eveniet voluptas vero accusamus ad ducimus laudantium!"}),b("p",{children:"Consequatur incidunt sequi explicabo adipisci saepe, accusamus, numquam fuga quam ex, provident possimus ratione blanditiis ducimus quos nulla repellat error pariatur nemo nobis illo! Saepe deleniti dolore cumque, sequi similique eligendi consectetur corrupti iste reprehenderit adipisci enim laudantium inventore totam quos non impedit quibusdam et consequuntur blanditiis accusamus! Rerum, nostrum. Rerum, tempore earum officia alias suscipit ut minima recusandae dolorem reprehenderit ea?"}),b("p",{children:"Aliquam pariatur ut expedita, repellat architecto aut, consequatur iure recusandae tempora odit consequuntur, nihil nostrum totam accusantium at. Dignissimos repellendus culpa nesciunt. Officia repudiandae, laudantium error iure in minus ratione reprehenderit dolorum alias quo voluptatibus doloremque aliquid exercitationem quidem odit earum natus autem eaque tempore nulla esse sapiente? Dolore aliquid aliquam modi velit quaerat!"}),b("p",{children:"Sunt consequuntur, aliquam eius beatae ex odit quasi iusto, accusamus architecto corrupti reprehenderit dolores itaque aliquid veniam odio eaque vel doloremque? Corporis, tenetur delectus deleniti voluptatum autem necessitatibus esse nisi ad, optio cumque quas dignissimos reprehenderit. Optio dolores quam corporis ea, reiciendis eos sit. Voluptate vel esse necessitatibus eum, sunt fuga, quaerat, eos natus quod repellendus nulla voluptatem ut quo quas ipsa animi incidunt autem saepe perferendis. Sequi ratione in iste, quibusdam, neque facilis accusantium, eum rem error sunt a explicabo commodi impedit quam."})]});return t==="bottom"?Z("div",{style:{height:"250px",overflow:"auto"},children:[n,s]}):Z("div",{style:{height:"250px",overflow:"auto"},children:[s,n]})};j.options=Je;j.states=rn;j.variants=sn;j.defaultOptions=kt;j.modifiers=[];j.className=I.className;import{Fragment as ln,jsx as T,jsxs as Qe}from"react/jsx-runtime";var As=e=>T(I,{children:Qe(ln,{children:[T(E,{children:T(m,{icon:"menu"})}),T("span",{className:"k-spacer k-spacer-sized"}),T(E,{children:T("h1",{className:"title",children:"Page Title"})}),T(E,{children:Qe("ul",{children:[T("li",{children:"Menu Item"}),T("li",{children:"Menu Item"}),T("li",{children:"Menu Item"})]})}),T("span",{className:"k-spacer"}),Qe(E,{children:[T(m,{icon:"bell"}),T("span",{className:"k-appbar-separator"}),T(m,{icon:"user"})]})]}),...e});export{As as AppbarNormal};