iryx-ui 0.3.0 → 0.4.0

package/README.md

@@ -262,8 +262,9 @@ app.use(createIryxUi({ unstyled: true }))
 | `IForm` | Validating form wrapper — any Standard Schema validator, or your own function |
 | `IFormField` | Label, description, hint, help and error text around a control |
 | `IInput` | Text field with `sm`/`md`/`lg` sizes, `invalid` state, `v-model` |
+| `INumberInput` | Decimal-safe numeric field — the model is a **string**, with `min`/`max`/`step`, `precision` and locale-aware display |
 | `ITextarea` | Multi-line field with matching sizes and `invalid` state |
-| `ILabel` | Field label with optional `required` asterisk, indented to line up with the control's text |
+| `ILabel` | Field label with optional `required` asterisk |
 | `ICheckbox` | Tri-state checkbox (`true` / `false` / `'indeterminate'`), optional `label` + `description` |
 | `ISelect` | Listbox with keyboard nav and typeahead, driven by an `items` array |
 | `IRadioGroup` | Radio list with labels wired up automatically; items take a `description` |
@@ -405,6 +406,45 @@ const framework = ref('vue')
 
 `ISelect` and `IRadioGroup` accept plain strings or `{ label, value, disabled }` objects. Both also take a default slot if you'd rather compose the Reka primitives yourself.
 
+### Numbers and money
+
+`INumberInput` never turns your value into a `number`. The model is a decimal
+**string**, because binary floating point cannot represent decimal money —
+`0.1 + 0.2` is `0.30000000000000004`, and `10.00` becomes `10`. Values are
+added, compared and rounded with `BigInt` internally, so precision survives
+regardless of magnitude.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// A string, and it stays one.
+const amount = ref('1234.56')
+</script>
+
+<template>
+  <INumberInput v-model="amount" locale="sl" :precision="2" step="0.01" min="0" />
+</template>
+```
+
+`locale` affects the **display only** — `sl` shows `1.234,56` while the model
+stays `"1234.56"`. Typing in the locale's own format works too. While the field
+is focused it shows the canonical value so separators can't fight your typing.
+
+`precision` fixes the number of decimal places, rounding half-up, and preserves
+trailing zeros (`"10.00"` stays `"10.00"`). `min`, `max` and `step` are decimal
+strings as well, and stepping is exact: `0.1 + 0.2` gives `"0.3"`.
+
+The underlying helpers are exported if you need them elsewhere:
+
+```ts
+import { addDecimals, compareDecimals, roundDecimal } from 'iryx-ui'
+
+addDecimals('0.1', '0.2') // '0.3'
+roundDecimal('1.005', 2) // '1.01'
+compareDecimals('1.10', '1.1') // 0
+```
+
 ### Validated forms
 
 `IForm` handles client-side validation. It accepts any [Standard Schema](https://standardschema.dev) validator — Zod 3.24+, Valibot, ArkType — so Iryx doesn't depend on a validation library. Wrap each control in an `IFormField` with a `name` matching the schema path and errors wire themselves up.
@@ -456,25 +496,6 @@ The control inside a field automatically inherits its `id`, invalid styling and
 
 **Server errors and manual control** — grab a template ref to the form and call `validate()`, `clear(name?)` or `setErrors()`. `IFormField` also takes a plain `error` prop that bypasses validation entirely.
 
-### Label alignment
-
-`ILabel` and `IFormField` indent their text so it lines up with the control's
-text rather than its outer edge, putting the label directly above the
-placeholder. The offset matches the input's horizontal padding — `sm` 10px,
-`md` 12px, `lg` 16px — so pass the same size you gave the control:
-
-```vue
-<template>
-  <ILabel for="amount" indent="lg">
-    Amount
-  </ILabel>
-  <IInput id="amount" size="lg" />
-</template>
-```
-
-Use `indent="none"` when the label wraps its control, as with a checkbox, since
-there is no text to line up with.
-
 ### Labels and descriptions
 
 `ICheckbox` and `ISwitch` render bare by default. Give them a `label` and/or `description` and they render a wired-up layout instead — the text is clickable, and the description is linked with `aria-describedby`. `IRadioGroup` items take a `description` too.

package/dist/component-names.d.ts

@@ -3,5 +3,5 @@
  * Consumed by the Vue plugin (global registration) and the Nuxt module
  * (auto-imports). Keep in sync with `src/components/index.ts`.
  */
-export declare const componentNames: readonly ["Alert", "App", "Badge", "Breadcrumb", "Button", "ButtonGroup", "Card", "Checkbox", "ConfirmDialog", "Dialog", "DropdownMenu", "EmptyState", "Form", "FormField", "Input", "Label", "Pagination", "Progress", "RadioGroup", "Select", "Separator", "Skeleton", "Stat", "Stepper", "Switch", "Tabs", "Textarea", "Toaster", "Tooltip"];
+export declare const componentNames: readonly ["Alert", "App", "Badge", "Breadcrumb", "Button", "ButtonGroup", "Card", "Checkbox", "ConfirmDialog", "Dialog", "DropdownMenu", "EmptyState", "Form", "FormField", "Input", "Label", "NumberInput", "Pagination", "Progress", "RadioGroup", "Select", "Separator", "Skeleton", "Stat", "Stepper", "Switch", "Tabs", "Textarea", "Toaster", "Tooltip"];
 export type ComponentName = (typeof componentNames)[number];

package/dist/components/FormField.vue.d.ts

@@ -11,15 +11,6 @@ export interface FormFieldProps {
     required?: boolean;
     /** Force an error message, bypassing the form's validation. */
     error?: string;
-    /**
-     * Indent the label, description, error and help text so they line up with
-     * the control's own text rather than its outer edge.
-     *
-     * The values match the input's horizontal padding, so pass the same size you
-     * gave the control. Use `none` for controls that draw their own label, like
-     * a checkbox or switch.
-     */
-    indent?: 'none' | 'sm' | 'md' | 'lg';
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     class?: string;

package/dist/components/Label.vue.d.ts

@@ -2,12 +2,6 @@ import type { LabelProps as RekaLabelProps } from 'reka-ui';
 export interface LabelProps extends RekaLabelProps {
     /** Append a red asterisk to mark the associated field as required. */
     required?: boolean;
-    /**
-     * Indent the label to line up with the control's text rather than its outer
-     * edge. Match it to the control's size; use `none` when the label wraps its
-     * control, as with a checkbox.
-     */
-    indent?: 'none' | 'sm' | 'md' | 'lg';
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     class?: string;

package/dist/components/NumberInput.vue.d.ts

@@ -0,0 +1,63 @@
+export interface NumberInputProps {
+    /** Smallest allowed value, as a decimal string. */
+    min?: string;
+    /** Largest allowed value, as a decimal string. */
+    max?: string;
+    /** Amount the stepper adds or subtracts, as a decimal string. */
+    step?: string;
+    /** Fixed decimal places. Values are rounded half-up to this scale. */
+    precision?: number;
+    /**
+     * Locale used for the *display* only — `sl` shows `1.234,56`. The model
+     * stays canonical (`"1234.56"`) whatever the locale.
+     */
+    locale?: string;
+    /** Show the stacked increment/decrement controls. */
+    stepper?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    /** Mark the field as invalid — styles the border and ring red. */
+    invalid?: boolean;
+    id?: string;
+    /** Accessible names for the stepper controls — override for non-English apps. */
+    incrementLabel?: string;
+    decrementLabel?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ step: 'px-2' }`. */
+    ui?: {
+        root?: string;
+        input?: string;
+        stepper?: string;
+        step?: string;
+    };
+}
+type __VLS_Props = NumberInputProps;
+type __VLS_ModelProps = {
+    /**
+     * The model is a decimal **string**, never a number.
+     *
+     * Money in a finance app is computed with decimal arithmetic; coercing to a
+     * float here would silently lose precision before the value ever reached the
+     * caller. An empty string means "no value".
+     */
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    step: string;
+    invalid: boolean;
+    stepper: boolean;
+    incrementLabel: string;
+    decrementLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/index.d.ts

@@ -14,6 +14,7 @@ export { default as Form } from './Form.vue';
 export { default as FormField } from './FormField.vue';
 export { default as Input } from './Input.vue';
 export { default as Label } from './Label.vue';
+export { default as NumberInput } from './NumberInput.vue';
 export { default as Pagination } from './Pagination.vue';
 export { default as Progress } from './Progress.vue';
 export { default as RadioGroup } from './RadioGroup.vue';

package/dist/composables/decimal.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Decimal-string arithmetic, exact by construction.
+ *
+ * Money is stored and computed as decimal strings — `0.1 + 0.2` in binary
+ * floating point is `0.30000000000000004`, which silently corrupts a total.
+ * Everything here scales to integers and uses `BigInt`, so a value only ever
+ * round-trips through `Number` if the caller asks for it.
+ */
+interface Decimal {
+    /** Unscaled value: `1234.56` at scale 2 is `123456n`. */
+    units: bigint;
+    /** Number of decimal places. */
+    scale: number;
+}
+/** Parse a canonical decimal string (`-1234.56`). Returns undefined if invalid. */
+export declare function parseDecimal(value: string): Decimal | undefined;
+/** Render a Decimal back to a canonical string. */
+export declare function formatDecimal({ units, scale }: Decimal): string;
+/** `-1` if a < b, `0` if equal, `1` if a > b. */
+export declare function compareDecimals(a: string, b: string): number;
+/** Exact addition. `addDecimals('0.1', '0.2')` is `'0.3'`, not `'0.30000000000000004'`. */
+export declare function addDecimals(a: string, b: string): string | undefined;
+/** Round half-up to a fixed number of decimal places. */
+export declare function roundDecimal(value: string, precision: number): string | undefined;
+/** Constrain a value to a range, comparing exactly. */
+export declare function clampDecimal(value: string, min?: string, max?: string): string;
+/** Whether a string is a well-formed decimal. */
+export declare function isDecimal(value: string): boolean;
+/** The separators a locale uses, e.g. `.`/`,` for `en`, `,`/`.` for `sl`. */
+export declare function localeSeparators(locale: string): {
+    decimal: string;
+    group: string;
+};
+/**
+ * Render a canonical decimal for display, e.g. `"1234.56"` as `1.234,56` in
+ * `sl`. Formatting goes through the digits, never `Number`, so a value too
+ * large for a float still displays exactly.
+ */
+export declare function formatForLocale(value: string, locale: string, precision?: number): string;
+/**
+ * Render a canonical decimal for *editing*: the locale's decimal separator,
+ * but no grouping.
+ *
+ * Editing must not show the canonical `1234.56` in a locale where `.` groups
+ * digits — parsing that back would read it as `123456`.
+ */
+export declare function toEditable(value: string, locale?: string): string;
+/**
+ * Turn typed input into a canonical decimal, accepting the locale's
+ * separators. `1.234,56` in `sl` becomes `1234.56`.
+ */
+export declare function parseFromLocale(input: string, locale: string): string | undefined;
+export {};

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export type { FormProps } from './components/Form.vue';
 export type { FormFieldProps } from './components/FormField.vue';
 export type { InputProps } from './components/Input.vue';
 export type { LabelProps } from './components/Label.vue';
+export type { NumberInputProps } from './components/NumberInput.vue';
 export type { PaginationProps } from './components/Pagination.vue';
 export type { ProgressProps } from './components/Progress.vue';
 export type { RadioGroupItemOption, RadioGroupProps } from './components/RadioGroup.vue';
@@ -33,6 +34,7 @@ export type { TooltipProps } from './components/Tooltip.vue';
 export * from './composables/appearance';
 export * from './composables/button-group';
 export * from './composables/confirm';
+export * from './composables/decimal';
 export * from './composables/dropdown-menu';
 export * from './composables/form';
 export * from './composables/toast';

package/dist/index.js

@@ -34,31 +34,34 @@ import q from "./packages/iryx-ui/src/components/Label.js";
 import J from "./packages/iryx-ui/src/components/FormField.js";
 import { fieldBase as Y, inputTheme as X, textareaTheme as Z } from "./packages/iryx-ui/src/theme/input.js";
 import Q from "./packages/iryx-ui/src/components/Input.js";
-import { paginationTheme as $ } from "./packages/iryx-ui/src/theme/pagination.js";
-import ee from "./packages/iryx-ui/src/components/Pagination.js";
-import { progressTheme as te } from "./packages/iryx-ui/src/theme/progress.js";
-import ne from "./packages/iryx-ui/src/components/Progress.js";
-import { radioGroupTheme as re } from "./packages/iryx-ui/src/theme/radio-group.js";
-import ie from "./packages/iryx-ui/src/components/RadioGroup.js";
-import { selectTheme as ae } from "./packages/iryx-ui/src/theme/select.js";
-import oe from "./packages/iryx-ui/src/components/Select.js";
-import { separatorTheme as se } from "./packages/iryx-ui/src/theme/separator.js";
-import ce from "./packages/iryx-ui/src/components/Separator.js";
-import { skeletonTheme as le } from "./packages/iryx-ui/src/theme/skeleton.js";
-import ue from "./packages/iryx-ui/src/components/Skeleton.js";
-import { statTheme as de } from "./packages/iryx-ui/src/theme/stat.js";
-import fe from "./packages/iryx-ui/src/components/Stat.js";
-import { stepperTheme as pe } from "./packages/iryx-ui/src/theme/stepper.js";
-import me from "./packages/iryx-ui/src/components/Stepper.js";
-import { switchTheme as he } from "./packages/iryx-ui/src/theme/switch.js";
-import ge from "./packages/iryx-ui/src/components/Switch.js";
-import { tabsTheme as _e } from "./packages/iryx-ui/src/theme/tabs.js";
-import ve from "./packages/iryx-ui/src/components/Tabs.js";
-import ye from "./packages/iryx-ui/src/components/Textarea.js";
-import { useToast as be, useToastState as xe } from "./packages/iryx-ui/src/composables/toast.js";
-import { toastTheme as Se } from "./packages/iryx-ui/src/theme/toast.js";
-import Ce from "./packages/iryx-ui/src/components/Toaster.js";
-import { tooltipTheme as we } from "./packages/iryx-ui/src/theme/tooltip.js";
-import Te from "./packages/iryx-ui/src/components/Tooltip.js";
-import { IryxUi as Ee, createIryxUi as De } from "./packages/iryx-ui/src/plugin.js";
-export { a as Alert, d as App, p as Badge, h as Breadcrumb, y as Button, x as ButtonGroup, C as Card, T as Checkbox, j as ConfirmDialog, A as Dialog, F as DropdownMenu, L as EmptyState, G as Form, J as FormField, Q as Input, Ee as IryxUi, q as Label, ee as Pagination, ne as Progress, ie as RadioGroup, oe as Select, ce as Separator, ue as Skeleton, fe as Stat, me as Stepper, ge as Switch, ve as Tabs, ye as Textarea, Ce as Toaster, Te as Tooltip, i as alertTheme, c as applyTheme, f as badgeTheme, m as breadcrumbTheme, g as buttonGroupContextKey, b as buttonGroupTheme, v as buttonTheme, S as cardTheme, w as checkboxTheme, l as clearTheme, e as componentNames, De as createIryxUi, t as defaultConfig, k as dialogTheme, M as dropdownMenuTheme, I as emptyStateTheme, Y as fieldBase, R as formContextKey, z as formFieldContextKey, B as getByPath, o as initAppearance, X as inputTheme, n as iryxUiConfigKey, N as isSeparator, V as isStandardSchema, P as isSubmenu, H as issuePath, K as labelTheme, $ as paginationTheme, te as progressTheme, re as radioGroupTheme, E as resolveConfirm, ae as selectTheme, se as separatorTheme, le as skeletonTheme, de as statTheme, pe as stepperTheme, he as switchTheme, _e as tabsTheme, Z as textareaTheme, u as themes, Se as toastTheme, we as tooltipTheme, s as useAppearance, _ as useButtonGroup, D as useConfirm, O as useConfirmState, U as useForm, W as useFormField, r as useIryxUiConfig, be as useToast, xe as useToastState };
+import { addDecimals as $, clampDecimal as ee, compareDecimals as te, formatDecimal as ne, formatForLocale as re, isDecimal as ie, localeSeparators as ae, parseDecimal as oe, parseFromLocale as se, roundDecimal as ce, toEditable as le } from "./packages/iryx-ui/src/composables/decimal.js";
+import { numberInputTheme as ue } from "./packages/iryx-ui/src/theme/number-input.js";
+import de from "./packages/iryx-ui/src/components/NumberInput.js";
+import { paginationTheme as fe } from "./packages/iryx-ui/src/theme/pagination.js";
+import pe from "./packages/iryx-ui/src/components/Pagination.js";
+import { progressTheme as me } from "./packages/iryx-ui/src/theme/progress.js";
+import he from "./packages/iryx-ui/src/components/Progress.js";
+import { radioGroupTheme as ge } from "./packages/iryx-ui/src/theme/radio-group.js";
+import _e from "./packages/iryx-ui/src/components/RadioGroup.js";
+import { selectTheme as ve } from "./packages/iryx-ui/src/theme/select.js";
+import ye from "./packages/iryx-ui/src/components/Select.js";
+import { separatorTheme as be } from "./packages/iryx-ui/src/theme/separator.js";
+import xe from "./packages/iryx-ui/src/components/Separator.js";
+import { skeletonTheme as Se } from "./packages/iryx-ui/src/theme/skeleton.js";
+import Ce from "./packages/iryx-ui/src/components/Skeleton.js";
+import { statTheme as we } from "./packages/iryx-ui/src/theme/stat.js";
+import Te from "./packages/iryx-ui/src/components/Stat.js";
+import { stepperTheme as Ee } from "./packages/iryx-ui/src/theme/stepper.js";
+import De from "./packages/iryx-ui/src/components/Stepper.js";
+import { switchTheme as Oe } from "./packages/iryx-ui/src/theme/switch.js";
+import ke from "./packages/iryx-ui/src/components/Switch.js";
+import { tabsTheme as Ae } from "./packages/iryx-ui/src/theme/tabs.js";
+import je from "./packages/iryx-ui/src/components/Tabs.js";
+import Me from "./packages/iryx-ui/src/components/Textarea.js";
+import { useToast as Ne, useToastState as Pe } from "./packages/iryx-ui/src/composables/toast.js";
+import { toastTheme as Fe } from "./packages/iryx-ui/src/theme/toast.js";
+import Ie from "./packages/iryx-ui/src/components/Toaster.js";
+import { tooltipTheme as Le } from "./packages/iryx-ui/src/theme/tooltip.js";
+import Re from "./packages/iryx-ui/src/components/Tooltip.js";
+import { IryxUi as ze, createIryxUi as Be } from "./packages/iryx-ui/src/plugin.js";
+export { a as Alert, d as App, p as Badge, h as Breadcrumb, y as Button, x as ButtonGroup, C as Card, T as Checkbox, j as ConfirmDialog, A as Dialog, F as DropdownMenu, L as EmptyState, G as Form, J as FormField, Q as Input, ze as IryxUi, q as Label, de as NumberInput, pe as Pagination, he as Progress, _e as RadioGroup, ye as Select, xe as Separator, Ce as Skeleton, Te as Stat, De as Stepper, ke as Switch, je as Tabs, Me as Textarea, Ie as Toaster, Re as Tooltip, $ as addDecimals, i as alertTheme, c as applyTheme, f as badgeTheme, m as breadcrumbTheme, g as buttonGroupContextKey, b as buttonGroupTheme, v as buttonTheme, S as cardTheme, w as checkboxTheme, ee as clampDecimal, l as clearTheme, te as compareDecimals, e as componentNames, Be as createIryxUi, t as defaultConfig, k as dialogTheme, M as dropdownMenuTheme, I as emptyStateTheme, Y as fieldBase, R as formContextKey, z as formFieldContextKey, ne as formatDecimal, re as formatForLocale, B as getByPath, o as initAppearance, X as inputTheme, n as iryxUiConfigKey, ie as isDecimal, N as isSeparator, V as isStandardSchema, P as isSubmenu, H as issuePath, K as labelTheme, ae as localeSeparators, ue as numberInputTheme, fe as paginationTheme, oe as parseDecimal, se as parseFromLocale, me as progressTheme, ge as radioGroupTheme, E as resolveConfirm, ce as roundDecimal, ve as selectTheme, be as separatorTheme, Se as skeletonTheme, we as statTheme, Ee as stepperTheme, Oe as switchTheme, Ae as tabsTheme, Z as textareaTheme, u as themes, le as toEditable, Fe as toastTheme, Le as tooltipTheme, s as useAppearance, _ as useButtonGroup, D as useConfirm, O as useConfirmState, U as useForm, W as useFormField, r as useIryxUiConfig, Ne as useToast, Pe as useToastState };

package/dist/packages/iryx-ui/src/component-names.js

@@ -1,4 +1,4 @@
 //#region src/component-names.ts
-var e = /* @__PURE__ */ "Alert.App.Badge.Breadcrumb.Button.ButtonGroup.Card.Checkbox.ConfirmDialog.Dialog.DropdownMenu.EmptyState.Form.FormField.Input.Label.Pagination.Progress.RadioGroup.Select.Separator.Skeleton.Stat.Stepper.Switch.Tabs.Textarea.Toaster.Tooltip".split(".");
+var e = /* @__PURE__ */ "Alert.App.Badge.Breadcrumb.Button.ButtonGroup.Card.Checkbox.ConfirmDialog.Dialog.DropdownMenu.EmptyState.Form.FormField.Input.Label.NumberInput.Pagination.Progress.RadioGroup.Select.Separator.Skeleton.Stat.Stepper.Switch.Tabs.Textarea.Toaster.Tooltip".split(".");
 //#endregion
 export { e as componentNames };

package/dist/packages/iryx-ui/src/components/FormField.vue_vue_type_script_setup_true_lang.js

@@ -15,7 +15,6 @@ var x = ["data-iryx-field"], S = ["id"], C = ["id"], w = ["id"], T = /*@__PURE__
 		help: {},
 		required: { type: Boolean },
 		error: {},
-		indent: {},
 		unstyled: {
 			type: Boolean,
 			default: void 0
@@ -36,9 +35,9 @@ var x = ["data-iryx-field"], S = ["id"], C = ["id"], w = ["id"], T = /*@__PURE__
 		function A() {
 			!T.name || !E || E.validateOn.value.includes("blur") && E.validateField(T.name);
 		}
-		let j = e(), M = o(() => T.unstyled ?? j.unstyled), N = o(() => i({ indent: T.indent }));
+		let j = e(), M = o(() => T.unstyled ?? j.unstyled), N = i();
 		function P(e, t) {
-			return M.value ? t : N.value[e]({ class: t });
+			return M.value ? t : N[e]({ class: t });
 		}
 		return m(t, {
 			id: o(() => D),
@@ -47,7 +46,7 @@ var x = ["data-iryx-field"], S = ["id"], C = ["id"], w = ["id"], T = /*@__PURE__
 			describedBy: k
 		}), (e, t) => (p(), l("div", {
 			"data-iryx-field": T.name,
-			class: f(M.value ? T.class : N.value.root({ class: [T.ui?.root, T.class] })),
+			class: f(M.value ? T.class : _(N).root({ class: [T.ui?.root, T.class] })),
 			onFocusout: A
 		}, [
 			T.label || T.hint || e.$slots.hint ? (p(), l("div", {
@@ -57,7 +56,6 @@ var x = ["data-iryx-field"], S = ["id"], C = ["id"], w = ["id"], T = /*@__PURE__
 				key: 0,
 				for: _(D),
 				required: T.required,
-				indent: "none",
 				class: f(T.ui?.label)
 			}, {
 				default: y(() => [u(g(T.label), 1)]),

package/dist/packages/iryx-ui/src/components/Label.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,6 @@ var d = /*@__PURE__*/ i({
 	__name: "Label",
 	props: {
 		required: { type: Boolean },
-		indent: {},
 		unstyled: {
 			type: Boolean,
 			default: void 0
@@ -20,7 +19,6 @@ var d = /*@__PURE__*/ i({
 	setup(i) {
 		let d = i, f = e(), p = n(() => d.unstyled ?? f.unstyled), m = n(() => p.value ? d.class : t({
 			required: d.required,
-			indent: d.indent,
 			class: d.class
 		}));
 		return (e, t) => (o(), r(c(u), {

package/dist/packages/iryx-ui/src/components/NumberInput.js

@@ -0,0 +1,5 @@
+import e from "./NumberInput.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/NumberInput.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/packages/iryx-ui/src/components/NumberInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,136 @@
+import { ArrowDown01Icon as e, ArrowUp01Icon as t } from "../../../../node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js";
+import { useIryxUiConfig as n } from "../config.js";
+import r from "./Icon.js";
+import { useFormField as i } from "../composables/form.js";
+import { addDecimals as a, clampDecimal as o, compareDecimals as s, formatForLocale as c, isDecimal as l, parseFromLocale as u, roundDecimal as d, toEditable as f } from "../composables/decimal.js";
+import { numberInputTheme as p } from "../theme/number-input.js";
+import { computed as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createVNode as v, defineComponent as y, mergeModels as b, normalizeClass as x, openBlock as S, ref as C, unref as w, useModel as T, vModelText as E, watch as D, withDirectives as O, withKeys as k, withModifiers as A } from "vue";
+//#region src/components/NumberInput.vue?vue&type=script&setup=true&lang.ts
+var j = [
+	"id",
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"placeholder",
+	"disabled",
+	"required",
+	"aria-invalid",
+	"aria-describedby"
+], M = ["aria-label", "disabled"], N = ["aria-label", "disabled"], P = /*@__PURE__*/ y({
+	__name: "NumberInput",
+	props: /*@__PURE__*/ b({
+		min: {},
+		max: {},
+		step: { default: "1" },
+		precision: {},
+		locale: {},
+		stepper: {
+			type: Boolean,
+			default: !0
+		},
+		size: {},
+		placeholder: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		id: {},
+		incrementLabel: { default: "Increment" },
+		decrementLabel: { default: "Decrement" },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(y) {
+		let b = y, P = T(y, "modelValue"), F = i(), I = m(() => b.id ?? F?.id.value), L = m(() => b.invalid ?? F?.invalid.value ?? !1), R = n(), z = m(() => b.unstyled ?? R.unstyled), B = C(""), V = C(!1);
+		function H(e) {
+			return e ? b.locale ? c(e, b.locale, b.precision) : b.precision == null ? e : d(e, b.precision) ?? e : "";
+		}
+		D(() => P.value, (e) => {
+			V.value || (B.value = H(e));
+		}, { immediate: !0 });
+		function U(e) {
+			let t = e.trim();
+			if (!t) {
+				P.value = "", B.value = "";
+				return;
+			}
+			let n = b.locale ? u(t, b.locale) : l(t) ? t : void 0;
+			if (n == null) {
+				B.value = H(P.value);
+				return;
+			}
+			let r = o(n, b.min, b.max), i = b.precision == null ? r : d(r, b.precision) ?? r;
+			P.value = i, B.value = H(i);
+		}
+		function W() {
+			V.value = !0, B.value = f(P.value, b.locale);
+		}
+		function G() {
+			V.value = !1, U(B.value);
+		}
+		function K(e) {
+			let t = a(P.value || "0", e === 1 ? b.step : `-${b.step}`);
+			if (t == null) return;
+			let n = o(t, b.min, b.max), r = b.precision == null ? n : d(n, b.precision) ?? n;
+			P.value = r, B.value = V.value ? f(r, b.locale) : H(r);
+		}
+		let q = m(() => b.min != null && P.value !== "" && s(P.value, b.min) <= 0), J = m(() => b.max != null && P.value !== "" && s(P.value, b.max) >= 0), Y = m(() => p({
+			size: b.size,
+			invalid: L.value,
+			withStepper: b.stepper
+		}));
+		function X(e, t) {
+			let n = b.ui?.[e];
+			return z.value ? [n, t] : Y.value[e]({ class: [n, t] });
+		}
+		return (n, i) => (S(), g("div", { class: x(X("root")) }, [O(_("input", {
+			id: I.value,
+			"onUpdate:modelValue": i[0] ||= (e) => B.value = e,
+			type: "text",
+			inputmode: "decimal",
+			autocomplete: "off",
+			role: "spinbutton",
+			"aria-valuenow": P.value || void 0,
+			"aria-valuemin": b.min,
+			"aria-valuemax": b.max,
+			placeholder: b.placeholder,
+			disabled: b.disabled,
+			required: b.required,
+			"aria-invalid": L.value || void 0,
+			"aria-describedby": w(F)?.describedBy.value,
+			class: x(z.value ? [b.ui?.input, b.class] : Y.value.input({ class: [b.ui?.input, b.class] })),
+			onFocus: W,
+			onBlur: G,
+			onKeydown: [i[1] ||= k(A((e) => K(1), ["prevent"]), ["up"]), i[2] ||= k(A((e) => K(-1), ["prevent"]), ["down"])]
+		}, null, 42, j), [[E, B.value]]), b.stepper ? (S(), g("div", {
+			key: 0,
+			class: x(X("stepper"))
+		}, [_("button", {
+			type: "button",
+			tabindex: "-1",
+			"aria-label": b.incrementLabel,
+			disabled: b.disabled || J.value,
+			class: x(X("step")),
+			onClick: i[3] ||= (e) => K(1)
+		}, [v(r, { icon: w(t) }, null, 8, ["icon"])], 10, M), _("button", {
+			type: "button",
+			tabindex: "-1",
+			"aria-label": b.decrementLabel,
+			disabled: b.disabled || q.value,
+			class: x(X("step")),
+			onClick: i[4] ||= (e) => K(-1)
+		}, [v(r, { icon: w(e) }, null, 8, ["icon"])], 10, N)], 2)) : h("", !0)], 2));
+	}
+});
+//#endregion
+export { P as default };

package/dist/packages/iryx-ui/src/components/index.js

@@ -15,21 +15,22 @@ import p from "./Form.js";
 import m from "./Label.js";
 import h from "./FormField.js";
 import g from "./Input.js";
-import _ from "./Pagination.js";
-import v from "./Progress.js";
-import y from "./RadioGroup.js";
-import b from "./Select.js";
-import x from "./Separator.js";
-import S from "./Skeleton.js";
-import C from "./Stat.js";
-import w from "./Stepper.js";
-import T from "./Switch.js";
-import E from "./Tabs.js";
-import D from "./Textarea.js";
-import O from "./Toaster.js";
-import k from "./Tooltip.js";
+import _ from "./NumberInput.js";
+import v from "./Pagination.js";
+import y from "./Progress.js";
+import b from "./RadioGroup.js";
+import x from "./Select.js";
+import S from "./Separator.js";
+import C from "./Skeleton.js";
+import w from "./Stat.js";
+import T from "./Stepper.js";
+import E from "./Switch.js";
+import D from "./Tabs.js";
+import O from "./Textarea.js";
+import k from "./Toaster.js";
+import A from "./Tooltip.js";
 //#region src/components/index.ts
-var A = /* @__PURE__ */ e({
+var j = /* @__PURE__ */ e({
 	Alert: () => t,
 	App: () => n,
 	Badge: () => r,
@@ -46,19 +47,20 @@ var A = /* @__PURE__ */ e({
 	FormField: () => h,
 	Input: () => g,
 	Label: () => m,
-	Pagination: () => _,
-	Progress: () => v,
-	RadioGroup: () => y,
-	Select: () => b,
-	Separator: () => x,
-	Skeleton: () => S,
-	Stat: () => C,
-	Stepper: () => w,
-	Switch: () => T,
-	Tabs: () => E,
-	Textarea: () => D,
-	Toaster: () => O,
-	Tooltip: () => k
+	NumberInput: () => _,
+	Pagination: () => v,
+	Progress: () => y,
+	RadioGroup: () => b,
+	Select: () => x,
+	Separator: () => S,
+	Skeleton: () => C,
+	Stat: () => w,
+	Stepper: () => T,
+	Switch: () => E,
+	Tabs: () => D,
+	Textarea: () => O,
+	Toaster: () => k,
+	Tooltip: () => A
 });
 //#endregion
-export { A as components_exports };
+export { j as components_exports };

package/dist/packages/iryx-ui/src/composables/decimal.js

@@ -0,0 +1,79 @@
+//#region src/composables/decimal.ts
+var e = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)$/;
+function t(t) {
+	let n = t.trim();
+	if (!n || !e.test(n)) return;
+	let r = n.startsWith("-"), [i = "", a = ""] = n.replace(/^[+-]/, "").split("."), o = `${i || "0"}${a}`, s = BigInt(o || "0");
+	return {
+		units: r ? -s : s,
+		scale: a.length
+	};
+}
+function n({ units: e, scale: t }) {
+	let n = e < 0n, r = (n ? -e : e).toString().padStart(t + 1, "0"), i = r.slice(0, r.length - t), a = t ? r.slice(r.length - t) : "";
+	return `${n ? "-" : ""}${i}${a ? `.${a}` : ""}`;
+}
+function r(e, t) {
+	let n = Math.max(e.scale, t.scale), r = (e) => e.units * 10n ** BigInt(n - e.scale);
+	return [
+		r(e),
+		r(t),
+		n
+	];
+}
+function i(e, n) {
+	let i = t(e), a = t(n);
+	if (!i || !a) return NaN;
+	let [o, s] = r(i, a);
+	return o < s ? -1 : +(o > s);
+}
+function a(e, i) {
+	let a = t(e), o = t(i);
+	if (!a || !o) return;
+	let [s, c, l] = r(a, o);
+	return n({
+		units: s + c,
+		scale: l
+	});
+}
+function o(e, r) {
+	let i = t(e);
+	if (!i) return;
+	if (i.scale <= r) return n({
+		units: i.units * 10n ** BigInt(r - i.scale),
+		scale: r
+	});
+	let a = 10n ** BigInt(i.scale - r), o = i.units < 0n, s = o ? -i.units : i.units, c = s % a * 2n >= a ? 1n : 0n, l = s / a + c;
+	return n({
+		units: o ? -l : l,
+		scale: r
+	});
+}
+function s(e, t, n) {
+	return t != null && i(e, t) < 0 ? t : n != null && i(e, n) > 0 ? n : e;
+}
+function c(e) {
+	return t(e) !== void 0;
+}
+function l(e) {
+	let t = new Intl.NumberFormat(e).formatToParts(12345.6);
+	return {
+		decimal: t.find((e) => e.type === "decimal")?.value ?? ".",
+		group: t.find((e) => e.type === "group")?.value ?? ","
+	};
+}
+function u(e, n, r) {
+	let i = t(e);
+	if (!i) return e;
+	let a = o(e, r ?? i.scale) ?? e, [s = "0", c = ""] = a.replace("-", "").split("."), { decimal: u, group: d } = l(n), f = s.replace(/\B(?=(\d{3})+(?!\d))/g, d);
+	return `${a.startsWith("-") ? "-" : ""}${f}${c ? `${u}${c}` : ""}`;
+}
+function d(e, t) {
+	return !e || !t ? e : e.replace(".", l(t).decimal);
+}
+function f(e, t) {
+	let { decimal: n, group: r } = l(t), i = e.trim().replaceAll(r, "").replace(/\s/g, "").replace(n, ".");
+	return c(i) ? i : void 0;
+}
+//#endregion
+export { a as addDecimals, s as clampDecimal, i as compareDecimals, n as formatDecimal, u as formatForLocale, c as isDecimal, l as localeSeparators, t as parseDecimal, f as parseFromLocale, o as roundDecimal, d as toEditable };

package/dist/packages/iryx-ui/src/theme/form.js

@@ -1,38 +1,14 @@
 import { tv as e } from "tailwind-variants";
 //#region src/theme/form.ts
-var t = e({
-	slots: {
-		root: "space-y-2",
-		header: "flex items-center justify-between gap-2",
-		label: "",
-		hint: "text-sm leading-none text-muted-foreground",
-		description: "text-sm leading-snug text-muted-foreground",
-		control: "",
-		error: "text-sm leading-snug text-red-500",
-		help: "text-sm leading-snug text-muted-foreground"
-	},
-	variants: { indent: {
-		none: {},
-		sm: {
-			header: "px-2.5",
-			description: "px-2.5",
-			error: "px-2.5",
-			help: "px-2.5"
-		},
-		md: {
-			header: "px-3",
-			description: "px-3",
-			error: "px-3",
-			help: "px-3"
-		},
-		lg: {
-			header: "px-4",
-			description: "px-4",
-			error: "px-4",
-			help: "px-4"
-		}
-	} },
-	defaultVariants: { indent: "md" }
-});
+var t = e({ slots: {
+	root: "space-y-2",
+	header: "flex items-center justify-between gap-2",
+	label: "",
+	hint: "text-sm leading-none text-muted-foreground",
+	description: "text-sm leading-snug text-muted-foreground",
+	control: "",
+	error: "text-sm leading-snug text-red-500",
+	help: "text-sm leading-snug text-muted-foreground"
+} });
 //#endregion
 export { t as formFieldTheme };

package/dist/packages/iryx-ui/src/theme/label.js

@@ -2,16 +2,7 @@ import { tv as e } from "tailwind-variants";
 //#region src/theme/label.ts
 var t = e({
 	base: "inline-flex items-center gap-1 text-sm leading-none font-medium text-foreground select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-	variants: {
-		required: { true: "after:text-red-500 after:content-['*']" },
-		indent: {
-			none: "",
-			sm: "ps-2.5",
-			md: "ps-3",
-			lg: "ps-4"
-		}
-	},
-	defaultVariants: { indent: "md" }
+	variants: { required: { true: "after:text-red-500 after:content-['*']" } }
 });
 //#endregion
 export { t as labelTheme };

package/dist/packages/iryx-ui/src/theme/number-input.js

@@ -0,0 +1,49 @@
+import { fieldBase as e } from "./input.js";
+import { tv as t } from "tailwind-variants";
+//#region src/theme/number-input.ts
+var n = t({
+	slots: {
+		root: "relative inline-flex w-full items-stretch",
+		input: `flex w-full text-right tabular-nums ${e}`,
+		stepper: "absolute inset-y-px end-px flex flex-col justify-center overflow-hidden rounded-e-lg border-s border-border",
+		step: "flex flex-1 items-center justify-center px-1.5 text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-3"
+	},
+	variants: {
+		size: {
+			sm: {
+				input: "h-8 px-2.5 text-sm",
+				stepper: "w-5"
+			},
+			md: {
+				input: "h-9 px-3 text-sm",
+				stepper: "w-6"
+			},
+			lg: {
+				input: "h-10 px-4 text-base",
+				stepper: "w-7"
+			}
+		},
+		invalid: { true: { input: "border-red-500 focus-visible:ring-red-500/40" } },
+		withStepper: { true: {} }
+	},
+	compoundVariants: [
+		{
+			withStepper: !0,
+			size: "sm",
+			class: { input: "pe-7" }
+		},
+		{
+			withStepper: !0,
+			size: "md",
+			class: { input: "pe-8" }
+		},
+		{
+			withStepper: !0,
+			size: "lg",
+			class: { input: "pe-10" }
+		}
+	],
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { n as numberInputTheme };

package/dist/theme/form.d.ts

@@ -1,26 +1,30 @@
 export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
-    indent: {
-        none: {};
-        sm: {
-            header: string;
-            description: string;
-            error: string;
-            help: string;
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            label?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            error?: import("tailwind-variants").ClassValue;
+            hint?: import("tailwind-variants").ClassValue;
+            control?: import("tailwind-variants").ClassValue;
+            help?: import("tailwind-variants").ClassValue;
         };
-        md: {
-            header: string;
-            description: string;
-            error: string;
-            help: string;
-        };
-        lg: {
-            header: string;
-            description: string;
-            error: string;
-            help: string;
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            label?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            error?: import("tailwind-variants").ClassValue;
+            hint?: import("tailwind-variants").ClassValue;
+            control?: import("tailwind-variants").ClassValue;
+            help?: import("tailwind-variants").ClassValue;
         };
     };
-}, {
+} | {}, {
     root: string;
     header: string;
     label: string;
@@ -30,28 +34,19 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
     error: string;
     help: string;
 }, undefined, {
-    indent: {
-        none: {};
-        sm: {
-            header: string;
-            description: string;
-            error: string;
-            help: string;
-        };
-        md: {
-            header: string;
-            description: string;
-            error: string;
-            help: string;
-        };
-        lg: {
-            header: string;
-            description: string;
-            error: string;
-            help: string;
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            label?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            error?: import("tailwind-variants").ClassValue;
+            hint?: import("tailwind-variants").ClassValue;
+            control?: import("tailwind-variants").ClassValue;
+            help?: import("tailwind-variants").ClassValue;
         };
     };
-}, {
+} | {}, {
     root: string;
     header: string;
     label: string;
@@ -60,29 +55,7 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
     control: string;
     error: string;
     help: string;
-}, import("tailwind-variants").TVReturnType<{
-    indent: {
-        none: {};
-        sm: {
-            header: string;
-            description: string;
-            error: string;
-            help: string;
-        };
-        md: {
-            header: string;
-            description: string;
-            error: string;
-            help: string;
-        };
-        lg: {
-            header: string;
-            description: string;
-            error: string;
-            help: string;
-        };
-    };
-}, {
+}, import("tailwind-variants").TVReturnType<unknown, {
     root: string;
     header: string;
     label: string;

package/dist/theme/index.d.ts

@@ -10,6 +10,7 @@ export * from './dropdown-menu';
 export * from './empty-state';
 export * from './input';
 export * from './label';
+export * from './number-input';
 export * from './pagination';
 export * from './presets';
 export * from './progress';

package/dist/theme/label.d.ts

@@ -2,31 +2,13 @@ export declare const labelTheme: import("tailwind-variants").TVReturnType<{
     required: {
         true: string;
     };
-    indent: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
 }, undefined, "inline-flex items-center gap-1 text-sm leading-none font-medium text-foreground select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50", {
     required: {
         true: string;
     };
-    indent: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     required: {
         true: string;
     };
-    indent: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
 }, undefined, "inline-flex items-center gap-1 text-sm leading-none font-medium text-foreground select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50", unknown, unknown, undefined>>;
 export type LabelVariants = Parameters<typeof labelTheme>[0];

package/dist/theme/number-input.d.ts

@@ -0,0 +1,92 @@
+export declare const numberInputTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            input: string;
+            stepper: string;
+        };
+        md: {
+            input: string;
+            stepper: string;
+        };
+        lg: {
+            input: string;
+            stepper: string;
+        };
+    };
+    invalid: {
+        true: {
+            input: string;
+        };
+    };
+    /** Leaves room for the stepper so long values can't slide under it. */
+    withStepper: {
+        true: {};
+    };
+}, {
+    root: string;
+    input: string;
+    /** Stacked +/- controls pinned inside the trailing edge of the field. */
+    stepper: string;
+    step: string;
+}, undefined, {
+    size: {
+        sm: {
+            input: string;
+            stepper: string;
+        };
+        md: {
+            input: string;
+            stepper: string;
+        };
+        lg: {
+            input: string;
+            stepper: string;
+        };
+    };
+    invalid: {
+        true: {
+            input: string;
+        };
+    };
+    /** Leaves room for the stepper so long values can't slide under it. */
+    withStepper: {
+        true: {};
+    };
+}, {
+    root: string;
+    input: string;
+    /** Stacked +/- controls pinned inside the trailing edge of the field. */
+    stepper: string;
+    step: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            input: string;
+            stepper: string;
+        };
+        md: {
+            input: string;
+            stepper: string;
+        };
+        lg: {
+            input: string;
+            stepper: string;
+        };
+    };
+    invalid: {
+        true: {
+            input: string;
+        };
+    };
+    /** Leaves room for the stepper so long values can't slide under it. */
+    withStepper: {
+        true: {};
+    };
+}, {
+    root: string;
+    input: string;
+    /** Stacked +/- controls pinned inside the trailing edge of the field. */
+    stepper: string;
+    step: string;
+}, undefined, unknown, unknown, undefined>>;
+export type NumberInputSlots = keyof ReturnType<typeof numberInputTheme>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iryx-ui",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "author": "therok1",
   "license": "MIT",