@udixio/ui-react 2.9.11 → 2.9.13

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## 2.9.13 (2026-01-30)
+
+### 🚀 Features
+
+- **ui-react:** sync component state with updated props via `useEffect` ([086671b](https://github.com/Udixio/UI/commit/086671b))
+
+### 🧱 Updated Dependencies
+
+- Updated @udixio/tailwind to 2.4.12
+- Updated @udixio/theme to 2.1.12
+
+### ❤️ Thank You
+
+- Joël VIGREUX
+
+## 2.9.12 (2026-01-26)
+
+### 🧱 Updated Dependencies
+
+- Updated @udixio/tailwind to 2.4.11
+
 ## 2.9.11 (2026-01-26)
 
 ### 🧱 Updated Dependencies

package/dist/index.cjs

@@ -7,4 +7,4 @@
           0%, 50% { opacity: 1; }
           50.01%, 100% { opacity: 0; }
         }
-      `})]}),C&&d.jsx(Le,{ref:W,className:"opacity-0",draggable:r,editable:!0,editing:!0,onChange:x=>{var E;if(x=x.replace(/(&nbsp;)+/g," ").trim(),console.log("Ghost chip onChange",x,!!x),x)k(x);else if(c.length>0){const I=h.current[c.length-1];(E=I==null?void 0:I.focus)==null||E.call(I)}},onEditCommit:()=>{},onBlur:()=>{o(!1)},onFocus:x=>{o(!0),x.stopPropagation()},children:" "})]})};function Vt({trigger:e=["hover","focus"],isOpen:t,defaultOpen:n=!1,onOpenChange:r,openDelay:s=400,closeDelay:a=150,id:c}={}){const l=i.useId(),u=c??`tooltip-${l}`,o=Array.isArray(e)?e:[e],f=typeof t=="boolean",[y,h]=i.useState(n?"hovered":"hidden"),[m,p]=i.useState(!1),S=i.useRef(null),b=i.useRef(null),k=i.useCallback(()=>{S.current&&(clearTimeout(S.current),S.current=null),b.current&&(clearTimeout(b.current),b.current=null)},[]);i.useEffect(()=>()=>k(),[k]);const g=i.useCallback(_=>{if(f){const P=_!=="hidden";r==null||r(P)}else{h(_);const P=_!=="hidden";r==null||r(P)}},[f,r]),v=f?t?"hovered":"hidden":y,W=v!=="hidden",C=_=>{switch(_){case"hidden":return 0;case"hovered":return 1;case"focused":return 2;case"clicked":return 3;default:return 0}},x=i.useCallback(_=>{k(),!(C(_)<=C(v))&&(S.current=setTimeout(()=>{g(_)},s))},[k,s,v,g]),E=i.useCallback(_=>{k(),b.current=setTimeout(()=>{(!f&&C(y)<=C(_)||f)&&g("hidden")},a)},[k,a,y,f,g]),I=i.useCallback(()=>{o.includes("hover")&&x("hovered")},[o,x]),M=i.useCallback(()=>{o.includes("hover")&&(v==="focused"||v==="clicked"||m||E("hovered"))},[o,v,m,E]),D=i.useCallback(()=>{o.includes("focus")&&(k(),g("focused"))},[o,k,g]),L=i.useCallback(()=>{if(o.includes("focus")&&v!=="clicked"){if(o.includes("hover")&&m){g("hovered");return}E("focused")}},[o,v,m,E,g]),j=i.useCallback(()=>{o.includes("click")&&(k(),g(v==="clicked"?"hidden":"clicked"))},[o,v,k,g]),N=i.useCallback(_=>{_.key==="Escape"&&W&&(k(),g("hidden"),_.preventDefault())},[W,k,g]),H=i.useCallback(()=>{p(!0),k()},[k]),X=i.useCallback(()=>{p(!1),o.includes("hover")&&v==="hovered"&&E("hovered")},[o,v,E]);return{triggerProps:{"aria-describedby":W?u:void 0,onMouseEnter:I,onMouseLeave:M,onFocus:D,onBlur:L,onClick:j,onKeyDown:N},tooltipProps:{id:u,role:"tooltip","aria-hidden":!W,onMouseEnter:H,onMouseLeave:X},isOpen:W,state:v}}function _t({targetRef:e,position:t,variant:n="plain",isOpen:r}){const[s,a]=i.useState(t??"bottom");return i.useLayoutEffect(()=>{if(t){a(t);return}if(!r||!e.current||typeof window>"u")return;const l=e.current.getBoundingClientRect(),u=window.innerWidth,o=window.innerHeight,f=l.left/u,y=l.top/o;let h;n==="plain"?f<1/3?h="right":f>2/3?h="left":h=y>.5?"top":"bottom":f<.5&&y<.5?h="bottom-right":f>=.5&&y<.5?h="bottom-left":f>=.5&&y>=.5?h="top-left":h="top-right",a(h)},[r,e,t,n]),{resolvedPosition:s}}const $e=({variant:e="plain",buttons:t,className:n,children:r,title:s,text:a,content:c,position:l,targetRef:u,ref:o,trigger:f=["hover","focus"],transition:y,openDelay:h=400,closeDelay:m=150,isOpen:p,defaultOpen:S=!1,onOpenChange:b,id:k,...g})=>{if(y={duration:.3,...y},!r&&!u)throw new Error("Tooltip must have a child or a targetRef");t&&!Array.isArray(t)&&(t=[t]);const v=i.useRef(null),W=u||v,{triggerProps:C,tooltipProps:x,isOpen:E}=Vt({trigger:f,isOpen:p,defaultOpen:S,onOpenChange:b,openDelay:h,closeDelay:m,id:k}),{resolvedPosition:I}=_t({targetRef:W,position:l,variant:e,isOpen:E}),M=!u&&i.isValidElement(r)?i.cloneElement(r,{ref:v,...C,onMouseEnter:j=>{var N,H;C.onMouseEnter(),(H=(N=r.props)==null?void 0:N.onMouseEnter)==null||H.call(N,j)},onMouseLeave:j=>{var N,H;C.onMouseLeave(),(H=(N=r.props)==null?void 0:N.onMouseLeave)==null||H.call(N,j)},onFocus:j=>{var N,H;C.onFocus(),(H=(N=r.props)==null?void 0:N.onFocus)==null||H.call(N,j)},onBlur:j=>{var N,H;C.onBlur(),(H=(N=r.props)==null?void 0:N.onBlur)==null||H.call(N,j)},onClick:j=>{var N,H;C.onClick(),(H=(N=r.props)==null?void 0:N.onClick)==null||H.call(N,j)},onKeyDown:j=>{var N,H;C.onKeyDown(j),(H=(N=r.props)==null?void 0:N.onKeyDown)==null||H.call(N,j)}}):r;i.useEffect(()=>{if(!u)return;const j=u.current;if(!j)return;const N=()=>C.onMouseEnter(),H=()=>C.onMouseLeave(),X=()=>C.onFocus(),_=()=>C.onBlur(),P=()=>C.onClick(),F=U=>C.onKeyDown(U);return j.addEventListener("mouseenter",N),j.addEventListener("mouseleave",H),j.addEventListener("focus",X,!0),j.addEventListener("blur",_,!0),j.addEventListener("click",P),j.addEventListener("keydown",F),C["aria-describedby"]?j.setAttribute("aria-describedby",C["aria-describedby"]):j.removeAttribute("aria-describedby"),()=>{j.removeEventListener("mouseenter",N),j.removeEventListener("mouseleave",H),j.removeEventListener("focus",X,!0),j.removeEventListener("blur",_,!0),j.removeEventListener("click",P),j.removeEventListener("keydown",F)}},[u,C]);const D=Dt({variant:e,buttons:t,className:n,title:s,text:a,position:I,trigger:f,targetRef:u,children:r}),L={open:{opacity:1,height:"auto"},close:{opacity:0,height:16}};return d.jsxs(d.Fragment,{children:[M,d.jsx(O.AnimatePresence,{children:E&&d.jsx(Ht,{targetRef:W,children:d.jsx(O.motion.div,{initial:"close",variants:L,animate:"open",transition:{duration:y.duration},exit:"close",className:D.toolTip,...g,...x,children:d.jsx("div",{className:D.container,children:c?d.jsx("div",{className:D.content,children:c}):d.jsxs(d.Fragment,{children:[s&&d.jsx("div",{className:D.subHead,children:s}),a&&d.jsx("div",{className:D.supportingText,children:a}),t&&d.jsx("div",{className:D.actions,children:Array.isArray(t)&&t.map((j,N)=>d.jsx(Ce,{size:"small",variant:"text",...j},N))})]})})})})})]})},ve=({className:e,label:t,variant:n="primary",size:r="medium",href:s,type:a,icon:c,extended:l=!1,ref:u,transition:o,children:f,...y})=>{if(f&&(t=f),!t)throw new Error("FAB component requires either a label prop or children content");const h=s?"a":"button",m=at({href:s,icon:c,extended:l,label:t,size:r,variant:n,className:e,transition:o,children:t});o={duration:.3,...o};const p=i.useRef(null),S=u||p,b={visible:{width:"auto",marginLeft:12,opacity:1,transition:{...o,opacity:{duration:o.duration/2,delay:o.duration-o.duration/2}}},hidden:{width:0,marginLeft:0,opacity:0,transition:{...o,marginLeft:{duration:o.duration/2,delay:o.duration-o.duration/2}}}};return d.jsxs(h,{...y,ref:S,href:s,"aria-label":l?void 0:t,className:m.fab,children:[d.jsx($e,{trigger:l?null:void 0,text:t,targetRef:S}),d.jsx(ce,{style:{transition:o.duration+"s"},className:m.stateLayer,colorName:w({"on-primary":n=="primary","on-secondary":n=="secondary","on-tertiary":n=="tertiary","on-primary-container":n=="primaryContainer","on-secondary-container":n=="secondaryContainer","on-tertiary-container":n=="tertiaryContainer"}),stateClassName:"state-ripple-group-[fab]"}),d.jsx(le,{icon:c,className:m.icon}),d.jsx(O.AnimatePresence,{children:l&&d.jsx(O.motion.span,{variants:b,initial:"hidden",animate:"visible",exit:"hidden",className:m.label,children:t})})]})},ye=({variant:e="standard",href:t,disabled:n=!1,title:r,label:s,onToggle:a,activated:c=!1,onClick:l,icon:u,size:o="medium",iconSelected:f,className:y,ref:h,width:m="default",shape:p="rounded",allowShapeTransformation:S=!0,transition:b,children:k,...g})=>{if(k&&(s=k),!s)throw new Error("IconButton component requires either a label prop or children content to provide an accessible aria-label");r||(r=s);const[v,W]=i.useState(c),C=D=>{n&&D.preventDefault(),a?(W(!v),a(!v)):l&&l(D)};i.useEffect(()=>{W(c)},[c]);const x=t?"a":"button",E=ft({transition:b,shape:p,allowShapeTransformation:S,width:m,href:t,activated:v,label:s,iconSelected:f,isActive:v,onToggle:a,disabled:n,icon:u,variant:e,className:y,size:o,children:s,...g}),I=i.useRef(null),M=h||I;return b={duration:.3,...b},d.jsxs(x,{disabled:n,href:t,style:{transition:b.duration+"s"},className:E.iconButton,"aria-label":s,...g,title:void 0,onClick:C,ref:M,children:[d.jsx($e,{targetRef:M,trigger:n?null:void 0,text:r}),d.jsx("div",{className:E.touchTarget}),d.jsx(ce,{style:{transition:b.duration+"s"},className:E.stateLayer,colorName:w(e==="standard"&&{"on-surface-variant":!v,"on-primary":v},e==="filled"&&{"on-surface-variant":!v&&!!a,"on-primary":v||!a},e==="tonal"&&{"on-secondary":v&&!!a,"on-secondary-container":!v||!a},e==="outlined"&&{"inverse-on-surface":v&&!!a,"on-surface-variant":!v||!a}),stateClassName:"state-ripple-group-[icon-button]"}),u&&d.jsx(le,{icon:u,className:E.icon})]})},ts=({className:e,label:t,variant:n="primary",size:r="medium",href:s,icon:a,extended:c=!1,ref:l,transition:u,children:o,open:f,defaultOpen:y=!1,onOpenChange:h,...m})=>{u={duration:.3,ease:"easeInOut",...u};const p=i.useRef(null),S=l||p,b=typeof f=="boolean",[k,g]=i.useState(y),v=b?f:k,W=L=>{b||g(L),h==null||h(L)},C=i.Children.toArray(o).filter(L=>i.isValidElement(L)&&L.type===Ce),x=ut({href:s,icon:a,extended:c,label:t,size:r,variant:n,className:e,transition:u,children:t,open:v}),E=O.motion.create(ve),I=O.motion.create(ye),M=L=>d.jsx(E,{icon:a,extended:c,label:t,variant:n+"Container",size:r,className:x.fab+" "+(e??""),"aria-expanded":v,onClick:()=>W(!0),style:{transition:"border-radius 0.3s ease-in-out"},transition:{duration:u.duration,ease:"easeInOut",borderRadius:{duration:u.duration,ease:"easeInOut"},background:{duration:u.duration,ease:"easeInOut"},...u},...L}),[D]=i.useState(pe());return d.jsxs("div",{className:x.fabMenu,ref:S,...m,children:[d.jsx(O.AnimatePresence,{children:v&&d.jsx("div",{className:x.actions,role:"menu","aria-hidden":!v,children:(()=>{const L=C.length;return C.map((j,N)=>{j.props;const H=L-1-N,X=((u==null?void 0:u.delay)??0)+H*.06,_={open:{overflow:"visible",opacity:1,width:"auto",transition:{...u,delay:X,opacity:{delay:(u==null?void 0:u.duration)/2+X}}},close:{overflow:"hidden",opacity:0,width:0,transition:{...u,delay:X,opacity:{duration:(u==null?void 0:u.duration)/1.5}}}};return d.jsx(O.motion.div,{initial:"close",animate:"open",variants:_,transition:u,exit:"close",children:i.cloneElement(j,{key:N,shape:"rounded",variant:"filled",className:()=>({button:w("max-w-full overflow-hidden",{"px-0":!v,"bg-primary-container text-on-primary-container ":n==="primary","bg-secondary-container text-on-secondary-container":n==="secondary","bg-tertiary-container text-on-tertiary-container":n==="tertiary"}),stateLayer:w({"state-on-primary-container":n==="primary","state-on-secondary-container":n==="secondary","state-on-tertiary-container":n==="tertiary"})})})})})})()})}),M({className:"invisible pointer-events-none"}),d.jsxs("div",{className:"absolute right-0 top-0",children:[!v&&M({className:"",layout:!0,layoutId:"fab-menu"+D}),v&&d.jsx(d.Fragment,{children:d.jsx(I,{layout:!0,layoutId:"fab-menu"+D,variant:"filled",className:()=>({iconButton:w("",{"bg-primary text-on-primary":n==="primary","bg-secondary text-on-secondary":n==="secondary","bg-tertiary text-on-tertiary":n==="tertiary"}),stateLayer:w({"[--default-color:var(--color-on-primary)]":n==="primary","[--default-color:var(--color-on-secondary)]":n==="secondary","[--default-color:var(--color-on-tertiary)]":n==="tertiary"})}),style:{transition:"border-radius 0.3s ease-in-out"},transition:{duration:u.duration,ease:"easeInOut",borderRadius:{duration:u.duration,ease:"easeInOut"},background:{duration:u.duration,ease:"easeInOut"},...u},icon:zn,onClick:()=>W(!1),children:"Close"})})]})]})},ns=({className:e,valueFormatter:t,step:n=10,name:r,value:s=0,min:a=0,max:c=100,marks:l=[{value:0,label:"0"},{value:100,label:"100"}],ref:u,onChange:o,...f})=>{const y=P=>{const F=m(),U=h();return P===1/0?100:P===-1/0?0:(P-F)/(U-F)*100},h=(P=!1)=>P?c:c==1/0?l[(l==null?void 0:l.length)-1].value:c,m=(P=!1)=>P?a:a==-1/0?l[0].value:a,p=P=>{const F=m(!1);return(h(!1)-F)*P/100+F},[S,b]=i.useState(!1),k=i.useRef(null),g=u||k,[v,W]=i.useState(s),[C,x]=i.useState(y(s)),[E,I]=i.useState(!1),M=P=>{I(!0),b(!0),j(P)},D=()=>{I(!1),b(!1)};i.useEffect(()=>(E?(window.addEventListener("mouseup",D),window.addEventListener("mousemove",j),window.addEventListener("touchend",D),window.addEventListener("touchmove",j)):(window.removeEventListener("mouseup",D),window.removeEventListener("mousemove",j),window.removeEventListener("touchend",D),window.removeEventListener("touchmove",j)),()=>{window.removeEventListener("mouseup",D),window.removeEventListener("mousemove",j),window.removeEventListener("touchend",D),window.removeEventListener("touchmove",j)}),[E]);const L=yt({className:e,isChanging:S,marks:l,max:c,min:a,name:r,step:n,value:v,valueFormatter:t,onChange:o}),j=P=>{const F=g==null?void 0:g.current;if(F){const U=F.getBoundingClientRect().left,re=((P.type==="touchmove"||P.type==="touchstart"?P.touches[0].clientX:P.clientX)-U)/F.offsetWidth*100;N({percent:re})}},N=({percent:P,value:F})=>{if(P){if(P>=100){W(h(!0)),x(100);return}if(P<=0){W(m(!0)),x(0);return}F=p(P),F==m()&&(F=m(!0)),F==h()&&(F=h(!0))}else if(F!=null){if(F>=h()){W(h(!0)),x(100);return}if(F<=m()){W(m(!0)),x(0);return}P=y(F)}else return;n!=null?F=Math.round((F-m())/n)*n+m():l&&(F=l.reduce((U,G,re)=>{let ie=G.value===1/0?h():G.value===-1/0?m():G.value,B=U.value===1/0?h():U.value===-1/0?m():U.value;return ie=Math.abs(ie-F),B=Math.abs(B-F),ie<B?G:U}).value),F>=h()&&(F=h(!0)),F<=m()&&(F=m(!0)),P=y(F),W(F),x(P),o&&o(F)},[H,X]=i.useState(0);i.useEffect(()=>{const P=()=>{g.current&&X(g.current.offsetWidth)};return P(),window.addEventListener("resize",P),()=>{window.removeEventListener("resize",P)}},[]);const _=P=>{switch(P.key){case"ArrowRight":if(n)N({value:v+n});else if(l){const F=l.find(U=>U.value>v);F&&N({value:F.value})}break;case"ArrowLeft":if(n)N({value:v-n});else if(l){const F=l.slice(0).reverse().find((U,G,re)=>v===1/0?G===1:U.value<v);F&&N({value:F.value})}break;default:return}};return d.jsxs("div",{tabIndex:0,onKeyDown:_,role:"slider","aria-valuemin":m(!0),"aria-valuemax":h(!0),"aria-valuenow":v,"aria-valuetext":v.toString(),className:L.slider,onMouseDown:M,onClick:j,ref:g,onTouchStart:M,onDragStart:P=>P.preventDefault(),...f,children:[d.jsx("input",{type:"hidden",name:r,value:v}),d.jsx("div",{className:L.activeTrack,style:{flex:C/100}}),d.jsx("div",{className:L.handle,children:d.jsx(O.AnimatePresence,{children:S&&d.jsx(O.motion.div,{className:L.valueIndicator,initial:"hidden",animate:"visible",exit:"hidden",style:{translate:"-50%",transformOrigin:"center bottom",textWrap:"nowrap"},variants:{visible:{opacity:1,scale:1},hidden:{opacity:1,scale:0}},transition:{duration:.1},children:t?t(v):v})})}),d.jsx("div",{className:L.inactiveTrack,style:{flex:1-C/100}}),d.jsx("div",{className:"w-[calc(100%-12px)] h-full absolute -translate-x-1/2 transform left-1/2",children:l&&l.map((P,F)=>{let U=null;const G=(S?9:10)/H*100,re=y(P.value);return re<=C-G?U=!0:re>=C+G&&(U=!1),d.jsx("div",{className:w(L.dot,{"bg-primary-container":U!=null&&U,"bg-primary":U!=null&&!U}),style:{left:`${y(P.value)}%`}},F)})})]})},ss=({variant:e="standard",className:t,children:n,title:r,position:s="right",extended:a,divider:c,onExtendedChange:l,closeIcon:u=me,transition:o,...f})=>{o={duration:.3,...o};const[y,h]=i.useState(a??!0),m=pt({transition:o,title:r,position:s,closeIcon:u,className:t,children:n,onExtendedChange:l,divider:c,isExtended:y,extended:y,variant:e});i.useEffect(()=>{l==null||l(y??!1)},[y]),i.useEffect(()=>{a!=null&&h(a)},[a]);const p={close:{width:0},open:{width:"auto"}},S=()=>d.jsxs(d.Fragment,{children:[d.jsx(O.AnimatePresence,{children:e=="modal"&&y&&d.jsx(O.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:o,onClick:()=>h(!1),className:m.overlay})}),d.jsx(O.AnimatePresence,{children:y&&d.jsxs("div",{...f,className:m.sideSheet,style:{transition:o.duration+"s"},children:[d.jsxs(O.motion.div,{variants:p,initial:a===!1?"open":"close",animate:"open",exit:"close",className:m.container,children:[d.jsxs("div",{className:m.header,children:[r&&d.jsx("p",{className:m.title,children:r}),d.jsx(ye,{size:"small",label:"close",icon:u,onClick:()=>h(!1),className:m.closeButton})]}),d.jsx("div",{className:m.content,style:{transition:o.duration+"s"},children:n})]}),(c==null&&e=="standard"?!0:c)&&d.jsx(De,{className:m.divider,orientation:"vertical"})]})})]});return e=="modal"?qe.createPortal(S(),document.body):S()},rs=({message:e,className:t,duration:n,closeIcon:r=me,onClose:s,...a})=>{const[c,l]=i.useState(!0),u=vt({className:t,closeIcon:r,duration:n,isVisible:c,onClose:s,message:e});i.useEffect(()=>{n&&setTimeout(()=>{o()},n)},[n]);const o=()=>{l(!1),s==null||s()};return d.jsx(O.AnimatePresence,{children:c&&d.jsx(O.motion.div,{initial:{height:0},animate:{height:"auto"},exit:{height:0},transition:{duration:.1},className:u.snackbar,...a,children:d.jsxs("div",{className:u.container,children:[d.jsx("p",{className:u.supportingText,children:e}),d.jsx(ye,{onClick:()=>o(),className:u.icon,icon:r,label:"close the snackbar"})]})})})},os=({selected:e=!1,className:t,activeIcon:n,disabled:r=!1,inactiveIcon:s,onChange:a,onClick:c,onKeyDown:l,ref:u,...o})=>{const[f,y]=i.useState(e),h=g=>{r||(p(),c&&c(g))},m=g=>{r||((g.key===" "||g.key==="Enter")&&(g.preventDefault(),p()),l&&l(g))},p=()=>{y(!f),a==null||a(!f)},S=gt({className:t,isSelected:f,activeIcon:n,inactiveIcon:s,disabled:r,selected:f,onChange:a}),b=i.useRef(null),k=u||b;return d.jsxs(O.motion.div,{role:"switch","aria-checked":f,tabIndex:r?-1:0,onKeyDown:m,onClick:h,ref:k,className:S.switch,...o,children:[d.jsx("input",{type:"hidden",value:f?"1":"0"}),d.jsxs(O.motion.div,{layout:!0,style:{translate:f?"50%":"-50%"},transition:{type:"spring",stiffness:700,damping:30},className:S.handleContainer,children:[d.jsx("div",{className:S.handle,children:(f?n:s)&&d.jsx(le,{className:S.icon,icon:f?n:s})}),d.jsx("div",{className:S.handleStateLayer})]})]})},qt=({className:e,onClick:t,label:n,variant:r="primary",href:s,icon:a,selectedTab:c,setSelectedTab:l,tabsId:u,index:o,onTabSelected:f,scrollable:y=!1,selected:h=!1,children:m,ref:p,...S})=>{const b=i.useRef(null),k=p||b,g=n??(typeof m=="string"?m:void 0),[v,W]=i.useState(h);i.useEffect(()=>{h&&c==null?W(!0):W(c==o&&o!=null)},[c]),i.useEffect(()=>{c==o&&f&&f({ref:k,index:o||0,label:g,icon:a})},[c]);const C=s?"a":"button",x=I=>{l&&l(o??null),t&&t(I)},E=St({className:e,onTabSelected:f,scrollable:y,selectedTab:c,index:o,tabsId:u,selected:v,variant:r,icon:a,label:g,isSelected:v,setSelectedTab:l,href:s});return d.jsxs(C,{...S,role:"tab","aria-selected":v,ref:k,href:s,className:E.tab,onClick:x,...S,children:[d.jsx(ce,{style:{transition:.3+"s"},className:E.stateLayer,colorName:r==="primary"&&v?"primary":"on-surface",stateClassName:"state-ripple-group-[tab]"}),d.jsxs("span",{className:E.content,children:[a&&d.jsx(le,{icon:a,className:E.icon}),d.jsx("span",{className:E.label,children:g}),v&&d.jsx(O.motion.span,{layoutId:`underline-${u}`,className:E.underline,transition:{duration:.3}})]})]})},We=i.createContext(null),is=({variant:e="primary",onTabSelected:t,children:n,className:r,selectedTab:s,setSelectedTab:a,scrollable:c=!1})=>{const l=i.useContext(We),[u,o]=i.useState(null);let f;s===0||s!=null?f=s:l?f=l.selectedTab:f=u;const y=a??(l==null?void 0:l.setSelectedTab)??o,h=i.Children.toArray(n).filter(k=>i.isValidElement(k)&&k.type===qt),m=i.useRef(null),p=k=>{if(t==null||t(k),c){const g=m.current,v=k.ref.current;if(g&&v){const W=v.offsetLeft+v.offsetWidth/2-g.offsetWidth/2;g.scrollTo({left:W,behavior:"smooth"})}}},S=i.useMemo(()=>(l==null?void 0:l.tabsId)??pe(),[l==null?void 0:l.tabsId]),b=Nt({children:n,onTabSelected:t,scrollable:c,selectedTab:f,setSelectedTab:y,className:r,variant:e});return d.jsx("div",{ref:m,role:"tablist",className:b.tabs,children:h.map((k,g)=>i.cloneElement(k,{key:g,index:g,variant:e,selectedTab:f,setSelectedTab:y,tabsId:S,onTabSelected:p,scrollable:c}))})},ls=({children:e,selectedTab:t,setSelectedTab:n,defaultTab:r=0})=>{const[s,a]=i.useState(r),c=i.useRef(null),l=t!==void 0?t:s,u=n??a,o=c.current!==null&&l!==null?l>c.current?1:-1:0;l!==c.current&&(c.current=l);const f=i.useMemo(()=>pe(),[]),y=i.useMemo(()=>({selectedTab:l,setSelectedTab:u,previousTab:c.current,direction:o,tabsId:f}),[l,u,o,f]);return d.jsx(We.Provider,{value:y,children:e})},Xt=({children:e,className:t,isSelected:n=!1})=>{const r=It({children:e,className:t,isSelected:n});return d.jsx("div",{className:r.tabPanel,children:e})},as=({children:e,className:t})=>{const n=i.useContext(We);if(!n)return console.warn("TabPanels must be used within a TabGroup"),null;const{selectedTab:r,direction:s,tabsId:a}=n,c=i.Children.toArray(e).filter(u=>i.isValidElement(u)&&u.type===Xt),l=kt({children:e,className:t});return d.jsx("div",{className:l.tabPanels,children:d.jsx(O.AnimatePresence,{initial:!1,custom:s,mode:"popLayout",children:c.map((u,o)=>r===o&&d.jsx(O.motion.div,{custom:s,variants:{enter:f=>({x:f*100+"%",opacity:1}),center:{x:0,opacity:1},exit:f=>({x:f*-100+"%",opacity:1})},initial:"enter",animate:"center",exit:"exit",transition:{type:"spring",stiffness:400,damping:40},role:"tabpanel","aria-labelledby":`tab-${a}-${o}`,children:i.cloneElement(u,{isSelected:!0})},o))})})},cs=({variant:e="filled",disabled:t=!1,errorText:n,placeholder:r,suffix:s,name:a,label:c,className:l,supportingText:u,trailingIcon:o,leadingIcon:f,type:y="text",textLine:h="singleLine",autoComplete:m="on",onChange:p,value:S,showSupportingText:b=!1,...k})=>{const[g,v]=i.useState(S??""),[W,C]=i.useState(!1),[x,E]=i.useState(!1),[I,M]=i.useState(b);i.useEffect(()=>{v(S??"")},[S]),i.useEffect(()=>{n!=null&&n.length?E(!0):E(!1)},[n]),i.useEffect(()=>{b?M(b):u!=null&&u.length?M(!0):M(!1)},[I,u]),i.useEffect(()=>{W&&E(!1)},[W]);const D=i.useRef(null),L=()=>{D.current&&!W&&D.current.focus()},j=()=>{C(!0)},N=U=>{const G=U.target.value;v(G),E(!1),typeof p=="function"&&p(G)},H=()=>{C(!1)},X=Rt({showSupportingText:I,isFocused:W,showErrorIcon:x,disabled:t,name:a,label:c,autoComplete:m,className:l,onChange:p,placeholder:r,supportingText:u,type:y,leadingIcon:f,trailingIcon:o,variant:e,errorText:n,value:g,suffix:s,textLine:h}),[_]=i.useState(pe());let P,F;switch(h){case"multiLine":F=Jt,P={};break;case"textAreas":F="textarea",P={};break;case"singleLine":default:F="input",P={type:y};break}return d.jsxs("div",{className:X.textField,...k,children:[d.jsxs("fieldset",{onClick:L,className:X.content,children:[d.jsx("div",{className:X.stateLayer}),f&&d.jsx("div",{className:X.leadingIcon,children:i.isValidElement(f)?f:d.jsx(le,{className:"w-5 h-5",icon:f})}),!(!W&&!g.length||e=="filled")&&d.jsx(O.motion.legend,{variants:{hidden:{width:0,padding:0},visible:{width:"auto",padding:"0 8px"}},initial:"hidden",animate:!W&&!g.length?"hidden":"visible",className:"max-w-full ml-2 px-2 text-body-small h-0",transition:{duration:.2},children:d.jsx("span",{className:"transform inline-flex -translate-y-1/2",children:d.jsx(O.motion.span,{className:X.label,transition:{duration:.3},layoutId:_,children:c})})}),d.jsxs("div",{className:"flex-1 relative",children:[(!W&&!g.length||e=="filled")&&d.jsx(O.motion.label,{htmlFor:a,className:w("absolute left-4  transition-all duration-300",{"text-body-small top-2":e=="filled"&&!(!W&&!g.length),"text-body-large top-1/2 transform -translate-y-1/2":!(e=="filled"&&!(!W&&!g.length))}),transition:{duration:.3},children:d.jsx(O.motion.span,{className:X.label,transition:{duration:.3},layoutId:e=="outlined"?_:void 0,children:c})}),d.jsx(F,{ref:D,value:g,onChange:N,className:X.input,id:a,name:a,placeholder:W?r??void 0:"",onFocus:j,onBlur:H,disabled:t,autoComplete:m,"aria-invalid":!!(n!=null&&n.length),"aria-label":c,...P})]}),d.jsx("div",{className:X.activeIndicator}),!x&&d.jsxs(d.Fragment,{children:[o&&d.jsx("div",{onClick:U=>{U.stopPropagation()},className:X.trailingIcon,children:i.isValidElement(o)?o:d.jsx(le,{className:"h-5",icon:o})}),!o&&s&&d.jsx("span",{className:X.suffix,children:s})]}),x&&d.jsx("div",{className:w(X.trailingIcon,{" absolute right-0":!o}),children:d.jsx(le,{className:"h-5 text-error",icon:Un})})]}),I&&d.jsx("p",{className:X.supportingText,children:n!=null&&n.length?n:u!=null&&u.length?u:" "})]})},us=({isSelected:e,icon:t,label:n,variant:r})=>({navigationRailItem:w(" group/navigation-rail-item flex flex-col  pt-1 pb-1.5 cursor-pointer",{"text-on-surface-variant":!e,"text-on-secondary-container":e,"gap-2  h-[68px]":r=="vertical","gap-0  h-[66px]":r=="horizontal"}),container:w(" w-fit flex justify-center  relative rounded-full items-center mx-5",{"bg-secondary-container overflow-hidden":e,"gap-2 ":r=="horizontal","gap-0 ":r=="vertical","p-4":!n},n&&["px-4",{"py-1 ":r=="vertical","py-4 ":r=="horizontal"}]),stateLayer:w("rounded-full"),icon:w("size-6 flex"),label:w("w-fit mx-auto text-nowrap",{"text-label-large ":r=="horizontal","text-label-medium":r=="vertical"})}),ds=J("navigationRailItem",us),Ut=({label:e})=>d.jsx("div",{className:" h-9 flex items-center mx-9 mt-3",children:d.jsx("p",{className:"text-label-large text-on-surface-variant",children:e})}),Yt=({className:e,onClick:t,label:n,variant:r="vertical",href:s,icon:a,selectedItem:c,setSelectedItem:l,index:u,onItemSelected:o,selected:f=!1,ref:y,transition:h,isExtended:m,iconSelected:p,style:S,extendedOnly:b,children:k,...g})=>{k&&(n=k);const v=i.useRef(null),W=y||v,[C,x]=i.useState(f);i.useEffect(()=>{f&&c==null?x(!0):x(c==u&&u!=null)},[c]),i.useEffect(()=>{c==u&&o&&o({ref:W,index:u||0,label:n,icon:a})},[c]);const E=s?"a":"button",I=D=>{l&&l(u??null),t&&t(D)},M=ds({isExtended:m,extendedOnly:b,className:e,onItemSelected:o,selectedItem:c,index:u,transition:h,selected:C,variant:r,icon:a,label:n,isSelected:C,setSelectedItem:l,href:s,children:n,iconSelected:p});return h={duration:.3,...h},b&&!m?null:d.jsxs(E,{...g,role:"tab","aria-selected":C,ref:W,href:s,className:M.navigationRailItem,onClick:I,style:{transition:h.duration+"s",...S},children:[d.jsxs(O.motion.div,{style:{transition:r=="horizontal"?h.duration+`s, gap ${h.duration/2}s ${h.duration-h.duration/2}s`:h.duration+`s, gap ${h.duration/3}s ${h.duration-h.duration/3}s`},transition:h,className:M.container,children:[d.jsx(ce,{style:{transition:h.duration+"s"},className:M.stateLayer,colorName:w({"on-surface":!C,"on-secondary-container":C}),stateClassName:"state-ripple-group-[navigation-rail-item]"}),a&&d.jsx(le,{icon:C?p:a,className:M.icon}),d.jsx(O.AnimatePresence,{children:r=="horizontal"&&(()=>{const D={width:0,opacity:0,transition:{...h}},L={width:"auto",opacity:1,transition:{...h,opacity:{duration:h.duration/2,delay:h.duration-h.duration/2}}};return d.jsx(O.motion.span,{initial:D,animate:L,exit:D,className:M.label,children:n})})()})]}),d.jsx(O.AnimatePresence,{children:r=="vertical"&&(()=>{const D={height:0,opacity:0,transition:{...h,opacity:{duration:0}}},L={height:"auto",opacity:1,transition:{...h,opacity:{duration:h.duration/3,delay:h.duration-h.duration/3}}};return d.jsx(O.motion.span,{initial:L,animate:L,exit:D,className:M.label,transition:h,children:n})})()})]})},fs=({isExtended:e,alignment:t})=>({navigationRail:w("flex flex-col  left-0 h-full top-0 pt-11",{"w-fit max-w-24":!e,"w-fit min-w-[220px] max-w-[360px]":e,"justify-between":t=="middle","justify-start":t=="top"}),header:w("flex flex-col gap-1 items-start"),menuIcon:"mx-5",segments:w(" flex flex-col  overflow-auto min-w-full mt-10",{"w-full":!e,"w-fit  items-start":e})}),hs=J("navigationRail",fs),ms=({variant:e="standard",onItemSelected:t,children:n,className:r,selectedItem:s,extended:a,alignment:c="top",menu:l={closed:{icon:Kn,label:"Open menu"},opened:{icon:me,label:"Close menu"}},style:u,onExtendedChange:o,transition:f,setSelectedItem:y})=>{const[h,m]=i.useState(null),[p,S]=i.useState(a);let b;s==0||s!=null?b=s:b=h;const k=y||m,g=i.useRef(null),v=M=>{t==null||t(M)};function W(M){const D=[];return i.Children.forEach(M,L=>{i.isValidElement(L)&&L.type===i.Fragment?D.push(...W(L.props.children)):D.push(L)}),D}const C=W(n),x=C.filter(M=>i.isValidElement(M)&&M.type===ve),E=hs({children:n,onItemSelected:t,selectedItem:b,setSelectedItem:k,className:r,variant:e,extended:p,isExtended:p,alignment:c,menu:l,transition:f,onExtendedChange:o});f={duration:.3,...f};const I=i.useRef(!1);return I.current=!1,i.useEffect(()=>{o==null||o(p??!1)},[p]),d.jsxs("div",{style:{transition:f.duration+"s",...u},ref:g,className:E.navigationRail,children:[d.jsxs("div",{className:E.header,children:[d.jsx(ye,{onClick:()=>S(!p),label:p?l==null?void 0:l.opened.label:l==null?void 0:l.closed.label,className:E.menuIcon,icon:p?l.opened.icon:l==null?void 0:l.closed.icon}),x.length>0&&i.cloneElement(x[0],{transition:f,isExtended:p,className:"!shadow-none mx-5 "+x[0].props.className})]}),d.jsx("div",{className:E.segments,children:(()=>{let M=0;return C.map(D=>i.isValidElement(D)&&D.type===Yt?i.cloneElement(D,{key:M,index:M++,variant:p?"horizontal":"vertical",selectedItem:b,setSelectedItem:k,onItemSelected:v,transition:f,extendedOnly:I.current,isExtended:p}):i.isValidElement(D)&&D.type===ve?null:i.isValidElement(D)&&D.type===Ut?(I.current=!0,p?i.cloneElement(D,{}):null):D)})()}),d.jsx("div",{className:"flex-1 max-h-[160px]"})]})};function ps(e){return xe.defineConfig({variant:xe.Variants.Udixio,...e,plugins:[new xe.FontPlugin(e),new Xe.TailwindPlugin(e)]})}exports.AnimateOnScrollInit=On;exports.Button=Ce;exports.Card=qn;exports.Carousel=Xn;exports.CarouselItem=Ot;exports.Chip=Le;exports.Chips=es;exports.CustomScroll=Pt;exports.Divider=De;exports.Fab=ve;exports.FabMenu=ts;exports.Icon=le;exports.IconButton=ye;exports.NavigationRail=ms;exports.NavigationRailItem=Yt;exports.NavigationRailSection=Ut;exports.ProgressIndicator=$t;exports.RippleEffect=Wt;exports.SideSheet=ss;exports.Slider=ns;exports.SmoothScroll=Dn;exports.Snackbar=rs;exports.State=ce;exports.Switch=os;exports.SyncedFixedWrapper=Ht;exports.Tab=qt;exports.TabGroup=ls;exports.TabPanel=Xt;exports.TabPanels=as;exports.Tabs=is;exports.TextField=cs;exports.ThemeProvider=An;exports.Tooltip=$e;exports.animateOnScroll=Vn;exports.buttonStyle=en;exports.cardStyle=tn;exports.carouselItemConfig=ke;exports.carouselItemStyle=nn;exports.carouselStyle=sn;exports.chipStyle=rn;exports.chipsStyle=on;exports.classNames=w;exports.classnames=Ye;exports.createUseClassNames=J;exports.customScrollStyle=At;exports.defaultClassNames=Z;exports.defineConfig=ps;exports.dividerStyle=ln;exports.fabMenuStyle=cn;exports.fabStyle=an;exports.getClassNames=we;exports.iconButtonStyle=un;exports.initAnimateOnScroll=Re;exports.normalize=de;exports.progressIndicatorStyle=dn;exports.sideSheetConfig=je;exports.sideSheetStyle=pt;exports.sliderConfig=Ie;exports.sliderStyle=hn;exports.snackbarStyle=mn;exports.switchStyle=pn;exports.tabPanelStyle=wn;exports.tabPanelsStyle=vn;exports.tabStyle=yn;exports.tabsStyle=xn;exports.textFieldStyle=gn;exports.toolStyle=bn;exports.useButtonStyle=Ke;exports.useCardStyle=Je;exports.useCarouselItemStyle=Ze;exports.useCarouselStyle=et;exports.useChipStyle=nt;exports.useChipsStyle=rt;exports.useClassNames=Qt;exports.useDividerStyle=it;exports.useFabMenuStyle=ut;exports.useFabStyle=at;exports.useIconButtonStyle=ft;exports.useProgressIndicatorStyle=mt;exports.useSideSheetStyle=fn;exports.useSliderStyle=yt;exports.useSnackbarStyle=vt;exports.useStateStyle=Tt;exports.useSwitchStyle=gt;exports.useTabPanelStyle=It;exports.useTabPanelsStyle=kt;exports.useTabStyle=St;exports.useTabsStyle=Nt;exports.useTextFieldStyle=Rt;exports.useToolTipStyle=Dt;exports.useTooltipPosition=_t;exports.useTooltipTrigger=Vt;
+      `})]}),C&&d.jsx(Le,{ref:W,className:"opacity-0",draggable:r,editable:!0,editing:!0,onChange:x=>{var E;if(x=x.replace(/(&nbsp;)+/g," ").trim(),console.log("Ghost chip onChange",x,!!x),x)k(x);else if(c.length>0){const I=h.current[c.length-1];(E=I==null?void 0:I.focus)==null||E.call(I)}},onEditCommit:()=>{},onBlur:()=>{o(!1)},onFocus:x=>{o(!0),x.stopPropagation()},children:" "})]})};function Vt({trigger:e=["hover","focus"],isOpen:t,defaultOpen:n=!1,onOpenChange:r,openDelay:s=400,closeDelay:a=150,id:c}={}){const l=i.useId(),u=c??`tooltip-${l}`,o=Array.isArray(e)?e:[e],f=typeof t=="boolean",[y,h]=i.useState(n?"hovered":"hidden"),[m,p]=i.useState(!1),S=i.useRef(null),b=i.useRef(null),k=i.useCallback(()=>{S.current&&(clearTimeout(S.current),S.current=null),b.current&&(clearTimeout(b.current),b.current=null)},[]);i.useEffect(()=>()=>k(),[k]);const g=i.useCallback(_=>{if(f){const P=_!=="hidden";r==null||r(P)}else{h(_);const P=_!=="hidden";r==null||r(P)}},[f,r]),v=f?t?"hovered":"hidden":y,W=v!=="hidden",C=_=>{switch(_){case"hidden":return 0;case"hovered":return 1;case"focused":return 2;case"clicked":return 3;default:return 0}},x=i.useCallback(_=>{k(),!(C(_)<=C(v))&&(S.current=setTimeout(()=>{g(_)},s))},[k,s,v,g]),E=i.useCallback(_=>{k(),b.current=setTimeout(()=>{(!f&&C(y)<=C(_)||f)&&g("hidden")},a)},[k,a,y,f,g]),I=i.useCallback(()=>{o.includes("hover")&&x("hovered")},[o,x]),M=i.useCallback(()=>{o.includes("hover")&&(v==="focused"||v==="clicked"||m||E("hovered"))},[o,v,m,E]),D=i.useCallback(()=>{o.includes("focus")&&(k(),g("focused"))},[o,k,g]),L=i.useCallback(()=>{if(o.includes("focus")&&v!=="clicked"){if(o.includes("hover")&&m){g("hovered");return}E("focused")}},[o,v,m,E,g]),j=i.useCallback(()=>{o.includes("click")&&(k(),g(v==="clicked"?"hidden":"clicked"))},[o,v,k,g]),N=i.useCallback(_=>{_.key==="Escape"&&W&&(k(),g("hidden"),_.preventDefault())},[W,k,g]),H=i.useCallback(()=>{p(!0),k()},[k]),X=i.useCallback(()=>{p(!1),o.includes("hover")&&v==="hovered"&&E("hovered")},[o,v,E]);return{triggerProps:{"aria-describedby":W?u:void 0,onMouseEnter:I,onMouseLeave:M,onFocus:D,onBlur:L,onClick:j,onKeyDown:N},tooltipProps:{id:u,role:"tooltip","aria-hidden":!W,onMouseEnter:H,onMouseLeave:X},isOpen:W,state:v}}function _t({targetRef:e,position:t,variant:n="plain",isOpen:r}){const[s,a]=i.useState(t??"bottom");return i.useLayoutEffect(()=>{if(t){a(t);return}if(!r||!e.current||typeof window>"u")return;const l=e.current.getBoundingClientRect(),u=window.innerWidth,o=window.innerHeight,f=l.left/u,y=l.top/o;let h;n==="plain"?f<1/3?h="right":f>2/3?h="left":h=y>.5?"top":"bottom":f<.5&&y<.5?h="bottom-right":f>=.5&&y<.5?h="bottom-left":f>=.5&&y>=.5?h="top-left":h="top-right",a(h)},[r,e,t,n]),{resolvedPosition:s}}const $e=({variant:e="plain",buttons:t,className:n,children:r,title:s,text:a,content:c,position:l,targetRef:u,ref:o,trigger:f=["hover","focus"],transition:y,openDelay:h=400,closeDelay:m=150,isOpen:p,defaultOpen:S=!1,onOpenChange:b,id:k,...g})=>{if(y={duration:.3,...y},!r&&!u)throw new Error("Tooltip must have a child or a targetRef");t&&!Array.isArray(t)&&(t=[t]);const v=i.useRef(null),W=u||v,{triggerProps:C,tooltipProps:x,isOpen:E}=Vt({trigger:f,isOpen:p,defaultOpen:S,onOpenChange:b,openDelay:h,closeDelay:m,id:k}),{resolvedPosition:I}=_t({targetRef:W,position:l,variant:e,isOpen:E}),M=!u&&i.isValidElement(r)?i.cloneElement(r,{ref:v,...C,onMouseEnter:j=>{var N,H;C.onMouseEnter(),(H=(N=r.props)==null?void 0:N.onMouseEnter)==null||H.call(N,j)},onMouseLeave:j=>{var N,H;C.onMouseLeave(),(H=(N=r.props)==null?void 0:N.onMouseLeave)==null||H.call(N,j)},onFocus:j=>{var N,H;C.onFocus(),(H=(N=r.props)==null?void 0:N.onFocus)==null||H.call(N,j)},onBlur:j=>{var N,H;C.onBlur(),(H=(N=r.props)==null?void 0:N.onBlur)==null||H.call(N,j)},onClick:j=>{var N,H;C.onClick(),(H=(N=r.props)==null?void 0:N.onClick)==null||H.call(N,j)},onKeyDown:j=>{var N,H;C.onKeyDown(j),(H=(N=r.props)==null?void 0:N.onKeyDown)==null||H.call(N,j)}}):r;i.useEffect(()=>{if(!u)return;const j=u.current;if(!j)return;const N=()=>C.onMouseEnter(),H=()=>C.onMouseLeave(),X=()=>C.onFocus(),_=()=>C.onBlur(),P=()=>C.onClick(),F=U=>C.onKeyDown(U);return j.addEventListener("mouseenter",N),j.addEventListener("mouseleave",H),j.addEventListener("focus",X,!0),j.addEventListener("blur",_,!0),j.addEventListener("click",P),j.addEventListener("keydown",F),C["aria-describedby"]?j.setAttribute("aria-describedby",C["aria-describedby"]):j.removeAttribute("aria-describedby"),()=>{j.removeEventListener("mouseenter",N),j.removeEventListener("mouseleave",H),j.removeEventListener("focus",X,!0),j.removeEventListener("blur",_,!0),j.removeEventListener("click",P),j.removeEventListener("keydown",F)}},[u,C]);const D=Dt({variant:e,buttons:t,className:n,title:s,text:a,position:I,trigger:f,targetRef:u,children:r}),L={open:{opacity:1,height:"auto"},close:{opacity:0,height:16}};return d.jsxs(d.Fragment,{children:[M,d.jsx(O.AnimatePresence,{children:E&&d.jsx(Ht,{targetRef:W,children:d.jsx(O.motion.div,{initial:"close",variants:L,animate:"open",transition:{duration:y.duration},exit:"close",className:D.toolTip,...g,...x,children:d.jsx("div",{className:D.container,children:c?d.jsx("div",{className:D.content,children:c}):d.jsxs(d.Fragment,{children:[s&&d.jsx("div",{className:D.subHead,children:s}),a&&d.jsx("div",{className:D.supportingText,children:a}),t&&d.jsx("div",{className:D.actions,children:Array.isArray(t)&&t.map((j,N)=>d.jsx(Ce,{size:"small",variant:"text",...j},N))})]})})})})})]})},ve=({className:e,label:t,variant:n="primary",size:r="medium",href:s,type:a,icon:c,extended:l=!1,ref:u,transition:o,children:f,...y})=>{if(f&&(t=f),!t)throw new Error("FAB component requires either a label prop or children content");const h=s?"a":"button",m=at({href:s,icon:c,extended:l,label:t,size:r,variant:n,className:e,transition:o,children:t});o={duration:.3,...o};const p=i.useRef(null),S=u||p,b={visible:{width:"auto",marginLeft:12,opacity:1,transition:{...o,opacity:{duration:o.duration/2,delay:o.duration-o.duration/2}}},hidden:{width:0,marginLeft:0,opacity:0,transition:{...o,marginLeft:{duration:o.duration/2,delay:o.duration-o.duration/2}}}};return d.jsxs(h,{...y,ref:S,href:s,"aria-label":l?void 0:t,className:m.fab,children:[d.jsx($e,{trigger:l?null:void 0,text:t,targetRef:S}),d.jsx(ce,{style:{transition:o.duration+"s"},className:m.stateLayer,colorName:w({"on-primary":n=="primary","on-secondary":n=="secondary","on-tertiary":n=="tertiary","on-primary-container":n=="primaryContainer","on-secondary-container":n=="secondaryContainer","on-tertiary-container":n=="tertiaryContainer"}),stateClassName:"state-ripple-group-[fab]"}),d.jsx(le,{icon:c,className:m.icon}),d.jsx(O.AnimatePresence,{children:l&&d.jsx(O.motion.span,{variants:b,initial:"hidden",animate:"visible",exit:"hidden",className:m.label,children:t})})]})},ye=({variant:e="standard",href:t,disabled:n=!1,title:r,label:s,onToggle:a,activated:c=!1,onClick:l,icon:u,size:o="medium",iconSelected:f,className:y,ref:h,width:m="default",shape:p="rounded",allowShapeTransformation:S=!0,transition:b,children:k,...g})=>{if(k&&(s=k),!s)throw new Error("IconButton component requires either a label prop or children content to provide an accessible aria-label");r||(r=s);const[v,W]=i.useState(c),C=D=>{n&&D.preventDefault(),a?(W(!v),a(!v)):l&&l(D)};i.useEffect(()=>{W(c)},[c]);const x=t?"a":"button",E=ft({transition:b,shape:p,allowShapeTransformation:S,width:m,href:t,activated:v,label:s,iconSelected:f,isActive:v,onToggle:a,disabled:n,icon:u,variant:e,className:y,size:o,children:s,...g}),I=i.useRef(null),M=h||I;return b={duration:.3,...b},d.jsxs(x,{disabled:n,href:t,style:{transition:b.duration+"s"},className:E.iconButton,"aria-label":s,...g,title:void 0,onClick:C,ref:M,children:[d.jsx($e,{targetRef:M,trigger:n?null:void 0,text:r}),d.jsx("div",{className:E.touchTarget}),d.jsx(ce,{style:{transition:b.duration+"s"},className:E.stateLayer,colorName:w(e==="standard"&&{"on-surface-variant":!v,"on-primary":v},e==="filled"&&{"on-surface-variant":!v&&!!a,"on-primary":v||!a},e==="tonal"&&{"on-secondary":v&&!!a,"on-secondary-container":!v||!a},e==="outlined"&&{"inverse-on-surface":v&&!!a,"on-surface-variant":!v||!a}),stateClassName:"state-ripple-group-[icon-button]"}),u&&d.jsx(le,{icon:u,className:E.icon})]})},ts=({className:e,label:t,variant:n="primary",size:r="medium",href:s,icon:a,extended:c=!1,ref:l,transition:u,children:o,open:f,defaultOpen:y=!1,onOpenChange:h,...m})=>{u={duration:.3,ease:"easeInOut",...u};const p=i.useRef(null),S=l||p,b=typeof f=="boolean",[k,g]=i.useState(y),v=b?f:k,W=L=>{b||g(L),h==null||h(L)},C=i.Children.toArray(o).filter(L=>i.isValidElement(L)&&L.type===Ce),x=ut({href:s,icon:a,extended:c,label:t,size:r,variant:n,className:e,transition:u,children:t,open:v}),E=O.motion.create(ve),I=O.motion.create(ye),M=L=>d.jsx(E,{icon:a,extended:c,label:t,variant:n+"Container",size:r,className:x.fab+" "+(e??""),"aria-expanded":v,onClick:()=>W(!0),style:{transition:"border-radius 0.3s ease-in-out"},transition:{duration:u.duration,ease:"easeInOut",borderRadius:{duration:u.duration,ease:"easeInOut"},background:{duration:u.duration,ease:"easeInOut"},...u},...L}),[D]=i.useState(pe());return d.jsxs("div",{className:x.fabMenu,ref:S,...m,children:[d.jsx(O.AnimatePresence,{children:v&&d.jsx("div",{className:x.actions,role:"menu","aria-hidden":!v,children:(()=>{const L=C.length;return C.map((j,N)=>{j.props;const H=L-1-N,X=((u==null?void 0:u.delay)??0)+H*.06,_={open:{overflow:"visible",opacity:1,width:"auto",transition:{...u,delay:X,opacity:{delay:(u==null?void 0:u.duration)/2+X}}},close:{overflow:"hidden",opacity:0,width:0,transition:{...u,delay:X,opacity:{duration:(u==null?void 0:u.duration)/1.5}}}};return d.jsx(O.motion.div,{initial:"close",animate:"open",variants:_,transition:u,exit:"close",children:i.cloneElement(j,{key:N,shape:"rounded",variant:"filled",className:()=>({button:w("max-w-full overflow-hidden",{"px-0":!v,"bg-primary-container text-on-primary-container ":n==="primary","bg-secondary-container text-on-secondary-container":n==="secondary","bg-tertiary-container text-on-tertiary-container":n==="tertiary"}),stateLayer:w({"state-on-primary-container":n==="primary","state-on-secondary-container":n==="secondary","state-on-tertiary-container":n==="tertiary"})})})})})})()})}),M({className:"invisible pointer-events-none"}),d.jsxs("div",{className:"absolute right-0 top-0",children:[!v&&M({className:"",layout:!0,layoutId:"fab-menu"+D}),v&&d.jsx(d.Fragment,{children:d.jsx(I,{layout:!0,layoutId:"fab-menu"+D,variant:"filled",className:()=>({iconButton:w("",{"bg-primary text-on-primary":n==="primary","bg-secondary text-on-secondary":n==="secondary","bg-tertiary text-on-tertiary":n==="tertiary"}),stateLayer:w({"[--default-color:var(--color-on-primary)]":n==="primary","[--default-color:var(--color-on-secondary)]":n==="secondary","[--default-color:var(--color-on-tertiary)]":n==="tertiary"})}),style:{transition:"border-radius 0.3s ease-in-out"},transition:{duration:u.duration,ease:"easeInOut",borderRadius:{duration:u.duration,ease:"easeInOut"},background:{duration:u.duration,ease:"easeInOut"},...u},icon:zn,onClick:()=>W(!1),children:"Close"})})]})]})},ns=({className:e,valueFormatter:t,step:n=10,name:r,value:s=0,min:a=0,max:c=100,marks:l=[{value:0,label:"0"},{value:100,label:"100"}],ref:u,onChange:o,...f})=>{const y=P=>{const F=m(),U=h();return P===1/0?100:P===-1/0?0:(P-F)/(U-F)*100},h=(P=!1)=>P?c:c==1/0?l[(l==null?void 0:l.length)-1].value:c,m=(P=!1)=>P?a:a==-1/0?l[0].value:a,p=P=>{const F=m(!1);return(h(!1)-F)*P/100+F},[S,b]=i.useState(!1),k=i.useRef(null),g=u||k,[v,W]=i.useState(s),[C,x]=i.useState(y(s)),[E,I]=i.useState(!1);i.useEffect(()=>{W(s),x(y(s))},[s]);const M=P=>{I(!0),b(!0),j(P)},D=()=>{I(!1),b(!1)};i.useEffect(()=>(E?(window.addEventListener("mouseup",D),window.addEventListener("mousemove",j),window.addEventListener("touchend",D),window.addEventListener("touchmove",j)):(window.removeEventListener("mouseup",D),window.removeEventListener("mousemove",j),window.removeEventListener("touchend",D),window.removeEventListener("touchmove",j)),()=>{window.removeEventListener("mouseup",D),window.removeEventListener("mousemove",j),window.removeEventListener("touchend",D),window.removeEventListener("touchmove",j)}),[E]);const L=yt({className:e,isChanging:S,marks:l,max:c,min:a,name:r,step:n,value:v,valueFormatter:t,onChange:o}),j=P=>{const F=g==null?void 0:g.current;if(F){const U=F.getBoundingClientRect().left,re=((P.type==="touchmove"||P.type==="touchstart"?P.touches[0].clientX:P.clientX)-U)/F.offsetWidth*100;N({percent:re})}},N=({percent:P,value:F})=>{if(P){if(P>=100){W(h(!0)),x(100);return}if(P<=0){W(m(!0)),x(0);return}F=p(P),F==m()&&(F=m(!0)),F==h()&&(F=h(!0))}else if(F!=null){if(F>=h()){W(h(!0)),x(100);return}if(F<=m()){W(m(!0)),x(0);return}P=y(F)}else return;n!=null?F=Math.round((F-m())/n)*n+m():l&&(F=l.reduce((U,G,re)=>{let ie=G.value===1/0?h():G.value===-1/0?m():G.value,B=U.value===1/0?h():U.value===-1/0?m():U.value;return ie=Math.abs(ie-F),B=Math.abs(B-F),ie<B?G:U}).value),F>=h()&&(F=h(!0)),F<=m()&&(F=m(!0)),P=y(F),W(F),x(P),o&&o(F)},[H,X]=i.useState(0);i.useEffect(()=>{const P=()=>{g.current&&X(g.current.offsetWidth)};return P(),window.addEventListener("resize",P),()=>{window.removeEventListener("resize",P)}},[]);const _=P=>{switch(P.key){case"ArrowRight":if(n)N({value:v+n});else if(l){const F=l.find(U=>U.value>v);F&&N({value:F.value})}break;case"ArrowLeft":if(n)N({value:v-n});else if(l){const F=l.slice(0).reverse().find((U,G,re)=>v===1/0?G===1:U.value<v);F&&N({value:F.value})}break;default:return}};return d.jsxs("div",{tabIndex:0,onKeyDown:_,role:"slider","aria-valuemin":m(!0),"aria-valuemax":h(!0),"aria-valuenow":v,"aria-valuetext":v.toString(),className:L.slider,onMouseDown:M,onClick:j,ref:g,onTouchStart:M,onDragStart:P=>P.preventDefault(),...f,children:[d.jsx("input",{type:"hidden",name:r,value:v}),d.jsx("div",{className:L.activeTrack,style:{flex:C/100}}),d.jsx("div",{className:L.handle,children:d.jsx(O.AnimatePresence,{children:S&&d.jsx(O.motion.div,{className:L.valueIndicator,initial:"hidden",animate:"visible",exit:"hidden",style:{translate:"-50%",transformOrigin:"center bottom",textWrap:"nowrap"},variants:{visible:{opacity:1,scale:1},hidden:{opacity:1,scale:0}},transition:{duration:.1},children:t?t(v):v})})}),d.jsx("div",{className:L.inactiveTrack,style:{flex:1-C/100}}),d.jsx("div",{className:"w-[calc(100%-12px)] h-full absolute -translate-x-1/2 transform left-1/2",children:l&&l.map((P,F)=>{let U=null;const G=(S?9:10)/H*100,re=y(P.value);return re<=C-G?U=!0:re>=C+G&&(U=!1),d.jsx("div",{className:w(L.dot,{"bg-primary-container":U!=null&&U,"bg-primary":U!=null&&!U}),style:{left:`${y(P.value)}%`}},F)})})]})},ss=({variant:e="standard",className:t,children:n,title:r,position:s="right",extended:a,divider:c,onExtendedChange:l,closeIcon:u=me,transition:o,...f})=>{o={duration:.3,...o};const[y,h]=i.useState(a??!0),m=pt({transition:o,title:r,position:s,closeIcon:u,className:t,children:n,onExtendedChange:l,divider:c,isExtended:y,extended:y,variant:e});i.useEffect(()=>{l==null||l(y??!1)},[y]),i.useEffect(()=>{a!=null&&h(a)},[a]);const p={close:{width:0},open:{width:"auto"}},S=()=>d.jsxs(d.Fragment,{children:[d.jsx(O.AnimatePresence,{children:e=="modal"&&y&&d.jsx(O.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:o,onClick:()=>h(!1),className:m.overlay})}),d.jsx(O.AnimatePresence,{children:y&&d.jsxs("div",{...f,className:m.sideSheet,style:{transition:o.duration+"s"},children:[d.jsxs(O.motion.div,{variants:p,initial:a===!1?"open":"close",animate:"open",exit:"close",className:m.container,children:[d.jsxs("div",{className:m.header,children:[r&&d.jsx("p",{className:m.title,children:r}),d.jsx(ye,{size:"small",label:"close",icon:u,onClick:()=>h(!1),className:m.closeButton})]}),d.jsx("div",{className:m.content,style:{transition:o.duration+"s"},children:n})]}),(c==null&&e=="standard"?!0:c)&&d.jsx(De,{className:m.divider,orientation:"vertical"})]})})]});return e=="modal"?qe.createPortal(S(),document.body):S()},rs=({message:e,className:t,duration:n,closeIcon:r=me,onClose:s,...a})=>{const[c,l]=i.useState(!0),u=vt({className:t,closeIcon:r,duration:n,isVisible:c,onClose:s,message:e});i.useEffect(()=>{n&&setTimeout(()=>{o()},n)},[n]);const o=()=>{l(!1),s==null||s()};return d.jsx(O.AnimatePresence,{children:c&&d.jsx(O.motion.div,{initial:{height:0},animate:{height:"auto"},exit:{height:0},transition:{duration:.1},className:u.snackbar,...a,children:d.jsxs("div",{className:u.container,children:[d.jsx("p",{className:u.supportingText,children:e}),d.jsx(ye,{onClick:()=>o(),className:u.icon,icon:r,label:"close the snackbar"})]})})})},os=({selected:e=!1,className:t,activeIcon:n,disabled:r=!1,inactiveIcon:s,onChange:a,onClick:c,onKeyDown:l,ref:u,...o})=>{const[f,y]=i.useState(e);i.useEffect(()=>{y(e)},[e]);const h=g=>{r||(p(),c&&c(g))},m=g=>{r||((g.key===" "||g.key==="Enter")&&(g.preventDefault(),p()),l&&l(g))},p=()=>{y(!f),a==null||a(!f)},S=gt({className:t,isSelected:f,activeIcon:n,inactiveIcon:s,disabled:r,selected:f,onChange:a}),b=i.useRef(null),k=u||b;return d.jsxs(O.motion.div,{role:"switch","aria-checked":f,tabIndex:r?-1:0,onKeyDown:m,onClick:h,ref:k,className:S.switch,...o,children:[d.jsx("input",{type:"hidden",value:f?"1":"0"}),d.jsxs(O.motion.div,{layout:!0,style:{translate:f?"50%":"-50%"},transition:{type:"spring",stiffness:700,damping:30},className:S.handleContainer,children:[d.jsx("div",{className:S.handle,children:(f?n:s)&&d.jsx(le,{className:S.icon,icon:f?n:s})}),d.jsx("div",{className:S.handleStateLayer})]})]})},qt=({className:e,onClick:t,label:n,variant:r="primary",href:s,icon:a,selectedTab:c,setSelectedTab:l,tabsId:u,index:o,onTabSelected:f,scrollable:y=!1,selected:h=!1,children:m,ref:p,...S})=>{const b=i.useRef(null),k=p||b,g=n??(typeof m=="string"?m:void 0),[v,W]=i.useState(h);i.useEffect(()=>{h&&c==null?W(!0):W(c==o&&o!=null)},[c]),i.useEffect(()=>{c==o&&f&&f({ref:k,index:o||0,label:g,icon:a})},[c]);const C=s?"a":"button",x=I=>{l&&l(o??null),t&&t(I)},E=St({className:e,onTabSelected:f,scrollable:y,selectedTab:c,index:o,tabsId:u,selected:v,variant:r,icon:a,label:g,isSelected:v,setSelectedTab:l,href:s});return d.jsxs(C,{...S,role:"tab","aria-selected":v,ref:k,href:s,className:E.tab,onClick:x,...S,children:[d.jsx(ce,{style:{transition:.3+"s"},className:E.stateLayer,colorName:r==="primary"&&v?"primary":"on-surface",stateClassName:"state-ripple-group-[tab]"}),d.jsxs("span",{className:E.content,children:[a&&d.jsx(le,{icon:a,className:E.icon}),d.jsx("span",{className:E.label,children:g}),v&&d.jsx(O.motion.span,{layoutId:`underline-${u}`,className:E.underline,transition:{duration:.3}})]})]})},We=i.createContext(null),is=({variant:e="primary",onTabSelected:t,children:n,className:r,selectedTab:s,setSelectedTab:a,scrollable:c=!1})=>{const l=i.useContext(We),[u,o]=i.useState(null);let f;s===0||s!=null?f=s:l?f=l.selectedTab:f=u;const y=a??(l==null?void 0:l.setSelectedTab)??o,h=i.Children.toArray(n).filter(k=>i.isValidElement(k)&&k.type===qt),m=i.useRef(null),p=k=>{if(t==null||t(k),c){const g=m.current,v=k.ref.current;if(g&&v){const W=v.offsetLeft+v.offsetWidth/2-g.offsetWidth/2;g.scrollTo({left:W,behavior:"smooth"})}}},S=i.useMemo(()=>(l==null?void 0:l.tabsId)??pe(),[l==null?void 0:l.tabsId]),b=Nt({children:n,onTabSelected:t,scrollable:c,selectedTab:f,setSelectedTab:y,className:r,variant:e});return d.jsx("div",{ref:m,role:"tablist",className:b.tabs,children:h.map((k,g)=>i.cloneElement(k,{key:g,index:g,variant:e,selectedTab:f,setSelectedTab:y,tabsId:S,onTabSelected:p,scrollable:c}))})},ls=({children:e,selectedTab:t,setSelectedTab:n,defaultTab:r=0})=>{const[s,a]=i.useState(r),c=i.useRef(null),l=t!==void 0?t:s,u=n??a,o=c.current!==null&&l!==null?l>c.current?1:-1:0;l!==c.current&&(c.current=l);const f=i.useMemo(()=>pe(),[]),y=i.useMemo(()=>({selectedTab:l,setSelectedTab:u,previousTab:c.current,direction:o,tabsId:f}),[l,u,o,f]);return d.jsx(We.Provider,{value:y,children:e})},Xt=({children:e,className:t,isSelected:n=!1})=>{const r=It({children:e,className:t,isSelected:n});return d.jsx("div",{className:r.tabPanel,children:e})},as=({children:e,className:t})=>{const n=i.useContext(We);if(!n)return console.warn("TabPanels must be used within a TabGroup"),null;const{selectedTab:r,direction:s,tabsId:a}=n,c=i.Children.toArray(e).filter(u=>i.isValidElement(u)&&u.type===Xt),l=kt({children:e,className:t});return d.jsx("div",{className:l.tabPanels,children:d.jsx(O.AnimatePresence,{initial:!1,custom:s,mode:"popLayout",children:c.map((u,o)=>r===o&&d.jsx(O.motion.div,{custom:s,variants:{enter:f=>({x:f*100+"%",opacity:1}),center:{x:0,opacity:1},exit:f=>({x:f*-100+"%",opacity:1})},initial:"enter",animate:"center",exit:"exit",transition:{type:"spring",stiffness:400,damping:40},role:"tabpanel","aria-labelledby":`tab-${a}-${o}`,children:i.cloneElement(u,{isSelected:!0})},o))})})},cs=({variant:e="filled",disabled:t=!1,errorText:n,placeholder:r,suffix:s,name:a,label:c,className:l,supportingText:u,trailingIcon:o,leadingIcon:f,type:y="text",textLine:h="singleLine",autoComplete:m="on",onChange:p,value:S,showSupportingText:b=!1,...k})=>{const[g,v]=i.useState(S??""),[W,C]=i.useState(!1),[x,E]=i.useState(!1),[I,M]=i.useState(b);i.useEffect(()=>{v(S??"")},[S]),i.useEffect(()=>{n!=null&&n.length?E(!0):E(!1)},[n]),i.useEffect(()=>{b?M(b):u!=null&&u.length?M(!0):M(!1)},[I,u]),i.useEffect(()=>{W&&E(!1)},[W]);const D=i.useRef(null),L=()=>{D.current&&!W&&D.current.focus()},j=()=>{C(!0)},N=U=>{const G=U.target.value;v(G),E(!1),typeof p=="function"&&p(G)},H=()=>{C(!1)},X=Rt({showSupportingText:I,isFocused:W,showErrorIcon:x,disabled:t,name:a,label:c,autoComplete:m,className:l,onChange:p,placeholder:r,supportingText:u,type:y,leadingIcon:f,trailingIcon:o,variant:e,errorText:n,value:g,suffix:s,textLine:h}),[_]=i.useState(pe());let P,F;switch(h){case"multiLine":F=Jt,P={};break;case"textAreas":F="textarea",P={};break;case"singleLine":default:F="input",P={type:y};break}return d.jsxs("div",{className:X.textField,...k,children:[d.jsxs("fieldset",{onClick:L,className:X.content,children:[d.jsx("div",{className:X.stateLayer}),f&&d.jsx("div",{className:X.leadingIcon,children:i.isValidElement(f)?f:d.jsx(le,{className:"w-5 h-5",icon:f})}),!(!W&&!g.length||e=="filled")&&d.jsx(O.motion.legend,{variants:{hidden:{width:0,padding:0},visible:{width:"auto",padding:"0 8px"}},initial:"hidden",animate:!W&&!g.length?"hidden":"visible",className:"max-w-full ml-2 px-2 text-body-small h-0",transition:{duration:.2},children:d.jsx("span",{className:"transform inline-flex -translate-y-1/2",children:d.jsx(O.motion.span,{className:X.label,transition:{duration:.3},layoutId:_,children:c})})}),d.jsxs("div",{className:"flex-1 relative",children:[(!W&&!g.length||e=="filled")&&d.jsx(O.motion.label,{htmlFor:a,className:w("absolute left-4  transition-all duration-300",{"text-body-small top-2":e=="filled"&&!(!W&&!g.length),"text-body-large top-1/2 transform -translate-y-1/2":!(e=="filled"&&!(!W&&!g.length))}),transition:{duration:.3},children:d.jsx(O.motion.span,{className:X.label,transition:{duration:.3},layoutId:e=="outlined"?_:void 0,children:c})}),d.jsx(F,{ref:D,value:g,onChange:N,className:X.input,id:a,name:a,placeholder:W?r??void 0:"",onFocus:j,onBlur:H,disabled:t,autoComplete:m,"aria-invalid":!!(n!=null&&n.length),"aria-label":c,...P})]}),d.jsx("div",{className:X.activeIndicator}),!x&&d.jsxs(d.Fragment,{children:[o&&d.jsx("div",{onClick:U=>{U.stopPropagation()},className:X.trailingIcon,children:i.isValidElement(o)?o:d.jsx(le,{className:"h-5",icon:o})}),!o&&s&&d.jsx("span",{className:X.suffix,children:s})]}),x&&d.jsx("div",{className:w(X.trailingIcon,{" absolute right-0":!o}),children:d.jsx(le,{className:"h-5 text-error",icon:Un})})]}),I&&d.jsx("p",{className:X.supportingText,children:n!=null&&n.length?n:u!=null&&u.length?u:" "})]})},us=({isSelected:e,icon:t,label:n,variant:r})=>({navigationRailItem:w(" group/navigation-rail-item flex flex-col  pt-1 pb-1.5 cursor-pointer",{"text-on-surface-variant":!e,"text-on-secondary-container":e,"gap-2  h-[68px]":r=="vertical","gap-0  h-[66px]":r=="horizontal"}),container:w(" w-fit flex justify-center  relative rounded-full items-center mx-5",{"bg-secondary-container overflow-hidden":e,"gap-2 ":r=="horizontal","gap-0 ":r=="vertical","p-4":!n},n&&["px-4",{"py-1 ":r=="vertical","py-4 ":r=="horizontal"}]),stateLayer:w("rounded-full"),icon:w("size-6 flex"),label:w("w-fit mx-auto text-nowrap",{"text-label-large ":r=="horizontal","text-label-medium":r=="vertical"})}),ds=J("navigationRailItem",us),Ut=({label:e})=>d.jsx("div",{className:" h-9 flex items-center mx-9 mt-3",children:d.jsx("p",{className:"text-label-large text-on-surface-variant",children:e})}),Yt=({className:e,onClick:t,label:n,variant:r="vertical",href:s,icon:a,selectedItem:c,setSelectedItem:l,index:u,onItemSelected:o,selected:f=!1,ref:y,transition:h,isExtended:m,iconSelected:p,style:S,extendedOnly:b,children:k,...g})=>{k&&(n=k);const v=i.useRef(null),W=y||v,[C,x]=i.useState(f);i.useEffect(()=>{f&&c==null?x(!0):x(c==u&&u!=null)},[c]),i.useEffect(()=>{c==u&&o&&o({ref:W,index:u||0,label:n,icon:a})},[c]);const E=s?"a":"button",I=D=>{l&&l(u??null),t&&t(D)},M=ds({isExtended:m,extendedOnly:b,className:e,onItemSelected:o,selectedItem:c,index:u,transition:h,selected:C,variant:r,icon:a,label:n,isSelected:C,setSelectedItem:l,href:s,children:n,iconSelected:p});return h={duration:.3,...h},b&&!m?null:d.jsxs(E,{...g,role:"tab","aria-selected":C,ref:W,href:s,className:M.navigationRailItem,onClick:I,style:{transition:h.duration+"s",...S},children:[d.jsxs(O.motion.div,{style:{transition:r=="horizontal"?h.duration+`s, gap ${h.duration/2}s ${h.duration-h.duration/2}s`:h.duration+`s, gap ${h.duration/3}s ${h.duration-h.duration/3}s`},transition:h,className:M.container,children:[d.jsx(ce,{style:{transition:h.duration+"s"},className:M.stateLayer,colorName:w({"on-surface":!C,"on-secondary-container":C}),stateClassName:"state-ripple-group-[navigation-rail-item]"}),a&&d.jsx(le,{icon:C?p:a,className:M.icon}),d.jsx(O.AnimatePresence,{children:r=="horizontal"&&(()=>{const D={width:0,opacity:0,transition:{...h}},L={width:"auto",opacity:1,transition:{...h,opacity:{duration:h.duration/2,delay:h.duration-h.duration/2}}};return d.jsx(O.motion.span,{initial:D,animate:L,exit:D,className:M.label,children:n})})()})]}),d.jsx(O.AnimatePresence,{children:r=="vertical"&&(()=>{const D={height:0,opacity:0,transition:{...h,opacity:{duration:0}}},L={height:"auto",opacity:1,transition:{...h,opacity:{duration:h.duration/3,delay:h.duration-h.duration/3}}};return d.jsx(O.motion.span,{initial:L,animate:L,exit:D,className:M.label,transition:h,children:n})})()})]})},fs=({isExtended:e,alignment:t})=>({navigationRail:w("flex flex-col  left-0 h-full top-0 pt-11",{"w-fit max-w-24":!e,"w-fit min-w-[220px] max-w-[360px]":e,"justify-between":t=="middle","justify-start":t=="top"}),header:w("flex flex-col gap-1 items-start"),menuIcon:"mx-5",segments:w(" flex flex-col  overflow-auto min-w-full mt-10",{"w-full":!e,"w-fit  items-start":e})}),hs=J("navigationRail",fs),ms=({variant:e="standard",onItemSelected:t,children:n,className:r,selectedItem:s,extended:a,alignment:c="top",menu:l={closed:{icon:Kn,label:"Open menu"},opened:{icon:me,label:"Close menu"}},style:u,onExtendedChange:o,transition:f,setSelectedItem:y})=>{const[h,m]=i.useState(null),[p,S]=i.useState(a);let b;s==0||s!=null?b=s:b=h;const k=y||m,g=i.useRef(null),v=M=>{t==null||t(M)};function W(M){const D=[];return i.Children.forEach(M,L=>{i.isValidElement(L)&&L.type===i.Fragment?D.push(...W(L.props.children)):D.push(L)}),D}const C=W(n),x=C.filter(M=>i.isValidElement(M)&&M.type===ve),E=hs({children:n,onItemSelected:t,selectedItem:b,setSelectedItem:k,className:r,variant:e,extended:p,isExtended:p,alignment:c,menu:l,transition:f,onExtendedChange:o});f={duration:.3,...f};const I=i.useRef(!1);return I.current=!1,i.useEffect(()=>{o==null||o(p??!1)},[p]),d.jsxs("div",{style:{transition:f.duration+"s",...u},ref:g,className:E.navigationRail,children:[d.jsxs("div",{className:E.header,children:[d.jsx(ye,{onClick:()=>S(!p),label:p?l==null?void 0:l.opened.label:l==null?void 0:l.closed.label,className:E.menuIcon,icon:p?l.opened.icon:l==null?void 0:l.closed.icon}),x.length>0&&i.cloneElement(x[0],{transition:f,isExtended:p,className:"!shadow-none mx-5 "+x[0].props.className})]}),d.jsx("div",{className:E.segments,children:(()=>{let M=0;return C.map(D=>i.isValidElement(D)&&D.type===Yt?i.cloneElement(D,{key:M,index:M++,variant:p?"horizontal":"vertical",selectedItem:b,setSelectedItem:k,onItemSelected:v,transition:f,extendedOnly:I.current,isExtended:p}):i.isValidElement(D)&&D.type===ve?null:i.isValidElement(D)&&D.type===Ut?(I.current=!0,p?i.cloneElement(D,{}):null):D)})()}),d.jsx("div",{className:"flex-1 max-h-[160px]"})]})};function ps(e){return xe.defineConfig({variant:xe.Variants.Udixio,...e,plugins:[new xe.FontPlugin(e),new Xe.TailwindPlugin(e)]})}exports.AnimateOnScrollInit=On;exports.Button=Ce;exports.Card=qn;exports.Carousel=Xn;exports.CarouselItem=Ot;exports.Chip=Le;exports.Chips=es;exports.CustomScroll=Pt;exports.Divider=De;exports.Fab=ve;exports.FabMenu=ts;exports.Icon=le;exports.IconButton=ye;exports.NavigationRail=ms;exports.NavigationRailItem=Yt;exports.NavigationRailSection=Ut;exports.ProgressIndicator=$t;exports.RippleEffect=Wt;exports.SideSheet=ss;exports.Slider=ns;exports.SmoothScroll=Dn;exports.Snackbar=rs;exports.State=ce;exports.Switch=os;exports.SyncedFixedWrapper=Ht;exports.Tab=qt;exports.TabGroup=ls;exports.TabPanel=Xt;exports.TabPanels=as;exports.Tabs=is;exports.TextField=cs;exports.ThemeProvider=An;exports.Tooltip=$e;exports.animateOnScroll=Vn;exports.buttonStyle=en;exports.cardStyle=tn;exports.carouselItemConfig=ke;exports.carouselItemStyle=nn;exports.carouselStyle=sn;exports.chipStyle=rn;exports.chipsStyle=on;exports.classNames=w;exports.classnames=Ye;exports.createUseClassNames=J;exports.customScrollStyle=At;exports.defaultClassNames=Z;exports.defineConfig=ps;exports.dividerStyle=ln;exports.fabMenuStyle=cn;exports.fabStyle=an;exports.getClassNames=we;exports.iconButtonStyle=un;exports.initAnimateOnScroll=Re;exports.normalize=de;exports.progressIndicatorStyle=dn;exports.sideSheetConfig=je;exports.sideSheetStyle=pt;exports.sliderConfig=Ie;exports.sliderStyle=hn;exports.snackbarStyle=mn;exports.switchStyle=pn;exports.tabPanelStyle=wn;exports.tabPanelsStyle=vn;exports.tabStyle=yn;exports.tabsStyle=xn;exports.textFieldStyle=gn;exports.toolStyle=bn;exports.useButtonStyle=Ke;exports.useCardStyle=Je;exports.useCarouselItemStyle=Ze;exports.useCarouselStyle=et;exports.useChipStyle=nt;exports.useChipsStyle=rt;exports.useClassNames=Qt;exports.useDividerStyle=it;exports.useFabMenuStyle=ut;exports.useFabStyle=at;exports.useIconButtonStyle=ft;exports.useProgressIndicatorStyle=mt;exports.useSideSheetStyle=fn;exports.useSliderStyle=yt;exports.useSnackbarStyle=vt;exports.useStateStyle=Tt;exports.useSwitchStyle=gt;exports.useTabPanelStyle=It;exports.useTabPanelsStyle=kt;exports.useTabStyle=St;exports.useTabsStyle=Nt;exports.useTextFieldStyle=Rt;exports.useToolTipStyle=Dt;exports.useTooltipPosition=_t;exports.useTooltipTrigger=Vt;

package/dist/index.js

@@ -4,7 +4,7 @@ var A = (e, t, n) => kt(e, typeof t != "symbol" ? t + "" : t, n);
 import { jsx as m, jsxs as G, Fragment as pe } from "react/jsx-runtime";
 import { clsx as ze } from "clsx";
 import { extendTailwindMerge as It } from "tailwind-merge";
-import q, { useMemo as Se, useState as P, useEffect as O, useRef as _, useLayoutEffect as We, useId as Mt, useCallback as de, isValidElement as ge, cloneElement as Ee, createContext as Ct, useContext as Ke, Children as Rt, Fragment as $t } from "react";
+import q, { useMemo as Se, useState as O, useEffect as P, useRef as _, useLayoutEffect as We, useId as Mt, useCallback as de, isValidElement as ge, cloneElement as Ee, createContext as Ct, useContext as Ke, Children as Rt, Fragment as $t } from "react";
 import { motion as ee, AnimatePresence as fe, useScroll as Dt, useMotionValueEvent as Fe, animate as Wt } from "motion/react";
 import { createPortal as je } from "react-dom";
 import { loader as At, defineConfig as Bt, FontPlugin as Ht, Variants as Ft } from "@udixio/theme";
@@ -956,12 +956,12 @@ const Ze = ({
   className: s,
   ...r
 }) => {
-  const [l, a] = P(t), [i] = P(1.5);
-  O(() => {
+  const [l, a] = O(t), [i] = O(1.5);
+  P(() => {
     t > 100 && (t = 100), t < 0 && (t = 0), a(t);
   }, [t]);
-  const [c, o] = P(!0), u = () => c ? i : i * 0.5;
-  O(() => {
+  const [c, o] = O(!0), u = () => c ? i : i * 0.5;
+  P(() => {
     if ((e === "circular-indeterminate" || e === "linear-indeterminate") && l !== 100) {
       const f = setInterval(() => {
         a(c ? 10 : 90), o(!c);
@@ -969,8 +969,8 @@ const Ze = ({
       return () => clearInterval(f);
     }
   }, [e, c, l]);
-  const [p, d] = P(!1);
-  O(() => {
+  const [p, d] = O(!1);
+  P(() => {
     if (l >= 100) {
       const f = setTimeout(() => {
         d(!1);
@@ -1093,10 +1093,10 @@ const Ze = ({
         duration: 0.3
       }
     }
-  }, [s, r] = P(!0), [l, a] = P(!1), [i, c] = P({ x: 50, y: 50 });
-  O(() => {
+  }, [s, r] = O(!0), [l, a] = O(!1), [i, c] = O({ x: 50, y: 50 });
+  P(() => {
     l && (r(!0), r(!1));
-  }, [l]), O(() => {
+  }, [l]), P(() => {
     const f = t == null ? void 0 : t.current;
     if (f)
       return f.addEventListener("mousedown", o), f.addEventListener("mouseup", p), f.addEventListener("mouseleave", u), () => {
@@ -1192,11 +1192,11 @@ const fn = ({
   setScroll: c
 }) => {
   var ae, ue;
-  const o = _(null), u = _(null), [p, d] = P({
+  const o = _(null), u = _(null), [p, d] = O({
     width: null,
     height: null
   });
-  O(() => {
+  P(() => {
     if (!o.current) return;
     const F = new ResizeObserver((C) => {
       for (const T of C)
@@ -1245,9 +1245,9 @@ const fn = ({
   const W = (F, C) => {
     v.current && v.current(F, C);
   };
-  O(() => {
+  P(() => {
     p.width && W(g.get(), "x"), p.height && W(E.get(), "y");
-  }, [p]), O(() => {
+  }, [p]), P(() => {
     const F = o.current, C = u.current;
     if (!F || !C || typeof i != "number") return;
     const T = (U, j, J) => Math.min(J, Math.max(j, U));
@@ -1263,7 +1263,7 @@ const fn = ({
   }), Fe(E, "change", (F) => {
     W(F, "y");
   });
-  const [R, y] = P(!1);
+  const [R, y] = O(!1);
   We(() => {
     R || !f.current || !h.current || !s || (s({
       scrollProgress: 0,
@@ -1272,7 +1272,7 @@ const fn = ({
       scrollVisible: t == "vertical" ? f.current.height : f.current.width
     }), y(!0));
   }, [f, h, s]), h.current = x(), f.current = b();
-  const [S, I] = P(!1), M = dn({
+  const [S, I] = O(!1), M = dn({
     isDragging: S,
     children: e,
     className: r,
@@ -1281,7 +1281,7 @@ const fn = ({
     scrollSize: n,
     draggable: l,
     throttleDuration: a
-  }), [$, N] = P(0), [k, L] = P(0), V = (F) => {
+  }), [$, N] = O(0), [k, L] = O(0), V = (F) => {
     if (!l) return;
     const C = o.current;
     if (!C || $ == null) return;
@@ -1299,9 +1299,9 @@ const fn = ({
   }, K = (F) => {
     F.preventDefault();
   }, Q = _(null);
-  return O(() => () => {
+  return P(() => () => {
     Q.current && clearTimeout(Q.current);
-  }, []), O(() => {
+  }, []), P(() => {
     const F = o.current;
     if (!F) return;
     const C = (T) => {
@@ -2175,7 +2175,7 @@ const Rr = ({
   children: l
 }) => {
   const a = _(null), i = _(null);
-  return O(() => {
+  return P(() => {
     let c;
     typeof e == "string" ? e.endsWith("ms") ? c = parseFloat(e) / 1e3 : e.endsWith("s") ? c = parseFloat(e) : c = parseFloat(e) || 1.2 : c = e;
     const o = (p) => 1 - Math.pow(1 - p, 5);
@@ -2202,13 +2202,13 @@ const Rr = ({
   stateClassName: n = "state-ripple-group",
   className: s
 }) => {
-  const r = _(null), l = _(null), [a, i] = P(!1), c = Nn({
+  const r = _(null), l = _(null), [a, i] = O(!1), c = Nn({
     isClient: a,
     stateClassName: n,
     className: s,
     colorName: t
   });
-  return O(() => {
+  return P(() => {
     if (r.current && n !== "state-layer") {
       const u = (n.includes("[") ? "group/" + n.split("[")[1].split("]")[0] : "group").replace(/\//g, "\\/"), p = r.current.closest(
         `.${u}:not(.${u} .${u})`
@@ -2243,7 +2243,7 @@ const Rr = ({
   targetRef: e,
   children: t
 }) => {
-  const [n, s] = P(null), r = _(null), l = () => {
+  const [n, s] = O(null), r = _(null), l = () => {
     const a = e.current;
     if (!a) return;
     const i = a.getBoundingClientRect();
@@ -2259,7 +2259,7 @@ const Rr = ({
       // personnalise si besoin
     });
   };
-  return O(() => {
+  return P(() => {
     const a = e.current;
     if (a)
       return l(), window.addEventListener("scroll", l, !0), window.addEventListener("resize", l), r.current = new ResizeObserver(l), r.current.observe(a), () => {
@@ -2278,15 +2278,15 @@ const $r = ({
   onLoad: n,
   loadTheme: s = !1
 }) => {
-  const [r, l] = P(null);
-  O(() => {
+  const [r, l] = O(null);
+  P(() => {
     (async () => {
       const d = await At(e, s);
       l(d);
     })();
   }, []);
-  const [a, i] = P(null), c = _(null), o = _(0), u = _(null);
-  O(() => {
+  const [a, i] = O(null), c = _(null), o = _(0), u = _(null);
+  P(() => {
     if (!r) return;
     const d = {
       ...e,
@@ -2317,7 +2317,7 @@ const $r = ({
     const h = r == null ? void 0 : r.plugins.getPlugin(Ge).getInstance().outputCss;
     i(h), n == null || n(r);
   };
-  return O(() => () => {
+  return P(() => () => {
     c.current && (clearTimeout(c.current), c.current = null);
   }, []), a ? /* @__PURE__ */ m("style", { dangerouslySetInnerHTML: { __html: a } }) : null;
 };
@@ -2525,7 +2525,7 @@ const St = ({
     );
   e = Dn(e);
   const v = s ? "a" : "button", W = _(null), R = h || W, [y, S] = q.useState(d);
-  O(() => {
+  P(() => {
     S(d);
   }, [d]), b = { duration: 0.3, ...b };
   const I = (N) => {
@@ -2705,7 +2705,7 @@ const St = ({
   scrollSensitivity: p = 1.25,
   ...d
 }) => {
-  const h = _(null), f = s || h, [x, b] = P(0), E = Ut({
+  const h = _(null), f = s || h, [x, b] = O(0), E = Ut({
     index: u,
     className: t,
     children: n,
@@ -2719,9 +2719,9 @@ const St = ({
     onMetricsChange: o
   }), g = q.Children.toArray(n).filter(
     (C) => q.isValidElement(C) && C.type === Wn
-  ), v = _(null), [W, R] = P(
+  ), v = _(null), [W, R] = O(
     {}
-  ), [y, S] = P(null), I = _(0), M = _(null), $ = () => {
+  ), [y, S] = O(null), I = _(0), M = _(null), $ = () => {
     var ye, be;
     if (!v.current || !f.current || (y == null ? void 0 : y.scrollProgress) === void 0)
       return [];
@@ -2782,17 +2782,17 @@ const St = ({
     return b(Ie), Object.fromEntries(
       se.map((X) => [X.index, X.width])
     );
-  }, N = _([]).current, [k, L] = P(0);
-  O(() => {
+  }, N = _([]).current, [k, L] = O(0);
+  P(() => {
     c && c(k);
-  }, [k]), O(() => {
+  }, [k]), P(() => {
     typeof u == "number" && g.length > 0 && u !== k && z(u);
-  }, [u, g.length]), O(() => {
+  }, [u, g.length]), P(() => {
     Y(k);
   }, [k]), N.length !== g.length && g.forEach((C, T) => {
     N[T] || (N[T] = q.createRef());
   });
-  const [V, Y] = P(0), z = (C, T = {}) => {
+  const [V, Y] = O(0), z = (C, T = {}) => {
     if (!g.length) return 0;
     const U = N[C];
     if (!U || !U.current || !v.current) return 0;
@@ -2849,16 +2849,16 @@ const St = ({
       });
     }
   };
-  O(() => {
+  P(() => {
     const C = $();
     R(C);
   }, [y]);
   const K = _(o);
-  O(() => {
+  P(() => {
     K.current = o;
   }, [o]);
   const Q = _(null);
-  O(() => {
+  P(() => {
     var oe;
     const C = K.current;
     if (!C || !(f != null && f.current)) return;
@@ -2889,11 +2889,11 @@ const St = ({
         }
     }
     X && (Q.current = ye, C(ye));
-  }, [f, g.length, k, y, i, a]), O(() => () => {
+  }, [f, g.length, k, y, i, a]), P(() => () => {
     var C;
     (C = M.current) == null || C.stop();
   }, []);
-  const [ae, ue] = P(0);
+  const [ae, ue] = O(0);
   We(() => {
     let C = a[1];
     y && C > y.scrollVisible && (C = y.scrollVisible);
@@ -2922,7 +2922,7 @@ const St = ({
         break;
     }
   };
-  return O(() => {
+  return P(() => {
     const C = f.current;
     if (!C) return;
     const T = (U) => {
@@ -3017,19 +3017,19 @@ const qe = ({
     throw new Error(
       "Chip component requires either a label prop or children content"
     );
-  const W = s ? "a" : "button", R = _(null), y = o || R, [S, I] = q.useState(c), [M, $] = q.useState(!1), [N, k] = P(g && p), [L, V] = q.useState(!1), [Y, z] = q.useState(
+  const W = s ? "a" : "button", R = _(null), y = o || R, [S, I] = q.useState(c), [M, $] = q.useState(!1), [N, k] = O(g && p), [L, V] = q.useState(!1), [Y, z] = q.useState(
     typeof r == "string" ? r : ""
   ), B = q.useRef(null);
-  O(() => {
+  P(() => {
     I(c);
-  }, [c]), O(() => {
+  }, [c]), P(() => {
     if (g && k(g), p && M) {
       const D = setTimeout(() => {
         v != null && v.draggable && L || k(!0);
       }, 1e3);
       return () => clearTimeout(D);
     } else M || k(!1);
-  }, [M, p, L, v, Y]), O(() => {
+  }, [M, p, L, v, Y]), P(() => {
     if (N) {
       z(typeof r == "string" ? r : "");
       const D = J.current || B.current;
@@ -3262,8 +3262,8 @@ const Hr = ({
       });
     },
     [e, l, a, p]
-  ), [g, v] = P(null);
-  O(() => {
+  ), [g, v] = O(null);
+  P(() => {
     var y;
     if (g) {
       const S = a.findIndex(
@@ -3442,12 +3442,12 @@ function _n({
   closeDelay: l = 150,
   id: a
 } = {}) {
-  const i = Mt(), c = a ?? `tooltip-${i}`, o = Array.isArray(e) ? e : [e], u = typeof t == "boolean", [p, d] = P(
+  const i = Mt(), c = a ?? `tooltip-${i}`, o = Array.isArray(e) ? e : [e], u = typeof t == "boolean", [p, d] = O(
     n ? "hovered" : "hidden"
-  ), [h, f] = P(!1), x = _(null), b = _(null), E = de(() => {
+  ), [h, f] = O(!1), x = _(null), b = _(null), E = de(() => {
     x.current && (clearTimeout(x.current), x.current = null), b.current && (clearTimeout(b.current), b.current = null);
   }, []);
-  O(() => () => E(), [E]);
+  P(() => () => E(), [E]);
   const g = de(
     (z) => {
       if (u) {
@@ -3540,7 +3540,7 @@ function Xn({
   variant: n = "plain",
   isOpen: s
 }) {
-  const [r, l] = P(
+  const [r, l] = O(
     t ?? "bottom"
   );
   return We(() => {
@@ -3623,7 +3623,7 @@ const Nt = ({
       R.onKeyDown(k), (V = (L = s.props) == null ? void 0 : L.onKeyDown) == null || V.call(L, k);
     }
   }) : s;
-  O(() => {
+  P(() => {
     if (!c) return;
     const k = c.current;
     if (!k) return;
@@ -3817,7 +3817,7 @@ const Nt = ({
   const [v, W] = q.useState(a), R = ($) => {
     n && $.preventDefault(), l ? (W(!v), l(!v)) : i && i($);
   };
-  O(() => {
+  P(() => {
     W(a);
   }, [a]);
   const y = t ? "a" : "button", S = Gt({
@@ -3908,7 +3908,7 @@ const Nt = ({
   ...h
 }) => {
   c = { duration: 0.3, ease: "easeInOut", ...c };
-  const f = _(null), x = i || f, b = typeof u == "boolean", [E, g] = P(p), v = b ? u : E, W = (N) => {
+  const f = _(null), x = i || f, b = typeof u == "boolean", [E, g] = O(p), v = b ? u : E, W = (N) => {
     b || g(N), d == null || d(N);
   }, R = q.Children.toArray(o).filter(
     (N) => q.isValidElement(N) && N.type === St
@@ -3944,7 +3944,7 @@ const Nt = ({
       },
       ...N
     }
-  ), [$] = P(Ne());
+  ), [$] = O(Ne());
   return /* @__PURE__ */ G("div", { className: y.fabMenu, ref: x, ...h, children: [
     /* @__PURE__ */ m(fe, { children: v && /* @__PURE__ */ m("div", { className: y.actions, role: "menu", "aria-hidden": !v, children: (() => {
       const N = R.length;
@@ -4085,12 +4085,16 @@ const Nt = ({
   }, d = (B = !1) => B ? a : a == 1 / 0 ? i[(i == null ? void 0 : i.length) - 1].value : a, h = (B = !1) => B ? l : l == -1 / 0 ? i[0].value : l, f = (B) => {
     const H = h(!1);
     return (d(!1) - H) * B / 100 + H;
-  }, [x, b] = P(!1), E = _(null), g = c || E, [v, W] = P(r), [R, y] = P(p(r)), [S, I] = P(!1), M = (B) => {
+  }, [x, b] = O(!1), E = _(null), g = c || E, [v, W] = O(r), [R, y] = O(p(r)), [S, I] = O(!1);
+  P(() => {
+    W(r), y(p(r));
+  }, [r]);
+  const M = (B) => {
     I(!0), b(!0), k(B);
   }, $ = () => {
     I(!1), b(!1);
   };
-  O(() => (S ? (window.addEventListener("mouseup", $), window.addEventListener("mousemove", k), window.addEventListener("touchend", $), window.addEventListener("touchmove", k)) : (window.removeEventListener("mouseup", $), window.removeEventListener("mousemove", k), window.removeEventListener("touchend", $), window.removeEventListener("touchmove", k)), () => {
+  P(() => (S ? (window.addEventListener("mouseup", $), window.addEventListener("mousemove", k), window.addEventListener("touchend", $), window.addEventListener("touchmove", k)) : (window.removeEventListener("mouseup", $), window.removeEventListener("mousemove", k), window.removeEventListener("touchend", $), window.removeEventListener("touchmove", k)), () => {
     window.removeEventListener("mouseup", $), window.removeEventListener("mousemove", k), window.removeEventListener("touchend", $), window.removeEventListener("touchmove", k);
   }), [S]);
   const N = Qt({
@@ -4140,8 +4144,8 @@ const Nt = ({
       let ue = Q.value === 1 / 0 ? d() : Q.value === -1 / 0 ? h() : Q.value, F = K.value === 1 / 0 ? d() : K.value === -1 / 0 ? h() : K.value;
       return ue = Math.abs(ue - H), F = Math.abs(F - H), ue < F ? Q : K;
     }).value), H >= d() && (H = d(!0)), H <= h() && (H = h(!0)), B = p(H), W(H), y(B), o && o(H);
-  }, [V, Y] = P(0);
-  return O(() => {
+  }, [V, Y] = O(0);
+  return P(() => {
     const B = () => {
       g.current && Y(g.current.offsetWidth);
     };
@@ -4256,7 +4260,7 @@ const Nt = ({
   ...u
 }) => {
   o = { duration: 0.3, ...o };
-  const [p, d] = P(l ?? !0), h = Zt({
+  const [p, d] = O(l ?? !0), h = Zt({
     transition: o,
     title: s,
     position: r,
@@ -4269,9 +4273,9 @@ const Nt = ({
     extended: p,
     variant: e
   });
-  O(() => {
+  P(() => {
     i == null || i(p ?? !1);
-  }, [p]), O(() => {
+  }, [p]), P(() => {
     l != null && d(l);
   }, [l]);
   const f = {
@@ -4347,7 +4351,7 @@ const Nt = ({
   onClose: r,
   ...l
 }) => {
-  const [a, i] = P(!0), c = en({
+  const [a, i] = O(!0), c = en({
     className: t,
     closeIcon: s,
     duration: n,
@@ -4355,7 +4359,7 @@ const Nt = ({
     onClose: r,
     message: e
   });
-  O(() => {
+  P(() => {
     n && setTimeout(() => {
       o();
     }, n);
@@ -4398,7 +4402,11 @@ const Nt = ({
   ref: c,
   ...o
 }) => {
-  const [u, p] = P(e), d = (g) => {
+  const [u, p] = O(e);
+  P(() => {
+    p(e);
+  }, [e]);
+  const d = (g) => {
     s || (f(), a && a(g));
   }, h = (g) => {
     s || ((g.key === " " || g.key === "Enter") && (g.preventDefault(), f()), i && i(g));
@@ -4470,10 +4478,10 @@ const Nt = ({
   ref: f,
   ...x
 }) => {
-  const b = _(null), E = f || b, g = n ?? (typeof h == "string" ? h : void 0), [v, W] = P(d);
-  O(() => {
+  const b = _(null), E = f || b, g = n ?? (typeof h == "string" ? h : void 0), [v, W] = O(d);
+  P(() => {
     d && a == null ? W(!0) : W(a == o && o != null);
-  }, [a]), O(() => {
+  }, [a]), P(() => {
     a == o && u && u({
       ref: E,
       index: o || 0,
@@ -4543,7 +4551,7 @@ const Nt = ({
   setSelectedTab: l,
   scrollable: a = !1
 }) => {
-  const i = Ke(He), [c, o] = P(
+  const i = Ke(He), [c, o] = O(
     null
   );
   let u;
@@ -4586,7 +4594,7 @@ const Nt = ({
   setSelectedTab: n,
   defaultTab: s = 0
 }) => {
-  const [r, l] = P(
+  const [r, l] = O(
     s
   ), a = _(null), i = t !== void 0 ? t : r, c = n ?? l, o = a.current !== null && i !== null ? i > a.current ? 1 : -1 : 0;
   i !== a.current && (a.current = i);
@@ -4672,16 +4680,16 @@ const Nt = ({
   showSupportingText: b = !1,
   ...E
 }) => {
-  const [g, v] = P(x ?? ""), [W, R] = P(!1), [y, S] = P(!1), [I, M] = P(
+  const [g, v] = O(x ?? ""), [W, R] = O(!1), [y, S] = O(!1), [I, M] = O(
     b
   );
-  O(() => {
+  P(() => {
     v(x ?? "");
-  }, [x]), O(() => {
+  }, [x]), P(() => {
     n != null && n.length ? S(!0) : S(!1);
-  }, [n]), O(() => {
+  }, [n]), P(() => {
     b ? M(b) : c != null && c.length ? M(!0) : M(!1);
-  }, [I, c]), O(() => {
+  }, [I, c]), P(() => {
     W && S(!1);
   }, [W]);
   const $ = q.useRef(null), N = () => {
@@ -4713,7 +4721,7 @@ const Nt = ({
     value: g,
     suffix: r,
     textLine: d
-  }), [z] = P(Ne());
+  }), [z] = O(Ne());
   let B, H;
   switch (d) {
     case "multiLine":
@@ -4886,10 +4894,10 @@ const Nt = ({
   ...g
 }) => {
   E && (n = E);
-  const v = _(null), W = p || v, [R, y] = P(u);
-  O(() => {
+  const v = _(null), W = p || v, [R, y] = O(u);
+  P(() => {
     u && a == null ? y(!0) : y(a == c && c != null);
-  }, [a]), O(() => {
+  }, [a]), P(() => {
     a == c && o && o({
       ref: W,
       index: c || 0,
@@ -5071,7 +5079,7 @@ const Nt = ({
   transition: u,
   setSelectedItem: p
 }) => {
-  const [d, h] = P(null), [f, x] = P(l);
+  const [d, h] = O(null), [f, x] = O(l);
   let b;
   r == 0 || r != null ? b = r : b = d;
   const E = p || h, g = _(null), v = (M) => {
@@ -5101,7 +5109,7 @@ const Nt = ({
   });
   u = { duration: 0.3, ...u };
   const I = _(!1);
-  return I.current = !1, O(() => {
+  return I.current = !1, P(() => {
     o == null || o(f ?? !1);
   }, [f]), /* @__PURE__ */ G(
     "div",

package/dist/lib/components/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAc,UAAU,EAAE,MAAM,UAAU,CAAC;AAGlD;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,GAAI,8GAqBpB,UAAU,CAAC,eAAe,CAAC,4CA0U7B,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAc,UAAU,EAAE,MAAM,UAAU,CAAC;AAGlD;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,GAAI,8GAqBpB,UAAU,CAAC,eAAe,CAAC,4CAgV7B,CAAC"}

package/dist/lib/components/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Switch.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM,GAAI,8GAWpB,WAAW,CAAC,eAAe,CAAC,4CA0E9B,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Switch.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM,GAAI,8GAWpB,WAAW,CAAC,eAAe,CAAC,4CA8E9B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "2.9.11",
+  "version": "2.9.13",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -37,8 +37,8 @@
   "devDependencies": {
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "@udixio/theme": "2.1.11",
-    "@udixio/tailwind": "2.4.10"
+    "@udixio/tailwind": "2.4.12",
+    "@udixio/theme": "2.1.12"
   },
   "repository": {
     "type": "git",

package/src/lib/components/Slider.tsx

@@ -75,6 +75,12 @@ export const Slider = ({
   const [value, setValue] = useState(defaultValue);
   const [percent, setpercent] = useState(getpercentFromValue(defaultValue));
   const [mouseDown, setMouseDown] = useState(false);
+
+  useEffect(() => {
+    setValue(defaultValue);
+    setpercent(getpercentFromValue(defaultValue));
+  }, [defaultValue]);
+
   const handleMouseDown = (e: any) => {
     setMouseDown(true);
     setIsChanging(true);

package/src/lib/components/Switch.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { Icon } from '../icon';
 import { motion } from 'motion/react';
@@ -29,6 +29,10 @@ export const Switch = ({
 }: MotionProps<SwitchInterface>) => {
   const [isSelected, setIsSelected] = useState(selected);
 
+  useEffect(() => {
+    setIsSelected(selected);
+  }, [selected]);
+
   const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (disabled) return;
     toggleSwitchState();