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

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"),p=require("react"),x=require("@floating-ui/react"),N=({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.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:m})=>{const u=d("dial-small-semi",l?"mr-2":"",i?"ml-2":"",c?"hidden sm:inline":"inline"),h=d(s&&$[s],t,"focus-visible:outline outline-offset-0");return r.jsxs("button",{ref:n,type:"button",className:h,onClick:v=>a?.(v),disabled:o,"aria-label":e||m,children:[r.jsx(N,{icon:i}),e&&r.jsx("span",{className:u,children:e}),r.jsx(N,{icon:l})]})},S=({errorText:e})=>e&&r.jsx("span",{className:"text-error dial-tiny mt-1",children:e}),A=({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 K={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})},G={[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"},Z="items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex",X=({variant:e=C.Info,message:s,cssClass:t,closable:n=!1,onClose:a})=>r.jsxs("div",{role:"alert",className:d(Z,G[e],t),children:[r.jsxs("div",{className:"flex items-center gap-2",children:[r.jsx(N,{icon:K[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)})]}),Y="flex items-center justify-center text-secondary",J="shrink-0 grow-0 basis-auto animate-spin-steps",Q=({size:e=18,cssClass:s,iconClass:t,fullWidth:n=!0,ariaLabel:a="Loading"})=>r.jsx("div",{role:"status","aria-label":a,className:d({[Y]:!0,"w-full h-full":n,[s||""]:!!s}),children:r.jsx(N,{icon:r.jsx(b.IconLoader,{width:e,height:e,className:d(J,t)})})}),ee=7,re=2,z=p.createContext(null),M=()=>{const e=p.useContext(z);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},se=({initialOpen:e=!1,placement:s="bottom",isTriggerClickable:t=!1,open:n,onOpenChange:a}={})=>{const[o,l]=p.useState(e),i=p.useRef(null),c=n??o,m=a??l,u=x.useFloating({placement:s,open:c,onOpenChange:m,whileElementsMounted:x.autoUpdate,middleware:[x.offset(ee+re),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}}),v=x.useFocus(u.context,{enabled:n==null}),F=x.useDismiss(u.context),j=x.useRole(u.context,{role:"tooltip"}),g=x.useInteractions([h,v,F,j]);return p.useMemo(()=>({open:c,setOpen:m,arrowRef:i,...g,...u}),[c,m,g,u])},te=({children:e,...s})=>{const t=se(s);return r.jsx(z.Provider,{value:t,children:e})},ne=p.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}),ae=p.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&&p.isValidElement(s)?p.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})}),w=({hideTooltip:e,tooltip:s,children:t,triggerClassName:n,contentClassName:a,...o})=>e||!s?r.jsx("span",{className:n,children:t}):r.jsxs(te,{...o,children:[r.jsx(ae,{className:d(n,"truncate"),children:t}),r.jsx(ne,{className:d("text-primary",a,"max-w-[300px]",(e||!s)&&"hidden"),children:s})]}),oe=18,O={size:oe,stroke:2},le=({label:e,id:s,checked:t,indeterminate:n,disabled:a,ariaLabel:o,onChange:l})=>{const i=p.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":""),m=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:m,...O}):r.jsx(b.IconCheck,{className:m,...O})),e&&r.jsx(w,{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 ie=(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"}},ce=(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"}},de=({step:e,index:s,currentStep:t,handleStepChange: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,ie(e,t)),onClick:()=>n(e.id),children:[r.jsx("span",{className:d(o,ce(e,t)),children:l()}),r.jsx("span",{children:e.name})]})},ue=({steps:e,currentStep:s,setCurrentStep: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(de,{currentStep:s,handleStepChange: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(w,{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)})}),xe=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Backspace","Delete","Tab","Enter","Escape","Home","End"],me=(e,s,t,n)=>{if((s==="number"||t!==void 0||n!==void 0)&&!xe.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}}}}},E=({iconBeforeInput:e,iconAfterInput:s,hideBorder:t,value:n,elementId:a,placeholder:o="",cssClass:l="",containerCssClass:i,tooltipTriggerClassName:c,type:m="text",disabled:u,readonly:h,invalid:v,onChange:F,min:j,max:g,prefix:P,suffix:L,textBeforeInput:D,textAfterInput:I})=>{const B=y=>y.target.blur(),q=m==="number"||j!==void 0||g!==void 0,H=y=>{me(y,m,j,g)},U=y=>{const R=y.currentTarget.value;if(q&&R!==""){const T=parseFloat(R);if(isNaN(T)&&R!=="-"&&R!=="."||!isNaN(T)&&(j!==void 0&&T<j||g!==void 0&&T>g))return}F?.(R)};return r.jsxs("div",{className:d("dial-input-field flex flex-row items-center justify-between",t?"dial-input-no-border":"dial-input",v&&"dial-input-error",u&&"dial-input-disable",h&&"dial-input-readonly",!D&&"pl-1",!I&&"pr-1",i),children:[D&&r.jsx(w,{tooltip:D,children:r.jsx(E,{hideBorder:!0,containerCssClass:"rounded-r-none border-r-0",cssClass:"px-2 overflow-hidden overflow-ellipsis dial-small",value:D,disabled:!0,elementId:D+"textBefore"})}),P&&r.jsxs("p",{className:"text-secondary dial-small pl-2",children:[" ",P]}),r.jsx(N,{icon:e,className:"pl-2"}),r.jsx(w,{tooltip:n,triggerClassName:c,children:r.jsx("input",{type:m,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&&U?.(y),onKeyDown:H,onWheel:B,min:j,max:g})}),r.jsx(N,{icon:s,className:"pr-2"}),L&&r.jsxs("p",{className:"text-secondary dial-small pr-2",children:[" ",L]}),I&&r.jsx(w,{tooltip:I,children:r.jsx(E,{hideBorder:!0,containerCssClass:"rounded-l-none border-l-0",cssClass:"px-2",value:I,disabled:!0,elementId:I+"textAfter"})})]})},fe=/^0+\.(\d+)?$/,pe=/^0+/,W=({fieldTitle:e,errorText:s,optional:t,elementCssClass:n,elementContainerCssClass:a,elementId:o,containerCssClass:l,readonly:i,defaultEmptyText:c,min:m,max:u,...h})=>r.jsxs("div",{className:d("flex flex-col",l),children:[r.jsx(A,{fieldTitle:e,optional:t,htmlFor:o}),i?r.jsx("span",{children:h.value||(c??"None")}):r.jsxs(r.Fragment,{children:[r.jsx(E,{elementId:o,cssClass:n,containerCssClass:a,invalid:s!=null,min:m,max:u,...h}),r.jsx(S,{errorText:s})]})]}),be=({onChange:e,value:s,min:t,max:n,...a})=>{const o=l=>String(l)?.match(fe)?String(l)?.replace(pe,"0"):Number(l);return r.jsx(W,{type:"number",onChange:l=>e?.(o(l)),value:s,min:t,max:n,...a})},he=({onChange:e,...s})=>r.jsx(W,{type:"text",onChange:t=>e?.(t),...s}),ge=({fieldTitle:e,optional:s,elementId:t,elementCssClass:n,errorText:a,...o})=>r.jsxs("div",{className:"flex flex-col",children:[r.jsx(A,{fieldTitle:e,optional:s,htmlFor:t}),r.jsx(_,{textareaId:t,cssClass:n,...o}),r.jsx(S,{errorText:a})]}),je=({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=p.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})]})};exports.AlertVariant=C;exports.ButtonVariant=k;exports.DialAlert=X;exports.DialButton=V;exports.DialCheckbox=le;exports.DialErrorText=S;exports.DialFieldLabel=A;exports.DialIcon=N;exports.DialInput=E;exports.DialLoader=Q;exports.DialNumberInputField=be;exports.DialSteps=ue;exports.DialSwitch=je;exports.DialTextAreaField=ge;exports.DialTextInputField=he;exports.DialTextarea=_;exports.DialTooltip=w;exports.StepStatus=f;
+"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;

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

@@ -1,18 +1,18 @@
-import { jsx as n, jsxs as m, Fragment as $ } from "react/jsx-runtime";
+import { jsx as t, jsxs as m, Fragment as G } from "react/jsx-runtime";
 import d from "classnames";
-import { IconCircleCheck as G, IconAlertTriangle as Z, IconAlertCircle as X, IconInfoCircle as Y, IconX as q, IconLoader as J, IconMinus as Q, IconCheck as A, IconExclamationCircle as ee } from "@tabler/icons-react";
-import { createContext as re, useState as te, useRef as ne, useMemo as se, useContext as oe, forwardRef as L, isValidElement as ae, cloneElement as le, useCallback as O } from "react";
-import { useFloating as ie, offset as ce, flip as de, shift as ue, arrow as me, autoUpdate as fe, useHover as pe, useFocus as be, useDismiss as he, useRole as ge, useInteractions as xe, useMergeRefs as z, FloatingPortal as ye, FloatingArrow as Ne } from "@floating-ui/react";
-const N = ({ icon: e, className: r }) => e ? /* @__PURE__ */ n("span", { className: d("flex-shrink-0", r), children: e }) : null;
+import { IconCircleCheck as Z, IconAlertTriangle as X, IconAlertCircle as Y, IconInfoCircle as q, IconX as J, IconLoader as Q, IconMinus as ee, IconCheck as V, IconExclamationCircle as re, IconEyeOff as te, IconEye as ne } from "@tabler/icons-react";
+import { createContext as se, useState as z, useRef as oe, useMemo as ae, useContext as le, forwardRef as _, isValidElement as ie, cloneElement as ce, useCallback as S } from "react";
+import { useFloating as de, offset as ue, flip as me, shift as fe, arrow as pe, autoUpdate as he, useHover as be, useFocus as ge, useDismiss as xe, useRole as ye, useInteractions as Ce, useMergeRefs as j, FloatingPortal as Ne, FloatingArrow as we } from "@floating-ui/react";
+const C = ({ icon: e, className: r }) => e ? /* @__PURE__ */ t("span", { className: d("flex-shrink-0", r), children: e }) : null;
 var k = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e))(k || {});
-const Ce = {
+const ve = {
   [k.Primary]: "dial-primary-button",
   [k.Secondary]: "dial-secondary-button",
   [k.Tertiary]: "dial-tertiary-button"
-}, we = ({
+}, De = ({
   title: e,
   variant: r,
-  cssClass: t,
+  cssClass: n,
   ref: s,
   onClick: o,
   disable: a,
@@ -26,9 +26,9 @@ const Ce = {
     l ? "mr-2" : "",
     i ? "ml-2" : "",
     c ? "hidden sm:inline" : "inline"
-  ), b = d(
-    r && Ce[r],
-    t,
+  ), h = d(
+    r && ve[r],
+    n,
     "focus-visible:outline outline-offset-0"
   );
   return /* @__PURE__ */ m(
@@ -36,21 +36,21 @@ const Ce = {
     {
       ref: s,
       type: "button",
-      className: b,
-      onClick: (C) => o?.(C),
+      className: h,
+      onClick: (N) => o?.(N),
       disabled: a,
       "aria-label": e || f,
       children: [
-        /* @__PURE__ */ n(N, { icon: i }),
-        e && /* @__PURE__ */ n("span", { className: u, children: e }),
-        /* @__PURE__ */ n(N, { icon: l })
+        /* @__PURE__ */ t(C, { icon: i }),
+        e && /* @__PURE__ */ t("span", { className: u, children: e }),
+        /* @__PURE__ */ t(C, { icon: l })
       ]
     }
   );
-}, V = ({ errorText: e }) => e && /* @__PURE__ */ n("span", { className: "text-error dial-tiny mt-1", children: e }), _ = ({
+}, P = ({ errorText: e }) => e && /* @__PURE__ */ t("span", { className: "text-error dial-tiny mt-1", children: e }), A = ({
   fieldTitle: e,
   htmlFor: r,
-  optional: t,
+  optional: n,
   optionalText: s,
   cssClass: o
 }) => e ? /* @__PURE__ */ m(
@@ -63,26 +63,26 @@ const Ce = {
     ),
     htmlFor: r,
     children: [
-      /* @__PURE__ */ n("span", { className: "min-h-4", children: e }),
-      t && /* @__PURE__ */ n("span", { className: "ml-1", children: s ?? "(Optional)" })
+      /* @__PURE__ */ t("span", { className: "min-h-4", children: e }),
+      n && /* @__PURE__ */ t("span", { className: "ml-1", children: s ?? "(Optional)" })
     ]
   }
 ) : null;
 var y = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(y || {});
-const ve = {
-  info: /* @__PURE__ */ n(Y, { size: 24, stroke: 2 }),
-  error: /* @__PURE__ */ n(X, { size: 24, stroke: 2 }),
-  warning: /* @__PURE__ */ n(Z, { size: 24, stroke: 2 }),
-  success: /* @__PURE__ */ n(G, { size: 24, stroke: 2 })
-}, De = {
+const Ie = {
+  info: /* @__PURE__ */ t(q, { size: 24, stroke: 2 }),
+  error: /* @__PURE__ */ t(Y, { size: 24, stroke: 2 }),
+  warning: /* @__PURE__ */ t(X, { size: 24, stroke: 2 }),
+  success: /* @__PURE__ */ t(Z, { size: 24, stroke: 2 })
+}, Re = {
   [y.Info]: "bg-info border-info text-info",
   [y.Success]: "bg-success border-success text-success",
   [y.Warning]: "bg-warning border-warning text-warning",
   [y.Error]: "bg-error border-error text-error"
-}, Ie = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", Ze = ({
+}, ke = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", Qe = ({
   variant: e = y.Info,
   message: r,
-  cssClass: t,
+  cssClass: n,
   closable: s = !1,
   onClose: o
 }) => /* @__PURE__ */ m(
@@ -90,112 +90,112 @@ const ve = {
   {
     role: "alert",
     className: d(
-      Ie,
-      De[e],
-      t
+      ke,
+      Re[e],
+      n
     ),
     children: [
       /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ n(N, { icon: ve[e] }),
-        /* @__PURE__ */ n("div", { className: "text-primary", children: r })
+        /* @__PURE__ */ t(C, { icon: Ie[e] }),
+        /* @__PURE__ */ t("div", { className: "text-primary", children: r })
       ] }),
-      s && /* @__PURE__ */ n(
-        we,
+      s && /* @__PURE__ */ t(
+        De,
         {
           cssClass: "ml-2 text-secondary hover:text-primary",
           ariaLabel: "Close alert",
-          iconBefore: /* @__PURE__ */ n(q, { size: 16 }),
+          iconBefore: /* @__PURE__ */ t(J, { size: 16 }),
           onClick: (a) => o?.(a)
         }
       )
     ]
   }
-), Re = "flex items-center justify-center text-secondary", ke = "shrink-0 grow-0 basis-auto animate-spin-steps", Xe = ({
+), Te = "flex items-center justify-center text-secondary", Ee = "shrink-0 grow-0 basis-auto animate-spin-steps", er = ({
   size: e = 18,
   cssClass: r,
-  iconClass: t,
+  iconClass: n,
   fullWidth: s = !0,
   ariaLabel: o = "Loading"
-}) => /* @__PURE__ */ n(
+}) => /* @__PURE__ */ t(
   "div",
   {
     role: "status",
     "aria-label": o,
     className: d({
-      [Re]: !0,
+      [Te]: !0,
       "w-full h-full": s,
       [r || ""]: !!r
     }),
-    children: /* @__PURE__ */ n(
-      N,
+    children: /* @__PURE__ */ t(
+      C,
       {
-        icon: /* @__PURE__ */ n(
-          J,
+        icon: /* @__PURE__ */ t(
+          Q,
           {
             width: e,
             height: e,
-            className: d(ke, t)
+            className: d(Ee, n)
           }
         )
       }
     )
   }
-), Te = 7, Ee = 2, j = re(null), W = () => {
-  const e = oe(j);
+), Fe = 7, Se = 2, W = se(null), M = () => {
+  const e = le(W);
   if (e == null)
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
   return e;
-}, Fe = ({
+}, Pe = ({
   initialOpen: e = !1,
   placement: r = "bottom",
-  isTriggerClickable: t = !1,
+  isTriggerClickable: n = !1,
   open: s,
   onOpenChange: o
 } = {}) => {
-  const [a, l] = te(e), i = ne(null), c = s ?? a, f = o ?? l, u = ie({
+  const [a, l] = z(e), i = oe(null), c = s ?? a, f = o ?? l, u = de({
     placement: r,
     open: c,
     onOpenChange: f,
-    whileElementsMounted: fe,
+    whileElementsMounted: he,
     middleware: [
-      ce(Te + Ee),
-      de({
+      ue(Fe + Se),
+      me({
         crossAxis: r.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: 5
       }),
-      ue({ padding: 5 }),
-      me({
+      fe({ padding: 5 }),
+      pe({
         element: i
       })
     ]
-  }), b = pe(u.context, {
+  }), h = be(u.context, {
     move: !1,
     enabled: s == null,
-    mouseOnly: t,
+    mouseOnly: n,
     delay: { open: 500, close: 0 }
-  }), C = be(u.context, {
+  }), N = ge(u.context, {
     enabled: s == null
-  }), T = he(u.context), g = ge(u.context, { role: "tooltip" }), h = xe([b, C, T, g]);
-  return se(
+  }), F = xe(u.context), g = ye(u.context, { role: "tooltip" }), b = Ce([h, N, F, g]);
+  return ae(
     () => ({
       open: c,
       setOpen: f,
       arrowRef: i,
-      ...h,
+      ...b,
       ...u
     }),
-    [c, f, h, u]
+    [c, f, b, u]
   );
-}, Pe = ({
+}, Ae = ({
   children: e,
   ...r
 }) => {
-  const t = Fe(r);
-  return /* @__PURE__ */ n(j.Provider, { value: t, children: e });
-}, Se = L(function({ style: r, ...t }, s) {
-  const o = W(), a = z([o.refs.setFloating, s]);
-  return o.open ? /* @__PURE__ */ n(ye, { id: "tooltip-portal", children: /* @__PURE__ */ m(
+  const n = Pe(r);
+  return /* @__PURE__ */ t(W.Provider, { value: n, children: e });
+}, Le = _(function({ style: r, ...n }, s) {
+  const o = M(), a = j([o.refs.setFloating, s]);
+  return o.open ? /* @__PURE__ */ t(Ne, { id: "tooltip-portal", children: /* @__PURE__ */ m(
     "div",
     {
       ref: a,
@@ -203,15 +203,15 @@ const ve = {
         ...o.floatingStyles,
         ...r
       },
-      ...o.getFloatingProps(t),
+      ...o.getFloatingProps(n),
       className: d(
         "z-[55] whitespace-pre-wrap rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",
-        o.getFloatingProps(t).className
+        o.getFloatingProps(n).className
       ),
       children: [
-        t.children,
-        /* @__PURE__ */ n(
-          Ne,
+        n.children,
+        /* @__PURE__ */ t(
+          we,
           {
             ref: o.arrowRef,
             context: o.context,
@@ -223,16 +223,16 @@ const ve = {
       ]
     }
   ) }) : null;
-}), Ae = L(function({ children: r, asChild: t = !1, ...s }, o) {
-  const a = W(), i = r && typeof r == "object" && "ref" in r && r.ref !== void 0 ? r.ref : void 0, c = z([a.refs.setReference, o, i]);
-  return t && ae(r) ? le(
+}), Oe = _(function({ children: r, asChild: n = !1, ...s }, o) {
+  const a = M(), i = r && typeof r == "object" && "ref" in r && r.ref !== void 0 ? r.ref : void 0, c = j([a.refs.setReference, o, i]);
+  return n && ie(r) ? ce(
     r,
     a.getReferenceProps({
       ref: c,
       ...s,
       ...r.props
     })
-  ) : /* @__PURE__ */ n(
+  ) : /* @__PURE__ */ t(
     "span",
     {
       ref: c,
@@ -244,14 +244,14 @@ const ve = {
 }), I = ({
   hideTooltip: e,
   tooltip: r,
-  children: t,
+  children: n,
   triggerClassName: s,
   contentClassName: o,
   ...a
-}) => e || !r ? /* @__PURE__ */ n("span", { className: s, children: t }) : /* @__PURE__ */ m(Pe, { ...a, children: [
-  /* @__PURE__ */ n(Ae, { className: d(s, "truncate"), children: t }),
-  /* @__PURE__ */ n(
-    Se,
+}) => e || !r ? /* @__PURE__ */ t("span", { className: s, children: n }) : /* @__PURE__ */ m(Ae, { ...a, children: [
+  /* @__PURE__ */ t(Oe, { className: d(s, "truncate"), children: n }),
+  /* @__PURE__ */ t(
+    Le,
     {
       className: d(
         "text-primary",
@@ -262,42 +262,42 @@ const ve = {
       children: r
     }
   )
-] }), Le = 18, S = {
-  size: Le,
+] }), Ve = 18, T = {
+  size: Ve,
   stroke: 2
-}, Ye = ({
+}, rr = ({
   label: e,
   id: r,
-  checked: t,
+  checked: n,
   indeterminate: s,
   disabled: o,
   ariaLabel: a,
   onChange: l
 }) => {
-  const i = O(
+  const i = S(
     (u) => {
       u.stopPropagation(), l?.(u.target.checked, r);
     },
     [l, r]
   ), 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'}`,
+    `${n ? "" : 'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,
     o ? "pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4" : ""
   ), f = d(
     "mr-2 border rounded",
     o ? "bg-layer-4 border-icon-secondary" : ""
   );
   return /* @__PURE__ */ m("label", { className: c, htmlFor: r, children: [
-    t && (s ? /* @__PURE__ */ n(Q, { className: f, ...S }) : /* @__PURE__ */ n(A, { className: f, ...S })),
-    e && /* @__PURE__ */ n(I, { tooltip: e, triggerClassName: "flex-1 min-w-0", children: /* @__PURE__ */ n("p", { className: "text-primary w-full truncate", children: e }) }),
-    /* @__PURE__ */ n(
+    n && (s ? /* @__PURE__ */ t(ee, { className: f, ...T }) : /* @__PURE__ */ t(V, { className: f, ...T })),
+    e && /* @__PURE__ */ t(I, { tooltip: e, triggerClassName: "flex-1 min-w-0", children: /* @__PURE__ */ t("p", { className: "text-primary w-full truncate", children: e }) }),
+    /* @__PURE__ */ t(
       "input",
       {
         type: "checkbox",
         onChange: i,
         id: r,
-        checked: t,
-        "aria-checked": s ? "mixed" : t,
+        checked: n,
+        "aria-checked": s ? "mixed" : n,
         "aria-disabled": o || void 0,
         "aria-label": e ? void 0 : a,
         className: "invisible w-0 h-0"
@@ -306,7 +306,7 @@ const ve = {
   ] });
 };
 var p = /* @__PURE__ */ ((e) => (e.VALID = "valid", e.ERROR = "error", e))(p || {});
-const Oe = (e, r) => {
+const ze = (e, r) => {
   if (r === e.id)
     switch (e.status) {
       case p.VALID:
@@ -324,7 +324,7 @@ const Oe = (e, r) => {
     default:
       return "border-primary text-secondary";
   }
-}, ze = (e, r) => {
+}, _e = (e, r) => {
   if (r === e.id)
     switch (e.status) {
       case p.VALID:
@@ -342,63 +342,63 @@ const Oe = (e, r) => {
     default:
       return "bg-layer-4";
   }
-}, Ve = ({
+}, je = ({
   step: e,
   index: r,
-  currentStep: t,
-  handleStepChange: s
+  currentStep: n,
+  onChangeStep: s
 }) => {
-  const o = "h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer", a = "w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white", l = () => t === e.id && e.status === p.ERROR ? /* @__PURE__ */ n(ee, { stroke: 2, size: 16 }) : t !== e.id && e.status === p.VALID ? /* @__PURE__ */ n(A, { stroke: 2, size: 16 }) : r + 1;
+  const o = "h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer", a = "w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white", l = () => n === e.id && e.status === p.ERROR ? /* @__PURE__ */ t(re, { stroke: 2, size: 16 }) : n !== e.id && e.status === p.VALID ? /* @__PURE__ */ t(V, { stroke: 2, size: 16 }) : r + 1;
   return /* @__PURE__ */ m(
     "button",
     {
-      className: d(o, Oe(e, t)),
+      className: d(o, ze(e, n)),
       onClick: () => s(e.id),
       children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ t(
           "span",
           {
-            className: d(a, ze(e, t)),
+            className: d(a, _e(e, n)),
             children: l()
           }
         ),
-        /* @__PURE__ */ n("span", { children: e.name })
+        /* @__PURE__ */ t("span", { children: e.name })
       ]
     }
   );
-}, qe = ({
+}, tr = ({
   steps: e,
   currentStep: r,
-  setCurrentStep: t
+  onChangeStep: n
 }) => {
   const s = (o) => {
     const a = e.findIndex((i) => i.id === r), l = e.findIndex((i) => i.id === o);
-    (o !== r && e[a].status === p.VALID || l < a) && t(o);
+    (o !== r && e[a].status === p.VALID || l < a) && n(o);
   };
-  return /* @__PURE__ */ n("div", { id: "steps", className: "flex gap-x-3", children: e.map((o, a) => /* @__PURE__ */ n(
-    Ve,
+  return /* @__PURE__ */ t("div", { id: "steps", className: "flex gap-x-3", children: e.map((o, a) => /* @__PURE__ */ t(
+    je,
     {
       currentStep: r,
-      handleStepChange: s,
+      onChangeStep: s,
       step: o,
       index: a
     },
     o.id
   )) });
-}, _e = ({
+}, We = ({
   value: e,
   textareaId: r,
-  placeholder: t,
+  placeholder: n,
   cssClass: s = "",
   disabled: o,
   invalid: a,
   readonly: l,
   onChange: i
-}) => /* @__PURE__ */ n(I, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ n(
+}) => /* @__PURE__ */ t(I, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ t(
   "textarea",
   {
     id: r,
-    placeholder: t,
+    placeholder: n,
     value: e || "",
     disabled: o,
     className: d(
@@ -410,7 +410,7 @@ const Oe = (e, r) => {
     ),
     onChange: (c) => !l && i?.(c.currentTarget.value)
   }
-) }), je = [
+) }), Me = [
   "ArrowLeft",
   "ArrowRight",
   "ArrowUp",
@@ -422,16 +422,16 @@ const Oe = (e, r) => {
   "Escape",
   "Home",
   "End"
-], We = (e, r, t, s) => {
-  if ((r === "number" || t !== void 0 || s !== 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("."))) {
+], He = (e, r, n, s) => {
+  if ((r === "number" || n !== void 0 || s !== void 0) && !Me.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (n === void 0 || n < 0)) && !(e.key === "." && r === "number" && !e.currentTarget.value.includes("."))) {
     if (!/^[0-9]$/.test(e.key)) {
       e.preventDefault();
       return;
     }
-    if (t !== void 0 || s !== void 0) {
+    if (n !== void 0 || s !== void 0) {
       const a = e.currentTarget.value, l = e.currentTarget.selectionStart || 0, i = a.slice(0, l) + e.key + a.slice(l), c = parseFloat(i);
       if (!isNaN(c)) {
-        if (t !== void 0 && c < t) {
+        if (n !== void 0 && c < n) {
           e.preventDefault();
           return;
         }
@@ -445,7 +445,7 @@ const Oe = (e, r) => {
 }, E = ({
   iconBeforeInput: e,
   iconAfterInput: r,
-  hideBorder: t,
+  hideBorder: n,
   value: s,
   elementId: o,
   placeholder: a = "",
@@ -454,42 +454,42 @@ const Oe = (e, r) => {
   tooltipTriggerClassName: c,
   type: f = "text",
   disabled: u,
-  readonly: b,
-  invalid: C,
-  onChange: T,
+  readonly: h,
+  invalid: N,
+  onChange: F,
   min: g,
-  max: h,
-  prefix: F,
-  suffix: P,
+  max: b,
+  prefix: L,
+  suffix: O,
   textBeforeInput: w,
   textAfterInput: v
 }) => {
-  const B = (x) => x.target.blur(), H = f === "number" || g !== void 0 || h !== void 0, U = (x) => {
-    We(x, f, g, h);
-  }, K = (x) => {
+  const B = (x) => x.target.blur(), U = f === "number" || g !== void 0 || b !== void 0, K = (x) => {
+    He(x, f, g, b);
+  }, $ = (x) => {
     const D = x.currentTarget.value;
-    if (H && D !== "") {
+    if (U && D !== "") {
       const R = parseFloat(D);
-      if (isNaN(R) && D !== "-" && D !== "." || !isNaN(R) && (g !== void 0 && R < g || h !== void 0 && R > h))
+      if (isNaN(R) && D !== "-" && D !== "." || !isNaN(R) && (g !== void 0 && R < g || b !== void 0 && R > b))
         return;
     }
-    T?.(D);
+    F?.(D);
   };
   return /* @__PURE__ */ m(
     "div",
     {
       className: d(
         "dial-input-field flex flex-row items-center justify-between",
-        t ? "dial-input-no-border" : "dial-input",
-        C && "dial-input-error",
+        n ? "dial-input-no-border" : "dial-input",
+        N && "dial-input-error",
         u && "dial-input-disable",
-        b && "dial-input-readonly",
+        h && "dial-input-readonly",
         !w && "pl-1",
         !v && "pr-1",
         i
       ),
       children: [
-        w && /* @__PURE__ */ n(I, { tooltip: w, children: /* @__PURE__ */ n(
+        w && /* @__PURE__ */ t(I, { tooltip: w, children: /* @__PURE__ */ t(
           E,
           {
             hideBorder: !0,
@@ -500,12 +500,12 @@ const Oe = (e, r) => {
             elementId: w + "textBefore"
           }
         ) }),
-        F && /* @__PURE__ */ m("p", { className: "text-secondary dial-small pl-2", children: [
+        L && /* @__PURE__ */ m("p", { className: "text-secondary dial-small pl-2", children: [
           " ",
-          F
+          L
         ] }),
-        /* @__PURE__ */ n(N, { icon: e, className: "pl-2" }),
-        /* @__PURE__ */ n(I, { tooltip: s, triggerClassName: c, children: /* @__PURE__ */ n(
+        /* @__PURE__ */ t(C, { icon: e, className: "pl-2" }),
+        /* @__PURE__ */ t(I, { tooltip: s, triggerClassName: c, children: /* @__PURE__ */ t(
           "input",
           {
             type: f,
@@ -516,19 +516,19 @@ const Oe = (e, r) => {
             title: s ? String(s) : "",
             disabled: u,
             className: d("border-0 bg-transparent px-2", l),
-            onChange: (x) => !b && K?.(x),
-            onKeyDown: U,
+            onChange: (x) => !h && $?.(x),
+            onKeyDown: K,
             onWheel: B,
             min: g,
-            max: h
+            max: b
           }
         ) }),
-        /* @__PURE__ */ n(N, { icon: r, className: "pr-2" }),
-        P && /* @__PURE__ */ m("p", { className: "text-secondary dial-small pr-2", children: [
+        /* @__PURE__ */ t(C, { icon: r, className: "pr-2" }),
+        O && /* @__PURE__ */ m("p", { className: "text-secondary dial-small pr-2", children: [
           " ",
-          P
+          O
         ] }),
-        v && /* @__PURE__ */ n(I, { tooltip: v, children: /* @__PURE__ */ n(
+        v && /* @__PURE__ */ t(I, { tooltip: v, children: /* @__PURE__ */ t(
           E,
           {
             hideBorder: !0,
@@ -542,10 +542,10 @@ const Oe = (e, r) => {
       ]
     }
   );
-}, Me = /^0+\.(\d+)?$/, Be = /^0+/, M = ({
+}, Be = /^0+\.(\d+)?$/, Ue = /^0+/, H = ({
   fieldTitle: e,
   errorText: r,
-  optional: t,
+  optional: n,
   elementCssClass: s,
   elementContainerCssClass: o,
   elementId: a,
@@ -554,18 +554,18 @@ const Oe = (e, r) => {
   defaultEmptyText: c,
   min: f,
   max: u,
-  ...b
+  ...h
 }) => /* @__PURE__ */ m("div", { className: d("flex flex-col", l), children: [
-  /* @__PURE__ */ n(
-    _,
+  /* @__PURE__ */ t(
+    A,
     {
       fieldTitle: e,
-      optional: t,
+      optional: n,
       htmlFor: a
     }
   ),
-  i ? /* @__PURE__ */ n("span", { children: b.value || (c ?? "None") }) : /* @__PURE__ */ m($, { children: [
-    /* @__PURE__ */ n(
+  i ? /* @__PURE__ */ t("span", { children: h.value || (c ?? "None") }) : /* @__PURE__ */ m(G, { children: [
+    /* @__PURE__ */ t(
       E,
       {
         elementId: a,
@@ -574,85 +574,85 @@ const Oe = (e, r) => {
         invalid: r != null,
         min: f,
         max: u,
-        ...b
+        ...h
       }
     ),
-    /* @__PURE__ */ n(V, { errorText: r })
+    /* @__PURE__ */ t(P, { errorText: r })
   ] })
-] }), Je = ({
+] }), nr = ({
   onChange: e,
   value: r,
-  min: t,
+  min: n,
   max: s,
   ...o
 }) => {
-  const a = (l) => String(l)?.match(Me) ? String(l)?.replace(Be, "0") : Number(l);
-  return /* @__PURE__ */ n(
-    M,
+  const a = (l) => String(l)?.match(Be) ? String(l)?.replace(Ue, "0") : Number(l);
+  return /* @__PURE__ */ t(
+    H,
     {
       type: "number",
       onChange: (l) => e?.(a(l)),
       value: r,
-      min: t,
+      min: n,
       max: s,
       ...o
     }
   );
-}, Qe = ({
+}, sr = ({
   onChange: e,
   ...r
-}) => /* @__PURE__ */ n(
-  M,
+}) => /* @__PURE__ */ t(
+  H,
   {
     type: "text",
-    onChange: (t) => e?.(t),
+    onChange: (n) => e?.(n),
     ...r
   }
-), er = ({
+), or = ({
   fieldTitle: e,
   optional: r,
-  elementId: t,
+  elementId: n,
   elementCssClass: s,
   errorText: o,
   ...a
 }) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
-  /* @__PURE__ */ n(
-    _,
+  /* @__PURE__ */ t(
+    A,
     {
       fieldTitle: e,
       optional: r,
-      htmlFor: t
+      htmlFor: n
     }
   ),
-  /* @__PURE__ */ n(
-    _e,
+  /* @__PURE__ */ t(
+    We,
     {
-      textareaId: t,
+      textareaId: n,
       cssClass: s,
       ...a
     }
   ),
-  /* @__PURE__ */ n(V, { errorText: o })
-] }), rr = ({
+  /* @__PURE__ */ t(P, { errorText: o })
+] }), ar = ({
   title: e,
   switchId: r,
-  isOn: t = !1,
+  isOn: n = !1,
   disabled: s,
   onChange: o
 }) => {
   const a = 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 ? "flex-row-reverse" : "flex-row",
     s ? "pointer-events-none" : "",
-    s ? t ? "bg-controls-disable" : "bg-layer-4" : t ? "bg-accent-primary" : "bg-layer-4"
-  ), l = O(
+    s ? n ? "bg-controls-disable" : "bg-layer-4" : n ? "bg-accent-primary" : "bg-layer-4"
+  ), l = S(
     (i) => {
-      i.stopPropagation(), o?.(!t);
+      i.stopPropagation(), o?.(!n);
     },
-    [o, t]
+    [o, n]
   );
   return /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ t(
       "input",
       {
         type: "checkbox",
@@ -660,38 +660,85 @@ const Oe = (e, r) => {
         id: r,
         disabled: s,
         className: "invisible w-0 h-0",
-        checked: t
+        checked: n
       }
     ),
-    /* @__PURE__ */ n("label", { htmlFor: r, className: a, children: /* @__PURE__ */ n(
+    /* @__PURE__ */ t("label", { htmlFor: r, className: a, children: /* @__PURE__ */ t(
       "span",
       {
         className: d(
           "size-3 rounded-full",
-          s ? t ? "bg-layer-4" : "bg-controls-disable" : "bg-controls-enable-primary"
+          s ? n ? "bg-layer-4" : "bg-controls-disable" : "bg-controls-enable-primary"
         )
       }
     ) }),
-    e && /* @__PURE__ */ n("span", { className: "pl-2 dial-small text-primary", children: e })
+    e && /* @__PURE__ */ t("span", { className: "pl-2 dial-small text-primary", children: e })
   ] });
-};
+}, Ke = ({ onClick: e }) => /* @__PURE__ */ t(
+  te,
+  {
+    ...T,
+    className: "text-primary",
+    onClick: e
+  }
+), $e = ({ onClick: e }) => /* @__PURE__ */ t(ne, { ...T, className: "text-primary", onClick: e }), Ge = ({ ...e }) => {
+  const [r, n] = z(!1), s = S((o) => {
+    n(o);
+  }, []);
+  return /* @__PURE__ */ t(
+    E,
+    {
+      type: r ? "text" : "password",
+      ...e,
+      iconAfterInput: r ? /* @__PURE__ */ t(Ke, { onClick: () => s(!1) }) : /* @__PURE__ */ t($e, { onClick: () => s(!0) })
+    }
+  );
+}, lr = ({
+  fieldTitle: e,
+  optional: r,
+  elementCssClass: n,
+  elementId: s,
+  errorText: o,
+  ...a
+}) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
+  /* @__PURE__ */ t(
+    A,
+    {
+      fieldTitle: e,
+      optional: r,
+      htmlFor: s
+    }
+  ),
+  /* @__PURE__ */ t(
+    Ge,
+    {
+      cssClass: n,
+      elementId: s,
+      invalid: !!o,
+      ...a
+    }
+  ),
+  /* @__PURE__ */ t(P, { errorText: o })
+] });
 export {
   y as AlertVariant,
   k as ButtonVariant,
-  Ze as DialAlert,
-  we as DialButton,
-  Ye as DialCheckbox,
-  V as DialErrorText,
-  _ as DialFieldLabel,
-  N as DialIcon,
+  Qe as DialAlert,
+  De as DialButton,
+  rr as DialCheckbox,
+  P as DialErrorText,
+  A as DialFieldLabel,
+  C as DialIcon,
   E as DialInput,
-  Xe as DialLoader,
-  Je as DialNumberInputField,
-  qe as DialSteps,
-  rr as DialSwitch,
-  er as DialTextAreaField,
-  Qe as DialTextInputField,
-  _e as DialTextarea,
+  er as DialLoader,
+  nr as DialNumberInputField,
+  Ge as DialPasswordInput,
+  lr as DialPasswordInputField,
+  tr as DialSteps,
+  ar as DialSwitch,
+  or as DialTextAreaField,
+  sr as DialTextInputField,
+  We as DialTextarea,
   I as DialTooltip,
   p as StepStatus
 };

package/dist/src/components/PasswordInput/Icons/HideIcon.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+interface Props {
+    onClick: () => void;
+}
+/**
+ * An icon button component for hiding password input (eye-off icon).
+ *
+ * @example
+ * ```tsx
+ * <DialHideIcon onClick={() => setShowPassword(false)} />
+ * ```
+ *
+ * @param onClick - Callback function called when the icon is clicked
+ */
+export declare const DialHideIcon: FC<Props>;
+export {};

package/dist/src/components/PasswordInput/Icons/ShowIcon.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+interface Props {
+    onClick: () => void;
+}
+/**
+ * An icon button component for showing password input (eye icon).
+ *
+ * @example
+ * ```tsx
+ * <DialShowIcon onClick={() => setShowPassword(true)} />
+ * ```
+ *
+ * @param onClick - Callback function called when the icon is clicked
+ */
+export declare const DialShowIcon: FC<Props>;
+export {};

package/dist/src/components/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { DialInputProps } from '../Input/Input';
+/**
+ * A password input component with show/hide functionality and customizable props.
+ *
+ * @example
+ * ```tsx
+ * <DialPasswordInput
+ *   id="password"
+ *   label="Password"
+ *   value={password}
+ *   onChange={e => setPassword(e.target.value)}
+ *   disabled={false}
+ * />
+ * ```
+ *
+ * @param id - Unique identifier for the input element
+ * @param [label] - The label text for the field
+ * @param [value] - The current value of the input
+ * @param [onChange] - Callback function called when the input value changes
+ * @param [disabled=false] - Whether the input is disabled
+ * @param [iconAfterInput] - Custom icon to display after the input (overridden by show/hide icons)
+ */
+export declare const DialPasswordInput: FC<DialInputProps>;

package/dist/src/components/PasswordInput/PasswordInputField.d.ts

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { DialInputFieldBaseProps } from '../InputField/InputField';
+export interface DialPasswordInputFieldProps extends DialInputFieldBaseProps {
+    onChange?: (value: string) => void;
+}
+/**
+ * A password input field component with label, error text, and show/hide functionality.
+ *
+ * @example
+ * ```tsx
+ * <DialPasswordInputField
+ *   elementId="password"
+ *   fieldTitle="Password"
+ *   value={password}
+ *   onChange={setPassword}
+ *   errorText={error}
+ *   optional={false}
+ * />
+ * ```
+ *
+ * @param elementId - Unique identifier for the input element
+ * @param [fieldTitle] - The label text for the field
+ * @param [value] - The current value of the input
+ * @param [onChange] - Callback function called when the input value changes
+ * @param [errorText] - Error message to display below the input
+ * @param [optional=false] - Whether the field is optional
+ * @param [cssClass] - Custom CSS class for the input element
+ */
+export declare const DialPasswordInputField: FC<DialPasswordInputFieldProps>;

package/dist/src/components/Steps/Step.d.ts

@@ -4,6 +4,6 @@ export interface DialStepProps {
     step: Step;
     index: number;
     currentStep: string;
-    handleStepChange: (step: string) => void;
+    onChangeStep: (step: string) => void;
 }
 export declare const DialStep: FC<DialStepProps>;

package/dist/src/components/Steps/Steps.d.ts

@@ -3,7 +3,7 @@ import { Step } from '../../models/step';
 export interface DialStepsProps {
     steps: Step[];
     currentStep: string;
-    setCurrentStep: (step: string) => void;
+    onChangeStep: (step: string) => void;
 }
 /**
  * Props for the DialSteps component, which renders a multi-step navigation UI.
@@ -13,12 +13,12 @@ export interface DialStepsProps {
  * <DialSteps
  *   steps={[{ id: 'step1', label: 'Step 1', status: StepStatus.VALID }, { id: 'step2', label: 'Step 2', status: StepStatus.ERROR }]}
  *   currentStep="step1"
- *   setCurrentStep={(step) => console.log(step)}
+ *   onChangeStep={(step) => console.log(step)}
  * />
  * ```
  *
  * @param steps - Array of step objects to display
  * @param currentStep - The id of the currently active step
- * @param setCurrentStep - Callback to set the current step by id
+ * @param onChangeStep - Callback to set the current step by id
  */
 export declare const DialSteps: FC<DialStepsProps>;

package/dist/src/index.d.ts

@@ -13,6 +13,8 @@ export { DialSwitch } from './components/Switch/Switch';
 export { DialInput } from './components/Input/Input';
 export { DialNumberInputField } from './components/InputField/InputField';
 export { DialTextInputField } from './components/InputField/InputField';
+export { DialPasswordInputField } from './components/PasswordInput/PasswordInputField';
+export { DialPasswordInput } from './components/PasswordInput/PasswordInput';
 export { AlertVariant } from './types/alert';
 export { ButtonVariant } from './types/button';
 export { StepStatus } from './models/step';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.2.0-rc.10",
+  "version": "0.2.0-rc.12",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",