iryx-ui 0.11.0 → 0.13.0

package/dist/components/NumberInput.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,12 @@
-import { ArrowDown01Icon as e, ArrowUp01Icon as t } from "../node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js";
-import { useIryxUiConfig as n } from "../config.js";
-import r from "./Icon.js";
-import { useFormField as i } from "../composables/form.js";
-import { addDecimals as a, clampDecimal as o, compareDecimals as s, formatForLocale as c, isDecimal as l, parseFromLocale as u, roundDecimal as d, toEditable as f } from "../composables/decimal.js";
-import { numberInputTheme as p } from "../theme/number-input.js";
-import { computed as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createVNode as v, defineComponent as y, mergeModels as b, normalizeClass as x, openBlock as S, ref as C, unref as w, useModel as T, vModelText as E, watch as D, withDirectives as O, withKeys as k, withModifiers as A } from "vue";
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import { useFormField as n } from "../composables/form.js";
+import { addDecimals as r, clampDecimal as i, compareDecimals as a, formatForLocale as o, isDecimal as s, parseFromLocale as c, roundDecimal as l, toEditable as u } from "../composables/decimal.js";
+import { numberInputTheme as d } from "../theme/number-input.js";
+import { computed as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, mergeModels as v, mergeProps as y, normalizeClass as b, openBlock as x, ref as S, unref as C, useModel as w, vModelText as T, watch as E, withDirectives as D, withKeys as O, withModifiers as k } from "vue";
+import { ArrowDown01Icon as A, ArrowUp01Icon as j } from "@hugeicons/core-free-icons";
 //#region src/components/NumberInput.vue?vue&type=script&setup=true&lang.ts
-var j = [
+var M = [
 	"id",
 	"aria-valuenow",
 	"aria-valuemin",
@@ -16,9 +16,10 @@ var j = [
 	"required",
 	"aria-invalid",
 	"aria-describedby"
-], M = ["aria-label", "disabled"], N = ["aria-label", "disabled"], P = /*@__PURE__*/ y({
+], N = ["aria-label", "disabled"], P = ["aria-label", "disabled"], F = /*@__PURE__*/ _({
+	inheritAttrs: !1,
 	__name: "NumberInput",
-	props: /*@__PURE__*/ b({
+	props: /*@__PURE__*/ v({
 		min: {},
 		max: {},
 		step: { default: "1" },
@@ -50,87 +51,88 @@ var j = [
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(y) {
-		let b = y, P = T(y, "modelValue"), F = i(), I = m(() => b.id ?? F?.id.value), L = m(() => b.invalid ?? F?.invalid.value ?? !1), R = n(), z = m(() => b.unstyled ?? R.unstyled), B = C(""), V = C(!1);
-		function H(e) {
-			return e ? b.locale ? c(e, b.locale, b.precision) : b.precision == null ? e : d(e, b.precision) ?? e : "";
+	setup(_) {
+		let v = _, F = w(_, "modelValue"), I = n(), L = f(() => v.id ?? I?.id.value), R = f(() => v.invalid ?? I?.invalid.value ?? !1), z = e(), B = f(() => v.unstyled ?? z.unstyled), V = S(""), H = S(!1);
+		function U(e) {
+			return e ? v.locale ? o(e, v.locale, v.precision) : v.precision == null ? e : l(e, v.precision) ?? e : "";
 		}
-		D(() => P.value, (e) => {
-			V.value || (B.value = H(e));
+		E(() => F.value, (e) => {
+			H.value || (V.value = U(e));
 		}, { immediate: !0 });
-		function U(e) {
+		function W(e) {
 			let t = e.trim();
 			if (!t) {
-				P.value = "", B.value = "";
+				F.value = "", V.value = "";
 				return;
 			}
-			let n = b.locale ? u(t, b.locale) : l(t) ? t : void 0;
+			let n = v.locale ? c(t, v.locale) : s(t) ? t : void 0;
 			if (n == null) {
-				B.value = H(P.value);
+				V.value = U(F.value);
 				return;
 			}
-			let r = o(n, b.min, b.max), i = b.precision == null ? r : d(r, b.precision) ?? r;
-			P.value = i, B.value = H(i);
-		}
-		function W() {
-			V.value = !0, B.value = f(P.value, b.locale);
+			let r = i(n, v.min, v.max), a = v.precision == null ? r : l(r, v.precision) ?? r;
+			F.value = a, V.value = U(a);
 		}
 		function G() {
-			V.value = !1, U(B.value);
+			H.value = !0, V.value = u(F.value, v.locale);
+		}
+		function K() {
+			H.value = !1, W(V.value);
 		}
-		function K(e) {
-			let t = a(P.value || "0", e === 1 ? b.step : `-${b.step}`);
+		function q(e) {
+			let t = r(F.value || "0", e === 1 ? v.step : `-${v.step}`);
 			if (t == null) return;
-			let n = o(t, b.min, b.max), r = b.precision == null ? n : d(n, b.precision) ?? n;
-			P.value = r, B.value = V.value ? f(r, b.locale) : H(r);
+			let n = i(t, v.min, v.max), a = v.precision == null ? n : l(n, v.precision) ?? n;
+			F.value = a, V.value = H.value ? u(a, v.locale) : U(a);
 		}
-		let q = m(() => b.min != null && P.value !== "" && s(P.value, b.min) <= 0), J = m(() => b.max != null && P.value !== "" && s(P.value, b.max) >= 0), Y = m(() => p({
-			size: b.size,
-			invalid: L.value,
-			withStepper: b.stepper
+		let J = f(() => v.min != null && F.value !== "" && a(F.value, v.min) <= 0), Y = f(() => v.max != null && F.value !== "" && a(F.value, v.max) >= 0), X = f(() => d({
+			size: v.size,
+			invalid: R.value,
+			withStepper: v.stepper
 		}));
-		function X(e, t) {
-			let n = b.ui?.[e];
-			return z.value ? [n, t] : Y.value[e]({ class: [n, t] });
+		function Z(e, t) {
+			let n = v.ui?.[e];
+			return B.value ? [n, t] : X.value[e]({ class: [n, t] });
 		}
-		return (n, i) => (S(), g("div", { class: x(X("root")) }, [O(_("input", {
-			id: I.value,
-			"onUpdate:modelValue": i[0] ||= (e) => B.value = e,
+		return (e, n) => (x(), m("div", { class: b(B.value ? [v.ui?.root, v.class] : X.value.root({ class: [v.ui?.root, v.class] })) }, [D(h("input", y({
+			id: L.value,
+			"onUpdate:modelValue": n[0] ||= (e) => V.value = e
+		}, e.$attrs, {
 			type: "text",
 			inputmode: "decimal",
 			autocomplete: "off",
 			role: "spinbutton",
-			"aria-valuenow": P.value || void 0,
-			"aria-valuemin": b.min,
-			"aria-valuemax": b.max,
-			placeholder: b.placeholder,
-			disabled: b.disabled,
-			required: b.required,
-			"aria-invalid": L.value || void 0,
-			"aria-describedby": w(F)?.describedBy.value,
-			class: x(z.value ? [b.ui?.input, b.class] : Y.value.input({ class: [b.ui?.input, b.class] })),
-			onFocus: W,
-			onBlur: G,
-			onKeydown: [i[1] ||= k(A((e) => K(1), ["prevent"]), ["up"]), i[2] ||= k(A((e) => K(-1), ["prevent"]), ["down"])]
-		}, null, 42, j), [[E, B.value]]), b.stepper ? (S(), g("div", {
+			"aria-valuenow": F.value || void 0,
+			"aria-valuemin": v.min,
+			"aria-valuemax": v.max,
+			placeholder: v.placeholder,
+			disabled: v.disabled,
+			required: v.required,
+			"aria-invalid": R.value || void 0,
+			"aria-describedby": C(I)?.describedBy.value,
+			class: Z("input"),
+			onFocus: G,
+			onBlur: K,
+			onKeydown: [n[1] ||= O(k((e) => q(1), ["prevent"]), ["up"]), n[2] ||= O(k((e) => q(-1), ["prevent"]), ["down"])]
+		}), null, 16, M), [[T, V.value]]), v.stepper ? (x(), m("div", {
 			key: 0,
-			class: x(X("stepper"))
-		}, [_("button", {
+			class: b(Z("stepper"))
+		}, [h("button", {
 			type: "button",
 			tabindex: "-1",
-			"aria-label": b.incrementLabel,
-			disabled: b.disabled || J.value,
-			class: x(X("step")),
-			onClick: i[3] ||= (e) => K(1)
-		}, [v(r, { icon: w(t) }, null, 8, ["icon"])], 10, M), _("button", {
+			"aria-label": v.incrementLabel,
+			disabled: v.disabled || Y.value,
+			class: b(Z("step")),
+			onClick: n[3] ||= (e) => q(1)
+		}, [g(t, { icon: C(j) }, null, 8, ["icon"])], 10, N), h("button", {
 			type: "button",
 			tabindex: "-1",
-			"aria-label": b.decrementLabel,
-			disabled: b.disabled || q.value,
-			class: x(X("step")),
-			onClick: i[4] ||= (e) => K(-1)
-		}, [v(r, { icon: w(e) }, null, 8, ["icon"])], 10, N)], 2)) : h("", !0)], 2));
+			"aria-label": v.decrementLabel,
+			disabled: v.disabled || J.value,
+			class: b(Z("step")),
+			onClick: n[4] ||= (e) => q(-1)
+		}, [g(t, { icon: C(A) }, null, 8, ["icon"])], 10, P)], 2)) : p("", !0)], 2));
 	}
 });
 //#endregion
-export { P as default };
+export { F as default };

package/dist/components/PageHeader.js

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

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

@@ -0,0 +1,52 @@
+export interface PageHeaderProps {
+    /** Render as a different element or component. */
+    as?: string;
+    title?: string;
+    description?: string;
+    /**
+     * Heading level for the title. A page header is usually the `h1`, but a
+     * panel or a nested view may need to sit lower in the outline.
+     */
+    level?: 1 | 2 | 3;
+    /** Draw a rule underneath, for pages that run straight into content. */
+    bordered?: boolean;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ title: 'text-3xl' }`. */
+    ui?: {
+        root?: string;
+        top?: string;
+        row?: string;
+        heading?: string;
+        title?: string;
+        description?: string;
+        actions?: string;
+    };
+}
+declare var __VLS_8: {}, __VLS_16: {}, __VLS_18: {}, __VLS_20: {}, __VLS_22: {};
+type __VLS_Slots = {} & {
+    breadcrumb?: (props: typeof __VLS_8) => any;
+} & {
+    title?: (props: typeof __VLS_16) => any;
+} & {
+    description?: (props: typeof __VLS_18) => any;
+} & {
+    actions?: (props: typeof __VLS_20) => any;
+} & {
+    default?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<PageHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageHeaderProps> & Readonly<{}>, {
+    unstyled: boolean;
+    as: string;
+    bordered: boolean;
+    level: 1 | 2 | 3;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/PageHeader.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,59 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { pageHeaderTheme as t } from "../theme/page-header.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, withCtx as h } from "vue";
+import { Primitive as g } from "reka-ui";
+//#region src/components/PageHeader.vue?vue&type=script&setup=true&lang.ts
+var _ = /*@__PURE__*/ c({
+	__name: "PageHeader",
+	props: {
+		as: { default: "header" },
+		title: {},
+		description: {},
+		level: { default: 1 },
+		bordered: {
+			type: Boolean,
+			default: void 0
+		},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	setup(c) {
+		let _ = c, v = e(), y = n(() => _.unstyled ?? v.unstyled), b = n(() => `h${_.level}`), x = n(() => t({ bordered: _.bordered }));
+		function S(e) {
+			let t = _.ui?.[e];
+			return y.value ? t : x.value[e]({ class: t });
+		}
+		return (e, t) => (u(), r(m(g), {
+			as: _.as,
+			class: l(y.value ? [_.ui?.root, _.class] : x.value.root({ class: [_.ui?.root, _.class] }))
+		}, {
+			default: h(() => [
+				e.$slots.breadcrumb ? (u(), a("div", {
+					key: 0,
+					class: l(S("top"))
+				}, [d(e.$slots, "breadcrumb")], 2)) : i("", !0),
+				o("div", { class: l(S("row")) }, [o("div", { class: l(S("heading")) }, [_.title || e.$slots.title ? (u(), r(f(b.value), {
+					key: 0,
+					class: l(S("title"))
+				}, {
+					default: h(() => [d(e.$slots, "title", {}, () => [s(p(_.title), 1)])]),
+					_: 3
+				}, 8, ["class"])) : i("", !0), _.description || e.$slots.description ? (u(), a("p", {
+					key: 1,
+					class: l(S("description"))
+				}, [d(e.$slots, "description", {}, () => [s(p(_.description), 1)])], 2)) : i("", !0)], 2), e.$slots.actions ? (u(), a("div", {
+					key: 0,
+					class: l(S("actions"))
+				}, [d(e.$slots, "actions")], 2)) : i("", !0)], 2),
+				d(e.$slots, "default")
+			]),
+			_: 3
+		}, 8, ["as", "class"]));
+	}
+});
+//#endregion
+export { _ as default };

package/dist/components/Pagination.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,13 @@
-import { ArrowLeft01Icon as e, ArrowRight01Icon 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 { paginationTheme as i } from "../theme/pagination.js";
-import { Fragment as a, computed as o, createBlock as s, createElementBlock as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, normalizeClass as p, openBlock as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, useModel as y, withCtx as b } from "vue";
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import { paginationTheme as n } from "../theme/pagination.js";
+import { Fragment as r, computed as i, createBlock as a, createElementBlock as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, openBlock as f, renderList as p, renderSlot as m, toDisplayString as h, unref as g, useModel as _, withCtx as v } from "vue";
+import { ArrowLeft01Icon as y, ArrowRight01Icon as b } from "@hugeicons/core-free-icons";
 import { PaginationEllipsis as x, PaginationList as S, PaginationListItem as C, PaginationNext as w, PaginationPrev as T, PaginationRoot as E } from "reka-ui";
 //#region src/components/Pagination.vue?vue&type=script&setup=true&lang.ts
-var D = /*@__PURE__*/ d({
+var D = /*@__PURE__*/ l({
 	__name: "Pagination",
-	props: /*@__PURE__*/ f({
+	props: /*@__PURE__*/ u({
 		total: { default: 0 },
 		itemsPerPage: { default: 10 },
 		siblingCount: { default: 1 },
@@ -31,52 +31,52 @@ var D = /*@__PURE__*/ d({
 		pageModifiers: {}
 	}),
 	emits: ["update:page"],
-	setup(d) {
-		let f = d, D = y(d, "page"), O = n(), k = o(() => f.unstyled ?? O.unstyled), A = o(() => i({
-			size: f.size,
-			align: f.align
-		})), j = o(() => k.value ? [f.ui?.root, f.class] : A.value.root({ class: [f.ui?.root, f.class] })), M = o(() => k.value ? f.ui?.list : A.value.list({ class: f.ui?.list })), N = o(() => k.value ? f.ui?.ellipsis : A.value.ellipsis({ class: f.ui?.ellipsis }));
+	setup(l) {
+		let u = l, D = _(l, "page"), O = e(), k = i(() => u.unstyled ?? O.unstyled), A = i(() => n({
+			size: u.size,
+			align: u.align
+		})), j = i(() => k.value ? [u.ui?.root, u.class] : A.value.root({ class: [u.ui?.root, u.class] })), M = i(() => k.value ? u.ui?.list : A.value.list({ class: u.ui?.list })), N = i(() => k.value ? u.ui?.ellipsis : A.value.ellipsis({ class: u.ui?.ellipsis }));
 		function P(e) {
-			return k.value ? f.ui?.item : [A.value.item({ class: f.ui?.item }), e ? A.value.active() : A.value.inactive()];
+			return k.value ? u.ui?.item : [A.value.item({ class: u.ui?.item }), e ? A.value.active() : A.value.inactive()];
 		}
-		return (n, i) => (m(), s(v(E), {
+		return (e, n) => (f(), a(g(E), {
 			page: D.value,
-			"onUpdate:page": i[0] ||= (e) => D.value = e,
-			total: f.total,
-			"items-per-page": f.itemsPerPage,
-			"sibling-count": f.siblingCount,
-			"show-edges": f.showEdges,
-			"aria-label": f.label,
-			class: p(j.value)
+			"onUpdate:page": n[0] ||= (e) => D.value = e,
+			total: u.total,
+			"items-per-page": u.itemsPerPage,
+			"sibling-count": u.siblingCount,
+			"show-edges": u.showEdges,
+			"aria-label": u.label,
+			class: d(j.value)
 		}, {
-			default: b(() => [u(v(S), { class: p(M.value) }, {
-				default: b(({ items: o }) => [
-					u(v(T), {
-						"aria-label": f.prevLabel,
-						class: p(P(!1))
+			default: v(() => [c(g(S), { class: d(M.value) }, {
+				default: v(({ items: i }) => [
+					c(g(T), {
+						"aria-label": u.prevLabel,
+						class: d(P(!1))
 					}, {
-						default: b(() => [g(n.$slots, "prev", {}, () => [u(r, { icon: v(e) }, null, 8, ["icon"])])]),
+						default: v(() => [m(e.$slots, "prev", {}, () => [c(t, { icon: g(y) }, null, 8, ["icon"])])]),
 						_: 3
 					}, 8, ["aria-label", "class"]),
-					(m(!0), c(a, null, h(o, (e, t) => (m(), c(a, { key: t }, [e.type === "page" ? (m(), s(v(C), {
+					(f(!0), o(r, null, p(i, (e, t) => (f(), o(r, { key: t }, [e.type === "page" ? (f(), a(g(C), {
 						key: 0,
 						value: e.value,
-						class: p(P(e.value === D.value))
+						class: d(P(e.value === D.value))
 					}, {
-						default: b(() => [l(_(e.value), 1)]),
+						default: v(() => [s(h(e.value), 1)]),
 						_: 2
-					}, 1032, ["value", "class"])) : (m(), s(v(x), {
+					}, 1032, ["value", "class"])) : (f(), a(g(x), {
 						key: 1,
-						class: p(N.value)
+						class: d(N.value)
 					}, {
-						default: b(() => [...i[1] ||= [l(" … ", -1)]]),
+						default: v(() => [...n[1] ||= [s(" … ", -1)]]),
 						_: 1
 					}, 8, ["class"]))], 64))), 128)),
-					u(v(w), {
-						"aria-label": f.nextLabel,
-						class: p(P(!1))
+					c(g(w), {
+						"aria-label": u.nextLabel,
+						class: d(P(!1))
 					}, {
-						default: b(() => [g(n.$slots, "next", {}, () => [u(r, { icon: v(t) }, null, 8, ["icon"])])]),
+						default: v(() => [m(e.$slots, "next", {}, () => [c(t, { icon: g(b) }, null, 8, ["icon"])])]),
 						_: 3
 					}, 8, ["aria-label", "class"])
 				]),

package/dist/components/PasswordInput.vue_vue_type_script_setup_true_lang.js

@@ -1,18 +1,18 @@
-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";
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import n from "./Input.js";
+import { passwordInputTheme as r } from "../theme/password-input.js";
+import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, createVNode as u, defineComponent as d, mergeModels as f, mergeProps as p, normalizeClass as m, openBlock as h, ref as g, renderList as _, toDisplayString as v, unref as y, useModel as b, withCtx as x } from "vue";
+import { ViewIcon as S, ViewOffIcon as C } from "@hugeicons/core-free-icons";
 //#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({
+], T = ["data-filled"], E = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "PasswordInput",
-	props: /*@__PURE__*/ m({
+	props: /*@__PURE__*/ f({
 		size: {},
 		placeholder: {},
 		disabled: { type: Boolean },
@@ -46,41 +46,41 @@ var w = [
 		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(() => {
+	setup(d) {
+		let f = d, E = b(d, "modelValue"), D = e(), O = a(() => f.unstyled ?? D.unstyled), k = g(!1), A = a(() => {
 			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 })), N = s(() => O.value ? m.ui?.input : M.value.input({ class: m.ui?.input }));
+		}), j = a(() => f.strength && E.value.length > 0), M = a(() => r({ score: A.value })), N = a(() => O.value ? f.ui?.input : M.value.input({ class: f.ui?.input }));
 		function P(e, t) {
-			let n = m.ui?.[e];
+			let n = f.ui?.[e];
 			return O.value ? [n, t] : M.value[e]({ class: [n, t] });
 		}
-		return (n, a) => (_(), l("div", { class: g(P("root", m.class)) }, [f(i, h({
-			id: m.id,
+		return (e, r) => (h(), s("div", { class: m(P("root", f.class)) }, [u(n, p({
+			id: f.id,
 			modelValue: E.value,
-			"onUpdate:modelValue": a[1] ||= (e) => E.value = e,
+			"onUpdate:modelValue": r[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,
+			size: f.size,
+			placeholder: f.placeholder,
+			disabled: f.disabled,
+			required: f.required,
+			invalid: f.invalid,
+			unstyled: f.unstyled,
 			ui: { input: N.value },
 			autocomplete: "current-password"
-		}, n.$attrs), d({ _: 2 }, [m.toggle ? {
+		}, e.$attrs), l({ _: 2 }, [f.toggle ? {
 			name: "trailing",
-			fn: C(() => [u("button", {
+			fn: x(() => [c("button", {
 				type: "button",
 				tabindex: "-1",
-				"aria-label": k.value ? m.hideLabel : m.showLabel,
+				"aria-label": k.value ? f.hideLabel : f.showLabel,
 				"aria-pressed": k.value,
-				disabled: m.disabled,
-				class: g(P("toggle")),
-				onClick: a[0] ||= (e) => k.value = !k.value
-			}, [f(r, { icon: k.value ? x(t) : x(e) }, null, 8, ["icon"])], 10, w)]),
+				disabled: f.disabled,
+				class: m(P("toggle")),
+				onClick: r[0] ||= (e) => k.value = !k.value
+			}, [u(t, { icon: k.value ? y(C) : y(S) }, null, 8, ["icon"])], 10, w)]),
 			key: "0"
 		} : void 0]), 1040, [
 			"id",
@@ -93,20 +93,20 @@ var w = [
 			"invalid",
 			"unstyled",
 			"ui"
-		]), j.value ? (_(), l("div", {
+		]), j.value ? (h(), s("div", {
 			key: 0,
-			class: g(P("meter"))
-		}, [u("div", {
-			class: g(P("track")),
+			class: m(P("meter"))
+		}, [c("div", {
+			class: m(P("track")),
 			"aria-hidden": "true"
-		}, [(_(), l(o, null, y(4, (e) => u("span", {
+		}, [(h(), s(i, null, _(4, (e) => c("span", {
 			key: e,
 			"data-filled": e <= A.value ? "" : void 0,
-			class: g(P("segment"))
-		}, null, 10, T)), 64))], 2), u("span", {
-			class: g(P("label")),
+			class: m(P("segment"))
+		}, null, 10, T)), 64))], 2), c("span", {
+			class: m(P("label")),
 			role: "status"
-		}, b(m.strengthLabels[A.value - 1]), 3)], 2)) : c("", !0)], 2));
+		}, v(f.strengthLabels[A.value - 1]), 3)], 2)) : o("", !0)], 2));
 	}
 });
 //#endregion

package/dist/components/PinInput.js

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

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

@@ -0,0 +1,65 @@
+export interface PinInputProps {
+    /**
+     * The code, as a plain string. Reka works in arrays of single characters;
+     * a PIN is a string everywhere else in an app — in the request body, in the
+     * validator, in the email it arrived in — so the array stays an internal
+     * detail and never reaches your model.
+     */
+    modelValue?: string;
+    /** How many cells to render. */
+    length?: number;
+    /** `number` gets the numeric keypad on mobile and rejects non-digits. */
+    type?: 'text' | 'number';
+    /** Render the entered characters as dots, like a password field. */
+    mask?: boolean;
+    /**
+     * Let phones offer the code from an SMS. Sets the one-time-code autofill
+     * hint, which is the whole reason a reader does not have to retype it.
+     */
+    otp?: boolean;
+    /** Character shown in an empty cell. */
+    placeholder?: string;
+    /**
+     * Insert a separator after every N cells — `3` gives 123–456. Long codes
+     * are read in chunks, and an unbroken row of eight is hard to check.
+     */
+    groupSize?: number;
+    /** What that separator shows. */
+    separator?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    id?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ input: 'size-14' }`. */
+    ui?: {
+        root?: string;
+        input?: string;
+        separator?: string;
+    };
+}
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    separator?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<PinInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    complete: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<PinInputProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onComplete?: ((value: string) => any) | undefined;
+}>, {
+    length: number;
+    unstyled: boolean;
+    separator: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};