@epam/ai-dial-ui-kit 0.2.0-rc.14 → 0.2.0-rc.16

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),u=require("classnames"),b=require("@tabler/icons-react"),p=require("react"),m=require("@floating-ui/react"),w=({icon:e,className:r})=>e?s.jsx("span",{className:u("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"},z=({title:e,variant:r,cssClass:t,ref:n,onClick:a,disable:o,iconAfter:l,iconBefore:i,hideTitleOnMobile:c,ariaLabel:d})=>{const x=u("dial-small-semi",l?"mr-2":"",i?"ml-2":"",c?"hidden sm:inline":"inline"),h=u(r&&Z[r],t,"focus-visible:outline outline-offset-0");return s.jsxs("button",{ref:n,type:"button",className:h,onClick:C=>a?.(C),disabled:o,"aria-label":e||d,children:[s.jsx(w,{icon:i}),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:u("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:u(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(z,{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:u({[ee]:!0,"w-full h-full":n,[r||""]:!!r}),children:s.jsx(w,{icon:s.jsx(b.IconLoader,{width:e,height:e,className:u(se,t)})})}),te=7,ne=2,B=p.createContext(null),M=()=>{const e=p.useContext(B);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]=p.useState(e),i=p.useRef(null),c=n??o,d=a??l,x=m.useFloating({placement:r,open:c,onOpenChange:d,whileElementsMounted:m.autoUpdate,middleware:[m.offset(te+ne),m.flip({crossAxis:r.includes("-"),fallbackAxisSideDirection:"start",padding:5}),m.shift({padding:5}),m.arrow({element:i})]}),h=m.useHover(x.context,{move:!1,enabled:n==null,mouseOnly:t,delay:{open:500,close:0}}),C=m.useFocus(x.context,{enabled:n==null}),D=m.useDismiss(x.context),j=m.useRole(x.context,{role:"tooltip"}),g=m.useInteractions([h,C,D,j]);return p.useMemo(()=>({open:c,setOpen:d,arrowRef:i,...g,...x}),[c,d,g,x])},oe=({children:e,...r})=>{const t=ae(r);return s.jsx(B.Provider,{value:t,children:e})},le=p.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:u("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=p.forwardRef(function({children:r,asChild:t=!1,...n},a){const o=M(),i=r&&typeof r=="object"&&"ref"in r&&r.ref!==void 0?r.ref:void 0,c=m.useMergeRefs([o.refs.setReference,a,i]);return t&&p.isValidElement(r)?p.cloneElement(r,o.getReferenceProps({ref:c,...n,...r.props})):s.jsx("span",{ref:c,...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:u(n,"truncate"),children:t}),s.jsx(le,{className:u("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 i=p.useCallback(x=>{x.stopPropagation(),l?.(x.target.checked,r)},[l,r]),c=u("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":""),d=u("mr-2 border rounded",a?"bg-layer-4 border-icon-secondary":"");return s.jsxs("label",{className:c,htmlFor:r,children:[t&&(n?s.jsx(b.IconMinus,{className:d,...L}):s.jsx(b.IconCheck,{className:d,...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:i,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 f=(e=>(e.VALID="valid",e.ERROR="error",e))(f||{});const ue=(e,r)=>{if(r===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"}},xe=(e,r)=>{if(r===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"}},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===f.ERROR?s.jsx(b.IconExclamationCircle,{stroke:2,size:16}):t!==e.id&&e.status===f.VALID?s.jsx(b.IconCheck,{stroke:2,size:16}):r+1;return s.jsxs("button",{className:u(a,ue(e,t)),onClick:()=>n(e.id),children:[s.jsx("span",{className:u(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(i=>i.id===r),l=e.findIndex(i=>i.id===a);(a!==r&&e[o].status===f.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:i,disabled:c,onChange:d,descriptionCssClass:x})=>{const h=`${o}-desc`,C=u("dial-small cursor-pointer",c?"text-secondary":"text-primary",i),D=u("cursor-pointer dial-input-radio",t&&"mr-2",l),j=u("flex flex-col",!!n&&"mb-2"),g=u("dial-tiny mt-2 ml-[26px] text-secondary",x),E=P=>{c||P.target.checked&&d?.(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:c,"aria-describedby":a&&n?h:void 0,className:D,onChange:E}),t?s.jsx("label",{className:C,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 gap-2",he="flex",be="pb-1",ge={[O.Column]:"flex-col gap-y-3",[O.Row]:"flex-row gap-x-6"},je=({fieldTitle:e,radioCssClass:r,labelCssClass:t,disabled:n,elementId:a,radioButtons:o,activeRadioButton:l,orientation:i,onChange:c})=>s.jsxs("div",{className:fe,children:[e&&s.jsx(S,{fieldTitle:e,htmlFor:a}),s.jsx("div",{role:"radiogroup","aria-label":e,"aria-disabled":n||void 0,className:u(he,ge[i]),children:o.map(d=>s.jsxs(p.Fragment,{children:[s.jsx(W,{name:a,value:d.id,inputId:d.id,disabled:n,cssClass:r,labelCssClass:t,title:d.name,checked:d.id===l,onChange:()=>c(d.id)}),d.id===l&&d.content?s.jsx("div",{className:be,children:d.content}):null]},d.id))})]}),_=({value:e,textareaId:r,placeholder:t,cssClass:n="",disabled:a,invalid:o,readonly:l,onChange:i})=>s.jsx(v,{tooltip:e,triggerClassName:"flex",children:s.jsx("textarea",{id:r,placeholder:t,value:e||"",disabled:a,className:u("dial-textarea dial-input",o?"dial-input-error":"",a&&"dial-input-disable",l&&"dial-input-readonly",n),onChange:c=>!l&&i?.(c.currentTarget.value)})}),Ce=["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)&&!Ce.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,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}}}}},F=({iconBeforeInput:e,iconAfterInput:r,hideBorder:t,value:n,elementId:a,placeholder:o="",cssClass:l="",containerCssClass:i,tooltipTriggerClassName:c,type:d="text",disabled:x,readonly:h,invalid:C,onChange:D,min:j,max:g,prefix:E,suffix:P,textBeforeInput:I,textAfterInput:R})=>{const $=y=>y.target.blur(),U=d==="number"||j!==void 0||g!==void 0,G=y=>{ye(y,d,j,g)},K=y=>{const k=y.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:u("dial-input-field flex flex-row items-center justify-between",t?"dial-input-no-border":"dial-input",C&&"dial-input-error",x&&"dial-input-disable",h&&"dial-input-readonly",!I&&"pl-1",!R&&"pr-1",i),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:c,children:s.jsx("input",{type:d,autoComplete:"off",id:a,placeholder:o,value:n??"",title:n?String(n):"",disabled:x,className:u("border-0 bg-transparent px-2",l),onChange:y=>!h&&K?.(y),onKeyDown:G,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"})})]})},Ne=/^0+\.(\d+)?$/,we=/^0+/,q=({fieldTitle:e,errorText:r,optional:t,elementCssClass:n,elementContainerCssClass:a,elementId:o,containerCssClass:l,readonly:i,defaultEmptyText:c,min:d,max:x,...h})=>s.jsxs("div",{className:u("flex flex-col",l),children:[s.jsx(S,{fieldTitle:e,optional:t,htmlFor:o}),i?s.jsx("span",{children:h.value||(c??"None")}):s.jsxs(s.Fragment,{children:[s.jsx(F,{elementId:o,cssClass:n,containerCssClass:a,invalid:r!=null,min:d,max:x,...h}),s.jsx(V,{errorText:r})]})]}),ve=({onChange:e,value:r,min:t,max:n,...a})=>{const o=l=>String(l)?.match(Ne)?String(l)?.replace(we,"0"):Number(l);return s.jsx(q,{type:"number",onChange:l=>e?.(o(l)),value:r,min:t,max:n,...a})},De=({onChange:e,...r})=>s.jsx(q,{type:"text",onChange:t=>e?.(t),...r}),Ie=({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})]}),Re=({title:e,switchId:r,isOn:t=!1,disabled:n,onChange:a})=>{const o=u("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 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:u("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})]})},ke=({onClick:e})=>s.jsx(b.IconEyeOff,{...L,className:"text-primary",onClick:e}),Te=({onClick:e})=>s.jsx(b.IconEye,{...L,className:"text-primary",onClick:e}),H=({...e})=>{const[r,t]=p.useState(!1),n=p.useCallback(a=>{t(a)},[]);return s.jsx(F,{type:r?"text":"password",...e,iconAfterInput:r?s.jsx(ke,{onClick:()=>n(!1)}):s.jsx(Te,{onClick:()=>n(!0)})})},Fe=({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=z;exports.DialCheckbox=de;exports.DialErrorText=V;exports.DialFieldLabel=S;exports.DialIcon=w;exports.DialInput=F;exports.DialLoader=re;exports.DialNumberInputField=ve;exports.DialPasswordInput=H;exports.DialPasswordInputField=Fe;exports.DialRadioButton=W;exports.DialRadioGroup=je;exports.DialSteps=pe;exports.DialSwitch=Re;exports.DialTextAreaField=Ie;exports.DialTextInputField=De;exports.DialTextarea=_;exports.DialTooltip=v;exports.StepStatus=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),u=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:u("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"},z=({title:e,variant:r,cssClass:t,ref:n,onClick:a,disable:o,iconAfter:l,iconBefore:i,hideTitleOnMobile:c,ariaLabel:d})=>{const x=u("dial-small-semi",l?"mr-2":"",i?"ml-2":"",c?"hidden sm:inline":"inline"),h=u(r&&Z[r],t,"focus-visible:outline outline-offset-0");return s.jsxs("button",{ref:n,type:"button",className:h,onClick:C=>a?.(C),disabled:o,"aria-label":e||d,children:[s.jsx(w,{icon:i}),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:u("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:u(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(z,{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:u({[ee]:!0,"w-full h-full":n,[r||""]:!!r}),children:s.jsx(w,{icon:s.jsx(b.IconLoader,{width:e,height:e,className:u(se,t)})})}),te=7,ne=2,B=f.createContext(null),M=()=>{const e=f.useContext(B);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),i=f.useRef(null),c=n??o,d=a??l,x=m.useFloating({placement:r,open:c,onOpenChange:d,whileElementsMounted:m.autoUpdate,middleware:[m.offset(te+ne),m.flip({crossAxis:r.includes("-"),fallbackAxisSideDirection:"start",padding:5}),m.shift({padding:5}),m.arrow({element:i})]}),h=m.useHover(x.context,{move:!1,enabled:n==null,mouseOnly:t,delay:{open:500,close:0}}),C=m.useFocus(x.context,{enabled:n==null}),D=m.useDismiss(x.context),j=m.useRole(x.context,{role:"tooltip"}),g=m.useInteractions([h,C,D,j]);return f.useMemo(()=>({open:c,setOpen:d,arrowRef:i,...g,...x}),[c,d,g,x])},oe=({children:e,...r})=>{const t=ae(r);return s.jsx(B.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:u("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(),i=r&&typeof r=="object"&&"ref"in r&&r.ref!==void 0?r.ref:void 0,c=m.useMergeRefs([o.refs.setReference,a,i]);return t&&f.isValidElement(r)?f.cloneElement(r,o.getReferenceProps({ref:c,...n,...r.props})):s.jsx("span",{ref:c,...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})=>s.jsxs(oe,{...o,children:[s.jsx(ie,{className:u(n,"truncate"),children:t}),s.jsx(le,{className:u("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 i=f.useCallback(x=>{x.stopPropagation(),l?.(x.target.checked,r)},[l,r]),c=u("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":""),d=u("mr-2 border rounded",a?"bg-layer-4 border-icon-secondary":"");return s.jsxs("label",{className:c,htmlFor:r,children:[t&&(n?s.jsx(b.IconMinus,{className:d,...L}):s.jsx(b.IconCheck,{className:d,...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:i,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:u(a,ue(e,t)),onClick:()=>n(e.id),children:[s.jsx("span",{className:u(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(i=>i.id===r),l=e.findIndex(i=>i.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:i,disabled:c,onChange:d,descriptionCssClass:x})=>{const h=`${o}-desc`,C=u("dial-small cursor-pointer",c?"text-secondary":"text-primary",i),D=u("cursor-pointer dial-input-radio",t&&"mr-2",l),j=u("flex flex-col",!!n&&"mb-2"),g=u("dial-tiny mt-2 ml-[26px] text-secondary",x),E=P=>{c||P.target.checked&&d?.(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:c,"aria-describedby":a&&n?h:void 0,className:D,onChange:E}),t?s.jsx("label",{className:C,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 gap-2",he="flex",be="pb-1 mt-2",ge={[O.Column]:"flex-col gap-y-3",[O.Row]:"flex-row gap-x-6"},je=({fieldTitle:e,radioCssClass:r,labelCssClass:t,disabled:n,elementId:a,radioButtons:o,activeRadioButton:l,orientation:i,onChange:c})=>s.jsxs("div",{className:fe,children:[e&&s.jsx(S,{fieldTitle:e,htmlFor:a}),s.jsx("div",{role:"radiogroup","aria-label":e,"aria-disabled":n||void 0,className:u(he,ge[i]),children:o.map(d=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(W,{name:a,value:d.id,inputId:d.id,disabled:n,cssClass:r,labelCssClass:t,title:d.name,checked:d.id===l,onChange:()=>c(d.id)}),d.id===l&&d.content?s.jsx("div",{className:be,children:d.content}):null]},d.id))})]}),_=({value:e,textareaId:r,placeholder:t,cssClass:n="",disabled:a,invalid:o,readonly:l,onChange:i})=>s.jsx(v,{tooltip:e,triggerClassName:"flex",children:s.jsx("textarea",{id:r,placeholder:t,value:e||"",disabled:a,className:u("dial-textarea dial-input",o?"dial-input-error":"",a&&"dial-input-disable",l&&"dial-input-readonly",n),onChange:c=>!l&&i?.(c.currentTarget.value)})}),Ce=["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)&&!Ce.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,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}}}}},F=({iconBeforeInput:e,iconAfterInput:r,hideBorder:t,value:n,elementId:a,placeholder:o="",cssClass:l="",containerCssClass:i,tooltipTriggerClassName:c,type:d="text",disabled:x,readonly:h,invalid:C,onChange:D,min:j,max:g,prefix:E,suffix:P,textBeforeInput:I,textAfterInput:R})=>{const $=y=>y.target.blur(),U=d==="number"||j!==void 0||g!==void 0,G=y=>{ye(y,d,j,g)},K=y=>{const k=y.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:u("dial-input-field flex flex-row items-center justify-between",t?"dial-input-no-border":"dial-input",C&&"dial-input-error",x&&"dial-input-disable",h&&"dial-input-readonly",!I&&"pl-1",!R&&"pr-1",i),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}),s.jsx(v,{tooltip:n,triggerClassName:c,children:s.jsx("input",{type:d,autoComplete:"off",id:a,placeholder:o,value:n??"",title:n?String(n):"",disabled:x,className:u("border-0 bg-transparent px-2",l),onChange:y=>!h&&K?.(y),onKeyDown:G,onWheel:$,min:j,max:g})}),s.jsx(w,{icon:r}),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"})})]})},Ne=/^0+\.(\d+)?$/,we=/^0+/,q=({fieldTitle:e,errorText:r,optional:t,elementCssClass:n,elementContainerCssClass:a,elementId:o,containerCssClass:l,readonly:i,defaultEmptyText:c,min:d,max:x,...h})=>s.jsxs("div",{className:u("flex flex-col",l),children:[s.jsx(S,{fieldTitle:e,optional:t,htmlFor:o}),i?s.jsx("span",{children:h.value||(c??"None")}):s.jsxs(s.Fragment,{children:[s.jsx(F,{elementId:o,cssClass:n,containerCssClass:a,invalid:r!=null,min:d,max:x,...h}),s.jsx(V,{errorText:r})]})]}),ve=({onChange:e,value:r,min:t,max:n,...a})=>{const o=l=>String(l)?.match(Ne)?String(l)?.replace(we,"0"):Number(l);return s.jsx(q,{type:"number",onChange:l=>e?.(o(l)),value:r,min:t,max:n,...a})},De=({onChange:e,...r})=>s.jsx(q,{type:"text",onChange:t=>e?.(t),...r}),Ie=({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})]}),Re=({title:e,switchId:r,isOn:t=!1,disabled:n,onChange:a})=>{const o=u("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(i=>{i.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:u("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})]})},ke=({onClick:e})=>s.jsx(b.IconEyeOff,{...L,className:"text-primary",onClick:e}),Te=({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(ke,{onClick:()=>n(!1)}):s.jsx(Te,{onClick:()=>n(!0)})})},Fe=({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=z;exports.DialCheckbox=de;exports.DialErrorText=V;exports.DialFieldLabel=S;exports.DialIcon=w;exports.DialInput=F;exports.DialLoader=re;exports.DialNumberInputField=ve;exports.DialPasswordInput=H;exports.DialPasswordInputField=Fe;exports.DialRadioButton=W;exports.DialRadioGroup=je;exports.DialSteps=pe;exports.DialSwitch=Re;exports.DialTextAreaField=Ie;exports.DialTextInputField=De;exports.DialTextarea=_;exports.DialTooltip=v;exports.StepStatus=p;

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

@@ -1,15 +1,15 @@
 import { jsx as n, jsxs as m, Fragment as Z } from "react/jsx-runtime";
 import u from "classnames";
 import { IconCircleCheck as X, IconAlertTriangle as Y, IconAlertCircle as q, IconInfoCircle as J, IconX as Q, IconLoader as ee, IconMinus as re, IconCheck as z, IconExclamationCircle as ne, IconEyeOff as te, IconEye as se } from "@tabler/icons-react";
-import { createContext as ae, useState as W, useRef as oe, useMemo as le, useContext as ie, forwardRef as _, isValidElement as ce, cloneElement as de, useCallback as O, Fragment as ue } from "react";
-import { useFloating as me, offset as pe, flip as fe, shift as he, arrow as xe, autoUpdate as be, useHover as ge, useFocus as Ce, useDismiss as ye, useRole as Ne, useInteractions as we, useMergeRefs as j, FloatingPortal as ve, FloatingArrow as De } from "@floating-ui/react";
+import { createContext as ae, useState as W, useRef as oe, useMemo as le, useContext as ie, forwardRef as _, isValidElement as ce, cloneElement as de, useCallback as O } from "react";
+import { useFloating as ue, offset as me, flip as pe, shift as fe, arrow as he, autoUpdate as xe, useHover as be, useFocus as ge, useDismiss as Ce, useRole as ye, useInteractions as Ne, useMergeRefs as j, FloatingPortal as we, FloatingArrow as ve } from "@floating-ui/react";
 const N = ({ icon: e, className: r }) => e ? /* @__PURE__ */ n("span", { className: u("flex-shrink-0", r), children: e }) : null;
-var F = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e))(F || {});
-const Ie = {
-  [F.Primary]: "dial-primary-button",
-  [F.Secondary]: "dial-secondary-button",
-  [F.Tertiary]: "dial-tertiary-button"
-}, Re = ({
+var T = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e))(T || {});
+const De = {
+  [T.Primary]: "dial-primary-button",
+  [T.Secondary]: "dial-secondary-button",
+  [T.Tertiary]: "dial-tertiary-button"
+}, Ie = ({
   title: e,
   variant: r,
   cssClass: t,
@@ -27,7 +27,7 @@ const Ie = {
     i ? "ml-2" : "",
     c ? "hidden sm:inline" : "inline"
   ), f = u(
-    r && Ie[r],
+    r && De[r],
     t,
     "focus-visible:outline outline-offset-0"
   );
@@ -69,17 +69,17 @@ const Ie = {
   }
 ) : null;
 var y = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(y || {});
-const ke = {
+const Re = {
   info: /* @__PURE__ */ n(J, { size: 24, stroke: 2 }),
   error: /* @__PURE__ */ n(q, { size: 24, stroke: 2 }),
   warning: /* @__PURE__ */ n(Y, { size: 24, stroke: 2 }),
   success: /* @__PURE__ */ n(X, { size: 24, stroke: 2 })
-}, Ee = {
+}, ke = {
   [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"
-}, Fe = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", or = ({
+}, Ee = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", ar = ({
   variant: e = y.Info,
   message: r,
   cssClass: t,
@@ -90,17 +90,17 @@ const ke = {
   {
     role: "alert",
     className: u(
-      Fe,
-      Ee[e],
+      Ee,
+      ke[e],
       t
     ),
     children: [
       /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ n(N, { icon: ke[e] }),
+        /* @__PURE__ */ n(N, { icon: Re[e] }),
         /* @__PURE__ */ n("div", { className: "text-primary", children: r })
       ] }),
       s && /* @__PURE__ */ n(
-        Re,
+        Ie,
         {
           cssClass: "ml-2 text-secondary hover:text-primary",
           ariaLabel: "Close alert",
@@ -110,7 +110,7 @@ const ke = {
       )
     ]
   }
-), Te = "flex items-center justify-center text-secondary", Se = "shrink-0 grow-0 basis-auto animate-spin-steps", lr = ({
+), Te = "flex items-center justify-center text-secondary", Fe = "shrink-0 grow-0 basis-auto animate-spin-steps", or = ({
   size: e = 18,
   cssClass: r,
   iconClass: t,
@@ -134,49 +134,49 @@ const ke = {
           {
             width: e,
             height: e,
-            className: u(Se, t)
+            className: u(Fe, t)
           }
         )
       }
     )
   }
-), Pe = 7, Ae = 2, M = ae(null), B = () => {
+), Se = 7, Pe = 2, M = ae(null), B = () => {
   const e = ie(M);
   if (e == null)
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
   return e;
-}, Le = ({
+}, Ae = ({
   initialOpen: e = !1,
   placement: r = "bottom",
   isTriggerClickable: t = !1,
   open: s,
   onOpenChange: a
 } = {}) => {
-  const [o, l] = W(e), i = oe(null), c = s ?? o, d = a ?? l, p = me({
+  const [o, l] = W(e), i = oe(null), c = s ?? o, d = a ?? l, p = ue({
     placement: r,
     open: c,
     onOpenChange: d,
-    whileElementsMounted: be,
+    whileElementsMounted: xe,
     middleware: [
-      pe(Pe + Ae),
-      fe({
+      me(Se + Pe),
+      pe({
         crossAxis: r.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: 5
       }),
-      he({ padding: 5 }),
-      xe({
+      fe({ padding: 5 }),
+      he({
         element: i
       })
     ]
-  }), f = ge(p.context, {
+  }), f = be(p.context, {
     move: !1,
     enabled: s == null,
     mouseOnly: t,
     delay: { open: 500, close: 0 }
-  }), g = Ce(p.context, {
+  }), g = ge(p.context, {
     enabled: s == null
-  }), w = ye(p.context), b = Ne(p.context, { role: "tooltip" }), x = we([f, g, w, b]);
+  }), w = Ce(p.context), b = ye(p.context, { role: "tooltip" }), x = Ne([f, g, w, b]);
   return le(
     () => ({
       open: c,
@@ -187,15 +187,15 @@ const ke = {
     }),
     [c, d, x, p]
   );
-}, Oe = ({
+}, Le = ({
   children: e,
   ...r
 }) => {
-  const t = Le(r);
+  const t = Ae(r);
   return /* @__PURE__ */ n(M.Provider, { value: t, children: e });
-}, Ve = _(function({ style: r, ...t }, s) {
+}, Oe = _(function({ style: r, ...t }, s) {
   const a = B(), o = j([a.refs.setFloating, s]);
-  return a.open ? /* @__PURE__ */ n(ve, { id: "tooltip-portal", children: /* @__PURE__ */ m(
+  return a.open ? /* @__PURE__ */ n(we, { id: "tooltip-portal", children: /* @__PURE__ */ m(
     "div",
     {
       ref: o,
@@ -211,7 +211,7 @@ const ke = {
       children: [
         t.children,
         /* @__PURE__ */ n(
-          De,
+          ve,
           {
             ref: a.arrowRef,
             context: a.context,
@@ -223,7 +223,7 @@ const ke = {
       ]
     }
   ) }) : null;
-}), ze = _(function({ children: r, asChild: t = !1, ...s }, a) {
+}), Ve = _(function({ children: r, asChild: t = !1, ...s }, a) {
   const o = B(), i = r && typeof r == "object" && "ref" in r && r.ref !== void 0 ? r.ref : void 0, c = j([o.refs.setReference, a, i]);
   return t && ce(r) ? de(
     r,
@@ -248,10 +248,10 @@ const ke = {
   triggerClassName: s,
   contentClassName: a,
   ...o
-}) => e || !r ? /* @__PURE__ */ n("span", { className: s, children: t }) : /* @__PURE__ */ m(Oe, { ...o, children: [
-  /* @__PURE__ */ n(ze, { className: u(s, "truncate"), children: t }),
+}) => /* @__PURE__ */ m(Le, { ...o, children: [
+  /* @__PURE__ */ n(Ve, { className: u(s, "truncate"), children: t }),
   /* @__PURE__ */ n(
-    Ve,
+    Oe,
     {
       className: u(
         "text-primary",
@@ -262,10 +262,10 @@ const ke = {
       children: r
     }
   )
-] }), We = 18, T = {
-  size: We,
+] }), ze = 18, F = {
+  size: ze,
   stroke: 2
-}, ir = ({
+}, lr = ({
   label: e,
   id: r,
   checked: t,
@@ -288,7 +288,7 @@ const ke = {
     a ? "bg-layer-4 border-icon-secondary" : ""
   );
   return /* @__PURE__ */ m("label", { className: c, htmlFor: r, children: [
-    t && (s ? /* @__PURE__ */ n(re, { className: d, ...T }) : /* @__PURE__ */ n(z, { className: d, ...T })),
+    t && (s ? /* @__PURE__ */ n(re, { className: d, ...F }) : /* @__PURE__ */ n(z, { className: d, ...F })),
     e && /* @__PURE__ */ n(R, { tooltip: e, triggerClassName: "flex-1 min-w-0", children: /* @__PURE__ */ n("p", { className: "text-primary w-full truncate", children: e }) }),
     /* @__PURE__ */ n(
       "input",
@@ -306,7 +306,7 @@ const ke = {
   ] });
 };
 var h = /* @__PURE__ */ ((e) => (e.VALID = "valid", e.ERROR = "error", e))(h || {});
-const _e = (e, r) => {
+const We = (e, r) => {
   if (r === e.id)
     switch (e.status) {
       case h.VALID:
@@ -324,7 +324,7 @@ const _e = (e, r) => {
     default:
       return "border-primary text-secondary";
   }
-}, je = (e, r) => {
+}, _e = (e, r) => {
   if (r === e.id)
     switch (e.status) {
       case h.VALID:
@@ -342,7 +342,7 @@ const _e = (e, r) => {
     default:
       return "bg-layer-4";
   }
-}, Me = ({
+}, je = ({
   step: e,
   index: r,
   currentStep: t,
@@ -352,13 +352,13 @@ const _e = (e, r) => {
   return /* @__PURE__ */ m(
     "button",
     {
-      className: u(a, _e(e, t)),
+      className: u(a, We(e, t)),
       onClick: () => s(e.id),
       children: [
         /* @__PURE__ */ n(
           "span",
           {
-            className: u(o, je(e, t)),
+            className: u(o, _e(e, t)),
             children: l()
           }
         ),
@@ -366,7 +366,7 @@ const _e = (e, r) => {
       ]
     }
   );
-}, cr = ({
+}, ir = ({
   steps: e,
   currentStep: r,
   onChangeStep: t
@@ -376,7 +376,7 @@ const _e = (e, r) => {
     (a !== r && e[o].status === h.VALID || l < o) && t(a);
   };
   return /* @__PURE__ */ n("div", { id: "steps", className: "flex gap-x-3", children: e.map((a, o) => /* @__PURE__ */ n(
-    Me,
+    je,
     {
       currentStep: r,
       onChangeStep: s,
@@ -385,7 +385,7 @@ const _e = (e, r) => {
     },
     a.id
   )) });
-}, Be = ({
+}, Me = ({
   name: e,
   value: r,
   title: t,
@@ -434,10 +434,10 @@ const _e = (e, r) => {
   ] });
 };
 var L = /* @__PURE__ */ ((e) => (e.Row = "Row", e.Column = "Column", e))(L || {});
-const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
+const Be = "flex flex-col gap-2", He = "flex", Ue = "pb-1 mt-2", $e = {
   [L.Column]: "flex-col gap-y-3",
   [L.Row]: "flex-row gap-x-6"
-}, dr = ({
+}, cr = ({
   fieldTitle: e,
   radioCssClass: r,
   labelCssClass: t,
@@ -447,7 +447,7 @@ const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
   activeRadioButton: l,
   orientation: i,
   onChange: c
-}) => /* @__PURE__ */ m("div", { className: He, children: [
+}) => /* @__PURE__ */ m("div", { className: Be, children: [
   e && /* @__PURE__ */ n(P, { fieldTitle: e, htmlFor: a }),
   /* @__PURE__ */ n(
     "div",
@@ -456,12 +456,12 @@ const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
       "aria-label": e,
       "aria-disabled": s || void 0,
       className: u(
-        $e,
-        Ke[i]
+        He,
+        $e[i]
       ),
-      children: o.map((d) => /* @__PURE__ */ m(ue, { children: [
+      children: o.map((d) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ n(
-          Be,
+          Me,
           {
             name: a,
             value: d.id,
@@ -478,7 +478,7 @@ const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
       ] }, d.id))
     }
   )
-] }), Ge = ({
+] }), Ke = ({
   value: e,
   textareaId: r,
   placeholder: t,
@@ -503,7 +503,7 @@ const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
     ),
     onChange: (c) => !l && i?.(c.currentTarget.value)
   }
-) }), Ze = [
+) }), Ge = [
   "ArrowLeft",
   "ArrowRight",
   "ArrowUp",
@@ -515,8 +515,8 @@ const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
   "Escape",
   "Home",
   "End"
-], Xe = (e, r, t, s) => {
-  if ((r === "number" || t !== void 0 || s !== void 0) && !Ze.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (t === void 0 || t < 0)) && !(e.key === "." && r === "number" && !e.currentTarget.value.includes("."))) {
+], Ze = (e, r, t, s) => {
+  if ((r === "number" || t !== void 0 || s !== void 0) && !Ge.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;
@@ -557,11 +557,11 @@ const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
   textBeforeInput: v,
   textAfterInput: D
 }) => {
-  const $ = (C) => C.target.blur(), U = d === "number" || b !== void 0 || x !== void 0, K = (C) => {
-    Xe(C, d, b, x);
+  const U = (C) => C.target.blur(), $ = d === "number" || b !== void 0 || x !== void 0, K = (C) => {
+    Ze(C, d, b, x);
   }, G = (C) => {
     const I = C.currentTarget.value;
-    if (U && I !== "") {
+    if ($ && I !== "") {
       const E = parseFloat(I);
       if (isNaN(E) && I !== "-" && I !== "." || !isNaN(E) && (b !== void 0 && E < b || x !== void 0 && E > x))
         return;
@@ -597,7 +597,7 @@ const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
           " ",
           A
         ] }),
-        /* @__PURE__ */ n(N, { icon: e, className: "pl-2" }),
+        /* @__PURE__ */ n(N, { icon: e }),
         /* @__PURE__ */ n(R, { tooltip: s, triggerClassName: c, children: /* @__PURE__ */ n(
           "input",
           {
@@ -611,12 +611,12 @@ const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
             className: u("border-0 bg-transparent px-2", l),
             onChange: (C) => !f && G?.(C),
             onKeyDown: K,
-            onWheel: $,
+            onWheel: U,
             min: b,
             max: x
           }
         ) }),
-        /* @__PURE__ */ n(N, { icon: r, className: "pr-2" }),
+        /* @__PURE__ */ n(N, { icon: r }),
         k && /* @__PURE__ */ m("p", { className: "text-secondary dial-small pr-2", children: [
           " ",
           k
@@ -635,7 +635,7 @@ const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
       ]
     }
   );
-}, Ye = /^0+\.(\d+)?$/, qe = /^0+/, H = ({
+}, Xe = /^0+\.(\d+)?$/, Ye = /^0+/, H = ({
   fieldTitle: e,
   errorText: r,
   optional: t,
@@ -672,14 +672,14 @@ const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
     ),
     /* @__PURE__ */ n(V, { errorText: r })
   ] })
-] }), ur = ({
+] }), dr = ({
   onChange: e,
   value: r,
   min: t,
   max: s,
   ...a
 }) => {
-  const o = (l) => String(l)?.match(Ye) ? String(l)?.replace(qe, "0") : Number(l);
+  const o = (l) => String(l)?.match(Xe) ? String(l)?.replace(Ye, "0") : Number(l);
   return /* @__PURE__ */ n(
     H,
     {
@@ -691,7 +691,7 @@ const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
       ...a
     }
   );
-}, mr = ({
+}, ur = ({
   onChange: e,
   ...r
 }) => /* @__PURE__ */ n(
@@ -701,7 +701,7 @@ const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
     onChange: (t) => e?.(t),
     ...r
   }
-), pr = ({
+), mr = ({
   fieldTitle: e,
   optional: r,
   elementId: t,
@@ -718,7 +718,7 @@ const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
     }
   ),
   /* @__PURE__ */ n(
-    Ge,
+    Ke,
     {
       textareaId: t,
       cssClass: s,
@@ -726,7 +726,7 @@ const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
     }
   ),
   /* @__PURE__ */ n(V, { errorText: a })
-] }), fr = ({
+] }), pr = ({
   title: e,
   switchId: r,
   isOn: t = !1,
@@ -767,14 +767,14 @@ const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
     ) }),
     e && /* @__PURE__ */ n("span", { className: "pl-2 dial-small text-primary", children: e })
   ] });
-}, Je = ({ onClick: e }) => /* @__PURE__ */ n(
+}, qe = ({ onClick: e }) => /* @__PURE__ */ n(
   te,
   {
-    ...T,
+    ...F,
     className: "text-primary",
     onClick: e
   }
-), Qe = ({ onClick: e }) => /* @__PURE__ */ n(se, { ...T, className: "text-primary", onClick: e }), er = ({ ...e }) => {
+), Je = ({ onClick: e }) => /* @__PURE__ */ n(se, { ...F, className: "text-primary", onClick: e }), Qe = ({ ...e }) => {
   const [r, t] = W(!1), s = O((a) => {
     t(a);
   }, []);
@@ -783,10 +783,10 @@ const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
     {
       type: r ? "text" : "password",
       ...e,
-      iconAfterInput: r ? /* @__PURE__ */ n(Je, { onClick: () => s(!1) }) : /* @__PURE__ */ n(Qe, { onClick: () => s(!0) })
+      iconAfterInput: r ? /* @__PURE__ */ n(qe, { onClick: () => s(!1) }) : /* @__PURE__ */ n(Je, { onClick: () => s(!0) })
     }
   );
-}, hr = ({
+}, fr = ({
   fieldTitle: e,
   optional: r,
   elementCssClass: t,
@@ -803,7 +803,7 @@ const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
     }
   ),
   /* @__PURE__ */ n(
-    er,
+    Qe,
     {
       cssClass: t,
       elementId: s,
@@ -815,25 +815,25 @@ const He = "flex flex-col gap-2", $e = "flex", Ue = "pb-1", Ke = {
 ] });
 export {
   y as AlertVariant,
-  F as ButtonVariant,
-  or as DialAlert,
-  Re as DialButton,
-  ir as DialCheckbox,
+  T as ButtonVariant,
+  ar as DialAlert,
+  Ie as DialButton,
+  lr as DialCheckbox,
   V as DialErrorText,
   P as DialFieldLabel,
   N as DialIcon,
   S as DialInput,
-  lr as DialLoader,
-  ur as DialNumberInputField,
-  er as DialPasswordInput,
-  hr as DialPasswordInputField,
-  Be as DialRadioButton,
-  dr as DialRadioGroup,
-  cr as DialSteps,
-  fr as DialSwitch,
-  pr as DialTextAreaField,
-  mr as DialTextInputField,
-  Ge as DialTextarea,
+  or as DialLoader,
+  dr as DialNumberInputField,
+  Qe as DialPasswordInput,
+  fr as DialPasswordInputField,
+  Me as DialRadioButton,
+  cr as DialRadioGroup,
+  ir as DialSteps,
+  pr as DialSwitch,
+  mr as DialTextAreaField,
+  ur as DialTextInputField,
+  Ke as DialTextarea,
   R as DialTooltip,
   h as StepStatus
 };

package/dist/src/components/RadioGroup/constants.d.ts

@@ -1,5 +1,5 @@
 import { RadioGroupOrientation } from '../../types/radio-group';
 export declare const groupBaseClasses = "flex flex-col gap-2";
 export declare const optionsWrapperBaseClasses = "flex";
-export declare const selectedContentClasses = "pb-1";
+export declare const selectedContentClasses = "pb-1 mt-2";
 export declare const orientationClassMap: Record<RadioGroupOrientation, string>;

package/package.json

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