iryx-ui 0.12.0 → 0.13.0

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

@@ -0,0 +1,72 @@
+import type { SidebarItems, SidebarLink } from '../composables/sidebar';
+export interface SidebarProps {
+    /** Links, optionally grouped into labelled sections. */
+    items?: SidebarItems;
+    /** Which edge it sits on. Only decides where the border goes. */
+    side?: 'left' | 'right';
+    /**
+     * Accessible name for the navigation landmark — override for non-English
+     * apps.
+     */
+    label?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ nav: 'px-4' }`. */
+    ui?: {
+        root?: string;
+        header?: string;
+        nav?: string;
+        footer?: string;
+        section?: string;
+        sectionLabel?: string;
+        link?: string;
+        linkLabel?: string;
+        linkBadge?: string;
+        groupIcon?: string;
+        groupContent?: string;
+        groupInner?: string;
+    };
+}
+type __VLS_Props = SidebarProps;
+type __VLS_ModelProps = {
+    /** Icons-only mode. Bind it to persist the choice, or leave it internal. */
+    'collapsed'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {
+    collapsed: boolean;
+}, __VLS_10: {
+    collapsed: boolean;
+}, __VLS_61: {
+    link: SidebarLink;
+    collapsed: boolean;
+}, __VLS_68: {
+    collapsed: boolean;
+};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+} & {
+    link?: (props: typeof __VLS_61) => any;
+} & {
+    footer?: (props: typeof __VLS_68) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:collapsed": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    label: string;
+    side: "left" | "right";
+}, {}, {}, {}, 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/Sidebar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,183 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import { isSidebarGroup as n, toSidebarSections as r } from "../composables/sidebar.js";
+import { sidebarTheme as i } from "../theme/sidebar.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeModels as p, normalizeClass as m, openBlock as h, renderList as g, renderSlot as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, useModel as x, withCtx as S } from "vue";
+import { ArrowRight01Icon as C } from "@hugeicons/core-free-icons";
+import { CollapsibleContent as w, CollapsibleRoot as T, CollapsibleTrigger as E, Primitive as D } from "reka-ui";
+//#region src/components/Sidebar.vue?vue&type=script&setup=true&lang.ts
+var O = /*@__PURE__*/ f({
+	__name: "Sidebar",
+	props: /*@__PURE__*/ p({
+		items: {},
+		side: { default: "left" },
+		label: { default: "Sidebar" },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	}, {
+		collapsed: {
+			type: Boolean,
+			default: !1
+		},
+		collapsedModifiers: {}
+	}),
+	emits: ["update:collapsed"],
+	setup(f) {
+		let p = f, O = x(f, "collapsed"), k = e(), A = o(() => p.unstyled ?? k.unstyled), j = o(() => r(p.items)), M = o(() => i({
+			side: p.side,
+			collapsed: O.value
+		}));
+		function N(e) {
+			let t = p.ui?.[e];
+			return A.value ? t : M.value[e]({ class: t });
+		}
+		let P = (e) => e.href ? "a" : "button";
+		function F(e, t) {
+			if (e.disabled) {
+				t.preventDefault();
+				return;
+			}
+			e.onSelect?.();
+		}
+		let I = (e) => e.label;
+		return (e, r) => (h(), s(b(D), {
+			as: "nav",
+			"aria-label": p.label,
+			"data-collapsed": O.value ? "" : void 0,
+			class: m(A.value ? [p.ui?.root, p.class] : M.value.root({ class: [p.ui?.root, p.class] }))
+		}, {
+			default: S(() => [
+				e.$slots.header ? (h(), l("div", {
+					key: 0,
+					class: m(N("header"))
+				}, [_(e.$slots, "header", { collapsed: O.value })], 2)) : c("", !0),
+				u("div", { class: m(N("nav")) }, [_(e.$slots, "default", { collapsed: O.value }, () => [(h(!0), l(a, null, g(j.value, (r, i) => (h(), l("div", {
+					key: r.section || i,
+					class: m(N("section"))
+				}, [r.section ? (h(), l("p", {
+					key: 0,
+					class: m(N("sectionLabel"))
+				}, y(r.section), 3)) : c("", !0), (h(!0), l(a, null, g(r.items, (r) => (h(), l(a, { key: r.label }, [b(n)(r) ? (h(), s(b(T), {
+					key: 0,
+					"default-open": r.defaultOpen,
+					disabled: r.disabled
+				}, {
+					default: S(() => [d(b(E), {
+						"aria-label": I(r),
+						"data-active": r.active ? "" : void 0,
+						"data-disabled": r.disabled ? "" : void 0,
+						class: m(N("link"))
+					}, {
+						default: S(() => [
+							r.icon ? (h(), s(t, {
+								key: 0,
+								icon: r.icon
+							}, null, 8, ["icon"])) : c("", !0),
+							u("span", { class: m(N("linkLabel")) }, y(r.label), 3),
+							d(t, {
+								icon: b(C),
+								class: m(N("groupIcon"))
+							}, null, 8, ["icon", "class"])
+						]),
+						_: 2
+					}, 1032, [
+						"aria-label",
+						"data-active",
+						"data-disabled",
+						"class"
+					]), d(b(w), { class: m(N("groupContent")) }, {
+						default: S(() => [u("div", { class: m(N("groupInner")) }, [(h(!0), l(a, null, g(r.items, (e) => (h(), s(v(P(e)), {
+							key: e.label,
+							href: e.href,
+							type: e.href ? void 0 : "button",
+							"aria-label": I(e),
+							"aria-current": e.active ? "page" : void 0,
+							"aria-disabled": e.disabled || void 0,
+							"data-active": e.active ? "" : void 0,
+							"data-disabled": e.disabled ? "" : void 0,
+							class: m(N("link")),
+							onClick: (t) => F(e, t)
+						}, {
+							default: S(() => [
+								e.icon ? (h(), s(t, {
+									key: 0,
+									icon: e.icon
+								}, null, 8, ["icon"])) : c("", !0),
+								u("span", { class: m(N("linkLabel")) }, y(e.label), 3),
+								e.badge === void 0 ? c("", !0) : (h(), l("span", {
+									key: 1,
+									class: m(N("linkBadge"))
+								}, y(e.badge), 3))
+							]),
+							_: 2
+						}, 1032, [
+							"href",
+							"type",
+							"aria-label",
+							"aria-current",
+							"aria-disabled",
+							"data-active",
+							"data-disabled",
+							"class",
+							"onClick"
+						]))), 128))], 2)]),
+						_: 2
+					}, 1032, ["class"])]),
+					_: 2
+				}, 1032, ["default-open", "disabled"])) : (h(), s(v(P(r)), {
+					key: 1,
+					href: r.href,
+					type: r.href ? void 0 : "button",
+					"aria-label": I(r),
+					"aria-current": r.active ? "page" : void 0,
+					"aria-disabled": r.disabled || void 0,
+					"data-active": r.active ? "" : void 0,
+					"data-disabled": r.disabled ? "" : void 0,
+					class: m(N("link")),
+					onClick: (e) => F(r, e)
+				}, {
+					default: S(() => [_(e.$slots, "link", {
+						link: r,
+						collapsed: O.value
+					}, () => [
+						r.icon ? (h(), s(t, {
+							key: 0,
+							icon: r.icon
+						}, null, 8, ["icon"])) : c("", !0),
+						u("span", { class: m(N("linkLabel")) }, y(r.label), 3),
+						r.badge === void 0 ? c("", !0) : (h(), l("span", {
+							key: 1,
+							class: m(N("linkBadge"))
+						}, y(r.badge), 3))
+					])]),
+					_: 2
+				}, 1032, [
+					"href",
+					"type",
+					"aria-label",
+					"aria-current",
+					"aria-disabled",
+					"data-active",
+					"data-disabled",
+					"class",
+					"onClick"
+				]))], 64))), 128))], 2))), 128))])], 2),
+				e.$slots.footer ? (h(), l("div", {
+					key: 1,
+					class: m(N("footer"))
+				}, [_(e.$slots, "footer", { collapsed: O.value })], 2)) : c("", !0)
+			]),
+			_: 3
+		}, 8, [
+			"aria-label",
+			"data-collapsed",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { O as default };

package/dist/components/SignaturePad.js

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

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

@@ -0,0 +1,60 @@
+export interface SignaturePadProps {
+    /**
+     * The signature as a PNG data URL, or `null` when nothing has been drawn.
+     * A data URL is what goes in a request body and what an `<img>` can render
+     * back, so it is what the model holds.
+     */
+    modelValue?: string | null;
+    /** Height of the drawing surface. The width follows the container. */
+    height?: number;
+    penColor?: string;
+    /** Nominal pen width. The drawn width varies with speed and pressure. */
+    penWidth?: number;
+    undoLabel?: string;
+    clearLabel?: string;
+    /** Names the pad itself, since a canvas has no text of its own. */
+    ariaLabel?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    id?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ canvas: 'bg-white' }`. */
+    ui?: {
+        root?: string;
+        canvas?: string;
+        actions?: string;
+        action?: string;
+    };
+}
+declare function toDataUrl(): string | null;
+declare function undo(): void;
+declare function clear(): void;
+declare const __VLS_export: import("vue").DefineComponent<SignaturePadProps, {
+    clear: typeof clear;
+    undo: typeof undo;
+    isEmpty: import("vue").ComputedRef<boolean>;
+    toDataUrl: typeof toDataUrl;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => any;
+    "update:modelValue": (value: string | null) => any;
+    start: () => any;
+    end: (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<SignaturePadProps> & Readonly<{
+    onClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+    onStart?: (() => any) | undefined;
+    onEnd?: ((value: string | null) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    height: number;
+    invalid: boolean;
+    ariaLabel: string;
+    clearLabel: string;
+    penColor: string;
+    penWidth: number;
+    undoLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/SignaturePad.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,158 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import { useAppearance as n } from "../composables/appearance.js";
+import { useFormField as r } from "../composables/form.js";
+import { hasInk as i, strokeWidth as a } from "../composables/signature.js";
+import { signaturePadTheme as o } from "../theme/signature-pad.js";
+import { computed as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, normalizeStyle as p, onBeforeUnmount as m, onMounted as h, openBlock as g, ref as _, unref as v, watch as ee } from "vue";
+import { ArrowTurnBackwardIcon as y, Delete02Icon as b } from "@hugeicons/core-free-icons";
+//#region src/components/SignaturePad.vue?vue&type=script&setup=true&lang.ts
+var x = [
+	"id",
+	"aria-label",
+	"aria-describedby"
+], S = [
+	"aria-label",
+	"title",
+	"disabled"
+], C = [
+	"aria-label",
+	"title",
+	"disabled"
+], w = /*@__PURE__*/ d({
+	__name: "SignaturePad",
+	props: {
+		modelValue: {},
+		height: { default: 160 },
+		penColor: { default: "currentColor" },
+		penWidth: { default: 2 },
+		undoLabel: { default: "Undo last stroke" },
+		clearLabel: { default: "Clear signature" },
+		ariaLabel: { default: "Signature" },
+		disabled: { type: Boolean },
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		id: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	emits: [
+		"update:modelValue",
+		"start",
+		"end",
+		"clear"
+	],
+	setup(d, { expose: w, emit: T }) {
+		let E = d, D = T, O = _(), k = _([]), A = !1, j = 0, M = () => k.value.at(-1), N = r(), P = s(() => E.id ?? N?.id.value), F = s(() => E.invalid ?? N?.invalid.value ?? !1), I = s(() => !i(k.value));
+		function L() {
+			if (E.penColor !== "currentColor") return E.penColor;
+			let e = O.value;
+			return e ? getComputedStyle(e).color : "#000000";
+		}
+		function R() {
+			let e = O.value;
+			if (!e) return;
+			let t = window.devicePixelRatio || 1, n = e.clientWidth;
+			if (!n) return;
+			e.width = Math.round(n * t), e.height = Math.round(E.height * t);
+			let r = e.getContext("2d");
+			r && (r.scale(t, t), z());
+		}
+		function z() {
+			let e = O.value, t = e?.getContext("2d");
+			if (!e || !t) return;
+			let n = window.devicePixelRatio || 1;
+			t.clearRect(0, 0, e.width / n, e.height / n), t.strokeStyle = L(), t.lineCap = "round", t.lineJoin = "round";
+			for (let e of k.value) for (let n = 1; n < e.length; n++) {
+				let r = e[n - 1], i = e[n];
+				t.beginPath(), t.lineWidth = a(E.penWidth, r, i), t.moveTo(r.x, r.y), t.lineTo(i.x, i.y), t.stroke();
+			}
+		}
+		function B() {
+			return I.value ? null : O.value?.toDataURL("image/png") ?? null;
+		}
+		function V() {
+			let e = B();
+			D("update:modelValue", e), D("end", e);
+		}
+		function H(e) {
+			let t = O.value.getBoundingClientRect();
+			return {
+				x: e.clientX - t.left,
+				y: e.clientY - t.top,
+				t: performance.now() - j,
+				pressure: e.pressure > 0 ? e.pressure : .5
+			};
+		}
+		function U(e) {
+			E.disabled || (O.value?.setPointerCapture(e.pointerId), j = performance.now(), A = !0, k.value = [...k.value, [H(e)]], D("start"));
+		}
+		function W(e) {
+			A && (M()?.push(H(e)), z());
+		}
+		function G(e) {
+			A && (O.value?.releasePointerCapture(e.pointerId), A = !1, z(), V());
+		}
+		function K() {
+			k.value.length && (k.value = k.value.slice(0, -1), z(), V());
+		}
+		function q() {
+			k.value = [], z(), D("update:modelValue", null), D("clear");
+		}
+		let { isDark: J } = n();
+		ee(J, z);
+		let Y;
+		h(() => {
+			R(), Y = new ResizeObserver(R), O.value && Y.observe(O.value);
+		}), m(() => Y?.disconnect()), w({
+			clear: q,
+			undo: K,
+			isEmpty: I,
+			toDataUrl: B
+		});
+		let X = e(), Z = s(() => E.unstyled ?? X.unstyled), Q = s(() => o({
+			invalid: F.value,
+			disabled: E.disabled
+		}));
+		function $(e, t) {
+			let n = [E.ui?.[e], t].filter(Boolean).join(" ");
+			return Z.value ? n : Q.value[e]({ class: n });
+		}
+		return (e, n) => (g(), c("div", { class: f($("root", E.class)) }, [l("canvas", {
+			id: P.value,
+			ref_key: "canvas",
+			ref: O,
+			role: "img",
+			"aria-label": E.ariaLabel,
+			"aria-describedby": v(N)?.describedBy.value,
+			style: p({ height: `${E.height}px` }),
+			class: f($("canvas")),
+			onPointerdown: U,
+			onPointermove: W,
+			onPointerup: G,
+			onPointercancel: G
+		}, null, 46, x), l("div", { class: f($("actions")) }, [l("button", {
+			type: "button",
+			"aria-label": E.undoLabel,
+			title: E.undoLabel,
+			disabled: E.disabled || !k.value.length,
+			class: f($("action")),
+			onClick: K
+		}, [u(t, { icon: v(y) }, null, 8, ["icon"])], 10, S), l("button", {
+			type: "button",
+			"aria-label": E.clearLabel,
+			title: E.clearLabel,
+			disabled: E.disabled || I.value,
+			class: f($("action")),
+			onClick: q
+		}, [u(t, { icon: v(b) }, null, 8, ["icon"])], 10, C)], 2)], 2));
+	}
+});
+//#endregion
+export { w as default };

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

@@ -11,8 +11,8 @@ export interface SkeletonProps {
     class?: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {
-    as: string;
     unstyled: boolean;
+    as: string;
     label: string;
     lines: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/Skeleton.vue_vue_type_script_setup_true_lang.js

@@ -17,26 +17,26 @@ var f = ["aria-label"], p = /*@__PURE__*/ o({
 		class: {}
 	},
 	setup(o) {
-		let p = o, m = e(), h = r(() => p.unstyled ?? m.unstyled), g = r(() => h.value ? p.class : t({
+		let p = o, m = e(), h = r(() => p.unstyled ?? m.unstyled), g = r(() => Math.max(1, p.lines)), _ = r(() => h.value ? void 0 : t({ variant: p.variant })), v = r(() => h.value || g.value > 1 ? p.class : t({
 			variant: p.variant,
 			class: p.class
-		})), _ = r(() => Math.max(1, p.lines));
-		return (e, t) => _.value > 1 ? (c(), a("div", {
+		}));
+		return (e, t) => g.value > 1 ? (c(), a("div", {
 			key: 0,
 			role: "status",
 			"aria-label": p.label,
-			class: "flex w-full flex-col gap-2"
-		}, [(c(!0), a(n, null, l(_.value, (e) => (c(), i(u(d), {
+			class: s([h.value ? void 0 : "flex w-full flex-col gap-2", v.value])
+		}, [(c(!0), a(n, null, l(g.value, (e) => (c(), i(u(d), {
 			key: e,
 			as: p.as,
-			class: s(g.value),
+			class: s(_.value),
 			"aria-hidden": "true"
-		}, null, 8, ["as", "class"]))), 128))], 8, f)) : (c(), i(u(d), {
+		}, null, 8, ["as", "class"]))), 128))], 10, f)) : (c(), i(u(d), {
 			key: 1,
 			as: p.as,
 			role: "status",
 			"aria-label": p.label,
-			class: s(g.value)
+			class: s(v.value)
 		}, null, 8, [
 			"as",
 			"aria-label",

package/dist/components/Slider.js

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

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

@@ -0,0 +1,80 @@
+import type { SliderRootProps } from 'reka-ui';
+export interface SliderProps extends /* @vue-ignore */ Omit<SliderRootProps, 'modelValue' | 'defaultValue'> {
+    /**
+     * A single number for one thumb, an array for a range. Whichever shape you
+     * pass back is the shape you get out, so `v-model` on a plain `ref(50)`
+     * stays a number instead of silently becoming `[50]`.
+     */
+    modelValue?: number | number[] | null;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    inverted?: boolean;
+    /** Keeps range thumbs from crossing or stacking. */
+    minStepsBetweenThumbs?: number;
+    size?: 'sm' | 'md' | 'lg';
+    /** Text shown above the track. */
+    label?: string;
+    /** Show the current value beside the label. */
+    showValue?: boolean;
+    /** Show `min` and `max` captions under the track. Horizontal only. */
+    showScale?: boolean;
+    /**
+     * Format the displayed value, the scale captions and each thumb's
+     * accessible label. Override for units or non-English locales.
+     */
+    formatValue?: (value: number) => string;
+    /**
+     * How each thumb of a range is named after the label — "Price minimum",
+     * "Price maximum". Override for non-English locales.
+     */
+    rangeLabels?: [string, string];
+    id?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ thumb: 'size-6' }`. */
+    ui?: {
+        root?: string;
+        header?: string;
+        label?: string;
+        value?: string;
+        slider?: string;
+        track?: string;
+        range?: string;
+        thumb?: string;
+        scale?: string;
+    };
+}
+declare var __VLS_1: {}, __VLS_3: {
+    values: number[];
+    text: string;
+};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_1) => any;
+} & {
+    value?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | number[]) => any;
+    valueCommit: (value: number | number[]) => any;
+}, string, import("vue").PublicProps, Readonly<SliderProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | number[]) => any) | undefined;
+    onValueCommit?: ((value: number | number[]) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    max: number;
+    step: number;
+    min: number;
+    rangeLabels: [string, 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;
+    };
+};