@udixio/ui-react 2.3.3 → 2.4.1

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## 2.4.1 (2025-10-17)
+
+### 🧱 Updated Dependencies
+
+- Updated @udixio/tailwind to 2.3.5
+
+## 2.4.0 (2025-10-17)
+
+### 🚀 Features
+
+- **theme:** update variant handling and enhance `UdixioVariant` support ([e413d3d](https://github.com/Udixio/UI/commit/e413d3d))
+
+### 🧱 Updated Dependencies
+
+- Updated @udixio/tailwind to 2.3.4
+- Updated @udixio/theme to 2.1.0
+
+### ❤️ Thank You
+
+- Joël VIGREUX
+
 ## 2.3.3 (2025-10-16)
 
 ### 🩹 Fixes

package/dist/index.cjs

@@ -2,4 +2,4 @@
  * Font Awesome Free 7.1.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 mt={prefix:"fas",iconName:"circle-exclamation",icon:[512,512,["exclamation-circle"],"f06a","M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]},ae={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"]},ht={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 pt=({variant:e="standard",className:t,children:n,title:o,position:r="right",extended:c,divider:d,onExtendedChange:a,closeIcon:f=ae,transition:l,...y})=>{l={duration:.3,...l};const[h,s]=i.useState(c??!0),m=Le({transition:l,title:o,position:r,closeIcon:f,className:t,children:n,onExtendedChange:a,divider:d,isExtended:h,extended:h,variant:e});i.useEffect(()=>{a==null||a(h??!1)},[h]),i.useEffect(()=>{c!=null&&s(c)},[c]);const x={close:{width:0},open:{width:"auto"}},v=()=>u.jsxs(u.Fragment,{children:[u.jsx(k.AnimatePresence,{children:e=="modal"&&h&&u.jsx(k.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:l,onClick:()=>s(!1),className:m.overlay})}),u.jsx(k.AnimatePresence,{children:h&&u.jsxs("div",{...y,className:m.slideSheet,style:{transition:l.duration+"s"},children:[u.jsxs(k.motion.div,{variants:x,initial:c===!1?"open":"close",animate:"open",exit:"close",className:m.container,children:[u.jsxs("div",{className:m.header,children:[o&&u.jsx("p",{className:m.title,children:o}),u.jsx(z,{size:"small",label:"close",icon:f,onClick:()=>s(!1),className:m.closeButton})]}),u.jsx("div",{className:m.content,style:{transition:l.duration+"s"},children:n})]}),(d==null&&e=="standard"?!0:d)&&u.jsx(qe,{className:m.divider,orientation:"vertical"})]})})]});return e=="modal"?fe.createPortal(v(),document.body):v()},yt=({message:e,className:t,duration:n,closeIcon:o=ae,onClose:r,...c})=>{const[d,a]=i.useState(!0),f=Ie({className:t,closeIcon:o,duration:n,isVisible:d,onClose:r,message:e});i.useEffect(()=>{n&&setTimeout(()=>{l()},n)},[n]);const l=()=>{a(!1),r==null||r()};return u.jsx(k.AnimatePresence,{children:d&&u.jsx(k.motion.div,{initial:{height:0},animate:{height:"auto"},exit:{height:0},transition:{duration:.1},className:f.snackbar,...c,children:u.jsxs("div",{className:f.container,children:[u.jsx("p",{className:f.supportingText,children:e}),u.jsx(z,{onClick:()=>l(),className:f.icon,icon:o,label:"close the snackbar"})]})})})},xt=({selected:e=!1,className:t,activeIcon:n,disabled:o=!1,inactiveIcon:r,onChange:c,onClick:d,onKeyDown:a,ref:f,...l})=>{const[y,h]=i.useState(e),s=j=>{o||(x(),d&&d(j))},m=j=>{o||((j.key===" "||j.key==="Enter")&&(j.preventDefault(),x()),a&&a(j))},x=()=>{h(!y),c==null||c(!y)},v=Re({className:t,isSelected:y,activeIcon:n,inactiveIcon:r,disabled:o,selected:y,onChange:c}),w=i.useRef(null),L=f||w;return u.jsxs(k.motion.div,{role:"switch","aria-checked":y,tabIndex:o?-1:0,onKeyDown:m,onClick:s,ref:L,className:v.switch,...l,children:[u.jsx("input",{type:"hidden",value:y?"1":"0"}),u.jsxs(k.motion.div,{layout:!0,style:{translate:y?"50%":"-50%"},transition:{type:"spring",stiffness:700,damping:30},className:v.handleContainer,children:[u.jsx("div",{className:v.handle,children:(y?n:r)&&u.jsx(_,{className:v.icon,icon:y?n:r})}),u.jsx("div",{className:v.handleStateLayer})]})]})},Oe=({className:e,onClick:t,label:n,variant:o="primary",href:r,icon:c,selectedTab:d,setSelectedTab:a,tabsId:f,index:l,onTabSelected:y,scrollable:h=!1,selected:s=!1,ref:m,...x})=>{const v=i.useRef(null),w=m||v,[L,j]=i.useState(s);i.useEffect(()=>{s&&d==null?j(!0):j(d==l&&l!=null)},[d]),i.useEffect(()=>{d==l&&y&&y({ref:w,index:l||0,label:n,icon:c})},[d]);const M=r?"a":"button",E=$=>{a&&a(l??null),t&&t($)},N=ke({className:e,onTabSelected:y,scrollable:h,selectedTab:d,index:l,tabsId:f,selected:L,variant:o,icon:c,label:n,isSelected:L,setSelectedTab:a,href:r});return u.jsxs(M,{...x,role:"tab","aria-selected":L,ref:w,href:r,className:N.tab,onClick:E,...x,children:[u.jsx("span",{className:N.stateLayer,children:u.jsx(J,{colorName:o==="primary"&&L?"primary":"on-surface",triggerRef:w})}),u.jsxs("span",{className:N.content,children:[c&&u.jsx(_,{icon:c,className:N.icon}),u.jsx("span",{className:N.label,children:n}),L&&u.jsx(k.motion.span,{layoutId:`underline-${f}`,className:N.underline,transition:{duration:.3}})]})]})},gt=({variant:e="primary",onTabSelected:t,children:n,className:o,selectedTab:r,setSelectedTab:c,scrollable:d=!1})=>{const[a,f]=i.useState(null);let l;r==0||r!=null?l=r:l=a;const y=c||f,h=i.Children.toArray(n).filter(w=>i.isValidElement(w)&&w.type===Oe),s=i.useRef(null),m=w=>{if(t==null||t(w),d){const L=s.current,j=w.ref.current;if(L&&j){const M=j.offsetLeft+j.offsetWidth/2-L.offsetWidth/2;L.scrollTo({left:M,behavior:"smooth"})}}},x=i.useMemo(()=>oe(),[]),v=$e({children:n,onTabSelected:t,scrollable:d,selectedTab:l,setSelectedTab:y,className:o,variant:e});return u.jsx("div",{ref:s,role:"tablist",className:v.tabs,children:h.map((w,L)=>i.cloneElement(w,{key:L,index:L,variant:e,selectedTab:l,setSelectedTab:y,tabsId:x,onTabSelected:m,scrollable:d}))})},vt=({variant:e="filled",disabled:t=!1,errorText:n,placeholder:o,suffix:r,name:c,label:d,className:a,supportingText:f,trailingIcon:l,leadingIcon:y,type:h="text",textLine:s="singleLine",autoComplete:m="on",onChange:x,value:v,showSupportingText:w=!1,...L})=>{const[j,M]=i.useState(v??""),[E,N]=i.useState(!1),[$,D]=i.useState(!1),[P,I]=i.useState(w);i.useEffect(()=>{M(v??"")},[v]),i.useEffect(()=>{n!=null&&n.length?D(!0):D(!1)},[n]),i.useEffect(()=>{w?I(w):f!=null&&f.length?I(!0):I(!1)},[P,f]),i.useEffect(()=>{E&&D(!1)},[E]);const g=i.useRef(null),C=()=>{g.current&&!E&&g.current.focus()},q=()=>{N(!0)},H=B=>{const A=B.target.value;M(A),D(!1),typeof x=="function"&&x(A)},X=()=>{N(!1)},O=Ce({showSupportingText:P,isFocused:E,showErrorIcon:$,disabled:t,name:c,label:d,autoComplete:m,className:a,onChange:x,placeholder:o,supportingText:f,type:h,leadingIcon:y,trailingIcon:l,variant:e,errorText:n,value:j,suffix:r,textLine:s}),[K]=i.useState(oe());let S,b;switch(s){case"multiLine":b=Ke,S={};break;case"textAreas":b="textarea",S={};break;case"singleLine":default:b="input",S={type:h};break}return u.jsxs("div",{className:O.textField,...L,children:[u.jsxs("fieldset",{onClick:C,className:O.content,children:[u.jsx("div",{className:O.stateLayer}),y&&u.jsx("div",{className:O.leadingIcon,children:i.isValidElement(y)?y:u.jsx(_,{className:"w-5 h-5",icon:y})}),!(!E&&!j.length||e=="filled")&&u.jsx(k.motion.legend,{variants:{hidden:{width:0,padding:0},visible:{width:"auto",padding:"0 8px"}},initial:"hidden",animate:!E&&!j.length?"hidden":"visible",className:"max-w-full ml-2 px-2 text-body-small h-0",transition:{duration:.2},children:u.jsx("span",{className:"transform inline-flex -translate-y-1/2",children:u.jsx(k.motion.span,{className:O.label,transition:{duration:.3},layoutId:K,children:d})})}),u.jsxs("div",{className:"flex-1 relative",children:[(!E&&!j.length||e=="filled")&&u.jsx(k.motion.label,{htmlFor:c,className:p("absolute left-4  transition-all duration-300",{"text-body-small top-2":e=="filled"&&!(!E&&!j.length),"text-body-large top-1/2 transform -translate-y-1/2":!(e=="filled"&&!(!E&&!j.length))}),transition:{duration:.3},children:u.jsx(k.motion.span,{className:O.label,transition:{duration:.3},layoutId:e=="outlined"?K:void 0,children:d})}),u.jsx(b,{ref:g,value:j,onChange:H,className:O.input,id:c,name:c,placeholder:E?o??void 0:"",onFocus:q,onBlur:X,disabled:t,autoComplete:m,"aria-invalid":!!(n!=null&&n.length),"aria-label":d,...S})]}),u.jsx("div",{className:O.activeIndicator}),!$&&u.jsxs(u.Fragment,{children:[l&&u.jsx("div",{onClick:B=>{B.stopPropagation()},className:O.trailingIcon,children:i.isValidElement(l)?l:u.jsx(_,{className:"h-5",icon:l})}),!l&&r&&u.jsx("span",{className:O.suffix,children:r})]}),$&&u.jsx("div",{className:p(O.trailingIcon,{" absolute right-0":!l}),children:u.jsx(_,{className:"h-5 text-error",icon:mt})})]}),P&&u.jsx("p",{className:O.supportingText,children:n!=null&&n.length?n:f!=null&&f.length?f:" "})]})},wt=F("navigationRailItem",({isSelected:e,icon:t,label:n,variant:o})=>({navigationRailItem:p(" 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]":o=="vertical","gap-0  h-[66px]":o=="horizontal"}),container:p(" w-fit flex justify-center  relative rounded-full items-center mx-5",{"bg-secondary-container overflow-hidden":e,"gap-2 ":o=="horizontal","gap-0 ":o=="vertical","p-4":!n},n&&["px-4",{"py-1 ":o=="vertical","py-4 ":o=="horizontal"}]),stateLayer:p("  absolute w-full rounded-full h-full left-0 top-0  ",{"group-state-on-surface":!e,"group-state-on-secondary-container":e}),icon:p("size-6 flex"),label:p("w-fit mx-auto text-nowrap",{"text-label-large ":o=="horizontal","text-label-medium":o=="vertical"})})),He=({label:e})=>u.jsx("div",{className:" h-9 flex items-center mx-9 mt-3",children:u.jsx("p",{className:"text-label-large text-on-surface-variant",children:e})}),Ue=({className:e,onClick:t,label:n,variant:o="vertical",href:r,icon:c,selectedItem:d,setSelectedItem:a,index:f,onItemSelected:l,selected:y=!1,ref:h,transition:s,isExtended:m,iconSelected:x,style:v,extendedOnly:w,children:L,...j})=>{L&&(n=L);const M=i.useRef(null),E=h||M,[N,$]=i.useState(y);i.useEffect(()=>{y&&d==null?$(!0):$(d==f&&f!=null)},[d]),i.useEffect(()=>{d==f&&l&&l({ref:E,index:f||0,label:n,icon:c})},[d]);const D=r?"a":"button",P=g=>{a&&a(f??null),t&&t(g)},I=wt({isExtended:m,extendedOnly:w,className:e,onItemSelected:l,selectedItem:d,index:f,transition:s,selected:N,variant:o,icon:c,label:n,isSelected:N,setSelectedItem:a,href:r,children:n,iconSelected:x});return s={duration:.3,...s},w&&!m?null:u.jsxs(D,{...j,role:"tab","aria-selected":N,ref:E,href:r,className:I.navigationRailItem,onClick:P,style:{transition:s.duration+"s",...v},children:[u.jsxs(k.motion.div,{style:{transition:o=="horizontal"?s.duration+`s, gap ${s.duration/2}s ${s.duration-s.duration/2}s`:s.duration+`s, gap ${s.duration/3}s ${s.duration-s.duration/3}s`},transition:s,className:I.container,children:[u.jsx(k.motion.div,{layout:!0,className:I.stateLayer}),c&&u.jsx(_,{icon:N?x:c,className:I.icon}),u.jsx(k.AnimatePresence,{children:o=="horizontal"&&(()=>{const g={width:0,opacity:0,transition:{...s}},C={width:"auto",opacity:1,transition:{...s,opacity:{duration:s.duration/2,delay:s.duration-s.duration/2}}};return u.jsx(k.motion.span,{initial:g,animate:C,exit:g,className:I.label,children:n})})()})]}),u.jsx(k.AnimatePresence,{children:o=="vertical"&&(()=>{const g={height:0,opacity:0,transition:{...s,opacity:{duration:0}}},C={height:"auto",opacity:1,transition:{...s,opacity:{duration:s.duration/3,delay:s.duration-s.duration/3}}};return u.jsx(k.motion.span,{initial:C,animate:C,exit:g,className:I.label,transition:s,children:n})})()})]})},bt=F("navigationRail",({isExtended:e,alignment:t})=>({navigationRail:p("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:p("flex flex-col gap-1 items-start"),menuIcon:"mx-5",segments:p(" flex flex-col  overflow-auto min-w-full mt-10",{"w-full":!e,"w-fit  items-start":e})})),St=({variant:e="standard",onItemSelected:t,children:n,className:o,selectedItem:r,extended:c,alignment:d="top",menu:a={closed:{icon:ht,label:"Open menu"},opened:{icon:ae,label:"Close menu"}},style:f,onExtendedChange:l,transition:y,setSelectedItem:h})=>{const[s,m]=i.useState(null),[x,v]=i.useState(c);let w;r==0||r!=null?w=r:w=s;const L=h||m,j=i.useRef(null),M=I=>{t==null||t(I)};function E(I){const g=[];return i.Children.forEach(I,C=>{i.isValidElement(C)&&C.type===i.Fragment?g.push(...E(C.props.children)):g.push(C)}),g}const N=E(n),$=N.filter(I=>i.isValidElement(I)&&I.type===ne),D=bt({children:n,onItemSelected:t,selectedItem:w,setSelectedItem:L,className:o,variant:e,extended:x,isExtended:x,alignment:d,menu:a,transition:y,onExtendedChange:l});y={duration:.3,...y};const P=i.useRef(!1);return P.current=!1,i.useEffect(()=>{l==null||l(x??!1)},[x]),u.jsxs("div",{style:{transition:y.duration+"s",...f},ref:j,className:D.navigationRail,children:[u.jsxs("div",{className:D.header,children:[u.jsx(z,{onClick:()=>v(!x),label:x?a==null?void 0:a.opened.label:a==null?void 0:a.closed.label,className:D.menuIcon,icon:x?a.opened.icon:a==null?void 0:a.closed.icon}),$.length>0&&i.cloneElement($[0],{transition:y,isExtended:x,className:"!shadow-none mx-5 "+$[0].props.className})]}),u.jsx("div",{className:D.segments,children:(()=>{let I=0;return N.map(g=>i.isValidElement(g)&&g.type===Ue?i.cloneElement(g,{key:I,index:I++,variant:x?"horizontal":"vertical",selectedItem:w,setSelectedItem:L,onItemSelected:M,transition:y,extendedOnly:P.current,isExtended:x}):i.isValidElement(g)&&g.type===ne?null:i.isValidElement(g)&&g.type===He?(P.current=!0,x?i.cloneElement(g,{}):null):g)})()}),u.jsx("div",{className:"flex-1 max-h-[160px]"})]})};function jt(e){return Q.defineConfig({variant:Q.Variants.Fidelity,...e,plugins:[new Q.FontPlugin(e),new me.TailwindPlugin(e)]})}exports.AnimateOnScrollInit=st;exports.Button=We;exports.Card=lt;exports.Carousel=at;exports.CarouselItem=Fe;exports.CustomScroll=De;exports.Divider=qe;exports.Fab=ne;exports.Icon=_;exports.IconButton=z;exports.NavigationRail=St;exports.NavigationRailItem=Ue;exports.NavigationRailSection=He;exports.ProgressIndicator=Pe;exports.RippleEffect=J;exports.SideSheet=pt;exports.Slider=ft;exports.SmoothScroll=Ze;exports.Snackbar=yt;exports.Switch=xt;exports.SyncedFixedWrapper=Ae;exports.Tab=Oe;exports.Tabs=gt;exports.TextField=vt;exports.ThemeProvider=ze;exports.ToolTip=le;exports.animateOnScroll=ot;exports.buttonStyle=xe;exports.cardStyle=ge;exports.carouselItemStyle=ve;exports.carouselStyle=we;exports.classNames=p;exports.classnames=pe;exports.customScrollStyle=Be;exports.defaultClassNames=F;exports.defineConfig=jt;exports.dividerStyle=be;exports.fabStyle=Se;exports.getClassNames=ye;exports.iconButtonStyle=je;exports.initAnimateOnScroll=se;exports.normalize=Ve;exports.progressIndicatorStyle=Ee;exports.sideSheetStyle=Le;exports.sliderStyle=Ne;exports.snackbarStyle=Ie;exports.switchStyle=Re;exports.tabStyle=ke;exports.tabsStyle=$e;exports.textFieldStyle=Ce;exports.toolStyle=Me;
+ */var mt={prefix:"fas",iconName:"circle-exclamation",icon:[512,512,["exclamation-circle"],"f06a","M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]},ae={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"]},ht={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 pt=({variant:e="standard",className:t,children:n,title:o,position:r="right",extended:c,divider:d,onExtendedChange:a,closeIcon:f=ae,transition:l,...y})=>{l={duration:.3,...l};const[h,s]=i.useState(c??!0),m=Le({transition:l,title:o,position:r,closeIcon:f,className:t,children:n,onExtendedChange:a,divider:d,isExtended:h,extended:h,variant:e});i.useEffect(()=>{a==null||a(h??!1)},[h]),i.useEffect(()=>{c!=null&&s(c)},[c]);const x={close:{width:0},open:{width:"auto"}},v=()=>u.jsxs(u.Fragment,{children:[u.jsx(k.AnimatePresence,{children:e=="modal"&&h&&u.jsx(k.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:l,onClick:()=>s(!1),className:m.overlay})}),u.jsx(k.AnimatePresence,{children:h&&u.jsxs("div",{...y,className:m.slideSheet,style:{transition:l.duration+"s"},children:[u.jsxs(k.motion.div,{variants:x,initial:c===!1?"open":"close",animate:"open",exit:"close",className:m.container,children:[u.jsxs("div",{className:m.header,children:[o&&u.jsx("p",{className:m.title,children:o}),u.jsx(z,{size:"small",label:"close",icon:f,onClick:()=>s(!1),className:m.closeButton})]}),u.jsx("div",{className:m.content,style:{transition:l.duration+"s"},children:n})]}),(d==null&&e=="standard"?!0:d)&&u.jsx(qe,{className:m.divider,orientation:"vertical"})]})})]});return e=="modal"?fe.createPortal(v(),document.body):v()},yt=({message:e,className:t,duration:n,closeIcon:o=ae,onClose:r,...c})=>{const[d,a]=i.useState(!0),f=Ie({className:t,closeIcon:o,duration:n,isVisible:d,onClose:r,message:e});i.useEffect(()=>{n&&setTimeout(()=>{l()},n)},[n]);const l=()=>{a(!1),r==null||r()};return u.jsx(k.AnimatePresence,{children:d&&u.jsx(k.motion.div,{initial:{height:0},animate:{height:"auto"},exit:{height:0},transition:{duration:.1},className:f.snackbar,...c,children:u.jsxs("div",{className:f.container,children:[u.jsx("p",{className:f.supportingText,children:e}),u.jsx(z,{onClick:()=>l(),className:f.icon,icon:o,label:"close the snackbar"})]})})})},xt=({selected:e=!1,className:t,activeIcon:n,disabled:o=!1,inactiveIcon:r,onChange:c,onClick:d,onKeyDown:a,ref:f,...l})=>{const[y,h]=i.useState(e),s=j=>{o||(x(),d&&d(j))},m=j=>{o||((j.key===" "||j.key==="Enter")&&(j.preventDefault(),x()),a&&a(j))},x=()=>{h(!y),c==null||c(!y)},v=Re({className:t,isSelected:y,activeIcon:n,inactiveIcon:r,disabled:o,selected:y,onChange:c}),w=i.useRef(null),L=f||w;return u.jsxs(k.motion.div,{role:"switch","aria-checked":y,tabIndex:o?-1:0,onKeyDown:m,onClick:s,ref:L,className:v.switch,...l,children:[u.jsx("input",{type:"hidden",value:y?"1":"0"}),u.jsxs(k.motion.div,{layout:!0,style:{translate:y?"50%":"-50%"},transition:{type:"spring",stiffness:700,damping:30},className:v.handleContainer,children:[u.jsx("div",{className:v.handle,children:(y?n:r)&&u.jsx(_,{className:v.icon,icon:y?n:r})}),u.jsx("div",{className:v.handleStateLayer})]})]})},Oe=({className:e,onClick:t,label:n,variant:o="primary",href:r,icon:c,selectedTab:d,setSelectedTab:a,tabsId:f,index:l,onTabSelected:y,scrollable:h=!1,selected:s=!1,ref:m,...x})=>{const v=i.useRef(null),w=m||v,[L,j]=i.useState(s);i.useEffect(()=>{s&&d==null?j(!0):j(d==l&&l!=null)},[d]),i.useEffect(()=>{d==l&&y&&y({ref:w,index:l||0,label:n,icon:c})},[d]);const M=r?"a":"button",E=$=>{a&&a(l??null),t&&t($)},N=ke({className:e,onTabSelected:y,scrollable:h,selectedTab:d,index:l,tabsId:f,selected:L,variant:o,icon:c,label:n,isSelected:L,setSelectedTab:a,href:r});return u.jsxs(M,{...x,role:"tab","aria-selected":L,ref:w,href:r,className:N.tab,onClick:E,...x,children:[u.jsx("span",{className:N.stateLayer,children:u.jsx(J,{colorName:o==="primary"&&L?"primary":"on-surface",triggerRef:w})}),u.jsxs("span",{className:N.content,children:[c&&u.jsx(_,{icon:c,className:N.icon}),u.jsx("span",{className:N.label,children:n}),L&&u.jsx(k.motion.span,{layoutId:`underline-${f}`,className:N.underline,transition:{duration:.3}})]})]})},gt=({variant:e="primary",onTabSelected:t,children:n,className:o,selectedTab:r,setSelectedTab:c,scrollable:d=!1})=>{const[a,f]=i.useState(null);let l;r==0||r!=null?l=r:l=a;const y=c||f,h=i.Children.toArray(n).filter(w=>i.isValidElement(w)&&w.type===Oe),s=i.useRef(null),m=w=>{if(t==null||t(w),d){const L=s.current,j=w.ref.current;if(L&&j){const M=j.offsetLeft+j.offsetWidth/2-L.offsetWidth/2;L.scrollTo({left:M,behavior:"smooth"})}}},x=i.useMemo(()=>oe(),[]),v=$e({children:n,onTabSelected:t,scrollable:d,selectedTab:l,setSelectedTab:y,className:o,variant:e});return u.jsx("div",{ref:s,role:"tablist",className:v.tabs,children:h.map((w,L)=>i.cloneElement(w,{key:L,index:L,variant:e,selectedTab:l,setSelectedTab:y,tabsId:x,onTabSelected:m,scrollable:d}))})},vt=({variant:e="filled",disabled:t=!1,errorText:n,placeholder:o,suffix:r,name:c,label:d,className:a,supportingText:f,trailingIcon:l,leadingIcon:y,type:h="text",textLine:s="singleLine",autoComplete:m="on",onChange:x,value:v,showSupportingText:w=!1,...L})=>{const[j,M]=i.useState(v??""),[E,N]=i.useState(!1),[$,D]=i.useState(!1),[P,I]=i.useState(w);i.useEffect(()=>{M(v??"")},[v]),i.useEffect(()=>{n!=null&&n.length?D(!0):D(!1)},[n]),i.useEffect(()=>{w?I(w):f!=null&&f.length?I(!0):I(!1)},[P,f]),i.useEffect(()=>{E&&D(!1)},[E]);const g=i.useRef(null),C=()=>{g.current&&!E&&g.current.focus()},q=()=>{N(!0)},H=B=>{const A=B.target.value;M(A),D(!1),typeof x=="function"&&x(A)},X=()=>{N(!1)},O=Ce({showSupportingText:P,isFocused:E,showErrorIcon:$,disabled:t,name:c,label:d,autoComplete:m,className:a,onChange:x,placeholder:o,supportingText:f,type:h,leadingIcon:y,trailingIcon:l,variant:e,errorText:n,value:j,suffix:r,textLine:s}),[K]=i.useState(oe());let S,b;switch(s){case"multiLine":b=Ke,S={};break;case"textAreas":b="textarea",S={};break;case"singleLine":default:b="input",S={type:h};break}return u.jsxs("div",{className:O.textField,...L,children:[u.jsxs("fieldset",{onClick:C,className:O.content,children:[u.jsx("div",{className:O.stateLayer}),y&&u.jsx("div",{className:O.leadingIcon,children:i.isValidElement(y)?y:u.jsx(_,{className:"w-5 h-5",icon:y})}),!(!E&&!j.length||e=="filled")&&u.jsx(k.motion.legend,{variants:{hidden:{width:0,padding:0},visible:{width:"auto",padding:"0 8px"}},initial:"hidden",animate:!E&&!j.length?"hidden":"visible",className:"max-w-full ml-2 px-2 text-body-small h-0",transition:{duration:.2},children:u.jsx("span",{className:"transform inline-flex -translate-y-1/2",children:u.jsx(k.motion.span,{className:O.label,transition:{duration:.3},layoutId:K,children:d})})}),u.jsxs("div",{className:"flex-1 relative",children:[(!E&&!j.length||e=="filled")&&u.jsx(k.motion.label,{htmlFor:c,className:p("absolute left-4  transition-all duration-300",{"text-body-small top-2":e=="filled"&&!(!E&&!j.length),"text-body-large top-1/2 transform -translate-y-1/2":!(e=="filled"&&!(!E&&!j.length))}),transition:{duration:.3},children:u.jsx(k.motion.span,{className:O.label,transition:{duration:.3},layoutId:e=="outlined"?K:void 0,children:d})}),u.jsx(b,{ref:g,value:j,onChange:H,className:O.input,id:c,name:c,placeholder:E?o??void 0:"",onFocus:q,onBlur:X,disabled:t,autoComplete:m,"aria-invalid":!!(n!=null&&n.length),"aria-label":d,...S})]}),u.jsx("div",{className:O.activeIndicator}),!$&&u.jsxs(u.Fragment,{children:[l&&u.jsx("div",{onClick:B=>{B.stopPropagation()},className:O.trailingIcon,children:i.isValidElement(l)?l:u.jsx(_,{className:"h-5",icon:l})}),!l&&r&&u.jsx("span",{className:O.suffix,children:r})]}),$&&u.jsx("div",{className:p(O.trailingIcon,{" absolute right-0":!l}),children:u.jsx(_,{className:"h-5 text-error",icon:mt})})]}),P&&u.jsx("p",{className:O.supportingText,children:n!=null&&n.length?n:f!=null&&f.length?f:" "})]})},wt=F("navigationRailItem",({isSelected:e,icon:t,label:n,variant:o})=>({navigationRailItem:p(" 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]":o=="vertical","gap-0  h-[66px]":o=="horizontal"}),container:p(" w-fit flex justify-center  relative rounded-full items-center mx-5",{"bg-secondary-container overflow-hidden":e,"gap-2 ":o=="horizontal","gap-0 ":o=="vertical","p-4":!n},n&&["px-4",{"py-1 ":o=="vertical","py-4 ":o=="horizontal"}]),stateLayer:p("  absolute w-full rounded-full h-full left-0 top-0  ",{"group-state-on-surface":!e,"group-state-on-secondary-container":e}),icon:p("size-6 flex"),label:p("w-fit mx-auto text-nowrap",{"text-label-large ":o=="horizontal","text-label-medium":o=="vertical"})})),He=({label:e})=>u.jsx("div",{className:" h-9 flex items-center mx-9 mt-3",children:u.jsx("p",{className:"text-label-large text-on-surface-variant",children:e})}),Ue=({className:e,onClick:t,label:n,variant:o="vertical",href:r,icon:c,selectedItem:d,setSelectedItem:a,index:f,onItemSelected:l,selected:y=!1,ref:h,transition:s,isExtended:m,iconSelected:x,style:v,extendedOnly:w,children:L,...j})=>{L&&(n=L);const M=i.useRef(null),E=h||M,[N,$]=i.useState(y);i.useEffect(()=>{y&&d==null?$(!0):$(d==f&&f!=null)},[d]),i.useEffect(()=>{d==f&&l&&l({ref:E,index:f||0,label:n,icon:c})},[d]);const D=r?"a":"button",P=g=>{a&&a(f??null),t&&t(g)},I=wt({isExtended:m,extendedOnly:w,className:e,onItemSelected:l,selectedItem:d,index:f,transition:s,selected:N,variant:o,icon:c,label:n,isSelected:N,setSelectedItem:a,href:r,children:n,iconSelected:x});return s={duration:.3,...s},w&&!m?null:u.jsxs(D,{...j,role:"tab","aria-selected":N,ref:E,href:r,className:I.navigationRailItem,onClick:P,style:{transition:s.duration+"s",...v},children:[u.jsxs(k.motion.div,{style:{transition:o=="horizontal"?s.duration+`s, gap ${s.duration/2}s ${s.duration-s.duration/2}s`:s.duration+`s, gap ${s.duration/3}s ${s.duration-s.duration/3}s`},transition:s,className:I.container,children:[u.jsx(k.motion.div,{layout:!0,className:I.stateLayer}),c&&u.jsx(_,{icon:N?x:c,className:I.icon}),u.jsx(k.AnimatePresence,{children:o=="horizontal"&&(()=>{const g={width:0,opacity:0,transition:{...s}},C={width:"auto",opacity:1,transition:{...s,opacity:{duration:s.duration/2,delay:s.duration-s.duration/2}}};return u.jsx(k.motion.span,{initial:g,animate:C,exit:g,className:I.label,children:n})})()})]}),u.jsx(k.AnimatePresence,{children:o=="vertical"&&(()=>{const g={height:0,opacity:0,transition:{...s,opacity:{duration:0}}},C={height:"auto",opacity:1,transition:{...s,opacity:{duration:s.duration/3,delay:s.duration-s.duration/3}}};return u.jsx(k.motion.span,{initial:C,animate:C,exit:g,className:I.label,transition:s,children:n})})()})]})},bt=F("navigationRail",({isExtended:e,alignment:t})=>({navigationRail:p("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:p("flex flex-col gap-1 items-start"),menuIcon:"mx-5",segments:p(" flex flex-col  overflow-auto min-w-full mt-10",{"w-full":!e,"w-fit  items-start":e})})),St=({variant:e="standard",onItemSelected:t,children:n,className:o,selectedItem:r,extended:c,alignment:d="top",menu:a={closed:{icon:ht,label:"Open menu"},opened:{icon:ae,label:"Close menu"}},style:f,onExtendedChange:l,transition:y,setSelectedItem:h})=>{const[s,m]=i.useState(null),[x,v]=i.useState(c);let w;r==0||r!=null?w=r:w=s;const L=h||m,j=i.useRef(null),M=I=>{t==null||t(I)};function E(I){const g=[];return i.Children.forEach(I,C=>{i.isValidElement(C)&&C.type===i.Fragment?g.push(...E(C.props.children)):g.push(C)}),g}const N=E(n),$=N.filter(I=>i.isValidElement(I)&&I.type===ne),D=bt({children:n,onItemSelected:t,selectedItem:w,setSelectedItem:L,className:o,variant:e,extended:x,isExtended:x,alignment:d,menu:a,transition:y,onExtendedChange:l});y={duration:.3,...y};const P=i.useRef(!1);return P.current=!1,i.useEffect(()=>{l==null||l(x??!1)},[x]),u.jsxs("div",{style:{transition:y.duration+"s",...f},ref:j,className:D.navigationRail,children:[u.jsxs("div",{className:D.header,children:[u.jsx(z,{onClick:()=>v(!x),label:x?a==null?void 0:a.opened.label:a==null?void 0:a.closed.label,className:D.menuIcon,icon:x?a.opened.icon:a==null?void 0:a.closed.icon}),$.length>0&&i.cloneElement($[0],{transition:y,isExtended:x,className:"!shadow-none mx-5 "+$[0].props.className})]}),u.jsx("div",{className:D.segments,children:(()=>{let I=0;return N.map(g=>i.isValidElement(g)&&g.type===Ue?i.cloneElement(g,{key:I,index:I++,variant:x?"horizontal":"vertical",selectedItem:w,setSelectedItem:L,onItemSelected:M,transition:y,extendedOnly:P.current,isExtended:x}):i.isValidElement(g)&&g.type===ne?null:i.isValidElement(g)&&g.type===He?(P.current=!0,x?i.cloneElement(g,{}):null):g)})()}),u.jsx("div",{className:"flex-1 max-h-[160px]"})]})};function jt(e){return Q.defineConfig({variant:Q.Variants.Udixio,...e,plugins:[new Q.FontPlugin(e),new me.TailwindPlugin(e)]})}exports.AnimateOnScrollInit=st;exports.Button=We;exports.Card=lt;exports.Carousel=at;exports.CarouselItem=Fe;exports.CustomScroll=De;exports.Divider=qe;exports.Fab=ne;exports.Icon=_;exports.IconButton=z;exports.NavigationRail=St;exports.NavigationRailItem=Ue;exports.NavigationRailSection=He;exports.ProgressIndicator=Pe;exports.RippleEffect=J;exports.SideSheet=pt;exports.Slider=ft;exports.SmoothScroll=Ze;exports.Snackbar=yt;exports.Switch=xt;exports.SyncedFixedWrapper=Ae;exports.Tab=Oe;exports.Tabs=gt;exports.TextField=vt;exports.ThemeProvider=ze;exports.ToolTip=le;exports.animateOnScroll=ot;exports.buttonStyle=xe;exports.cardStyle=ge;exports.carouselItemStyle=ve;exports.carouselStyle=we;exports.classNames=p;exports.classnames=pe;exports.customScrollStyle=Be;exports.defaultClassNames=F;exports.defineConfig=jt;exports.dividerStyle=be;exports.fabStyle=Se;exports.getClassNames=ye;exports.iconButtonStyle=je;exports.initAnimateOnScroll=se;exports.normalize=Ve;exports.progressIndicatorStyle=Ee;exports.sideSheetStyle=Le;exports.sliderStyle=Ne;exports.snackbarStyle=Ie;exports.switchStyle=Re;exports.tabStyle=ke;exports.tabsStyle=$e;exports.textFieldStyle=Ce;exports.toolStyle=Me;

package/dist/index.js

@@ -2,7 +2,7 @@ import { jsx as f, jsxs as A, Fragment as te } from "react/jsx-runtime";
 import { clsx as ve } from "clsx";
 import { extendTailwindMerge as Ie } from "tailwind-merge";
 import K, { useState as S, useEffect as R, useRef as D, useLayoutEffect as we, isValidElement as ee, cloneElement as oe, useMemo as ke, Children as Se, Fragment as $e } from "react";
-import { motion as F, AnimatePresence as Q, useScroll as Me, useMotionValueEvent as fe, motionValue as Ce, useTransform as me } from "motion/react";
+import { motion as H, AnimatePresence as Q, useScroll as Me, useMotionValueEvent as fe, motionValue as Ce, useTransform as me } from "motion/react";
 import { throttle as Re } from "throttle-debounce";
 import { animate as Be } from "motion";
 import { createPortal as xe } from "react-dom";
@@ -35,8 +35,8 @@ const Le = Ie({
       font: ["font"]
     }
   }
-}), h = (...e) => Le(ve(e)), Fe = (...e) => Le(ve(e));
-function He(e) {
+}), h = (...e) => Le(ve(e)), He = (...e) => Le(ve(e));
+function Fe(e) {
   return e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
 const Oe = (e) => {
@@ -57,7 +57,7 @@ const Oe = (e) => {
   const n = t;
   return Object.entries(t).map((l) => {
     let [r, c] = l;
-    c = c.reverse(), r == e.default && c.unshift("relative"), c.unshift(He(r)), n[r] = Fe(...c);
+    c = c.reverse(), r == e.default && c.unshift("relative"), c.unshift(Fe(r)), n[r] = He(...c);
   }), n;
 }, j = (e, t) => (n) => Oe({
   classNameList: [n.className, t],
@@ -882,7 +882,7 @@ const Oe = (e) => {
       )
     ] }),
     (e === "circular-determinate" || e == "circular-indeterminate") && /* @__PURE__ */ f(
-      F.svg,
+      H.svg,
       {
         width: "48",
         height: "48",
@@ -897,7 +897,7 @@ const Oe = (e) => {
         className: d.progressIndicator,
         ...r,
         children: /* @__PURE__ */ f(
-          F.circle,
+          H.circle,
           {
             cx: "50%",
             cy: "50%",
@@ -973,7 +973,7 @@ const Oe = (e) => {
     i(!1);
   };
   return /* @__PURE__ */ f(Q, { mode: "wait", children: (c || !c && !l) && /* @__PURE__ */ f(
-    F.div,
+    H.div,
     {
       style: {
         position: "absolute",
@@ -1029,7 +1029,7 @@ const Oe = (e) => {
   draggable: c = !1,
   throttleDuration: i = 75
 }) => {
-  var P, H;
+  var P, F;
   const s = D(null), u = D(null), [a, p] = S({
     width: null,
     height: null
@@ -1148,14 +1148,14 @@ const Oe = (e) => {
           "div",
           {
             ref: u,
-            style: t === "vertical" ? { height: ((P = o == null ? void 0 : o.current) == null ? void 0 : P.height) ?? "100%" } : { width: ((H = o == null ? void 0 : o.current) == null ? void 0 : H.width) ?? "100%" },
+            style: t === "vertical" ? { height: ((P = o == null ? void 0 : o.current) == null ? void 0 : P.height) ?? "100%" } : { width: ((F = o == null ? void 0 : o.current) == null ? void 0 : F.width) ?? "100%" },
             className: V.track,
             children: e
           }
         ),
         o.current && m.current && /* @__PURE__ */ A(te, { children: [
           t === "vertical" && m.current.height > o.current.height && /* @__PURE__ */ f(
-            F.div,
+            H.div,
             {
               className: "flex-none",
               style: {
@@ -1164,7 +1164,7 @@ const Oe = (e) => {
             }
           ),
           t === "horizontal" && m.current.width > o.current.width && /* @__PURE__ */ f(
-            F.div,
+            H.div,
             {
               className: "flex-none",
               style: {
@@ -1701,7 +1701,7 @@ const Xt = Ne, Yt = Ne, ht = ({
     children: t
   });
   return /* @__PURE__ */ f(
-    F.div,
+    H.div,
     {
       ref: s,
       animate: { width: n + "px" },
@@ -1749,18 +1749,18 @@ const Xt = Ne, Yt = Ne, ht = ({
         (T) => (T - J) / Math.abs(U[1] - U[0])
       );
     }
-    let H = y.map((U, J) => {
+    let F = y.map((U, J) => {
       if (!I[J].current || !v.current) return 0;
       let ne = J / (y.length - 1);
       return ne > 1 && (ne = 1), ne < 0 && (ne = 0), ne;
     });
-    H = P(H, x);
+    F = P(F, x);
     let $ = ((((O = o.current) == null ? void 0 : O.clientWidth) ?? b) - (i[0] + s)) / (i[1] + s);
-    return H.map((U, J) => ({ value: Math.abs(U), originalIndex: J })).sort((U, J) => U.value - J.value).forEach((U, J) => {
+    return F.map((U, J) => ({ value: Math.abs(U), originalIndex: J })).sort((U, J) => U.value - J.value).forEach((U, J) => {
       J === 0 && V(U.originalIndex);
       let T = pt($, [0, 1], [0, i[1]]);
-      T < i[0] && (T = i[0]), $--, H[U.originalIndex] = T;
-    }), H;
+      T < i[0] && (T = i[0]), $--, F[U.originalIndex] = T;
+    }), F;
   }, I = D([]).current, [M, V] = S(0);
   R(() => {
     u && u(M);
@@ -1806,7 +1806,7 @@ const Xt = Ne, Yt = Ne, ht = ({
       onScroll: X,
       scrollSize: q,
       children: /* @__PURE__ */ f(
-        F.div,
+        H.div,
         {
           className: d.track,
           ref: v,
@@ -1942,7 +1942,7 @@ const Ee = ({
   return /* @__PURE__ */ A(te, { children: [
     W,
     /* @__PURE__ */ f(Q, { children: w && /* @__PURE__ */ f(st, { targetRef: o, children: /* @__PURE__ */ f(
-      F.div,
+      H.div,
       {
         initial: { opacity: d ? 1 : 0 },
         animate: { opacity: 1 },
@@ -1953,7 +1953,7 @@ const Ee = ({
         onMouseEnter: B,
         onMouseLeave: N,
         children: /* @__PURE__ */ A(
-          F.div,
+          H.div,
           {
             className: k.container,
             layoutId: "tool-tip",
@@ -2067,7 +2067,7 @@ const Ee = ({
         ) }),
         /* @__PURE__ */ f(Z, { icon: i, className: d.icon }),
         /* @__PURE__ */ f(Q, { children: s && /* @__PURE__ */ f(
-          F.span,
+          H.span,
           {
             variants: w,
             initial: "hidden",
@@ -2271,9 +2271,9 @@ const Ee = ({
       b = m(x);
     } else
       return;
-    n != null ? x = Math.round((x - d()) / n) * n + d() : s && (x = s.reduce((P, H, $) => {
-      let O = H.value === 1 / 0 ? o() : H.value === -1 / 0 ? d() : H.value, U = P.value === 1 / 0 ? o() : P.value === -1 / 0 ? d() : P.value;
-      return O = Math.abs(O - x), U = Math.abs(U - x), O < U ? H : P;
+    n != null ? x = Math.round((x - d()) / n) * n + d() : s && (x = s.reduce((P, F, $) => {
+      let O = F.value === 1 / 0 ? o() : F.value === -1 / 0 ? d() : F.value, U = P.value === 1 / 0 ? o() : P.value === -1 / 0 ? d() : P.value;
+      return O = Math.abs(O - x), U = Math.abs(U - x), O < U ? F : P;
     }).value), x >= o() && (x = o(!0)), x <= d() && (x = d(!0)), b = m(x), N(x), M(b), a && a(x);
   }, [G, Y] = S(0);
   return R(() => {
@@ -2301,7 +2301,7 @@ const Ee = ({
             if (n)
               q({ value: B - n });
             else if (s) {
-              const x = s.slice(0).reverse().find((P, H, $) => B === 1 / 0 ? H === 1 : P.value < B);
+              const x = s.slice(0).reverse().find((P, F, $) => B === 1 / 0 ? F === 1 : P.value < B);
               x && q({ value: x.value });
             }
             break;
@@ -2331,7 +2331,7 @@ const Ee = ({
           }
         ),
         /* @__PURE__ */ f("div", { className: C.handle, children: /* @__PURE__ */ f(Q, { children: v && /* @__PURE__ */ f(
-          F.div,
+          H.div,
           {
             className: C.valueIndicator,
             initial: "hidden",
@@ -2363,8 +2363,8 @@ const Ee = ({
             className: "w-[calc(100%-12px)] h-full absolute -translate-x-1/2 transform left-1/2",
             children: s && s.map((b, x) => {
               let P = null;
-              const H = (v ? 9 : 10) / G * 100, $ = m(b.value);
-              return $ <= I - H ? P = !0 : $ >= I + H && (P = !1), /* @__PURE__ */ f(
+              const F = (v ? 9 : 10) / G * 100, $ = m(b.value);
+              return $ <= I - F ? P = !0 : $ >= I + F && (P = !1), /* @__PURE__ */ f(
                 "div",
                 {
                   className: h(C.dot, {
@@ -2443,7 +2443,7 @@ const Kt = ({
     }
   }, v = () => /* @__PURE__ */ A(te, { children: [
     /* @__PURE__ */ f(Q, { children: e == "modal" && m && /* @__PURE__ */ f(
-      F.div,
+      H.div,
       {
         initial: { opacity: 0 },
         animate: { opacity: 1 },
@@ -2461,7 +2461,7 @@ const Kt = ({
         style: { transition: a.duration + "s" },
         children: [
           /* @__PURE__ */ A(
-            F.div,
+            H.div,
             {
               variants: y,
               initial: c === !1 ? "open" : "close",
@@ -2524,7 +2524,7 @@ const Kt = ({
     s(!1), r == null || r();
   };
   return /* @__PURE__ */ f(Q, { children: i && /* @__PURE__ */ f(
-    F.div,
+    H.div,
     {
       initial: { height: 0 },
       animate: { height: "auto" },
@@ -2574,7 +2574,7 @@ const Kt = ({
     onChange: c
   }), w = D(null), E = u || w;
   return /* @__PURE__ */ A(
-    F.div,
+    H.div,
     {
       role: "switch",
       "aria-checked": p,
@@ -2587,7 +2587,7 @@ const Kt = ({
       children: [
         /* @__PURE__ */ f("input", { type: "hidden", value: p ? "1" : "0" }),
         /* @__PURE__ */ A(
-          F.div,
+          H.div,
           {
             layout: !0,
             style: { translate: p ? "50%" : "-50%" },
@@ -2680,7 +2680,7 @@ const Kt = ({
           c && /* @__PURE__ */ f(Z, { icon: c, className: I.icon }),
           /* @__PURE__ */ f("span", { className: I.label, children: n }),
           E && /* @__PURE__ */ f(
-            F.span,
+            H.span,
             {
               layoutId: `underline-${u}`,
               className: I.underline,
@@ -2771,8 +2771,8 @@ const Kt = ({
   }, X = () => {
     I(!0);
   }, q = (P) => {
-    const H = P.target.value;
-    B(H), V(!1), typeof y == "function" && y(H);
+    const F = P.target.value;
+    B(F), V(!1), typeof y == "function" && y(F);
   }, G = () => {
     I(!1);
   }, Y = tt({
@@ -2814,7 +2814,7 @@ const Kt = ({
       /* @__PURE__ */ f("div", { className: Y.stateLayer }),
       p && /* @__PURE__ */ f("div", { className: Y.leadingIcon, children: K.isValidElement(p) ? p : /* @__PURE__ */ f(Z, { className: "w-5 h-5", icon: p }) }),
       !(!N && !L.length || e == "filled") && /* @__PURE__ */ f(
-        F.legend,
+        H.legend,
         {
           variants: {
             hidden: { width: 0, padding: 0 },
@@ -2825,7 +2825,7 @@ const Kt = ({
           className: "max-w-full ml-2 px-2 text-body-small h-0",
           transition: { duration: 0.2 },
           children: /* @__PURE__ */ f("span", { className: "transform inline-flex -translate-y-1/2", children: /* @__PURE__ */ f(
-            F.span,
+            H.span,
             {
               className: Y.label,
               transition: { duration: 0.3 },
@@ -2837,7 +2837,7 @@ const Kt = ({
       ),
       /* @__PURE__ */ A("div", { className: "flex-1 relative", children: [
         (!N && !L.length || e == "filled") && /* @__PURE__ */ f(
-          F.label,
+          H.label,
           {
             htmlFor: c,
             className: h(
@@ -2849,7 +2849,7 @@ const Kt = ({
             ),
             transition: { duration: 0.3 },
             children: /* @__PURE__ */ f(
-              F.span,
+              H.span,
               {
                 className: Y.label,
                 transition: { duration: 0.3 },
@@ -3021,7 +3021,7 @@ const Kt = ({
         style: { transition: o.duration + "s", ...v },
         children: [
           /* @__PURE__ */ A(
-            F.div,
+            H.div,
             {
               style: {
                 transition: l == "horizontal" ? o.duration + `s, gap ${o.duration / 2}s ${o.duration - o.duration / 2}s` : o.duration + `s, gap ${o.duration / 3}s ${o.duration - o.duration / 3}s`
@@ -3029,7 +3029,7 @@ const Kt = ({
               transition: o,
               className: k.container,
               children: [
-                /* @__PURE__ */ f(F.div, { layout: !0, className: k.stateLayer }),
+                /* @__PURE__ */ f(H.div, { layout: !0, className: k.stateLayer }),
                 c && /* @__PURE__ */ f(
                   Z,
                   {
@@ -3056,7 +3056,7 @@ const Kt = ({
                     }
                   };
                   return /* @__PURE__ */ f(
-                    F.span,
+                    H.span,
                     {
                       initial: g,
                       animate: C,
@@ -3091,7 +3091,7 @@ const Kt = ({
               }
             };
             return /* @__PURE__ */ f(
-              F.span,
+              H.span,
               {
                 initial: C,
                 animate: C,
@@ -3225,7 +3225,7 @@ const Kt = ({
 };
 function Tt(e) {
   return We({
-    variant: Ae.Fidelity,
+    variant: Ae.Udixio,
     ...e,
     plugins: [new Pe(e), new be(e)]
   });
@@ -3263,7 +3263,7 @@ export {
   Ye as carouselItemStyle,
   je as carouselStyle,
   h as classNames,
-  Fe as classnames,
+  He as classnames,
   ot as customScrollStyle,
   j as defaultClassNames,
   Tt as defineConfig,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "2.3.3",
+  "version": "2.4.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -36,8 +36,8 @@
   "devDependencies": {
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "@udixio/theme": "2.0.0",
-    "@udixio/tailwind": "2.3.3"
+    "@udixio/tailwind": "2.3.5",
+    "@udixio/theme": "2.1.0"
   },
   "repository": {
     "type": "git",

package/src/lib/config/define-config.ts

@@ -9,7 +9,7 @@ import { TailwindPlugin } from '@udixio/tailwind';
 
 export function defineConfig(configObject: ConfigInterface): ConfigTheme {
   return defineConfigTheme({
-    variant: Variants.Fidelity,
+    variant: Variants.Udixio,
     ...configObject,
     plugins: [new FontPlugin(configObject), new TailwindPlugin(configObject)],
   });