@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 23.6 kB
JavaScript
var d=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?d(...t):typeof t=="object"?Object.keys(t).map((o,a)=>t[a]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var h=(e,t)=>d({[`${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"}),C=(e,t)=>{let{valid:o,invalid:a,hover:n,focus:i,checked:l,active:f,selected:g,disabled:I,indeterminate:b,loading:v,empty:y,readonly:z,highlighted:D,...M}=t;return d({"k-valid":o,"k-invalid":a,"k-hover":n,"k-focus":i,"k-checked":l,"k-active":f,"k-selected":g,"k-disabled":I,"k-indeterminate":b&&!l,"k-loading":v,"k-empty":y,"k-readonly":z,"k-highlighted":D},Object.keys(M).reduce((w,P)=>(P.startsWith("k-")?w[P]=M[P]:w[`k-${P}`]=M[P],w),{}))};function $e(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];return Object.fromEntries(o.map(a=>[`k-${a}`,!0]))}var r={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},u={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},c={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},E={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},p={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},s={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{jsx as kt,jsxs as Ct}from"react/jsx-runtime";var re="k-otp",St=[s.invalid,s.disabled],Pt={size:[r.undefined,r.small,r.medium,r.large]},Mt={},O=e=>{let{size:t,invalid:o,disabled:a,...n}=e;return Ct("div",{...n,role:"group",className:d(e.className,re,h(re,{size:t}),C(re,{invalid:o,disabled:a})),children:[kt("input",{type:"hidden","aria-hidden":"true"}),e.children]})};O.states=St;O.options=Pt;O.className=re;O.defaultOptions=Mt;O.moduleName="otp";O.folderName="otp";O.ariaSpec={selector:".k-otp",rules:[{selector:".k-otp",attribute:"role=group",usage:"Sets the proper role for the OTP."},{selector:".k-otp > input",attribute:"type=hidden",usage:"The hidden input holding the OTP inputs value."},{selector:".k-otp > input",attribute:"aria-hidden=true",usage:"Hides the hidden input from assistive technologies."},{selector:".k-otp .k-otp-input > .k-input-inner",attribute:"label for or aria-label or aria-labelledby",usage:"The input needs an accessible name to be assigned to it."},{selector:".k-otp .k-otp-input > .k-input-inner",attribute:"autocomplete=off",usage:"Sets the default autocomplete for the input."},{selector:".k-otp .k-otp-input > .k-input-inner",attribute:"aria-describedby (when has hint or error)",usage:"Points to the hint or error message for the OTP inputs."},{selector:".k-otp.k-invalid .k-otp-input > .k-input-inner, .k-otp.ng-invalid .k-otp-input > .k-input-inner",attribute:"aria-invalid=true",usage:"Rendered only when the OTP is in a form and announces the invalid state."},{selector:".k-otp.k-disabled .k-otp-input > .k-input-inner",attribute:"disabled=disabled or aria-disabled=true",usage:"Rendered only when the OTP is disabled."}]};var we="textbox",Ge=we;var ee="input",le=ee;import{jsx as zt}from"react/jsx-runtime";var de="k-input",Et=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],Lt={size:[r.undefined,r.small,r.medium,r.large],rounded:[u.undefined,u.none,u.small,u.medium,u.large,u.full],fillMode:[c.undefined,c.solid,c.flat,c.outline]},At={},S=e=>{let{hover:t,focus:o,disabled:a,invalid:n,valid:i,loading:l,readonly:f,size:g,rounded:I,fillMode:b,...v}=e;return zt("span",{...v,className:d(e.className,de,h(de,{size:g,rounded:I,fillMode:b}),C(de,{hover:t,focus:o,disabled:a,invalid:n,valid:i,loading:l,readonly:f}))})};S.states=Et;S.options=Lt;S.className=de;S.defaultOptions=At;S.moduleName=ee;S.folderName=le;import{jsx as Kt}from"react/jsx-runtime";var pe="k-picker",Dt=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],Bt={size:[r.undefined,r.small,r.medium,r.large],rounded:[u.undefined,u.none,u.small,u.medium,u.large,u.full],fillMode:[c.undefined,c.solid,c.flat,c.outline]},Rt={},q=e=>{let{hover:t,focus:o,disabled:a,invalid:n,valid:i,loading:l,readonly:f,size:g,rounded:I,fillMode:b,...v}=e;return Kt("span",{...v,className:d(e.className,pe,h(pe,{size:g,rounded:I,fillMode:b}),C(pe,{hover:t,focus:o,disabled:a,invalid:n,valid:i,loading:l,readonly:f})),children:e.children})};q.states=Dt;q.options=Bt;q.className=pe;q.defaultOptions=Rt;q.moduleName=ee;q.folderName=le;import{Fragment as Ut,jsx as qe}from"react/jsx-runtime";var Se="k-font-icon",_t=[],Ht={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[p.undefined,p.base,p.primary,p.secondary,p.tertiary,p.success,p.warning,p.error,p.info]},Vt={},te=e=>{let{size:t,themeColor:o,icon:a,rotate:n,flip:i,...l}=e;return a?qe("span",{...l,className:d(e.className,Se,h(Se,{size:t}),{[`k-i-${a}`]:a,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true"}):qe(Ut,{})};te.states=_t;te.options=Ht;te.className=Se;te.defaultOptions=Vt;var Xe=te;import{Fragment as Gt,jsx as ue}from"react/jsx-runtime";var Pe="k-svg-icon",Ft=[],$t={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[p.undefined,p.base,p.primary,p.secondary,p.tertiary,p.success,p.warning,p.error,p.info],variant:[E.outline,E.solid,E.duotone]},Me={viewBox:"0 0 24 24",variant:E.outline},oe=e=>{let{size:t,themeColor:o,rotate:a,flip:n,viewBox:i=Me.viewBox,variant:l=Me.variant,icon:f,...g}=e;if(!f)return ue(Gt,{});if(f==="none")return ue("span",{...g,className:d(e.className,Pe,h("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let I=typeof f=="object"&&f.name&&f.name,b=typeof f=="object"?l&&f.variants?.[l]||f.variants?.outline||f.content:void 0;return ue("span",{...g,className:d(e.className,Pe,h("k-icon",{size:t}),{[`k-svg-i-${I}`]:I,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"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 f=="object"?f.viewBox:i,dangerouslySetInnerHTML:b!==void 0?{__html:b}:void 0,children:f?void 0:e.children})})};oe.states=Ft;oe.options=$t;oe.className=Pe;oe.defaultOptions=Me;var ke=oe;import*as Ce from"@progress/kendo-svg-icons";var We="icon",Je="icons";import{useContext as Xt}from"react";import{createContext as qt}from"react";var Qe=qt({iconsType:"svg"});import{Fragment as Ye,jsx as ne}from"react/jsx-runtime";var ce="k-icon",Wt=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:[p.undefined,p.base,p.primary,p.secondary,p.tertiary,p.success,p.warning,p.error,p.info],variant:[E.outline,E.solid,E.duotone]},me={viewBox:"0 0 24 24",type:"svg",variant:E.outline},T=e=>{let{iconsType:t}=Xt(Qe),{size:o,themeColor:a,icon:n,type:i=t||me.type,rotate:l,flip:f,viewBox:g=me.viewBox,variant:I=me.variant,...b}=e;if(!n)return ne(Ye,{});if((t||i)==="svg"){if(n==="none")return ne(ke,{...b,className:d(e.className,ce),icon:n,size:o,variant:I});let y=Ce[n]?n:Wt(`${n}-icon`);return Ce[y]?ne(ke,{...b,className:d(e.className,ce),icon:Ce[y],size:o,themeColor:a,rotate:l,flip:f,viewBox:g,variant:I}):ne(Ye,{})}return ne(Xe,{...b,className:d(e.className,ce),icon:n,size:o,themeColor:a,rotate:l,flip:f})};T.states=Jt;T.options=Qt;T.defaultOptions=me;T.className=ce;T.moduleName=We;T.folderName=Je;T.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{Fragment as jt,jsx as Ee}from"react/jsx-runtime";var Ze="k-clear-value",Yt=[s.disabled,s.loading,s.readonly],Zt={},V=e=>{let{disabled:t,loading:o,readonly:a,value:n}=e;return t||a||o||!n?Ee(jt,{}):Ee("span",{className:d(e.className,Ze),children:Ee(T,{icon:"x"})})};V.states=Yt;V.options=Zt;V.className=Ze;import{jsx as oo}from"react/jsx-runtime";var Le="k-input-inner",eo=[],to={},fe={type:"text",autocomplete:"off",value:"",placeholder:""},U=e=>{let{value:t=fe.value,type:o=fe.type,placeholder:a=fe.placeholder,autocomplete:n=fe.autocomplete,disabled:i,readOnly:l,...f}=e;return oo("input",{...f,type:o,className:d(e.className,Le,h(Le,e)),placeholder:a,autoComplete:n,defaultValue:t,disabled:i||void 0,readOnly:l||void 0})};U.states=eo;U.options=to;U.className=Le;import{jsx as je,jsxs as io}from"react/jsx-runtime";var Ae="k-input-inner",no=[],ao={},ze=e=>{let{value:t,placeholder:o,showValue:a,valueIcon:n,valueIconName:i,...l}=e;return io("span",{...l,className:d(e.className,Ae,h(Ae,e)),children:[n,!n&&i&&je(T,{className:"k-input-value-icon",icon:i}),a&&!t&&o,a&&t&&je("span",{className:"k-input-value-text",children:t})]})};ze.states=no;ze.options=ao;ze.className=Ae;import{jsx as lo}from"react/jsx-runtime";var De="k-input-inner",so=[],ro={},et={value:"",placeholder:""},Be=e=>{let{value:t=et.value,placeholder:o=et.placeholder,rows:a,disabled:n,...i}=e;return lo("textarea",{...i,className:d(e.className,De,h(De,e)),placeholder:o,rows:a,defaultValue:t,disabled:n||void 0})};Be.states=so;Be.options=ro;Be.className=De;import{Fragment as uo,jsx as tt}from"react/jsx-runtime";var ot="k-input-loading-icon",po=[s.disabled,s.loading],X=e=>{let{disabled:t,loading:o}=e;return t||!o?tt(uo,{}):tt("span",{className:d(e.className,ot,"k-icon k-i-loading")})};X.states=po;X.className=ot;import{Fragment as fo,jsx as nt}from"react/jsx-runtime";var at="k-input-validation-icon",co=[s.valid,s.invalid,s.disabled,s.loading],mo={},F=e=>{let{valid:t,invalid:o,disabled:a,loading:n}=e,i=o?"warning-circle":"check-circle";return a||n||!!!(t||o)?nt(fo,{}):nt(T,{className:d(at),icon:i})};F.states=co;F.options=mo;F.className=at;import{Fragment as ho,jsx as it}from"react/jsx-runtime";var xo="k-input-prefix",bo={direction:"horizontal"},xe=e=>{let{direction:t=bo.direction,...o}=e;return e.children?it("span",{...o,className:d(xo,e.className,{[`k-input-prefix-${t}`]:t}),children:e.children}):it(ho,{})};import{Fragment as Io,jsx as st}from"react/jsx-runtime";var To="k-input-suffix",go={direction:"horizontal"},be=e=>{let{direction:t=go.direction,...o}=e;return e.children?st("span",{...o,className:d(To,e.className,{[`k-input-suffix-${t}`]:t}),children:e.children}):st(Io,{})};import{jsx as Ra}from"react/jsx-runtime";import{jsx as Va}from"react/jsx-runtime";import{jsx as No}from"react/jsx-runtime";var rt="k-input-separator",Oo={direction:"vertical"},W=e=>{let{direction:t=Oo.direction,...o}=e;return No("span",{...o,className:d(rt,e.className,{[`${rt}-${t}`]:t})})};var Re="button",lt=Re;import{Fragment as dt,jsx as J,jsxs as pt}from"react/jsx-runtime";var ae="k-button",vo=["icon-button"],yo=[s.hover,s.focus,s.active,s.selected,s.disabled,s.generating],wo={size:[r.undefined,r.xsmall,r.small,r.medium,r.large],rounded:[u.undefined,u.none,u.small,u.medium,u.large,u.full],fillMode:[c.undefined,c.solid,c.flat,c.outline,c.clear,c.link],themeColor:[p.undefined,p.base,p.primary,p.secondary,p.tertiary,p.success,p.warning,p.error,p.info,p.inverse]},Ke={showArrow:!1,arrowIconName:"chevron-down"},N=e=>{let{as:t="button",size:o,rounded:a,fillMode:n,themeColor:i,showArrow:l=Ke.showArrow,arrowIconName:f=Ke.arrowIconName,variant:g,hover:I,focus:b,active:v,selected:y,disabled:z,togglable:D,ariaDisabled:M,icon:w,iconSize:P,text:k,iconClassName:se,className:Oe,...Ne}=e,ve=w!=null,ye=e.children!==void 0;return pt(t,{className:d(Oe,ae,$e(ae,g),h(ae,{size:o,rounded:a,fillMode:n,themeColor:i}),C(ae,{hover:I,focus:b,active:v,disabled:z||M,selected:y}),{"k-icon-button":!k&&!ye&&ve}),"aria-pressed":D?y?"true":"false":void 0,...Ne,"aria-disabled":M?"true":void 0,disabled:z||void 0,children:[typeof w=="string"&&w&&J(T,{className:d(se,"k-button-icon"),icon:w,size:P}),w&&typeof w!="string"&&J(dt,{children:w}),k?pt(dt,{children:[k&&J("span",{className:"k-button-text",children:k}),e.children]}):e.children&&J("span",{className:"k-button-text",children:e.children}),l&&J("span",{className:"k-menu-button-arrow k-button-arrow",children:J(T,{icon:f})})]})};N.states=yo;N.options=wo;N.variants=vo;N.className=ae;N.defaultOptions=Ke;N.moduleName=Re;N.folderName=lt;N.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 So}from"react/jsx-runtime";var $=e=>So(N,{children:"Button",...e});import{Fragment as ut,jsx as L,jsxs as _e}from"react/jsx-runtime";var Po=S.states,Mo=S.defaultOptions,ko=S.options,Co=[{name:"prefix",title:"Prefix"},{name:"suffix",title:"Suffix"},{name:"clear-button",title:"`Clear` Button"},{name:"validation-icon",title:"Validation Icon"},{name:"separators",title:"Separators"}],Eo=[],Q=e=>{let{modifiers:t,valid:o,invalid:a,loading:n,disabled:i,readonly:l,...f}=e,g=t?.prefix,I=t?.suffix,b=t?.["clear-button"],v=t?.["validation-icon"],y=t?.separators;return _e(S,{...f,valid:o,invalid:a,loading:n,disabled:i,readonly:l,style:{width:300},children:[g&&_e(ut,{children:[L(xe,{children:L(T,{icon:"lock"})}),y&&L(W,{})]}),L(U,{placeholder:"Placeholder",value:"Value"}),v&&L(F,{valid:o,invalid:a,loading:n,disabled:i}),L(X,{loading:n,disabled:i}),b&&L(V,{loading:n,disabled:i,readonly:l,value:"Value"}),I&&_e(ut,{children:[y&&L(W,{}),L(be,{children:L($,{size:f.size,fillMode:"clear",children:"Send"})})]})]})};Q.options=ko;Q.states=Po;Q.variants=Eo;Q.defaultOptions=Mo;Q.modifiers=Co;Q.className=S.className;import{Fragment as ct,jsx as B,jsxs as He}from"react/jsx-runtime";var mt="k-textbox",Lo=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],Ao={size:[r.undefined,r.small,r.medium,r.large],rounded:[u.undefined,u.none,u.small,u.medium,u.large,u.full],fillMode:[c.undefined,c.solid,c.flat,c.outline]},he={showClearButton:!0,showValidationIcon:!0,separators:!0},x=e=>{let{size:t,rounded:o,fillMode:a,separators:n=he.separators,showClearButton:i=he.showClearButton,showValidationIcon:l=he.showValidationIcon,prefix:f,suffix:g,type:I,value:b,placeholder:v,hover:y,focus:z,valid:D,invalid:M,required:w,loading:P,disabled:k,readonly:se,id:Oe,"aria-label":Ne,"aria-describedby":ve,...ye}=e;return He(S,{...ye,size:t,rounded:o,fillMode:a,hover:y,focus:z,valid:D,invalid:M,required:w,loading:P,disabled:k,readonly:se,className:d(e.className,mt),children:[f&&He(ct,{children:[B(xe,{children:f}),n&&B(W,{})]}),B(U,{id:Oe,placeholder:v,value:b,type:I,disabled:k,"aria-label":Ne,"aria-describedby":ve,"aria-invalid":M?"true":void 0}),l&&B(F,{valid:D,invalid:M,loading:P,disabled:k}),B(X,{loading:P,disabled:k}),i&&B(V,{loading:P,disabled:k,readonly:se,value:b}),g&&He(ct,{children:[n&&B(W,{}),B(be,{children:g})]})]})};x.states=Lo;x.options=Ao;x.className=mt;x.defaultOptions=he;x.moduleName=we;x.folderName=Ge;x.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 ie=x;import{jsx as zo}from"react/jsx-runtime";var ft=e=>zo(ie,{...e});import{Fragment as Ui,jsx as Vi}from"react/jsx-runtime";import{jsx as Do}from"react/jsx-runtime";var xt=e=>Do(N,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as Bo}from"react/jsx-runtime";var bt=e=>Bo(N,{icon:"folder",children:"Button",...e});import{jsx as Ve}from"react/jsx-runtime";var Ro=N.options,Ko=N.states,_o={...N.defaultOptions,variant:"text"},Ho=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Vo=[],Y=e=>{let{variant:t,...o}=e;switch(t){case"icon-only":return Ve(xt,{...o,icon:"star"});case"icon-and-text":return Ve(bt,{...o,icon:"star",children:"Button"});default:return Ve($,{...o,children:"Button"})}};Y.options=Ro;Y.states=Ko;Y.variants=Ho;Y.defaultOptions=_o;Y.modifiers=Vo;Y.className=N.className;import{Fragment as ms,jsx as cs}from"react/jsx-runtime";import{jsx as hs}from"react/jsx-runtime";import{jsx as Ue}from"react/jsx-runtime";var Uo=x.states,Fo=x.defaultOptions,$o=x.options,Go=[{name:"prefix",title:"Prefix"},{name:"suffix",title:"Suffix"},{name:"clear-button",title:"`Clear` Button"}],qo=[],Z=e=>{let{modifiers:t,...o}=e,a={};return Object.keys(t||{}).forEach(n=>{switch(n){case"prefix":a.prefix=t?.[n]?Ue(T,{icon:"lock"}):void 0;break;case"suffix":a.suffix=t?.[n]?Ue($,{size:o.size,fillMode:"clear",children:"Send"}):void 0;break;case"clear-button":a.showClearButton=t?.[n];break;default:break}}),Ue(ft,{value:"Value",style:{width:300},...o,...a})};Z.options=$o;Z.states=Uo;Z.variants=qo;Z.defaultOptions=Fo;Z.modifiers=Go;Z.className=x.className;import{jsx as Jo}from"react/jsx-runtime";var ht="k-otp-input",Xo=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.readonly],Wo={size:[r.undefined,r.small,r.medium,r.large],rounded:[u.undefined,u.none,u.small,u.medium,u.large,u.full],fillMode:[c.undefined,c.solid,c.flat,c.outline]},Te={size:x.defaultOptions.size,rounded:x.defaultOptions.rounded,fillMode:x.defaultOptions.fillMode},m=e=>{let{size:t=Te.size,rounded:o=Te.rounded,fillMode:a=Te.fillMode,type:n,value:i,placeholder:l,hover:f,focus:g,valid:I,invalid:b,required:v,disabled:y,readonly:z,...D}=e;return Jo(x,{...D,size:t,rounded:o,fillMode:a,type:n,value:i,placeholder:l,hover:f,focus:g,valid:I,invalid:b,required:v,disabled:y,readonly:z,showClearButton:!1,showValidationIcon:!1,className:d(e.className,ht)})};m.states=Xo;m.options=Wo;m.className=ht;m.defaultOptions=Te;import{jsx as jo}from"react/jsx-runtime";var Tt="k-otp-separator",Qo=[],Yo={},Zo={},R=e=>{let{children:t,...o}=e;return jo("div",{...o,className:d(e.className,Tt),children:t})};R.states=Qo;R.options=Yo;R.className=Tt;R.defaultOptions=Zo;import{Fragment as en,jsx as G,jsxs as tn}from"react/jsx-runtime";var gt=({hover:e,focus:t,invalid:o,fillMode:a,size:n,disabled:i,...l})=>G(O,{invalid:o,size:n,"aria-label":"One-time password",children:tn(en,{children:[G(m,{size:n,fillMode:a,invalid:o,disabled:i,focus:t,hover:e,"aria-label":"Digit 1 of 6",...l}),G(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 2 of 6",...l}),G(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 3 of 6",...l}),G(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 4 of 6",...l}),G(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 5 of 6",...l}),G(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 6 of 6",...l})]})});import{Fragment as on,jsx as K,jsxs as nn}from"react/jsx-runtime";var It=({hover:e,focus:t,invalid:o,fillMode:a,size:n,disabled:i,...l})=>K(O,{invalid:o,size:n,"aria-label":"One-time password",children:nn(on,{children:[K(m,{size:n,fillMode:a,invalid:o,disabled:i,focus:t,hover:e,"aria-label":"Digit 1 of 6",...l}),K(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 2 of 6",...l}),K(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 3 of 6",...l}),K(R,{children:"-"}),K(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 4 of 6",...l}),K(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 5 of 6",...l}),K(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 6 of 6",...l})]})});import{jsx as ln}from"react/jsx-runtime";var ge="k-input-group",an=[s.disabled],sn={fillMode:[c.undefined,c.solid,c.flat,c.outline,c.clear,c.link]},rn={},A=e=>{let{fillMode:t,disabled:o,...a}=e;return ln("div",{...a,className:d(e.className,ge,h(ge,{fillMode:t}),C(ge,{disabled:o})),children:e.children})};A.states=an;A.options=sn;A.className=ge;A.defaultOptions=rn;import{Fragment as dn,jsx as _,jsxs as Fe}from"react/jsx-runtime";var Ot=({hover:e,focus:t,invalid:o,fillMode:a,size:n,disabled:i,...l})=>_(O,{invalid:o,size:n,"aria-label":"One-time password",children:Fe(dn,{children:[Fe(A,{fillMode:a,children:[_(m,{size:n,fillMode:a,invalid:o,disabled:i,focus:t,hover:e,"aria-label":"Digit 1 of 6",...l}),_(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 2 of 6",...l}),_(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 3 of 6",...l})]}),_(R,{children:"-"}),Fe(A,{fillMode:a,children:[_(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 4 of 6",...l}),_(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 5 of 6",...l}),_(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 6 of 6",...l})]})]})});import{Fragment as ar,jsx as nr,jsxs as ir}from"react/jsx-runtime";import{Fragment as pr,jsx as dr,jsxs as ur}from"react/jsx-runtime";import{jsx as Ie}from"react/jsx-runtime";var pn=x.options,un=x.states,Nt={...x.defaultOptions,variant:"normal"},cn=[{name:"normal",title:"Normal"},{name:"grouping",title:"Grouping"}],mn=[{name:"no-space",title:"No Space"}],j=e=>{let{variant:t,modifiers:o,...a}={...Nt,...e},n=!0;return Object.keys(o||{}).forEach(i=>{if(i==="no-space"){n=!o?.[i];return}}),t==="grouping"?n?Ie(It,{...a}):Ie(Ot,{...a}):n?Ie(gt,{...a}):Ie(vt,{...a})};j.options=pn;j.states=un;j.variants=cn;j.defaultOptions=Nt;j.modifiers=mn;j.className=O.className;import{Fragment as xn,jsx as H,jsxs as fn}from"react/jsx-runtime";var vt=({hover:e,focus:t,invalid:o,fillMode:a,size:n,disabled:i,...l})=>H(O,{invalid:o,size:n,"aria-label":"One-time password",children:H(xn,{children:fn(A,{fillMode:a,children:[H(m,{size:n,fillMode:a,invalid:o,disabled:i,focus:t,hover:e,"aria-label":"Digit 1 of 6",...l}),H(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 2 of 6",...l}),H(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 3 of 6",...l}),H(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 4 of 6",...l}),H(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 5 of 6",...l}),H(m,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 6 of 6",...l})]})})});export{vt as OneTimePasswordNoSpace};