@moduix/react 1.1.0 → 2.0.0

package/dist/components/menu/Menu.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .by_0RW_trigger, .by_0RW_contextTrigger {
+  .AJ5G3W_trigger, .AJ5G3W_contextTrigger {
     box-sizing: border-box;
     justify-content: center;
     align-items: center;
@@ -45,13 +45,13 @@
     }
   }
 
-  .by_0RW_contextTrigger {
+  .AJ5G3W_contextTrigger {
     width: var(--menu-context-trigger-width, 15rem);
     min-height: var(--menu-context-trigger-height, 10rem);
     border-style: var(--menu-context-trigger-border-style, dashed);
   }
 
-  .by_0RW_triggerIcon, .by_0RW_indicator {
+  .AJ5G3W_triggerIcon, .AJ5G3W_indicator {
     box-sizing: border-box;
     width: var(--menu-trigger-icon-size, 1rem);
     height: var(--menu-trigger-icon-size, 1rem);
@@ -62,19 +62,19 @@
     display: inline-flex;
   }
 
-  .by_0RW_iconSvg {
+  .AJ5G3W_iconSvg {
     width: 100%;
     height: 100%;
   }
 
-  .by_0RW_positioner {
+  .AJ5G3W_positioner {
     z-index: var(--z-index);
     width: var(--positioner-width, auto);
     max-width: var(--available-width);
     outline: 0;
   }
 
-  .by_0RW_content {
+  .AJ5G3W_content {
     --arrow-size: var(--menu-arrow-size, .625rem);
     --arrow-background: var(--menu-popup-bg, var(--color-popover));
     box-sizing: border-box;
@@ -97,27 +97,31 @@
     overflow: auto;
 
     &[data-state="open"] {
-      animation: by_0RW_menuContentIn var(--menu-transition, var(--transition-default));
+      animation: AJ5G3W_menuContentIn
+        var(--menu-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
 
     &[data-state="closed"] {
-      animation: by_0RW_menuContentOut var(--menu-transition, var(--transition-default));
+      animation: AJ5G3W_menuContentOut
+        var(--menu-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
   }
 
-  .by_0RW_arrow {
+  .AJ5G3W_arrow {
     --arrow-background: var(--menu-popup-bg, var(--color-popover));
     z-index: -1;
   }
 
-  .by_0RW_arrowTip {
+  .AJ5G3W_arrowTip {
     border-block-start: var(--menu-popup-border-width, var(--border-width-sm)) solid
       var(--menu-arrow-stroke-color, var(--menu-popup-border-color, var(--color-border)));
     border-inline-start: var(--menu-popup-border-width, var(--border-width-sm)) solid
       var(--menu-arrow-stroke-color, var(--menu-popup-border-color, var(--color-border)));
   }
 
-  .by_0RW_item, .by_0RW_triggerItem, .by_0RW_radioItem, .by_0RW_checkboxItem {
+  .AJ5G3W_item, .AJ5G3W_triggerItem, .AJ5G3W_radioItem, .AJ5G3W_checkboxItem {
     box-sizing: border-box;
     min-height: var(--menu-item-height, var(--popup-item-min-height, 2rem));
     border-radius: var(--menu-item-radius, var(--radius-sm));
@@ -176,7 +180,7 @@
     }
   }
 
-  .by_0RW_item {
+  .AJ5G3W_item {
     align-items: center;
     gap: var(--menu-item-gap, var(--spacing-2));
     padding-block: var(--menu-item-padding-y, var(--popup-item-padding-y, .5rem));
@@ -185,7 +189,7 @@
     display: flex;
   }
 
-  .by_0RW_triggerItem {
+  .AJ5G3W_triggerItem {
     justify-content: space-between;
     align-items: center;
     gap: var(--menu-trigger-item-gap, var(--spacing-3));
@@ -195,7 +199,7 @@
     display: flex;
   }
 
-  .by_0RW_triggerItemIcon {
+  .AJ5G3W_triggerItemIcon {
     box-sizing: border-box;
     width: var(--menu-trigger-item-icon-size, .875rem);
     height: var(--menu-trigger-item-icon-size, .875rem);
@@ -204,12 +208,12 @@
     display: inline-flex;
   }
 
-  .by_0RW_itemGroup {
+  .AJ5G3W_itemGroup {
     padding-block: var(--menu-group-padding-y, 0);
     display: grid;
   }
 
-  .by_0RW_itemGroupLabel {
+  .AJ5G3W_itemGroupLabel {
     padding-block: var(--menu-group-label-padding-y, var(--popup-group-label-padding-y, .35rem));
     padding-inline: var(--menu-group-label-padding-x-start, var(--popup-group-label-padding-x-start, .625rem))
       var(--menu-group-label-padding-x-end, var(--popup-group-label-padding-x-end, .75rem));
@@ -221,11 +225,11 @@
     margin: 0;
   }
 
-  .by_0RW_radioItemGroup {
+  .AJ5G3W_radioItemGroup {
     display: grid;
   }
 
-  .by_0RW_radioItem, .by_0RW_checkboxItem {
+  .AJ5G3W_radioItem, .AJ5G3W_checkboxItem {
     align-items: center;
     gap: var(--menu-check-gap, var(--popup-check-gap, .5rem));
     grid-template-columns: var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem))
@@ -239,11 +243,11 @@
       grid-template-columns: minmax(0, 1fr);
       padding-inline-start: var(--menu-item-padding-x-start, var(--popup-item-padding-x-start, 1rem));
 
-      & > .by_0RW_itemIndicator {
+      & > .AJ5G3W_itemIndicator {
         display: none;
       }
 
-      & > .by_0RW_itemText {
+      & > .AJ5G3W_itemText {
         grid-column-start: 1;
       }
     }
@@ -252,25 +256,25 @@
       grid-template-columns: minmax(0, 1fr)
         var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
 
-      & > .by_0RW_itemText {
+      & > .AJ5G3W_itemText {
         grid-column-start: 1;
       }
 
-      & > .by_0RW_itemIndicator {
+      & > .AJ5G3W_itemIndicator {
         grid-column-start: 2;
         justify-self: end;
       }
     }
   }
 
-  .by_0RW_checkboxItem[data-state="checked"] {
-    & > .by_0RW_itemIndicator {
+  .AJ5G3W_checkboxItem[data-state="checked"] {
+    & > .AJ5G3W_itemIndicator {
       background-color: var(--menu-checkbox-indicator-bg-checked, var(--menu-checkbox-indicator-bg, transparent));
       border-color: var(--menu-checkbox-indicator-border-color-checked, var(--menu-checkbox-indicator-border-color, currentColor));
     }
   }
 
-  .by_0RW_itemIndicator {
+  .AJ5G3W_itemIndicator {
     width: var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
     height: var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
     border: var(--menu-checkbox-indicator-border-width, 0) solid
@@ -287,18 +291,18 @@
     }
   }
 
-  .by_0RW_itemIndicatorIcon {
+  .AJ5G3W_itemIndicatorIcon {
     width: 100%;
     height: 100%;
   }
 
-  .by_0RW_itemText {
+  .AJ5G3W_itemText {
     grid-column-start: 2;
     min-width: 0;
     overflow: hidden;
   }
 
-  .by_0RW_itemTextContent {
+  .AJ5G3W_itemTextContent {
     align-items: center;
     gap: var(--menu-item-text-content-gap, var(--spacing-2));
     vertical-align: top;
@@ -307,7 +311,7 @@
     display: inline-flex;
   }
 
-  .by_0RW_itemTextIcon {
+  .AJ5G3W_itemTextIcon {
     width: var(--menu-item-text-icon-size, 1rem);
     height: var(--menu-item-text-icon-size, 1rem);
     color: var(--menu-item-text-icon-color, currentColor);
@@ -317,14 +321,14 @@
     display: inline-flex;
   }
 
-  .by_0RW_itemTextLabel {
+  .AJ5G3W_itemTextLabel {
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 0;
     overflow: hidden;
   }
 
-  .by_0RW_itemShortcut {
+  .AJ5G3W_itemShortcut {
     color: var(--menu-item-shortcut-color, var(--color-muted-foreground));
     font-size: var(--menu-item-shortcut-font-size, var(--text-xs));
     line-height: var(--menu-item-shortcut-line-height, var(--line-height-text-xs));
@@ -333,7 +337,7 @@
     padding-inline-start: var(--menu-item-shortcut-padding-x-start, var(--spacing-4));
   }
 
-  .by_0RW_separator {
+  .AJ5G3W_separator {
     box-sizing: border-box;
     height: var(--menu-separator-height, var(--border-width-sm));
     margin-block: var(--menu-separator-margin-y, var(--popup-separator-margin-y, .375rem));
@@ -343,11 +347,12 @@
     border: 0;
   }
 
-  @keyframes by_0RW_menuContentIn {
+  @keyframes AJ5G3W_menuContentIn {
     from {
-      opacity: var(--menu-popup-starting-opacity, 0);
-      translate: var(--menu-popup-starting-translate-x, 0) var(--menu-popup-starting-translate-y, 0);
-      transform: scale(var(--menu-popup-starting-scale, var(--scale-popup)));
+      opacity: var(--menu-popup-starting-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--menu-popup-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
+        var(--menu-popup-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
+      transform: scale(var(--menu-popup-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup))));
     }
 
     to {
@@ -356,16 +361,17 @@
     }
   }
 
-  @keyframes by_0RW_menuContentOut {
+  @keyframes AJ5G3W_menuContentOut {
     from {
       opacity: 1;
       transform: scale(1);
     }
 
     to {
-      opacity: var(--menu-popup-ending-opacity, 0);
-      translate: var(--menu-popup-ending-translate-x, 0) var(--menu-popup-ending-translate-y, 0);
-      transform: scale(var(--menu-popup-ending-scale, var(--scale-popup)));
+      opacity: var(--menu-popup-ending-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--menu-popup-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
+        var(--menu-popup-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
+      transform: scale(var(--menu-popup-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup))));
     }
   }
 }

package/dist/components/menu/Menu.d.ts

@@ -1,6 +1,6 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
 import { ComponentProps } from "react";
-import { Menu } from "@ark-ui/react/menu";
+import { Menu, useMenu } from "@ark-ui/react/menu";
 
 //#region src/components/menu/Menu.d.ts
 type MenuIndicatorPosition = 'start' | 'end' | 'none';
@@ -78,6 +78,7 @@ declare const Menu$1: typeof MenuRoot & {
   ItemTextIcon: typeof MenuItemTextIcon;
   ItemTextLabel: typeof MenuItemTextLabel;
   ItemShortcut: typeof MenuItemShortcut;
+  ItemContext: (props: Menu.ItemContextProps) => import("react").ReactNode;
 };
 //#endregion
-export { Menu$1 as Menu };
+export { Menu$1 as Menu, useMenu };

package/dist/components/menu/Menu.js

@@ -1,11 +1,11 @@
-import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import Menu_module_default from "./Menu.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Menu } from "@ark-ui/react/menu";
+import { jsx } from "react/jsx-runtime";
+import { Menu, useMenu } from "@ark-ui/react/menu";
 //#region src/components/menu/Menu.tsx
 function MenuRoot({ portalled, portalRef, ...props }) {
 	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
@@ -234,7 +234,8 @@ const Menu$1 = Object.assign(MenuRoot, {
 	ItemTextContent: MenuItemTextContent,
 	ItemTextIcon: MenuItemTextIcon,
 	ItemTextLabel: MenuItemTextLabel,
-	ItemShortcut: MenuItemShortcut
+	ItemShortcut: MenuItemShortcut,
+	ItemContext: Menu.ItemContext
 });
 //#endregion
-export { Menu$1 as Menu };
+export { Menu$1 as Menu, useMenu };

package/dist/components/menu/Menu.module.js

@@ -1,33 +1,33 @@
 import './Menu.css';
 //#region src/components/menu/Menu.module.css
 var Menu_module_default = {
-	"arrow": "by_0RW_arrow",
-	"arrowTip": "by_0RW_arrowTip",
-	"checkboxItem": "by_0RW_checkboxItem",
-	"content": "by_0RW_content",
-	"contextTrigger": "by_0RW_contextTrigger",
-	"iconSvg": "by_0RW_iconSvg",
-	"indicator": "by_0RW_indicator",
-	"item": "by_0RW_item",
-	"itemGroup": "by_0RW_itemGroup",
-	"itemGroupLabel": "by_0RW_itemGroupLabel",
-	"itemIndicator": "by_0RW_itemIndicator",
-	"itemIndicatorIcon": "by_0RW_itemIndicatorIcon",
-	"itemShortcut": "by_0RW_itemShortcut",
-	"itemText": "by_0RW_itemText",
-	"itemTextContent": "by_0RW_itemTextContent",
-	"itemTextIcon": "by_0RW_itemTextIcon",
-	"itemTextLabel": "by_0RW_itemTextLabel",
-	"menuContentIn": "by_0RW_menuContentIn",
-	"menuContentOut": "by_0RW_menuContentOut",
-	"positioner": "by_0RW_positioner",
-	"radioItem": "by_0RW_radioItem",
-	"radioItemGroup": "by_0RW_radioItemGroup",
-	"separator": "by_0RW_separator",
-	"trigger": "by_0RW_trigger",
-	"triggerIcon": "by_0RW_triggerIcon",
-	"triggerItem": "by_0RW_triggerItem",
-	"triggerItemIcon": "by_0RW_triggerItemIcon"
+	"arrow": "AJ5G3W_arrow",
+	"arrowTip": "AJ5G3W_arrowTip",
+	"checkboxItem": "AJ5G3W_checkboxItem",
+	"content": "AJ5G3W_content",
+	"contextTrigger": "AJ5G3W_contextTrigger",
+	"iconSvg": "AJ5G3W_iconSvg",
+	"indicator": "AJ5G3W_indicator",
+	"item": "AJ5G3W_item",
+	"itemGroup": "AJ5G3W_itemGroup",
+	"itemGroupLabel": "AJ5G3W_itemGroupLabel",
+	"itemIndicator": "AJ5G3W_itemIndicator",
+	"itemIndicatorIcon": "AJ5G3W_itemIndicatorIcon",
+	"itemShortcut": "AJ5G3W_itemShortcut",
+	"itemText": "AJ5G3W_itemText",
+	"itemTextContent": "AJ5G3W_itemTextContent",
+	"itemTextIcon": "AJ5G3W_itemTextIcon",
+	"itemTextLabel": "AJ5G3W_itemTextLabel",
+	"menuContentIn": "AJ5G3W_menuContentIn",
+	"menuContentOut": "AJ5G3W_menuContentOut",
+	"positioner": "AJ5G3W_positioner",
+	"radioItem": "AJ5G3W_radioItem",
+	"radioItemGroup": "AJ5G3W_radioItemGroup",
+	"separator": "AJ5G3W_separator",
+	"trigger": "AJ5G3W_trigger",
+	"triggerIcon": "AJ5G3W_triggerIcon",
+	"triggerItem": "AJ5G3W_triggerItem",
+	"triggerItemIcon": "AJ5G3W_triggerItemIcon"
 };
 //#endregion
 export { Menu_module_default as default };

package/dist/components/menu/index.d.ts

@@ -1,2 +1,2 @@
-import { Menu } from "./Menu.js";
-export { Menu };
+import { Menu, useMenu } from "./Menu.js";
+export { Menu, useMenu };

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

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .FVeLgG_control {
+  .mei8Eq_control {
     width: fit-content;
     min-width: 0;
     max-width: 100%;
@@ -7,7 +7,7 @@
     position: relative;
   }
 
-  .FVeLgG_root {
+  .mei8Eq_root {
     box-sizing: border-box;
     width: var(--select-width, 14rem);
     max-width: var(--select-max-width, 100%);
@@ -69,7 +69,7 @@
     }
   }
 
-  .FVeLgG_indicator {
+  .mei8Eq_indicator {
     top: 50%;
     width: var(--select-action-size, var(--spacing-6));
     height: var(--select-action-size, var(--spacing-6));
@@ -94,11 +94,11 @@
     }
   }
 
-  .FVeLgG_root:is([data-disabled], :disabled) + .FVeLgG_indicator {
+  .mei8Eq_root:is([data-disabled], :disabled) + .mei8Eq_indicator {
     opacity: var(--select-disabled-opacity, var(--opacity-disabled));
   }
 
-  .FVeLgG_root:is([multiple], [size]:not([size="1"])) + .FVeLgG_indicator {
+  .mei8Eq_root:is([multiple], [size]:not([size="1"])) + .mei8Eq_indicator {
     display: none;
   }
 }

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

@@ -1,8 +1,12 @@
+import { ComponentProps } from "react";
 import { Field } from "@ark-ui/react/field";
 
 //#region src/components/native-select/NativeSelect.d.ts
-declare const NativeSelect: import("react").ForwardRefExoticComponent<Omit<Field.SelectProps & import("react").RefAttributes<HTMLSelectElement>, "ref"> & import("react").RefAttributes<HTMLSelectElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<Field.SelectProps & import("react").RefAttributes<HTMLSelectElement>, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
+type NativeSelectRootProps = ComponentProps<typeof Field.Select> & {
+  controlProps?: ComponentProps<'span'>;
+};
+declare const NativeSelect: import("react").ForwardRefExoticComponent<Omit<NativeSelectRootProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<NativeSelectRootProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
 };
 //#endregion
 export { NativeSelect };

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

@@ -1,17 +1,18 @@
-import { ChevronDownIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { ChevronDownIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import NativeSelect_module_default from "./NativeSelect.module.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@ark-ui/react/field";
 //#region src/components/native-select/NativeSelect.tsx
-const NativeSelectRoot = forwardRef(function NativeSelectRoot({ className, ...props }, ref) {
+const NativeSelectRoot = forwardRef(function NativeSelectRoot({ className, controlProps, ...props }, ref) {
 	return /* @__PURE__ */ jsxs("span", {
+		...controlProps,
 		"data-scope": "native-select",
 		"data-part": "control",
 		"data-slot": "native-select-control",
-		className: NativeSelect_module_default.control,
+		className: clsx(NativeSelect_module_default.control, normalizeClassName(controlProps?.className)),
 		children: [/* @__PURE__ */ jsx(Field.Select, {
 			...props,
 			ref,

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

@@ -1,9 +1,9 @@
 import './NativeSelect.css';
 //#region src/components/native-select/NativeSelect.module.css
 var NativeSelect_module_default = {
-	"control": "FVeLgG_control",
-	"indicator": "FVeLgG_indicator",
-	"root": "FVeLgG_root"
+	"control": "mei8Eq_control",
+	"indicator": "mei8Eq_indicator",
+	"root": "mei8Eq_root"
 };
 //#endregion
 export { NativeSelect_module_default as default };

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

@@ -1,5 +1,5 @@
 @layer ui.components {
-  ._99y8lW_root {
+  .ZjEX8G_root {
     align-items: flex-start;
     gap: var(--number-input-gap, var(--spacing-1));
     width: var(--number-input-width, auto);
@@ -12,14 +12,14 @@
     }
   }
 
-  ._99y8lW_label {
+  .ZjEX8G_label {
     color: var(--number-input-label-color, var(--color-foreground));
     font-size: var(--number-input-label-font-size, var(--text-sm));
     line-height: var(--number-input-label-line-height, var(--line-height-text-sm));
     font-weight: var(--number-input-label-font-weight, var(--weight-medium));
   }
 
-  ._99y8lW_scrubber {
+  .ZjEX8G_scrubber {
     align-items: center;
     gap: var(--number-input-scrubber-gap, var(--spacing-2));
     color: var(--number-input-scrubber-color, var(--color-foreground));
@@ -29,16 +29,15 @@
 
     &[data-disabled] {
       cursor: default;
-      opacity: var(--number-input-disabled-opacity, var(--opacity-disabled));
     }
   }
 
-  ._99y8lW_control {
+  .ZjEX8G_control {
     align-items: stretch;
     display: inline-flex;
   }
 
-  ._99y8lW_decrementTrigger, ._99y8lW_incrementTrigger {
+  .ZjEX8G_decrementTrigger, .ZjEX8G_incrementTrigger {
     --_number-input-focus-ring-width: var(--number-input-focus-ring-width, var(--number-input-border-width, var(--border-width-sm)));
     box-sizing: border-box;
     width: var(--number-input-control-height, var(--size-lg));
@@ -79,11 +78,10 @@
     }
 
     &:is([data-disabled], :disabled) {
-      opacity: var(--number-input-disabled-opacity, var(--opacity-disabled));
       pointer-events: none;
     }
 
-    &[data-invalid], ._99y8lW_root[data-invalid] & {
+    &[data-invalid], .ZjEX8G_root[data-invalid] & {
       border-color: var(--number-input-border-color-invalid, var(--color-destructive));
     }
 
@@ -94,19 +92,19 @@
     }
   }
 
-  ._99y8lW_decrementTrigger {
+  .ZjEX8G_decrementTrigger {
     border-radius: var(--number-input-radius, var(--radius-md)) 0 0
       var(--number-input-radius, var(--radius-md));
     border-right: 0;
   }
 
-  ._99y8lW_incrementTrigger {
+  .ZjEX8G_incrementTrigger {
     border-radius: 0 var(--number-input-radius, var(--radius-md))
       var(--number-input-radius, var(--radius-md)) 0;
     border-left: 0;
   }
 
-  ._99y8lW_input {
+  .ZjEX8G_input {
     --_number-input-focus-ring-width: var(--number-input-focus-ring-width, var(--number-input-border-width, var(--border-width-sm)));
     box-sizing: border-box;
     width: var(--number-input-input-width, 6rem);
@@ -139,7 +137,7 @@
       z-index: 1;
     }
 
-    &[data-invalid], ._99y8lW_root[data-invalid] & {
+    &[data-invalid], .ZjEX8G_root[data-invalid] & {
       border-top-color: var(--number-input-border-color-invalid, var(--color-destructive));
       border-bottom-color: var(--number-input-border-color-invalid, var(--color-destructive));
 
@@ -147,13 +145,9 @@
         outline-color: var(--number-input-border-color-invalid, var(--color-destructive));
       }
     }
-
-    &:is([data-disabled], :disabled) {
-      opacity: var(--number-input-disabled-opacity, var(--opacity-disabled));
-    }
   }
 
-  ._99y8lW_valueText {
+  .ZjEX8G_valueText {
     color: var(--number-input-value-text-color, var(--color-muted-foreground));
     font-size: var(--number-input-value-text-font-size, var(--text-sm));
     line-height: var(--number-input-value-text-line-height, var(--line-height-text-sm));

package/dist/components/number-input/NumberInput.d.ts

@@ -1,16 +1,21 @@
-import { NumberInput } from "@ark-ui/react/number-input";
+import { ComponentProps } from "react";
+import { NumberInput, useNumberInput, useNumberInputContext } from "@ark-ui/react/number-input";
 
 //#region src/components/number-input/NumberInput.d.ts
+declare const NumberInputControl: import("react").ForwardRefExoticComponent<Omit<NumberInput.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type NumberInputFieldProps = Omit<ComponentProps<typeof NumberInputControl>, 'asChild' | 'children'>;
 declare const NumberInput$1: import("react").ForwardRefExoticComponent<Omit<NumberInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<NumberInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<NumberInput.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Context: (props: NumberInput.ContextProps) => import("react").ReactNode;
   Label: import("react").ForwardRefExoticComponent<Omit<NumberInput.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   Scrubber: import("react").ForwardRefExoticComponent<Omit<NumberInput.ScrubberProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Control: import("react").ForwardRefExoticComponent<Omit<NumberInput.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Field: import("react").ForwardRefExoticComponent<Omit<NumberInputFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   DecrementTrigger: import("react").ForwardRefExoticComponent<Omit<NumberInput.DecrementTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Input: import("react").ForwardRefExoticComponent<Omit<NumberInput.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
   IncrementTrigger: import("react").ForwardRefExoticComponent<Omit<NumberInput.IncrementTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   ValueText: import("react").ForwardRefExoticComponent<Omit<NumberInput.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 };
 //#endregion
-export { NumberInput$1 as NumberInput };
+export { NumberInput$1 as NumberInput, useNumberInput, useNumberInputContext };

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

@@ -1,10 +1,10 @@
-import { MinusIcon, PlusIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { MinusIcon, PlusIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import NumberInput_module_default from "./NumberInput.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { NumberInput } from "@ark-ui/react/number-input";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NumberInput, useNumberInput, useNumberInputContext } from "@ark-ui/react/number-input";
 //#region src/components/number-input/NumberInput.tsx
 const NumberInputRoot = forwardRef(function NumberInputRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(NumberInput.Root, {
@@ -80,16 +80,29 @@ const NumberInputValueText = forwardRef(function NumberInputValueText({ classNam
 		...props
 	});
 });
+const NumberInputField = forwardRef(function NumberInputField(props, ref) {
+	return /* @__PURE__ */ jsxs(NumberInputControl, {
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(NumberInputDecrementTrigger, {}),
+			/* @__PURE__ */ jsx(NumberInputInput, {}),
+			/* @__PURE__ */ jsx(NumberInputIncrementTrigger, {})
+		]
+	});
+});
 const NumberInput$1 = Object.assign(NumberInputRoot, {
 	Root: NumberInputRoot,
 	RootProvider: NumberInputRootProvider,
+	Context: NumberInput.Context,
 	Label: NumberInputLabel,
 	Scrubber: NumberInputScrubber,
 	Control: NumberInputControl,
+	Field: NumberInputField,
 	DecrementTrigger: NumberInputDecrementTrigger,
 	Input: NumberInputInput,
 	IncrementTrigger: NumberInputIncrementTrigger,
 	ValueText: NumberInputValueText
 });
 //#endregion
-export { NumberInput$1 as NumberInput };
+export { NumberInput$1 as NumberInput, useNumberInput, useNumberInputContext };