iryx-ui 0.4.0 → 0.5.0

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/Select.vue_vue_type_script_setup_true_lang.js

@@ -2,10 +2,10 @@ import { ArrowDown01Icon as e, Tick02Icon as t } from "../../../../node_modules/
 import { useIryxUiConfig as n } from "../config.js";
 import r from "./Icon.js";
 import { selectTheme as i } from "../theme/select.js";
-import { Fragment as a, computed as o, createBlock as s, createElementBlock as c, createTextVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, normalizeClass as p, normalizeProps as m, openBlock as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, withCtx as b } from "vue";
-import { SelectContent as x, SelectIcon as S, SelectItem as C, SelectItemIndicator as w, SelectItemText as T, SelectPortal as E, SelectRoot as D, SelectTrigger as O, SelectValue as k, SelectViewport as A, useForwardPropsEmits as j } from "reka-ui";
+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, guardReactiveProps as p, normalizeClass as m, normalizeProps as h, openBlock as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
+import { SelectContent as S, SelectGroup as C, SelectIcon as w, SelectItem as T, SelectItemIndicator as E, SelectItemText as D, SelectLabel as O, SelectPortal as k, SelectRoot as A, SelectTrigger as j, SelectValue as M, SelectViewport as N, useForwardPropsEmits as P } from "reka-ui";
 //#region src/components/Select.vue?vue&type=script&setup=true&lang.ts
-var M = /*@__PURE__*/ d({
+var F = /*@__PURE__*/ f({
 	__name: "Select",
 	props: {
 		items: {},
@@ -30,39 +30,84 @@ var M = /*@__PURE__*/ d({
 		required: { type: Boolean }
 	},
 	emits: ["update:modelValue", "update:open"],
-	setup(d, { emit: M }) {
-		let N = d, P = M, F = j(o(() => {
-			let { items: e, placeholder: t, size: n, unstyled: r, class: i, ui: a, ...o } = N;
+	setup(f, { emit: F }) {
+		let I = f, L = F, R = P(o(() => {
+			let { items: e, placeholder: t, size: n, unstyled: r, class: i, ui: a, ...o } = I;
 			return o;
-		}), P), I = o(() => (N.items ?? []).map((e) => typeof e == "string" ? {
-			label: e,
-			value: e
-		} : e)), L = n(), R = o(() => N.unstyled ?? L.unstyled), z = o(() => i({ size: N.size })), B = o(() => R.value ? [N.ui?.trigger, N.class] : z.value.trigger({ class: [N.ui?.trigger, N.class] })), V = o(() => R.value ? N.ui?.content : z.value.content({ class: N.ui?.content })), H = o(() => R.value ? N.ui?.viewport : z.value.viewport({ class: N.ui?.viewport })), U = o(() => R.value ? N.ui?.item : z.value.item({ class: N.ui?.item })), W = o(() => R.value ? void 0 : z.value.itemIndicator());
-		return (n, i) => (h(), s(y(D), m(f(y(F))), {
-			default: b(() => [u(y(O), { class: p(B.value) }, {
-				default: b(() => [u(y(k), { placeholder: N.placeholder }, null, 8, ["placeholder"]), u(y(S), { "as-child": "" }, {
-					default: b(() => [u(r, { icon: y(e) }, null, 8, ["icon"])]),
+		}), L);
+		function z(e) {
+			return typeof e == "string" ? {
+				label: e,
+				value: e
+			} : e;
+		}
+		function B(e) {
+			return typeof e != "string" && "items" in e;
+		}
+		let V = o(() => {
+			let e = I.items ?? [];
+			if (e.some(B)) return e.map((e) => B(e) ? {
+				label: e.label,
+				options: e.items.map(z)
+			} : {
+				label: "",
+				options: [z(e)]
+			});
+		}), H = o(() => (I.items ?? []).flatMap((e) => B(e) ? e.items.map(z) : [z(e)])), U = n(), W = o(() => I.unstyled ?? U.unstyled), G = o(() => i({ size: I.size })), K = o(() => W.value ? [I.ui?.trigger, I.class] : G.value.trigger({ class: [I.ui?.trigger, I.class] })), q = o(() => W.value ? I.ui?.content : G.value.content({ class: I.ui?.content })), J = o(() => W.value ? I.ui?.viewport : G.value.viewport({ class: I.ui?.viewport })), Y = o(() => W.value ? I.ui?.item : G.value.item({ class: I.ui?.item })), X = o(() => W.value ? void 0 : G.value.itemIndicator()), Z = o(() => W.value ? I.ui?.group : G.value.group({ class: I.ui?.group })), Q = o(() => W.value ? I.ui?.groupLabel : G.value.groupLabel({ class: I.ui?.groupLabel }));
+		return (n, i) => (g(), s(b(A), h(p(b(R))), {
+			default: x(() => [d(b(j), { class: m(K.value) }, {
+				default: x(() => [d(b(M), { placeholder: I.placeholder }, null, 8, ["placeholder"]), d(b(w), { "as-child": "" }, {
+					default: x(() => [d(r, { icon: b(e) }, null, 8, ["icon"])]),
 					_: 1
 				})]),
 				_: 1
-			}, 8, ["class"]), u(y(E), null, {
-				default: b(() => [u(y(x), {
-					class: p(V.value),
-					position: "popper",
-					"side-offset": 4
+			}, 8, ["class"]), d(b(k), null, {
+				default: x(() => [d(b(S), {
+					class: m(q.value),
+					position: "item-aligned"
 				}, {
-					default: b(() => [u(y(A), { class: p(H.value) }, {
-						default: b(() => [_(n.$slots, "default", {}, () => [(h(!0), c(a, null, g(I.value, (e) => (h(), s(y(C), {
+					default: x(() => [d(b(N), { class: m(J.value) }, {
+						default: x(() => [v(n.$slots, "default", {}, () => [V.value ? (g(!0), l(a, { key: 0 }, _(V.value, (e, n) => (g(), s(b(C), {
+							key: e.label || n,
+							class: m(Z.value)
+						}, {
+							default: x(() => [e.label ? (g(), s(b(O), {
+								key: 0,
+								class: m(Q.value)
+							}, {
+								default: x(() => [u(y(e.label), 1)]),
+								_: 2
+							}, 1032, ["class"])) : c("", !0), (g(!0), l(a, null, _(e.options, (e) => (g(), s(b(T), {
+								key: e.value,
+								value: e.value,
+								disabled: e.disabled,
+								class: m(Y.value)
+							}, {
+								default: x(() => [d(b(E), { class: m(X.value) }, {
+									default: x(() => [d(r, { icon: b(t) }, null, 8, ["icon"])]),
+									_: 1
+								}, 8, ["class"]), d(b(D), null, {
+									default: x(() => [u(y(e.label), 1)]),
+									_: 2
+								}, 1024)]),
+								_: 2
+							}, 1032, [
+								"value",
+								"disabled",
+								"class"
+							]))), 128))]),
+							_: 2
+						}, 1032, ["class"]))), 128)) : (g(!0), l(a, { key: 1 }, _(H.value, (e) => (g(), s(b(T), {
 							key: e.value,
 							value: e.value,
 							disabled: e.disabled,
-							class: p(U.value)
+							class: m(Y.value)
 						}, {
-							default: b(() => [u(y(w), { class: p(W.value) }, {
-								default: b(() => [u(r, { icon: y(t) }, null, 8, ["icon"])]),
+							default: x(() => [d(b(E), { class: m(X.value) }, {
+								default: x(() => [d(r, { icon: b(t) }, null, 8, ["icon"])]),
 								_: 1
-							}, 8, ["class"]), u(y(T), null, {
-								default: b(() => [l(v(e.label), 1)]),
+							}, 8, ["class"]), d(b(D), null, {
+								default: x(() => [u(y(e.label), 1)]),
 								_: 2
 							}, 1024)]),
 							_: 2
@@ -82,4 +127,4 @@ var M = /*@__PURE__*/ d({
 	}
 });
 //#endregion
-export { M as default };
+export { F as default };

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

@@ -7,30 +7,31 @@ import a from "./Button.js";
 import o from "./ButtonGroup.js";
 import s from "./Card.js";
 import c from "./Checkbox.js";
-import l from "./Dialog.js";
-import u from "./ConfirmDialog.js";
-import d from "./DropdownMenu.js";
-import f from "./EmptyState.js";
-import p from "./Form.js";
-import m from "./Label.js";
-import h from "./FormField.js";
-import g from "./Input.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";
+import l from "./Combobox.js";
+import u from "./Dialog.js";
+import d from "./ConfirmDialog.js";
+import f from "./DropdownMenu.js";
+import p from "./EmptyState.js";
+import m from "./Form.js";
+import h from "./Label.js";
+import g from "./FormField.js";
+import _ from "./Input.js";
+import v from "./NumberInput.js";
+import y from "./Pagination.js";
+import b from "./Progress.js";
+import x from "./RadioGroup.js";
+import S from "./Select.js";
+import C from "./Separator.js";
+import w from "./Skeleton.js";
+import T from "./Stat.js";
+import E from "./Stepper.js";
+import D from "./Switch.js";
+import O from "./Tabs.js";
+import k from "./Textarea.js";
+import A from "./Toaster.js";
+import j from "./Tooltip.js";
 //#region src/components/index.ts
-var j = /* @__PURE__ */ e({
+var M = /* @__PURE__ */ e({
 	Alert: () => t,
 	App: () => n,
 	Badge: () => r,
@@ -39,28 +40,29 @@ var j = /* @__PURE__ */ e({
 	ButtonGroup: () => o,
 	Card: () => s,
 	Checkbox: () => c,
-	ConfirmDialog: () => u,
-	Dialog: () => l,
-	DropdownMenu: () => d,
-	EmptyState: () => f,
-	Form: () => p,
-	FormField: () => h,
-	Input: () => g,
-	Label: () => m,
-	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
+	Combobox: () => l,
+	ConfirmDialog: () => d,
+	Dialog: () => u,
+	DropdownMenu: () => f,
+	EmptyState: () => p,
+	Form: () => m,
+	FormField: () => g,
+	Input: () => _,
+	Label: () => h,
+	NumberInput: () => v,
+	Pagination: () => y,
+	Progress: () => b,
+	RadioGroup: () => x,
+	Select: () => S,
+	Separator: () => C,
+	Skeleton: () => w,
+	Stat: () => T,
+	Stepper: () => E,
+	Switch: () => D,
+	Tabs: () => O,
+	Textarea: () => k,
+	Toaster: () => A,
+	Tooltip: () => j
 });
 //#endregion
-export { j as components_exports };
+export { M as components_exports };

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

@@ -2,12 +2,12 @@ import { tv as e } from "tailwind-variants";
 //#region src/theme/alert.ts
 var t = e({
 	slots: {
-		root: "flex w-full gap-3 rounded-lg border p-4",
+		root: "flex w-full gap-3 rounded-xl border p-4",
 		icon: "mt-0.5 shrink-0 [&_svg]:size-5",
 		content: "min-w-0 flex-1",
 		title: "text-sm font-medium",
 		description: "text-sm opacity-90",
-		close: "-m-1 shrink-0 self-start rounded-md p-1 opacity-70 transition-opacity outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current/50 [&_svg]:size-4"
+		close: "-m-1 shrink-0 self-start rounded-lg p-1 opacity-70 transition-opacity outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current/50 [&_svg]:size-4"
 	},
 	variants: {
 		variant: {

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

@@ -1,11 +1,11 @@
 import { tv as e } from "tailwind-variants";
 //#region src/theme/button.ts
 var t = e({
-	base: "inline-flex shrink-0 items-center justify-center gap-2 rounded-lg border border-transparent font-medium transition-[color,background-color,border-color,box-shadow,opacity,filter,translate] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	base: "inline-flex shrink-0 items-center justify-center gap-2 rounded-xl border border-transparent font-medium transition-[color,background-color,border-color,box-shadow,opacity,filter,translate] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 	variants: {
 		variant: {
 			solid: "bg-linear-to-b from-primary-from to-primary-to text-primary-foreground hover:brightness-110 active:brightness-95",
-			outline: "border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
+			outline: "border-border bg-input text-foreground hover:bg-accent hover:text-accent-foreground",
 			ghost: "text-foreground hover:bg-accent hover:text-accent-foreground",
 			link: "text-primary underline-offset-4 hover:underline active:translate-y-0"
 		},

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

@@ -2,7 +2,7 @@ import { tv as e } from "tailwind-variants";
 //#region src/theme/card.ts
 var t = e({
 	slots: {
-		root: "rounded-xl text-foreground",
+		root: "rounded-2xl text-foreground",
 		header: "flex flex-col gap-1",
 		title: "text-base leading-none font-semibold",
 		description: "text-sm text-muted-foreground",

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

@@ -3,7 +3,7 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		wrapper: "flex items-start gap-2.5",
-		root: "peer flex shrink-0 cursor-pointer items-center justify-center rounded border border-border bg-background text-primary-foreground transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary",
+		root: "peer flex shrink-0 cursor-pointer items-center justify-center rounded border border-border bg-background text-primary-foreground transition-colors outline-none focus:ring-2 focus:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary",
 		indicator: "flex items-center justify-center text-current",
 		content: "grid gap-1",
 		label: "text-sm leading-5 font-medium text-foreground select-none",

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

@@ -0,0 +1,29 @@
+import { fieldBase as e } from "./input.js";
+import { tv as t } from "tailwind-variants";
+//#region src/theme/combobox.ts
+var n = t({
+	slots: {
+		anchor: `flex items-center gap-2 ${e} focus-within:ring-2 focus-within:ring-primary/50`,
+		input: "min-w-0 grow bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+		trigger: "flex shrink-0 cursor-pointer items-center text-muted-foreground disabled:cursor-not-allowed [&_svg]:size-4",
+		content: "z-50 max-h-64 w-(--reka-combobox-trigger-width) min-w-32 overflow-hidden rounded-xl border border-border bg-background text-foreground shadow-md",
+		viewport: "max-h-64 overflow-y-auto p-1",
+		item: "relative flex w-full cursor-pointer items-center rounded-lg py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+		itemIndicator: "absolute left-2 flex items-center justify-center text-primary [&_svg]:size-4",
+		empty: "px-2 py-6 text-center text-sm text-muted-foreground",
+		group: "[[role=group]:not([hidden])~&]:mt-1",
+		groupLabel: "px-2 py-1.5 text-xs font-medium text-muted-foreground"
+	},
+	variants: {
+		size: {
+			sm: { anchor: "h-8 px-2.5 text-sm" },
+			md: { anchor: "h-9 px-3 text-sm" },
+			lg: { anchor: "h-10 px-4 text-base" }
+		},
+		invalid: { true: { anchor: "border-red-500 focus-within:ring-red-500/40" } },
+		disabled: { true: { anchor: "cursor-not-allowed opacity-50" } }
+	},
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { n as comboboxTheme };

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

@@ -3,13 +3,13 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		overlay: "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in",
-		content: "fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-xl border border-border bg-background p-6 text-foreground shadow-lg outline-none data-[state=closed]:animate-dialog-out data-[state=open]:animate-dialog-in",
+		content: "fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-2xl border border-border bg-background p-6 text-foreground shadow-lg outline-none data-[state=closed]:animate-dialog-out data-[state=open]:animate-dialog-in",
 		header: "flex flex-col gap-1",
 		title: "text-base leading-none font-semibold",
 		description: "text-sm text-muted-foreground",
 		body: "-m-1 min-h-0 flex-1 overflow-y-auto p-1",
 		footer: "flex flex-wrap items-center justify-end gap-2",
-		close: "absolute top-4 right-4 rounded-md p-1 text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4"
+		close: "absolute top-4 right-4 rounded-lg p-1 text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4"
 	},
 	variants: { size: {
 		sm: { content: "sm:max-w-sm" },

package/dist/packages/iryx-ui/src/theme/dropdown-menu.js

@@ -2,12 +2,12 @@ import { tv as e } from "tailwind-variants";
 //#region src/theme/dropdown-menu.ts
 var t = e({
 	slots: {
-		content: "z-50 min-w-40 overflow-hidden rounded-lg border border-border bg-background p-1 text-foreground shadow-lg outline-none data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in",
-		item: "flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0",
+		content: "z-50 min-w-40 overflow-hidden rounded-xl border border-border bg-background p-1 text-foreground shadow-lg outline-none data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in",
+		item: "flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0",
 		label: "px-2 py-1.5 text-xs font-medium text-muted-foreground",
 		separator: "-mx-1 my-1 h-px bg-border",
-		subTrigger: "flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0",
-		subContent: "z-50 min-w-40 overflow-hidden rounded-lg border border-border bg-background p-1 text-foreground shadow-lg outline-none data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in",
+		subTrigger: "flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0",
+		subContent: "z-50 min-w-40 overflow-hidden rounded-xl border border-border bg-background p-1 text-foreground shadow-lg outline-none data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in",
 		subTriggerIcon: "ml-auto"
 	},
 	variants: { danger: { true: { item: "text-danger data-[highlighted]:bg-danger-muted data-[highlighted]:text-danger-muted-foreground" } } }

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

@@ -1,6 +1,6 @@
 import { tv as e } from "tailwind-variants";
 //#region src/theme/input.ts
-var t = "w-full rounded-lg border border-border bg-background text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50", n = e({
+var t = "w-full rounded-xl border border-border bg-input text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50", n = e({
 	base: `flex ${t}`,
 	variants: {
 		size: {

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

@@ -5,7 +5,7 @@ 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",
+		stepper: "absolute inset-y-px end-px flex flex-col justify-center overflow-hidden rounded-e-xl 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: {