iryx-ui 0.6.0 → 0.7.0

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

@@ -1,19 +1,23 @@
-import { useIryxUiConfig as e } from "../config.js";
-import { useFormField as t } from "../composables/form.js";
-import { inputTheme as n } from "../theme/input.js";
-import { computed as r, createElementBlock as i, defineComponent as a, mergeModels as o, normalizeClass as s, openBlock as c, unref as l, useModel as u, vModelDynamic as d, withDirectives as f } from "vue";
+import { Cancel01Icon as e, Loading03Icon 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 { inputTheme as a } from "../theme/input.js";
+import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeModels as p, mergeProps as m, normalizeClass as h, onBeforeUnmount as g, openBlock as _, ref as v, renderSlot as y, unref as b, useModel as x, useSlots as S, watch as C, withKeys as w } from "vue";
 //#region src/components/Input.vue?vue&type=script&setup=true&lang.ts
-var p = [
+var T = [
 	"id",
+	"value",
 	"type",
 	"placeholder",
 	"disabled",
 	"required",
 	"aria-invalid",
 	"aria-describedby"
-], m = /*@__PURE__*/ a({
+], E = ["aria-label"], D = /*@__PURE__*/ f({
+	inheritAttrs: !1,
 	__name: "Input",
-	props: /*@__PURE__*/ o({
+	props: /*@__PURE__*/ p({
 		type: { default: "text" },
 		size: {},
 		placeholder: {},
@@ -24,34 +28,99 @@ var p = [
 			default: void 0
 		},
 		id: {},
+		clearable: { type: Boolean },
+		loading: { type: Boolean },
+		debounce: { default: 0 },
+		clearLabel: { default: "Clear" },
 		unstyled: {
 			type: Boolean,
 			default: void 0
 		},
-		class: {}
+		class: {},
+		ui: {}
 	}, {
 		modelValue: {},
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(a) {
-		let o = a, m = u(a, "modelValue"), h = t(), g = r(() => o.id ?? h?.id.value), _ = r(() => o.invalid ?? h?.invalid.value ?? !1), v = e(), y = r(() => o.unstyled ?? v.unstyled), b = r(() => y.value ? o.class : n({
-			size: o.size,
-			invalid: _.value,
-			class: o.class
+	setup(f, { expose: p }) {
+		let D = f, O = x(f, "modelValue"), k = S(), A = i(), j = o(() => D.id ?? A?.id.value), M = o(() => D.invalid ?? A?.invalid.value ?? !1), N = n(), P = o(() => D.unstyled ?? N.unstyled), F = v(O.value), I;
+		function L() {
+			I !== void 0 && (clearTimeout(I), I = void 0);
+		}
+		C(O, (e) => {
+			L(), F.value = e;
+		});
+		function R(e) {
+			let t = e.target.value;
+			if (F.value = t, L(), !D.debounce) {
+				O.value = t;
+				return;
+			}
+			I = setTimeout(() => {
+				I = void 0, O.value = t;
+			}, D.debounce);
+		}
+		function z() {
+			I !== void 0 && (L(), O.value = F.value);
+		}
+		g(L);
+		let B = v();
+		function V() {
+			L(), F.value = "", O.value = "", B.value?.focus();
+		}
+		p({ input: B });
+		let H = o(() => F.value !== "" && F.value != null), U = o(() => D.clearable && H.value && !D.disabled), W = o(() => D.loading || U.value || !!k.trailing), G = o(() => a({
+			size: D.size,
+			invalid: M.value
 		}));
-		return (e, t) => f((c(), i("input", {
-			id: g.value,
-			"onUpdate:modelValue": t[0] ||= (e) => m.value = e,
-			type: o.type,
-			placeholder: o.placeholder,
-			disabled: o.disabled,
-			required: o.required,
-			"aria-invalid": _.value || void 0,
-			"aria-describedby": l(h)?.describedBy.value,
-			class: s(b.value)
-		}, null, 10, p)), [[d, m.value]]);
+		function K(e, t) {
+			let n = D.ui?.[e];
+			return P.value ? [n, t] : G.value[e]({ class: [n, t] });
+		}
+		return (n, i) => (_(), l("div", { class: h(K("root", D.class)) }, [
+			b(k).leading ? (_(), l("span", {
+				key: 0,
+				class: h(K("leading"))
+			}, [y(n.$slots, "leading")], 2)) : c("", !0),
+			u("input", m({
+				id: j.value,
+				ref_key: "inputEl",
+				ref: B,
+				value: F.value,
+				type: D.type,
+				placeholder: D.placeholder,
+				disabled: D.disabled,
+				required: D.required,
+				"aria-invalid": M.value || void 0,
+				"aria-describedby": b(A)?.describedBy.value,
+				class: K("input")
+			}, n.$attrs, {
+				onInput: R,
+				onBlur: z,
+				onKeydown: w(z, ["enter"])
+			}), null, 16, T),
+			W.value ? (_(), l("span", {
+				key: 1,
+				class: h(K("trailing"))
+			}, [
+				y(n.$slots, "trailing"),
+				U.value ? (_(), l("button", {
+					key: 0,
+					type: "button",
+					tabindex: "-1",
+					"aria-label": D.clearLabel,
+					class: h(K("clear")),
+					onClick: V
+				}, [d(r, { icon: b(e) }, null, 8, ["icon"])], 10, E)) : c("", !0),
+				D.loading ? (_(), s(r, {
+					key: 1,
+					icon: b(t),
+					class: "animate-spin"
+				}, null, 8, ["icon"])) : c("", !0)
+			], 2)) : c("", !0)
+		], 2));
 	}
 });
 //#endregion
-export { m as default };
+export { D as default };

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

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

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

@@ -0,0 +1,113 @@
+import { ViewIcon as e, ViewOffIcon 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 i from "./Input.js";
+import { passwordInputTheme as a } from "../theme/password-input.js";
+import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createSlots as d, createVNode as f, defineComponent as p, mergeModels as m, mergeProps as h, normalizeClass as g, openBlock as _, ref as v, renderList as y, toDisplayString as b, unref as x, useModel as S, withCtx as C } from "vue";
+//#region src/components/PasswordInput.vue?vue&type=script&setup=true&lang.ts
+var w = [
+	"aria-label",
+	"aria-pressed",
+	"disabled"
+], T = ["data-filled"], E = /*@__PURE__*/ p({
+	inheritAttrs: !1,
+	__name: "PasswordInput",
+	props: /*@__PURE__*/ m({
+		size: {},
+		placeholder: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		id: {},
+		toggle: {
+			type: Boolean,
+			default: !0
+		},
+		strength: { type: Boolean },
+		showLabel: { default: "Show password" },
+		hideLabel: { default: "Hide password" },
+		strengthLabels: { default: () => [
+			"Weak",
+			"Fair",
+			"Good",
+			"Strong"
+		] },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(p) {
+		let m = p, E = S(p, "modelValue"), D = n(), O = s(() => m.unstyled ?? D.unstyled), k = v(!1), A = s(() => {
+			let e = E.value;
+			if (!e) return 0;
+			let t = 0;
+			return e.length >= 8 && t++, e.length >= 12 && t++, /[a-z]/.test(e) && /[A-Z]/.test(e) && t++, /\d/.test(e) && t++, /[^\w\s]/.test(e) && t++, Math.max(1, Math.min(t, 4));
+		}), j = s(() => m.strength && E.value.length > 0), M = s(() => a({ score: A.value }));
+		function N(e, t) {
+			let n = m.ui?.[e];
+			return O.value ? [n, t] : M.value[e]({ class: [n, t] });
+		}
+		return (n, a) => (_(), l("div", { class: g(N("root", m.class)) }, [f(i, h({
+			id: m.id,
+			modelValue: E.value,
+			"onUpdate:modelValue": a[1] ||= (e) => E.value = e,
+			type: k.value ? "text" : "password",
+			size: m.size,
+			placeholder: m.placeholder,
+			disabled: m.disabled,
+			required: m.required,
+			invalid: m.invalid,
+			unstyled: m.unstyled,
+			ui: { input: m.ui?.input },
+			autocomplete: "current-password"
+		}, n.$attrs), d({ _: 2 }, [m.toggle ? {
+			name: "trailing",
+			fn: C(() => [u("button", {
+				type: "button",
+				tabindex: "-1",
+				"aria-label": k.value ? m.hideLabel : m.showLabel,
+				"aria-pressed": k.value,
+				disabled: m.disabled,
+				class: g(N("toggle")),
+				onClick: a[0] ||= (e) => k.value = !k.value
+			}, [f(r, { icon: k.value ? x(t) : x(e) }, null, 8, ["icon"])], 10, w)]),
+			key: "0"
+		} : void 0]), 1040, [
+			"id",
+			"modelValue",
+			"type",
+			"size",
+			"placeholder",
+			"disabled",
+			"required",
+			"invalid",
+			"unstyled",
+			"ui"
+		]), j.value ? (_(), l("div", {
+			key: 0,
+			class: g(N("meter"))
+		}, [u("div", {
+			class: g(N("track")),
+			"aria-hidden": "true"
+		}, [(_(), l(o, null, y(4, (e) => u("span", {
+			key: e,
+			"data-filled": e <= A.value ? "" : void 0,
+			class: g(N("segment"))
+		}, null, 10, T)), 64))], 2), u("span", {
+			class: g(N("label")),
+			role: "status"
+		}, b(m.strengthLabels[A.value - 1]), 3)], 2)) : c("", !0)], 2));
+	}
+});
+//#endregion
+export { E as default };

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

@@ -1,9 +1,9 @@
 import { useIryxUiConfig as e } from "../config.js";
 import { useFormField as t } from "../composables/form.js";
 import { textareaTheme as n } from "../theme/input.js";
-import { computed as r, createElementBlock as i, defineComponent as a, mergeModels as o, normalizeClass as s, openBlock as c, unref as l, useModel as u, vModelText as d, withDirectives as f } from "vue";
+import { computed as r, createElementBlock as i, defineComponent as a, mergeModels as o, nextTick as s, normalizeClass as c, onMounted as l, openBlock as u, ref as d, unref as f, useModel as p, vModelText as m, watch as h, withDirectives as g } from "vue";
 //#region src/components/Textarea.vue?vue&type=script&setup=true&lang.ts
-var p = [
+var _ = [
 	"id",
 	"rows",
 	"placeholder",
@@ -11,11 +11,12 @@ var p = [
 	"required",
 	"aria-invalid",
 	"aria-describedby"
-], m = /*@__PURE__*/ a({
+], v = /*@__PURE__*/ a({
 	__name: "Textarea",
 	props: /*@__PURE__*/ o({
 		size: {},
 		rows: {},
+		autosize: { type: [Boolean, Object] },
 		placeholder: {},
 		disabled: { type: Boolean },
 		required: { type: Boolean },
@@ -34,24 +35,49 @@ var p = [
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(a) {
-		let o = a, m = u(a, "modelValue"), h = t(), g = r(() => o.id ?? h?.id.value), _ = r(() => o.invalid ?? h?.invalid.value ?? !1), v = e(), y = r(() => o.unstyled ?? v.unstyled), b = r(() => y.value ? o.class : n({
-			size: o.size,
-			invalid: _.value,
-			class: o.class
-		}));
-		return (e, t) => f((c(), i("textarea", {
-			id: g.value,
-			"onUpdate:modelValue": t[0] ||= (e) => m.value = e,
-			rows: o.rows,
-			placeholder: o.placeholder,
-			disabled: o.disabled,
-			required: o.required,
-			"aria-invalid": _.value || void 0,
-			"aria-describedby": l(h)?.describedBy.value,
-			class: s(b.value)
-		}, null, 10, p)), [[d, m.value]]);
+	setup(a, { expose: o }) {
+		let v = a, y = p(a, "modelValue"), b = t(), x = r(() => v.id ?? b?.id.value), S = r(() => v.invalid ?? b?.invalid.value ?? !1), C = e(), w = r(() => v.unstyled ?? C.unstyled), T = r(() => w.value ? v.class : n({
+			size: v.size,
+			invalid: S.value,
+			autosize: !!v.autosize,
+			class: v.class
+		})), E = d();
+		o({ textarea: E });
+		let D = r(() => typeof v.autosize == "object" ? v.autosize : {});
+		function O(e) {
+			return Number.parseFloat(e) || 0;
+		}
+		function k() {
+			let e = E.value;
+			if (!e || !v.autosize) return;
+			e.style.height = "auto";
+			let t = window.getComputedStyle(e), n = O(t.lineHeight), r = O(t.paddingTop) + O(t.paddingBottom), i = O(t.borderTopWidth) + O(t.borderBottomWidth), a = e.scrollHeight;
+			if (n) {
+				let { min: e, max: t } = D.value;
+				e != null && (a = Math.max(a, e * n + r)), t != null && (a = Math.min(a, t * n + r));
+			}
+			e.style.height = `${a + i}px`, e.style.overflowY = D.value.max != null && e.scrollHeight > a ? "auto" : "hidden";
+		}
+		return l(() => {
+			v.autosize && s(k);
+		}), h(() => [
+			y.value,
+			v.autosize,
+			v.size
+		], () => void s(k)), (e, t) => g((u(), i("textarea", {
+			id: x.value,
+			ref_key: "el",
+			ref: E,
+			"onUpdate:modelValue": t[0] ||= (e) => y.value = e,
+			rows: v.autosize ? D.value.min : v.rows,
+			placeholder: v.placeholder,
+			disabled: v.disabled,
+			required: v.required,
+			"aria-invalid": S.value || void 0,
+			"aria-describedby": f(b)?.describedBy.value,
+			class: c(T.value)
+		}, null, 10, _)), [[m, y.value]]);
 	}
 });
 //#endregion
-export { m as default };
+export { v as default };

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

@@ -11,29 +11,32 @@ import l from "./Checkbox.js";
 import u from "./Combobox.js";
 import d from "./Dialog.js";
 import f from "./ConfirmDialog.js";
-import p from "./DropdownMenu.js";
-import m from "./EmptyState.js";
-import h from "./Form.js";
-import g from "./Label.js";
-import _ from "./FormField.js";
-import v from "./Input.js";
-import y from "./NumberInput.js";
-import b from "./Pagination.js";
-import x from "./Progress.js";
-import S from "./RadioGroup.js";
-import C from "./Select.js";
-import w from "./Separator.js";
-import T from "./Skeleton.js";
-import E from "./Stat.js";
-import D from "./Stepper.js";
-import O from "./Switch.js";
-import k from "./Table.js";
-import A from "./Tabs.js";
-import j from "./Textarea.js";
-import M from "./Toaster.js";
-import N from "./Tooltip.js";
+import p from "./DatePicker.js";
+import m from "./DateRangePicker.js";
+import h from "./DropdownMenu.js";
+import g from "./EmptyState.js";
+import _ from "./Form.js";
+import v from "./Label.js";
+import y from "./FormField.js";
+import b from "./Input.js";
+import x from "./NumberInput.js";
+import S from "./Pagination.js";
+import C from "./PasswordInput.js";
+import w from "./Progress.js";
+import T from "./RadioGroup.js";
+import E from "./Select.js";
+import D from "./Separator.js";
+import O from "./Skeleton.js";
+import k from "./Stat.js";
+import A from "./Stepper.js";
+import j from "./Switch.js";
+import M from "./Table.js";
+import N from "./Tabs.js";
+import P from "./Textarea.js";
+import F from "./Toaster.js";
+import I from "./Tooltip.js";
 //#region src/components/index.ts
-var P = /* @__PURE__ */ e({
+var L = /* @__PURE__ */ e({
 	Alert: () => t,
 	App: () => n,
 	Badge: () => r,
@@ -45,28 +48,31 @@ var P = /* @__PURE__ */ e({
 	Checkbox: () => l,
 	Combobox: () => u,
 	ConfirmDialog: () => f,
+	DatePicker: () => p,
+	DateRangePicker: () => m,
 	Dialog: () => d,
-	DropdownMenu: () => p,
-	EmptyState: () => m,
-	Form: () => h,
-	FormField: () => _,
-	Input: () => v,
-	Label: () => g,
-	NumberInput: () => y,
-	Pagination: () => b,
-	Progress: () => x,
-	RadioGroup: () => S,
-	Select: () => C,
-	Separator: () => w,
-	Skeleton: () => T,
-	Stat: () => E,
-	Stepper: () => D,
-	Switch: () => O,
-	Table: () => k,
-	Tabs: () => A,
-	Textarea: () => j,
-	Toaster: () => M,
-	Tooltip: () => N
+	DropdownMenu: () => h,
+	EmptyState: () => g,
+	Form: () => _,
+	FormField: () => y,
+	Input: () => b,
+	Label: () => v,
+	NumberInput: () => x,
+	Pagination: () => S,
+	PasswordInput: () => C,
+	Progress: () => w,
+	RadioGroup: () => T,
+	Select: () => E,
+	Separator: () => D,
+	Skeleton: () => O,
+	Stat: () => k,
+	Stepper: () => A,
+	Switch: () => j,
+	Table: () => M,
+	Tabs: () => N,
+	Textarea: () => P,
+	Toaster: () => F,
+	Tooltip: () => I
 });
 //#endregion
-export { P as components_exports };
+export { L as components_exports };

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

@@ -0,0 +1,25 @@
+import { $ad063034c8620db8$export$aa8b41735afcabd2 as e, $ad063034c8620db8$export$d0bdf45af03a6ea3 as t } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/queries.js";
+import { $58246871e4652552$export$6b862160d295c8e as n } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/string.js";
+import "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/CalendarDate.js";
+import { $12a3c853105e5a70$export$ad991b66133851cf as r } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/DateFormatter.js";
+//#region src/composables/date.ts
+var i = /^\d{4}-\d{2}-\d{2}$/;
+function a(e) {
+	if (!(!e || !i.test(e))) try {
+		return n(e);
+	} catch {
+		return;
+	}
+}
+function o(e) {
+	return e ? `${e.year.toString().padStart(4, "0")}-${e.month.toString().padStart(2, "0")}-${e.day.toString().padStart(2, "0")}` : null;
+}
+function s() {
+	return o(t(e()));
+}
+function c(t, n, i = { dateStyle: "medium" }) {
+	let o = a(t);
+	return o ? new r(n ?? "en-US", i).format(o.toDate(e())) : "";
+}
+//#endregion
+export { c as formatIsoDate, s as isoToday, a as toCalendarDate, o as toIsoDate };

package/dist/packages/iryx-ui/src/theme/date-picker.js

@@ -0,0 +1,45 @@
+import { fieldBase as e } from "./input.js";
+import { tv as t } from "tailwind-variants";
+//#region src/theme/date-picker.ts
+var n = t({
+	slots: {
+		trigger: `flex items-center justify-between gap-2 ${e} cursor-pointer [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:opacity-60`,
+		placeholder: "text-muted-foreground",
+		content: "z-50 rounded-xl border border-border bg-background p-3 text-foreground shadow-md",
+		header: "flex items-center justify-between gap-2 pb-3",
+		heading: "text-sm font-medium",
+		nav: "flex size-7 items-center justify-center rounded-lg text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4",
+		months: "flex items-start gap-4",
+		grid: "w-full border-collapse select-none",
+		headCell: "pb-1 text-xs font-normal text-muted-foreground",
+		cell: "p-0 transition-colors",
+		cellTrigger: "flex h-8 w-full min-w-8 items-center justify-center rounded-lg text-sm transition-colors outline-none not-data-[selected]:hover:bg-accent not-data-[selected]:hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 data-[disabled]:pointer-events-none data-[disabled]:opacity-30 data-[outside-view]:text-muted-foreground/50 data-[today]:font-semibold data-[today]:text-primary data-[unavailable]:pointer-events-none data-[unavailable]:line-through data-[unavailable]:opacity-40",
+		footer: "flex items-center justify-between gap-2 pt-3",
+		action: "rounded-lg px-2 py-1 text-sm text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50"
+	},
+	variants: {
+		size: {
+			sm: { trigger: "h-8 px-2.5 text-sm" },
+			md: { trigger: "h-9 px-3 text-sm" },
+			lg: { trigger: "h-10 px-4 text-base" }
+		},
+		invalid: { true: { trigger: "border-red-500 focus-visible:ring-red-500/40" } },
+		range: {
+			false: { cellTrigger: "data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:data-[today]:text-primary-foreground" },
+			true: {
+				cell: [
+					"has-data-[selected]:bg-primary/15",
+					"has-data-[selection-start]:rounded-s-lg",
+					"has-data-[selection-end]:rounded-e-lg"
+				].join(" "),
+				cellTrigger: ["data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary", "data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary"].join(" ")
+			}
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		range: !1
+	}
+});
+//#endregion
+export { n as datePickerTheme };

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

@@ -1,14 +1,29 @@
 import { tv as e } from "tailwind-variants";
 //#region src/theme/input.ts
 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}`,
+	slots: {
+		root: `flex items-center ${t} focus-within:ring-2 focus-within:ring-primary/50 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50`,
+		input: "w-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+		leading: "flex shrink-0 items-center text-muted-foreground [&_svg]:size-4",
+		trailing: "flex shrink-0 items-center gap-1.5 text-muted-foreground [&_svg]:size-4",
+		clear: "flex items-center rounded-md text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-3.5"
+	},
 	variants: {
 		size: {
-			sm: "h-8 px-2.5 text-sm",
-			md: "h-9 px-3 text-sm",
-			lg: "h-10 px-4 text-base"
+			sm: {
+				root: "h-8 gap-1.5 px-2.5",
+				input: "text-sm"
+			},
+			md: {
+				root: "h-9 gap-2 px-3",
+				input: "text-sm"
+			},
+			lg: {
+				root: "h-10 gap-2 px-4",
+				input: "text-base"
+			}
 		},
-		invalid: { true: "border-red-500 focus-visible:ring-red-500/40" }
+		invalid: { true: { root: "border-red-500 focus-within:ring-red-500/40" } }
 	},
 	defaultVariants: { size: "md" }
 }), r = e({
@@ -19,7 +34,8 @@ var t = "w-full rounded-xl border border-border bg-input text-foreground transit
 			md: "min-h-20 px-3 py-2 text-sm",
 			lg: "min-h-24 px-4 py-2.5 text-base"
 		},
-		invalid: { true: "border-red-500 focus-visible:ring-red-500/40" }
+		invalid: { true: "border-red-500 focus-visible:ring-red-500/40" },
+		autosize: { true: "min-h-0 resize-none" }
 	},
 	defaultVariants: { size: "md" }
 });

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

@@ -0,0 +1,22 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/password-input.ts
+var t = e({
+	slots: {
+		root: "flex w-full flex-col gap-2",
+		toggle: "flex items-center rounded-md text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4",
+		meter: "flex items-center gap-2",
+		track: "flex h-1 flex-1 gap-1",
+		segment: "h-full flex-1 rounded-full bg-muted transition-colors",
+		label: "shrink-0 text-xs text-muted-foreground tabular-nums"
+	},
+	variants: { score: {
+		0: {},
+		1: { segment: "data-[filled]:bg-danger" },
+		2: { segment: "data-[filled]:bg-warning" },
+		3: { segment: "data-[filled]:bg-info" },
+		4: { segment: "data-[filled]:bg-success" }
+	} },
+	defaultVariants: { score: 0 }
+});
+//#endregion
+export { t as passwordInputTheme };