iryx-ui 0.3.0 → 0.5.0

package/dist/index.js

@@ -18,47 +18,52 @@ import { cardTheme as S } from "./packages/iryx-ui/src/theme/card.js";
 import C from "./packages/iryx-ui/src/components/Card.js";
 import { checkboxTheme as w } from "./packages/iryx-ui/src/theme/checkbox.js";
 import T from "./packages/iryx-ui/src/components/Checkbox.js";
-import { resolveConfirm as E, useConfirm as D, useConfirmState as O } from "./packages/iryx-ui/src/composables/confirm.js";
-import { dialogTheme as k } from "./packages/iryx-ui/src/theme/dialog.js";
-import A from "./packages/iryx-ui/src/components/Dialog.js";
-import j from "./packages/iryx-ui/src/components/ConfirmDialog.js";
-import { dropdownMenuTheme as M } from "./packages/iryx-ui/src/theme/dropdown-menu.js";
-import { isSeparator as N, isSubmenu as P } from "./packages/iryx-ui/src/composables/dropdown-menu.js";
-import F from "./packages/iryx-ui/src/components/DropdownMenu.js";
-import { emptyStateTheme as I } from "./packages/iryx-ui/src/theme/empty-state.js";
-import L from "./packages/iryx-ui/src/components/EmptyState.js";
-import { formContextKey as R, formFieldContextKey as z, getByPath as B, isStandardSchema as V, issuePath as H, useForm as U, useFormField as W } from "./packages/iryx-ui/src/composables/form.js";
-import G from "./packages/iryx-ui/src/components/Form.js";
-import { labelTheme as K } from "./packages/iryx-ui/src/theme/label.js";
-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 { formContextKey as E, formFieldContextKey as D, getByPath as O, isStandardSchema as k, issuePath as A, useForm as j, useFormField as M } from "./packages/iryx-ui/src/composables/form.js";
+import { fieldBase as N, inputTheme as P, textareaTheme as F } from "./packages/iryx-ui/src/theme/input.js";
+import { comboboxTheme as I } from "./packages/iryx-ui/src/theme/combobox.js";
+import L from "./packages/iryx-ui/src/components/Combobox.js";
+import { resolveConfirm as R, useConfirm as z, useConfirmState as B } from "./packages/iryx-ui/src/composables/confirm.js";
+import { dialogTheme as V } from "./packages/iryx-ui/src/theme/dialog.js";
+import H from "./packages/iryx-ui/src/components/Dialog.js";
+import U from "./packages/iryx-ui/src/components/ConfirmDialog.js";
+import { dropdownMenuTheme as W } from "./packages/iryx-ui/src/theme/dropdown-menu.js";
+import { isSeparator as G, isSubmenu as K } from "./packages/iryx-ui/src/composables/dropdown-menu.js";
+import q from "./packages/iryx-ui/src/components/DropdownMenu.js";
+import { emptyStateTheme as J } from "./packages/iryx-ui/src/theme/empty-state.js";
+import Y from "./packages/iryx-ui/src/components/EmptyState.js";
+import X from "./packages/iryx-ui/src/components/Form.js";
+import { labelTheme as Z } from "./packages/iryx-ui/src/theme/label.js";
+import Q from "./packages/iryx-ui/src/components/Label.js";
+import $ from "./packages/iryx-ui/src/components/FormField.js";
+import ee from "./packages/iryx-ui/src/components/Input.js";
+import { addDecimals as te, clampDecimal as ne, compareDecimals as re, formatDecimal as ie, formatForLocale as ae, isDecimal as oe, localeSeparators as se, parseDecimal as ce, parseFromLocale as le, roundDecimal as ue, toEditable as de } from "./packages/iryx-ui/src/composables/decimal.js";
+import { numberInputTheme as fe } from "./packages/iryx-ui/src/theme/number-input.js";
+import pe from "./packages/iryx-ui/src/components/NumberInput.js";
+import { paginationTheme as me } from "./packages/iryx-ui/src/theme/pagination.js";
+import he from "./packages/iryx-ui/src/components/Pagination.js";
+import { progressTheme as ge } from "./packages/iryx-ui/src/theme/progress.js";
+import _e from "./packages/iryx-ui/src/components/Progress.js";
+import { radioGroupTheme as ve } from "./packages/iryx-ui/src/theme/radio-group.js";
+import ye from "./packages/iryx-ui/src/components/RadioGroup.js";
+import { selectTheme as be } from "./packages/iryx-ui/src/theme/select.js";
+import xe 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 we } from "./packages/iryx-ui/src/theme/skeleton.js";
+import Te from "./packages/iryx-ui/src/components/Skeleton.js";
+import { statTheme as Ee } from "./packages/iryx-ui/src/theme/stat.js";
+import De from "./packages/iryx-ui/src/components/Stat.js";
+import { stepperTheme as Oe } from "./packages/iryx-ui/src/theme/stepper.js";
+import ke from "./packages/iryx-ui/src/components/Stepper.js";
+import { switchTheme as Ae } from "./packages/iryx-ui/src/theme/switch.js";
+import je from "./packages/iryx-ui/src/components/Switch.js";
+import { tabsTheme as Me } from "./packages/iryx-ui/src/theme/tabs.js";
+import Ne from "./packages/iryx-ui/src/components/Tabs.js";
+import Pe from "./packages/iryx-ui/src/components/Textarea.js";
+import { useToast as Fe, useToastState as Ie } from "./packages/iryx-ui/src/composables/toast.js";
+import { toastTheme as Le } from "./packages/iryx-ui/src/theme/toast.js";
+import Re from "./packages/iryx-ui/src/components/Toaster.js";
+import { tooltipTheme as ze } from "./packages/iryx-ui/src/theme/tooltip.js";
+import Be from "./packages/iryx-ui/src/components/Tooltip.js";
+import { IryxUi as Ve, createIryxUi as He } 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, L as Combobox, U as ConfirmDialog, H as Dialog, q as DropdownMenu, Y as EmptyState, X as Form, $ as FormField, ee as Input, Ve as IryxUi, Q as Label, pe as NumberInput, he as Pagination, _e as Progress, ye as RadioGroup, xe as Select, Ce as Separator, Te as Skeleton, De as Stat, ke as Stepper, je as Switch, Ne as Tabs, Pe as Textarea, Re as Toaster, Be as Tooltip, te 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, ne as clampDecimal, l as clearTheme, I as comboboxTheme, re as compareDecimals, e as componentNames, He as createIryxUi, t as defaultConfig, V as dialogTheme, W as dropdownMenuTheme, J as emptyStateTheme, N as fieldBase, E as formContextKey, D as formFieldContextKey, ie as formatDecimal, ae as formatForLocale, O as getByPath, o as initAppearance, P as inputTheme, n as iryxUiConfigKey, oe as isDecimal, G as isSeparator, k as isStandardSchema, K as isSubmenu, A as issuePath, Z as labelTheme, se as localeSeparators, fe as numberInputTheme, me as paginationTheme, ce as parseDecimal, le as parseFromLocale, ge as progressTheme, ve as radioGroupTheme, R as resolveConfirm, ue as roundDecimal, be as selectTheme, Se as separatorTheme, we as skeletonTheme, Ee as statTheme, Oe as stepperTheme, Ae as switchTheme, Me as tabsTheme, F as textareaTheme, u as themes, de as toEditable, Le as toastTheme, ze as tooltipTheme, s as useAppearance, _ as useButtonGroup, z as useConfirm, B as useConfirmState, j as useForm, M as useFormField, r as useIryxUiConfig, Fe as useToast, Ie as useToastState };

package/dist/nuxt.d.ts

@@ -7,7 +7,7 @@ export interface ModuleOptions {
     unstyled: boolean;
     /** Startup appearance. A preference the user already stored wins over this. */
     appearance?: Appearance;
-    /** Color theme: a preset name (`'emerald'`, `'rose'`…) or a custom theme. */
+    /** Color theme: a preset name (`'violet'`, `'rose'`) or a custom theme. */
     theme?: Theme | ThemePresetName;
 }
 declare const _default: NuxtModule<TOptions, TOptions, false>;

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.Combobox.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/Combobox.js

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

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

@@ -0,0 +1,284 @@
+import { ArrowDown01Icon as e, Tick02Icon 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 { comboboxTheme as ee } from "../theme/combobox.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeProps as p, normalizeClass as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, vShow as x, withCtx as S, withDirectives as te } from "vue";
+import { ComboboxAnchor as ne, ComboboxContent as re, ComboboxEmpty as ie, ComboboxGroup as ae, ComboboxInput as oe, ComboboxItem as C, ComboboxItemIndicator as w, ComboboxLabel as T, ComboboxPortal as se, ComboboxRoot as E, ComboboxTrigger as D, ComboboxViewport as O, ComboboxVirtualizer as k, useFilter as A, useForwardPropsEmits as j } from "reka-ui";
+//#region src/components/Combobox.vue?vue&type=script&setup=true&lang.ts
+var M = /*@__PURE__*/ f({
+	__name: "Combobox",
+	props: {
+		items: {},
+		placeholder: {},
+		size: {},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		id: {},
+		emptyText: { default: "No results found." },
+		create: {
+			type: Boolean,
+			default: void 0
+		},
+		createLabel: {
+			type: Function,
+			default: (e) => `Create "${e}"`
+		},
+		virtual: {
+			type: Boolean,
+			default: void 0
+		},
+		estimateSize: { default: 32 },
+		overscan: { default: 12 },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {},
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		resetSearchTermOnBlur: { type: Boolean },
+		resetSearchTermOnSelect: { type: Boolean },
+		openOnFocus: { type: Boolean },
+		openOnClick: { type: Boolean },
+		ignoreFilter: { type: Boolean },
+		resetModelValueOnClear: { type: Boolean },
+		modelValue: {},
+		defaultValue: {},
+		multiple: { type: Boolean },
+		dir: {},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		highlightOnHover: { type: Boolean },
+		by: {},
+		asChild: { type: Boolean },
+		as: {},
+		name: {},
+		required: { type: Boolean }
+	},
+	emits: [
+		"update:modelValue",
+		"highlight",
+		"update:open",
+		"create"
+	],
+	setup(f, { emit: M }) {
+		let N = f, P = M, F = j(o(() => {
+			let { items: e, placeholder: t, size: n, invalid: r, id: i, emptyText: ee, create: a, createLabel: o, virtual: s, estimateSize: c, overscan: l, unstyled: u, class: d, ui: f, ...p } = N;
+			return p;
+		}), P);
+		function I(e) {
+			return typeof e == "string" ? {
+				label: e,
+				value: e
+			} : e;
+		}
+		function L(e) {
+			return typeof e != "string" && "items" in e;
+		}
+		let R = o(() => {
+			let e = N.items ?? [];
+			return e.some(L) ? e.map((e) => L(e) ? e : {
+				label: "",
+				items: [e]
+			}) : void 0;
+		}), z = o(() => (N.items ?? []).flatMap((e) => L(e) ? e.items.map(I) : [I(e)])), B = o(() => !!N.virtual), V = g(""), H = g("");
+		function U(e) {
+			H.value = e.target.value;
+		}
+		let { contains: W } = A({ sensitivity: "base" }), G = o(() => {
+			let e = H.value.trim();
+			return e ? z.value.filter((t) => W(t.label, e)) : z.value;
+		});
+		function ce(e) {
+			let t = (e) => z.value.find((t) => t.value === e)?.label ?? String(e ?? "");
+			return Array.isArray(e) ? e.map(t).join(", ") : e == null || e === "" ? "" : t(e);
+		}
+		function le(e) {
+			let t = e.target;
+			requestAnimationFrame(() => {
+				document.activeElement === t && t.select();
+			}), H.value = "";
+		}
+		let K = o(() => {
+			let e = H.value.trim();
+			return !!N.create && e.length > 0 && !z.value.some((t) => t.label.toLowerCase() === e.toLowerCase());
+		});
+		function q(e) {
+			e.preventDefault(), P("create", H.value.trim()), e.target?.dispatchEvent(new KeyboardEvent("keydown", {
+				key: "Escape",
+				bubbles: !0
+			}));
+		}
+		let J = i(), ue = o(() => N.id ?? J?.id.value), Y = o(() => N.invalid ?? J?.invalid.value ?? !1), de = n(), X = o(() => N.unstyled ?? de.unstyled), Z = o(() => ee({
+			size: N.size,
+			invalid: Y.value,
+			disabled: N.disabled
+		}));
+		function Q(e, t) {
+			let n = N.ui?.[e];
+			return X.value ? [n, t] : Z.value[e]({ class: [n, t] });
+		}
+		let $ = o(() => X.value ? void 0 : Z.value.itemIndicator());
+		return (n, i) => (h(), s(b(E), p(b(F), {
+			"open-on-click": "",
+			class: "contents"
+		}), {
+			default: S(() => [d(b(ne), { class: m(Q("anchor", N.class)) }, {
+				default: S(() => [d(b(oe), {
+					id: ue.value,
+					modelValue: V.value,
+					"onUpdate:modelValue": i[0] ||= (e) => V.value = e,
+					placeholder: N.placeholder,
+					"display-value": ce,
+					"aria-invalid": Y.value || void 0,
+					"aria-describedby": b(J)?.describedBy.value,
+					class: m(Q("input")),
+					onFocus: le,
+					onInput: U
+				}, null, 8, [
+					"id",
+					"modelValue",
+					"placeholder",
+					"aria-invalid",
+					"aria-describedby",
+					"class"
+				]), d(b(D), { class: m(Q("trigger")) }, {
+					default: S(() => [d(r, { icon: b(e) }, null, 8, ["icon"])]),
+					_: 1
+				}, 8, ["class"])]),
+				_: 1
+			}, 8, ["class"]), d(b(se), null, {
+				default: S(() => [d(b(re), {
+					class: m(Q("content")),
+					position: "popper",
+					"side-offset": 4
+				}, {
+					default: S(() => [d(b(O), { class: m(Q("viewport")) }, {
+						default: S(() => [
+							B.value ? te((h(), l("div", {
+								key: 0,
+								class: m(Q("empty"))
+							}, [v(n.$slots, "empty", { query: H.value }, () => [u(y(N.emptyText), 1)])], 2)), [[x, !K.value && G.value.length === 0]]) : K.value ? c("", !0) : (h(), s(b(ie), {
+								key: 1,
+								class: m(Q("empty"))
+							}, {
+								default: S(() => [v(n.$slots, "empty", { query: H.value }, () => [u(y(N.emptyText), 1)])]),
+								_: 3
+							}, 8, ["class"])),
+							v(n.$slots, "default", {}, () => [B.value ? (h(), s(b(k), {
+								key: 0,
+								options: G.value,
+								"estimate-size": N.estimateSize,
+								overscan: N.overscan,
+								"text-content": (e) => e.label
+							}, {
+								default: S(({ option: e }) => [d(b(C), {
+									value: e.value,
+									"text-value": e.label,
+									disabled: e.disabled,
+									class: m(Q("item"))
+								}, {
+									default: S(() => [d(b(w), { class: m($.value) }, {
+										default: S(() => [d(r, { icon: b(t) }, null, 8, ["icon"])]),
+										_: 1
+									}, 8, ["class"]), u(" " + y(e.label), 1)]),
+									_: 2
+								}, 1032, [
+									"value",
+									"text-value",
+									"disabled",
+									"class"
+								])]),
+								_: 1
+							}, 8, [
+								"options",
+								"estimate-size",
+								"overscan",
+								"text-content"
+							])) : R.value ? (h(!0), l(a, { key: 1 }, _(R.value, (e, n) => (h(), s(b(ae), {
+								key: e.label || n,
+								class: m(Q("group"))
+							}, {
+								default: S(() => [e.label ? (h(), s(b(T), {
+									key: 0,
+									class: m(Q("groupLabel"))
+								}, {
+									default: S(() => [u(y(e.label), 1)]),
+									_: 2
+								}, 1032, ["class"])) : c("", !0), (h(!0), l(a, null, _(e.items, (e) => (h(), s(b(C), {
+									key: typeof e == "string" ? e : e.value,
+									value: typeof e == "string" ? e : e.value,
+									"text-value": typeof e == "string" ? e : e.label,
+									disabled: typeof e == "string" ? void 0 : e.disabled,
+									class: m(Q("item"))
+								}, {
+									default: S(() => [d(b(w), { class: m($.value) }, {
+										default: S(() => [d(r, { icon: b(t) }, null, 8, ["icon"])]),
+										_: 1
+									}, 8, ["class"]), u(" " + y(typeof e == "string" ? e : e.label), 1)]),
+									_: 2
+								}, 1032, [
+									"value",
+									"text-value",
+									"disabled",
+									"class"
+								]))), 128))]),
+								_: 2
+							}, 1032, ["class"]))), 128)) : (h(!0), l(a, { key: 2 }, _(z.value, (e) => (h(), s(b(C), {
+								key: e.value,
+								value: e.value,
+								"text-value": e.label,
+								disabled: e.disabled,
+								class: m(Q("item"))
+							}, {
+								default: S(() => [d(b(w), { class: m($.value) }, {
+									default: S(() => [d(r, { icon: b(t) }, null, 8, ["icon"])]),
+									_: 1
+								}, 8, ["class"]), u(" " + y(e.label), 1)]),
+								_: 2
+							}, 1032, [
+								"value",
+								"text-value",
+								"disabled",
+								"class"
+							]))), 128))]),
+							K.value ? (h(), s(b(C), {
+								key: H.value,
+								value: H.value,
+								"data-create": "",
+								"text-value": H.value,
+								class: m(Q("item")),
+								onSelect: q
+							}, {
+								default: S(() => [v(n.$slots, "create", { query: H.value }, () => [u(y(N.createLabel(H.value.trim())), 1)])]),
+								_: 3
+							}, 8, [
+								"value",
+								"text-value",
+								"class"
+							])) : c("", !0)
+						]),
+						_: 3
+					}, 8, ["class"])]),
+					_: 3
+				}, 8, ["class"])]),
+				_: 3
+			})]),
+			_: 3
+		}, 16));
+	}
+});
+//#endregion
+export { M as default };

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 };