@epam/ai-dial-ui-kit 0.2.0-rc.12 → 0.2.0-rc.13

package/dist/dial-ui-kit.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("classnames"),b=require("@tabler/icons-react"),m=require("react"),x=require("@floating-ui/react"),w=({icon:e,className:s})=>e?r.jsx("span",{className:d("flex-shrink-0",s),children:e}):null;var k=(e=>(e.Primary="primary",e.Secondary="secondary",e.Tertiary="tertiary",e))(k||{});const K={[k.Primary]:"dial-primary-button",[k.Secondary]:"dial-secondary-button",[k.Tertiary]:"dial-tertiary-button"},V=({title:e,variant:s,cssClass:t,ref:n,onClick:a,disable:o,iconAfter:l,iconBefore:i,hideTitleOnMobile:c,ariaLabel:p})=>{const u=d("dial-small-semi",l?"mr-2":"",i?"ml-2":"",c?"hidden sm:inline":"inline"),h=d(s&&K[s],t,"focus-visible:outline outline-offset-0");return r.jsxs("button",{ref:n,type:"button",className:h,onClick:D=>a?.(D),disabled:o,"aria-label":e||p,children:[r.jsx(w,{icon:i}),e&&r.jsx("span",{className:u,children:e}),r.jsx(w,{icon:l})]})},F=({errorText:e})=>e&&r.jsx("span",{className:"text-error dial-tiny mt-1",children:e}),P=({fieldTitle:e,htmlFor:s,optional:t,optionalText:n,cssClass:a})=>e?r.jsxs("label",{className:d("dial-tiny text-secondary",a,!a?.includes("mb")&&"mb-2"),htmlFor:s,children:[r.jsx("span",{className:"min-h-4",children:e}),t&&r.jsx("span",{className:"ml-1",children:n??"(Optional)"})]}):null;var C=(e=>(e.Info="info",e.Success="success",e.Warning="warning",e.Error="error",e))(C||{});const G={info:r.jsx(b.IconInfoCircle,{size:24,stroke:2}),error:r.jsx(b.IconAlertCircle,{size:24,stroke:2}),warning:r.jsx(b.IconAlertTriangle,{size:24,stroke:2}),success:r.jsx(b.IconCircleCheck,{size:24,stroke:2})},Z={[C.Info]:"bg-info border-info text-info",[C.Success]:"bg-success border-success text-success",[C.Warning]:"bg-warning border-warning text-warning",[C.Error]:"bg-error border-error text-error"},X="items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex",Y=({variant:e=C.Info,message:s,cssClass:t,closable:n=!1,onClose:a})=>r.jsxs("div",{role:"alert",className:d(X,Z[e],t),children:[r.jsxs("div",{className:"flex items-center gap-2",children:[r.jsx(w,{icon:G[e]}),r.jsx("div",{className:"text-primary",children:s})]}),n&&r.jsx(V,{cssClass:"ml-2 text-secondary hover:text-primary",ariaLabel:"Close alert",iconBefore:r.jsx(b.IconX,{size:16}),onClick:o=>a?.(o)})]}),J="flex items-center justify-center text-secondary",Q="shrink-0 grow-0 basis-auto animate-spin-steps",ee=({size:e=18,cssClass:s,iconClass:t,fullWidth:n=!0,ariaLabel:a="Loading"})=>r.jsx("div",{role:"status","aria-label":a,className:d({[J]:!0,"w-full h-full":n,[s||""]:!!s}),children:r.jsx(w,{icon:r.jsx(b.IconLoader,{width:e,height:e,className:d(Q,t)})})}),re=7,se=2,z=m.createContext(null),M=()=>{const e=m.useContext(z);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},te=({initialOpen:e=!1,placement:s="bottom",isTriggerClickable:t=!1,open:n,onOpenChange:a}={})=>{const[o,l]=m.useState(e),i=m.useRef(null),c=n??o,p=a??l,u=x.useFloating({placement:s,open:c,onOpenChange:p,whileElementsMounted:x.autoUpdate,middleware:[x.offset(re+se),x.flip({crossAxis:s.includes("-"),fallbackAxisSideDirection:"start",padding:5}),x.shift({padding:5}),x.arrow({element:i})]}),h=x.useHover(u.context,{move:!1,enabled:n==null,mouseOnly:t,delay:{open:500,close:0}}),D=x.useFocus(u.context,{enabled:n==null}),A=x.useDismiss(u.context),j=x.useRole(u.context,{role:"tooltip"}),g=x.useInteractions([h,D,A,j]);return m.useMemo(()=>({open:c,setOpen:p,arrowRef:i,...g,...u}),[c,p,g,u])},ne=({children:e,...s})=>{const t=te(s);return r.jsx(z.Provider,{value:t,children:e})},ae=m.forwardRef(function({style:s,...t},n){const a=M(),o=x.useMergeRefs([a.refs.setFloating,n]);return a.open?r.jsx(x.FloatingPortal,{id:"tooltip-portal",children:r.jsxs("div",{ref:o,style:{...a.floatingStyles,...s},...a.getFloatingProps(t),className:d("z-[55] whitespace-pre-wrap rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",a.getFloatingProps(t).className),children:[t.children,r.jsx(x.FloatingArrow,{ref:a.arrowRef,context:a.context,fill:"currentColor",strokeWidth:1,className:"stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"})]})}):null}),oe=m.forwardRef(function({children:s,asChild:t=!1,...n},a){const o=M(),i=s&&typeof s=="object"&&"ref"in s&&s.ref!==void 0?s.ref:void 0,c=x.useMergeRefs([o.refs.setReference,a,i]);return t&&m.isValidElement(s)?m.cloneElement(s,o.getReferenceProps({ref:c,...n,...s.props})):r.jsx("span",{ref:c,...o.getReferenceProps(n),className:n.className??"dial-tooltip-trigger text-left",children:s})}),N=({hideTooltip:e,tooltip:s,children:t,triggerClassName:n,contentClassName:a,...o})=>e||!s?r.jsx("span",{className:n,children:t}):r.jsxs(ne,{...o,children:[r.jsx(oe,{className:d(n,"truncate"),children:t}),r.jsx(ae,{className:d("text-primary",a,"max-w-[300px]",(e||!s)&&"hidden"),children:s})]}),le=18,E={size:le,stroke:2},ie=({label:e,id:s,checked:t,indeterminate:n,disabled:a,ariaLabel:o,onChange:l})=>{const i=m.useCallback(u=>{u.stopPropagation(),l?.(u.target.checked,s)},[l,s]),c=d("flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",`${t?"":'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,a?"pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4":""),p=d("mr-2 border rounded",a?"bg-layer-4 border-icon-secondary":"");return r.jsxs("label",{className:c,htmlFor:s,children:[t&&(n?r.jsx(b.IconMinus,{className:p,...E}):r.jsx(b.IconCheck,{className:p,...E})),e&&r.jsx(N,{tooltip:e,triggerClassName:"flex-1 min-w-0",children:r.jsx("p",{className:"text-primary w-full truncate",children:e})}),r.jsx("input",{type:"checkbox",onChange:i,id:s,checked:t,"aria-checked":n?"mixed":t,"aria-disabled":a||void 0,"aria-label":e?void 0:o,className:"invisible w-0 h-0"})]})};var f=(e=>(e.VALID="valid",e.ERROR="error",e))(f||{});const ce=(e,s)=>{if(s===e.id)switch(e.status){case f.VALID:return"border-accent-secondary text-primary";case f.ERROR:return"border-red-900 text-primary";default:return"border-accent-primary text-primary"}switch(e.status){case f.VALID:return"border-primary text-white";case f.ERROR:return"border-red-900 text-error";default:return"border-primary text-secondary"}},de=(e,s)=>{if(s===e.id)switch(e.status){case f.VALID:return"bg-accent-secondary";case f.ERROR:return"bg-red-400";default:return"bg-accent-primary"}switch(e.status){case f.VALID:return"bg-accent-secondary";case f.ERROR:return"bg-red-400";default:return"bg-layer-4"}},ue=({step:e,index:s,currentStep:t,onChangeStep:n})=>{const a="h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer",o="w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white",l=()=>t===e.id&&e.status===f.ERROR?r.jsx(b.IconExclamationCircle,{stroke:2,size:16}):t!==e.id&&e.status===f.VALID?r.jsx(b.IconCheck,{stroke:2,size:16}):s+1;return r.jsxs("button",{className:d(a,ce(e,t)),onClick:()=>n(e.id),children:[r.jsx("span",{className:d(o,de(e,t)),children:l()}),r.jsx("span",{children:e.name})]})},xe=({steps:e,currentStep:s,onChangeStep:t})=>{const n=a=>{const o=e.findIndex(i=>i.id===s),l=e.findIndex(i=>i.id===a);(a!==s&&e[o].status===f.VALID||l<o)&&t(a)};return r.jsx("div",{id:"steps",className:"flex gap-x-3",children:e.map((a,o)=>r.jsx(ue,{currentStep:s,onChangeStep:n,step:a,index:o},a.id))})},_=({value:e,textareaId:s,placeholder:t,cssClass:n="",disabled:a,invalid:o,readonly:l,onChange:i})=>r.jsx(N,{tooltip:e,triggerClassName:"flex",children:r.jsx("textarea",{id:s,placeholder:t,value:e||"",disabled:a,className:d("dial-textarea dial-input",o?"dial-input-error":"",a&&"dial-input-disable",l&&"dial-input-readonly",n),onChange:c=>!l&&i?.(c.currentTarget.value)})}),pe=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Backspace","Delete","Tab","Enter","Escape","Home","End"],fe=(e,s,t,n)=>{if((s==="number"||t!==void 0||n!==void 0)&&!pe.includes(e.key)&&!(e.key==="-"&&e.currentTarget.selectionStart===0&&(t===void 0||t<0))&&!(e.key==="."&&s==="number"&&!e.currentTarget.value.includes("."))){if(!/^[0-9]$/.test(e.key)){e.preventDefault();return}if(t!==void 0||n!==void 0){const o=e.currentTarget.value,l=e.currentTarget.selectionStart||0,i=o.slice(0,l)+e.key+o.slice(l),c=parseFloat(i);if(!isNaN(c)){if(t!==void 0&&c<t){e.preventDefault();return}if(n!==void 0&&c>n){e.preventDefault();return}}}}},T=({iconBeforeInput:e,iconAfterInput:s,hideBorder:t,value:n,elementId:a,placeholder:o="",cssClass:l="",containerCssClass:i,tooltipTriggerClassName:c,type:p="text",disabled:u,readonly:h,invalid:D,onChange:A,min:j,max:g,prefix:L,suffix:O,textBeforeInput:v,textAfterInput:I})=>{const q=y=>y.target.blur(),H=p==="number"||j!==void 0||g!==void 0,U=y=>{fe(y,p,j,g)},$=y=>{const R=y.currentTarget.value;if(H&&R!==""){const S=parseFloat(R);if(isNaN(S)&&R!=="-"&&R!=="."||!isNaN(S)&&(j!==void 0&&S<j||g!==void 0&&S>g))return}A?.(R)};return r.jsxs("div",{className:d("dial-input-field flex flex-row items-center justify-between",t?"dial-input-no-border":"dial-input",D&&"dial-input-error",u&&"dial-input-disable",h&&"dial-input-readonly",!v&&"pl-1",!I&&"pr-1",i),children:[v&&r.jsx(N,{tooltip:v,children:r.jsx(T,{hideBorder:!0,containerCssClass:"rounded-r-none border-r-0",cssClass:"px-2 overflow-hidden overflow-ellipsis dial-small",value:v,disabled:!0,elementId:v+"textBefore"})}),L&&r.jsxs("p",{className:"text-secondary dial-small pl-2",children:[" ",L]}),r.jsx(w,{icon:e,className:"pl-2"}),r.jsx(N,{tooltip:n,triggerClassName:c,children:r.jsx("input",{type:p,autoComplete:"off",id:a,placeholder:o,value:n??"",title:n?String(n):"",disabled:u,className:d("border-0 bg-transparent px-2",l),onChange:y=>!h&&$?.(y),onKeyDown:U,onWheel:q,min:j,max:g})}),r.jsx(w,{icon:s,className:"pr-2"}),O&&r.jsxs("p",{className:"text-secondary dial-small pr-2",children:[" ",O]}),I&&r.jsx(N,{tooltip:I,children:r.jsx(T,{hideBorder:!0,containerCssClass:"rounded-l-none border-l-0",cssClass:"px-2",value:I,disabled:!0,elementId:I+"textAfter"})})]})},me=/^0+\.(\d+)?$/,be=/^0+/,W=({fieldTitle:e,errorText:s,optional:t,elementCssClass:n,elementContainerCssClass:a,elementId:o,containerCssClass:l,readonly:i,defaultEmptyText:c,min:p,max:u,...h})=>r.jsxs("div",{className:d("flex flex-col",l),children:[r.jsx(P,{fieldTitle:e,optional:t,htmlFor:o}),i?r.jsx("span",{children:h.value||(c??"None")}):r.jsxs(r.Fragment,{children:[r.jsx(T,{elementId:o,cssClass:n,containerCssClass:a,invalid:s!=null,min:p,max:u,...h}),r.jsx(F,{errorText:s})]})]}),he=({onChange:e,value:s,min:t,max:n,...a})=>{const o=l=>String(l)?.match(me)?String(l)?.replace(be,"0"):Number(l);return r.jsx(W,{type:"number",onChange:l=>e?.(o(l)),value:s,min:t,max:n,...a})},ge=({onChange:e,...s})=>r.jsx(W,{type:"text",onChange:t=>e?.(t),...s}),je=({fieldTitle:e,optional:s,elementId:t,elementCssClass:n,errorText:a,...o})=>r.jsxs("div",{className:"flex flex-col",children:[r.jsx(P,{fieldTitle:e,optional:s,htmlFor:t}),r.jsx(_,{textareaId:t,cssClass:n,...o}),r.jsx(F,{errorText:a})]}),ye=({title:e,switchId:s,isOn:t=!1,disabled:n,onChange:a})=>{const o=d("flex w-[36px] h-[18px] cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",t?"flex-row-reverse":"flex-row",n?"pointer-events-none":"",n?t?"bg-controls-disable":"bg-layer-4":t?"bg-accent-primary":"bg-layer-4"),l=m.useCallback(i=>{i.stopPropagation(),a?.(!t)},[a,t]);return r.jsxs("div",{className:"flex flex-row items-center",children:[r.jsx("input",{type:"checkbox",onChange:l,id:s,disabled:n,className:"invisible w-0 h-0",checked:t}),r.jsx("label",{htmlFor:s,className:o,children:r.jsx("span",{className:d("size-3 rounded-full",n?t?"bg-layer-4":"bg-controls-disable":"bg-controls-enable-primary")})}),e&&r.jsx("span",{className:"pl-2 dial-small text-primary",children:e})]})},Ce=({onClick:e})=>r.jsx(b.IconEyeOff,{...E,className:"text-primary",onClick:e}),we=({onClick:e})=>r.jsx(b.IconEye,{...E,className:"text-primary",onClick:e}),B=({...e})=>{const[s,t]=m.useState(!1),n=m.useCallback(a=>{t(a)},[]);return r.jsx(T,{type:s?"text":"password",...e,iconAfterInput:s?r.jsx(Ce,{onClick:()=>n(!1)}):r.jsx(we,{onClick:()=>n(!0)})})},Ne=({fieldTitle:e,optional:s,elementCssClass:t,elementId:n,errorText:a,...o})=>r.jsxs("div",{className:"flex flex-col",children:[r.jsx(P,{fieldTitle:e,optional:s,htmlFor:n}),r.jsx(B,{cssClass:t,elementId:n,invalid:!!a,...o}),r.jsx(F,{errorText:a})]});exports.AlertVariant=C;exports.ButtonVariant=k;exports.DialAlert=Y;exports.DialButton=V;exports.DialCheckbox=ie;exports.DialErrorText=F;exports.DialFieldLabel=P;exports.DialIcon=w;exports.DialInput=T;exports.DialLoader=ee;exports.DialNumberInputField=he;exports.DialPasswordInput=B;exports.DialPasswordInputField=Ne;exports.DialSteps=xe;exports.DialSwitch=ye;exports.DialTextAreaField=je;exports.DialTextInputField=ge;exports.DialTextarea=_;exports.DialTooltip=N;exports.StepStatus=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),d=require("classnames"),b=require("@tabler/icons-react"),f=require("react"),m=require("@floating-ui/react"),w=({icon:e,className:r})=>e?s.jsx("span",{className:d("flex-shrink-0",r),children:e}):null;var T=(e=>(e.Primary="primary",e.Secondary="secondary",e.Tertiary="tertiary",e))(T||{});const Z={[T.Primary]:"dial-primary-button",[T.Secondary]:"dial-secondary-button",[T.Tertiary]:"dial-tertiary-button"},B=({title:e,variant:r,cssClass:t,ref:n,onClick:a,disable:o,iconAfter:l,iconBefore:c,hideTitleOnMobile:i,ariaLabel:u})=>{const x=d("dial-small-semi",l?"mr-2":"",c?"ml-2":"",i?"hidden sm:inline":"inline"),h=d(r&&Z[r],t,"focus-visible:outline outline-offset-0");return s.jsxs("button",{ref:n,type:"button",className:h,onClick:y=>a?.(y),disabled:o,"aria-label":e||u,children:[s.jsx(w,{icon:c}),e&&s.jsx("span",{className:x,children:e}),s.jsx(w,{icon:l})]})},V=({errorText:e})=>e&&s.jsx("span",{className:"text-error dial-tiny mt-1",children:e}),S=({fieldTitle:e,htmlFor:r,optional:t,optionalText:n,cssClass:a})=>e?s.jsxs("label",{className:d("dial-tiny text-secondary",a,!a?.includes("mb")&&"mb-2"),htmlFor:r,children:[s.jsx("span",{className:"min-h-4",children:e}),t&&s.jsx("span",{className:"ml-1",children:n??"(Optional)"})]}):null;var N=(e=>(e.Info="info",e.Success="success",e.Warning="warning",e.Error="error",e))(N||{});const X={info:s.jsx(b.IconInfoCircle,{size:24,stroke:2}),error:s.jsx(b.IconAlertCircle,{size:24,stroke:2}),warning:s.jsx(b.IconAlertTriangle,{size:24,stroke:2}),success:s.jsx(b.IconCircleCheck,{size:24,stroke:2})},Y={[N.Info]:"bg-info border-info text-info",[N.Success]:"bg-success border-success text-success",[N.Warning]:"bg-warning border-warning text-warning",[N.Error]:"bg-error border-error text-error"},J="items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex",Q=({variant:e=N.Info,message:r,cssClass:t,closable:n=!1,onClose:a})=>s.jsxs("div",{role:"alert",className:d(J,Y[e],t),children:[s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsx(w,{icon:X[e]}),s.jsx("div",{className:"text-primary",children:r})]}),n&&s.jsx(B,{cssClass:"ml-2 text-secondary hover:text-primary",ariaLabel:"Close alert",iconBefore:s.jsx(b.IconX,{size:16}),onClick:o=>a?.(o)})]}),ee="flex items-center justify-center text-secondary",se="shrink-0 grow-0 basis-auto animate-spin-steps",re=({size:e=18,cssClass:r,iconClass:t,fullWidth:n=!0,ariaLabel:a="Loading"})=>s.jsx("div",{role:"status","aria-label":a,className:d({[ee]:!0,"w-full h-full":n,[r||""]:!!r}),children:s.jsx(w,{icon:s.jsx(b.IconLoader,{width:e,height:e,className:d(se,t)})})}),te=7,ne=2,z=f.createContext(null),M=()=>{const e=f.useContext(z);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},ae=({initialOpen:e=!1,placement:r="bottom",isTriggerClickable:t=!1,open:n,onOpenChange:a}={})=>{const[o,l]=f.useState(e),c=f.useRef(null),i=n??o,u=a??l,x=m.useFloating({placement:r,open:i,onOpenChange:u,whileElementsMounted:m.autoUpdate,middleware:[m.offset(te+ne),m.flip({crossAxis:r.includes("-"),fallbackAxisSideDirection:"start",padding:5}),m.shift({padding:5}),m.arrow({element:c})]}),h=m.useHover(x.context,{move:!1,enabled:n==null,mouseOnly:t,delay:{open:500,close:0}}),y=m.useFocus(x.context,{enabled:n==null}),D=m.useDismiss(x.context),j=m.useRole(x.context,{role:"tooltip"}),g=m.useInteractions([h,y,D,j]);return f.useMemo(()=>({open:i,setOpen:u,arrowRef:c,...g,...x}),[i,u,g,x])},oe=({children:e,...r})=>{const t=ae(r);return s.jsx(z.Provider,{value:t,children:e})},le=f.forwardRef(function({style:r,...t},n){const a=M(),o=m.useMergeRefs([a.refs.setFloating,n]);return a.open?s.jsx(m.FloatingPortal,{id:"tooltip-portal",children:s.jsxs("div",{ref:o,style:{...a.floatingStyles,...r},...a.getFloatingProps(t),className:d("z-[55] whitespace-pre-wrap rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",a.getFloatingProps(t).className),children:[t.children,s.jsx(m.FloatingArrow,{ref:a.arrowRef,context:a.context,fill:"currentColor",strokeWidth:1,className:"stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"})]})}):null}),ie=f.forwardRef(function({children:r,asChild:t=!1,...n},a){const o=M(),c=r&&typeof r=="object"&&"ref"in r&&r.ref!==void 0?r.ref:void 0,i=m.useMergeRefs([o.refs.setReference,a,c]);return t&&f.isValidElement(r)?f.cloneElement(r,o.getReferenceProps({ref:i,...n,...r.props})):s.jsx("span",{ref:i,...o.getReferenceProps(n),className:n.className??"dial-tooltip-trigger text-left",children:r})}),v=({hideTooltip:e,tooltip:r,children:t,triggerClassName:n,contentClassName:a,...o})=>e||!r?s.jsx("span",{className:n,children:t}):s.jsxs(oe,{...o,children:[s.jsx(ie,{className:d(n,"truncate"),children:t}),s.jsx(le,{className:d("text-primary",a,"max-w-[300px]",(e||!r)&&"hidden"),children:r})]}),ce=18,L={size:ce,stroke:2},de=({label:e,id:r,checked:t,indeterminate:n,disabled:a,ariaLabel:o,onChange:l})=>{const c=f.useCallback(x=>{x.stopPropagation(),l?.(x.target.checked,r)},[l,r]),i=d("flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",`${t?"":'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,a?"pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4":""),u=d("mr-2 border rounded",a?"bg-layer-4 border-icon-secondary":"");return s.jsxs("label",{className:i,htmlFor:r,children:[t&&(n?s.jsx(b.IconMinus,{className:u,...L}):s.jsx(b.IconCheck,{className:u,...L})),e&&s.jsx(v,{tooltip:e,triggerClassName:"flex-1 min-w-0",children:s.jsx("p",{className:"text-primary w-full truncate",children:e})}),s.jsx("input",{type:"checkbox",onChange:c,id:r,checked:t,"aria-checked":n?"mixed":t,"aria-disabled":a||void 0,"aria-label":e?void 0:o,className:"invisible w-0 h-0"})]})};var p=(e=>(e.VALID="valid",e.ERROR="error",e))(p||{});const ue=(e,r)=>{if(r===e.id)switch(e.status){case p.VALID:return"border-accent-secondary text-primary";case p.ERROR:return"border-red-900 text-primary";default:return"border-accent-primary text-primary"}switch(e.status){case p.VALID:return"border-primary text-white";case p.ERROR:return"border-red-900 text-error";default:return"border-primary text-secondary"}},xe=(e,r)=>{if(r===e.id)switch(e.status){case p.VALID:return"bg-accent-secondary";case p.ERROR:return"bg-red-400";default:return"bg-accent-primary"}switch(e.status){case p.VALID:return"bg-accent-secondary";case p.ERROR:return"bg-red-400";default:return"bg-layer-4"}},me=({step:e,index:r,currentStep:t,onChangeStep:n})=>{const a="h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer",o="w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white",l=()=>t===e.id&&e.status===p.ERROR?s.jsx(b.IconExclamationCircle,{stroke:2,size:16}):t!==e.id&&e.status===p.VALID?s.jsx(b.IconCheck,{stroke:2,size:16}):r+1;return s.jsxs("button",{className:d(a,ue(e,t)),onClick:()=>n(e.id),children:[s.jsx("span",{className:d(o,xe(e,t)),children:l()}),s.jsx("span",{children:e.name})]})},pe=({steps:e,currentStep:r,onChangeStep:t})=>{const n=a=>{const o=e.findIndex(c=>c.id===r),l=e.findIndex(c=>c.id===a);(a!==r&&e[o].status===p.VALID||l<o)&&t(a)};return s.jsx("div",{id:"steps",className:"flex gap-x-3",children:e.map((a,o)=>s.jsx(me,{currentStep:r,onChangeStep:n,step:a,index:o},a.id))})},W=({name:e,value:r,title:t,description:n,checked:a=!1,inputId:o,cssClass:l,labelCssClass:c,disabled:i,onChange:u,descriptionCssClass:x})=>{const h=`${o}-desc`,y=d("dial-small cursor-pointer",i?"text-secondary":"text-primary",c),D=d("cursor-pointer dial-input-radio",t&&"mr-2",l),j=d("flex flex-col",!!n&&"mb-2"),g=d("dial-tiny mt-2 ml-[26px] text-secondary",x),E=P=>{i||P.target.checked&&u?.(r)};return s.jsxs("div",{className:j,children:[s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"radio",id:o,name:e,value:r,checked:a,disabled:i,"aria-describedby":a&&n?h:void 0,className:D,onChange:E}),t?s.jsx("label",{className:y,htmlFor:o,children:t}):null]}),a&&n&&s.jsx("div",{id:h,className:g,children:n})]})};var O=(e=>(e.Row="Row",e.Column="Column",e))(O||{});const fe="flex flex-col",he="flex mt-1",be={[O.Column]:"flex-col gap-y-3",[O.Row]:"flex-row gap-x-6"},ge=({fieldTitle:e,radioCssClass:r,disabled:t,elementId:n,radioButtons:a,activeRadioButton:o,orientation:l,onChange:c})=>s.jsxs("div",{className:fe,children:[e&&s.jsx(S,{fieldTitle:e,htmlFor:n}),s.jsx("div",{role:"radiogroup","aria-label":e,"aria-disabled":t||void 0,"data-testid":"radiofield-options",className:d(he,be[l]),children:a.map(i=>s.jsx(W,{name:n,value:i.id,inputId:i.id,disabled:t,cssClass:r,title:i.name,description:i.description,checked:i.id===o,onChange:u=>c(u)},i.id))})]}),_=({value:e,textareaId:r,placeholder:t,cssClass:n="",disabled:a,invalid:o,readonly:l,onChange:c})=>s.jsx(v,{tooltip:e,triggerClassName:"flex",children:s.jsx("textarea",{id:r,placeholder:t,value:e||"",disabled:a,className:d("dial-textarea dial-input",o?"dial-input-error":"",a&&"dial-input-disable",l&&"dial-input-readonly",n),onChange:i=>!l&&c?.(i.currentTarget.value)})}),je=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Backspace","Delete","Tab","Enter","Escape","Home","End"],ye=(e,r,t,n)=>{if((r==="number"||t!==void 0||n!==void 0)&&!je.includes(e.key)&&!(e.key==="-"&&e.currentTarget.selectionStart===0&&(t===void 0||t<0))&&!(e.key==="."&&r==="number"&&!e.currentTarget.value.includes("."))){if(!/^[0-9]$/.test(e.key)){e.preventDefault();return}if(t!==void 0||n!==void 0){const o=e.currentTarget.value,l=e.currentTarget.selectionStart||0,c=o.slice(0,l)+e.key+o.slice(l),i=parseFloat(c);if(!isNaN(i)){if(t!==void 0&&i<t){e.preventDefault();return}if(n!==void 0&&i>n){e.preventDefault();return}}}}},F=({iconBeforeInput:e,iconAfterInput:r,hideBorder:t,value:n,elementId:a,placeholder:o="",cssClass:l="",containerCssClass:c,tooltipTriggerClassName:i,type:u="text",disabled:x,readonly:h,invalid:y,onChange:D,min:j,max:g,prefix:E,suffix:P,textBeforeInput:I,textAfterInput:R})=>{const $=C=>C.target.blur(),U=u==="number"||j!==void 0||g!==void 0,K=C=>{ye(C,u,j,g)},G=C=>{const k=C.currentTarget.value;if(U&&k!==""){const A=parseFloat(k);if(isNaN(A)&&k!=="-"&&k!=="."||!isNaN(A)&&(j!==void 0&&A<j||g!==void 0&&A>g))return}D?.(k)};return s.jsxs("div",{className:d("dial-input-field flex flex-row items-center justify-between",t?"dial-input-no-border":"dial-input",y&&"dial-input-error",x&&"dial-input-disable",h&&"dial-input-readonly",!I&&"pl-1",!R&&"pr-1",c),children:[I&&s.jsx(v,{tooltip:I,children:s.jsx(F,{hideBorder:!0,containerCssClass:"rounded-r-none border-r-0",cssClass:"px-2 overflow-hidden overflow-ellipsis dial-small",value:I,disabled:!0,elementId:I+"textBefore"})}),E&&s.jsxs("p",{className:"text-secondary dial-small pl-2",children:[" ",E]}),s.jsx(w,{icon:e,className:"pl-2"}),s.jsx(v,{tooltip:n,triggerClassName:i,children:s.jsx("input",{type:u,autoComplete:"off",id:a,placeholder:o,value:n??"",title:n?String(n):"",disabled:x,className:d("border-0 bg-transparent px-2",l),onChange:C=>!h&&G?.(C),onKeyDown:K,onWheel:$,min:j,max:g})}),s.jsx(w,{icon:r,className:"pr-2"}),P&&s.jsxs("p",{className:"text-secondary dial-small pr-2",children:[" ",P]}),R&&s.jsx(v,{tooltip:R,children:s.jsx(F,{hideBorder:!0,containerCssClass:"rounded-l-none border-l-0",cssClass:"px-2",value:R,disabled:!0,elementId:R+"textAfter"})})]})},Ce=/^0+\.(\d+)?$/,Ne=/^0+/,q=({fieldTitle:e,errorText:r,optional:t,elementCssClass:n,elementContainerCssClass:a,elementId:o,containerCssClass:l,readonly:c,defaultEmptyText:i,min:u,max:x,...h})=>s.jsxs("div",{className:d("flex flex-col",l),children:[s.jsx(S,{fieldTitle:e,optional:t,htmlFor:o}),c?s.jsx("span",{children:h.value||(i??"None")}):s.jsxs(s.Fragment,{children:[s.jsx(F,{elementId:o,cssClass:n,containerCssClass:a,invalid:r!=null,min:u,max:x,...h}),s.jsx(V,{errorText:r})]})]}),we=({onChange:e,value:r,min:t,max:n,...a})=>{const o=l=>String(l)?.match(Ce)?String(l)?.replace(Ne,"0"):Number(l);return s.jsx(q,{type:"number",onChange:l=>e?.(o(l)),value:r,min:t,max:n,...a})},ve=({onChange:e,...r})=>s.jsx(q,{type:"text",onChange:t=>e?.(t),...r}),De=({fieldTitle:e,optional:r,elementId:t,elementCssClass:n,errorText:a,...o})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(S,{fieldTitle:e,optional:r,htmlFor:t}),s.jsx(_,{textareaId:t,cssClass:n,...o}),s.jsx(V,{errorText:a})]}),Ie=({title:e,switchId:r,isOn:t=!1,disabled:n,onChange:a})=>{const o=d("flex w-[36px] h-[18px] cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",t?"flex-row-reverse":"flex-row",n?"pointer-events-none":"",n?t?"bg-controls-disable":"bg-layer-4":t?"bg-accent-primary":"bg-layer-4"),l=f.useCallback(c=>{c.stopPropagation(),a?.(!t)},[a,t]);return s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"checkbox",onChange:l,id:r,disabled:n,className:"invisible w-0 h-0",checked:t}),s.jsx("label",{htmlFor:r,className:o,children:s.jsx("span",{className:d("size-3 rounded-full",n?t?"bg-layer-4":"bg-controls-disable":"bg-controls-enable-primary")})}),e&&s.jsx("span",{className:"pl-2 dial-small text-primary",children:e})]})},Re=({onClick:e})=>s.jsx(b.IconEyeOff,{...L,className:"text-primary",onClick:e}),ke=({onClick:e})=>s.jsx(b.IconEye,{...L,className:"text-primary",onClick:e}),H=({...e})=>{const[r,t]=f.useState(!1),n=f.useCallback(a=>{t(a)},[]);return s.jsx(F,{type:r?"text":"password",...e,iconAfterInput:r?s.jsx(Re,{onClick:()=>n(!1)}):s.jsx(ke,{onClick:()=>n(!0)})})},Te=({fieldTitle:e,optional:r,elementCssClass:t,elementId:n,errorText:a,...o})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(S,{fieldTitle:e,optional:r,htmlFor:n}),s.jsx(H,{cssClass:t,elementId:n,invalid:!!a,...o}),s.jsx(V,{errorText:a})]});exports.AlertVariant=N;exports.ButtonVariant=T;exports.DialAlert=Q;exports.DialButton=B;exports.DialCheckbox=de;exports.DialErrorText=V;exports.DialFieldLabel=S;exports.DialIcon=w;exports.DialInput=F;exports.DialLoader=re;exports.DialNumberInputField=we;exports.DialPasswordInput=H;exports.DialPasswordInputField=Te;exports.DialRadioButton=W;exports.DialRadioField=ge;exports.DialSteps=pe;exports.DialSwitch=Ie;exports.DialTextAreaField=De;exports.DialTextInputField=ve;exports.DialTextarea=_;exports.DialTooltip=v;exports.StepStatus=p;