@moduix/solid-tailwind 1.1.1 → 2.0.0

package/dist/components/navigation-menu/NavigationMenu.jsx

@@ -87,6 +87,7 @@ const NavigationMenu_NavigationMenu = Object.assign(NavigationMenuRoot, {
     ItemIndicator: NavigationMenuItemIndicator,
     Arrow: NavigationMenuArrow,
     ViewportPositioner: NavigationMenuViewportPositioner,
-    Viewport: NavigationMenuViewport
+    Viewport: NavigationMenuViewport,
+    useNavigationMenu: useNavigationMenu
 });
 export { NavigationMenu_NavigationMenu as NavigationMenu, useNavigationMenu, useNavigationMenuContext };

package/dist/components/number-input/NumberInput.js

@@ -95,7 +95,7 @@ function NumberInputDecrementTrigger(props) {
     const resolvedChildren = children(()=>local.children);
     return createComponent(NumberInput.DecrementTrigger, mergeProps({
         get ["class"] () {
-            return cn('box-border inline-flex size-control-md min-w-control-md cursor-pointer items-center justify-center rounded-s-md border border-e-0 border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none group-data-invalid/number-input:border-destructive focus-visible:z-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive active:bg-accent disabled:pointer-events-none data-disabled:pointer-events-none data-focus:z-1 data-focus:outline-1 data-focus:-outline-offset-1 data-focus:outline-ring group-data-invalid/number-input:data-focus:outline-destructive data-invalid:border-destructive data-invalid:focus-visible:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class);
+            return cn('box-border inline-flex size-control-md min-w-control-md cursor-pointer items-center justify-center rounded-s-md border border-e-0 border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none group-data-invalid/number-input:border-destructive focus-visible:z-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive active:bg-accent disabled:pointer-events-none data-disabled:pointer-events-none motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class);
         }
     }, others, {
         "data-slot": "number-input-decrement-trigger",
@@ -110,7 +110,7 @@ function NumberInputInput(props) {
     ]);
     return createComponent(NumberInput.Input, mergeProps({
         get ["class"] () {
-            return cn('h-control-md w-24 rounded-none border-x-0 border-y border-border border-x-current bg-background px-3 py-1 text-center text-md leading-6 text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out group-data-invalid/number-input:border-t-destructive group-data-invalid/number-input:border-b-destructive focus-visible:z-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive data-focus:z-1 data-focus:outline-ring group-data-invalid/number-input:data-focus:outline-destructive data-invalid:border-t-destructive data-invalid:border-b-destructive data-invalid:focus-visible:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none', local.class);
+            return cn('h-control-md w-24 rounded-none border-x-0 border-y border-border bg-background px-3 py-1 text-center text-md leading-6 text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out group-data-invalid/number-input:border-t-destructive group-data-invalid/number-input:border-b-destructive focus-visible:z-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive data-invalid:border-t-destructive data-invalid:border-b-destructive data-invalid:focus-visible:outline-destructive motion-reduce:transition-none', local.class);
         }
     }, others, {
         "data-slot": "number-input-input"
@@ -124,7 +124,7 @@ function NumberInputIncrementTrigger(props) {
     const resolvedChildren = children(()=>local.children);
     return createComponent(NumberInput.IncrementTrigger, mergeProps({
         get ["class"] () {
-            return cn('box-border inline-flex size-control-md min-w-control-md cursor-pointer items-center justify-center rounded-e-md border border-s-0 border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none group-data-invalid/number-input:border-destructive focus-visible:z-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive active:bg-accent disabled:pointer-events-none data-disabled:pointer-events-none data-focus:z-1 data-focus:outline-1 data-focus:-outline-offset-1 data-focus:outline-ring group-data-invalid/number-input:data-focus:outline-destructive data-invalid:border-destructive data-invalid:focus-visible:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class);
+            return cn('box-border inline-flex size-control-md min-w-control-md cursor-pointer items-center justify-center rounded-e-md border border-s-0 border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none group-data-invalid/number-input:border-destructive focus-visible:z-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive active:bg-accent disabled:pointer-events-none data-disabled:pointer-events-none motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class);
         }
     }, others, {
         "data-slot": "number-input-increment-trigger",

package/dist/components/number-input/NumberInput.jsx

@@ -48,7 +48,7 @@ function NumberInputDecrementTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <NumberInput.DecrementTrigger class={cn('box-border inline-flex size-control-md min-w-control-md cursor-pointer items-center justify-center rounded-s-md border border-e-0 border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none group-data-invalid/number-input:border-destructive focus-visible:z-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive active:bg-accent disabled:pointer-events-none data-disabled:pointer-events-none data-focus:z-1 data-focus:outline-1 data-focus:-outline-offset-1 data-focus:outline-ring group-data-invalid/number-input:data-focus:outline-destructive data-invalid:border-destructive data-invalid:focus-visible:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="number-input-decrement-trigger">
+    return <NumberInput.DecrementTrigger class={cn('box-border inline-flex size-control-md min-w-control-md cursor-pointer items-center justify-center rounded-s-md border border-e-0 border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none group-data-invalid/number-input:border-destructive focus-visible:z-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive active:bg-accent disabled:pointer-events-none data-disabled:pointer-events-none motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="number-input-decrement-trigger">
       {resolvedChildren() ?? <MinusIcon/>}
     </NumberInput.DecrementTrigger>;
 }
@@ -56,7 +56,7 @@ function NumberInputInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <NumberInput.Input class={cn('h-control-md w-24 rounded-none border-x-0 border-y border-border border-x-current bg-background px-3 py-1 text-center text-md leading-6 text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out group-data-invalid/number-input:border-t-destructive group-data-invalid/number-input:border-b-destructive focus-visible:z-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive data-focus:z-1 data-focus:outline-ring group-data-invalid/number-input:data-focus:outline-destructive data-invalid:border-t-destructive data-invalid:border-b-destructive data-invalid:focus-visible:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none', local.class)} {...others} data-slot="number-input-input"/>;
+    return <NumberInput.Input class={cn('h-control-md w-24 rounded-none border-x-0 border-y border-border bg-background px-3 py-1 text-center text-md leading-6 text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out group-data-invalid/number-input:border-t-destructive group-data-invalid/number-input:border-b-destructive focus-visible:z-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive data-invalid:border-t-destructive data-invalid:border-b-destructive data-invalid:focus-visible:outline-destructive motion-reduce:transition-none', local.class)} {...others} data-slot="number-input-input"/>;
 }
 function NumberInputIncrementTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -64,7 +64,7 @@ function NumberInputIncrementTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <NumberInput.IncrementTrigger class={cn('box-border inline-flex size-control-md min-w-control-md cursor-pointer items-center justify-center rounded-e-md border border-s-0 border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none group-data-invalid/number-input:border-destructive focus-visible:z-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive active:bg-accent disabled:pointer-events-none data-disabled:pointer-events-none data-focus:z-1 data-focus:outline-1 data-focus:-outline-offset-1 data-focus:outline-ring group-data-invalid/number-input:data-focus:outline-destructive data-invalid:border-destructive data-invalid:focus-visible:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="number-input-increment-trigger">
+    return <NumberInput.IncrementTrigger class={cn('box-border inline-flex size-control-md min-w-control-md cursor-pointer items-center justify-center rounded-e-md border border-s-0 border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none group-data-invalid/number-input:border-destructive focus-visible:z-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive active:bg-accent disabled:pointer-events-none data-disabled:pointer-events-none motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="number-input-increment-trigger">
       {resolvedChildren() ?? <PlusIcon/>}
     </NumberInput.IncrementTrigger>;
 }

package/dist/components/pagination/Pagination.js

@@ -54,7 +54,7 @@ function PaginationItem(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-2 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', 'data-selected:border-foreground data-selected:bg-foreground data-selected:text-background [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:data-selected:hover:bg-foreground', '[&_svg]:size-4 [&_svg]:shrink-0', local.class);
+            return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-2 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', 'data-selected:border-foreground data-selected:bg-foreground data-selected:text-background [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:data-selected:hover:bg-foreground', '[&_svg]:size-4 [&_svg]:shrink-0', local.class);
         }
     }, others, {
         "data-slot": "pagination-item"
@@ -72,7 +72,7 @@ function PaginationEllipsis(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium text-muted-foreground tabular-nums select-none', local.class);
+            return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm font-medium text-muted-foreground tabular-nums select-none', local.class);
         }
     }, others, {
         "data-slot": "pagination-ellipsis",
@@ -107,7 +107,7 @@ function PaginationPrevTrigger(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class);
+            return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', (null == local.children || false === local.children) && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class);
         }
     }, others, {
         "data-slot": "pagination-prev-trigger",
@@ -128,7 +128,7 @@ function PaginationNextTrigger(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class);
+            return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', (null == local.children || false === local.children) && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class);
         }
     }, others, {
         "data-slot": "pagination-next-trigger",
@@ -149,7 +149,7 @@ function PaginationFirstTrigger(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class);
+            return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', (null == local.children || false === local.children) && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class);
         }
     }, others, {
         "data-slot": "pagination-first-trigger",
@@ -172,7 +172,7 @@ function PaginationLastTrigger(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class);
+            return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', (null == local.children || false === local.children) && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class);
         }
     }, others, {
         "data-slot": "pagination-last-trigger",

package/dist/components/pagination/Pagination.jsx

@@ -27,7 +27,7 @@ function PaginationItem(props) {
         'asChild',
         'class'
     ]);
-    return <Pagination.Item asChild={local.asChild} class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-2 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', 'data-selected:border-foreground data-selected:bg-foreground data-selected:text-background [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:data-selected:hover:bg-foreground', '[&_svg]:size-4 [&_svg]:shrink-0', local.class)} {...others} data-slot="pagination-item"/>;
+    return <Pagination.Item asChild={local.asChild} class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-2 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', 'data-selected:border-foreground data-selected:bg-foreground data-selected:text-background [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:data-selected:hover:bg-foreground', '[&_svg]:size-4 [&_svg]:shrink-0', local.class)} {...others} data-slot="pagination-item"/>;
 }
 function PaginationEllipsis(props) {
     const [local, others] = splitProps(props, [
@@ -36,7 +36,7 @@ function PaginationEllipsis(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Pagination.Ellipsis asChild={local.asChild} class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium text-muted-foreground tabular-nums select-none', local.class)} {...others} data-slot="pagination-ellipsis">
+    return <Pagination.Ellipsis asChild={local.asChild} class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm font-medium text-muted-foreground tabular-nums select-none', local.class)} {...others} data-slot="pagination-ellipsis">
       {resolvedChildren() ?? (!local.asChild && '...')}
     </Pagination.Ellipsis>;
 }
@@ -53,7 +53,7 @@ function PaginationPrevTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Pagination.PrevTrigger asChild={local.asChild} class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others} data-slot="pagination-prev-trigger">
+    return <Pagination.PrevTrigger asChild={local.asChild} class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', (null == local.children || false === local.children) && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others} data-slot="pagination-prev-trigger">
       {resolvedChildren() ?? (!local.asChild && <ChevronLeftIcon/>)}
     </Pagination.PrevTrigger>;
 }
@@ -64,7 +64,7 @@ function PaginationNextTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Pagination.NextTrigger asChild={local.asChild} class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others} data-slot="pagination-next-trigger">
+    return <Pagination.NextTrigger asChild={local.asChild} class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', (null == local.children || false === local.children) && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others} data-slot="pagination-next-trigger">
       {resolvedChildren() ?? (!local.asChild && <ChevronRightIcon/>)}
     </Pagination.NextTrigger>;
 }
@@ -75,7 +75,7 @@ function PaginationFirstTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Pagination.FirstTrigger asChild={local.asChild} class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others} data-slot="pagination-first-trigger">
+    return <Pagination.FirstTrigger asChild={local.asChild} class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', (null == local.children || false === local.children) && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others} data-slot="pagination-first-trigger">
       {resolvedChildren() ?? (!local.asChild && <EdgeIcon side="left"/>)}
     </Pagination.FirstTrigger>;
 }
@@ -86,7 +86,7 @@ function PaginationLastTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Pagination.LastTrigger asChild={local.asChild} class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others} data-slot="pagination-last-trigger">
+    return <Pagination.LastTrigger asChild={local.asChild} class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', (null == local.children || false === local.children) && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others} data-slot="pagination-last-trigger">
       {resolvedChildren() ?? (!local.asChild && <EdgeIcon side="right"/>)}
     </Pagination.LastTrigger>;
 }

package/dist/components/password-input/PasswordInput.js

@@ -1,6 +1,6 @@
 import { createComponent, mergeProps } from "solid-js/web";
 import { PasswordInput, usePasswordInput, usePasswordInputContext } from "@ark-ui/solid/password-input";
-import { children, createEffect, splitProps } from "solid-js";
+import { children, splitProps } from "solid-js";
 import { cn } from "../../internal/cn.js";
 import { EyeClosedIcon, EyeIcon } from "../../internal/icons/ui/Icons.js";
 function PasswordInputRoot(props) {
@@ -33,7 +33,7 @@ function PasswordInputLabel(props) {
     ]);
     return createComponent(PasswordInput.Label, mergeProps({
         get ["class"] () {
-            return cn('inline-flex items-center gap-1 text-sm leading-5 font-medium text-foreground', local.class);
+            return cn('inline-flex items-center gap-1 text-sm font-medium text-foreground', local.class);
         }
     }, others, {
         "data-slot": "password-input-label"
@@ -55,27 +55,18 @@ function PasswordInputInput(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class',
-        'defaultValue',
-        'ref'
+        'defaultValue'
     ]);
-    let inputRef;
-    createEffect(()=>{
-        if (inputRef) inputRef.defaultValue = String(local.defaultValue ?? '');
-    });
     return createComponent(PasswordInput.Input, mergeProps({
         get asChild () {
             return local.asChild;
         }
-    }, others, ()=>local.asChild ? {
+    }, others, ()=>({
             'prop:defaultValue': local.defaultValue
-        } : {}, {
+        }), {
         "data-slot": "password-input-input",
         get ["class"] () {
-            return cn('min-h-0 min-w-0 flex-auto bg-transparent px-3 py-1 text-md leading-6 text-foreground outline-0 transition-opacity duration-200 ease-in-out placeholder:text-muted-foreground disabled:pointer-events-none data-disabled:pointer-events-none motion-reduce:transition-none', local.class);
-        },
-        ref: (element)=>{
-            inputRef = element;
-            if ('function' == typeof local.ref) local.ref(element);
+            return cn('min-h-0 min-w-0 flex-auto bg-transparent px-3 py-1 text-md text-foreground outline-0 transition-opacity duration-200 ease-in-out placeholder:text-muted-foreground disabled:pointer-events-none data-disabled:pointer-events-none motion-reduce:transition-none', local.class);
         }
     }));
 }

package/dist/components/password-input/PasswordInput.jsx

@@ -1,5 +1,5 @@
 import { PasswordInput, usePasswordInput, usePasswordInputContext } from "@ark-ui/solid/password-input";
-import { children, createEffect, splitProps } from "solid-js";
+import { children, splitProps } from "solid-js";
 import { cn } from "../../internal/cn.jsx";
 import { EyeClosedIcon, EyeIcon } from "../../internal/icons/ui/Icons.jsx";
 function PasswordInputRoot(props) {
@@ -18,7 +18,7 @@ function PasswordInputLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <PasswordInput.Label class={cn('inline-flex items-center gap-1 text-sm leading-5 font-medium text-foreground', local.class)} {...others} data-slot="password-input-label"/>;
+    return <PasswordInput.Label class={cn('inline-flex items-center gap-1 text-sm font-medium text-foreground', local.class)} {...others} data-slot="password-input-label"/>;
 }
 function PasswordInputControl(props) {
     const [local, others] = splitProps(props, [
@@ -30,19 +30,11 @@ function PasswordInputInput(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class',
-        'defaultValue',
-        'ref'
+        'defaultValue'
     ]);
-    let inputRef;
-    createEffect(()=>{
-        if (inputRef) inputRef.defaultValue = String(local.defaultValue ?? '');
-    });
-    return <PasswordInput.Input asChild={local.asChild} {...others} {...local.asChild ? {
+    return <PasswordInput.Input asChild={local.asChild} {...others} {...{
         'prop:defaultValue': local.defaultValue
-    } : {}} data-slot="password-input-input" class={cn('min-h-0 min-w-0 flex-auto bg-transparent px-3 py-1 text-md leading-6 text-foreground outline-0 transition-opacity duration-200 ease-in-out placeholder:text-muted-foreground disabled:pointer-events-none data-disabled:pointer-events-none motion-reduce:transition-none', local.class)} ref={(element)=>{
-        inputRef = element;
-        if ('function' == typeof local.ref) local.ref(element);
-    }}/>;
+    }} data-slot="password-input-input" class={cn('min-h-0 min-w-0 flex-auto bg-transparent px-3 py-1 text-md text-foreground outline-0 transition-opacity duration-200 ease-in-out placeholder:text-muted-foreground disabled:pointer-events-none data-disabled:pointer-events-none motion-reduce:transition-none', local.class)}/>;
 }
 function PasswordInputVisibilityTrigger(props) {
     const [local, others] = splitProps(props, [

package/dist/components/pin-input/PinInput.js

@@ -58,7 +58,7 @@ function PinInputLabel(props) {
     ]);
     return createComponent(PinInput.Label, mergeProps({
         get ["class"] () {
-            return cn('text-sm leading-5 font-medium text-foreground', local.class);
+            return cn('text-sm font-medium text-foreground', local.class);
         }
     }, others, {
         "data-slot": "pin-input-label"
@@ -82,7 +82,7 @@ function PinInputInput(props) {
     ]);
     return createComponent(PinInput.Input, mergeProps({
         get ["class"] () {
-            return cn('size-control-md flex-none rounded-md border border-border bg-background px-0 py-0 text-center text-lg leading-7 font-medium text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color] duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none data-disabled:pointer-events-none data-invalid:border-destructive data-invalid:focus-visible:outline-destructive motion-reduce:transition-none', local.class);
+            return cn('size-control-md flex-none rounded-md border border-border bg-background px-0 py-0 text-center text-lg font-medium text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color] duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none data-disabled:pointer-events-none data-invalid:border-destructive data-invalid:focus-visible:outline-destructive motion-reduce:transition-none', local.class);
         }
     }, others, {
         "data-slot": "pin-input-input"

package/dist/components/pin-input/PinInput.jsx

@@ -28,7 +28,7 @@ function PinInputLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <PinInput.Label class={cn('text-sm leading-5 font-medium text-foreground', local.class)} {...others} data-slot="pin-input-label"/>;
+    return <PinInput.Label class={cn('text-sm font-medium text-foreground', local.class)} {...others} data-slot="pin-input-label"/>;
 }
 function PinInputControl(props) {
     const [local, others] = splitProps(props, [
@@ -40,7 +40,7 @@ function PinInputInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <PinInput.Input class={cn('size-control-md flex-none rounded-md border border-border bg-background px-0 py-0 text-center text-lg leading-7 font-medium text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color] duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none data-disabled:pointer-events-none data-invalid:border-destructive data-invalid:focus-visible:outline-destructive motion-reduce:transition-none', local.class)} {...others} data-slot="pin-input-input"/>;
+    return <PinInput.Input class={cn('size-control-md flex-none rounded-md border border-border bg-background px-0 py-0 text-center text-lg font-medium text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color] duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none data-disabled:pointer-events-none data-invalid:border-destructive data-invalid:focus-visible:outline-destructive motion-reduce:transition-none', local.class)} {...others} data-slot="pin-input-input"/>;
 }
 function PinInputInputs(props) {
     const pinInput = usePinInputContext();

package/dist/components/popover/Popover.js

@@ -101,7 +101,7 @@ function PopoverTrigger(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-0 transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=open]:not-data-[value]:bg-accent data-[current]:data-[state=open]:bg-accent motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
+            return cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md text-foreground outline-0 transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=open]:not-data-[value]:bg-accent data-[current]:data-[state=open]:bg-accent motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
         }
     }, others, {
         "data-slot": "popover-trigger"
@@ -155,7 +155,7 @@ function PopoverArrow(props) {
     const resolvedChildren = children(()=>local.children);
     return createComponent(Popover.Arrow, mergeProps({
         get ["class"] () {
-            return cn('[--arrow-background:var(--color-popover)] [--arrow-size:0.625rem]', local.class);
+            return cn('[--arrow-background:var(--color-popover)] [--arrow-size:var(--spacing-2_5)]', local.class);
         }
     }, others, {
         "data-slot": "popover-arrow",
@@ -182,7 +182,7 @@ function PopoverTitle(props) {
     ]);
     return createComponent(Popover.Title, mergeProps({
         get ["class"] () {
-            return cn('text-md leading-6 font-semibold text-popover-foreground', local.class);
+            return cn('text-md font-semibold text-popover-foreground', local.class);
         }
     }, others, {
         "data-slot": "popover-title"
@@ -194,7 +194,7 @@ function PopoverDescription(props) {
     ]);
     return createComponent(Popover.Description, mergeProps({
         get ["class"] () {
-            return cn('text-sm leading-5 text-muted-foreground', local.class);
+            return cn('text-sm text-muted-foreground', local.class);
         }
     }, others, {
         "data-slot": "popover-description"
@@ -210,7 +210,7 @@ function PopoverCloseTrigger(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-0 transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
+            return cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md text-foreground outline-0 transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
         }
     }, others, {
         "data-slot": "popover-close-trigger"
@@ -248,7 +248,7 @@ function PopoverHeader(props) {
     ]);
     return createComponent(ark.div, mergeProps({
         get ["class"] () {
-            return cn('grid gap-1 group-has-[>[data-slot=popover-close-icon]]/popover-content:pe-10', local.class);
+            return cn('grid gap-1 group-has-[[data-slot=popover-close-icon]]/popover-content:pe-10', local.class);
         }
     }, others, {
         "data-slot": "popover-header"

package/dist/components/popover/Popover.jsx

@@ -46,7 +46,7 @@ function PopoverTrigger(props) {
         'asChild',
         'class'
     ]);
-    return <Popover.Trigger asChild={local.asChild} class={cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-0 transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=open]:not-data-[value]:bg-accent data-[current]:data-[state=open]:bg-accent motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="popover-trigger"/>;
+    return <Popover.Trigger asChild={local.asChild} class={cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md text-foreground outline-0 transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=open]:not-data-[value]:bg-accent data-[current]:data-[state=open]:bg-accent motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="popover-trigger"/>;
 }
 function PopoverIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -74,7 +74,7 @@ function PopoverArrow(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Popover.Arrow class={cn('[--arrow-background:var(--color-popover)] [--arrow-size:0.625rem]', local.class)} {...others} data-slot="popover-arrow">
+    return <Popover.Arrow class={cn('[--arrow-background:var(--color-popover)] [--arrow-size:var(--spacing-2_5)]', local.class)} {...others} data-slot="popover-arrow">
       {resolvedChildren() ?? <PopoverArrowTip/>}
     </Popover.Arrow>;
 }
@@ -88,20 +88,20 @@ function PopoverTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Popover.Title class={cn('text-md leading-6 font-semibold text-popover-foreground', local.class)} {...others} data-slot="popover-title"/>;
+    return <Popover.Title class={cn('text-md font-semibold text-popover-foreground', local.class)} {...others} data-slot="popover-title"/>;
 }
 function PopoverDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Popover.Description class={cn('text-sm leading-5 text-muted-foreground', local.class)} {...others} data-slot="popover-description"/>;
+    return <Popover.Description class={cn('text-sm text-muted-foreground', local.class)} {...others} data-slot="popover-description"/>;
 }
 function PopoverCloseTrigger(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Popover.CloseTrigger asChild={local.asChild} class={cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-0 transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="popover-close-trigger"/>;
+    return <Popover.CloseTrigger asChild={local.asChild} class={cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md text-foreground outline-0 transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="popover-close-trigger"/>;
 }
 function PopoverCloseIcon(props) {
     const [local, others] = splitProps(props, [
@@ -119,7 +119,7 @@ function PopoverHeader(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div class={cn('grid gap-1 group-has-[>[data-slot=popover-close-icon]]/popover-content:pe-10', local.class)} {...others} data-slot="popover-header"/>;
+    return <ark.div class={cn('grid gap-1 group-has-[[data-slot=popover-close-icon]]/popover-content:pe-10', local.class)} {...others} data-slot="popover-header"/>;
 }
 function PopoverBody(props) {
     const [local, others] = splitProps(props, [

package/dist/components/progress-circular/ProgressCircular.js

@@ -52,7 +52,7 @@ function ProgressCircularLabel(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return cn('max-w-full min-w-0 text-center text-sm font-regular [overflow-wrap:anywhere]', local.class);
+            return cn('max-w-full min-w-0 text-center text-sm font-regular wrap-anywhere', local.class);
         }
     }, others, {
         "data-slot": "progress-circular-label"
@@ -68,7 +68,7 @@ function ProgressCircularValueText(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return cn('max-w-full min-w-0 text-center text-sm font-medium [overflow-wrap:anywhere]', local.class);
+            return cn('max-w-full min-w-0 text-center text-sm font-medium wrap-anywhere', local.class);
         }
     }, others, {
         "data-slot": "progress-circular-value-text"
@@ -120,7 +120,7 @@ function ProgressCircularCircleRange(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return cn('origin-center stroke-primary transition-[stroke-dashoffset] duration-200 ease-in-out [stroke-linecap:round] [transform-box:fill-box] data-[state=indeterminate]:animate-[moduix-spin_1.4s_linear_infinite] data-[state=indeterminate]:[stroke-dasharray:1_200] motion-reduce:transition-none motion-reduce:data-[state=indeterminate]:animate-none motion-reduce:data-[state=indeterminate]:[stroke-dasharray:20_200]', local.class);
+            return cn('origin-center stroke-primary transition-[stroke-dashoffset] duration-200 ease-in-out [stroke-linecap:round] [transform-box:fill-box] data-[state=indeterminate]:animate-moduix-progress-circular-indeterminate data-[state=indeterminate]:[stroke-dasharray:1_200] motion-reduce:transition-none motion-reduce:data-[state=indeterminate]:animate-none motion-reduce:data-[state=indeterminate]:[stroke-dasharray:20_200]', local.class);
         }
     }, others, {
         "data-slot": "progress-circular-circle-range"

package/dist/components/progress-circular/ProgressCircular.jsx

@@ -26,14 +26,14 @@ function ProgressCircularLabel(props) {
         'asChild',
         'class'
     ]);
-    return <Progress.Label asChild={local.asChild} class={cn('max-w-full min-w-0 text-center text-sm font-regular [overflow-wrap:anywhere]', local.class)} {...others} data-slot="progress-circular-label"/>;
+    return <Progress.Label asChild={local.asChild} class={cn('max-w-full min-w-0 text-center text-sm font-regular wrap-anywhere', local.class)} {...others} data-slot="progress-circular-label"/>;
 }
 function ProgressCircularValueText(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Progress.ValueText asChild={local.asChild} class={cn('max-w-full min-w-0 text-center text-sm font-medium [overflow-wrap:anywhere]', local.class)} {...others} data-slot="progress-circular-value-text"/>;
+    return <Progress.ValueText asChild={local.asChild} class={cn('max-w-full min-w-0 text-center text-sm font-medium wrap-anywhere', local.class)} {...others} data-slot="progress-circular-value-text"/>;
 }
 function ProgressCircularCircle(props) {
     const [local, others] = splitProps(props, [
@@ -57,7 +57,7 @@ function ProgressCircularCircleRange(props) {
         'asChild',
         'class'
     ]);
-    return <Progress.CircleRange asChild={local.asChild} class={cn('origin-center stroke-primary transition-[stroke-dashoffset] duration-200 ease-in-out [stroke-linecap:round] [transform-box:fill-box] data-[state=indeterminate]:animate-[moduix-spin_1.4s_linear_infinite] data-[state=indeterminate]:[stroke-dasharray:1_200] motion-reduce:transition-none motion-reduce:data-[state=indeterminate]:animate-none motion-reduce:data-[state=indeterminate]:[stroke-dasharray:20_200]', local.class)} {...others} data-slot="progress-circular-circle-range"/>;
+    return <Progress.CircleRange asChild={local.asChild} class={cn('origin-center stroke-primary transition-[stroke-dashoffset] duration-200 ease-in-out [stroke-linecap:round] [transform-box:fill-box] data-[state=indeterminate]:animate-moduix-progress-circular-indeterminate data-[state=indeterminate]:[stroke-dasharray:1_200] motion-reduce:transition-none motion-reduce:data-[state=indeterminate]:animate-none motion-reduce:data-[state=indeterminate]:[stroke-dasharray:20_200]', local.class)} {...others} data-slot="progress-circular-circle-range"/>;
 }
 function ProgressCircularRing(props) {
     return <ProgressCircularCircle {...props}>

package/dist/components/qr-code/QrCode.js

@@ -109,7 +109,7 @@ function QrCodeDownloadTrigger(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return cn('box-border inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-4 text-sm leading-5 font-medium whitespace-nowrap text-foreground transition-[border-color,background-color,color,opacity,box-shadow,transform] duration-200 ease-in-out select-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [&_svg]:size-4 [&_svg]:shrink-0 [&:active:not(:disabled):not([data-disabled])]:opacity-[0.94] motion-safe:[&:active:not(:disabled):not([data-disabled])]:translate-y-px motion-safe:[&:active:not(:disabled):not([data-disabled])]:scale-[0.985] [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-accent', local.class);
+            return cn('box-border inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-4 text-sm font-medium whitespace-nowrap text-foreground transition-[border-color,background-color,color,opacity,box-shadow,transform] duration-200 ease-in-out select-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [&_svg]:size-4 [&_svg]:shrink-0 [&:active:not(:disabled):not([data-disabled])]:opacity-[0.94] motion-safe:[&:active:not(:disabled):not([data-disabled])]:translate-y-px motion-safe:[&:active:not(:disabled):not([data-disabled])]:scale-[0.985] [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-accent', local.class);
         }
     }, others, {
         "data-slot": "qr-code-download-trigger",

package/dist/components/qr-code/QrCode.jsx

@@ -54,7 +54,7 @@ function QrCodeDownloadTrigger(props) {
         'children',
         'class'
     ]);
-    return <QrCode.DownloadTrigger asChild={local.asChild} class={cn('box-border inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-4 text-sm leading-5 font-medium whitespace-nowrap text-foreground transition-[border-color,background-color,color,opacity,box-shadow,transform] duration-200 ease-in-out select-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [&_svg]:size-4 [&_svg]:shrink-0 [&:active:not(:disabled):not([data-disabled])]:opacity-[0.94] motion-safe:[&:active:not(:disabled):not([data-disabled])]:translate-y-px motion-safe:[&:active:not(:disabled):not([data-disabled])]:scale-[0.985] [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-accent', local.class)} {...others} data-slot="qr-code-download-trigger">
+    return <QrCode.DownloadTrigger asChild={local.asChild} class={cn('box-border inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-4 text-sm font-medium whitespace-nowrap text-foreground transition-[border-color,background-color,color,opacity,box-shadow,transform] duration-200 ease-in-out select-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [&_svg]:size-4 [&_svg]:shrink-0 [&:active:not(:disabled):not([data-disabled])]:opacity-[0.94] motion-safe:[&:active:not(:disabled):not([data-disabled])]:translate-y-px motion-safe:[&:active:not(:disabled):not([data-disabled])]:scale-[0.985] [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-accent', local.class)} {...others} data-slot="qr-code-download-trigger">
       {local.children}
     </QrCode.DownloadTrigger>;
 }

package/dist/components/radio-group/RadioGroup.d.ts

@@ -19,8 +19,8 @@ declare function RadioGroupIndicator(props: ComponentProps<typeof RadioGroupPrim
 declare const RadioGroup: typeof RadioGroupRoot & {
     Root: typeof RadioGroupRoot;
     RootProvider: typeof RadioGroupRootProvider;
-    Context: (props: import("@ark-ui/solid").RadioGroupContextProps) => JSX.Element;
-    ItemContext: (props: import("@ark-ui/solid").RadioGroupItemContextProps) => JSX.Element;
+    Context: (props: import("@ark-ui/solid/radio-group").RadioGroupContextProps) => JSX.Element;
+    ItemContext: (props: import("@ark-ui/solid/radio-group").RadioGroupItemContextProps) => JSX.Element;
     Label: typeof RadioGroupLabel;
     Item: typeof RadioGroupItem;
     ItemHiddenInput: (props: RadioGroupPrimitive.ItemHiddenInputProps) => JSX.Element;

package/dist/components/radio-group/RadioGroup.js

@@ -138,7 +138,7 @@ function RadioGroupIndicator(props) {
     return createComponent(RadioGroup.Indicator, mergeProps(others, {
         "data-slot": "radio-group-indicator",
         get ["class"] () {
-            return cn('pointer-events-none absolute top-[var(--top)] left-[var(--left)] h-[var(--height)] w-[var(--width)] rounded-full bg-primary opacity-[0.12] transition-[var(--transition-property,translate)] duration-200 ease-in-out motion-reduce:transition-none', local.class);
+            return cn('pointer-events-none absolute top-[var(--top)] left-[var(--left)] h-[var(--height)] w-[var(--width)] rounded-full bg-primary opacity-[0.12] [--transition-duration:var(--moduix-duration-normal)]', local.class);
         }
     }));
 }

package/dist/components/radio-group/RadioGroup.jsx

@@ -76,7 +76,7 @@ function RadioGroupIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <RadioGroup.Indicator {...others} data-slot="radio-group-indicator" class={cn('pointer-events-none absolute top-[var(--top)] left-[var(--left)] h-[var(--height)] w-[var(--width)] rounded-full bg-primary opacity-[0.12] transition-[var(--transition-property,translate)] duration-200 ease-in-out motion-reduce:transition-none', local.class)}/>;
+    return <RadioGroup.Indicator {...others} data-slot="radio-group-indicator" class={cn('pointer-events-none absolute top-[var(--top)] left-[var(--left)] h-[var(--height)] w-[var(--width)] rounded-full bg-primary opacity-[0.12] [--transition-duration:var(--moduix-duration-normal)]', local.class)}/>;
 }
 const RadioGroup_RadioGroup = Object.assign(RadioGroupRoot, {
     Root: RadioGroupRoot,