@epam/ai-dial-ui-kit 0.2.0-rc.26 → 0.2.0-rc.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("classnames"),b=require("@tabler/icons-react"),j=require("react"),p=require("@floating-ui/react"),W=({errorText:e})=>e&&s.jsx("span",{className:"text-error dial-tiny mt-1",children:e}),B=({fieldTitle:e,htmlFor:r,optional:t,optionalText:a,cssClass:n})=>e?s.jsxs("label",{className:c("dial-tiny text-secondary",n,!n?.includes("mb")&&"mb-2"),htmlFor:r,children:[s.jsx("span",{className:"min-h-4",children:e}),t&&s.jsx("span",{className:"ml-1",children:a??"(Optional)"})]}):null,D=({icon:e,className:r})=>e?s.jsx("span",{className:c("flex-shrink-0",r),children:e}):null;var w=(e=>(e.Primary="primary",e.Secondary="secondary",e.Tertiary="tertiary",e.Danger="danger",e))(w||{});const te={[w.Primary]:"dial-primary-button",[w.Secondary]:"dial-secondary-button",[w.Tertiary]:"dial-tertiary-button",[w.Danger]:"dial-danger-button"},F=({title:e,variant:r,cssClass:t,textCssClass:a,ref:n,onClick:l,disable:o,iconAfter:u,iconBefore:d,hideTitleOnMobile:i,ariaLabel:x})=>{const f=c("dial-small-semi",u?"mr-2":"",d?"ml-2":"",i?"hidden sm:inline":"inline",a),h=c(r&&te[r],t,"focus-visible:outline outline-offset-0");return s.jsxs("button",{ref:n,type:"button",className:h,onClick:m=>l?.(m),disabled:o,"aria-label":e||x,children:[s.jsx(D,{icon:d}),e&&s.jsx("span",{className:f,children:e}),s.jsx(D,{icon:u})]})};var S=(e=>(e.Info="info",e.Success="success",e.Warning="warning",e.Error="error",e))(S||{});const ne={info:s.jsx(b.IconInfoCircle,{size:24,stroke:2}),error:s.jsx(b.IconAlertCircle,{size:24,stroke:2}),warning:s.jsx(b.IconAlertTriangle,{size:24,stroke:2}),success:s.jsx(b.IconCircleCheck,{size:24,stroke:2})},ae={[S.Info]:"bg-info border-info text-info",[S.Success]:"bg-success border-success text-success",[S.Warning]:"bg-warning border-warning text-warning",[S.Error]:"bg-error border-error text-error"},le="items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex",oe=({variant:e=S.Info,message:r,cssClass:t,closable:a=!1,onClose:n})=>s.jsxs("div",{role:"alert",className:c(le,ae[e],t),children:[s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsx(D,{icon:ne[e]}),s.jsx("div",{className:"text-primary",children:r})]}),a&&s.jsx(F,{cssClass:"ml-2 text-secondary hover:text-primary",ariaLabel:"Close alert",iconBefore:s.jsx(b.IconX,{size:16}),onClick:l=>n?.(l)})]}),ie="flex items-center justify-center text-secondary",ce="shrink-0 grow-0 basis-auto animate-spin-steps",H=({size:e=18,cssClass:r,iconClass:t,fullWidth:a=!0,ariaLabel:n="Loading"})=>s.jsx("div",{role:"status","aria-label":n,className:c({[ie]:!0,"w-full h-full":a,[r||""]:!!r}),children:s.jsx(D,{icon:s.jsx(b.IconLoader,{width:e,height:e,className:c(ce,t)})})}),de=7,ue=2,q=j.createContext(null),$=()=>{const e=j.useContext(q);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},xe=({initialOpen:e=!1,placement:r="bottom",isTriggerClickable:t=!1,open:a,onOpenChange:n}={})=>{const[l,o]=j.useState(e),u=j.useRef(null),d=a??l,i=n??o,x=p.useFloating({placement:r,open:d,onOpenChange:i,whileElementsMounted:p.autoUpdate,middleware:[p.offset(de+ue),p.flip({crossAxis:r.includes("-"),fallbackAxisSideDirection:"start",padding:5}),p.shift({padding:5}),p.arrow({element:u})]}),f=p.useHover(x.context,{move:!1,enabled:a==null,mouseOnly:t,delay:{open:500,close:0}}),h=p.useFocus(x.context,{enabled:a==null}),m=p.useDismiss(x.context),y=p.useRole(x.context,{role:"tooltip"}),g=p.useInteractions([f,h,m,y]);return j.useMemo(()=>({open:d,setOpen:i,arrowRef:u,...g,...x}),[d,i,g,x])},me=({children:e,...r})=>{const t=xe(r);return s.jsx(q.Provider,{value:t,children:e})},pe=j.forwardRef(function({style:r,...t},a){const n=$(),l=p.useMergeRefs([n.refs.setFloating,a]);return n.open?s.jsx(p.FloatingPortal,{id:"tooltip-portal",children:s.jsxs("div",{ref:l,style:{...n.floatingStyles,...r},...n.getFloatingProps(t),className:c("z-[55] whitespace-pre-wrap break-words rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",n.getFloatingProps(t).className),children:[t.children,s.jsx(p.FloatingArrow,{ref:n.arrowRef,context:n.context,fill:"currentColor",strokeWidth:1,className:"stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"})]})}):null}),fe=j.forwardRef(function({children:r,asChild:t=!1,...a},n){const l=$(),u=r&&typeof r=="object"&&"ref"in r&&r.ref!==void 0?r.ref:void 0,d=p.useMergeRefs([l.refs.setReference,n,u]);return t&&j.isValidElement(r)?j.cloneElement(r,l.getReferenceProps({ref:d,...a,...r.props})):s.jsx("span",{ref:d,...l.getReferenceProps(a),className:a.className??"dial-tooltip-trigger text-left",children:r})}),O=({hideTooltip:e,tooltip:r,children:t,triggerClassName:a,contentClassName:n,...l})=>s.jsxs(me,{...l,children:[s.jsx(fe,{className:c(a,"truncate"),children:t}),s.jsx(pe,{className:c("text-primary",n,"max-w-[300px]",(e||!r)&&"hidden"),children:r})]}),G=18,T={size:G,stroke:2},he=({label:e,id:r,checked:t,indeterminate:a,disabled:n,ariaLabel:l,onChange:o})=>{const u=j.useCallback(x=>{x.stopPropagation(),o?.(x.target.checked,r)},[o,r]),d=c("flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",`${t?"":'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,n?"pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4":""),i=c("mr-2 border rounded",n?"bg-layer-4 border-icon-secondary":"");return s.jsxs("label",{className:d,htmlFor:r,children:[t&&(a?s.jsx(b.IconMinus,{className:i,...T}):s.jsx(b.IconCheck,{className:i,...T})),e&&s.jsx(O,{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:u,id:r,checked:t,"aria-checked":a?"mixed":t,"aria-disabled":n||void 0,"aria-label":e?void 0:l,className:"invisible w-0 h-0"})]})};var v=(e=>(e.VALID="valid",e.ERROR="error",e))(v||{});const ge=(e,r)=>{if(r===e.id)switch(e.status){case v.VALID:return"border-accent-secondary text-primary";case v.ERROR:return"border-red-900 text-primary";default:return"border-accent-primary text-primary"}switch(e.status){case v.VALID:return"border-primary text-white";case v.ERROR:return"border-red-900 text-error";default:return"border-primary text-secondary"}},je=(e,r)=>{if(r===e.id)switch(e.status){case v.VALID:return"bg-accent-secondary";case v.ERROR:return"bg-red-400";default:return"bg-accent-primary"}switch(e.status){case v.VALID:return"bg-accent-secondary";case v.ERROR:return"bg-red-400";default:return"bg-layer-4"}},be=({step:e,index:r,currentStep:t,onChangeStep:a})=>{const n="h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer",l="w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white",o=()=>t===e.id&&e.status===v.ERROR?s.jsx(b.IconExclamationCircle,{stroke:2,size:16}):t!==e.id&&e.status===v.VALID?s.jsx(b.IconCheck,{stroke:2,size:16}):r+1;return s.jsxs("button",{className:c(n,ge(e,t)),onClick:()=>a(e.id),children:[s.jsx("span",{className:c(l,je(e,t)),children:o()}),s.jsx("span",{children:e.name})]})},Ce=({steps:e,currentStep:r,onChangeStep:t})=>{const a=n=>{const l=e.findIndex(u=>u.id===r),o=e.findIndex(u=>u.id===n);(n!==r&&e[l].status===v.VALID||o<l)&&t(n)};return s.jsx("div",{id:"steps",className:"flex gap-x-3",children:e.map((n,l)=>s.jsx(be,{currentStep:r,onChangeStep:a,step:n,index:l},n.id))})},U=({name:e,value:r,title:t,description:a,checked:n=!1,inputId:l,cssClass:o,labelCssClass:u,disabled:d,onChange:i,descriptionCssClass:x})=>{const f=`${l}-desc`,h=c("dial-small cursor-pointer",d?"text-secondary":"text-primary",u),m=c("cursor-pointer dial-input-radio",t&&"mr-2",o),y=c("flex flex-col",!!a&&"mb-2"),g=c("dial-tiny mt-2 ml-[26px] text-secondary",x),N=I=>{d||I.target.checked&&i?.(r)};return s.jsxs("div",{className:y,children:[s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"radio",id:l,name:e,value:r,checked:n,disabled:d,"aria-describedby":n&&a?f:void 0,className:m,onChange:N}),t?s.jsx("label",{className:h,htmlFor:l,children:t}):null]}),n&&a&&s.jsx("div",{id:f,className:g,children:a})]})};var M=(e=>(e.Row="Row",e.Column="Column",e))(M||{});const ye="flex flex-col gap-2",ve="flex",we="pb-1 mt-2",Ne={[M.Column]:"flex-col gap-y-3",[M.Row]:"flex-row gap-x-6"},De=({fieldTitle:e,radioCssClass:r,labelCssClass:t,disabled:a,elementId:n,radioButtons:l,activeRadioButton:o,orientation:u,onChange:d})=>s.jsxs("div",{className:ye,children:[e&&s.jsx(B,{fieldTitle:e,htmlFor:n}),s.jsx("div",{role:"radiogroup","aria-label":e,"aria-disabled":a||void 0,className:c(ve,Ne[u]),children:l.map(i=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(U,{name:n,value:i.id,inputId:i.id,disabled:a,cssClass:r,labelCssClass:t,title:i.name,checked:i.id===o,onChange:()=>d(i.id)}),i.id===o&&i.content?s.jsx("div",{className:we,children:i.content}):null]},i.id))})]}),Ie=({icon:e,title:r,description:t})=>s.jsxs("div",{className:"h-full w-full flex flex-col items-center justify-center text-secondary",children:[e||s.jsx(b.IconClipboardX,{width:60,height:60}),s.jsx("span",{className:"small mt-2 text-primary",children:r}),t&&s.jsx("span",{className:"mt-1 text-primary",children:t})]}),ke=60,Se=({containerCssClass:e,children:r,width:t,title:a,iconSize:n=G,titleCssClass:l,additionalButtons:o})=>{const[u,d]=j.useState(t),[i,x]=j.useState(!0),f=c(["transform rotate-180 [writing-mode:tb-rl]",i&&"hidden",l]),h=c(["flex flex-row gap-2 cursor-pointer text-secondary",i?"justify-end":"justify-center"]),m=()=>{d(i?ke:t),x(!i)};return s.jsxs("div",{className:c(["rounded p-4 flex flex-col justify-between overflow-y-auto flex-shrink-0",e]),style:{width:`${u}px`},children:[s.jsx("div",{className:c(["flex-1 min-h-0 overflow-auto",!i&&"hidden"]),children:r}),s.jsx("div",{className:f,children:a}),s.jsxs("div",{className:h,children:[i&&o,s.jsx(F,{cssClass:"hover:text-icon-accent-primary",onClick:m,iconBefore:i?s.jsx(b.IconChevronsLeft,{size:n,stroke:T.stroke}):s.jsx(b.IconChevronsRight,{size:n,stroke:T.stroke})})]})]})},X=({ariaLabel:e,cssClass:r,size:t=24,onClose:a})=>s.jsx(F,{ariaLabel:e,cssClass:c("text-secondary hover:text-accent-primary",r),onClick:a,iconBefore:s.jsx(b.IconX,{size:t})}),K=({value:e,textareaId:r,placeholder:t,cssClass:a="",disabled:n,invalid:l,readonly:o,onChange:u})=>s.jsx(O,{tooltip:e,triggerClassName:"flex",children:s.jsx("textarea",{id:r,placeholder:t,value:e||"",disabled:n,className:c("dial-textarea dial-input px-3 py-2",l?"dial-input-error":"",n&&"dial-input-disable",o&&"dial-input-readonly",a),onChange:d=>!o&&u?.(d.currentTarget.value)})}),Re=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Backspace","Delete","Tab","Enter","Escape","Home","End"],Fe=(e,r,t,a)=>{if((r==="number"||t!==void 0||a!==void 0)&&!Re.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||a!==void 0){const l=e.currentTarget.value,o=e.currentTarget.selectionStart||0,u=l.slice(0,o)+e.key+l.slice(o),d=parseFloat(u);if(!isNaN(d)){if(t!==void 0&&d<t){e.preventDefault();return}if(a!==void 0&&d>a){e.preventDefault();return}}}}},P=({iconBefore:e,iconAfter:r,hideBorder:t,value:a,elementId:n,placeholder:l="",cssClass:o="",containerCssClass:u,tooltipTriggerClassName:d,type:i="text",disabled:x,readonly:f,invalid:h,onChange:m,min:y,max:g,prefix:N,suffix:I,textBeforeInput:C,textAfterInput:z})=>{const J=k=>k.target.blur(),ee=i==="number"||y!==void 0||g!==void 0,se=k=>{Fe(k,i,y,g)},re=k=>{const E=k.currentTarget.value;if(ee&&E!==""){const V=parseFloat(E);if(isNaN(V)&&E!=="-"&&E!=="."||!isNaN(V)&&(y!==void 0&&V<y||g!==void 0&&V>g))return}m?.(E)};return s.jsxs("div",{className:c("dial-input-field flex flex-row items-center justify-between py-2",t?"dial-input-no-border":"dial-input",h&&"dial-input-error",x&&"dial-input-disable",f&&"dial-input-readonly",!C&&"pl-3",!z&&"pr-3",u),children:[C&&s.jsx("div",{children:s.jsx(P,{hideBorder:!0,containerCssClass:"rounded-r-none border-r-0",cssClass:"px-2 overflow-hidden overflow-ellipsis dial-small",value:C,disabled:!0,elementId:C+"textBefore"})}),N&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",N]}),s.jsx(D,{icon:e}),s.jsx(O,{tooltip:a,triggerClassName:c(d,"flex-1"),children:s.jsx("input",{type:i,autoComplete:"off",id:n,placeholder:l,value:a??"",disabled:x,className:c("border-0 bg-transparent px-2",o),onChange:k=>!f&&re?.(k),onKeyDown:se,onWheel:J,min:y,max:g})}),s.jsx(D,{icon:r}),I&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",I]}),z&&s.jsx("div",{children:s.jsx(P,{hideBorder:!0,containerCssClass:"rounded-l-none border-l-0",cssClass:"px-2",value:z,disabled:!0,elementId:z+"textAfter"})})]})},Te=/^0+\.(\d+)?$/,Ee=/^0+/,Z=({fieldTitle:e,errorText:r,optional:t,elementCssClass:a,elementContainerCssClass:n,elementId:l,containerCssClass:o,readonly:u,defaultEmptyText:d,min:i,max:x,...f})=>s.jsxs("div",{className:c("flex flex-col",o),children:[s.jsx(B,{fieldTitle:e,optional:t,htmlFor:l}),u?s.jsx("span",{children:f.value||(d??"None")}):s.jsxs(s.Fragment,{children:[s.jsx(P,{elementId:l,cssClass:a,containerCssClass:n,invalid:r!=null,min:i,max:x,...f}),s.jsx(W,{errorText:r})]})]}),Pe=({onChange:e,value:r,min:t,max:a,...n})=>{const l=o=>String(o)?.match(Te)?String(o)?.replace(Ee,"0"):Number(o);return s.jsx(Z,{type:"number",onChange:o=>e?.(l(o)),value:r,min:t,max:a,...n})},Ae=({onChange:e,...r})=>s.jsx(Z,{type:"text",onChange:t=>e?.(t),...r}),Le=({fieldTitle:e,optional:r,elementId:t,elementCssClass:a,errorText:n,...l})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(B,{fieldTitle:e,optional:r,htmlFor:t}),s.jsx(K,{textareaId:t,cssClass:a,...l}),s.jsx(W,{errorText:n})]}),Be=({title:e,switchId:r,isOn:t=!1,disabled:a,onChange:n})=>{const l=c("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",a?"pointer-events-none":"",a?t?"bg-controls-disable":"bg-layer-4":t?"bg-accent-primary":"bg-layer-4"),o=j.useCallback(u=>{u.stopPropagation(),n?.(!t)},[n,t]);return s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"checkbox",onChange:o,id:r,disabled:a,className:"invisible w-0 h-0",checked:t}),s.jsx("label",{htmlFor:r,className:l,children:s.jsx("span",{className:c("size-3 rounded-full",a?t?"bg-layer-4":"bg-controls-disable":"bg-controls-enable-primary")})}),e&&s.jsx("span",{className:"pl-2 dial-small text-primary",children:e})]})};var R=(e=>(e.Sm="sm",e.Md="md",e.Lg="lg",e))(R||{});const Oe="z-[52] flex items-center justify-center bg-blackout md:p-4",ze="relative max-h-full rounded bg-layer-3 flex flex-col shadow w-full h-full md:h-auto",Ve="divide-tertiary divide-y",Me="flex flex-row justify-between py-4 px-6 items-center",We={[R.Sm]:"max-w-full md:max-w-[400px]",[R.Md]:"max-w-full md:max-w-[800px]",[R.Lg]:"max-w-full md:max-w-[1200px]"},Q=({open:e=!1,title:r,portalId:t,cssClass:a,overlayClass:n,headingClass:l,dividers:o=!0,children:u,footer:d,onClose:i,size:x=R.Md})=>{const{refs:f,context:h}=p.useFloating({open:e,onOpenChange:C=>{C||i?.(null)}}),m=p.useRole(h,{role:"dialog"}),y=p.useDismiss(h,{outsidePress:!0}),{getFloatingProps:g}=p.useInteractions([m,y]);if(!e)return null;const N=typeof r=="string"?"dial-popup-heading":void 0,I=C=>C?typeof C=="string"?s.jsx("h3",{id:N,className:c("flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",l),children:s.jsx(O,{tooltip:C,children:C})}):C:s.jsx("span",{});return s.jsx(p.FloatingPortal,{id:t,children:s.jsx(p.FloatingOverlay,{className:c(Oe,n),children:s.jsx(p.FloatingFocusManager,{context:h,children:s.jsxs("div",{ref:f.setFloating,...g(),role:"dialog","aria-modal":"true","aria-labelledby":N,className:c(ze,We[x],o&&Ve,a),children:[s.jsxs("div",{className:Me,children:[I(r),s.jsx(X,{ariaLabel:"Close dialog",onClose:C=>i?.(C)})]}),s.jsx("div",{className:"flex-grow overflow-auto",children:u}),d]})})})})};var A=(e=>(e.Info="info",e.Danger="danger",e))(A||{});const _e="flex justify-end gap-2 px-6 py-4",He="text-secondary dial-small-150 px-6 py-4",qe="Cancel",_={[A.Info]:{confirmVariant:w.Primary,cancelVariant:w.Secondary},[A.Danger]:{container:"border-t-4 border-error",confirmVariant:w.Danger,cancelVariant:w.Secondary}},$e=({title:e,description:r,descriptionCssClass:t,open:a=!1,confirmLabel:n,cancelLabel:l=qe,isLoading:o=!1,disableConfirmButton:u=!1,cssClass:d,confirmClassName:i,onClose:x,onConfirm:f,onCancel:h,children:m,dividers:y=!1,variant:g=A.Info,size:N=R.Sm})=>{const I=o?null:s.jsxs("div",{className:_e,children:[s.jsx(F,{variant:w.Secondary,title:l,onClick:()=>h?h():x?.()}),s.jsx(F,{variant:_[g].confirmVariant,cssClass:i,title:n,disable:u,onClick:()=>f()})]}),C=j.useCallback(()=>o?s.jsx("div",{className:"px-6 py-4 h-[120px]",children:s.jsx(H,{size:50})}):m??(r?s.jsx("div",{className:c(He,t),children:r}):null),[m,r,o,t]);return s.jsx(Q,{open:a,title:e,cssClass:c(_[g].container,d),dividers:y,onClose:()=>x?.(),footer:I,size:N,children:C()})},Ge=({onClick:e})=>s.jsx(b.IconEyeOff,{...T,className:"text-primary",onClick:e}),Ue=({onClick:e})=>s.jsx(b.IconEye,{...T,className:"text-primary",onClick:e}),Y=({...e})=>{const[r,t]=j.useState(!1),a=j.useCallback(n=>{t(n)},[]);return s.jsx(P,{type:r?"text":"password",...e,iconAfter:r?s.jsx(Ge,{onClick:()=>a(!1)}):s.jsx(Ue,{onClick:()=>a(!0)})})},Xe=({fieldTitle:e,optional:r,elementCssClass:t,elementId:a,errorText:n,...l})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(B,{fieldTitle:e,optional:r,htmlFor:a}),s.jsx(Y,{cssClass:t,elementId:a,invalid:!!n,...l}),s.jsx(W,{errorText:n})]});var L=(e=>(e.Small="small",e.Base="base",e))(L||{});const Ke={[L.Small]:{textClass:"text-xs px-1",containerClass:"px-[6px] py-1 h-[22px]",iconSize:10,iconStroke:1},[L.Base]:{textClass:"text-sm px-2",containerClass:"px-3 py-2 h-[38px]",iconSize:18,iconStroke:1.5}},Ze=({elementId:e,value:r,placeholder:t,disabled:a,readonly:n,invalid:l,cssClass:o,containerCssClass:u,onChange:d,size:i=L.Base})=>{const[x,f]=j.useState(r||"");j.useEffect(()=>{f(r||"")},[r]);const h=j.useCallback(g=>{f(g),d?.(g)},[d]),m=Ke[i],y=j.useCallback(()=>{h("")},[h]);return s.jsxs("div",{className:c("dial-input flex flex-row items-center justify-between",l&&"dial-input-error",a&&"dial-input-disable",n&&"dial-input-readonly",m.containerClass,u),children:[s.jsx(D,{className:c(a?"text-secondary":"text-primary"),icon:s.jsx(b.IconSearch,{size:m.iconSize,stroke:m.iconStroke})}),s.jsx("input",{id:e,type:"text",autoComplete:"off",placeholder:t,value:x??"",disabled:a,readOnly:n,className:c("border-0 bg-transparent w-full",o,m.textClass),onChange:g=>!n&&h(g.currentTarget.value)}),x&&!n&&!a&&s.jsx(D,{className:"text-primary cursor-pointer",icon:s.jsx(b.IconX,{size:m.iconSize,stroke:m.iconStroke,onClick:y,"aria-label":"Clear search",role:"button"})})]})};exports.AlertVariant=S;exports.ButtonVariant=w;exports.ConfirmationPopupVariant=A;exports.DialAlert=oe;exports.DialButton=F;exports.DialCheckbox=he;exports.DialCloseButton=X;exports.DialCollapsibleSidebar=Se;exports.DialConfirmationPopup=$e;exports.DialErrorText=W;exports.DialFieldLabel=B;exports.DialIcon=D;exports.DialInput=P;exports.DialLoader=H;exports.DialNoDataContent=Ie;exports.DialNumberInputField=Pe;exports.DialPasswordInput=Y;exports.DialPasswordInputField=Xe;exports.DialPopup=Q;exports.DialRadioButton=U;exports.DialRadioGroup=De;exports.DialSearch=Ze;exports.DialSteps=Ce;exports.DialSwitch=Be;exports.DialTextAreaField=Le;exports.DialTextInputField=Ae;exports.DialTextarea=K;exports.DialTooltip=O;exports.PopupSize=R;exports.RadioGroupOrientation=M;exports.SearchSize=L;exports.StepStatus=v;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("classnames"),b=require("@tabler/icons-react"),j=require("react"),p=require("@floating-ui/react"),W=({errorText:e})=>e&&s.jsx("span",{className:"text-error dial-tiny mt-1",children:e}),B=({fieldTitle:e,htmlFor:r,optional:t,optionalText:a,cssClass:n})=>e?s.jsxs("label",{className:c("dial-tiny text-secondary",n,!n?.includes("mb")&&"mb-2"),htmlFor:r,children:[s.jsx("span",{className:"min-h-4",children:e}),t&&s.jsx("span",{className:"ml-1",children:a??"(Optional)"})]}):null,D=({icon:e,className:r})=>e?s.jsx("span",{className:c("flex-shrink-0",r),children:e}):null;var w=(e=>(e.Primary="primary",e.Secondary="secondary",e.Tertiary="tertiary",e.Danger="danger",e))(w||{});const te={[w.Primary]:"dial-primary-button",[w.Secondary]:"dial-secondary-button",[w.Tertiary]:"dial-tertiary-button",[w.Danger]:"dial-danger-button"},F=({title:e,variant:r,cssClass:t,textCssClass:a,ref:n,onClick:l,disable:o,iconAfter:u,iconBefore:d,hideTitleOnMobile:i,ariaLabel:x})=>{const f=c("dial-small-semi",u?"mr-2":"",d?"ml-2":"",i?"hidden sm:inline":"inline",a),h=c(r&&te[r],t,"focus-visible:outline outline-offset-0");return s.jsxs("button",{ref:n,type:"button",className:h,onClick:m=>l?.(m),disabled:o,"aria-label":e||x,children:[s.jsx(D,{icon:d}),e&&s.jsx("span",{className:f,children:e}),s.jsx(D,{icon:u})]})};var S=(e=>(e.Info="info",e.Success="success",e.Warning="warning",e.Error="error",e))(S||{});const ne={info:s.jsx(b.IconInfoCircle,{size:24,stroke:2}),error:s.jsx(b.IconAlertCircle,{size:24,stroke:2}),warning:s.jsx(b.IconAlertTriangle,{size:24,stroke:2}),success:s.jsx(b.IconCircleCheck,{size:24,stroke:2})},ae={[S.Info]:"bg-info border-info text-info",[S.Success]:"bg-success border-success text-success",[S.Warning]:"bg-warning border-warning text-warning",[S.Error]:"bg-error border-error text-error"},le="items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex",oe=({variant:e=S.Info,message:r,cssClass:t,closable:a=!1,onClose:n})=>s.jsxs("div",{role:"alert",className:c(le,ae[e],t),children:[s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsx(D,{icon:ne[e]}),s.jsx("div",{className:"text-primary",children:r})]}),a&&s.jsx(F,{cssClass:"ml-2 text-secondary hover:text-primary",ariaLabel:"Close alert",iconBefore:s.jsx(b.IconX,{size:16}),onClick:l=>n?.(l)})]}),ie="flex items-center justify-center text-secondary",ce="shrink-0 grow-0 basis-auto animate-spin-steps",H=({size:e=18,cssClass:r,iconClass:t,fullWidth:a=!0,ariaLabel:n="Loading"})=>s.jsx("div",{role:"status","aria-label":n,className:c({[ie]:!0,"w-full h-full":a,[r||""]:!!r}),children:s.jsx(D,{icon:s.jsx(b.IconLoader,{width:e,height:e,className:c(ce,t)})})}),de=7,ue=2,q=j.createContext(null),$=()=>{const e=j.useContext(q);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},xe=({initialOpen:e=!1,placement:r="bottom",isTriggerClickable:t=!1,open:a,onOpenChange:n}={})=>{const[l,o]=j.useState(e),u=j.useRef(null),d=a??l,i=n??o,x=p.useFloating({placement:r,open:d,onOpenChange:i,whileElementsMounted:p.autoUpdate,middleware:[p.offset(de+ue),p.flip({crossAxis:r.includes("-"),fallbackAxisSideDirection:"start",padding:5}),p.shift({padding:5}),p.arrow({element:u})]}),f=p.useHover(x.context,{move:!1,enabled:a==null,mouseOnly:t,delay:{open:500,close:0}}),h=p.useFocus(x.context,{enabled:a==null}),m=p.useDismiss(x.context),y=p.useRole(x.context,{role:"tooltip"}),g=p.useInteractions([f,h,m,y]);return j.useMemo(()=>({open:d,setOpen:i,arrowRef:u,...g,...x}),[d,i,g,x])},me=({children:e,...r})=>{const t=xe(r);return s.jsx(q.Provider,{value:t,children:e})},pe=j.forwardRef(function({style:r,...t},a){const n=$(),l=p.useMergeRefs([n.refs.setFloating,a]);return n.open?s.jsx(p.FloatingPortal,{id:"tooltip-portal",children:s.jsxs("div",{ref:l,style:{...n.floatingStyles,...r},...n.getFloatingProps(t),className:c("z-[55] whitespace-pre-wrap break-words rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",n.getFloatingProps(t).className),children:[t.children,s.jsx(p.FloatingArrow,{ref:n.arrowRef,context:n.context,fill:"currentColor",strokeWidth:1,className:"stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"})]})}):null}),fe=j.forwardRef(function({children:r,asChild:t=!1,...a},n){const l=$(),u=r&&typeof r=="object"&&"ref"in r&&r.ref!==void 0?r.ref:void 0,d=p.useMergeRefs([l.refs.setReference,n,u]);return t&&j.isValidElement(r)?j.cloneElement(r,l.getReferenceProps({ref:d,...a,...r.props})):s.jsx("span",{ref:d,...l.getReferenceProps(a),className:a.className??"dial-tooltip-trigger text-left",children:r})}),O=({hideTooltip:e,tooltip:r,children:t,triggerClassName:a,contentClassName:n,...l})=>s.jsxs(me,{...l,children:[s.jsx(fe,{className:c(a,"truncate"),children:t}),s.jsx(pe,{className:c("text-primary",n,"max-w-[300px]",(e||!r)&&"hidden"),children:r})]}),G=18,T={size:G,stroke:2},he=({label:e,id:r,checked:t,indeterminate:a,disabled:n,ariaLabel:l,onChange:o})=>{const u=j.useCallback(x=>{x.stopPropagation(),o?.(x.target.checked,r)},[o,r]),d=c("flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",`${t?"":'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,n?"pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4":""),i=c("mr-2 border rounded",n?"bg-layer-4 border-icon-secondary":"");return s.jsxs("label",{className:d,htmlFor:r,children:[t&&(a?s.jsx(b.IconMinus,{className:i,...T}):s.jsx(b.IconCheck,{className:i,...T})),e&&s.jsx(O,{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:u,id:r,checked:t,"aria-checked":a?"mixed":t,"aria-disabled":n||void 0,"aria-label":e?void 0:l,className:"invisible w-0 h-0"})]})};var v=(e=>(e.VALID="valid",e.ERROR="error",e))(v||{});const ge=(e,r)=>{if(r===e.id)switch(e.status){case v.VALID:return"border-accent-secondary text-primary";case v.ERROR:return"border-red-900 text-primary";default:return"border-accent-primary text-primary"}switch(e.status){case v.VALID:return"border-primary text-white";case v.ERROR:return"border-red-900 text-error";default:return"border-primary text-secondary"}},je=(e,r)=>{if(r===e.id)switch(e.status){case v.VALID:return"bg-accent-secondary";case v.ERROR:return"bg-red-400";default:return"bg-accent-primary"}switch(e.status){case v.VALID:return"bg-accent-secondary";case v.ERROR:return"bg-red-400";default:return"bg-layer-4"}},be=({step:e,index:r,currentStep:t,onChangeStep:a})=>{const n="h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer",l="w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white",o=()=>t===e.id&&e.status===v.ERROR?s.jsx(b.IconExclamationCircle,{stroke:2,size:16}):t!==e.id&&e.status===v.VALID?s.jsx(b.IconCheck,{stroke:2,size:16}):r+1;return s.jsxs("button",{className:c(n,ge(e,t)),onClick:()=>a(e.id),children:[s.jsx("span",{className:c(l,je(e,t)),children:o()}),s.jsx("span",{children:e.name})]})},Ce=({steps:e,currentStep:r,onChangeStep:t})=>{const a=n=>{const l=e.findIndex(u=>u.id===r),o=e.findIndex(u=>u.id===n);(n!==r&&e[l].status===v.VALID||o<l)&&t(n)};return s.jsx("div",{id:"steps",className:"flex gap-x-3",children:e.map((n,l)=>s.jsx(be,{currentStep:r,onChangeStep:a,step:n,index:l},n.id))})},U=({name:e,value:r,title:t,description:a,checked:n=!1,inputId:l,cssClass:o,labelCssClass:u,disabled:d,onChange:i,descriptionCssClass:x})=>{const f=`${l}-desc`,h=c("dial-small cursor-pointer",d?"text-secondary":"text-primary",u),m=c("cursor-pointer dial-input-radio",t&&"mr-2",o),y=c("flex flex-col",!!a&&"mb-2"),g=c("dial-tiny mt-2 ml-[26px] text-secondary",x),N=I=>{d||I.target.checked&&i?.(r)};return s.jsxs("div",{className:y,children:[s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"radio",id:l,name:e,value:r,checked:n,disabled:d,"aria-describedby":n&&a?f:void 0,className:m,onChange:N}),t?s.jsx("label",{className:h,htmlFor:l,children:t}):null]}),n&&a&&s.jsx("div",{id:f,className:g,children:a})]})};var M=(e=>(e.Row="Row",e.Column="Column",e))(M||{});const ye="flex flex-col gap-2",ve="flex",we="pb-1 mt-2",Ne={[M.Column]:"flex-col gap-y-3",[M.Row]:"flex-row gap-x-6"},De=({fieldTitle:e,radioCssClass:r,labelCssClass:t,disabled:a,elementId:n,radioButtons:l,activeRadioButton:o,orientation:u,onChange:d})=>s.jsxs("div",{className:ye,children:[e&&s.jsx(B,{fieldTitle:e,htmlFor:n}),s.jsx("div",{role:"radiogroup","aria-label":e,"aria-disabled":a||void 0,className:c(ve,Ne[u]),children:l.map(i=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(U,{name:n,value:i.id,inputId:i.id,disabled:a,cssClass:r,labelCssClass:t,title:i.name,checked:i.id===o,onChange:()=>d(i.id)}),i.id===o&&i.content?s.jsx("div",{className:we,children:i.content}):null]},i.id))})]}),Ie=({icon:e,title:r,description:t})=>s.jsxs("div",{className:"h-full w-full flex flex-col items-center justify-center text-secondary",children:[e||s.jsx(b.IconClipboardX,{width:60,height:60}),s.jsx("span",{className:"small mt-2 text-primary",children:r}),t&&s.jsx("span",{className:"mt-1 text-primary",children:t})]}),ke=60,Se=({containerCssClass:e,children:r,width:t,title:a,iconSize:n=G,titleCssClass:l,additionalButtons:o})=>{const[u,d]=j.useState(t),[i,x]=j.useState(!0),f=c(["transform rotate-180 [writing-mode:tb-rl]",i&&"hidden",l]),h=c(["flex flex-row gap-2 cursor-pointer text-secondary",i?"justify-end":"justify-center"]),m=()=>{d(i?ke:t),x(!i)};return s.jsxs("div",{className:c(["rounded p-4 flex flex-col justify-between overflow-y-auto flex-shrink-0",e]),style:{width:`${u}px`},children:[s.jsx("div",{className:c(["flex-1 min-h-0 overflow-auto",!i&&"hidden"]),children:r}),s.jsx("div",{className:f,children:a}),s.jsxs("div",{className:h,children:[i&&o,s.jsx(F,{cssClass:"hover:text-icon-accent-primary",onClick:m,iconBefore:i?s.jsx(b.IconChevronsLeft,{size:n,stroke:T.stroke}):s.jsx(b.IconChevronsRight,{size:n,stroke:T.stroke})})]})]})},X=({ariaLabel:e,cssClass:r,size:t=24,onClose:a})=>s.jsx(F,{ariaLabel:e,cssClass:c("text-secondary hover:text-accent-primary",r),onClick:a,iconBefore:s.jsx(b.IconX,{size:t})}),K=({value:e,textareaId:r,placeholder:t,cssClass:a="",disabled:n,invalid:l,readonly:o,onChange:u})=>s.jsx(O,{tooltip:e,triggerClassName:"flex",children:s.jsx("textarea",{id:r,placeholder:t,value:e||"",disabled:n,className:c("dial-textarea dial-input px-3 py-2",l?"dial-input-error":"",n&&"dial-input-disable",o&&"dial-input-readonly",a),onChange:d=>!o&&u?.(d.currentTarget.value)})}),Re=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Backspace","Delete","Tab","Enter","Escape","Home","End"],Fe=(e,r,t,a)=>{if((r==="number"||t!==void 0||a!==void 0)&&!Re.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||a!==void 0){const l=e.currentTarget.value,o=e.currentTarget.selectionStart||0,u=l.slice(0,o)+e.key+l.slice(o),d=parseFloat(u);if(!isNaN(d)){if(t!==void 0&&d<t){e.preventDefault();return}if(a!==void 0&&d>a){e.preventDefault();return}}}}},P=({iconBefore:e,iconAfter:r,hideBorder:t,value:a,elementId:n,placeholder:l="",cssClass:o="",containerCssClass:u,tooltipTriggerClassName:d,type:i="text",disabled:x,readonly:f,invalid:h,onChange:m,min:y,max:g,prefix:N,suffix:I,textBeforeInput:C,textAfterInput:z})=>{const J=k=>k.target.blur(),ee=i==="number"||y!==void 0||g!==void 0,se=k=>{Fe(k,i,y,g)},re=k=>{const E=k.currentTarget.value;if(ee&&E!==""){const V=parseFloat(E);if(isNaN(V)&&E!=="-"&&E!=="."||!isNaN(V)&&(y!==void 0&&V<y||g!==void 0&&V>g))return}m?.(E)};return s.jsxs("div",{className:c("dial-input-field flex flex-row items-center justify-between py-2",t?"dial-input-no-border":"dial-input",h&&"dial-input-error",x&&"dial-input-disable",f&&"dial-input-readonly",!C&&"pl-3",!z&&"pr-3",u),children:[C&&s.jsx("div",{children:s.jsx(P,{hideBorder:!0,containerCssClass:"rounded-r-none border-r-0",cssClass:"px-2 overflow-hidden overflow-ellipsis dial-small",value:C,disabled:!0,elementId:C+"textBefore"})}),N&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",N]}),s.jsx(D,{icon:e}),s.jsx(O,{tooltip:a,triggerClassName:c(d,"flex-1"),children:s.jsx("input",{type:i,autoComplete:"off",id:n,placeholder:l,value:a??"",disabled:x,className:c("border-0 bg-transparent px-2",o),onChange:k=>!f&&re?.(k),onKeyDown:se,onWheel:J,min:y,max:g})}),s.jsx(D,{icon:r}),I&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",I]}),z&&s.jsx("div",{children:s.jsx(P,{hideBorder:!0,containerCssClass:"rounded-l-none border-l-0",cssClass:"px-2",value:z,disabled:!0,elementId:z+"textAfter"})})]})},Te=/^0+\.(\d+)?$/,Ee=/^0+/,Z=({fieldTitle:e,errorText:r,optional:t,elementCssClass:a,elementContainerCssClass:n,elementId:l,containerCssClass:o,readonly:u,defaultEmptyText:d,min:i,max:x,...f})=>s.jsxs("div",{className:c("flex flex-col",o),children:[s.jsx(B,{fieldTitle:e,optional:t,htmlFor:l}),u?s.jsx("span",{children:f.value||(d??"None")}):s.jsxs(s.Fragment,{children:[s.jsx(P,{elementId:l,cssClass:a,containerCssClass:n,invalid:r!=null,min:i,max:x,...f}),s.jsx(W,{errorText:r})]})]}),Pe=({onChange:e,value:r,min:t,max:a,...n})=>{const l=o=>String(o)?.match(Te)?String(o)?.replace(Ee,"0"):Number(o);return s.jsx(Z,{type:"number",onChange:o=>e?.(l(o)),value:r,min:t,max:a,...n})},Ae=({onChange:e,...r})=>s.jsx(Z,{type:"text",onChange:t=>e?.(t),...r}),Le=({fieldTitle:e,optional:r,elementId:t,elementCssClass:a,errorText:n,...l})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(B,{fieldTitle:e,optional:r,htmlFor:t}),s.jsx(K,{textareaId:t,cssClass:a,...l}),s.jsx(W,{errorText:n})]}),Be=({title:e,switchId:r,isOn:t=!1,disabled:a,onChange:n})=>{const l=c("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",a?"pointer-events-none":"",a?t?"bg-controls-disable":"bg-layer-4":t?"bg-accent-primary":"bg-layer-4"),o=j.useCallback(u=>{u.stopPropagation(),n?.(!t)},[n,t]);return s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"checkbox",onChange:o,id:r,disabled:a,className:"invisible w-0 h-0",checked:t}),s.jsx("label",{htmlFor:r,className:l,children:s.jsx("span",{className:c("size-3 rounded-full",a?t?"bg-layer-4":"bg-controls-disable":"bg-controls-enable-primary")})}),e&&s.jsx("span",{className:"pl-2 dial-small text-primary",children:e})]})};var R=(e=>(e.Sm="sm",e.Md="md",e.Lg="lg",e))(R||{});const Oe="z-[52] flex items-center justify-center bg-blackout md:p-4",ze="relative max-h-full rounded bg-layer-3 flex flex-col shadow w-full h-full md:h-auto",Ve="divide-tertiary divide-y",Me="flex flex-row justify-between py-4 px-6 items-center",We={[R.Sm]:"max-w-full md:max-w-[400px]",[R.Md]:"max-w-full md:max-w-[800px]",[R.Lg]:"max-w-full md:max-w-[1200px]"},Q=({open:e=!1,title:r,portalId:t,cssClass:a,overlayClass:n,headingClass:l,dividers:o=!0,children:u,footer:d,onClose:i,size:x=R.Md})=>{const{refs:f,context:h}=p.useFloating({open:e,onOpenChange:C=>{C||i?.(null)}}),m=p.useRole(h,{role:"dialog"}),y=p.useDismiss(h,{outsidePress:!0}),{getFloatingProps:g}=p.useInteractions([m,y]);if(!e)return null;const N=typeof r=="string"?"dial-popup-heading":void 0,I=C=>C?typeof C=="string"?s.jsx("h3",{id:N,className:c("flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",l),children:s.jsx(O,{tooltip:C,children:C})}):C:s.jsx("span",{});return s.jsx(p.FloatingPortal,{id:t,children:s.jsx(p.FloatingOverlay,{className:c(Oe,n),children:s.jsx(p.FloatingFocusManager,{context:h,children:s.jsxs("div",{ref:f.setFloating,...g(),role:"dialog","aria-modal":"true","aria-labelledby":N,className:c(ze,We[x],o&&Ve,a),children:[s.jsxs("div",{className:Me,children:[I(r),s.jsx(X,{ariaLabel:"Close dialog",onClose:C=>i?.(C)})]}),s.jsx("div",{className:"flex-grow overflow-auto",children:u}),d]})})})})};var A=(e=>(e.Info="info",e.Danger="danger",e))(A||{});const _e="flex justify-end gap-2 px-6 py-4",He="text-secondary dial-small-150 px-6 py-4",qe="Cancel",_={[A.Info]:{confirmVariant:w.Primary,cancelVariant:w.Secondary},[A.Danger]:{container:"border-t-4 border-error",confirmVariant:w.Danger,cancelVariant:w.Secondary}},$e=({title:e,description:r,descriptionCssClass:t,open:a=!1,confirmLabel:n,cancelLabel:l=qe,isLoading:o=!1,disableConfirmButton:u=!1,cssClass:d,confirmClassName:i,onClose:x,onConfirm:f,onCancel:h,children:m,dividers:y=!1,variant:g=A.Info,size:N=R.Sm})=>{const I=o?null:s.jsxs("div",{className:_e,children:[s.jsx(F,{variant:w.Secondary,title:l,onClick:()=>h?h():x?.()}),s.jsx(F,{variant:_[g].confirmVariant,cssClass:i,title:n,disable:u,onClick:()=>f()})]}),C=j.useCallback(()=>o?s.jsx("div",{className:"px-6 py-4 h-[120px]",children:s.jsx(H,{size:50})}):m??(r?s.jsx("div",{className:c(He,t),children:r}):null),[m,r,o,t]);return s.jsx(Q,{open:a,title:e,cssClass:c(_[g].container,d),dividers:y,onClose:()=>x?.(),footer:I,size:N,children:C()})},Ge=({onClick:e})=>s.jsx(b.IconEyeOff,{...T,className:"text-primary",onClick:e}),Ue=({onClick:e})=>s.jsx(b.IconEye,{...T,className:"text-primary",onClick:e}),Y=({...e})=>{const[r,t]=j.useState(!1),a=j.useCallback(n=>{t(n)},[]);return s.jsx(P,{type:r?"text":"password",...e,iconAfter:r?s.jsx(Ge,{onClick:()=>a(!1)}):s.jsx(Ue,{onClick:()=>a(!0)})})},Xe=({fieldTitle:e,optional:r,elementCssClass:t,elementId:a,errorText:n,...l})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(B,{fieldTitle:e,optional:r,htmlFor:a}),s.jsx(Y,{cssClass:t,elementId:a,invalid:!!n,...l}),s.jsx(W,{errorText:n})]});var L=(e=>(e.Small="small",e.Base="base",e))(L||{});const Ke={[L.Small]:{textClass:"text-xs px-1",containerClass:"px-[6px] py-1 h-[22px]",iconSize:10,iconStroke:1},[L.Base]:{textClass:"text-sm px-2",containerClass:"px-3 py-2 h-[38px]",iconSize:18,iconStroke:1.5}},Ze=({elementId:e,value:r,placeholder:t,disabled:a,readonly:n,invalid:l,cssClass:o,containerCssClass:u,onChange:d,size:i=L.Base})=>{const[x,f]=j.useState(r||"");j.useEffect(()=>{f(r||"")},[r]);const h=j.useCallback(g=>{f(g),d?.(g)},[d]),m=Ke[i],y=j.useCallback(()=>{h("")},[h]);return s.jsxs("div",{className:c("dial-input flex flex-row items-center justify-between",l&&"dial-input-error",a&&"dial-input-disable",n&&"dial-input-readonly",m.containerClass,u),children:[s.jsx(D,{className:c(a?"text-secondary":"text-primary"),icon:s.jsx(b.IconSearch,{size:m.iconSize,stroke:m.iconStroke})}),s.jsx("input",{id:e,type:"text",autoComplete:"off",placeholder:t,value:x??"",disabled:a,readOnly:n,className:c("border-0 bg-transparent w-full",o,m.textClass),onChange:g=>!n&&h(g.currentTarget.value)}),x&&!n&&!a&&s.jsx(D,{className:"text-primary cursor-pointer",icon:s.jsx(b.IconX,{size:m.iconSize,stroke:m.iconStroke,onClick:y,"aria-label":"Clear search",role:"button"})})]})};exports.AlertVariant=S;exports.ButtonVariant=w;exports.ConfirmationPopupVariant=A;exports.DialAlert=oe;exports.DialButton=F;exports.DialCheckbox=he;exports.DialCloseButton=X;exports.DialCollapsibleSidebar=Se;exports.DialConfirmationPopup=$e;exports.DialErrorText=W;exports.DialFieldLabel=B;exports.DialIcon=D;exports.DialInput=P;exports.DialLoader=H;exports.DialNoDataContent=Ie;exports.DialNumberInputField=Pe;exports.DialPasswordInput=Y;exports.DialPasswordInputField=Xe;exports.DialPopup=Q;exports.DialRadioButton=U;exports.DialRadioGroup=De;exports.DialSearch=Ze;exports.DialSteps=Ce;exports.DialSwitch=Be;exports.DialTextAreaField=Le;exports.DialTextInputField=Ae;exports.DialTextarea=K;exports.DialTooltip=O;exports.PopupSize=R;exports.RadioGroupOrientation=M;exports.SearchSize=L;exports.StepStatus=v;
@@ -208,7 +208,7 @@ const je = {
208
208
  },
209
209
  ...s.getFloatingProps(t),
210
210
  className: c(
211
- "z-[55] whitespace-pre-wrap break-words rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",
211
+ "z-[55] whitespace-pre-wrap break-words rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",
212
212
  s.getFloatingProps(t).className
213
213
  ),
214
214
  children: [
@@ -1,10 +1,6 @@
1
- import { FC, ReactNode } from 'react';
1
+ import { FC } from 'react';
2
2
  import { RadioGroupOrientation } from '../../types/radio-group';
3
- export interface RadioButtonWithContent {
4
- id: string;
5
- name: string;
6
- content?: ReactNode;
7
- }
3
+ import { RadioButtonWithContent } from '../../models/radio';
8
4
  export interface DialRadioGroupProps {
9
5
  fieldTitle?: string;
10
6
  elementId: string;
@@ -31,3 +31,4 @@ export { ConfirmationPopupVariant } from './types/confirmation-popup';
31
31
  export { SearchSize } from './types/search';
32
32
  export { StepStatus } from './models/step';
33
33
  export type { Step } from './models/step';
34
+ export type { RadioButtonWithContent } from './models/radio';
@@ -0,0 +1,6 @@
1
+ import { ReactNode } from 'react';
2
+ export interface RadioButtonWithContent {
3
+ id: string;
4
+ name: string;
5
+ content?: ReactNode;
6
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-ui-kit",
3
- "version": "0.2.0-rc.26",
3
+ "version": "0.2.0-rc.27",
4
4
  "type": "module",
5
5
  "license": "Apache-2.0",
6
6
  "description": "A modern UI kit for building AI DIAL interfaces with React",