@epam/ai-dial-ui-kit 0.2.0-rc.7 → 0.2.0-rc.9

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

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

@@ -1,25 +1,25 @@
-import { jsx as n, jsxs as p, Fragment as K } from "react/jsx-runtime";
+import { jsx as t, jsxs as m, Fragment as K } from "react/jsx-runtime";
 import d from "classnames";
-import { IconCircleCheck as B, IconAlertTriangle as G, IconAlertCircle as O, IconInfoCircle as $, IconX as V, IconLoader as X } from "@tabler/icons-react";
-import { useFloating as Y, offset as Z, flip as q, shift as J, arrow as Q, autoUpdate as ee, useHover as re, useFocus as te, useDismiss as ne, useRole as se, useInteractions as oe, useMergeRefs as S, FloatingPortal as ae, FloatingArrow as le } from "@floating-ui/react";
-import { createContext as ie, useState as ce, useRef as de, useMemo as ue, useContext as pe, forwardRef as E, isValidElement as me, cloneElement as fe, useCallback as ge } from "react";
-const N = ({ icon: e, className: r }) => e ? /* @__PURE__ */ n("span", { className: d("flex-shrink-0", r), children: e }) : null;
+import { IconCircleCheck as $, IconAlertTriangle as G, IconAlertCircle as Z, IconInfoCircle as V, IconX as X, IconLoader as Y, IconMinus as q, IconCheck as J } from "@tabler/icons-react";
+import { createContext as Q, useState as ee, useRef as re, useMemo as ne, useContext as te, forwardRef as R, isValidElement as oe, cloneElement as se, useCallback as A } from "react";
+import { useFloating as ae, offset as le, flip as ie, shift as ce, arrow as de, autoUpdate as ue, useHover as pe, useFocus as me, useDismiss as fe, useRole as be, useInteractions as ge, useMergeRefs as L, FloatingPortal as he, FloatingArrow as xe } from "@floating-ui/react";
+const N = ({ icon: e, className: r }) => e ? /* @__PURE__ */ t("span", { className: d("flex-shrink-0", r), children: e }) : null;
 var T = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e))(T || {});
-const he = {
+const Ne = {
   [T.Primary]: "dial-primary-button",
   [T.Secondary]: "dial-secondary-button",
   [T.Tertiary]: "dial-tertiary-button"
-}, be = ({
+}, ye = ({
   title: e,
   variant: r,
-  cssClass: t,
-  ref: s,
-  onClick: o,
+  cssClass: n,
+  ref: o,
+  onClick: s,
   disable: a,
   iconAfter: l,
   iconBefore: c,
   hideTitleOnMobile: i,
-  ariaLabel: m
+  ariaLabel: p
 }) => {
   const u = d(
     "dial-small-semi",
@@ -27,194 +27,194 @@ const he = {
     c ? "ml-2" : "",
     i ? "hidden sm:inline" : "inline"
   ), f = d(
-    r && he[r],
-    t,
+    r && Ne[r],
+    n,
     "focus-visible:outline outline-offset-0"
   );
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ m(
     "button",
     {
-      ref: s,
+      ref: o,
       type: "button",
       className: f,
-      onClick: (y) => o?.(y),
+      onClick: (y) => s?.(y),
       disabled: a,
-      "aria-label": e || m,
+      "aria-label": e || p,
       children: [
-        /* @__PURE__ */ n(N, { icon: c }),
-        e && /* @__PURE__ */ n("span", { className: u, children: e }),
-        /* @__PURE__ */ n(N, { icon: l })
+        /* @__PURE__ */ t(N, { icon: c }),
+        e && /* @__PURE__ */ t("span", { className: u, children: e }),
+        /* @__PURE__ */ t(N, { icon: l })
       ]
     }
   );
-}, L = ({ errorText: e }) => e && /* @__PURE__ */ n("span", { className: "text-error dial-tiny mt-1", children: e }), A = ({
+}, _ = ({ errorText: e }) => e && /* @__PURE__ */ t("span", { className: "text-error dial-tiny mt-1", children: e }), z = ({
   fieldTitle: e,
   htmlFor: r,
-  optional: t,
-  optionalText: s,
-  cssClass: o
-}) => e ? /* @__PURE__ */ p(
+  optional: n,
+  optionalText: o,
+  cssClass: s
+}) => e ? /* @__PURE__ */ m(
   "label",
   {
     className: d(
       "dial-tiny text-secondary",
-      o,
-      !o?.includes("mb") && "mb-2"
+      s,
+      !s?.includes("mb") && "mb-2"
     ),
     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: o ?? "(Optional)" })
     ]
   }
 ) : null;
 var x = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(x || {});
-const xe = {
-  info: /* @__PURE__ */ n($, { size: 24, stroke: 2 }),
-  error: /* @__PURE__ */ n(O, { size: 24, stroke: 2 }),
-  warning: /* @__PURE__ */ n(G, { size: 24, stroke: 2 }),
-  success: /* @__PURE__ */ n(B, { size: 24, stroke: 2 })
-}, Ne = {
+const Ce = {
+  info: /* @__PURE__ */ t(V, { size: 24, stroke: 2 }),
+  error: /* @__PURE__ */ t(Z, { size: 24, stroke: 2 }),
+  warning: /* @__PURE__ */ t(G, { size: 24, stroke: 2 }),
+  success: /* @__PURE__ */ t($, { size: 24, stroke: 2 })
+}, ve = {
   [x.Info]: "bg-info border-info text-info",
   [x.Success]: "bg-success border-success text-success",
   [x.Warning]: "bg-warning border-warning text-warning",
   [x.Error]: "bg-error border-error text-error"
-}, ye = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", He = ({
+}, we = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", Ue = ({
   variant: e = x.Info,
   message: r,
-  cssClass: t,
-  closable: s = !1,
-  onClose: o
-}) => /* @__PURE__ */ p(
+  cssClass: n,
+  closable: o = !1,
+  onClose: s
+}) => /* @__PURE__ */ m(
   "div",
   {
     role: "alert",
     className: d(
-      ye,
-      Ne[e],
-      t
+      we,
+      ve[e],
+      n
     ),
     children: [
-      /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ n(N, { icon: xe[e] }),
-        /* @__PURE__ */ n("div", { className: "text-primary", children: r })
+      /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ t(N, { icon: Ce[e] }),
+        /* @__PURE__ */ t("div", { className: "text-primary", children: r })
       ] }),
-      s && /* @__PURE__ */ n(
-        be,
+      o && /* @__PURE__ */ t(
+        ye,
         {
           cssClass: "ml-2 text-secondary hover:text-primary",
           ariaLabel: "Close alert",
-          iconBefore: /* @__PURE__ */ n(V, { size: 16 }),
-          onClick: (a) => o?.(a)
+          iconBefore: /* @__PURE__ */ t(X, { size: 16 }),
+          onClick: (a) => s?.(a)
         }
       )
     ]
   }
-), ve = "flex items-center justify-center text-secondary", Ce = "shrink-0 grow-0 basis-auto animate-spin-steps", Ue = ({
+), ke = "flex items-center justify-center text-secondary", De = "shrink-0 grow-0 basis-auto animate-spin-steps", Ke = ({
   size: e = 18,
   cssClass: r,
-  iconClass: t,
-  fullWidth: s = !0,
-  ariaLabel: o = "Loading"
-}) => /* @__PURE__ */ n(
+  iconClass: n,
+  fullWidth: o = !0,
+  ariaLabel: s = "Loading"
+}) => /* @__PURE__ */ t(
   "div",
   {
     role: "status",
-    "aria-label": o,
+    "aria-label": s,
     className: d({
-      [ve]: !0,
-      "w-full h-full": s,
+      [ke]: !0,
+      "w-full h-full": o,
       [r || ""]: !!r
     }),
-    children: /* @__PURE__ */ n(
+    children: /* @__PURE__ */ t(
       N,
       {
-        icon: /* @__PURE__ */ n(
-          X,
+        icon: /* @__PURE__ */ t(
+          Y,
           {
             width: e,
             height: e,
-            className: d(Ce, t)
+            className: d(De, n)
           }
         )
       }
     )
   }
-), we = 7, De = 2, W = ie(null), j = () => {
-  const e = pe(W);
+), Te = 7, Ie = 2, W = Q(null), j = () => {
+  const e = te(W);
   if (e == null)
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
   return e;
-}, Te = ({
+}, Fe = ({
   initialOpen: e = !1,
   placement: r = "bottom",
-  isTriggerClickable: t = !1,
-  open: s,
-  onOpenChange: o
+  isTriggerClickable: n = !1,
+  open: o,
+  onOpenChange: s
 } = {}) => {
-  const [a, l] = ce(e), c = de(null), i = s ?? a, m = o ?? l, u = Y({
+  const [a, l] = ee(e), c = re(null), i = o ?? a, p = s ?? l, u = ae({
     placement: r,
     open: i,
-    onOpenChange: m,
-    whileElementsMounted: ee,
+    onOpenChange: p,
+    whileElementsMounted: ue,
     middleware: [
-      Z(we + De),
-      q({
+      le(Te + Ie),
+      ie({
         crossAxis: r.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: 5
       }),
-      J({ padding: 5 }),
-      Q({
+      ce({ padding: 5 }),
+      de({
         element: c
       })
     ]
-  }), f = re(u.context, {
+  }), f = pe(u.context, {
     move: !1,
-    enabled: s == null,
-    mouseOnly: t,
+    enabled: o == null,
+    mouseOnly: n,
     delay: { open: 500, close: 0 }
-  }), y = te(u.context, {
-    enabled: s == null
-  }), F = ne(u.context), h = se(u.context, { role: "tooltip" }), g = oe([f, y, F, h]);
-  return ue(
+  }), y = me(u.context, {
+    enabled: o == null
+  }), I = fe(u.context), g = be(u.context, { role: "tooltip" }), b = ge([f, y, I, g]);
+  return ne(
     () => ({
       open: i,
-      setOpen: m,
+      setOpen: p,
       arrowRef: c,
-      ...g,
+      ...b,
       ...u
     }),
-    [i, m, g, u]
+    [i, p, b, u]
   );
-}, ke = ({
+}, Se = ({
   children: e,
   ...r
 }) => {
-  const t = Te(r);
-  return /* @__PURE__ */ n(W.Provider, { value: t, children: e });
-}, Fe = E(function({ style: r, ...t }, s) {
-  const o = j(), a = S([o.refs.setFloating, s]);
-  return o.open ? /* @__PURE__ */ n(ae, { id: "tooltip-portal", children: /* @__PURE__ */ p(
+  const n = Fe(r);
+  return /* @__PURE__ */ t(W.Provider, { value: n, children: e });
+}, Pe = R(function({ style: r, ...n }, o) {
+  const s = j(), a = L([s.refs.setFloating, o]);
+  return s.open ? /* @__PURE__ */ t(he, { id: "tooltip-portal", children: /* @__PURE__ */ m(
     "div",
     {
       ref: a,
       style: {
-        ...o.floatingStyles,
+        ...s.floatingStyles,
         ...r
       },
-      ...o.getFloatingProps(t),
+      ...s.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
+        s.getFloatingProps(n).className
       ),
       children: [
-        t.children,
-        /* @__PURE__ */ n(
-          le,
+        n.children,
+        /* @__PURE__ */ t(
+          xe,
           {
-            ref: o.arrowRef,
-            context: o.context,
+            ref: s.arrowRef,
+            context: s.context,
             fill: "currentColor",
             strokeWidth: 1,
             className: "stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"
@@ -223,71 +223,113 @@ const xe = {
       ]
     }
   ) }) : null;
-}), Ie = E(function({ children: r, asChild: t = !1, ...s }, o) {
-  const a = j(), c = r && typeof r == "object" && "ref" in r && r.ref !== void 0 ? r.ref : void 0, i = S([a.refs.setReference, o, c]);
-  return t && me(r) ? fe(
+}), Ee = R(function({ children: r, asChild: n = !1, ...o }, s) {
+  const a = j(), c = r && typeof r == "object" && "ref" in r && r.ref !== void 0 ? r.ref : void 0, i = L([a.refs.setReference, s, c]);
+  return n && oe(r) ? se(
     r,
     a.getReferenceProps({
       ref: i,
-      ...s,
+      ...o,
       ...r.props
     })
-  ) : /* @__PURE__ */ n(
+  ) : /* @__PURE__ */ t(
     "span",
     {
       ref: i,
-      ...a.getReferenceProps(s),
-      className: s.className ?? "dial-tooltip-trigger text-left",
+      ...a.getReferenceProps(o),
+      className: o.className ?? "dial-tooltip-trigger text-left",
       children: r
     }
   );
 }), k = ({
   hideTooltip: e,
   tooltip: r,
-  children: t,
-  triggerClassName: s,
-  contentClassName: o,
+  children: n,
+  triggerClassName: o,
+  contentClassName: s,
   ...a
-}) => e || !r ? /* @__PURE__ */ n("span", { className: s, children: t }) : /* @__PURE__ */ p(ke, { ...a, children: [
-  /* @__PURE__ */ n(Ie, { className: d(s, "truncate"), children: t }),
-  /* @__PURE__ */ n(
-    Fe,
+}) => e || !r ? /* @__PURE__ */ t("span", { className: o, children: n }) : /* @__PURE__ */ m(Se, { ...a, children: [
+  /* @__PURE__ */ t(Ee, { className: d(o, "truncate"), children: n }),
+  /* @__PURE__ */ t(
+    Pe,
     {
       className: d(
         "text-primary",
-        o,
+        s,
         "max-w-[300px]",
         (e || !r) && "hidden"
       ),
       children: r
     }
   )
-] }), Re = ({
+] }), Re = 18, E = {
+  size: Re,
+  stroke: 2
+}, $e = ({
+  label: e,
+  id: r,
+  checked: n,
+  indeterminate: o,
+  disabled: s,
+  ariaLabel: a,
+  onChange: l
+}) => {
+  const c = A(
+    (u) => {
+      u.stopPropagation(), l?.(u.target.checked, r);
+    },
+    [l, r]
+  ), i = d(
+    "flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",
+    `${n ? "" : 'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,
+    s ? "pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4" : ""
+  ), p = d(
+    "mr-2 border rounded",
+    s ? "bg-layer-4 border-icon-secondary" : ""
+  );
+  return /* @__PURE__ */ m("label", { className: i, htmlFor: r, children: [
+    n && (o ? /* @__PURE__ */ t(q, { className: p, ...E }) : /* @__PURE__ */ t(J, { className: p, ...E })),
+    e && /* @__PURE__ */ t(k, { 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: c,
+        id: r,
+        checked: n,
+        "aria-checked": o ? "mixed" : n,
+        "aria-disabled": s || void 0,
+        "aria-label": e ? void 0 : a,
+        className: "invisible w-0 h-0"
+      }
+    )
+  ] });
+}, Ae = ({
   value: e,
   textareaId: r,
-  placeholder: t,
-  cssClass: s = "",
-  disabled: o,
+  placeholder: n,
+  cssClass: o = "",
+  disabled: s,
   invalid: a,
   readonly: l,
   onChange: c
-}) => /* @__PURE__ */ n(k, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ n(
+}) => /* @__PURE__ */ t(k, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ t(
   "textarea",
   {
     id: r,
-    placeholder: t,
+    placeholder: n,
     value: e || "",
-    disabled: o,
+    disabled: s,
     className: d(
       "dial-textarea dial-input",
       a ? "dial-input-error" : "",
-      o && "dial-input-disable",
+      s && "dial-input-disable",
       l && "dial-input-readonly",
-      s
+      o
     ),
     onChange: (i) => !l && c?.(i.currentTarget.value)
   }
-) }), Pe = [
+) }), Le = [
   "ArrowLeft",
   "ArrowRight",
   "ArrowUp",
@@ -299,273 +341,274 @@ const xe = {
   "Escape",
   "Home",
   "End"
-], Se = (e, r, t, s) => {
-  if ((r === "number" || t !== void 0 || s !== void 0) && !Pe.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (t === void 0 || t < 0)) && !(e.key === "." && r === "number" && !e.currentTarget.value.includes("."))) {
+], _e = (e, r, n, o) => {
+  if ((r === "number" || n !== void 0 || o !== void 0) && !Le.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 || o !== void 0) {
       const a = e.currentTarget.value, l = e.currentTarget.selectionStart || 0, c = a.slice(0, l) + e.key + a.slice(l), i = parseFloat(c);
       if (!isNaN(i)) {
-        if (t !== void 0 && i < t) {
+        if (n !== void 0 && i < n) {
           e.preventDefault();
           return;
         }
-        if (s !== void 0 && i > s) {
+        if (o !== void 0 && i > o) {
           e.preventDefault();
           return;
         }
       }
     }
   }
-}, I = ({
+}, F = ({
   iconBeforeInput: e,
   iconAfterInput: r,
-  hideBorder: t,
-  value: s,
-  elementId: o,
+  hideBorder: n,
+  value: o,
+  elementId: s,
   placeholder: a = "",
   cssClass: l = "",
   containerCssClass: c,
   tooltipTriggerClassName: i,
-  type: m = "text",
+  type: p = "text",
   disabled: u,
   readonly: f,
   invalid: y,
-  onChange: F,
-  min: h,
-  max: g,
-  prefix: R,
+  onChange: I,
+  min: g,
+  max: b,
+  prefix: S,
   suffix: P,
-  textBeforeInput: v,
-  textAfterInput: C
+  textBeforeInput: C,
+  textAfterInput: v
 }) => {
-  const M = (b) => b.target.blur(), H = m === "number" || h !== void 0 || g !== void 0, U = (b) => {
-    Se(b, m, h, g);
-  }, _ = (b) => {
-    const w = b.currentTarget.value;
-    if (H && w !== "") {
+  const O = (h) => h.target.blur(), B = p === "number" || g !== void 0 || b !== void 0, H = (h) => {
+    _e(h, p, g, b);
+  }, U = (h) => {
+    const w = h.currentTarget.value;
+    if (B && w !== "") {
       const D = parseFloat(w);
-      if (isNaN(D) && w !== "-" && w !== "." || !isNaN(D) && (h !== void 0 && D < h || g !== void 0 && D > g))
+      if (isNaN(D) && w !== "-" && w !== "." || !isNaN(D) && (g !== void 0 && D < g || b !== void 0 && D > b))
         return;
     }
-    F?.(w);
+    I?.(w);
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ m(
     "div",
     {
       className: d(
         "dial-input-field flex flex-row items-center justify-between",
-        t ? "dial-input-no-border" : "dial-input",
+        n ? "dial-input-no-border" : "dial-input",
         y && "dial-input-error",
         u && "dial-input-disable",
         f && "dial-input-readonly",
-        !v && "pl-1",
-        !C && "pr-1",
+        !C && "pl-1",
+        !v && "pr-1",
         c
       ),
       children: [
-        v && /* @__PURE__ */ n(k, { tooltip: v, children: /* @__PURE__ */ n(
-          I,
+        C && /* @__PURE__ */ t(k, { tooltip: C, children: /* @__PURE__ */ t(
+          F,
           {
             hideBorder: !0,
             containerCssClass: "rounded-r-none border-r-0",
             cssClass: "px-2 overflow-hidden overflow-ellipsis dial-small",
-            value: v,
+            value: C,
             disabled: !0,
-            elementId: v + "textBefore"
+            elementId: C + "textBefore"
           }
         ) }),
-        R && /* @__PURE__ */ p("p", { className: "text-secondary dial-small pl-2", children: [
+        S && /* @__PURE__ */ m("p", { className: "text-secondary dial-small pl-2", children: [
           " ",
-          R
+          S
         ] }),
-        /* @__PURE__ */ n(N, { icon: e, className: "pl-2" }),
-        /* @__PURE__ */ n(k, { tooltip: s, triggerClassName: i, children: /* @__PURE__ */ n(
+        /* @__PURE__ */ t(N, { icon: e, className: "pl-2" }),
+        /* @__PURE__ */ t(k, { tooltip: o, triggerClassName: i, children: /* @__PURE__ */ t(
           "input",
           {
-            type: m,
+            type: p,
             autoComplete: "off",
-            id: o,
+            id: s,
             placeholder: a,
-            value: s ?? "",
-            title: s ? String(s) : "",
+            value: o ?? "",
+            title: o ? String(o) : "",
             disabled: u,
             className: d("border-0 bg-transparent px-2", l),
-            onChange: (b) => !f && _?.(b),
-            onKeyDown: U,
-            onWheel: M,
-            min: h,
-            max: g
+            onChange: (h) => !f && U?.(h),
+            onKeyDown: H,
+            onWheel: O,
+            min: g,
+            max: b
           }
         ) }),
-        /* @__PURE__ */ n(N, { icon: r, className: "pr-2" }),
-        P && /* @__PURE__ */ p("p", { className: "text-secondary dial-small pr-2", children: [
+        /* @__PURE__ */ t(N, { icon: r, className: "pr-2" }),
+        P && /* @__PURE__ */ m("p", { className: "text-secondary dial-small pr-2", children: [
           " ",
           P
         ] }),
-        C && /* @__PURE__ */ n(k, { tooltip: C, children: /* @__PURE__ */ n(
-          I,
+        v && /* @__PURE__ */ t(k, { tooltip: v, children: /* @__PURE__ */ t(
+          F,
           {
             hideBorder: !0,
             containerCssClass: "rounded-l-none border-l-0",
             cssClass: "px-2",
-            value: C,
+            value: v,
             disabled: !0,
-            elementId: C + "textAfter"
+            elementId: v + "textAfter"
           }
         ) })
       ]
     }
   );
-}, Ee = /^0+\.(\d+)?$/, Le = /^0+/, z = ({
+}, ze = /^0+\.(\d+)?$/, We = /^0+/, M = ({
   fieldTitle: e,
   errorText: r,
-  optional: t,
-  elementCssClass: s,
-  elementContainerCssClass: o,
+  optional: n,
+  elementCssClass: o,
+  elementContainerCssClass: s,
   elementId: a,
   containerCssClass: l,
   readonly: c,
   defaultEmptyText: i,
-  min: m,
+  min: p,
   max: u,
   ...f
-}) => /* @__PURE__ */ p("div", { className: d("flex flex-col", l), children: [
-  /* @__PURE__ */ n(
-    A,
+}) => /* @__PURE__ */ m("div", { className: d("flex flex-col", l), children: [
+  /* @__PURE__ */ t(
+    z,
     {
       fieldTitle: e,
-      optional: t,
+      optional: n,
       htmlFor: a
     }
   ),
-  c ? /* @__PURE__ */ n("span", { children: f.value || (i ?? "None") }) : /* @__PURE__ */ p(K, { children: [
-    /* @__PURE__ */ n(
-      I,
+  c ? /* @__PURE__ */ t("span", { children: f.value || (i ?? "None") }) : /* @__PURE__ */ m(K, { children: [
+    /* @__PURE__ */ t(
+      F,
       {
         elementId: a,
-        cssClass: s,
-        containerCssClass: o,
+        cssClass: o,
+        containerCssClass: s,
         invalid: r != null,
-        min: m,
+        min: p,
         max: u,
         ...f
       }
     ),
-    /* @__PURE__ */ n(L, { errorText: r })
+    /* @__PURE__ */ t(_, { errorText: r })
   ] })
-] }), _e = ({
+] }), Ge = ({
   onChange: e,
   value: r,
-  min: t,
-  max: s,
-  ...o
+  min: n,
+  max: o,
+  ...s
 }) => {
-  const a = (l) => String(l)?.match(Ee) ? String(l)?.replace(Le, "0") : Number(l);
-  return /* @__PURE__ */ n(
-    z,
+  const a = (l) => String(l)?.match(ze) ? String(l)?.replace(We, "0") : Number(l);
+  return /* @__PURE__ */ t(
+    M,
     {
       type: "number",
       onChange: (l) => e?.(a(l)),
       value: r,
-      min: t,
-      max: s,
-      ...o
+      min: n,
+      max: o,
+      ...s
     }
   );
-}, Ke = ({
+}, Ze = ({
   onChange: e,
   ...r
-}) => /* @__PURE__ */ n(
-  z,
+}) => /* @__PURE__ */ t(
+  M,
   {
     type: "text",
-    onChange: (t) => e?.(t),
+    onChange: (n) => e?.(n),
     ...r
   }
-), Be = ({
+), Ve = ({
   fieldTitle: e,
   optional: r,
-  elementId: t,
-  elementCssClass: s,
-  errorText: o,
+  elementId: n,
+  elementCssClass: o,
+  errorText: s,
   ...a
-}) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
-  /* @__PURE__ */ n(
-    A,
+}) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
+  /* @__PURE__ */ t(
+    z,
     {
       fieldTitle: e,
       optional: r,
-      htmlFor: t
+      htmlFor: n
     }
   ),
-  /* @__PURE__ */ n(
-    Re,
+  /* @__PURE__ */ t(
+    Ae,
     {
-      textareaId: t,
-      cssClass: s,
+      textareaId: n,
+      cssClass: o,
       ...a
     }
   ),
-  /* @__PURE__ */ n(L, { errorText: o })
-] }), Ge = ({
+  /* @__PURE__ */ t(_, { errorText: s })
+] }), Xe = ({
   title: e,
   switchId: r,
-  isOn: t = !1,
-  disabled: s,
-  onChange: o
+  isOn: n = !1,
+  disabled: o,
+  onChange: s
 }) => {
   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",
-    s ? "pointer-events-none" : "",
-    s ? t ? "bg-controls-disable" : "bg-layer-4" : t ? "bg-accent-primary" : "bg-layer-4"
-  ), l = ge(
+    "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",
+    o ? "pointer-events-none" : "",
+    o ? n ? "bg-controls-disable" : "bg-layer-4" : n ? "bg-accent-primary" : "bg-layer-4"
+  ), l = A(
     (c) => {
-      c.stopPropagation(), o?.(!t);
+      c.stopPropagation(), s?.(!n);
     },
-    [o, t]
+    [s, n]
   );
-  return /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
-    /* @__PURE__ */ n(
+  return /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
+    /* @__PURE__ */ t(
       "input",
       {
         type: "checkbox",
         onChange: l,
         id: r,
-        disabled: s,
+        disabled: o,
         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-controls-disable" : "bg-layer-4" : "bg-controls-enable-primary"
+          o ? n ? "bg-layer-4" : "bg-controls-disable" : "bg-controls-enable-primary"
         )
       }
     ) }),
-    e && /* @__PURE__ */ n("span", { className: "h-[14px] pl-2 small text-primary", children: e })
+    e && /* @__PURE__ */ t("span", { className: "pl-2 dial-small text-primary", children: e })
   ] });
 };
 export {
   x as AlertVariant,
   T as ButtonVariant,
-  He as DialAlert,
-  be as DialButton,
-  L as DialErrorText,
-  A as DialFieldLabel,
+  Ue as DialAlert,
+  ye as DialButton,
+  $e as DialCheckbox,
+  _ as DialErrorText,
+  z as DialFieldLabel,
   N as DialIcon,
-  I as DialInput,
-  Ue as DialLoader,
-  _e as DialNumberInputField,
-  Ge as DialSwitch,
-  Be as DialTextAreaField,
-  Ke as DialTextInputField,
-  Re as DialTextarea,
+  F as DialInput,
+  Ke as DialLoader,
+  Ge as DialNumberInputField,
+  Xe as DialSwitch,
+  Ve as DialTextAreaField,
+  Ze as DialTextInputField,
+  Ae as DialTextarea,
   k as DialTooltip
 };

package/dist/index.css

@@ -1,2 +1,2 @@
 .dial-h1{font-weight:600}.dial-h1,.dial-h2{font-size:20px;line-height:24px}.dial-h2{font-weight:400}.dial-h3{font-weight:600;line-height:18px}.dial-body,.dial-h3{font-size:16px}.dial-body{font-weight:400;line-height:28px}.dial-small{font-weight:400}.dial-small,.dial-small-semi{font-size:14px;line-height:16px}.dial-small-semi{font-weight:600}.dial-small-medium{font-weight:400;font-size:14px;line-height:16px}.dial-small-150{font-weight:400;font-size:14px;line-height:21px}.dial-tiny{line-height:14px}.dial-tiny,.dial-tiny-150{font-weight:400;font-size:12px}.dial-tiny-150{line-height:18px}.dial-caption{font-weight:400;font-size:10px;line-height:12px}h1{font-weight:600}h1,h2{font-size:20px;line-height:24px}h2{font-weight:400}h3{font-weight:600;font-size:16px;line-height:18px}.dial-base-button{display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px}.dial-base-button-disable{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}.dial-primary-button{background-color:var(--controls-bg-accent,#5c8dea);color:var(--controls-primary,#fcfcfc);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--controls-bg-accent-hover,#4878d2)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-secondary-button{background-color:transparent;color:var(--text-primary,#f3f4f6);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;border-color:var(--stroke-primary,#333942);&:focus,&:hover{background-color:var(--bg-layer-4,#333942)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-tertiary-button{background-color:transparent;color:var(--text-accent-primary,#5c8dea);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--controls-bg-accent-alpha,#5c8dea2b)}&:active,&:focus{border-color:var(--stroke-accent-primary,#5c8dea)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-input{border-radius:3px;border-width:1px;border-style:solid;border-color:var(--stroke-primary,#333942);&:hover{border-color:var(--stroke-hover,#f3f4f6)}&:focus,&:focus-within{border-color:var(--stroke-accent-primary,#5c8dea)}}.dial-input,.dial-input-no-border{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:transparent;font-weight:400;font-size:14px;line-height:16px;width:100%;padding:.5rem .75rem;outline-width:0;&:not(:-moz-placeholder){color:var(--text-primary,#f3f4f6)}&:not(:placeholder-shown){color:var(--text-primary,#f3f4f6)}&:disabled{background-color:var(--bg-layer-3,#222932)}&:disabled:not(:-moz-placeholder){color:var(--text-secondary,#7f8792)}&:disabled,&:disabled:not(:placeholder-shown){color:var(--text-secondary,#7f8792)}}.dial-input-disable,.dial-input-readonly{background-color:var(--bg-layer-3,#222932)}.dial-input-disable:not(:-moz-placeholder){color:var(--text-secondary,#7f8792)}.dial-input-disable,.dial-input-disable:not(:placeholder-shown){color:var(--text-secondary,#7f8792)}.dial-input-error{border-color:var(--stroke-error,#f76464)}.dial-input-field{height:38px}input{-moz-appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}&:focus{outline:none}}.dial-textarea{min-height:72px;resize:both;overflow:auto;white-space:normal}@layer ui{*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
-  /*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.relative{position:relative}.z-\[55\]{z-index:55}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.size-3{width:.75rem;height:.75rem}.h-0{height:0}.h-\[14px\]{height:14px}.h-\[18px\]{height:18px}.h-\[300px\]{height:300px}.h-\[38px\]{height:38px}.h-full{height:100%}.min-h-4{min-height:1rem}.min-h-\[72px\]{min-height:72px}.w-0{width:0}.w-2{width:.5rem}.w-80{width:20rem}.w-\[250px\]{width:250px}.w-\[36px\]{width:36px}.w-\[500px\]{width:500px}.w-full{width:100%}.min-w-\[800px\]{min-width:800px}.max-w-80{max-width:20rem}.max-w-\[1000px\]{max-width:1000px}.max-w-\[1200px\]{max-width:1200px}.max-w-\[1400px\]{max-width:1400px}.max-w-\[300px\]{max-width:300px}.flex-shrink-0,.shrink-0{flex-shrink:0}.grow-0{flex-grow:0}.basis-auto{flex-basis:auto}.border-collapse{border-collapse:collapse}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin-steps{animation:spin .75s steps(6) infinite}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-\[minmax\(0\2c 100px\)_1fr\]{grid-template-columns:minmax(0,100px) 1fr}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-\[160px\]{-moz-column-gap:160px;column-gap:160px}.gap-y-10{row-gap:2.5rem}.gap-y-\[80px\]{row-gap:80px}.overflow-hidden,.truncate{overflow:hidden}.truncate{white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-normal{white-space:normal}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:3px}.rounded-full{border-radius:9999px}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.border{border-width:1px}.border-0{border-width:0}.border-l-0{border-left-width:0}.border-r-0{border-right-width:0}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-error{border-color:var(--stroke-error,#f76464)}.border-primary{border-color:var(--stroke-primary,#333942)}.bg-accent-primary{background-color:var(--bg-accent-primary,#5c8dea)}.bg-blackout{background-color:var(--bg-blackout,#090d13b3)}.bg-controls-accent{background-color:var(--controls-bg-accent,#5c8dea)}.bg-controls-disable{background-color:var(--controls-bg-disable,#7f8792)}.bg-controls-enable-primary{background-color:var(--controls-enable-primary,#fcfcfc)}.bg-error{background-color:var(--bg-error,#402027)}.bg-info{background-color:var(--bg-info,#1c2c47)}.bg-layer-2{background-color:var(--bg-layer-2,#141a23)}.bg-layer-3{background-color:var(--bg-layer-3,#222932)}.bg-layer-4{background-color:var(--bg-layer-4,#333942)}.bg-success{background-color:var(--bg-success,#1d3841)}.bg-transparent{background-color:transparent}.bg-warning{background-color:var(--bg-warning,#3f3d25)}.stroke-primary{stroke:var(--stroke-primary,#333942)}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.pr-4{padding-right:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-\[var\(--bg-layer-0\2c _\#000000\)\]{color:var(--bg-layer-0,#000)}.text-accent-primary{color:var(--text-accent-primary,#5c8dea)}.text-controls-disable{color:var(--controls-disable,#333942)}.text-error{color:var(--text-error,#f76464)}.text-icon-accent-primary{color:var(--icon-accent-primary,#5c8dea)}.text-icon-accent-secondary{color:var(--icon-accent-secondary,#37babc)}.text-info{color:var(--text-info,#5c8dea)}.text-primary{color:var(--text-primary,#f3f4f6)}.text-secondary{color:var(--text-secondary,#7f8792)}.text-success{color:var(--text-success,#37babc)}.text-warning{color:var(--text-warning,#f4ce46)}.shadow{--tw-shadow:0 0 4px 0 var(--bg-blackout,#090d13b3);--tw-shadow-colored:0 0 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.outline-offset-0{outline-offset:0}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}}.hover\:text-primary:hover{color:var(--text-primary,#f3f4f6)}.focus-visible\:outline:focus-visible{outline-style:solid}@media (min-width:640px){.sm\:inline{display:inline}}
+  /*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.relative{position:relative}.z-\[55\]{z-index:55}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.size-3{width:.75rem;height:.75rem}.h-0{height:0}.h-\[18px\]{height:18px}.h-\[300px\]{height:300px}.h-\[38px\]{height:38px}.h-full{height:100%}.min-h-4{min-height:1rem}.min-h-\[72px\]{min-height:72px}.w-0{width:0}.w-2{width:.5rem}.w-80{width:20rem}.w-\[250px\]{width:250px}.w-\[36px\]{width:36px}.w-\[500px\]{width:500px}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[800px\]{min-width:800px}.max-w-80{max-width:20rem}.max-w-\[1000px\]{max-width:1000px}.max-w-\[1200px\]{max-width:1200px}.max-w-\[1400px\]{max-width:1400px}.max-w-\[300px\]{max-width:300px}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.grow-0{flex-grow:0}.basis-auto{flex-basis:auto}.border-collapse{border-collapse:collapse}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin-steps{animation:spin .75s steps(6) infinite}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-\[minmax\(0\2c 100px\)_1fr\]{grid-template-columns:minmax(0,100px) 1fr}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-\[160px\]{-moz-column-gap:160px;column-gap:160px}.gap-y-10{row-gap:2.5rem}.gap-y-6{row-gap:1.5rem}.gap-y-\[80px\]{row-gap:80px}.overflow-hidden,.truncate{overflow:hidden}.truncate{white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-normal{white-space:normal}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:3px}.rounded-full{border-radius:9999px}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.border{border-width:1px}.border-0{border-width:0}.border-l-0{border-left-width:0}.border-r-0{border-right-width:0}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-error{border-color:var(--stroke-error,#f76464)}.border-icon-secondary{border-color:var(--icon-secondary,#7f8792)}.border-primary{border-color:var(--stroke-primary,#333942)}.bg-accent-primary{background-color:var(--bg-accent-primary,#5c8dea)}.bg-blackout{background-color:var(--bg-blackout,#090d13b3)}.bg-controls-accent{background-color:var(--controls-bg-accent,#5c8dea)}.bg-controls-disable{background-color:var(--controls-bg-disable,#7f8792)}.bg-controls-enable-primary{background-color:var(--controls-enable-primary,#fcfcfc)}.bg-error{background-color:var(--bg-error,#402027)}.bg-info{background-color:var(--bg-info,#1c2c47)}.bg-layer-2{background-color:var(--bg-layer-2,#141a23)}.bg-layer-3{background-color:var(--bg-layer-3,#222932)}.bg-layer-4{background-color:var(--bg-layer-4,#333942)}.bg-success{background-color:var(--bg-success,#1d3841)}.bg-transparent{background-color:transparent}.bg-warning{background-color:var(--bg-warning,#3f3d25)}.stroke-primary{stroke:var(--stroke-primary,#333942)}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.pr-4{padding-right:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-\[var\(--bg-layer-0\2c _\#000000\)\]{color:var(--bg-layer-0,#000)}.text-accent-primary{color:var(--text-accent-primary,#5c8dea)}.text-controls-disable{color:var(--controls-disable,#333942)}.text-error{color:var(--text-error,#f76464)}.text-icon-accent-primary{color:var(--icon-accent-primary,#5c8dea)}.text-icon-accent-secondary{color:var(--icon-accent-secondary,#37babc)}.text-info{color:var(--text-info,#5c8dea)}.text-primary{color:var(--text-primary,#f3f4f6)}.text-secondary{color:var(--text-secondary,#7f8792)}.text-success{color:var(--text-success,#37babc)}.text-warning{color:var(--text-warning,#f4ce46)}.shadow{--tw-shadow:0 0 4px 0 var(--bg-blackout,#090d13b3);--tw-shadow-colored:0 0 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.outline-offset-0{outline-offset:0}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}}.before\:mr-2:before{content:var(--tw-content);margin-right:.5rem}.before\:inline-block:before{content:var(--tw-content);display:inline-block}.before\:h-\[18px\]:before{content:var(--tw-content);height:18px}.before\:w-\[18px\]:before{content:var(--tw-content);width:18px}.before\:rounded:before{content:var(--tw-content);border-radius:3px}.before\:border:before{content:var(--tw-content);border-width:1px}.before\:border-hover:before{content:var(--tw-content);border-color:var(--stroke-hover,#f3f4f6)}.before\:border-icon-secondary:before{content:var(--tw-content);border-color:var(--icon-secondary,#7f8792)}.before\:bg-layer-4:before{content:var(--tw-content);background-color:var(--bg-layer-4,#333942)}.before\:content-\[\"\"\]:before{--tw-content:"";content:var(--tw-content)}.hover\:text-primary:hover{color:var(--text-primary,#f3f4f6)}.focus-visible\:outline:focus-visible{outline-style:solid}@media (min-width:640px){.sm\:inline{display:inline}}

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

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+export interface DialCheckboxProps {
+    id: string;
+    label?: string;
+    checked: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    ariaLabel?: string;
+    onChange?: (value?: boolean, id?: string) => void;
+}
+/**
+ * A Checkbox component with styling options
+ *
+ * @example
+ * ```tsx
+ * <DialCheckbox
+ *   id="checkbox"
+ *   label="Dial Checkbox"
+ *   checked={true}
+ *   disabled={false}
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ *
+ * @param id - Unique identifier for the checkbox element
+ * @param [label] - The label text for the field
+ * @param [checked] - The current value of the checkbox
+ * @param [disabled=false] - Whether the checkbox is disabled
+ * @param [indeterminate=false] - indeterminate state
+ * @param [ariaLabel] - Accessible label for screen readers when no title is provided
+ * @param [onChange] - Callback function called when the checkbox value changes
+ */
+export declare const DialCheckbox: FC<DialCheckboxProps>;

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

@@ -7,7 +7,7 @@ export interface DialSwitchProps {
     onChange?: (value: boolean) => void;
 }
 /**
- * A flexible input component with icon support and various styling options
+ * A Switch component with various styling options
  *
  * @example
  * ```tsx

package/dist/src/constants/icon.d.ts

@@ -0,0 +1,5 @@
+export declare const BASE_ICON_SIZE = 18;
+export declare const BASE_ICON_PROPS: {
+    size: number;
+    stroke: number;
+};

package/dist/src/index.d.ts

@@ -4,6 +4,7 @@ export { DialFieldLabel } from './components/Field/Field';
 export { DialIcon } from './components/Icon/Icon';
 export { DialAlert } from './components/Alert/Alert';
 export { DialLoader } from './components/Loader/Loader';
+export { DialCheckbox } from './components/Checkbox/Checkbox';
 export { DialTextarea } from './components/Textarea/Textarea';
 export { DialTextAreaField } from './components/TextAreaField/TextAreaField';
 export { DialTooltip } from './components/Tooltip/Tooltip';

package/package.json

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