@udixio/ui-react 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## 1.3.0 (2025-08-25)
+
+### 🚀 Features
+
+- **doc:** refactor navigation and layout structure for consistency ([644c21a](https://github.com/Udixio/UI/commit/644c21a))
+
+### 🩹 Fixes
+
+- **ui-react:** update `NavigationRailItem` animation handling ([0ed4606](https://github.com/Udixio/UI/commit/0ed4606))
+
+### 🧱 Updated Dependencies
+
+- Updated @udixio/tailwind to 1.3.0
+- Updated @udixio/theme to 1.1.0
+
+### ❤️ Thank You
+
+- Joël VIGREUX
+
 ## 1.2.0 (2025-08-23)
 
 ### 🚀 Features

package/dist/index.cjs

@@ -2,4 +2,4 @@
  * Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  * Copyright 2025 Fonticons, Inc.
- */var Ye={prefix:"fas",iconName:"circle-exclamation",icon:[512,512,["exclamation-circle"],"f06a","M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-376c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM229.3 352a26.7 26.7 0 1 1 53.3 0 26.7 26.7 0 1 1 -53.3 0z"]},ke={prefix:"fas",iconName:"xmark",icon:[384,512,[128473,10005,10006,10060,215,"close","multiply","remove","times"],"f00d","M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]},Ze={prefix:"fas",iconName:"bars",icon:[448,512,["navicon"],"f0c9","M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"]};const Je=({message:e,className:t,duration:n,closeIcon:s=ke,onClose:r,...i})=>{const[f,a]=c.useState(!0),m=ye({className:t,closeIcon:s,duration:n,isVisible:f,onClose:r,message:e});c.useEffect(()=>{n&&setTimeout(()=>{o()},n)},[n]);const o=()=>{a(!1),r==null||r()};return l.jsx(k.AnimatePresence,{children:f&&l.jsx(k.motion.div,{initial:{height:0},animate:{height:"auto"},exit:{height:0},transition:{duration:.1},className:m.snackbar,...i,children:l.jsxs("div",{className:m.container,children:[l.jsx("p",{className:m.supportingText,children:e}),l.jsx(ne,{onClick:()=>o(),className:m.icon,icon:s,label:"close the snackbar"})]})})})},Qe=({selected:e=!1,className:t,activeIcon:n,disabled:s=!1,inactiveIcon:r,onChange:i,onClick:f,onKeyDown:a,ref:m,...o})=>{const[h,x]=c.useState(e),u=w=>{s||(b(),f&&f(w))},y=w=>{s||((w.key===" "||w.key==="Enter")&&(w.preventDefault(),b()),a&&a(w))},b=()=>{x(!h),i==null||i(!h)},L=ge({className:t,isSelected:h,activeIcon:n,inactiveIcon:r,disabled:s,selected:h,onChange:i}),N=c.useRef(null),S=m||N;return l.jsxs(k.motion.div,{role:"switch","aria-checked":h,tabIndex:s?-1:0,onKeyDown:y,onClick:u,ref:S,className:L.switch,...o,children:[l.jsx("input",{type:"hidden",value:h?"1":"0"}),l.jsxs(k.motion.div,{layout:!0,style:{translate:h?"50%":"-50%"},transition:{type:"spring",stiffness:700,damping:30},className:L.handleContainer,children:[l.jsx("div",{className:L.handle,children:(h?n:r)&&l.jsx(_,{className:L.icon,icon:h?n:r})}),l.jsx("div",{className:L.handleStateLayer})]})]})},Me=({className:e,onClick:t,label:n,variant:s="primary",href:r,icon:i,selectedTab:f,setSelectedTab:a,tabsId:m,index:o,onTabSelected:h,scrollable:x=!1,selected:u=!1,ref:y,...b})=>{const L=c.useRef(null),N=y||L,[S,w]=c.useState(u);c.useEffect(()=>{u&&f==null?w(!0):w(f==o&&o!=null)},[f]),c.useEffect(()=>{f==o&&h&&h({ref:N,index:o||0,label:n,icon:i})},[f]);const B=r?"a":"button",j=M=>{a&&a(o??null),t&&t(M)},E=ve({className:e,onTabSelected:h,scrollable:x,selectedTab:f,index:o,tabsId:m,selected:S,variant:s,icon:i,label:n,isSelected:S,setSelectedTab:a,href:r});return l.jsxs(B,{...b,role:"tab","aria-selected":S,ref:N,href:r,className:E.tab,onClick:j,...b,children:[l.jsx("span",{className:E.stateLayer,children:l.jsx(J,{colorName:s==="primary"&&S?"primary":"on-surface",triggerRef:N})}),l.jsxs("span",{className:E.content,children:[i&&l.jsx(_,{icon:i,className:E.icon}),l.jsx("span",{className:E.label,children:n}),S&&l.jsx(k.motion.span,{layoutId:`underline-${m}`,className:E.underline,transition:{duration:.3}})]})]})},Ae=({variant:e="primary",onTabSelected:t,children:n,className:s,selectedTab:r,setSelectedTab:i,scrollable:f=!1})=>{const[a,m]=c.useState(null);let o;r==0||r!=null?o=r:o=a;const h=i||m,x=c.Children.toArray(n).filter(N=>c.isValidElement(N)&&N.type===Me),u=c.useRef(null),y=N=>{if(t==null||t(N),f){const S=u.current,w=N.ref.current;if(S&&w){const B=w.offsetLeft+w.offsetWidth/2-S.offsetWidth/2;S.scrollTo({left:B,behavior:"smooth"})}}},b=c.useMemo(()=>ee(),[]),L=we({children:n,onTabSelected:t,scrollable:f,selectedTab:o,setSelectedTab:h,className:s,variant:e});return l.jsx("div",{ref:u,role:"tablist",className:L.tabs,children:x.map((N,S)=>c.cloneElement(N,{key:S,index:S,variant:e,selectedTab:o,setSelectedTab:h,tabsId:b,onTabSelected:y,scrollable:f}))})},ze=({variant:e="filled",disabled:t=!1,errorText:n,placeholder:s,suffix:r,name:i,label:f,className:a,supportingText:m,trailingIcon:o,leadingIcon:h,type:x="text",textLine:u="singleLine",autoComplete:y="on",onChange:b,value:L,showSupportingText:N=!1,...S})=>{const[w,B]=c.useState(L??""),[j,E]=c.useState(!1),[M,D]=c.useState(!1),[P,I]=c.useState(N);c.useEffect(()=>{B(L??"")},[L]),c.useEffect(()=>{n!=null&&n.length?D(!0):D(!1)},[n]),c.useEffect(()=>{N?I(N):m!=null&&m.length?I(!0):I(!1)},[P,m]),c.useEffect(()=>{j&&D(!1)},[j]);const p=c.useRef(null),C=()=>{p.current&&!j&&p.current.focus()},q=()=>{E(!0)},O=V=>{const W=V.target.value;B(W),D(!1),typeof b=="function"&&b(W)},G=()=>{E(!1)},U=be({showSupportingText:P,isFocused:j,showErrorIcon:M,disabled:t,name:i,label:f,autoComplete:y,className:a,onChange:b,placeholder:s,supportingText:m,type:x,leadingIcon:h,trailingIcon:o,variant:e,errorText:n,value:w,suffix:r,textLine:u}),[Y]=c.useState(ee());let v,g;switch(u){case"multiLine":g=We,v={};break;case"textAreas":g="textarea",v={};break;case"singleLine":default:g="input",v={type:x};break}return l.jsxs("div",{className:U.textField,...S,children:[l.jsxs("fieldset",{onClick:C,className:U.content,children:[l.jsx("div",{className:U.stateLayer}),h&&l.jsx("div",{className:U.leadingIcon,children:c.isValidElement(h)?h:l.jsx(_,{className:"w-5 h-5",icon:h})}),!(!j&&!w.length||e=="filled")&&l.jsx(k.motion.legend,{variants:{hidden:{width:0,padding:0},visible:{width:"auto",padding:"0 8px"}},initial:"hidden",animate:!j&&!w.length?"hidden":"visible",className:"max-w-full ml-2 px-2 text-body-small h-0",transition:{duration:.2},children:l.jsx("span",{className:"transform inline-flex -translate-y-1/2",children:l.jsx(k.motion.span,{className:U.label,transition:{duration:.3},layoutId:Y,children:f})})}),l.jsxs("div",{className:"flex-1 relative",children:[(!j&&!w.length||e=="filled")&&l.jsx(k.motion.label,{htmlFor:i,className:d("absolute left-4  transition-all duration-300",{"text-body-small top-2":e=="filled"&&!(!j&&!w.length),"text-body-large top-1/2 transform -translate-y-1/2":!(e=="filled"&&!(!j&&!w.length))}),transition:{duration:.3},children:l.jsx(k.motion.span,{className:U.label,transition:{duration:.3},layoutId:e=="outlined"?Y:void 0,children:f})}),l.jsx(g,{ref:p,value:w,onChange:O,className:U.input,id:i,name:i,placeholder:j?s??void 0:"",onFocus:q,onBlur:G,disabled:t,autoComplete:y,"aria-invalid":!!(n!=null&&n.length),"aria-label":f,...v})]}),l.jsx("div",{className:U.activeIndicator}),!M&&l.jsxs(l.Fragment,{children:[o&&l.jsx("div",{onClick:V=>{V.stopPropagation()},className:U.trailingIcon,children:c.isValidElement(o)?o:l.jsx(_,{className:"h-5",icon:o})}),!o&&r&&l.jsx("span",{className:U.suffix,children:r})]}),M&&l.jsx("div",{className:d(U.trailingIcon,{" absolute right-0":!o}),children:l.jsx(_,{className:"h-5 text-error",icon:Ye})})]}),P&&l.jsx("p",{className:U.supportingText,children:n!=null&&n.length?n:m!=null&&m.length?m:" "})]})},Te=X("navigationRailItem",({isSelected:e,icon:t,label:n,variant:s})=>({navigationRailItem:d(" group flex flex-col  pt-1 pb-1.5 cursor-pointer",{"text-on-surface-variant":!e,"text-on-secondary-container":e,"gap-2  h-[68px]":s=="vertical","gap-0  h-[66px]":s=="horizontal"}),container:d(" w-fit flex justify-center  relative rounded-full items-center mx-5",{"bg-secondary-container overflow-hidden":e,"gap-2 ":s=="horizontal","gap-0 ":s=="vertical","p-4":!n},n&&["px-4",{"py-1 ":s=="vertical","py-4 ":s=="horizontal"}]),stateLayer:d("  absolute w-full rounded-full h-full left-0 top-0  ",{"group-state-on-surface":!e,"group-state-on-secondary-container":e}),icon:d("size-6 flex"),label:d("w-fit mx-auto text-nowrap",{"text-label-large ":s=="horizontal","text-label-medium":s=="vertical"})})),Ce=({label:e})=>l.jsx("div",{className:" h-9 flex items-center mx-9 mt-3",children:l.jsx("p",{className:"text-label-large text-on-surface-variant",children:e})}),Be=({className:e,onClick:t,label:n,variant:s="vertical",href:r,icon:i,selectedItem:f,setSelectedItem:a,index:m,onItemSelected:o,selected:h=!1,ref:x,transition:u,isExtended:y,iconSelected:b,style:L,extendedOnly:N,children:S,...w})=>{S&&(n=S);const B=c.useRef(null),j=x||B,[E,M]=c.useState(h);c.useEffect(()=>{h&&f==null?M(!0):M(f==m&&m!=null)},[f]),c.useEffect(()=>{f==m&&o&&o({ref:j,index:m||0,label:n,icon:i})},[f]);const D=r?"a":"button",P=p=>{a&&a(m??null),t&&t(p)},I=Te({isExtended:y,extendedOnly:N,className:e,onItemSelected:o,selectedItem:f,index:m,transition:u,selected:E,variant:s,icon:i,label:n,isSelected:E,setSelectedItem:a,href:r,children:n,iconSelected:b});return u={duration:.3,...u},N&&!y?null:l.jsxs(D,{...w,role:"tab","aria-selected":E,ref:j,href:r,className:I.navigationRailItem,onClick:P,style:{transition:u.duration+"s",...L},children:[l.jsxs(k.motion.div,{style:{transition:s=="horizontal"?u.duration+`s, gap ${u.duration/2}s ${u.duration-u.duration/2}s`:u.duration+`s, gap ${u.duration/3}s ${u.duration-u.duration/3}s`},transition:u,className:I.container,children:[l.jsx(k.motion.div,{layout:!0,className:I.stateLayer}),i&&l.jsx(_,{icon:E?b:i,className:I.icon}),l.jsx(k.AnimatePresence,{children:s=="horizontal"&&(()=>{const p={width:0,opacity:0,transition:{...u}},C={width:"auto",opacity:1,transition:{...u,opacity:{duration:u.duration/2,delay:u.duration-u.duration/2}}};return l.jsx(k.motion.span,{initial:p,animate:C,exit:p,className:I.label,children:n})})()})]}),l.jsx(k.AnimatePresence,{children:s=="vertical"&&(()=>{const p={height:0,opacity:0,transition:{...u,opacity:{duration:0}}},C={height:"auto",opacity:1,transition:{...u,opacity:{duration:u.duration/3,delay:u.duration-u.duration/3}}};return l.jsx(k.motion.span,{initial:p,animate:C,exit:p,className:I.label,transition:u,children:n})})()})]})},et=X("navigationRail",({isExtended:e,alignment:t})=>({navigationRail:d("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:d("flex flex-col gap-1 items-start"),menuIcon:"mx-5",segments:d(" flex flex-col  overflow-auto min-w-full mt-10",{"w-full":!e,"w-fit  items-start":e})})),tt=({variant:e="standard",onItemSelected:t,children:n,className:s,selectedItem:r,extended:i,alignment:f="top",menu:a={closed:{icon:Ze,label:"Open menu"},opened:{icon:ke,label:"Close menu"}},style:m,onExtendedChange:o,transition:h,setSelectedItem:x})=>{const[u,y]=c.useState(null),[b,L]=c.useState(i);let N;r==0||r!=null?N=r:N=u;const S=x||y,w=c.useRef(null),B=I=>{t==null||t(I)};function j(I){const p=[];return c.Children.forEach(I,C=>{c.isValidElement(C)&&C.type===c.Fragment?p.push(...j(C.props.children)):p.push(C)}),p}const E=j(n),M=E.filter(I=>c.isValidElement(I)&&I.type===z),D=et({children:n,onItemSelected:t,selectedItem:N,setSelectedItem:S,className:s,variant:e,extended:b,isExtended:b,alignment:f,menu:a,transition:h,onExtendedChange:o});h={duration:.3,...h};const P=c.useRef(!1);return P.current=!1,c.useEffect(()=>{o==null||o(b??!1)},[b]),l.jsxs("div",{style:{transition:h.duration+"s",...m},ref:w,className:D.navigationRail,children:[l.jsxs("div",{className:D.header,children:[l.jsx(ne,{onClick:()=>L(!b),label:b?a==null?void 0:a.opened.label:a==null?void 0:a.closed.label,className:D.menuIcon,icon:b?a.opened.icon:a==null?void 0:a.closed.icon}),M.length>0&&c.cloneElement(M[0],{transition:h,isExtended:b,className:"!shadow-none mx-5 "+M[0].props.className})]}),l.jsx("div",{className:D.segments,children:(()=>{let I=0;return E.map(p=>c.isValidElement(p)&&p.type===Be?c.cloneElement(p,{key:I,index:I++,variant:b?"horizontal":"vertical",selectedItem:N,setSelectedItem:S,onItemSelected:B,transition:h,extendedOnly:P.current,isExtended:b}):c.isValidElement(p)&&p.type===z?null:c.isValidElement(p)&&p.type===Ce?(P.current=!0,b?c.cloneElement(p,{}):null):p)})()}),l.jsx("div",{className:"flex-1 max-h-[160px]"})]})};exports.Button=Ee;exports.Card=qe;exports.Carousel=Ue;exports.CarouselItem=Re;exports.CustomScroll=T;exports.Divider=Xe;exports.Fab=z;exports.Icon=_;exports.IconButton=ne;exports.NavigationRail=tt;exports.NavigationRailItem=Be;exports.NavigationRailSection=Ce;exports.ProgressIndicator=Ne;exports.RippleEffect=J;exports.Slider=_e;exports.SmoothScroll=Fe;exports.Snackbar=Je;exports.Switch=Qe;exports.SyncedFixedWrapper=Se;exports.Tab=Me;exports.Tabs=Ae;exports.TextField=ze;exports.ToolTip=te;exports.buttonStyle=ce;exports.cardStyle=ie;exports.carouselItemStyle=ue;exports.carouselStyle=fe;exports.classNames=d;exports.classnames=le;exports.customScrollStyle=Le;exports.defaultClassNames=X;exports.dividerStyle=de;exports.fabStyle=me;exports.getClassNames=ae;exports.iconButtonStyle=pe;exports.normalize=Ie;exports.progressIndicatorStyle=he;exports.sliderStyle=xe;exports.snackbarStyle=ye;exports.switchStyle=ge;exports.tabStyle=ve;exports.tabsStyle=we;exports.textFieldStyle=be;exports.toolStyle=je;
+ */var Ye={prefix:"fas",iconName:"circle-exclamation",icon:[512,512,["exclamation-circle"],"f06a","M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-376c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM229.3 352a26.7 26.7 0 1 1 53.3 0 26.7 26.7 0 1 1 -53.3 0z"]},ke={prefix:"fas",iconName:"xmark",icon:[384,512,[128473,10005,10006,10060,215,"close","multiply","remove","times"],"f00d","M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]},Ze={prefix:"fas",iconName:"bars",icon:[448,512,["navicon"],"f0c9","M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"]};const Je=({message:e,className:t,duration:n,closeIcon:s=ke,onClose:r,...i})=>{const[f,a]=c.useState(!0),m=ye({className:t,closeIcon:s,duration:n,isVisible:f,onClose:r,message:e});c.useEffect(()=>{n&&setTimeout(()=>{o()},n)},[n]);const o=()=>{a(!1),r==null||r()};return l.jsx(k.AnimatePresence,{children:f&&l.jsx(k.motion.div,{initial:{height:0},animate:{height:"auto"},exit:{height:0},transition:{duration:.1},className:m.snackbar,...i,children:l.jsxs("div",{className:m.container,children:[l.jsx("p",{className:m.supportingText,children:e}),l.jsx(ne,{onClick:()=>o(),className:m.icon,icon:s,label:"close the snackbar"})]})})})},Qe=({selected:e=!1,className:t,activeIcon:n,disabled:s=!1,inactiveIcon:r,onChange:i,onClick:f,onKeyDown:a,ref:m,...o})=>{const[h,x]=c.useState(e),u=w=>{s||(b(),f&&f(w))},y=w=>{s||((w.key===" "||w.key==="Enter")&&(w.preventDefault(),b()),a&&a(w))},b=()=>{x(!h),i==null||i(!h)},L=ge({className:t,isSelected:h,activeIcon:n,inactiveIcon:r,disabled:s,selected:h,onChange:i}),N=c.useRef(null),S=m||N;return l.jsxs(k.motion.div,{role:"switch","aria-checked":h,tabIndex:s?-1:0,onKeyDown:y,onClick:u,ref:S,className:L.switch,...o,children:[l.jsx("input",{type:"hidden",value:h?"1":"0"}),l.jsxs(k.motion.div,{layout:!0,style:{translate:h?"50%":"-50%"},transition:{type:"spring",stiffness:700,damping:30},className:L.handleContainer,children:[l.jsx("div",{className:L.handle,children:(h?n:r)&&l.jsx(_,{className:L.icon,icon:h?n:r})}),l.jsx("div",{className:L.handleStateLayer})]})]})},Me=({className:e,onClick:t,label:n,variant:s="primary",href:r,icon:i,selectedTab:f,setSelectedTab:a,tabsId:m,index:o,onTabSelected:h,scrollable:x=!1,selected:u=!1,ref:y,...b})=>{const L=c.useRef(null),N=y||L,[S,w]=c.useState(u);c.useEffect(()=>{u&&f==null?w(!0):w(f==o&&o!=null)},[f]),c.useEffect(()=>{f==o&&h&&h({ref:N,index:o||0,label:n,icon:i})},[f]);const B=r?"a":"button",j=M=>{a&&a(o??null),t&&t(M)},E=ve({className:e,onTabSelected:h,scrollable:x,selectedTab:f,index:o,tabsId:m,selected:S,variant:s,icon:i,label:n,isSelected:S,setSelectedTab:a,href:r});return l.jsxs(B,{...b,role:"tab","aria-selected":S,ref:N,href:r,className:E.tab,onClick:j,...b,children:[l.jsx("span",{className:E.stateLayer,children:l.jsx(J,{colorName:s==="primary"&&S?"primary":"on-surface",triggerRef:N})}),l.jsxs("span",{className:E.content,children:[i&&l.jsx(_,{icon:i,className:E.icon}),l.jsx("span",{className:E.label,children:n}),S&&l.jsx(k.motion.span,{layoutId:`underline-${m}`,className:E.underline,transition:{duration:.3}})]})]})},Ae=({variant:e="primary",onTabSelected:t,children:n,className:s,selectedTab:r,setSelectedTab:i,scrollable:f=!1})=>{const[a,m]=c.useState(null);let o;r==0||r!=null?o=r:o=a;const h=i||m,x=c.Children.toArray(n).filter(N=>c.isValidElement(N)&&N.type===Me),u=c.useRef(null),y=N=>{if(t==null||t(N),f){const S=u.current,w=N.ref.current;if(S&&w){const B=w.offsetLeft+w.offsetWidth/2-S.offsetWidth/2;S.scrollTo({left:B,behavior:"smooth"})}}},b=c.useMemo(()=>ee(),[]),L=we({children:n,onTabSelected:t,scrollable:f,selectedTab:o,setSelectedTab:h,className:s,variant:e});return l.jsx("div",{ref:u,role:"tablist",className:L.tabs,children:x.map((N,S)=>c.cloneElement(N,{key:S,index:S,variant:e,selectedTab:o,setSelectedTab:h,tabsId:b,onTabSelected:y,scrollable:f}))})},ze=({variant:e="filled",disabled:t=!1,errorText:n,placeholder:s,suffix:r,name:i,label:f,className:a,supportingText:m,trailingIcon:o,leadingIcon:h,type:x="text",textLine:u="singleLine",autoComplete:y="on",onChange:b,value:L,showSupportingText:N=!1,...S})=>{const[w,B]=c.useState(L??""),[j,E]=c.useState(!1),[M,D]=c.useState(!1),[P,I]=c.useState(N);c.useEffect(()=>{B(L??"")},[L]),c.useEffect(()=>{n!=null&&n.length?D(!0):D(!1)},[n]),c.useEffect(()=>{N?I(N):m!=null&&m.length?I(!0):I(!1)},[P,m]),c.useEffect(()=>{j&&D(!1)},[j]);const p=c.useRef(null),C=()=>{p.current&&!j&&p.current.focus()},q=()=>{E(!0)},O=V=>{const W=V.target.value;B(W),D(!1),typeof b=="function"&&b(W)},G=()=>{E(!1)},U=be({showSupportingText:P,isFocused:j,showErrorIcon:M,disabled:t,name:i,label:f,autoComplete:y,className:a,onChange:b,placeholder:s,supportingText:m,type:x,leadingIcon:h,trailingIcon:o,variant:e,errorText:n,value:w,suffix:r,textLine:u}),[Y]=c.useState(ee());let v,g;switch(u){case"multiLine":g=We,v={};break;case"textAreas":g="textarea",v={};break;case"singleLine":default:g="input",v={type:x};break}return l.jsxs("div",{className:U.textField,...S,children:[l.jsxs("fieldset",{onClick:C,className:U.content,children:[l.jsx("div",{className:U.stateLayer}),h&&l.jsx("div",{className:U.leadingIcon,children:c.isValidElement(h)?h:l.jsx(_,{className:"w-5 h-5",icon:h})}),!(!j&&!w.length||e=="filled")&&l.jsx(k.motion.legend,{variants:{hidden:{width:0,padding:0},visible:{width:"auto",padding:"0 8px"}},initial:"hidden",animate:!j&&!w.length?"hidden":"visible",className:"max-w-full ml-2 px-2 text-body-small h-0",transition:{duration:.2},children:l.jsx("span",{className:"transform inline-flex -translate-y-1/2",children:l.jsx(k.motion.span,{className:U.label,transition:{duration:.3},layoutId:Y,children:f})})}),l.jsxs("div",{className:"flex-1 relative",children:[(!j&&!w.length||e=="filled")&&l.jsx(k.motion.label,{htmlFor:i,className:d("absolute left-4  transition-all duration-300",{"text-body-small top-2":e=="filled"&&!(!j&&!w.length),"text-body-large top-1/2 transform -translate-y-1/2":!(e=="filled"&&!(!j&&!w.length))}),transition:{duration:.3},children:l.jsx(k.motion.span,{className:U.label,transition:{duration:.3},layoutId:e=="outlined"?Y:void 0,children:f})}),l.jsx(g,{ref:p,value:w,onChange:O,className:U.input,id:i,name:i,placeholder:j?s??void 0:"",onFocus:q,onBlur:G,disabled:t,autoComplete:y,"aria-invalid":!!(n!=null&&n.length),"aria-label":f,...v})]}),l.jsx("div",{className:U.activeIndicator}),!M&&l.jsxs(l.Fragment,{children:[o&&l.jsx("div",{onClick:V=>{V.stopPropagation()},className:U.trailingIcon,children:c.isValidElement(o)?o:l.jsx(_,{className:"h-5",icon:o})}),!o&&r&&l.jsx("span",{className:U.suffix,children:r})]}),M&&l.jsx("div",{className:d(U.trailingIcon,{" absolute right-0":!o}),children:l.jsx(_,{className:"h-5 text-error",icon:Ye})})]}),P&&l.jsx("p",{className:U.supportingText,children:n!=null&&n.length?n:m!=null&&m.length?m:" "})]})},Te=X("navigationRailItem",({isSelected:e,icon:t,label:n,variant:s})=>({navigationRailItem:d(" group flex flex-col  pt-1 pb-1.5 cursor-pointer",{"text-on-surface-variant":!e,"text-on-secondary-container":e,"gap-2  h-[68px]":s=="vertical","gap-0  h-[66px]":s=="horizontal"}),container:d(" w-fit flex justify-center  relative rounded-full items-center mx-5",{"bg-secondary-container overflow-hidden":e,"gap-2 ":s=="horizontal","gap-0 ":s=="vertical","p-4":!n},n&&["px-4",{"py-1 ":s=="vertical","py-4 ":s=="horizontal"}]),stateLayer:d("  absolute w-full rounded-full h-full left-0 top-0  ",{"group-state-on-surface":!e,"group-state-on-secondary-container":e}),icon:d("size-6 flex"),label:d("w-fit mx-auto text-nowrap",{"text-label-large ":s=="horizontal","text-label-medium":s=="vertical"})})),Ce=({label:e})=>l.jsx("div",{className:" h-9 flex items-center mx-9 mt-3",children:l.jsx("p",{className:"text-label-large text-on-surface-variant",children:e})}),Be=({className:e,onClick:t,label:n,variant:s="vertical",href:r,icon:i,selectedItem:f,setSelectedItem:a,index:m,onItemSelected:o,selected:h=!1,ref:x,transition:u,isExtended:y,iconSelected:b,style:L,extendedOnly:N,children:S,...w})=>{S&&(n=S);const B=c.useRef(null),j=x||B,[E,M]=c.useState(h);c.useEffect(()=>{h&&f==null?M(!0):M(f==m&&m!=null)},[f]),c.useEffect(()=>{f==m&&o&&o({ref:j,index:m||0,label:n,icon:i})},[f]);const D=r?"a":"button",P=p=>{a&&a(m??null),t&&t(p)},I=Te({isExtended:y,extendedOnly:N,className:e,onItemSelected:o,selectedItem:f,index:m,transition:u,selected:E,variant:s,icon:i,label:n,isSelected:E,setSelectedItem:a,href:r,children:n,iconSelected:b});return u={duration:.3,...u},N&&!y?null:l.jsxs(D,{...w,role:"tab","aria-selected":E,ref:j,href:r,className:I.navigationRailItem,onClick:P,style:{transition:u.duration+"s",...L},children:[l.jsxs(k.motion.div,{style:{transition:s=="horizontal"?u.duration+`s, gap ${u.duration/2}s ${u.duration-u.duration/2}s`:u.duration+`s, gap ${u.duration/3}s ${u.duration-u.duration/3}s`},transition:u,className:I.container,children:[l.jsx(k.motion.div,{layout:!0,className:I.stateLayer}),i&&l.jsx(_,{icon:E?b:i,className:I.icon}),l.jsx(k.AnimatePresence,{children:s=="horizontal"&&(()=>{const p={width:0,opacity:0,transition:{...u}},C={width:"auto",opacity:1,transition:{...u,opacity:{duration:u.duration/2,delay:u.duration-u.duration/2}}};return l.jsx(k.motion.span,{initial:p,animate:C,exit:p,className:I.label,children:n})})()})]}),l.jsx(k.AnimatePresence,{children:s=="vertical"&&(()=>{const p={height:0,opacity:0,transition:{...u,opacity:{duration:0}}},C={height:"auto",opacity:1,transition:{...u,opacity:{duration:u.duration/3,delay:u.duration-u.duration/3}}};return l.jsx(k.motion.span,{initial:C,animate:C,exit:p,className:I.label,transition:u,children:n})})()})]})},et=X("navigationRail",({isExtended:e,alignment:t})=>({navigationRail:d("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:d("flex flex-col gap-1 items-start"),menuIcon:"mx-5",segments:d(" flex flex-col  overflow-auto min-w-full mt-10",{"w-full":!e,"w-fit  items-start":e})})),tt=({variant:e="standard",onItemSelected:t,children:n,className:s,selectedItem:r,extended:i,alignment:f="top",menu:a={closed:{icon:Ze,label:"Open menu"},opened:{icon:ke,label:"Close menu"}},style:m,onExtendedChange:o,transition:h,setSelectedItem:x})=>{const[u,y]=c.useState(null),[b,L]=c.useState(i);let N;r==0||r!=null?N=r:N=u;const S=x||y,w=c.useRef(null),B=I=>{t==null||t(I)};function j(I){const p=[];return c.Children.forEach(I,C=>{c.isValidElement(C)&&C.type===c.Fragment?p.push(...j(C.props.children)):p.push(C)}),p}const E=j(n),M=E.filter(I=>c.isValidElement(I)&&I.type===z),D=et({children:n,onItemSelected:t,selectedItem:N,setSelectedItem:S,className:s,variant:e,extended:b,isExtended:b,alignment:f,menu:a,transition:h,onExtendedChange:o});h={duration:.3,...h};const P=c.useRef(!1);return P.current=!1,c.useEffect(()=>{o==null||o(b??!1)},[b]),l.jsxs("div",{style:{transition:h.duration+"s",...m},ref:w,className:D.navigationRail,children:[l.jsxs("div",{className:D.header,children:[l.jsx(ne,{onClick:()=>L(!b),label:b?a==null?void 0:a.opened.label:a==null?void 0:a.closed.label,className:D.menuIcon,icon:b?a.opened.icon:a==null?void 0:a.closed.icon}),M.length>0&&c.cloneElement(M[0],{transition:h,isExtended:b,className:"!shadow-none mx-5 "+M[0].props.className})]}),l.jsx("div",{className:D.segments,children:(()=>{let I=0;return E.map(p=>c.isValidElement(p)&&p.type===Be?c.cloneElement(p,{key:I,index:I++,variant:b?"horizontal":"vertical",selectedItem:N,setSelectedItem:S,onItemSelected:B,transition:h,extendedOnly:P.current,isExtended:b}):c.isValidElement(p)&&p.type===z?null:c.isValidElement(p)&&p.type===Ce?(P.current=!0,b?c.cloneElement(p,{}):null):p)})()}),l.jsx("div",{className:"flex-1 max-h-[160px]"})]})};exports.Button=Ee;exports.Card=qe;exports.Carousel=Ue;exports.CarouselItem=Re;exports.CustomScroll=T;exports.Divider=Xe;exports.Fab=z;exports.Icon=_;exports.IconButton=ne;exports.NavigationRail=tt;exports.NavigationRailItem=Be;exports.NavigationRailSection=Ce;exports.ProgressIndicator=Ne;exports.RippleEffect=J;exports.Slider=_e;exports.SmoothScroll=Fe;exports.Snackbar=Je;exports.Switch=Qe;exports.SyncedFixedWrapper=Se;exports.Tab=Me;exports.Tabs=Ae;exports.TextField=ze;exports.ToolTip=te;exports.buttonStyle=ce;exports.cardStyle=ie;exports.carouselItemStyle=ue;exports.carouselStyle=fe;exports.classNames=d;exports.classnames=le;exports.customScrollStyle=Le;exports.defaultClassNames=X;exports.dividerStyle=de;exports.fabStyle=me;exports.getClassNames=ae;exports.iconButtonStyle=pe;exports.normalize=Ie;exports.progressIndicatorStyle=he;exports.sliderStyle=xe;exports.snackbarStyle=ye;exports.switchStyle=ge;exports.tabStyle=ve;exports.tabsStyle=we;exports.textFieldStyle=be;exports.toolStyle=je;

package/dist/index.js

@@ -1,7 +1,7 @@
 import { jsx as u, jsxs as U, Fragment as re } from "react/jsx-runtime";
 import { clsx as de } from "clsx";
 import { extendTailwindMerge as we } from "tailwind-merge";
-import Y, { useState as S, useEffect as D, useRef as V, useLayoutEffect as fe, isValidElement as ee, cloneElement as le, useMemo as ve, Children as be, Fragment as Ne } from "react";
+import Y, { useState as C, useEffect as D, useRef as V, useLayoutEffect as fe, isValidElement as ee, cloneElement as le, useMemo as ve, Children as be, Fragment as Ne } from "react";
 import { motion as j, AnimatePresence as z, useScroll as Le, useMotionValueEvent as se, motionValue as me, useTransform as oe } from "motion/react";
 import { throttle as Ee } from "throttle-debounce";
 import { createPortal as Ie } from "react-dom";
@@ -794,11 +794,11 @@ const Se = (e) => {
   className: l,
   ...n
 }) => {
-  const [s, i] = S(t), [a] = S(1.5);
+  const [s, i] = C(t), [a] = C(1.5);
   D(() => {
     t > 100 && (t = 100), t < 0 && (t = 0), i(t);
   }, [t]);
-  const [f, o] = S(!0), p = () => f ? a : a * 0.5;
+  const [f, o] = C(!0), p = () => f ? a : a * 0.5;
   D(() => {
     if ((e === "circular-indeterminate" || e === "linear-indeterminate") && s !== 100) {
       const v = setInterval(() => {
@@ -807,7 +807,7 @@ const Se = (e) => {
       return () => clearInterval(v);
     }
   }, [e, f, s]);
-  const [h, c] = S(!1);
+  const [h, c] = C(!1);
   D(() => {
     if (s >= 100) {
       const v = setTimeout(() => {
@@ -929,7 +929,7 @@ const Se = (e) => {
         borderRadius: { duration: 0.3, delay: 0.3 }
       }
     }
-  }, [l, n] = S(!0), [s, i] = S(!1), [a, f] = S({ x: 0, y: 0 });
+  }, [l, n] = C(!0), [s, i] = C(!1), [a, f] = C({ x: 0, y: 0 });
   D(() => {
     s && (n(!0), n(!1));
   }, [s]), D(() => {
@@ -1008,7 +1008,7 @@ const Se = (e) => {
   throttleDuration: i = 75
 }) => {
   var $, F;
-  const a = V(null), f = V(null), [o, p] = S({
+  const a = V(null), f = V(null), [o, p] = C({
     width: null,
     height: null
   });
@@ -1068,7 +1068,7 @@ const Se = (e) => {
   }), se(L, "change", (M) => {
     w(M, "y");
   });
-  const [B, b] = S(!1);
+  const [B, b] = C(!1);
   fe(() => {
     B || !c.current || !h.current || !l || (l({
       scrollProgress: 0,
@@ -1077,7 +1077,7 @@ const Se = (e) => {
       scrollVisible: t == "vertical" ? c.current.height : c.current.width
     }), b(!0));
   }, [c, h, l]), h.current = y(), c.current = v();
-  const [I, R] = S(!1), P = _e({
+  const [I, R] = C(!1), P = _e({
     isDragging: I,
     children: e,
     className: n,
@@ -1086,7 +1086,7 @@ const Se = (e) => {
     scrollSize: r,
     draggable: s,
     throttleDuration: i
-  }), [W, k] = S(0), [m, C] = S(0), q = (M) => {
+  }), [W, k] = C(0), [m, S] = C(0), q = (M) => {
     if (!s) return;
     const X = a.current;
     if (!X || W == null) return;
@@ -1094,7 +1094,7 @@ const Se = (e) => {
     X.scrollLeft = m - J;
   }, K = (M) => {
     const X = a.current;
-    X && (R(!0), k(M.pageX - X.offsetLeft), C(X.scrollLeft));
+    X && (R(!0), k(M.pageX - X.offsetLeft), S(X.scrollLeft));
   }, Z = (M) => {
     I && (M.preventDefault(), q(M));
   }, H = () => {
@@ -1161,7 +1161,7 @@ const Se = (e) => {
   throttleDuration: l = 25,
   ...n
 }) => {
-  const [s, i] = S(null), a = me((s == null ? void 0 : s.scrollProgress) ?? 0), f = oe(
+  const [s, i] = C(null), a = me((s == null ? void 0 : s.scrollProgress) ?? 0), f = oe(
     a,
     [0, 1],
     [0, 1 - ((s == null ? void 0 : s.scrollVisible) ?? 0) / ((s == null ? void 0 : s.scrollTotal) ?? 0)]
@@ -1204,7 +1204,7 @@ const Se = (e) => {
   targetRef: e,
   children: t
 }) => {
-  const [r, l] = S(null), n = V(null), s = () => {
+  const [r, l] = C(null), n = V(null), s = () => {
     const i = e.current;
     if (!i) return;
     const a = i.getBoundingClientRect();
@@ -1258,12 +1258,12 @@ const Se = (e) => {
     P(c);
   }, [c]), N = { duration: 0.3, ...N };
   let W;
-  h ? h && (W = (C) => {
-    t && C.preventDefault();
+  h ? h && (W = (S) => {
+    t && S.preventDefault();
     const q = !R;
     P(q), h(q);
-  }) : W = (C) => {
-    t && C.preventDefault(), p && p(C);
+  }) : W = (S) => {
+    t && S.preventDefault(), p && p(S);
   };
   const k = Ce({
     allowShapeTransformation: L,
@@ -1424,7 +1424,7 @@ const Se = (e) => {
     scrollSensitivity: o
   }), v = Y.Children.toArray(r).filter(
     (g) => Y.isValidElement(g) && g.type === Qe
-  ), L = V(null), [N, E] = S([]), [w, B] = S(null), b = () => {
+  ), L = V(null), [N, E] = C([]), [w, B] = C(null), b = () => {
     var X;
     if (!L.current || !c.current || !w) return [];
     const { scrollVisible: g, scrollProgress: x } = w;
@@ -1445,7 +1445,7 @@ const Se = (e) => {
       let T = Je(M, [0, 1], [0, i[1]]);
       T < i[0] && (T = i[0]), M--, F[O.originalIndex] = T;
     }), F;
-  }, I = V([]).current, [R, P] = S(0);
+  }, I = V([]).current, [R, P] = C(0);
   D(() => {
     f && f(R);
   }, [R]), I.length !== v.length && v.forEach((g, x) => {
@@ -1466,7 +1466,7 @@ const Se = (e) => {
       0,
       1 - (((H = c.current) == null ? void 0 : H.clientWidth) ?? 0) / (((A = L == null ? void 0 : L.current) == null ? void 0 : A.clientWidth) ?? 0)
     ]
-  ), C = oe(
+  ), S = oe(
     m,
     (g) => `${-g * 100}%`
   ), q = (g) => {
@@ -1476,7 +1476,7 @@ const Se = (e) => {
     const g = b();
     E(g);
   }, [w]);
-  const [K, Z] = S(0);
+  const [K, Z] = C(0);
   return fe(() => {
     let g = i[1];
     w && g > w.scrollVisible && (g = w.scrollVisible);
@@ -1498,7 +1498,7 @@ const Se = (e) => {
             transitionDuration: "0.5s",
             transitionTimingFunction: "ease-out",
             gap: `${a}px`,
-            x: C
+            x: S
           },
           children: W
         }
@@ -1555,10 +1555,10 @@ const ye = ({
   if (!l && !a)
     throw new Error("ToolTip must have a child or a targetRef");
   Array.isArray(o) || (o = [o]), t && !Array.isArray(t) && (t = [t]);
-  const h = V(null), c = a || h, [y, v] = S(null), [L] = S(ce()), [N, E] = S(!1), w = V(null);
+  const h = V(null), c = a || h, [y, v] = C(null), [L] = C(ce()), [N, E] = C(!1), w = V(null);
   D(() => {
-    const m = (C) => {
-      v(C.detail);
+    const m = (S) => {
+      v(S.detail);
     };
     return document.addEventListener("tooltip-update", m), () => {
       document.removeEventListener(
@@ -1609,7 +1609,7 @@ const ye = ({
   }, [c, o, L, N]);
   const W = !a && ee(l) ? le(l, { ref: h }) : l;
   if (!i && typeof window < "u" && c != null && c.current && !i) {
-    const m = c.current.getBoundingClientRect(), C = window.innerWidth, q = window.innerHeight, K = m.left / C, Z = m.top / q;
+    const m = c.current.getBoundingClientRect(), S = window.innerWidth, q = window.innerHeight, K = m.left / S, Z = m.top / q;
     e === "plain" ? K < 1 / 3 ? i = "right" : K > 2 / 3 ? i = "left" : i = Z > 0.5 ? "top" : "bottom" : K < 1 / 2 && Z < 1 / 2 ? i = "bottom-right" : K > 1 / 2 && Z < 1 / 2 ? i = "bottom-left" : K > 1 / 2 && Z > 1 / 2 ? i = "top-left" : K < 1 / 2 && Z > 1 / 2 && (i = "top-right");
   }
   const k = Ke({
@@ -1649,14 +1649,14 @@ const ye = ({
             children: [
               n && /* @__PURE__ */ u("div", { className: k.subHead, children: n }),
               /* @__PURE__ */ u("div", { className: k.supportingText, children: s }),
-              t && /* @__PURE__ */ u("div", { className: k.actions, children: Array.isArray(t) && t.map((m, C) => /* @__PURE__ */ u(
+              t && /* @__PURE__ */ u("div", { className: k.actions, children: Array.isArray(t) && t.map((m, S) => /* @__PURE__ */ u(
                 Ze,
                 {
                   size: "small",
                   variant: "text",
                   ...m
                 },
-                C
+                S
               )) })
             ]
           }
@@ -1793,10 +1793,10 @@ const ye = ({
   n || (n = s);
   const [b, I] = Y.useState(a);
   let R;
-  i ? i && (R = (C) => {
-    r && C.preventDefault(), I(!b), i(!!b);
-  }, o = b && h || o) : R = (C) => {
-    r && C.preventDefault(), f && f(C);
+  i ? i && (R = (S) => {
+    r && S.preventDefault(), I(!b), i(!!b);
+  }, o = b && h || o) : R = (S) => {
+    r && S.preventDefault(), f && f(S);
   }, D(() => {
     I(a);
   }, [a]);
@@ -1904,7 +1904,7 @@ const ye = ({
   }, c = (g = !1) => g ? i : i == 1 / 0 ? a[(a == null ? void 0 : a.length) - 1].value : i, y = (g = !1) => g ? s : s == -1 / 0 ? a[0].value : s, v = (g) => {
     const x = y(!1);
     return (c(!1) - x) * g / 100 + x;
-  }, [L, N] = S(!1), E = V(null), w = f || E, [B, b] = S(n), [I, R] = S(h(n)), [P, W] = S(!1), k = (g) => {
+  }, [L, N] = C(!1), E = V(null), w = f || E, [B, b] = C(n), [I, R] = C(h(n)), [P, W] = C(!1), k = (g) => {
     W(!0), N(!0), q(g);
   }, m = () => {
     W(!1), N(!1);
@@ -1912,7 +1912,7 @@ const ye = ({
   D(() => (P ? (window.addEventListener("mouseup", m), window.addEventListener("mousemove", q), window.addEventListener("touchend", m), window.addEventListener("touchmove", q)) : (window.removeEventListener("mouseup", m), window.removeEventListener("mousemove", q), window.removeEventListener("touchend", m), window.removeEventListener("touchmove", q)), () => {
     window.removeEventListener("mouseup", m), window.removeEventListener("mousemove", q), window.removeEventListener("touchend", m), window.removeEventListener("touchmove", q);
   }), [P]);
-  const C = je({
+  const S = je({
     className: e,
     isChanging: L,
     marks: a,
@@ -1959,7 +1959,7 @@ const ye = ({
       let X = F.value === 1 / 0 ? c() : F.value === -1 / 0 ? y() : F.value, O = $.value === 1 / 0 ? c() : $.value === -1 / 0 ? y() : $.value;
       return X = Math.abs(X - x), O = Math.abs(O - x), X < O ? F : $;
     }).value), x >= c() && (x = c(!0)), x <= y() && (x = y(!0)), g = h(x), b(x), R(g), o && o(x);
-  }, [Z, H] = S(0);
+  }, [Z, H] = C(0);
   return D(() => {
     const g = () => {
       w.current && H(w.current.offsetWidth);
@@ -1998,7 +1998,7 @@ const ye = ({
       "aria-valuemax": c(!0),
       "aria-valuenow": B,
       "aria-valuetext": B.toString(),
-      className: C.slider,
+      className: S.slider,
       onMouseDown: k,
       onClick: q,
       ref: w,
@@ -2010,14 +2010,14 @@ const ye = ({
         /* @__PURE__ */ u(
           "div",
           {
-            className: C.activeTrack,
+            className: S.activeTrack,
             style: { flex: I / 100 }
           }
         ),
-        /* @__PURE__ */ u("div", { className: C.handle, children: /* @__PURE__ */ u(z, { children: L && /* @__PURE__ */ u(
+        /* @__PURE__ */ u("div", { className: S.handle, children: /* @__PURE__ */ u(z, { children: L && /* @__PURE__ */ u(
           j.div,
           {
-            className: C.valueIndicator,
+            className: S.valueIndicator,
             initial: "hidden",
             animate: "visible",
             exit: "hidden",
@@ -2037,7 +2037,7 @@ const ye = ({
         /* @__PURE__ */ u(
           "div",
           {
-            className: C.inactiveTrack,
+            className: S.inactiveTrack,
             style: { flex: 1 - I / 100 }
           }
         ),
@@ -2051,7 +2051,7 @@ const ye = ({
               return M <= I - F ? $ = !0 : M >= I + F && ($ = !1), /* @__PURE__ */ u(
                 "div",
                 {
-                  className: d(C.dot, {
+                  className: d(S.dot, {
                     "bg-primary-container": $ != null && $,
                     "bg-primary": $ != null && !$
                   }),
@@ -2094,7 +2094,7 @@ const bt = ({
   onClose: n,
   ...s
 }) => {
-  const [i, a] = S(!0), f = Fe({
+  const [i, a] = C(!0), f = Fe({
     className: t,
     closeIcon: l,
     duration: r,
@@ -2145,7 +2145,7 @@ const bt = ({
   ref: f,
   ...o
 }) => {
-  const [p, h] = S(e), c = (w) => {
+  const [p, h] = C(e), c = (w) => {
     l || (v(), i && i(w));
   }, y = (w) => {
     l || ((w.key === " " || w.key === "Enter") && (w.preventDefault(), v()), a && a(w));
@@ -2216,7 +2216,7 @@ const bt = ({
   ref: y,
   ...v
 }) => {
-  const L = V(null), N = y || L, [E, w] = S(c);
+  const L = V(null), N = y || L, [E, w] = C(c);
   D(() => {
     c && i == null ? w(!0) : w(i == o && o != null);
   }, [i]), D(() => {
@@ -2287,7 +2287,7 @@ const bt = ({
   setSelectedTab: s,
   scrollable: i = !1
 }) => {
-  const [a, f] = S(
+  const [a, f] = C(
     null
   );
   let o;
@@ -2341,7 +2341,7 @@ const bt = ({
   showSupportingText: N = !1,
   ...E
 }) => {
-  const [w, B] = S(L ?? ""), [b, I] = S(!1), [R, P] = S(!1), [W, k] = S(
+  const [w, B] = C(L ?? ""), [b, I] = C(!1), [R, P] = C(!1), [W, k] = C(
     N
   );
   D(() => {
@@ -2353,7 +2353,7 @@ const bt = ({
   }, [W, f]), D(() => {
     b && P(!1);
   }, [b]);
-  const m = Y.useRef(null), C = () => {
+  const m = Y.useRef(null), S = () => {
     m.current && !b && m.current.focus();
   }, q = () => {
     I(!0);
@@ -2382,7 +2382,7 @@ const bt = ({
     value: w,
     suffix: n,
     textLine: c
-  }), [A] = S(ce());
+  }), [A] = C(ce());
   let g, x;
   switch (c) {
     case "multiLine":
@@ -2397,7 +2397,7 @@ const bt = ({
       break;
   }
   return /* @__PURE__ */ U("div", { className: H.textField, ...E, children: [
-    /* @__PURE__ */ U("fieldset", { onClick: C, className: H.content, children: [
+    /* @__PURE__ */ U("fieldset", { onClick: S, className: H.content, children: [
       /* @__PURE__ */ u("div", { className: H.stateLayer }),
       p && /* @__PURE__ */ u("div", { className: H.leadingIcon, children: Y.isValidElement(p) ? p : /* @__PURE__ */ u(Q, { className: "w-5 h-5", icon: p }) }),
       !(!b && !w.length || e == "filled") && /* @__PURE__ */ u(
@@ -2561,7 +2561,7 @@ const bt = ({
   ...w
 }) => {
   E && (r = E);
-  const B = V(null), b = h || B, [I, R] = S(p);
+  const B = V(null), b = h || B, [I, R] = C(p);
   D(() => {
     p && i == null ? R(!0) : R(i == f && f != null);
   }, [i]), D(() => {
@@ -2631,7 +2631,7 @@ const bt = ({
                     transition: {
                       ...c
                     }
-                  }, C = {
+                  }, S = {
                     width: "auto",
                     opacity: 1,
                     transition: {
@@ -2646,7 +2646,7 @@ const bt = ({
                     j.span,
                     {
                       initial: m,
-                      animate: C,
+                      animate: S,
                       exit: m,
                       className: k.label,
                       children: r
@@ -2666,7 +2666,7 @@ const bt = ({
                   duration: 0
                 }
               }
-            }, C = {
+            }, S = {
               height: "auto",
               opacity: 1,
               transition: {
@@ -2680,8 +2680,8 @@ const bt = ({
             return /* @__PURE__ */ u(
               j.span,
               {
-                initial: m,
-                animate: C,
+                initial: S,
+                animate: S,
                 exit: m,
                 className: k.label,
                 transition: c,
@@ -2732,7 +2732,7 @@ const bt = ({
   transition: p,
   setSelectedItem: h
 }) => {
-  const [c, y] = S(null), [v, L] = S(s);
+  const [c, y] = C(null), [v, L] = C(s);
   let N;
   n == 0 || n != null ? N = n : N = c;
   const E = h || y, w = V(null), B = (k) => {
@@ -2740,8 +2740,8 @@ const bt = ({
   };
   function b(k) {
     const m = [];
-    return be.forEach(k, (C) => {
-      ee(C) && C.type === Ne ? m.push(...b(C.props.children)) : m.push(C);
+    return be.forEach(k, (S) => {
+      ee(S) && S.type === Ne ? m.push(...b(S.props.children)) : m.push(S);
     }), m;
   }
   const I = b(r), R = I.filter(

package/dist/lib/interfaces/navigation-rail-item.interface.d.ts

@@ -1,5 +1,4 @@
 import { ActionOrLink } from '../utils';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { Dispatch, RefObject, SetStateAction } from 'react';
 import { Transition } from 'motion';
 import { Icon } from '../icon';
@@ -9,7 +8,7 @@ export type NavProps = {
     label?: string;
     children?: string;
     icon: Icon;
-    iconSelected: IconDefinition;
+    iconSelected: Icon;
     selectedItem?: number | null;
     setSelectedItem?: Dispatch<SetStateAction<number | null>>;
     onItemSelected?: (args: {

package/dist/lib/interfaces/navigation-rail-item.interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-rail-item.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/navigation-rail-item.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,EAAE,cAAc,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1D,cAAc,CAAC,EAAE,CACf,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;QACzD,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;KACrB,KACA,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,QAAQ,GAAG;IACd,oBAAoB;IACpB,YAAY;IACZ,MAAM;IACN,OAAO;IACP,WAAW;CACZ,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,YAAY,CAAC,QAAQ,CAAC,GAAG;IACjE,MAAM,EAAE;QACN,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,QAAQ,EAAE,QAAQ,CAAC;CACpB,CAAC"}
+{"version":3,"file":"navigation-rail-item.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/navigation-rail-item.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,EAAE,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1D,cAAc,CAAC,EAAE,CACf,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;QACzD,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;KACrB,KACA,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,QAAQ,GAAG;IACd,oBAAoB;IACpB,YAAY;IACZ,MAAM;IACN,OAAO;IACP,WAAW;CACZ,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,YAAY,CAAC,QAAQ,CAAC,GAAG;IACjE,MAAM,EAAE;QACN,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,QAAQ,EAAE,QAAQ,CAAC;CACpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -35,8 +35,8 @@
   "devDependencies": {
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "@udixio/theme": "1.0.0",
-    "@udixio/tailwind": "1.2.1"
+    "@udixio/theme": "1.1.0",
+    "@udixio/tailwind": "1.3.0"
   },
   "repository": {
     "type": "git",

package/src/lib/components/NavigationRailItem.tsx

@@ -195,7 +195,7 @@ export const NavigationRailItem = ({
             };
             return (
               <motion.span
-                initial={initial}
+                initial={animate}
                 animate={animate}
                 exit={initial}
                 className={styles.label}

package/src/lib/interfaces/navigation-rail-item.interface.ts

@@ -1,5 +1,4 @@
 import { ActionOrLink } from '../utils';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { Dispatch, RefObject, SetStateAction } from 'react';
 import { Transition } from 'motion';
 import { Icon } from '../icon';
@@ -10,7 +9,7 @@ export type NavProps = {
   label?: string;
   children?: string;
   icon: Icon;
-  iconSelected: IconDefinition;
+  iconSelected: Icon;
   selectedItem?: number | null;
   setSelectedItem?: Dispatch<SetStateAction<number | null>>;
   onItemSelected?: (