@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 14.9 kB
JavaScript
var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((o,r)=>e[r]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var g=(t,e)=>l({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),de=(t,e)=>{let{valid:o,invalid:r,hover:s,focus:p,checked:u,active:d,selected:T,disabled:x,indeterminate:b,loading:N,empty:O,readonly:P,highlighted:z,...S}=e;return l({"k-valid":o,"k-invalid":r,"k-hover":s,"k-focus":p,"k-checked":u,"k-active":d,"k-selected":T,"k-disabled":x,"k-indeterminate":b&&!u,"k-loading":N,"k-empty":O,"k-readonly":P,"k-highlighted":z},Object.keys(S).reduce((c,I)=>(I.startsWith("k-")?c[I]=S[I]:c[`k-${I}`]=S[I],c),{}))};function ue(t,e){if(!e)return{};let o=Array.isArray(e)?e:[e];return Object.fromEntries(o.map(r=>[`k-${r}`,!0]))}var a={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},C={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},h={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},k={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},n={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},v={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 Le}from"react/jsx-runtime";var W="k-input-inner",we=[],Ke={},V={type:"text",autocomplete:"off",value:"",placeholder:""},R=t=>{let{value:e=V.value,type:o=V.type,placeholder:r=V.placeholder,autocomplete:s=V.autocomplete,disabled:p,readOnly:u,...d}=t;return Le("input",{...d,type:o,className:l(t.className,W,g(W,t)),placeholder:r,autoComplete:s,defaultValue:e,disabled:p||void 0,readOnly:u||void 0})};R.states=we;R.options=Ke;R.className=W;import{jsx as He}from"react/jsx-runtime";var Q="k-input-inner",ze=[],Re={},ce={value:"",placeholder:""},H=t=>{let{value:e=ce.value,placeholder:o=ce.placeholder,rows:r,disabled:s,...p}=t;return He("textarea",{...p,className:l(t.className,Q,g(Q,t)),placeholder:o,rows:r,defaultValue:e,disabled:s||void 0})};H.states=ze;H.options=Re;H.className=Q;var Y="prompt-box",me=Y;import{Fragment as Fe,jsx as fe}from"react/jsx-runtime";var Z="k-font-icon",$e=[],De={size:[a.undefined,a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info]},Ue={},$=t=>{let{size:e,themeColor:o,icon:r,rotate:s,flip:p,...u}=t;return r?fe("span",{...u,className:l(t.className,Z,g(Z,{size:e}),{[`k-i-${r}`]:r,[`k-color-${o}`]:o,[`k-rotate-${s}`]:s,"k-flip-h":p==="h"||p==="both","k-flip-v":p==="v"||p==="both"}),"aria-hidden":"true"}):fe(Fe,{})};$.states=$e;$.options=De;$.className=Z;$.defaultOptions=Ue;var xe=$;import{Fragment as Ge,jsx as G}from"react/jsx-runtime";var j="k-svg-icon",Xe=[],Ve={size:[a.undefined,a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[k.outline,k.solid,k.duotone]},ee={viewBox:"0 0 24 24",variant:k.outline},D=t=>{let{size:e,themeColor:o,rotate:r,flip:s,viewBox:p=ee.viewBox,variant:u=ee.variant,icon:d,...T}=t;if(!d)return G(Ge,{});if(d==="none")return G("span",{...T,className:l(t.className,j,g("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let x=typeof d=="object"&&d.name&&d.name,b=typeof d=="object"?u&&d.variants?.[u]||d.variants?.outline||d.content:void 0;return G("span",{...T,className:l(t.className,j,g("k-icon",{size:e}),{[`k-svg-i-${x}`]:x,[`k-color-${o}`]:o,[`k-rotate-${r}`]:r,"k-flip-h":s==="h"||s==="both","k-flip-v":s==="v"||s==="both"}),"aria-hidden":"true",children:G("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof d=="object"?d.viewBox:p,dangerouslySetInnerHTML:b!==void 0?{__html:b}:void 0,children:d?void 0:t.children})})};D.states=Xe;D.options=Ve;D.className=j;D.defaultOptions=ee;var te=D;import*as oe from"@progress/kendo-svg-icons";var be="icon",he="icons";import{useContext as qe}from"react";import{createContext as Je}from"react";var ge=Je({iconsType:"svg"});import{Fragment as ve,jsx as U}from"react/jsx-runtime";var J="k-icon",We=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Qe=[],Ye={size:[a.undefined,a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[k.outline,k.solid,k.duotone]},q={viewBox:"0 0 24 24",type:"svg",variant:k.outline},y=t=>{let{iconsType:e}=qe(ge),{size:o,themeColor:r,icon:s,type:p=e||q.type,rotate:u,flip:d,viewBox:T=q.viewBox,variant:x=q.variant,...b}=t;if(!s)return U(ve,{});if((e||p)==="svg"){if(s==="none")return U(te,{...b,className:l(t.className,J),icon:s,size:o,variant:x});let O=oe[s]?s:We(`${s}-icon`);return oe[O]?U(te,{...b,className:l(t.className,J),icon:oe[O],size:o,themeColor:r,rotate:u,flip:d,viewBox:T,variant:x}):U(ve,{})}return U(xe,{...b,className:l(t.className,J),icon:s,size:o,themeColor:r,rotate:u,flip:d})};y.states=Qe;y.options=Ye;y.defaultOptions=q;y.className=J;y.moduleName=be;y.folderName=he;y.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 ne="button",Te=ne;import{Fragment as Ne,jsx as _,jsxs as ke}from"react/jsx-runtime";var F="k-button",Ze=["icon-button"],je=[v.hover,v.focus,v.active,v.selected,v.disabled,v.generating],et={size:[a.undefined,a.xsmall,a.small,a.medium,a.large],rounded:[C.undefined,C.none,C.small,C.medium,C.large,C.full],fillMode:[h.undefined,h.solid,h.flat,h.outline,h.clear,h.link],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.inverse]},ae={showArrow:!1,arrowIconName:"chevron-down"},i=t=>{let{as:e="button",size:o,rounded:r,fillMode:s,themeColor:p,showArrow:u=ae.showArrow,arrowIconName:d=ae.arrowIconName,variant:T,hover:x,focus:b,active:N,selected:O,disabled:P,togglable:z,ariaDisabled:S,icon:c,iconSize:I,text:X,iconClassName:Ie,className:Ce,...Ae}=t,Pe=c!=null,_e=t.children!==void 0;return ke(e,{className:l(Ce,F,ue(F,T),g(F,{size:o,rounded:r,fillMode:s,themeColor:p}),de(F,{hover:x,focus:b,active:N,disabled:P||S,selected:O}),{"k-icon-button":!X&&!_e&&Pe}),"aria-pressed":z?O?"true":"false":void 0,...Ae,"aria-disabled":S?"true":void 0,disabled:P||void 0,children:[typeof c=="string"&&c&&_(y,{className:l(Ie,"k-button-icon"),icon:c,size:I}),c&&typeof c!="string"&&_(Ne,{children:c}),X?ke(Ne,{children:[X&&_("span",{className:"k-button-text",children:X}),t.children]}):t.children&&_("span",{className:"k-button-text",children:t.children}),u&&_("span",{className:"k-menu-button-arrow k-button-arrow",children:_(y,{icon:d})})]})};i.states=je;i.options=et;i.variants=Ze;i.className=F;i.defaultOptions=ae;i.moduleName=ne;i.folderName=Te;i.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 tt}from"react/jsx-runtime";var M=t=>tt(i,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as ot}from"react/jsx-runtime";var ye=t=>ot(i,{icon:"folder",children:"Button",...t});import{jsx as nt}from"react/jsx-runtime";var Be=t=>nt(i,{children:"Button",...t});import{jsx as re}from"react/jsx-runtime";var at=i.options,rt=i.states,st={...i.defaultOptions,variant:"text"},it=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],lt=[],w=t=>{let{variant:e,...o}=t;switch(e){case"icon-only":return re(M,{...o,icon:"star"});case"icon-and-text":return re(ye,{...o,icon:"star",children:"Button"});default:return re(Be,{...o,children:"Button"})}};w.options=at;w.states=rt;w.variants=it;w.defaultOptions=st;w.modifiers=lt;w.className=i.className;var se="speech-to-text-button",Oe=se;import{jsx as pt}from"react/jsx-runtime";var Se="k-speech-to-text-button",Me={icon:"microphone"},m=t=>{let{listening:e=!1,icon:o=Me.icon,...r}=t;return pt(i,{...r,icon:e?"stop":o,className:l(t.className,Se,{"k-listening":e}),"aria-pressed":e?"true":"false","aria-label":e?"Stop listening":"Start listening"})};m.states=i.states;m.options=i.options;m.className=Se;m.defaultOptions=Me;m.moduleName=se;m.folderName=Oe;m.ariaSpec={selector:".k-speech-to-text-button",rules:[{selector:".k-button.k-speech-to-text-button",attribute:"role=button or nodeName=button",usage:"If the used element is not <button>, explicitly set its role to button."},{selector:".k-button.k-speech-to-text-button",attribute:"aria-pressed",usage:"Announces the toggle behaviour of the button."},{selector:".k-button.k-speech-to-text-button",attribute:"aria-label",usage:"Accessible name for the speech-to-text button."}]};import{jsx as Jo}from"react/jsx-runtime";import{jsx as Yo}from"react/jsx-runtime";import{jsx as ft}from"react/jsx-runtime";var dt=i.states,Ee={...i.defaultOptions,variant:"normal"},ut={...i.options,fillMode:i.options.fillMode.filter(t=>t!=="clear"&&t!=="link")},ct=[],mt=[{name:"normal",title:"Normal"},{name:"listening",title:"Listening"}],K=t=>{let{variant:e,...o}={...Ee,...t},r={};return e==="listening"&&(r.listening=!0),ft(m,{...o,...r})};K.options=ut;K.states=dt;K.variants=mt;K.defaultOptions=Ee;K.modifiers=ct;K.className=m.className;import{jsx as L,jsxs as ie}from"react/jsx-runtime";var B="k-prompt-box",xt=[v.hover,v.focus,v.disabled],bt={fillMode:[h.undefined,h.solid,h.flat,h.outline]},le={lineMode:"auto",isExpanded:!1},f=t=>{let{fillMode:e,lineMode:o=le.lineMode,startAffix:r,endAffix:s,header:p,isExpanded:u=le.isExpanded,className:d,children:T,value:x,placeholder:b,generating:N,hover:O,focus:P,disabled:z,...S}=t,c=o==="multi"||o==="auto"&&u;return ie("div",{...S,className:l(d,"k-input",B,{[`${B}-singleline`]:o==="single",[`${B}-multiline`]:c,[`k-input-${e}`]:e,"k-hover":O,"k-focus":P,"k-disabled":z}),children:[p&&L("div",{className:`${B}-header`,children:p}),ie("div",{className:`${B}-content`,children:[r&&L("div",{className:`${B}-affix`,children:r}),o==="single"?L(R,{value:x,placeholder:b,className:`${B}-input`,type:"text","aria-label":"Prompt input"}):L(H,{value:x,placeholder:b,className:`${B}-textarea`,rows:o==="multi"||u?3:1,"aria-label":"Prompt input","aria-multiline":"true"}),ie("div",{className:`${B}-affix`,children:[s,L(m,{size:"small",fillMode:"flat",rounded:"full"}),L(M,{icon:N?"stop":"arrow-up",size:"small",rounded:"full",active:N,disabled:!x&&!N,className:l({"k-generating":N}),"aria-label":N?"Stop generating":"Send prompt","aria-live":"polite"})]})]}),T]})};f.states=xt;f.options=bt;f.className=B;f.defaultOptions=le;f.moduleName=Y;f.folderName=me;f.ariaSpec={selector:".k-prompt-box",rules:[{selector:".k-prompt-box-singleline .k-prompt-box-input",attribute:"nodeName=input",usage:"Ensures the input field has the proper textbox role."},{selector:".k-prompt-box-singleline .k-prompt-box-input",attribute:"aria-label",usage:"Provides an accessible label for the single-line input."},{selector:".k-prompt-box-multiline .k-prompt-box-textarea",attribute:"nodeName=textarea",usage:"Ensures the textarea has the proper textbox role."},{selector:".k-prompt-box-multiline .k-prompt-box-textarea",attribute:"aria-label",usage:"Provides an accessible label for the textarea."},{selector:".k-prompt-box-multiline .k-prompt-box-textarea",attribute:"aria-multiline=true",usage:"Indicates the textarea supports multiple lines of text."},{selector:".k-prompt-box:not(.k-prompt-box-singleline):not(.k-prompt-box-multiline) .k-prompt-box-textarea",attribute:"nodeName=textarea",usage:"Ensures the auto-mode textarea has the proper textbox role."},{selector:".k-prompt-box:not(.k-prompt-box-singleline):not(.k-prompt-box-multiline) .k-prompt-box-textarea",attribute:"aria-label",usage:"Provides an accessible label for the auto-mode textarea."},{selector:".k-prompt-box:not(.k-prompt-box-singleline):not(.k-prompt-box-multiline) .k-prompt-box-textarea",attribute:"aria-multiline=true",usage:"Indicates the auto-mode textarea supports multiple lines of text."},{selector:".k-prompt-box-affix .k-button:not(.k-speech-to-text-button)",attribute:"aria-label",usage:"The send/stop button is labelled to indicate its current action."},{selector:".k-prompt-box-affix .k-button:not(.k-speech-to-text-button)",attribute:"aria-live=polite",usage:"Announces the change in status of the send/stop button."}]};import{Fragment as pe,jsx as E,jsxs as kt}from"react/jsx-runtime";var ht=f.options,gt=f.states,vt={...f.defaultOptions,variant:"Single"},Tt=[{name:"Single",title:"Singleline"},{name:"Multi",title:"Multiline"}],Nt=[{name:"header",title:"Header"},{name:"endAffix",title:"End Affix"},{name:"startAffix",title:"Start Affix"}],A=t=>{let{variant:e,modifiers:o,...r}=t,s={},p=E(pe,{children:E(M,{size:"small",icon:"send",fillMode:"flat"})});return Object.keys(o||{}).forEach(u=>{switch(u){case"header":s.header=o?.[u]?E(i,{children:"Button in header"}):void 0;break;case"endAffix":o?.[u]&&(s.endAffix=kt(pe,{children:[p,E(M,{icon:"paperclip",size:"small",fillMode:"flat"})]}));break;case"startAffix":s.startAffix=o?.[u]?E(pe,{children:E(M,{icon:"plus",size:"small",fillMode:"flat"})}):void 0;break;default:break}}),e==="Multi"?E(f,{style:{width:300},lineMode:"multi",endAffix:p,placeholder:"Enter your prompt...",...r,...s}):E(f,{style:{width:300},lineMode:"single",endAffix:p,placeholder:"Enter your prompt...",...r,...s})};A.options=ht;A.states=gt;A.variants=Tt;A.defaultOptions=vt;A.modifiers=Nt;A.className=f.className;var kn=A;export{A as PromptBoxDemo,kn as default};