@moduix/solid 1.1.0 → 2.0.0

package/dist/components/command-palette/CommandPalette.jsx

@@ -1,7 +1,7 @@
 import { Combobox } from "@ark-ui/solid/combobox";
 import { Dialog, useDialog, useDialogContext } from "@ark-ui/solid/dialog";
 import { ark } from "@ark-ui/solid/factory";
-import { isHotKey } from "@zag-js/hotkeys";
+import { isHotKey } from "@ark-ui/solid/hotkeys";
 import { clsx } from "clsx";
 import { children, createEffect, onCleanup, splitProps } from "solid-js";
 import { CheckIcon, CloseIcon } from "../../internal/icons/ui/Icons.jsx";

package/dist/components/drawer/Drawer.js

@@ -148,9 +148,6 @@ function DrawerContent(props) {
     ]);
     const rootVariant = useContext(DrawerVariantContext);
     return createComponent(Drawer.Content, mergeProps({
-        get ["data-variant"] () {
-            return local.variant ?? rootVariant;
-        },
         get ["class"] () {
             return clsx(Drawer_module.content, local.class);
         },
@@ -158,6 +155,9 @@ function DrawerContent(props) {
             return local.draggable ?? true;
         }
     }, others, {
+        get ["data-variant"] () {
+            return local.variant ?? rootVariant;
+        },
         "data-slot": "drawer-content"
     }));
 }

package/dist/components/drawer/Drawer.jsx

@@ -73,7 +73,7 @@ function DrawerContent(props) {
         'variant'
     ]);
     const rootVariant = useContext(DrawerVariantContext);
-    return <Drawer.Content data-variant={local.variant ?? rootVariant} class={clsx(Drawer_module.content, local.class)} draggable={local.draggable ?? true} {...others} data-slot="drawer-content"/>;
+    return <Drawer.Content class={clsx(Drawer_module.content, local.class)} draggable={local.draggable ?? true} {...others} data-variant={local.variant ?? rootVariant} data-slot="drawer-content"/>;
 }
 function DrawerGrabber(props) {
     const [local, others] = splitProps(props, [

package/dist/components/highlight/Highlight_module.css

@@ -6,7 +6,6 @@
     background-color: var(--moduix-highlight-bg, color-mix(in oklab, var(--moduix-color-warning) 40%, var(--moduix-color-accent)));
     color: var(--moduix-highlight-color, var(--moduix-color-foreground));
     box-shadow: var(--moduix-highlight-shadow, none);
-    font: inherit;
     font-weight: var(--moduix-highlight-font-weight, var(--moduix-weight-medium));
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;

package/dist/components/image-cropper/ImageCropper.d.ts

@@ -22,6 +22,6 @@ declare const ImageCropper: typeof ImageCropperRoot & {
     Grid: typeof ImageCropperGrid;
     Handle: typeof ImageCropperHandle;
     CropArea: typeof ImageCropperCropArea;
-    handles: import("@ark-ui/solid").ImageCropperHandlePosition[];
+    handles: import("@ark-ui/solid/image-cropper").ImageCropperHandlePosition[];
 };
 export { ImageCropper, useImageCropper, useImageCropperContext };

package/dist/components/json-tree-view/JsonTreeView_module.css

@@ -64,7 +64,15 @@
     inset-inline-end: 0;
   }
 
-  :is(.root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"]):not([data-disabled]):hover, .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"])[data-selected]):before {
+  @media (hover: hover) {
+    .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"]):not([data-disabled]):hover:before {
+      background-color: color-mix(in oklab,
+            var(--moduix-color-accent) 72%,
+            var(--moduix-color-background));
+    }
+  }
+
+  .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"])[data-selected]:before {
     background-color: color-mix(in oklab,
           var(--moduix-color-accent) 72%,
           var(--moduix-color-background));

package/dist/components/marquee/Marquee_module.css

@@ -1,9 +1,5 @@
 @layer moduix.components {
   .root-liPuNO {
-    --marquee-edge-color: var(--moduix-color-background);
-    --marquee-edge-size: 20%;
-    --moduix-marquee-edge-color: var(--marquee-edge-color);
-    --moduix-marquee-edge-size: var(--marquee-edge-size);
     box-sizing: border-box;
     width: var(--moduix-marquee-width, 100%);
     height: var(--moduix-marquee-height, auto);
@@ -54,36 +50,38 @@
   }
 
   .edge-LzcjhJ {
+    --_edge-color: var(--moduix-marquee-edge-color, var(--marquee-edge-color, var(--moduix-color-background)));
+    --_edge-size: var(--moduix-marquee-edge-size, var(--marquee-edge-size, 20%));
     z-index: var(--moduix-marquee-edge-z-index, 1);
     pointer-events: none;
   }
 
   .edge-LzcjhJ[data-side="start"] {
-    width: var(--moduix-marquee-edge-size);
-    background: linear-gradient(to right, var(--moduix-marquee-edge-color), transparent);
+    width: var(--_edge-size);
+    background: linear-gradient(to right, var(--_edge-color), transparent);
   }
 
   .edge-LzcjhJ[data-side="start"][dir="rtl"] {
-    background: linear-gradient(to left, var(--moduix-marquee-edge-color), transparent);
+    background: linear-gradient(to left, var(--_edge-color), transparent);
   }
 
   .edge-LzcjhJ[data-side="end"] {
-    width: var(--moduix-marquee-edge-size);
-    background: linear-gradient(to left, var(--moduix-marquee-edge-color), transparent);
+    width: var(--_edge-size);
+    background: linear-gradient(to left, var(--_edge-color), transparent);
   }
 
   .edge-LzcjhJ[data-side="end"][dir="rtl"] {
-    background: linear-gradient(to right, var(--moduix-marquee-edge-color), transparent);
+    background: linear-gradient(to right, var(--_edge-color), transparent);
   }
 
   .edge-LzcjhJ[data-side="top"] {
-    height: var(--moduix-marquee-edge-size);
-    background: linear-gradient(to bottom, var(--moduix-marquee-edge-color), transparent);
+    height: var(--_edge-size);
+    background: linear-gradient(to bottom, var(--_edge-color), transparent);
   }
 
   .edge-LzcjhJ[data-side="bottom"] {
-    height: var(--moduix-marquee-edge-size);
-    background: linear-gradient(to top, var(--moduix-marquee-edge-color), transparent);
+    height: var(--_edge-size);
+    background: linear-gradient(to top, var(--_edge-color), transparent);
   }
 
   @keyframes marquee-x-Su5_G3 {

package/dist/components/menu/Menu.js

@@ -1,5 +1,4 @@
 import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
-import { useFocusVisible } from "@ark-ui/solid";
 import { ark } from "@ark-ui/solid/factory";
 import { Menu, useMenu, useMenuContext, useMenuItemContext } from "@ark-ui/solid/menu";
 import { clsx } from "clsx";
@@ -71,7 +70,6 @@ function MenuRootProvider(props) {
     });
 }
 function MenuTrigger(props) {
-    const focusVisible = useFocusVisible();
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
@@ -80,9 +78,6 @@ function MenuTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        get ["data-focus-visible"] () {
-            return focusVisible() ? '' : void 0;
-        },
         get ["class"] () {
             return clsx(!local.asChild && Menu_module.trigger, local.class);
         }
@@ -135,7 +130,6 @@ function MenuIndicator(props) {
     }));
 }
 function MenuContextTrigger(props) {
-    const focusVisible = useFocusVisible();
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
@@ -144,9 +138,6 @@ function MenuContextTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        get ["data-focus-visible"] () {
-            return focusVisible() ? '' : void 0;
-        },
         get ["class"] () {
             return clsx(!local.asChild && Menu_module.contextTrigger, local.class);
         }
@@ -199,12 +190,12 @@ function MenuViewport(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "menu",
-        "data-part": "viewport",
         get ["class"] () {
             return clsx(Menu_module.viewport, local.class);
         }
     }, others, {
+        "data-scope": "menu",
+        "data-part": "viewport",
         "data-slot": "menu-viewport"
     }));
 }
@@ -243,13 +234,13 @@ function MenuItem(props) {
         'tone'
     ]);
     return createComponent(Menu.Item, mergeProps({
-        get ["data-tone"] () {
-            return local.tone ?? 'default';
-        },
         get ["class"] () {
             return clsx(Menu_module.item, local.class);
         }
     }, others, {
+        get ["data-tone"] () {
+            return local.tone ?? 'default';
+        },
         "data-slot": "menu-item"
     }));
 }
@@ -346,13 +337,13 @@ function MenuRadioItem(props) {
         'indicator'
     ]);
     return createComponent(Menu.RadioItem, mergeProps({
-        get ["data-indicator-position"] () {
-            return local.indicator ?? 'start';
-        },
         get ["class"] () {
             return clsx(Menu_module.radioItem, local.class);
         }
     }, others, {
+        get ["data-indicator-position"] () {
+            return local.indicator ?? 'start';
+        },
         "data-slot": "menu-radio-item"
     }));
 }
@@ -362,13 +353,13 @@ function MenuCheckboxItem(props) {
         'indicator'
     ]);
     return createComponent(Menu.CheckboxItem, mergeProps({
-        get ["data-indicator-position"] () {
-            return local.indicator ?? 'start';
-        },
         get ["class"] () {
             return clsx(Menu_module.checkboxItem, local.class);
         }
     }, others, {
+        get ["data-indicator-position"] () {
+            return local.indicator ?? 'start';
+        },
         "data-slot": "menu-checkbox-item"
     }));
 }

package/dist/components/menu/Menu.jsx

@@ -1,4 +1,3 @@
-import { useFocusVisible } from "@ark-ui/solid";
 import { ark } from "@ark-ui/solid/factory";
 import { Menu, useMenu, useMenuContext, useMenuItemContext } from "@ark-ui/solid/menu";
 import { clsx } from "clsx";
@@ -35,12 +34,11 @@ function MenuRootProvider(props) {
     </OverlayPortalProvider>;
 }
 function MenuTrigger(props) {
-    const focusVisible = useFocusVisible();
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Menu.Trigger asChild={local.asChild} data-focus-visible={focusVisible() ? '' : void 0} class={clsx(!local.asChild && Menu_module.trigger, local.class)} {...others} data-slot="menu-trigger"/>;
+    return <Menu.Trigger asChild={local.asChild} class={clsx(!local.asChild && Menu_module.trigger, local.class)} {...others} data-slot="menu-trigger"/>;
 }
 function MenuTriggerIcon(props) {
     const [local, others] = splitProps(props, [
@@ -63,12 +61,11 @@ function MenuIndicator(props) {
     </Menu.Indicator>;
 }
 function MenuContextTrigger(props) {
-    const focusVisible = useFocusVisible();
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Menu.ContextTrigger asChild={local.asChild} data-focus-visible={focusVisible() ? '' : void 0} class={clsx(!local.asChild && Menu_module.contextTrigger, local.class)} {...others} data-slot="menu-context-trigger"/>;
+    return <Menu.ContextTrigger asChild={local.asChild} class={clsx(!local.asChild && Menu_module.contextTrigger, local.class)} {...others} data-slot="menu-context-trigger"/>;
 }
 function MenuPositioner(props) {
     const [local, others] = splitProps(props, [
@@ -93,7 +90,7 @@ function MenuViewport(props) {
         'asChild',
         'class'
     ]);
-    return <ark.div asChild={local.asChild} data-scope="menu" data-part="viewport" class={clsx(Menu_module.viewport, local.class)} {...others} data-slot="menu-viewport"/>;
+    return <ark.div asChild={local.asChild} class={clsx(Menu_module.viewport, local.class)} {...others} data-scope="menu" data-part="viewport" data-slot="menu-viewport"/>;
 }
 function MenuArrow(props) {
     const [local, others] = splitProps(props, [
@@ -116,7 +113,7 @@ function MenuItem(props) {
         'class',
         'tone'
     ]);
-    return <Menu.Item data-tone={local.tone ?? 'default'} class={clsx(Menu_module.item, local.class)} {...others} data-slot="menu-item"/>;
+    return <Menu.Item class={clsx(Menu_module.item, local.class)} {...others} data-tone={local.tone ?? 'default'} data-slot="menu-item"/>;
 }
 function MenuTriggerItem(props) {
     const [local, others] = splitProps(props, [
@@ -166,14 +163,14 @@ function MenuRadioItem(props) {
         'class',
         'indicator'
     ]);
-    return <Menu.RadioItem data-indicator-position={local.indicator ?? 'start'} class={clsx(Menu_module.radioItem, local.class)} {...others} data-slot="menu-radio-item"/>;
+    return <Menu.RadioItem class={clsx(Menu_module.radioItem, local.class)} {...others} data-indicator-position={local.indicator ?? 'start'} data-slot="menu-radio-item"/>;
 }
 function MenuCheckboxItem(props) {
     const [local, others] = splitProps(props, [
         'class',
         'indicator'
     ]);
-    return <Menu.CheckboxItem data-indicator-position={local.indicator ?? 'start'} class={clsx(Menu_module.checkboxItem, local.class)} {...others} data-slot="menu-checkbox-item"/>;
+    return <Menu.CheckboxItem class={clsx(Menu_module.checkboxItem, local.class)} {...others} data-indicator-position={local.indicator ?? 'start'} data-slot="menu-checkbox-item"/>;
 }
 function MenuItemIndicator(props) {
     const [local, others] = splitProps(props, [

package/dist/components/menu/Menu_module.css

@@ -37,7 +37,7 @@
     background-color: var(--moduix-menu-trigger-bg-active, var(--moduix-menu-trigger-bg-hover));
   }
 
-  :is(.trigger-GnJcCa, .contextTrigger-jyrQRV):focus[data-focus-visible] {
+  :is(.trigger-GnJcCa, .contextTrigger-jyrQRV):focus-visible {
     outline: var(--moduix-menu-focus-ring-width, var(--moduix-menu-trigger-border-width, var(--moduix-border-width-sm)))
         solid var(--moduix-menu-focus-ring-color, var(--moduix-color-ring));
     outline-offset: calc(var(--moduix-menu-focus-ring-width, var(--moduix-menu-trigger-border-width, var(--moduix-border-width-sm))) *

package/dist/components/native-select/NativeSelect.d.ts

@@ -2,7 +2,6 @@ import type { FieldSelectProps } from '@ark-ui/solid/field';
 import type { JSX } from 'solid-js';
 type NativeSelectRootProps = FieldSelectProps & {
     controlProps?: JSX.HTMLAttributes<HTMLSpanElement>;
-    defaultValue?: FieldSelectProps['value'];
 };
 declare function NativeSelectRoot(props: NativeSelectRootProps): JSX.Element;
 declare const NativeSelect: typeof NativeSelectRoot & {

package/dist/components/native-select/NativeSelect.js

@@ -5,13 +5,11 @@ import { splitProps } from "solid-js";
 import { ChevronDownIcon } from "../../internal/icons/ui/Icons.js";
 import NativeSelect_module from "./NativeSelect.module.js";
 var _tmpl$ = /*#__PURE__*/ template("<span><span aria-hidden=true data-scope=native-select data-part=indicator data-slot=native-select-indicator>");
-const NativeFieldSelect = Field.Select;
 function NativeSelectRoot(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class',
-        'controlProps',
-        'defaultValue'
+        'controlProps'
     ]);
     return (()=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
@@ -23,7 +21,7 @@ function NativeSelectRoot(props) {
                 return clsx(NativeSelect_module.control, local.controlProps?.class);
             }
         }), false, true);
-        insert(_el$, createComponent(NativeFieldSelect, mergeProps({
+        insert(_el$, createComponent(Field.Select, mergeProps({
             get asChild () {
                 return local.asChild;
             }
@@ -33,9 +31,6 @@ function NativeSelectRoot(props) {
             "data-slot": "native-select-root",
             get ["class"] () {
                 return clsx(NativeSelect_module.root, local.class);
-            },
-            get ["prop:defaultValue"] () {
-                return local.defaultValue;
             }
         })), _el$2);
         insert(_el$2, createComponent(ChevronDownIcon, {}));

package/dist/components/native-select/NativeSelect.jsx

@@ -3,16 +3,14 @@ import { clsx } from "clsx";
 import { splitProps } from "solid-js";
 import { ChevronDownIcon } from "../../internal/icons/ui/Icons.jsx";
 import NativeSelect_module from "./NativeSelect.module.jsx";
-const NativeFieldSelect = Field.Select;
 function NativeSelectRoot(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class',
-        'controlProps',
-        'defaultValue'
+        'controlProps'
     ]);
     return <span {...local.controlProps} data-scope="native-select" data-part="control" data-slot="native-select-control" class={clsx(NativeSelect_module.control, local.controlProps?.class)}>
-      <NativeFieldSelect asChild={local.asChild} {...others} data-scope="field" data-part="select" data-slot="native-select-root" class={clsx(NativeSelect_module.root, local.class)} prop:defaultValue={local.defaultValue}/>
+      <Field.Select asChild={local.asChild} {...others} data-scope="field" data-part="select" data-slot="native-select-root" class={clsx(NativeSelect_module.root, local.class)}/>
       <span aria-hidden="true" data-scope="native-select" data-part="indicator" data-slot="native-select-indicator" class={NativeSelect_module.indicator}>
         <ChevronDownIcon/>
       </span>

package/dist/components/native-select/NativeSelect_module.css

@@ -30,10 +30,10 @@
       outline-color var(--moduix-select-transition, var(--moduix-transition-default)),
       opacity var(--moduix-select-transition, var(--moduix-transition-default));
     margin: 0;
-    padding-inline-start: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3));
+    padding-inline-start: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3-5));
     padding-inline-end: calc(var(--moduix-select-action-offset-right, var(--moduix-spacing-2)) +
-        var(--moduix-select-action-size, var(--moduix-spacing-6)) +
-        var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3)));
+        var(--moduix-select-action-size, var(--moduix-size-xs)) +
+        var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3-5)));
   }
 
   .root-ZCXVuV:focus-visible {
@@ -54,21 +54,21 @@
   .root-ZCXVuV:is([multiple], [size]:not([size="0"], [size="1"])) {
     height: auto;
     padding-block: var(--moduix-spacing-2);
-    padding-inline: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3));
+    padding-inline: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3-5));
     appearance: auto;
   }
 
   @media (forced-colors: active) {
     .root-ZCXVuV {
       appearance: auto;
-      padding-inline-end: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3));
+      padding-inline-end: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3-5));
     }
   }
 
   .indicator-oW5rXf {
     top: 50%;
-    width: var(--moduix-select-action-size, var(--moduix-spacing-6));
-    height: var(--moduix-select-action-size, var(--moduix-spacing-6));
+    width: var(--moduix-select-action-size, var(--moduix-size-xs));
+    height: var(--moduix-select-action-size, var(--moduix-size-xs));
     border-radius: var(--moduix-select-action-radius, var(--moduix-radius-sm));
     background: var(--moduix-select-action-bg, transparent);
     color: var(--moduix-select-icon-color, var(--moduix-color-muted-foreground));

package/dist/components/navigation-menu/NavigationMenu.d.ts

@@ -26,6 +26,7 @@ declare const NavigationMenu: typeof NavigationMenuRoot & {
     Arrow: typeof NavigationMenuArrow;
     ViewportPositioner: typeof NavigationMenuViewportPositioner;
     Viewport: typeof NavigationMenuViewport;
+    useNavigationMenu: (props?: import("@ark-ui/solid/navigation-menu").UseNavigationMenuProps) => import("@ark-ui/solid/navigation-menu").UseNavigationMenuReturn;
 };
 export { useNavigationMenu, useNavigationMenuContext };
 export { NavigationMenu };

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

@@ -168,6 +168,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/navigation-menu/NavigationMenu.jsx

@@ -89,6 +89,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/navigation-menu/NavigationMenu_module.css

@@ -370,7 +370,7 @@
   @keyframes navigation-menu-viewport-in-GyosQZ {
     from {
       opacity: 0;
-      transform: rotateX(-30deg) scale(.9);
+      transform: scale(var(--moduix-scale-popup));
     }
 
     to {
@@ -387,7 +387,7 @@
 
     to {
       opacity: 0;
-      transform: rotateX(-10deg) scale(.95);
+      transform: scale(var(--moduix-scale-popup));
     }
   }
 

package/dist/components/number-input/NumberInput_module.css

@@ -74,7 +74,7 @@
     background-color: var(--moduix-number-input-button-bg-active, var(--moduix-number-input-button-bg-hover, var(--moduix-color-accent)));
   }
 
-  :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr):focus-visible, :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr)[data-focus] {
+  :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr):focus-visible {
     outline: var(--_number-input-focus-ring-width) solid
         var(--moduix-number-input-focus-ring-color, var(--moduix-color-ring));
     outline-offset: calc(var(--_number-input-focus-ring-width) * -1);
@@ -85,7 +85,7 @@
     pointer-events: none;
   }
 
-  :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr)[data-invalid], .root-J5l339[data-invalid] :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr) {
+  .root-J5l339[data-invalid] :is(.decrementTrigger-gr_J6_, .incrementTrigger-AZRSzr) {
     border-color: var(--moduix-number-input-border-color-invalid, var(--moduix-color-destructive));
   }
 
@@ -137,7 +137,7 @@
     margin: 0;
   }
 
-  .input-MggWIT:focus-visible, .input-MggWIT[data-focus] {
+  .input-MggWIT:focus-visible {
     outline-color: var(--moduix-number-input-focus-ring-color, var(--moduix-color-ring));
     z-index: 1;
   }
@@ -147,7 +147,7 @@
     border-bottom-color: var(--moduix-number-input-border-color-invalid, var(--moduix-color-destructive));
   }
 
-  :is(.input-MggWIT[data-invalid], .root-J5l339[data-invalid] .input-MggWIT):focus-visible, :is(.input-MggWIT[data-invalid], .root-J5l339[data-invalid] .input-MggWIT)[data-focus] {
+  :is(.input-MggWIT[data-invalid], .root-J5l339[data-invalid] .input-MggWIT):focus-visible {
     outline-color: var(--moduix-number-input-border-color-invalid, var(--moduix-color-destructive));
   }
 

package/dist/components/pagination/Pagination.js

@@ -109,7 +109,7 @@ function PaginationPrevTrigger(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return clsx(Pagination_module.trigger, null == local.children && Pagination_module.iconTrigger, local.class);
+            return clsx(Pagination_module.trigger, (null == local.children || false === local.children) && Pagination_module.iconTrigger, local.class);
         }
     }, others, {
         "data-slot": "pagination-prev-trigger",
@@ -130,7 +130,7 @@ function PaginationNextTrigger(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return clsx(Pagination_module.trigger, null == local.children && Pagination_module.iconTrigger, local.class);
+            return clsx(Pagination_module.trigger, (null == local.children || false === local.children) && Pagination_module.iconTrigger, local.class);
         }
     }, others, {
         "data-slot": "pagination-next-trigger",
@@ -151,7 +151,7 @@ function PaginationFirstTrigger(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return clsx(Pagination_module.trigger, null == local.children && Pagination_module.iconTrigger, local.class);
+            return clsx(Pagination_module.trigger, (null == local.children || false === local.children) && Pagination_module.iconTrigger, local.class);
         }
     }, others, {
         "data-slot": "pagination-first-trigger",
@@ -174,7 +174,7 @@ function PaginationLastTrigger(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return clsx(Pagination_module.trigger, null == local.children && Pagination_module.iconTrigger, local.class);
+            return clsx(Pagination_module.trigger, (null == local.children || false === local.children) && Pagination_module.iconTrigger, local.class);
         }
     }, others, {
         "data-slot": "pagination-last-trigger",

package/dist/components/pagination/Pagination.jsx

@@ -54,7 +54,7 @@ function PaginationPrevTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Pagination.PrevTrigger asChild={local.asChild} class={clsx(Pagination_module.trigger, null == local.children && Pagination_module.iconTrigger, local.class)} {...others} data-slot="pagination-prev-trigger">
+    return <Pagination.PrevTrigger asChild={local.asChild} class={clsx(Pagination_module.trigger, (null == local.children || false === local.children) && Pagination_module.iconTrigger, local.class)} {...others} data-slot="pagination-prev-trigger">
       {resolvedChildren() ?? (!local.asChild && <ChevronLeftIcon/>)}
     </Pagination.PrevTrigger>;
 }
@@ -65,7 +65,7 @@ function PaginationNextTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Pagination.NextTrigger asChild={local.asChild} class={clsx(Pagination_module.trigger, null == local.children && Pagination_module.iconTrigger, local.class)} {...others} data-slot="pagination-next-trigger">
+    return <Pagination.NextTrigger asChild={local.asChild} class={clsx(Pagination_module.trigger, (null == local.children || false === local.children) && Pagination_module.iconTrigger, local.class)} {...others} data-slot="pagination-next-trigger">
       {resolvedChildren() ?? (!local.asChild && <ChevronRightIcon/>)}
     </Pagination.NextTrigger>;
 }
@@ -76,7 +76,7 @@ function PaginationFirstTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Pagination.FirstTrigger asChild={local.asChild} class={clsx(Pagination_module.trigger, null == local.children && Pagination_module.iconTrigger, local.class)} {...others} data-slot="pagination-first-trigger">
+    return <Pagination.FirstTrigger asChild={local.asChild} class={clsx(Pagination_module.trigger, (null == local.children || false === local.children) && Pagination_module.iconTrigger, local.class)} {...others} data-slot="pagination-first-trigger">
       {resolvedChildren() ?? (!local.asChild && <EdgeIcon side="left"/>)}
     </Pagination.FirstTrigger>;
 }
@@ -87,7 +87,7 @@ function PaginationLastTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Pagination.LastTrigger asChild={local.asChild} class={clsx(Pagination_module.trigger, null == local.children && Pagination_module.iconTrigger, local.class)} {...others} data-slot="pagination-last-trigger">
+    return <Pagination.LastTrigger asChild={local.asChild} class={clsx(Pagination_module.trigger, (null == local.children || false === local.children) && Pagination_module.iconTrigger, local.class)} {...others} data-slot="pagination-last-trigger">
       {resolvedChildren() ?? (!local.asChild && <EdgeIcon side="right"/>)}
     </Pagination.LastTrigger>;
 }

package/dist/components/pagination/Pagination_module.css

@@ -73,7 +73,7 @@
   }
 
   .trigger-Z_SoJt {
-    padding-inline: max(var(--moduix-pagination-item-padding-inline, var(--moduix-spacing-3)),
+    padding-inline: max(var(--moduix-pagination-item-padding-inline, var(--moduix-spacing-2)),
       var(--moduix-spacing-3));
   }
 

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

@@ -1,7 +1,7 @@
 import { createComponent, mergeProps } from "solid-js/web";
 import { PasswordInput, usePasswordInput, usePasswordInputContext } from "@ark-ui/solid/password-input";
 import { clsx } from "clsx";
-import { children, createEffect, splitProps } from "solid-js";
+import { children, splitProps } from "solid-js";
 import { EyeClosedIcon, EyeIcon } from "../../internal/icons/ui/Icons.js";
 import PasswordInput_module from "./PasswordInput.module.js";
 function PasswordInputRoot(props) {
@@ -56,27 +56,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 clsx(PasswordInput_module.input, local.class);
-        },
-        ref: (element)=>{
-            inputRef = element;
-            if ('function' == typeof local.ref) local.ref(element);
         }
     }));
 }