iryx-ui 0.11.0 → 0.13.0

package/dist/components/ScrollFade.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,59 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { scrollFadeMask as t, useScrollEdges as n } from "../composables/scroll-fade.js";
+import { scrollFadeTheme as r } from "../theme/scroll-fade.js";
+import { computed as i, createElementBlock as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, ref as u, renderSlot as d, toRef as f, unref as p } from "vue";
+//#region src/components/ScrollFade.vue?vue&type=script&setup=true&lang.ts
+var m = [
+	"data-at-start",
+	"data-at-end",
+	"data-overflowing"
+], h = /*@__PURE__*/ o({
+	__name: "ScrollFade",
+	props: {
+		orientation: { default: "vertical" },
+		size: { default: "2rem" },
+		fadeStart: {
+			type: Boolean,
+			default: !0
+		},
+		fadeEnd: {
+			type: Boolean,
+			default: !0
+		},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {}
+	},
+	setup(o) {
+		let h = o, g = u(), { atStart: _, atEnd: v, overflowing: y } = n(g, f(h, "orientation")), b = i(() => {
+			if (!y.value) return;
+			let e = t({
+				orientation: h.orientation,
+				size: h.size,
+				fadeStart: h.fadeStart && !_.value,
+				fadeEnd: h.fadeEnd && !v.value
+			});
+			return e ? {
+				maskImage: e,
+				WebkitMaskImage: e
+			} : void 0;
+		}), x = e(), S = i(() => h.unstyled ?? x.unstyled), C = i(() => r({ orientation: h.orientation })), w = i(() => S.value ? h.class : C.value.root({ class: h.class }));
+		return (e, t) => (l(), a("div", {
+			ref_key: "root",
+			ref: g,
+			class: s(w.value),
+			style: c(b.value),
+			"data-at-start": p(_) ? "" : void 0,
+			"data-at-end": p(v) ? "" : void 0,
+			"data-overflowing": p(y) ? "" : void 0
+		}, [d(e.$slots, "default", {
+			atStart: p(_),
+			atEnd: p(v),
+			overflowing: p(y)
+		})], 14, m));
+	}
+});
+//#endregion
+export { h as default };

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

@@ -35,11 +35,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_48) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<SelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:open": (value: boolean) => any;
     "update:modelValue": (value: import("reka-ui").AcceptableValue) => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<SelectProps> & Readonly<{
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((value: import("reka-ui").AcceptableValue) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     unstyled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/Select.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,12 @@
-import { ArrowDown01Icon as e, Tick02Icon 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 { selectTheme as i } from "../theme/select.js";
-import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createTextVNode as u, createVNode as d, defineComponent as f, guardReactiveProps as p, normalizeClass as m, normalizeProps as h, openBlock as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
-import { SelectContent as S, SelectGroup as C, SelectIcon as w, SelectItem as T, SelectItemIndicator as E, SelectItemText as D, SelectLabel as O, SelectPortal as k, SelectRoot as A, SelectTrigger as j, SelectValue as M, SelectViewport as N, useForwardPropsEmits as P } from "reka-ui";
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import { selectTheme as n } from "../theme/select.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, guardReactiveProps as d, mergeProps as f, normalizeClass as p, normalizeProps as m, openBlock as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, withCtx as b } from "vue";
+import { ArrowDown01Icon as x, Tick02Icon as S } from "@hugeicons/core-free-icons";
+import { SelectContent as C, SelectGroup as w, SelectIcon as T, SelectItem as E, SelectItemIndicator as D, SelectItemText as O, SelectLabel as k, SelectPortal as A, SelectRoot as j, SelectTrigger as M, SelectValue as N, SelectViewport as P, useForwardPropsEmits as F } from "reka-ui";
 //#region src/components/Select.vue?vue&type=script&setup=true&lang.ts
-var F = /*@__PURE__*/ f({
+var I = /*@__PURE__*/ u({
+	inheritAttrs: !1,
 	__name: "Select",
 	props: {
 		items: {},
@@ -21,6 +22,7 @@ var F = /*@__PURE__*/ f({
 		defaultOpen: { type: Boolean },
 		defaultValue: {},
 		modelValue: {},
+		nullableValue: {},
 		by: {},
 		dir: {},
 		multiple: { type: Boolean },
@@ -30,64 +32,64 @@ var F = /*@__PURE__*/ f({
 		required: { type: Boolean }
 	},
 	emits: ["update:modelValue", "update:open"],
-	setup(f, { emit: F }) {
-		let I = f, L = F, R = P(o(() => {
-			let { items: e, placeholder: t, size: n, unstyled: r, class: i, ui: a, ...o } = I;
+	setup(u, { emit: I }) {
+		let L = u, R = I, z = F(i(() => {
+			let { items: e, placeholder: t, size: n, unstyled: r, class: i, ui: a, ...o } = L;
 			return o;
-		}), L);
-		function z(e) {
+		}), R);
+		function B(e) {
 			return typeof e == "string" ? {
 				label: e,
 				value: e
 			} : e;
 		}
-		function B(e) {
+		function V(e) {
 			return typeof e != "string" && "items" in e;
 		}
-		let V = o(() => {
-			let e = I.items ?? [];
-			if (e.some(B)) return e.map((e) => B(e) ? {
+		let H = i(() => {
+			let e = L.items ?? [];
+			if (e.some(V)) return e.map((e) => V(e) ? {
 				label: e.label,
-				options: e.items.map(z)
+				options: e.items.map(B)
 			} : {
 				label: "",
-				options: [z(e)]
+				options: [B(e)]
 			});
-		}), H = o(() => (I.items ?? []).flatMap((e) => B(e) ? e.items.map(z) : [z(e)])), U = n(), W = o(() => I.unstyled ?? U.unstyled), G = o(() => i({ size: I.size })), K = o(() => W.value ? [I.ui?.trigger, I.class] : G.value.trigger({ class: [I.ui?.trigger, I.class] })), q = o(() => W.value ? I.ui?.content : G.value.content({ class: I.ui?.content })), J = o(() => W.value ? I.ui?.viewport : G.value.viewport({ class: I.ui?.viewport })), Y = o(() => W.value ? I.ui?.item : G.value.item({ class: I.ui?.item })), X = o(() => W.value ? void 0 : G.value.itemIndicator()), Z = o(() => W.value ? I.ui?.group : G.value.group({ class: I.ui?.group })), Q = o(() => W.value ? I.ui?.groupLabel : G.value.groupLabel({ class: I.ui?.groupLabel }));
-		return (n, i) => (g(), s(b(A), h(p(b(R))), {
-			default: x(() => [d(b(j), { class: m(K.value) }, {
-				default: x(() => [d(b(M), { placeholder: I.placeholder }, null, 8, ["placeholder"]), d(b(w), { "as-child": "" }, {
-					default: x(() => [d(r, { icon: b(e) }, null, 8, ["icon"])]),
+		}), U = i(() => (L.items ?? []).flatMap((e) => V(e) ? e.items.map(B) : [B(e)])), W = e(), G = i(() => L.unstyled ?? W.unstyled), K = i(() => n({ size: L.size })), q = i(() => G.value ? [L.ui?.trigger, L.class] : K.value.trigger({ class: [L.ui?.trigger, L.class] })), J = i(() => G.value ? L.ui?.content : K.value.content({ class: L.ui?.content })), Y = i(() => G.value ? L.ui?.viewport : K.value.viewport({ class: L.ui?.viewport })), X = i(() => G.value ? L.ui?.item : K.value.item({ class: L.ui?.item })), Z = i(() => G.value ? void 0 : K.value.itemIndicator()), Q = i(() => G.value ? L.ui?.group : K.value.group({ class: L.ui?.group })), $ = i(() => G.value ? L.ui?.groupLabel : K.value.groupLabel({ class: L.ui?.groupLabel }));
+		return (e, n) => (h(), a(y(j), m(d(y(z))), {
+			default: b(() => [l(y(M), f(e.$attrs, { class: q.value }), {
+				default: b(() => [l(y(N), { placeholder: L.placeholder }, null, 8, ["placeholder"]), l(y(T), { "as-child": "" }, {
+					default: b(() => [l(t, { icon: y(x) }, null, 8, ["icon"])]),
 					_: 1
 				})]),
 				_: 1
-			}, 8, ["class"]), d(b(k), null, {
-				default: x(() => [d(b(S), {
-					class: m(q.value),
+			}, 16, ["class"]), l(y(A), null, {
+				default: b(() => [l(y(C), {
+					class: p(J.value),
 					position: "item-aligned"
 				}, {
-					default: x(() => [d(b(N), { class: m(J.value) }, {
-						default: x(() => [v(n.$slots, "default", {}, () => [V.value ? (g(!0), l(a, { key: 0 }, _(V.value, (e, n) => (g(), s(b(C), {
+					default: b(() => [l(y(P), { class: p(Y.value) }, {
+						default: b(() => [_(e.$slots, "default", {}, () => [H.value ? (h(!0), s(r, { key: 0 }, g(H.value, (e, n) => (h(), a(y(w), {
 							key: e.label || n,
-							class: m(Z.value)
+							class: p(Q.value)
 						}, {
-							default: x(() => [e.label ? (g(), s(b(O), {
+							default: b(() => [e.label ? (h(), a(y(k), {
 								key: 0,
-								class: m(Q.value)
+								class: p($.value)
 							}, {
-								default: x(() => [u(y(e.label), 1)]),
+								default: b(() => [c(v(e.label), 1)]),
 								_: 2
-							}, 1032, ["class"])) : c("", !0), (g(!0), l(a, null, _(e.options, (e) => (g(), s(b(T), {
+							}, 1032, ["class"])) : o("", !0), (h(!0), s(r, null, g(e.options, (e) => (h(), a(y(E), {
 								key: e.value,
 								value: e.value,
 								disabled: e.disabled,
-								class: m(Y.value)
+								class: p(X.value)
 							}, {
-								default: x(() => [d(b(E), { class: m(X.value) }, {
-									default: x(() => [d(r, { icon: b(t) }, null, 8, ["icon"])]),
+								default: b(() => [l(y(D), { class: p(Z.value) }, {
+									default: b(() => [l(t, { icon: y(S) }, null, 8, ["icon"])]),
 									_: 1
-								}, 8, ["class"]), d(b(D), null, {
-									default: x(() => [u(y(e.label), 1)]),
+								}, 8, ["class"]), l(y(O), null, {
+									default: b(() => [c(v(e.label), 1)]),
 									_: 2
 								}, 1024)]),
 								_: 2
@@ -97,17 +99,17 @@ var F = /*@__PURE__*/ f({
 								"class"
 							]))), 128))]),
 							_: 2
-						}, 1032, ["class"]))), 128)) : (g(!0), l(a, { key: 1 }, _(H.value, (e) => (g(), s(b(T), {
+						}, 1032, ["class"]))), 128)) : (h(!0), s(r, { key: 1 }, g(U.value, (e) => (h(), a(y(E), {
 							key: e.value,
 							value: e.value,
 							disabled: e.disabled,
-							class: m(Y.value)
+							class: p(X.value)
 						}, {
-							default: x(() => [d(b(E), { class: m(X.value) }, {
-								default: x(() => [d(r, { icon: b(t) }, null, 8, ["icon"])]),
+							default: b(() => [l(y(D), { class: p(Z.value) }, {
+								default: b(() => [l(t, { icon: y(S) }, null, 8, ["icon"])]),
 								_: 1
-							}, 8, ["class"]), d(b(D), null, {
-								default: x(() => [u(y(e.label), 1)]),
+							}, 8, ["class"]), l(y(O), null, {
+								default: b(() => [c(v(e.label), 1)]),
 								_: 2
 							}, 1024)]),
 							_: 2
@@ -127,4 +129,4 @@ var F = /*@__PURE__*/ f({
 	}
 });
 //#endregion
-export { F as default };
+export { I as default };

package/dist/components/Sidebar.js

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

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;