@moduix/react 1.1.0

package/dist/components/menu/Menu.js

@@ -0,0 +1,240 @@
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.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";
+//#region src/components/menu/Menu.tsx
+function MenuRoot({ portalled, portalRef, ...props }) {
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(Menu.Root, { ...props })
+	});
+}
+function MenuRootProvider({ portalled, portalRef, ...props }) {
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(Menu.RootProvider, { ...props })
+	});
+}
+const MenuTrigger = forwardRef(function MenuTrigger({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		ref,
+		"data-slot": "menu-trigger",
+		asChild,
+		className: clsx(!asChild && Menu_module_default.trigger, normalizeClassName(className)),
+		...props
+	});
+});
+function MenuTriggerIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "menu-trigger-icon",
+		className: clsx(Menu_module_default.triggerIcon, className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronDownIcon, { className: Menu_module_default.iconSvg })
+	});
+}
+const MenuIndicator = forwardRef(function MenuIndicator({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Menu.Indicator, {
+		ref,
+		"data-slot": "menu-indicator",
+		className: clsx(Menu_module_default.indicator, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronDownIcon, { className: Menu_module_default.iconSvg })
+	});
+});
+const MenuContextTrigger = forwardRef(function MenuContextTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Menu.ContextTrigger, {
+		ref,
+		"data-slot": "menu-context-trigger",
+		className: clsx(Menu_module_default.contextTrigger, normalizeClassName(className)),
+		...props
+	});
+});
+const MenuPositioner = forwardRef(function MenuPositioner({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		ref,
+		"data-slot": "menu-positioner",
+		className: clsx(Menu_module_default.positioner, normalizeClassName(className)),
+		...props
+	}) });
+});
+const MenuContent = forwardRef(function MenuContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Menu.Content, {
+		ref,
+		"data-slot": "menu-content",
+		className: clsx(Menu_module_default.content, normalizeClassName(className)),
+		...props
+	});
+});
+const MenuArrow = forwardRef(function MenuArrow({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Menu.Arrow, {
+		ref,
+		"data-slot": "menu-arrow",
+		className: clsx(Menu_module_default.arrow, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(MenuArrowTip, {})
+	});
+});
+const MenuArrowTip = forwardRef(function MenuArrowTip({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Menu.ArrowTip, {
+		ref,
+		"data-slot": "menu-arrow-tip",
+		className: clsx(Menu_module_default.arrowTip, normalizeClassName(className)),
+		...props
+	});
+});
+const MenuItem = forwardRef(function MenuItem({ className, tone = "default", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		ref,
+		"data-slot": "menu-item",
+		"data-tone": tone,
+		className: clsx(Menu_module_default.item, normalizeClassName(className)),
+		...props
+	});
+});
+const MenuTriggerItem = forwardRef(function MenuTriggerItem({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Menu.TriggerItem, {
+		ref,
+		"data-slot": "menu-trigger-item",
+		className: clsx(Menu_module_default.triggerItem, normalizeClassName(className)),
+		...props,
+		children
+	});
+});
+function MenuTriggerItemIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "menu-trigger-item-icon",
+		className: clsx(Menu_module_default.triggerItemIcon, className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: Menu_module_default.iconSvg })
+	});
+}
+const MenuSeparator = forwardRef(function MenuSeparator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		ref,
+		"data-slot": "menu-separator",
+		className: clsx(Menu_module_default.separator, normalizeClassName(className)),
+		...props
+	});
+});
+const MenuItemGroup = forwardRef(function MenuItemGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Menu.ItemGroup, {
+		ref,
+		"data-slot": "menu-item-group",
+		className: clsx(Menu_module_default.itemGroup, normalizeClassName(className)),
+		...props
+	});
+});
+const MenuItemGroupLabel = forwardRef(function MenuItemGroupLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Menu.ItemGroupLabel, {
+		ref,
+		"data-slot": "menu-item-group-label",
+		className: clsx(Menu_module_default.itemGroupLabel, normalizeClassName(className)),
+		...props
+	});
+});
+const MenuRadioItemGroup = forwardRef(function MenuRadioItemGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Menu.RadioItemGroup, {
+		ref,
+		"data-slot": "menu-radio-item-group",
+		className: clsx(Menu_module_default.radioItemGroup, normalizeClassName(className)),
+		...props
+	});
+});
+const MenuRadioItem = forwardRef(function MenuRadioItem({ className, indicator = "start", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Menu.RadioItem, {
+		ref,
+		"data-slot": "menu-radio-item",
+		"data-indicator-position": indicator,
+		className: clsx(Menu_module_default.radioItem, normalizeClassName(className)),
+		...props
+	});
+});
+const MenuCheckboxItem = forwardRef(function MenuCheckboxItem({ className, indicator = "start", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Menu.CheckboxItem, {
+		ref,
+		"data-slot": "menu-checkbox-item",
+		"data-indicator-position": indicator,
+		className: clsx(Menu_module_default.checkboxItem, normalizeClassName(className)),
+		...props
+	});
+});
+const MenuItemIndicator = forwardRef(function MenuItemIndicator({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Menu.ItemIndicator, {
+		ref,
+		"data-slot": "menu-item-indicator",
+		className: clsx(Menu_module_default.itemIndicator, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, { className: Menu_module_default.itemIndicatorIcon })
+	});
+});
+const MenuItemText = forwardRef(function MenuItemText({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Menu.ItemText, {
+		ref,
+		"data-slot": "menu-item-text",
+		className: clsx(Menu_module_default.itemText, normalizeClassName(className)),
+		...props
+	});
+});
+function MenuItemTextContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "menu-item-text-content",
+		className: clsx(Menu_module_default.itemTextContent, className),
+		...props
+	});
+}
+function MenuItemTextIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "menu-item-text-icon",
+		className: clsx(Menu_module_default.itemTextIcon, className),
+		...props
+	});
+}
+function MenuItemTextLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "menu-item-text-label",
+		className: clsx(Menu_module_default.itemTextLabel, className),
+		...props
+	});
+}
+function MenuItemShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "menu-item-shortcut",
+		className: clsx(Menu_module_default.itemShortcut, className),
+		...props
+	});
+}
+const Menu$1 = Object.assign(MenuRoot, {
+	Root: MenuRoot,
+	RootProvider: MenuRootProvider,
+	Trigger: MenuTrigger,
+	TriggerIcon: MenuTriggerIcon,
+	Indicator: MenuIndicator,
+	ContextTrigger: MenuContextTrigger,
+	Positioner: MenuPositioner,
+	Content: MenuContent,
+	Arrow: MenuArrow,
+	ArrowTip: MenuArrowTip,
+	Item: MenuItem,
+	TriggerItem: MenuTriggerItem,
+	TriggerItemIcon: MenuTriggerItemIcon,
+	Separator: MenuSeparator,
+	ItemGroup: MenuItemGroup,
+	ItemGroupLabel: MenuItemGroupLabel,
+	RadioItemGroup: MenuRadioItemGroup,
+	RadioItem: MenuRadioItem,
+	CheckboxItem: MenuCheckboxItem,
+	ItemIndicator: MenuItemIndicator,
+	ItemText: MenuItemText,
+	ItemTextContent: MenuItemTextContent,
+	ItemTextIcon: MenuItemTextIcon,
+	ItemTextLabel: MenuItemTextLabel,
+	ItemShortcut: MenuItemShortcut
+});
+//#endregion
+export { Menu$1 as Menu };

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

@@ -0,0 +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"
+};
+//#endregion
+export { Menu_module_default as default };

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

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

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

@@ -0,0 +1,104 @@
+@layer ui.components {
+  .FVeLgG_control {
+    width: fit-content;
+    min-width: 0;
+    max-width: 100%;
+    display: inline-grid;
+    position: relative;
+  }
+
+  .FVeLgG_root {
+    box-sizing: border-box;
+    width: var(--select-width, 14rem);
+    max-width: var(--select-max-width, 100%);
+    min-width: 0;
+    height: var(--select-control-height, var(--size-lg));
+    border: var(--select-border-width, var(--border-width-sm)) solid
+      var(--select-border-color, var(--color-border));
+    border-radius: var(--select-radius, var(--radius-md));
+    appearance: none;
+    background-color: var(--select-bg, var(--color-background));
+    color: var(--select-color, var(--color-foreground));
+    font: inherit;
+    outline: var(--select-focus-ring-width, var(--border-width-sm)) solid transparent;
+    outline-offset: calc(var(--select-focus-ring-width, var(--border-width-sm)) * -1);
+    cursor: pointer;
+    transition: background-color var(--select-transition, var(--transition-default)),
+      border-color var(--select-transition, var(--transition-default)),
+      outline-color var(--select-transition, var(--transition-default)),
+      opacity var(--select-transition, var(--transition-default));
+    margin: 0;
+    padding-inline-start: var(--select-trigger-padding-x-start, var(--spacing-3));
+    padding-inline-end: calc(var(--select-action-offset-right, var(--spacing-1)) +
+        var(--select-action-size, var(--spacing-6)) +
+        var(--select-trigger-padding-x-start, var(--spacing-3)));
+
+    &:focus-visible {
+      border-color: var(--select-focus-ring-color, var(--color-ring));
+      outline-color: var(--select-focus-ring-color, var(--color-ring));
+    }
+
+    &:is([data-invalid], [aria-invalid="true"]) {
+      border-color: var(--select-invalid-color, var(--color-destructive));
+      outline-color: var(--select-invalid-color, var(--color-destructive));
+    }
+
+    &:is([data-disabled], :disabled) {
+      pointer-events: none;
+      opacity: var(--select-disabled-opacity, var(--opacity-disabled));
+    }
+
+    &:is([multiple], [size]:not([size="1"])) {
+      height: auto;
+      padding-block: var(--spacing-2);
+      padding-inline: var(--select-trigger-padding-x-start, var(--spacing-3));
+      appearance: auto;
+    }
+
+    &:not(:disabled, [data-disabled]) {
+      @media (hover: hover) {
+        &:hover {
+          background-color: var(--select-bg-hover, var(--color-accent));
+        }
+      }
+    }
+
+    @media (forced-colors: active) {
+      appearance: auto;
+      padding-inline-end: var(--select-trigger-padding-x-start, var(--spacing-3));
+    }
+  }
+
+  .FVeLgG_indicator {
+    top: 50%;
+    width: var(--select-action-size, var(--spacing-6));
+    height: var(--select-action-size, var(--spacing-6));
+    color: var(--select-icon-color, var(--color-muted-foreground));
+    pointer-events: none;
+    justify-content: center;
+    align-items: center;
+    line-height: 0;
+    display: inline-flex;
+    position: absolute;
+    inset-inline-end: var(--select-action-offset-right, var(--spacing-1));
+    transform: translateY(-50%);
+
+    & > svg {
+      width: var(--select-icon-size, var(--spacing-4));
+      height: var(--select-icon-size, var(--spacing-4));
+      display: block;
+    }
+
+    @media (forced-colors: active) {
+      display: none;
+    }
+  }
+
+  .FVeLgG_root:is([data-disabled], :disabled) + .FVeLgG_indicator {
+    opacity: var(--select-disabled-opacity, var(--opacity-disabled));
+  }
+
+  .FVeLgG_root:is([multiple], [size]:not([size="1"])) + .FVeLgG_indicator {
+    display: none;
+  }
+}

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

@@ -0,0 +1,8 @@
+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>>;
+};
+//#endregion
+export { NativeSelect };

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

@@ -0,0 +1,32 @@
+import { ChevronDownIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.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 { Field } from "@ark-ui/react/field";
+//#region src/components/native-select/NativeSelect.tsx
+const NativeSelectRoot = forwardRef(function NativeSelectRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-scope": "native-select",
+		"data-part": "control",
+		"data-slot": "native-select-control",
+		className: NativeSelect_module_default.control,
+		children: [/* @__PURE__ */ jsx(Field.Select, {
+			...props,
+			ref,
+			"data-slot": "native-select-root",
+			className: clsx(NativeSelect_module_default.root, normalizeClassName(className))
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-scope": "native-select",
+			"data-part": "indicator",
+			"data-slot": "native-select-indicator",
+			className: NativeSelect_module_default.indicator,
+			children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+		})]
+	});
+});
+const NativeSelect = Object.assign(NativeSelectRoot, { Root: NativeSelectRoot });
+//#endregion
+export { NativeSelect };

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

@@ -0,0 +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"
+};
+//#endregion
+export { NativeSelect_module_default as default };

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

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

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

@@ -0,0 +1,162 @@
+@layer ui.components {
+  ._99y8lW_root {
+    align-items: flex-start;
+    gap: var(--number-input-gap, var(--spacing-1));
+    width: var(--number-input-width, auto);
+    max-width: var(--number-input-max-width, none);
+    flex-direction: column;
+    display: flex;
+
+    &[data-disabled] {
+      opacity: var(--number-input-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  ._99y8lW_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 {
+    align-items: center;
+    gap: var(--number-input-scrubber-gap, var(--spacing-2));
+    color: var(--number-input-scrubber-color, var(--color-foreground));
+    user-select: none;
+    cursor: ew-resize;
+    display: inline-flex;
+
+    &[data-disabled] {
+      cursor: default;
+      opacity: var(--number-input-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  ._99y8lW_control {
+    align-items: stretch;
+    display: inline-flex;
+  }
+
+  ._99y8lW_decrementTrigger, ._99y8lW_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));
+    min-width: var(--number-input-control-height, var(--size-lg));
+    height: var(--number-input-control-height, var(--size-lg));
+    border: var(--number-input-border-width, var(--border-width-sm))
+      var(--number-input-border-style, solid) var(--number-input-border-color, var(--color-border));
+    background-color: var(--number-input-button-bg, var(--color-background));
+    color: var(--number-input-button-color, var(--color-foreground));
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--transition-default),
+      border-color var(--transition-default),
+      color var(--transition-default),
+      opacity var(--transition-default);
+    outline: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--number-input-button-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:active {
+      background-color: var(--number-input-button-bg-active, var(--number-input-button-bg-hover, var(--color-accent)));
+    }
+
+    &:focus-visible, &[data-focus] {
+      outline: var(--_number-input-focus-ring-width) solid
+        var(--number-input-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--_number-input-focus-ring-width) * -1);
+      z-index: 1;
+    }
+
+    &:is([data-disabled], :disabled) {
+      opacity: var(--number-input-disabled-opacity, var(--opacity-disabled));
+      pointer-events: none;
+    }
+
+    &[data-invalid], ._99y8lW_root[data-invalid] & {
+      border-color: var(--number-input-border-color-invalid, var(--color-destructive));
+    }
+
+    & > svg {
+      width: var(--number-input-icon-size, .875rem);
+      height: var(--number-input-icon-size, .875rem);
+      flex-shrink: 0;
+    }
+  }
+
+  ._99y8lW_decrementTrigger {
+    border-radius: var(--number-input-radius, var(--radius-md)) 0 0
+      var(--number-input-radius, var(--radius-md));
+    border-right: 0;
+  }
+
+  ._99y8lW_incrementTrigger {
+    border-radius: 0 var(--number-input-radius, var(--radius-md))
+      var(--number-input-radius, var(--radius-md)) 0;
+    border-left: 0;
+  }
+
+  ._99y8lW_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);
+    height: var(--number-input-control-height, var(--size-lg));
+    border-top: var(--number-input-border-width, var(--border-width-sm))
+      var(--number-input-border-style, solid) var(--number-input-border-color, var(--color-border));
+    border-bottom: var(--number-input-border-width, var(--border-width-sm))
+      var(--number-input-border-style, solid) var(--number-input-border-color, var(--color-border));
+    padding: var(--number-input-input-padding-y, .5rem)
+      var(--number-input-input-padding-x, .75rem);
+    background-color: var(--number-input-input-bg, var(--color-background));
+    color: var(--number-input-input-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--number-input-input-font-size, var(--text-md));
+    line-height: var(--number-input-input-line-height, var(--line-height-text-md));
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    outline: var(--_number-input-focus-ring-width) solid transparent;
+    outline-offset: calc(var(--_number-input-focus-ring-width) * -1);
+    transition: border-color var(--transition-default),
+      outline-color var(--transition-default),
+      opacity var(--transition-default);
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+    margin: 0;
+
+    &:focus-visible, &[data-focus] {
+      outline-color: var(--number-input-focus-ring-color, var(--color-ring));
+      z-index: 1;
+    }
+
+    &[data-invalid], ._99y8lW_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));
+
+      &:focus-visible, &[data-focus] {
+        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 {
+    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));
+    font-variant-numeric: tabular-nums;
+  }
+}

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

@@ -0,0 +1,16 @@
+import { NumberInput } from "@ark-ui/react/number-input";
+
+//#region src/components/number-input/NumberInput.d.ts
+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>>;
+  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>>;
+  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 };