@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.
package/dist/dial-ui-kit.cjs.js
CHANGED
|
@@ -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;
|
package/dist/dial-ui-kit.es.js
CHANGED
|
@@ -208,7 +208,7 @@ const je = {
|
|
|
208
208
|
},
|
|
209
209
|
...s.getFloatingProps(t),
|
|
210
210
|
className: c(
|
|
211
|
-
"z-[55] whitespace-pre-wrap
|
|
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
|
|
1
|
+
import { FC } from 'react';
|
|
2
2
|
import { RadioGroupOrientation } from '../../types/radio-group';
|
|
3
|
-
|
|
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;
|
package/dist/src/index.d.ts
CHANGED
|
@@ -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';
|