iryx-ui 0.24.1 → 0.26.0

package/dist/components/Tabs.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,13 @@
 import { useIryxUiConfig as e } from "../config.js";
 import t from "./Icon.js";
-import { tabsTheme as n } from "../theme/tabs.js";
-import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, openBlock as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, useModel as v, withCtx as y } from "vue";
-import { TabsContent as b, TabsIndicator as x, TabsList as S, TabsRoot as C, TabsTrigger as w } from "reka-ui";
+import { scrollFadeMask as n, useScrollEdges as r } from "../composables/scroll-fade.js";
+import { tabsTheme as i } from "../theme/tabs.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeModels as m, nextTick as h, normalizeClass as g, normalizeStyle as _, onMounted as v, openBlock as y, ref as b, renderList as x, renderSlot as S, toDisplayString as C, unref as w, useModel as T, watch as E, withCtx as D } from "vue";
+import { TabsContent as O, TabsIndicator as k, TabsList as A, TabsRoot as j, TabsTrigger as M } from "reka-ui";
 //#region src/components/Tabs.vue?vue&type=script&setup=true&lang.ts
-var T = /*@__PURE__*/ u({
+var N = 24, P = /*@__PURE__*/ p({
 	__name: "Tabs",
-	props: /*@__PURE__*/ d({
+	props: /*@__PURE__*/ m({
 		items: {},
 		variant: {},
 		orientation: {},
@@ -27,29 +28,57 @@ var T = /*@__PURE__*/ u({
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(u) {
-		let d = u, T = i(() => (d.items ?? []).map((e) => typeof e == "string" ? { label: e } : e)), E = (e) => e.value ?? e.label, D = v(u, "modelValue"), O = e(), k = i(() => d.unstyled ?? O.unstyled), A = i(() => n({
-			variant: d.variant,
-			orientation: d.orientation
-		})), j = i(() => k.value ? [d.ui?.root, d.class] : A.value.root({ class: [d.ui?.root, d.class] })), M = i(() => k.value ? d.ui?.list : A.value.list({ class: d.ui?.list })), N = i(() => k.value ? d.ui?.indicator : A.value.indicator({ class: d.ui?.indicator })), P = i(() => k.value ? d.ui?.trigger : A.value.trigger({ class: d.ui?.trigger })), F = i(() => k.value ? d.ui?.content : A.value.content({ class: d.ui?.content }));
-		return (e, n) => (p(), a(_(C), {
-			modelValue: D.value,
-			"onUpdate:modelValue": n[0] ||= (e) => D.value = e,
-			"default-value": T.value[0] ? E(T.value[0]) : void 0,
-			orientation: d.orientation,
-			class: f(j.value)
+	setup(p) {
+		let m = p, P = o(() => (m.items ?? []).map((e) => typeof e == "string" ? { label: e } : e)), F = (e) => e.value ?? e.label, I = T(p, "modelValue"), L = b(), R = o(() => L.value?.$el), z = o(() => m.orientation === "vertical" ? "vertical" : "horizontal"), { atStart: B, atEnd: V, overflowing: H } = r(R, z), U = o(() => {
+			if (!H.value) return;
+			let e = n({
+				orientation: z.value,
+				size: `${N}px`,
+				fadeStart: !B.value,
+				fadeEnd: !V.value
+			});
+			return e ? {
+				maskImage: e,
+				WebkitMaskImage: e
+			} : void 0;
+		});
+		function W() {
+			let e = R.value, t = e?.querySelector("[role=\"tab\"][data-state=\"active\"]");
+			if (!e || !t) return;
+			let n = z.value === "vertical", r = n ? t.offsetTop : t.offsetLeft, i = r + (n ? t.offsetHeight : t.offsetWidth), a = n ? e.scrollTop : e.scrollLeft, o = n ? e.clientHeight : e.clientWidth, s = a;
+			r < a + N ? s = r - N : i > a + o - N && (s = i - o + N), s !== a && (n ? e.scrollTop = Math.max(0, s) : e.scrollLeft = Math.max(0, s));
+		}
+		v(() => void h(W)), E(I, () => void h(W));
+		let G = e(), K = o(() => m.unstyled ?? G.unstyled), q = o(() => i({
+			variant: m.variant,
+			orientation: m.orientation
+		})), J = o(() => K.value ? [m.ui?.root, m.class] : q.value.root({ class: [m.ui?.root, m.class] })), Y = o(() => K.value ? m.ui?.frame : q.value.frame({ class: m.ui?.frame })), X = o(() => K.value ? m.ui?.list : q.value.list({ class: m.ui?.list })), Z = o(() => K.value ? m.ui?.indicator : q.value.indicator({ class: m.ui?.indicator })), Q = o(() => K.value ? m.ui?.trigger : q.value.trigger({ class: m.ui?.trigger })), $ = o(() => K.value ? m.ui?.content : q.value.content({ class: m.ui?.content }));
+		return (e, n) => (y(), s(w(j), {
+			modelValue: I.value,
+			"onUpdate:modelValue": n[0] ||= (e) => I.value = e,
+			"default-value": P.value[0] ? F(P.value[0]) : void 0,
+			orientation: m.orientation,
+			class: g(J.value)
 		}, {
-			default: y(() => [l(_(S), { class: f(M.value) }, {
-				default: y(() => [l(_(x), { class: f(N.value) }, null, 8, ["class"]), h(e.$slots, "list", {}, () => [(p(!0), s(r, null, m(T.value, (n) => (p(), a(_(w), {
-					key: E(n),
-					value: E(n),
+			default: D(() => [u("div", { class: g(Y.value) }, [f(w(A), {
+				ref_key: "list",
+				ref: L,
+				class: g(X.value),
+				style: _(U.value),
+				"data-overflowing": w(H) ? "" : void 0,
+				"data-at-start": w(B) ? "" : void 0,
+				"data-at-end": w(V) ? "" : void 0
+			}, {
+				default: D(() => [f(w(k), { class: g(Z.value) }, null, 8, ["class"]), S(e.$slots, "list", {}, () => [(y(!0), l(a, null, x(P.value, (n) => (y(), s(w(M), {
+					key: F(n),
+					value: F(n),
 					disabled: n.disabled,
-					class: f(P.value)
+					class: g(Q.value)
 				}, {
-					default: y(() => [h(e.$slots, "trigger", { item: n }, () => [n.icon ? (p(), a(t, {
+					default: D(() => [S(e.$slots, "trigger", { item: n }, () => [n.icon ? (y(), s(t, {
 						key: 0,
 						icon: n.icon
-					}, null, 8, ["icon"])) : o("", !0), c(" " + g(n.label), 1)])]),
+					}, null, 8, ["icon"])) : c("", !0), d(" " + C(n.label), 1)])]),
 					_: 2
 				}, 1032, [
 					"value",
@@ -57,13 +86,19 @@ var T = /*@__PURE__*/ u({
 					"class"
 				]))), 128))])]),
 				_: 3
-			}, 8, ["class"]), h(e.$slots, "default", {}, () => [(p(!0), s(r, null, m(T.value, (t) => (p(), a(_(b), {
-				key: E(t),
-				value: E(t),
-				"force-mount": d.keepMounted || void 0,
-				class: f(F.value)
+			}, 8, [
+				"class",
+				"style",
+				"data-overflowing",
+				"data-at-start",
+				"data-at-end"
+			])], 2), S(e.$slots, "default", {}, () => [(y(!0), l(a, null, x(P.value, (t) => (y(), s(w(O), {
+				key: F(t),
+				value: F(t),
+				"force-mount": m.keepMounted || void 0,
+				class: g($.value)
 			}, {
-				default: y(() => [h(e.$slots, E(t), { item: t })]),
+				default: D(() => [S(e.$slots, F(t), { item: t })]),
 				_: 2
 			}, 1032, [
 				"value",
@@ -80,4 +115,4 @@ var T = /*@__PURE__*/ u({
 	}
 });
 //#endregion
-export { T as default };
+export { P as default };

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

@@ -19,9 +19,22 @@ export interface TextareaProps {
     required?: boolean;
     /** Mark the field as invalid — styles the border and ring red. */
     invalid?: boolean;
+    /** Hard limit in characters, enforced by the browser. */
+    maxlength?: number;
+    /**
+     * Show a character count under the field — "120/500" with `maxlength`,
+     * turning red within the last tenth of the limit.
+     */
+    showCount?: boolean;
+    /**
+     * What a screen reader announces near the limit. Override for non-English
+     * apps.
+     */
+    countLabel?: (remaining: number) => string;
     id?: string;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
+    /** Applied to the wrapper when `showCount` is on, otherwise to the textarea. */
     class?: ClassValue;
 }
 type __VLS_Props = TextareaProps;
@@ -39,6 +52,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     unstyled: boolean;
     invalid: boolean;
+    countLabel: (remaining: number) => string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/Textarea.vue_vue_type_script_setup_true_lang.js

@@ -1,19 +1,34 @@
 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, 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";
+import { textareaCountTheme as n, textareaTheme as r } from "../theme/input.js";
+import { defaultCountLabel as i, useCharacterCount as a } from "../composables/character-count.js";
+import { computed as o, createElementBlock as s, createElementVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, nextTick as f, normalizeClass as p, onMounted as m, openBlock as h, ref as g, toDisplayString as _, unref as v, useModel as y, vModelText as b, watch as x, withDirectives as S } from "vue";
 //#region src/components/Textarea.vue?vue&type=script&setup=true&lang.ts
-var _ = [
+var C = [
 	"id",
 	"rows",
+	"maxlength",
 	"placeholder",
 	"disabled",
 	"required",
 	"aria-invalid",
 	"aria-describedby"
-], v = /*@__PURE__*/ a({
+], w = {
+	class: "sr-only",
+	"aria-live": "polite"
+}, T = [
+	"id",
+	"rows",
+	"maxlength",
+	"placeholder",
+	"disabled",
+	"required",
+	"aria-invalid",
+	"aria-describedby"
+], E = /*@__PURE__*/ l({
+	inheritAttrs: !1,
 	__name: "Textarea",
-	props: /*@__PURE__*/ o({
+	props: /*@__PURE__*/ u({
 		size: {},
 		rows: {},
 		autosize: { type: [Boolean, Object] },
@@ -24,6 +39,12 @@ var _ = [
 			type: Boolean,
 			default: void 0
 		},
+		maxlength: {},
+		showCount: { type: Boolean },
+		countLabel: {
+			type: Function,
+			default: i
+		},
 		id: {},
 		unstyled: {
 			type: Boolean,
@@ -40,51 +61,78 @@ var _ = [
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(a, { expose: o }) {
-		let v = a, y = p(a, "modelValue"), b = t(), x = r(() => v.id ?? b?.id.value);
-		b && v.id && (b.id.value = v.id);
-		let 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) {
+	setup(i, { expose: l }) {
+		let u = i, E = y(i, "modelValue"), D = t(), O = o(() => u.id ?? D?.id.value);
+		D && u.id && (D.id.value = u.id);
+		let k = o(() => u.invalid ?? D?.invalid.value ?? !1), A = e(), j = o(() => u.unstyled ?? A.unstyled), M = o(() => j.value ? u.class : r({
+			size: u.size,
+			invalid: k.value,
+			autosize: !!u.autosize,
+			class: u.showCount ? void 0 : u.class
+		})), { remaining: N, nearLimit: P, text: F } = a(() => E.value, () => u.maxlength), I = o(() => n({ nearLimit: P.value })), L = o(() => j.value ? u.class : I.value.root({ class: u.class })), R = o(() => j.value ? void 0 : I.value.count()), z = g();
+		l({ textarea: z });
+		let B = o(() => typeof u.autosize == "object" ? u.autosize : {});
+		function V(e) {
 			return Number.parseFloat(e) || 0;
 		}
-		function k() {
-			let e = E.value;
-			if (!e || !v.autosize) return;
+		function H() {
+			let e = z.value;
+			if (!e || !u.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;
+			let t = window.getComputedStyle(e), n = V(t.lineHeight), r = V(t.paddingTop) + V(t.paddingBottom), i = V(t.borderTopWidth) + V(t.borderBottomWidth), a = e.scrollHeight;
 			if (n) {
-				let { min: e, max: t } = D.value;
+				let { min: e, max: t } = B.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";
+			e.style.height = `${a + i}px`, e.style.overflowY = B.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,
+		return m(() => {
+			u.autosize && f(H);
+		}), x(() => [
+			E.value,
+			u.autosize,
+			u.size
+		], () => void f(H)), (e, t) => u.showCount ? (h(), s("div", {
+			key: 0,
+			class: p(L.value)
+		}, [
+			S(c("textarea", d({
+				id: O.value,
+				ref_key: "el",
+				ref: z
+			}, e.$attrs, {
+				"onUpdate:modelValue": t[0] ||= (e) => E.value = e,
+				rows: u.autosize ? B.value.min : u.rows,
+				maxlength: u.maxlength,
+				placeholder: u.placeholder,
+				disabled: u.disabled,
+				required: u.required,
+				"aria-invalid": k.value || void 0,
+				"aria-describedby": v(D)?.describedBy.value,
+				class: M.value
+			}), null, 16, C), [[b, E.value]]),
+			c("span", {
+				"aria-hidden": "true",
+				class: p(R.value)
+			}, _(v(F)), 3),
+			c("span", w, _(v(P) ? u.countLabel(v(N)) : ""), 1)
+		], 2)) : S((h(), s("textarea", d({
+			key: 1,
+			id: O.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]]);
+			ref: z
+		}, e.$attrs, {
+			"onUpdate:modelValue": t[1] ||= (e) => E.value = e,
+			rows: u.autosize ? B.value.min : u.rows,
+			maxlength: u.maxlength,
+			placeholder: u.placeholder,
+			disabled: u.disabled,
+			required: u.required,
+			"aria-invalid": k.value || void 0,
+			"aria-describedby": v(D)?.describedBy.value,
+			class: M.value
+		}), null, 16, T)), [[b, E.value]]);
 	}
 });
 //#endregion
-export { v as default };
+export { E as default };

package/dist/components/Toaster.vue_vue_type_script_setup_true_lang.js

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