iryx-ui 0.2.0 → 0.3.0

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

@@ -0,0 +1,115 @@
+import { Alert02Icon as e, AlertCircleIcon as t, Cancel01Icon as n, CheckmarkCircle02Icon as r, InformationCircleIcon as i } from "../../../../node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js";
+import { useIryxUiConfig as a } from "../config.js";
+import o from "./Icon.js";
+import { useToast as s, useToastState as c } from "../composables/toast.js";
+import { toastTheme as l } from "../theme/toast.js";
+import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, normalizeClass as y, openBlock as b, renderList as x, toDisplayString as S, unref as C, withCtx as w } from "vue";
+import { ToastAction as T, ToastClose as E, ToastDescription as D, ToastPortal as O, ToastProvider as k, ToastRoot as A, ToastTitle as j, ToastViewport as M } from "reka-ui";
+//#region src/components/Toaster.vue?vue&type=script&setup=true&lang.ts
+var N = /*@__PURE__*/ v({
+	__name: "Toaster",
+	props: {
+		position: {},
+		duration: { default: 5e3 },
+		closeLabel: { default: "Close" },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	setup(v) {
+		let N = v, P = c(), { dismiss: F } = s(), I = {
+			success: r,
+			warning: e,
+			danger: t,
+			info: i
+		};
+		function L(e) {
+			return e.variant && e.variant !== "neutral" ? I[e.variant] : void 0;
+		}
+		function R(e) {
+			let t = e.duration ?? N.duration;
+			return t === 0 ? Infinity : t;
+		}
+		let z = a(), B = d(() => N.unstyled ?? z.unstyled);
+		function V(e) {
+			return l({
+				variant: e.variant,
+				position: N.position,
+				withTitle: !!e.title
+			});
+		}
+		let H = d(() => {
+			let e = l({ position: N.position });
+			return B.value ? [N.ui?.viewport, N.class] : e.viewport({ class: [N.ui?.viewport, N.class] });
+		});
+		function U(e, t) {
+			let n = N.ui?.[t];
+			return B.value ? n : V(e)[t]({ class: n });
+		}
+		function W(e) {
+			e.action?.onClick(), F(e.id);
+		}
+		return (e, t) => (b(), f(C(k), null, {
+			default: w(() => [(b(!0), m(u, null, x(C(P), (e) => (b(), f(C(A), {
+				key: e.id,
+				duration: R(e),
+				class: y(U(e, "root")),
+				"onUpdate:open": (t) => !t && C(F)(e.id)
+			}, {
+				default: w(() => [
+					L(e) ? (b(), m("div", {
+						key: 0,
+						class: y(U(e, "icon"))
+					}, [_(o, { icon: L(e) }, null, 8, ["icon"])], 2)) : p("", !0),
+					h("div", { class: y(U(e, "content")) }, [e.title ? (b(), f(C(j), {
+						key: 0,
+						class: y(U(e, "title"))
+					}, {
+						default: w(() => [g(S(e.title), 1)]),
+						_: 2
+					}, 1032, ["class"])) : p("", !0), e.description ? (b(), f(C(D), {
+						key: 1,
+						class: y(U(e, "description"))
+					}, {
+						default: w(() => [g(S(e.description), 1)]),
+						_: 2
+					}, 1032, ["class"])) : p("", !0)], 2),
+					e.action ? (b(), f(C(T), {
+						key: 1,
+						"alt-text": e.action.label,
+						class: y(U(e, "action")),
+						onClick: (t) => W(e)
+					}, {
+						default: w(() => [g(S(e.action.label), 1)]),
+						_: 2
+					}, 1032, [
+						"alt-text",
+						"class",
+						"onClick"
+					])) : p("", !0),
+					_(C(E), {
+						"aria-label": N.closeLabel,
+						class: y(U(e, "close"))
+					}, {
+						default: w(() => [_(o, { icon: C(n) }, null, 8, ["icon"])]),
+						_: 1
+					}, 8, ["aria-label", "class"])
+				]),
+				_: 2
+			}, 1032, [
+				"duration",
+				"class",
+				"onUpdate:open"
+			]))), 128)), _(C(O), null, {
+				default: w(() => [_(C(M), { class: y(H.value) }, null, 8, ["class"])]),
+				_: 1
+			})]),
+			_: 1
+		}));
+	}
+});
+//#endregion
+export { N as default };

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

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

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

@@ -0,0 +1,70 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { tooltipTheme as t } from "../theme/tooltip.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, mergeModels as c, normalizeClass as l, openBlock as u, renderSlot as d, toDisplayString as f, unref as p, useModel as m, withCtx as h } from "vue";
+import { TooltipArrow as g, TooltipContent as _, TooltipPortal as v, TooltipProvider as y, TooltipRoot as b, TooltipTrigger as x } from "reka-ui";
+//#region src/components/Tooltip.vue?vue&type=script&setup=true&lang.ts
+var S = /*@__PURE__*/ s({
+	__name: "Tooltip",
+	props: /*@__PURE__*/ c({
+		text: {},
+		side: { default: "top" },
+		align: {},
+		sideOffset: { default: 6 },
+		delay: { default: 300 },
+		arrow: { type: Boolean },
+		disabled: { type: Boolean },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	}, {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		openModifiers: {}
+	}),
+	emits: ["update:open"],
+	setup(s) {
+		let c = s, S = m(s, "open"), C = e(), w = n(() => c.unstyled ?? C.unstyled), T = n(() => t()), E = n(() => w.value ? [c.ui?.content, c.class] : T.value.content({ class: [c.ui?.content, c.class] })), D = n(() => w.value ? c.ui?.arrow : T.value.arrow({ class: c.ui?.arrow }));
+		return (e, t) => (u(), r(p(y), { "delay-duration": c.delay }, {
+			default: h(() => [o(p(b), {
+				open: S.value,
+				"onUpdate:open": t[0] ||= (e) => S.value = e,
+				disabled: c.disabled
+			}, {
+				default: h(() => [o(p(x), { "as-child": "" }, {
+					default: h(() => [d(e.$slots, "trigger")]),
+					_: 3
+				}), o(p(v), null, {
+					default: h(() => [o(p(_), {
+						side: c.side,
+						align: c.align,
+						"side-offset": c.sideOffset,
+						class: l(E.value)
+					}, {
+						default: h(() => [d(e.$slots, "content", {}, () => [a(f(c.text), 1)]), c.arrow ? (u(), r(p(g), {
+							key: 0,
+							class: l(D.value),
+							width: 10,
+							height: 5
+						}, null, 8, ["class"])) : i("", !0)]),
+						_: 3
+					}, 8, [
+						"side",
+						"align",
+						"side-offset",
+						"class"
+					])]),
+					_: 3
+				})]),
+				_: 3
+			}, 8, ["open", "disabled"])]),
+			_: 3
+		}, 8, ["delay-duration"]));
+	}
+});
+//#endregion
+export { S as default };

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

@@ -0,0 +1,64 @@
+import { __exportAll as e } from "../../../../_virtual/_rolldown/runtime.js";
+import t from "./Alert.js";
+import n from "./App.js";
+import r from "./Badge.js";
+import i from "./Breadcrumb.js";
+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 "./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";
+//#region src/components/index.ts
+var A = /* @__PURE__ */ e({
+	Alert: () => t,
+	App: () => n,
+	Badge: () => r,
+	Breadcrumb: () => i,
+	Button: () => a,
+	ButtonGroup: () => o,
+	Card: () => s,
+	Checkbox: () => c,
+	ConfirmDialog: () => u,
+	Dialog: () => l,
+	DropdownMenu: () => d,
+	EmptyState: () => f,
+	Form: () => p,
+	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
+});
+//#endregion
+export { A as components_exports };

package/dist/{composables → packages/iryx-ui/src/composables}/appearance.js

@@ -4,7 +4,11 @@ var r = "iryx-ui:appearance", i = t("system"), a = t(!1), o = !1;
 function s() {
 	return i.value === "dark" || i.value === "system" && a.value;
 }
-function c() {
+function c(e) {
+	let t = document.createElement("style");
+	t.textContent = "*,*::before,*::after{transition:none !important;animation:none !important}", document.head.appendChild(t), document.documentElement.classList.toggle("dark", e), document.body?.offsetHeight, requestAnimationFrame(() => t.remove());
+}
+function l() {
 	if (o || typeof window > "u") return;
 	o = !0;
 	let e = window.localStorage.getItem(r);
@@ -15,16 +19,16 @@ function c() {
 		});
 	}
 	n(() => {
-		document.documentElement.classList.toggle("dark", s()), window.localStorage.setItem(r, i.value);
+		c(s()), window.localStorage.setItem(r, i.value);
 	});
 }
-function l(e) {
+function u(e) {
 	if (typeof window > "u") return;
 	let t = window.localStorage.getItem(r) !== null;
-	c(), t || (i.value = e);
+	l(), t || (i.value = e);
 }
-function u() {
-	return c(), {
+function d() {
+	return l(), {
 		appearance: i,
 		isDark: e(() => s()),
 		setAppearance: (e) => {
@@ -36,4 +40,4 @@ function u() {
 	};
 }
 //#endregion
-export { l as initAppearance, u as useAppearance };
+export { u as initAppearance, d as useAppearance };

package/dist/packages/iryx-ui/src/composables/button-group.js

@@ -0,0 +1,8 @@
+import { inject as e } from "vue";
+//#region src/composables/button-group.ts
+var t = Symbol.for("iryx-ui:button-group");
+function n() {
+	return e(t, void 0);
+}
+//#endregion
+export { t as buttonGroupContextKey, n as useButtonGroup };

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

@@ -0,0 +1,25 @@
+import { shallowRef as e } from "vue";
+//#region src/composables/confirm.ts
+var t = e(null), n = 0;
+function r() {
+	return t;
+}
+function i(e) {
+	let n = t.value;
+	n && (t.value = null, n.resolve(e));
+}
+function a() {
+	function e(e) {
+		let r = typeof e == "string" ? { title: e } : e;
+		return i(!1), new Promise((e) => {
+			t.value = {
+				...r,
+				id: n++,
+				resolve: e
+			};
+		});
+	}
+	return { confirm: e };
+}
+//#endregion
+export { i as resolveConfirm, a as useConfirm, r as useConfirmState };

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

@@ -0,0 +1,9 @@
+//#region src/composables/dropdown-menu.ts
+function e(e) {
+	return e === "-";
+}
+function t(e) {
+	return Array.isArray(e.items) && e.items.length > 0;
+}
+//#endregion
+export { e as isSeparator, t as isSubmenu };

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

@@ -0,0 +1,6 @@
+//#region src/composables/icon.ts
+function e(e) {
+	return Array.isArray(e);
+}
+//#endregion
+export { e as isIconArray };

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

@@ -0,0 +1,38 @@
+import { shallowRef as e } from "vue";
+//#region src/composables/toast.ts
+var t = e([]), n = 0;
+function r() {
+	return t;
+}
+function i(e) {
+	return typeof e == "string" ? { title: e } : e;
+}
+function a() {
+	function e(e) {
+		let r = n++;
+		return t.value = [...t.value, {
+			...i(e),
+			id: r
+		}], r;
+	}
+	function r(t) {
+		return (n) => e({
+			...i(n),
+			variant: t
+		});
+	}
+	function a(e) {
+		t.value = t.value.filter((t) => t.id !== e);
+	}
+	return {
+		toast: e,
+		success: r("success"),
+		warning: r("warning"),
+		danger: r("danger"),
+		info: r("info"),
+		dismiss: a,
+		clear: () => t.value = []
+	};
+}
+//#endregion
+export { a as useToast, r as useToastState };

package/dist/{theme → packages/iryx-ui/src/theme}/badge.js

@@ -19,15 +19,15 @@ var t = e({
 		},
 		size: {
 			sm: {
-				root: "h-5 gap-1 px-2 text-xs [&_svg]:size-3",
+				root: "h-5 gap-1 px-2 text-xs has-[[data-icon=inline-end]]:pr-1.5 has-[[data-icon=inline-start]]:pl-1.5 [&_svg]:size-3",
 				dot: "size-1.5"
 			},
 			md: {
-				root: "h-6 gap-1.5 px-2.5 text-xs [&_svg]:size-3.5",
+				root: "h-6 gap-1.5 px-2.5 text-xs has-[[data-icon=inline-end]]:pr-2 has-[[data-icon=inline-start]]:pl-2 [&_svg]:size-3.5",
 				dot: "size-2"
 			},
 			lg: {
-				root: "h-7 gap-1.5 px-3 text-sm [&_svg]:size-4",
+				root: "h-7 gap-1.5 px-3 text-sm has-[[data-icon=inline-end]]:pr-2.5 has-[[data-icon=inline-start]]:pl-2.5 [&_svg]:size-4",
 				dot: "size-2"
 			}
 		}

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

@@ -0,0 +1,12 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/breadcrumb.ts
+var t = e({ slots: {
+	root: "text-sm",
+	list: "flex flex-wrap items-center gap-1.5",
+	item: "inline-flex items-center gap-1.5",
+	link: "inline-flex items-center gap-1.5 rounded text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4 [&_svg]:shrink-0",
+	current: "inline-flex items-center gap-1.5 font-medium text-foreground [&_svg]:size-4 [&_svg]:shrink-0",
+	separator: "text-muted-foreground [&_svg]:size-3.5"
+} });
+//#endregion
+export { t as breadcrumbTheme };

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

@@ -0,0 +1,15 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/button-group.ts
+var t = e({
+	base: "isolate inline-flex [&>*]:relative [&>*:focus-visible]:z-10 [&>*:hover]:z-10",
+	variants: {
+		orientation: {
+			horizontal: "[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none",
+			vertical: "flex-col [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none"
+		},
+		block: { true: "flex w-full [&>*]:flex-1" }
+	},
+	defaultVariants: { orientation: "horizontal" }
+});
+//#endregion
+export { t as buttonGroupTheme };

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

@@ -0,0 +1,59 @@
+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",
+	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",
+			ghost: "text-foreground hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline active:translate-y-0"
+		},
+		size: {
+			xs: "h-7 gap-1.5 px-2 text-xs has-[[data-icon=inline-end]]:pr-1.5 has-[[data-icon=inline-start]]:pl-1.5 [&_svg]:size-3.5",
+			sm: "h-8 px-3 text-sm has-[[data-icon=inline-end]]:pr-2 has-[[data-icon=inline-start]]:pl-2 [&_svg]:size-4",
+			md: "h-9 px-4 text-sm has-[[data-icon=inline-end]]:pr-3 has-[[data-icon=inline-start]]:pl-3 [&_svg]:size-4",
+			lg: "h-10 px-5 text-base has-[[data-icon=inline-end]]:pr-4 has-[[data-icon=inline-start]]:pl-4 [&_svg]:size-5",
+			xl: "h-12 px-6 text-base has-[[data-icon=inline-end]]:pr-5 has-[[data-icon=inline-start]]:pl-5 [&_svg]:size-5"
+		},
+		square: {
+			true: "",
+			false: ""
+		},
+		block: { true: "w-full" }
+	},
+	compoundVariants: [
+		{
+			square: !0,
+			size: "xs",
+			class: "w-7 px-0 has-[[data-icon]]:px-0"
+		},
+		{
+			square: !0,
+			size: "sm",
+			class: "w-8 px-0 has-[[data-icon]]:px-0"
+		},
+		{
+			square: !0,
+			size: "md",
+			class: "w-9 px-0 has-[[data-icon]]:px-0"
+		},
+		{
+			square: !0,
+			size: "lg",
+			class: "w-10 px-0 has-[[data-icon]]:px-0"
+		},
+		{
+			square: !0,
+			size: "xl",
+			class: "w-12 px-0 has-[[data-icon]]:px-0"
+		}
+	],
+	defaultVariants: {
+		variant: "solid",
+		size: "md",
+		square: !1
+	}
+});
+//#endregion
+export { t as buttonTheme };

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

@@ -0,0 +1,23 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/dialog.ts
+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",
+		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"
+	},
+	variants: { size: {
+		sm: { content: "sm:max-w-sm" },
+		md: { content: "sm:max-w-md" },
+		lg: { content: "sm:max-w-lg" },
+		xl: { content: "sm:max-w-2xl" }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { t as dialogTheme };

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

@@ -0,0 +1,16 @@
+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",
+		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",
+		subTriggerIcon: "ml-auto"
+	},
+	variants: { danger: { true: { item: "text-danger data-[highlighted]:bg-danger-muted data-[highlighted]:text-danger-muted-foreground" } } }
+});
+//#endregion
+export { t as dropdownMenuTheme };

package/dist/packages/iryx-ui/src/theme/empty-state.js

@@ -0,0 +1,34 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/empty-state.ts
+var t = e({
+	slots: {
+		root: "flex flex-col items-center justify-center text-center",
+		icon: "text-muted-foreground",
+		title: "font-medium text-foreground",
+		description: "max-w-sm text-sm text-muted-foreground",
+		actions: "flex flex-wrap items-center justify-center gap-2"
+	},
+	variants: { size: {
+		sm: {
+			root: "gap-1.5 px-4 py-8",
+			icon: "[&_svg]:size-8",
+			title: "text-sm",
+			actions: "mt-2"
+		},
+		md: {
+			root: "gap-2 px-6 py-12",
+			icon: "[&_svg]:size-10",
+			title: "text-base",
+			actions: "mt-4"
+		},
+		lg: {
+			root: "gap-2.5 px-8 py-16",
+			icon: "[&_svg]:size-12",
+			title: "text-lg",
+			actions: "mt-6"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { t as emptyStateTheme };

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

@@ -0,0 +1,38 @@
+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" }
+});
+//#endregion
+export { t as formFieldTheme };

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

@@ -2,7 +2,16 @@ 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-['*']" } }
+	variants: {
+		required: { true: "after:text-red-500 after:content-['*']" },
+		indent: {
+			none: "",
+			sm: "ps-2.5",
+			md: "ps-3",
+			lg: "ps-4"
+		}
+	},
+	defaultVariants: { indent: "md" }
 });
 //#endregion
 export { t as labelTheme };

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

@@ -0,0 +1,29 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/pagination.ts
+var t = e({
+	slots: {
+		root: "flex items-center gap-2",
+		list: "flex items-center gap-1",
+		item: "inline-flex items-center justify-center rounded-lg border border-transparent text-sm font-medium transition-[color,background-color,border-color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4",
+		active: "bg-linear-to-b from-primary-from to-primary-to text-primary-foreground hover:brightness-110",
+		inactive: "text-foreground hover:bg-accent hover:text-accent-foreground",
+		ellipsis: "inline-flex items-center justify-center text-sm text-muted-foreground"
+	},
+	variants: { size: {
+		sm: {
+			item: "h-8 min-w-8 px-2",
+			ellipsis: "h-8 min-w-8"
+		},
+		md: {
+			item: "h-9 min-w-9 px-2.5",
+			ellipsis: "h-9 min-w-9"
+		},
+		lg: {
+			item: "h-10 min-w-10 px-3",
+			ellipsis: "h-10 min-w-10"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { t as paginationTheme };