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

package/README.md

@@ -5,7 +5,8 @@
      src="https://avatars.githubusercontent.com/u/1589802?s=200&v=4" 
       />](#)
 
-A comprehensive React-based UI components library specifically designed for building AI-driven applications with modern standards and enterprise-grade quality.
+
+The AI DIAL UI Kit is an production-ready React component library designed to streamline your development process. It features a collection of base components, such as Buttons, Inputs, Dropdowns, and more — allowing you to effortlessly reuse elements, quick and easy.
 
 [![npm version](https://badge.fury.io/js/@epam%2Fai-dial-ui-kit.svg)](https://badge.fury.io/js/@epam%2Fai-dial-ui-kit)
 [![License: Apache 2.0](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
@@ -14,7 +15,7 @@ A comprehensive React-based UI components library specifically designed for buil
 
 ## Table of Contents
 
-- [✨ Features](#-features)
+- [✨ Highlights](#-highlights)
 - [📖 Documentation](#-documentation)
 - [🚀 Quick Start](#-quick-start)
   - [Prerequisites](#prerequisites)
@@ -30,22 +31,21 @@ A comprehensive React-based UI components library specifically designed for buil
   - [Production Build](#production-build)
 - [🚀 Usage in Projects](#-usage-in-projects)
   - [Next.js Integration](#nextjs-integration)
-  - [Vite Integration](#vite-integration)
   - [Tree Shaking](#tree-shaking)
 - [🤝 Contributing](#-contributing)
 - [🔒 Security](#-security)
 - [📄 License](#-license)
 - [🌟 Related Projects](#-related-projects)
 
-## ✨ Features
+## ✨ Highlights
 
-- 🎨 **Unified User Experience**: Consistent design language for all AI DIAL applications
+- 🎨 **Unified User Experience**: Ui Kit usage helps with design consistency across AI DIAL applications
 - ⚡ **Modern Stack**: Built with latest React, TypeScript, Vite, and Tailwind CSS
 - 🎨 **Highly Customizable**: Deep theming capabilities with CSS custom properties
 - 🧪 **Well-Tested**: Comprehensive test coverage (70%+) with Vitest and React Testing Library
-- 📚 **Storybook Ready**: Interactive component documentation and development playground
-- 🛠️ **Developer Experience**: ESLint, Prettier, Husky for maintainable code quality
-- 📦 **Distribution Ready**: NPM package ready for easy integration
+- 📚 **Storybook Ready**: Includes interactive component documentation and development playground
+- 🛠️ **Developer Experience**: Leverage ESLint, Prettier, Husky for maintainable code quality
+- 📦 **Distribution Ready**: Deployed as NPM package ready for easy integration
 
 ## 📖 Documentation
 
@@ -92,9 +92,9 @@ function App() {
 
 ### Development Setup
 
-1. **Fork and Clone**
+1. **Clone the repo**
    ```bash
-   git clone https://github.com/your-username/ai-dial-ui-kit.git
+   git clone https://github.com/epam/ai-dial-ui-kit.git
    cd ai-dial-ui-kit
    ```
 
@@ -163,7 +163,7 @@ Full list of variables is available [here](tailwind.config.js)
 
 ## 📖 Storybook
 
-Storybook is a frontend workshop for building UI components and pages in isolation.
+Storybook is a handy library for documenting and developing of UI components.
 
 ### Stories
 To run fully interactive storybook:
@@ -248,6 +248,7 @@ export default function Home() {
     </div>
   );
 }
+```
 </details>
 
 
@@ -272,7 +273,6 @@ We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md)
 - Testing requirements
 - Pull request process
 
-
 ## 🔒 Security
 
 If you discover a security vulnerability, please refer to our [Security Policy](./SECURITY.md).

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),p=require("classnames"),u=require("@floating-ui/react"),f=require("react"),D=({icon:e,className:s})=>e?t.jsx("span",{className:p("flex-shrink-0",s),children:e}):null,H=({title:e,cssClass:s,ref:n,onClick:r,disable:l,iconAfter:a,iconBefore:o,hideTitleOnMobile:c,ariaLabel:i})=>{const x=p("dial-small-semi",a?"mr-2":"",o?"ml-2":"",c?"hidden sm:inline":"inline"),d=p(s,"focus-visible:outline outline-offset-0");return t.jsxs("button",{ref:n,type:"button",className:d,onClick:m=>r?.(m),disabled:l,"aria-label":e||i,children:[t.jsx(D,{icon:o}),e&&t.jsx("span",{className:x,children:e}),t.jsx(D,{icon:a})]})},R=({errorText:e})=>e&&t.jsx("span",{className:"text-error dial-tiny mt-1",children:e}),k=({fieldTitle:e,htmlFor:s,optional:n,optionalText:r,cssClass:l})=>e?t.jsxs("label",{className:p("dial-tiny text-secondary",l,!l?.includes("mb")&&"mb-2"),htmlFor:s,children:[t.jsx("span",{className:"min-h-4",children:e}),n&&t.jsx("span",{className:"ml-1",children:r??"(Optional)"})]}):null,U=7,_=2,E=f.createContext(null),I=()=>{const e=f.useContext(E);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},K=({initialOpen:e=!1,placement:s="bottom",isTriggerClickable:n=!1,open:r,onOpenChange:l}={})=>{const[a,o]=f.useState(e),c=f.useRef(null),i=r??a,x=l??o,d=u.useFloating({placement:s,open:i,onOpenChange:x,whileElementsMounted:u.autoUpdate,middleware:[u.offset(U+_),u.flip({crossAxis:s.includes("-"),fallbackAxisSideDirection:"start",padding:5}),u.shift({padding:5}),u.arrow({element:c})]}),m=u.useHover(d.context,{move:!1,enabled:r==null,mouseOnly:n,delay:{open:500,close:0}}),T=u.useFocus(d.context,{enabled:r==null}),F=u.useDismiss(d.context),h=u.useRole(d.context,{role:"tooltip"}),g=u.useInteractions([m,T,F,h]);return f.useMemo(()=>({open:i,setOpen:x,arrowRef:c,...g,...d}),[i,x,g,d])},O=({children:e,...s})=>{const n=K(s);return t.jsx(E.Provider,{value:n,children:e})},$=f.forwardRef(function({style:s,...n},r){const l=I(),a=u.useMergeRefs([l.refs.setFloating,r]);return l.open?t.jsx(u.FloatingPortal,{id:"tooltip-portal",children:t.jsxs("div",{ref:a,style:{...l.floatingStyles,...s},...l.getFloatingProps(n),className:p("z-[55] whitespace-pre-wrap rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",l.getFloatingProps(n).className),children:[n.children,t.jsx(u.FloatingArrow,{ref:l.arrowRef,context:l.context,fill:"currentColor",strokeWidth:1,className:"stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"})]})}):null}),z=f.forwardRef(function({children:s,asChild:n=!1,...r},l){const a=I(),c=s&&typeof s=="object"&&"ref"in s&&s.ref!==void 0?s.ref:void 0,i=u.useMergeRefs([a.refs.setReference,l,c]);return n&&f.isValidElement(s)?f.cloneElement(s,a.getReferenceProps({ref:i,...r,...s.props})):t.jsx("span",{ref:i,...a.getReferenceProps(r),className:r.className??"dial-tooltip-trigger text-left",children:s})}),w=({hideTooltip:e,tooltip:s,children:n,triggerClassName:r,contentClassName:l,...a})=>e||!s?t.jsx("span",{className:r,children:n}):t.jsxs(O,{...a,children:[t.jsx(z,{className:p(r,"truncate"),children:n}),t.jsx($,{className:p("text-primary",l,"max-w-[300px]",(e||!s)&&"hidden"),children:s})]}),A=({value:e,textareaId:s,placeholder:n,cssClass:r="",disabled:l,invalid:a,readonly:o,onChange:c})=>t.jsx(w,{tooltip:e,triggerClassName:"flex",children:t.jsx("textarea",{id:s,placeholder:n,value:e||"",disabled:l,className:p("dial-textarea dial-input",a?"dial-input-error":"",l&&"dial-input-disable",o&&"dial-input-readonly",r),onChange:i=>!o&&c?.(i.currentTarget.value)})}),G=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Backspace","Delete","Tab","Enter","Escape","Home","End"],B=(e,s,n,r)=>{if((s==="number"||n!==void 0||r!==void 0)&&!G.includes(e.key)&&!(e.key==="-"&&e.currentTarget.selectionStart===0&&(n===void 0||n<0))&&!(e.key==="."&&s==="number"&&!e.currentTarget.value.includes("."))){if(!/^[0-9]$/.test(e.key)){e.preventDefault();return}if(n!==void 0||r!==void 0){const a=e.currentTarget.value,o=e.currentTarget.selectionStart||0,c=a.slice(0,o)+e.key+a.slice(o),i=parseFloat(c);if(!isNaN(i)){if(n!==void 0&&i<n){e.preventDefault();return}if(r!==void 0&&i>r){e.preventDefault();return}}}}},y=({iconBeforeInput:e,iconAfterInput:s,hideBorder:n,value:r,elementId:l,placeholder:a="",cssClass:o="",containerCssClass:c,tooltipTriggerClassName:i,type:x="text",disabled:d,readonly:m,invalid:T,onChange:F,min:h,max:g,prefix:P,suffix:S,textBeforeInput:j,textAfterInput:N})=>{const M=b=>b.target.blur(),V=x==="number"||h!==void 0||g!==void 0,W=b=>{B(b,x,h,g)},q=b=>{const v=b.currentTarget.value;if(V&&v!==""){const C=parseFloat(v);if(isNaN(C)&&v!=="-"&&v!=="."||!isNaN(C)&&(h!==void 0&&C<h||g!==void 0&&C>g))return}F?.(v)};return t.jsxs("div",{className:p("dial-input-field flex flex-row items-center justify-between",n?"dial-input-no-border":"dial-input",T&&"dial-input-error",d&&"dial-input-disable",m&&"dial-input-readonly",!j&&"pl-1",!N&&"pr-1",c),children:[j&&t.jsx(w,{tooltip:j,children:t.jsx(y,{hideBorder:!0,containerCssClass:"rounded-r-none border-r-0",cssClass:"px-2 overflow-hidden overflow-ellipsis dial-small",value:j,disabled:!0,elementId:j+"textBefore"})}),P&&t.jsxs("p",{className:"text-secondary dial-small pl-2",children:[" ",P]}),t.jsx(D,{icon:e,className:"pl-2"}),t.jsx(w,{tooltip:r,triggerClassName:i,children:t.jsx("input",{type:x,autoComplete:"off",id:l,placeholder:a,value:r??"",title:r?String(r):"",disabled:d,className:p("border-0 bg-transparent px-2",o),onChange:b=>!m&&q?.(b),onKeyDown:W,onWheel:M,min:h,max:g})}),t.jsx(D,{icon:s,className:"pr-2"}),S&&t.jsxs("p",{className:"text-secondary dial-small pr-2",children:[" ",S]}),N&&t.jsx(w,{tooltip:N,children:t.jsx(y,{hideBorder:!0,containerCssClass:"rounded-l-none border-l-0",cssClass:"px-2",value:N,disabled:!0,elementId:N+"textAfter"})})]})},Y=/^0+\.(\d+)?$/,Z=/^0+/,L=({fieldTitle:e,errorText:s,optional:n,elementCssClass:r,elementContainerCssClass:l,elementId:a,containerCssClass:o,readonly:c,defaultEmptyText:i,min:x,max:d,...m})=>t.jsxs("div",{className:p("flex flex-col",o),children:[t.jsx(k,{fieldTitle:e,optional:n,htmlFor:a}),c?t.jsx("span",{children:m.value||(i??"None")}):t.jsxs(t.Fragment,{children:[t.jsx(y,{elementId:a,cssClass:r,containerCssClass:l,invalid:s!=null,min:x,max:d,...m}),t.jsx(R,{errorText:s})]})]}),J=({onChange:e,value:s,min:n,max:r,...l})=>{const a=o=>String(o)?.match(Y)?String(o)?.replace(Z,"0"):Number(o);return t.jsx(L,{type:"number",onChange:o=>e?.(a(o)),value:s,min:n,max:r,...l})},Q=({onChange:e,...s})=>t.jsx(L,{type:"text",onChange:n=>e?.(n),...s}),X=({fieldTitle:e,optional:s,elementId:n,elementCssClass:r,errorText:l,...a})=>t.jsxs("div",{className:"flex flex-col",children:[t.jsx(k,{fieldTitle:e,optional:s,htmlFor:n}),t.jsx(A,{textareaId:n,cssClass:r,...a}),t.jsx(R,{errorText:l})]}),ee=({title:e,switchId:s,isOn:n=!1,disabled:r,onChange:l})=>{const a=p("flex w-[36px] h-[18px]  cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",n?"flex-row-reverse":"flex-row",r?"pointer-events-none":"",r?n?"bg-controls-disable":"bg-layer-4":n?"bg-accent-primary":"bg-layer-4"),o=f.useCallback(c=>{c.stopPropagation(),l?.(!n)},[l,n]);return t.jsxs("div",{className:"flex flex-row items-center",children:[t.jsx("input",{type:"checkbox",onChange:o,id:s,disabled:r,className:"invisible w-0 h-0",checked:n}),t.jsx("label",{htmlFor:s,className:a,children:t.jsx("span",{className:p("size-3 rounded-full",r?n?"bg-controls-disable":"bg-layer-4":"bg-controls-enable-primary")})}),e&&t.jsx("span",{className:"h-[14px] pl-2 small text-primary",children:e})]})};exports.DialButton=H;exports.DialErrorText=R;exports.DialFieldLabel=k;exports.DialIcon=D;exports.DialInput=y;exports.DialNumberInputField=J;exports.DialSwitch=ee;exports.DialTextAreaField=X;exports.DialTextInputField=Q;exports.DialTextarea=A;exports.DialTooltip=w;
+"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;