blessing-ui 0.1.0 → 0.3.0

package/dist/components/BlessCommand.vue_vue_type_script_setup_true_lang.js

@@ -1,28 +1,29 @@
 import e from "./BlessModal.js";
 import t from "./BlessKbd.js";
-import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, nextTick as f, normalizeClass as p, onBeforeUnmount as m, onMounted as h, openBlock as g, ref as _, renderList as v, renderSlot as y, resolveDynamicComponent as b, toDisplayString as x, unref as S, useId as C, useModel as w, vModelText as T, watch as E, withCtx as D, withDirectives as O } from "vue";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, nextTick as f, normalizeClass as p, onBeforeUnmount as m, onMounted as h, openBlock as g, ref as _, renderList as v, renderSlot as y, resolveDynamicComponent as ee, toDisplayString as b, unref as x, useId as S, useModel as C, vModelText as w, watch as T, withCtx as E, withDirectives as te } from "vue";
 //#region src/components/BlessCommand.vue?vue&type=script&setup=true&lang.ts
-var k = { class: "bless-command__box" }, A = { class: "bless-command__search bless-lean--field" }, j = [
+var ne = { class: "bless-command__box" }, re = { class: "bless-command__search bless-lean--field" }, ie = ["title", "aria-label"], ae = [
 	"placeholder",
 	"aria-label",
 	"aria-controls",
-	"aria-activedescendant"
-], M = ["id", "aria-label"], ee = ["aria-labelledby"], N = ["id"], P = [
+	"aria-activedescendant",
+	"aria-describedby"
+], oe = ["id"], D = ["id", "aria-label"], O = ["aria-labelledby"], se = ["id"], ce = [
 	"id",
 	"aria-selected",
 	"aria-disabled",
 	"onMousemove",
 	"onClick"
-], F = {
+], k = {
 	class: "bless-command__mark",
 	"aria-hidden": "true"
-}, I = { class: "bless-command__label" }, L = {
+}, le = { class: "bless-command__label" }, ue = {
 	class: "bless-command__empty",
 	role: "status"
-}, R = {
-	key: 0,
+}, de = {
+	key: 1,
 	class: "bless-command__footer"
-}, z = /*@__PURE__*/ l({
+}, A = /*@__PURE__*/ l({
 	name: "BlessCommand",
 	__name: "BlessCommand",
 	props: /*@__PURE__*/ u({
@@ -35,120 +36,186 @@ var k = { class: "bless-command__box" }, A = { class: "bless-command__search ble
 			default: !0
 		},
 		inline: { type: Boolean },
-		filter: {}
+		filter: {},
+		scopes: {},
+		recent: { type: Boolean },
+		recentLimit: { default: 5 },
+		persist: {},
+		labels: {}
 	}, {
 		open: {
 			type: Boolean,
 			default: !1
 		},
-		openModifiers: {}
+		openModifiers: {},
+		history: { default: () => [] },
+		historyModifiers: {}
 	}),
-	emits: /*@__PURE__*/ u(["select"], ["update:open"]),
+	emits: /*@__PURE__*/ u(["select"], ["update:open", "update:history"]),
 	setup(l, { emit: u }) {
-		let z = l, B = w(l, "open"), V = u, H = C(), U = _(""), W = _(0), G = _(), K = (e, t) => {
+		let A = l, j = r(() => ({
+			recent: "Recent",
+			scope: (e) => `Only in ${e}`,
+			clearScope: "Search everywhere",
+			scopeHint: (e) => `Type ${e.join(", ")}`,
+			...A.labels
+		})), M = C(l, "open"), N = C(l, "history"), P = u, F = S(), I = _(""), L = _(0), R = _(), z = (e, t) => {
 			let n = [e.label, ...e.keywords ?? []].join(" ").toLowerCase();
 			return t.split(/\s+/).every((e) => n.includes(e));
-		}, q = r(() => {
-			let e = U.value.trim().toLowerCase(), t = z.filter ?? K;
-			return z.items.filter((n) => !e || t(n, e));
-		}), J = r(() => {
+		}, B = _(null);
+		T(I, (e) => {
+			if (B.value || !A.scopes?.length) return;
+			let t = A.scopes.find((t) => e.startsWith(t.key));
+			t && (B.value = t, I.value = e.slice(t.key.length).replace(/^\s+/, ""));
+		});
+		let V = (e) => e.label ?? e.group;
+		function fe() {
+			B.value = null, f(() => R.value?.focus());
+		}
+		let H = r(() => A.scopes?.length && !B.value ? j.value.scopeHint(A.scopes.map((e) => `${e.key} ${V(e)}`)) : ""), U = r(() => {
+			let e = I.value.trim().toLowerCase(), t = A.filter ?? z;
+			return (B.value ? A.items.filter((e) => e.group === B.value.group) : A.items).filter((n) => !e || t(n, e));
+		}), W = r(() => !A.recent || I.value.trim() || B.value ? [] : N.value.map((e) => A.items.find((t) => t.value === e && !t.disabled)).filter((e) => !!e).slice(0, A.recentLimit)), G = r(() => {
 			let e = /* @__PURE__ */ new Map();
-			for (let t of q.value) e.set(t.group ?? "", [...e.get(t.group ?? "") ?? [], t]);
-			return [...e.entries()];
-		}), Y = r(() => J.value.flatMap(([, e]) => e)), X = r(() => Y.value[W.value] ? `${H}-${Y.value[W.value].value}` : void 0);
-		E(q, () => W.value = Math.max(0, Y.value.findIndex((e) => !e.disabled))), E(B, (e) => {
-			e && (U.value = "", f(() => f(() => G.value?.focus())));
+			for (let t of U.value) e.set(t.group ?? "", [...e.get(t.group ?? "") ?? [], t]);
+			let t = [...e.entries()].map(([e, t]) => ({
+				key: e,
+				label: e,
+				items: t,
+				recent: !1
+			}));
+			return W.value.length && t.unshift({
+				key: "\0recent",
+				label: j.value.recent,
+				items: W.value,
+				recent: !0
+			}), t;
+		}), K = r(() => G.value.flatMap((e) => e.items)), q = (e, t) => `${F}-${t ? "r-" : ""}${e.value}`, J = r(() => {
+			let e = 0;
+			for (let t of G.value) for (let n of t.items) if (e++ === L.value) return q(n, t.recent);
+		}), Y = (e) => G.value.slice(0, e).reduce((e, t) => e + t.items.length, 0);
+		T(U, () => L.value = Math.max(0, K.value.findIndex((e) => !e.disabled))), T(B, () => L.value = Math.max(0, K.value.findIndex((e) => !e.disabled))), T(M, (e) => {
+			e && (I.value = "", B.value = null, f(() => f(() => R.value?.focus())));
 		});
-		function Z(e) {
-			let t = Y.value.length;
+		function X(e) {
+			let t = K.value.length;
 			if (!t) return;
-			let n = W.value;
-			for (let r = 0; r < t && (n = (n + e + t) % t, Y.value[n].disabled); r++);
-			W.value = n, f(() => document.getElementById(X.value ?? "")?.scrollIntoView?.({ block: "nearest" }));
+			let n = L.value;
+			for (let r = 0; r < t && (n = (n + e + t) % t, K.value[n].disabled); r++);
+			L.value = n, f(() => document.getElementById(J.value ?? "")?.scrollIntoView?.({ block: "nearest" }));
+		}
+		let Z = r(() => A.persist ? `bless-command:${A.persist}` : null);
+		function pe(e) {
+			if (!A.recent) return;
+			let t = [e.value, ...N.value.filter((t) => t !== e.value)].slice(0, 20);
+			N.value = t;
+			try {
+				Z.value && localStorage.setItem(Z.value, JSON.stringify(t));
+			} catch {}
 		}
-		function Q(e = Y.value[W.value]) {
-			e && !e.disabled && (V("select", e), z.inline || (B.value = !1));
+		function Q(e = K.value[L.value]) {
+			e && !e.disabled && (pe(e), P("select", e), A.inline || (M.value = !1));
 		}
-		function te(e) {
-			e.key === "ArrowDown" ? (e.preventDefault(), Z(1)) : e.key === "ArrowUp" ? (e.preventDefault(), Z(-1)) : e.key === "Enter" ? (e.preventDefault(), Q()) : e.key === "Home" ? (e.preventDefault(), W.value = 0) : e.key === "End" && (e.preventDefault(), W.value = Y.value.length - 1);
+		function me(e) {
+			e.key === "ArrowDown" ? (e.preventDefault(), X(1)) : e.key === "ArrowUp" ? (e.preventDefault(), X(-1)) : e.key === "Enter" ? (e.preventDefault(), Q()) : e.key === "Backspace" && !I.value && B.value ? (e.preventDefault(), B.value = null) : e.key === "Home" ? (e.preventDefault(), L.value = 0) : e.key === "End" && (e.preventDefault(), L.value = K.value.length - 1);
 		}
 		function $(e) {
-			e.target?.closest?.("[contenteditable]:not([contenteditable=\"false\"])") || z.hotkey && !z.inline && (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), B.value = !B.value);
+			e.target?.closest?.("[contenteditable]:not([contenteditable=\"false\"])") || A.hotkey && !A.inline && (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), M.value = !M.value);
 		}
-		return h(() => addEventListener("keydown", $)), m(() => removeEventListener("keydown", $)), (r, u) => (g(), i(b(l.inline ? "div" : e), d(l.inline ? {} : {
-			modelValue: B.value,
-			"onUpdate:modelValue": (e) => B.value = e,
+		return h(() => {
+			addEventListener("keydown", $);
+			try {
+				let e = Z.value && localStorage.getItem(Z.value), t = e ? JSON.parse(e) : null;
+				Array.isArray(t) && !N.value.length && (N.value = t.filter((e) => typeof e == "string"));
+			} catch {}
+		}), m(() => removeEventListener("keydown", $)), (r, u) => (g(), i(ee(l.inline ? "div" : e), d(l.inline ? {} : {
+			modelValue: M.value,
+			"onUpdate:modelValue": (e) => M.value = e,
 			size: "md"
 		}, { class: ["bless-command", { "bless-command--inline": l.inline }] }), {
-			default: D(() => [s("div", k, [
-				s("div", A, [
-					u[2] ||= s("span", {
+			default: E(() => [s("div", ne, [
+				s("div", re, [
+					u[3] ||= s("span", {
 						class: "bless-command__icon",
 						"aria-hidden": "true"
 					}, "⌕", -1),
-					O(s("input", {
+					B.value ? (g(), o("button", {
+						key: 0,
+						type: "button",
+						class: "bless-command__scope",
+						title: j.value.clearScope,
+						"aria-label": `${j.value.scope(V(B.value))}. ${j.value.clearScope}`,
+						onClick: fe
+					}, [c(b(V(B.value)) + " ", 1), u[1] ||= s("span", { "aria-hidden": "true" }, "×", -1)], 8, ie)) : a("", !0),
+					te(s("input", {
 						ref_key: "input",
-						ref: G,
-						"onUpdate:modelValue": u[0] ||= (e) => U.value = e,
+						ref: R,
+						"onUpdate:modelValue": u[0] ||= (e) => I.value = e,
 						type: "text",
 						class: "bless-command__input",
 						placeholder: l.placeholder,
 						role: "combobox",
-						"aria-label": l.label,
+						"aria-label": B.value ? `${l.label}: ${j.value.scope(V(B.value))}` : l.label,
 						"aria-autocomplete": "list",
 						"aria-expanded": !0,
-						"aria-controls": `${S(H)}-list`,
-						"aria-activedescendant": X.value,
+						"aria-controls": `${x(F)}-list`,
+						"aria-activedescendant": J.value,
+						"aria-describedby": H.value ? `${x(F)}-hint` : void 0,
 						autocomplete: "off",
 						spellcheck: "false",
-						onKeydown: te
-					}, null, 40, j), [[T, U.value]]),
-					l.inline ? a("", !0) : (g(), i(t, { key: 0 }, {
-						default: D(() => [...u[1] ||= [c("Esc", -1)]]),
+						onKeydown: me
+					}, null, 40, ae), [[w, I.value]]),
+					l.inline ? a("", !0) : (g(), i(t, { key: 1 }, {
+						default: E(() => [...u[2] ||= [c("Esc", -1)]]),
 						_: 1
 					}))
 				]),
+				H.value ? (g(), o("p", {
+					key: 0,
+					id: `${x(F)}-hint`,
+					class: "bless-command__hint"
+				}, b(H.value), 9, oe)) : a("", !0),
 				s("div", {
-					id: `${S(H)}-list`,
+					id: `${x(F)}-list`,
 					class: "bless-command__list",
 					role: "listbox",
 					"aria-label": l.label
-				}, [(g(!0), o(n, null, v(J.value, ([e, l]) => (g(), o("div", {
-					key: e,
+				}, [(g(!0), o(n, null, v(G.value, (e, l) => (g(), o("div", {
+					key: e.key,
 					role: "group",
-					"aria-labelledby": e ? `${S(H)}-g-${J.value.findIndex(([t]) => t === e)}` : void 0,
+					"aria-labelledby": e.label ? `${x(F)}-g-${l}` : void 0,
 					class: "bless-command__section"
-				}, [e ? (g(), o("div", {
+				}, [e.label ? (g(), o("div", {
 					key: 0,
-					id: `${S(H)}-g-${J.value.findIndex(([t]) => t === e)}`,
+					id: `${x(F)}-g-${l}`,
 					class: "bless-command__group",
 					"aria-hidden": "true"
-				}, x(e), 9, N)) : a("", !0), (g(!0), o(n, null, v(l, (e) => (g(), o("div", {
-					key: e.value,
-					id: `${S(H)}-${e.value}`,
-					class: p(["bless-command__item", { "bless-command__item--active": Y.value[W.value] === e }]),
+				}, b(e.label), 9, se)) : a("", !0), (g(!0), o(n, null, v(e.items, (n, u) => (g(), o("div", {
+					key: n.value,
+					id: q(n, e.recent),
+					class: p(["bless-command__item", { "bless-command__item--active": L.value === Y(l) + u }]),
 					role: "option",
-					"aria-selected": Y.value[W.value] === e,
-					"aria-disabled": e.disabled || void 0,
-					onMousemove: (t) => W.value = Y.value.indexOf(e),
-					onClick: (t) => Q(e)
+					"aria-selected": L.value === Y(l) + u,
+					"aria-disabled": n.disabled || void 0,
+					onMousemove: (e) => L.value = Y(l) + u,
+					onClick: (e) => Q(n)
 				}, [
-					s("span", F, x(e.icon ?? ""), 1),
-					s("span", I, [y(r.$slots, "item", { item: e }, () => [c(x(e.label), 1)])]),
-					e.shortcut ? (g(), i(t, {
+					s("span", k, b(n.icon ?? ""), 1),
+					s("span", le, [y(r.$slots, "item", { item: n }, () => [c(b(n.label), 1)])]),
+					n.shortcut ? (g(), i(t, {
 						key: 0,
 						class: "bless-command__shortcut"
 					}, {
-						default: D(() => [c(x(e.shortcut), 1)]),
+						default: E(() => [c(b(n.shortcut), 1)]),
 						_: 2
 					}, 1024)) : a("", !0)
-				], 42, P))), 128))], 8, ee))), 128))], 8, M),
-				s("p", L, x(Y.value.length ? "" : l.emptyText), 1),
-				r.$slots.footer ? (g(), o("div", R, [y(r.$slots, "footer")])) : a("", !0)
+				], 42, ce))), 128))], 8, O))), 128))], 8, D),
+				s("p", ue, b(K.value.length ? "" : l.emptyText), 1),
+				r.$slots.footer ? (g(), o("div", de, [y(r.$slots, "footer")])) : a("", !0)
 			])]),
 			_: 3
 		}, 16, ["class"]));
 	}
 });
 //#endregion
-export { z as default };
+export { A as default };

package/dist/components/BlessConfetti.css

@@ -0,0 +1 @@
+.bless-confetti{pointer-events:none;width:100vw;height:100vh;z-index:calc(var(--bless-z-modal) + 1);position:fixed;inset:0}

package/dist/components/BlessConfetti.js

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

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

@@ -0,0 +1,40 @@
+type __VLS_Props = {
+    /** pieces per burst */
+    count?: number;
+    /** token names (`chart-2`, `accent`…) or CSS colours */
+    colors?: string[];
+    /** milliseconds until the last piece has faded */
+    duration?: number;
+    /** width of the cone the pieces leave in, degrees; 360 is all around */
+    spread?: number;
+    /** launch strength, px per second */
+    power?: number;
+    gravity?: number;
+};
+declare function stop(): void;
+/**
+ * Throw a burst. `from` is a point in viewport px or an element to burst out of (default: the
+ * middle of the window); `angle` points the cone (default straight up). Does nothing under
+ * `prefers-reduced-motion`.
+ */
+declare function fire(from?: {
+    x: number;
+    y: number;
+} | HTMLElement, angle?: number): undefined;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
+    fire: typeof fire;
+    stop: typeof stop;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    done: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDone?: (() => any) | undefined;
+}>, {
+    duration: number;
+    count: number;
+    colors: string[];
+    spread: number;
+    power: number;
+    gravity: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessConfetti.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,77 @@
+import { reducedMotion as e } from "../composables/useMedia.js";
+import { burst as t, step as n } from "../composables/confetti.js";
+import { createElementBlock as r, defineComponent as i, onBeforeUnmount as a, openBlock as o, ref as s } from "vue";
+//#region src/components/BlessConfetti.vue?vue&type=script&setup=true&lang.ts
+var c = /*@__PURE__*/ i({
+	name: "BlessConfetti",
+	__name: "BlessConfetti",
+	props: {
+		count: { default: 90 },
+		colors: { default: () => [
+			"chart-1",
+			"chart-2",
+			"chart-3",
+			"chart-4",
+			"chart-5",
+			"warning"
+		] },
+		duration: { default: 2200 },
+		spread: { default: 80 },
+		power: { default: 900 },
+		gravity: { default: 1400 }
+	},
+	emits: ["done"],
+	setup(i, { expose: c, emit: l }) {
+		let u = i, d = l, f = s(), p = [], m = 0, h = 0, g = (e) => /^[a-z0-9-]+$/i.test(e) && f.value && getComputedStyle(f.value).getPropertyValue(`--bless-color-${e}`).trim() || e;
+		function _(e) {
+			let t = f.value, r = t?.getContext("2d");
+			if (!t || !r) return v();
+			let i = Math.min(.05, (e - h) / 1e3);
+			h = e, r.clearRect(0, 0, t.width, t.height);
+			let a = window.devicePixelRatio || 1;
+			for (let e of p) n(e, i, u.gravity, u.duration / 1e3), !(e.life <= 0) && (r.save(), r.globalAlpha = Math.min(1, e.life * 3), r.fillStyle = e.color, r.translate(e.x * a, e.y * a), r.rotate(e.rot), e.round ? (r.beginPath(), r.arc(0, 0, e.size * a / 2, 0, Math.PI * 2), r.fill()) : r.fillRect(-e.size * a / 2, -e.size * a / 3, e.size * a, e.size * a / 1.6), r.restore());
+			p = p.filter((e) => e.life > 0 && e.y < window.innerHeight + 40), p.length ? m = requestAnimationFrame(_) : (v(), d("done"));
+		}
+		function v() {
+			cancelAnimationFrame(m), m = 0, p = [];
+			let e = f.value;
+			e?.getContext("2d")?.clearRect(0, 0, e.width, e.height);
+		}
+		function y(n, r = 270) {
+			let i = f.value;
+			if (!i || e()) return void d("done");
+			let a = window.devicePixelRatio || 1;
+			i.width = window.innerWidth * a, i.height = window.innerHeight * a;
+			let o = {
+				x: window.innerWidth / 2,
+				y: window.innerHeight * .65
+			};
+			if (n instanceof HTMLElement) {
+				let e = n.getBoundingClientRect();
+				o = {
+					x: e.left + e.width / 2,
+					y: e.top + e.height / 2
+				};
+			} else n && (o = n);
+			p.push(...t({
+				count: u.count,
+				origin: o,
+				angle: r,
+				spread: u.spread,
+				power: u.power,
+				colors: u.colors.map(g)
+			})), m ||= (h = performance.now(), requestAnimationFrame(_));
+		}
+		return a(v), c({
+			fire: y,
+			stop: v
+		}), (e, t) => (o(), r("canvas", {
+			ref_key: "canvas",
+			ref: f,
+			class: "bless-confetti",
+			"aria-hidden": "true"
+		}, null, 512));
+	}
+});
+//#endregion
+export { c as default };

package/dist/components/BlessCountUp.css

@@ -0,0 +1 @@
+.bless-countup{font-variant-numeric:tabular-nums;position:relative}.bless-countup--odometer .bless-countup__visual{display:inline-flex}.bless-countup__digit{height:1lh;display:inline-block;overflow:hidden}.bless-countup__reel{translate:0 calc(var(--bless-digit) * -1lh);transition:translate var(--bless-duration-slow) var(--bless-ease-out);flex-direction:column;display:flex}.bless-countup__reel i{height:1lh;font-style:normal}.bless-countup__final{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.bless-countup__reel{transition:none}}

package/dist/components/BlessCountUp.js

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

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

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    value: number;
+    /** milliseconds to travel from the shown number to `value` */
+    duration?: number;
+    locale?: string;
+    /** `Intl.NumberFormat` options: `{ style: "currency", currency: "IDR" }` */
+    options?: Intl.NumberFormatOptions;
+    /** start at 0 and count up when first shown; off shows `value` straight away */
+    appear?: boolean;
+    /** roll each digit in its own column, like an odometer */
+    odometer?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    duration: number;
+    appear: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessCountUp.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,49 @@
+import { reducedMotion as e } from "../composables/useMedia.js";
+import { Fragment as t, computed as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, onBeforeUnmount as l, onMounted as u, openBlock as d, ref as f, renderList as p, toDisplayString as m, watch as h } from "vue";
+//#region src/components/BlessCountUp.vue?vue&type=script&setup=true&lang.ts
+var g = {
+	class: "bless-countup__visual",
+	"aria-hidden": "true"
+}, _ = {
+	key: 0,
+	class: "bless-countup__digit"
+}, v = { key: 1 }, y = { class: "bless-countup__final" }, b = /*@__PURE__*/ o({
+	name: "BlessCountUp",
+	__name: "BlessCountUp",
+	props: {
+		value: {},
+		duration: { default: 800 },
+		locale: {},
+		options: {},
+		appear: {
+			type: Boolean,
+			default: !0
+		},
+		odometer: { type: Boolean }
+	},
+	setup(o) {
+		let b = o, x = f(b.appear ? 0 : b.value), S = n(() => new Intl.NumberFormat(b.locale, b.options)), C = n(() => {
+			let e = b.options ?? {};
+			return e.style === "currency" || e.style === "percent" || e.minimumFractionDigits != null || e.maximumFractionDigits != null || !Number.isInteger(b.value) ? S.value.resolvedOptions().maximumFractionDigits ?? 0 : 0;
+		}), w = (e) => S.value.format(e), T = (e) => Math.round(e * 10 ** C.value) / 10 ** C.value, E = n(() => w(b.value)), D = n(() => Array.from(w(x.value))), O = 0;
+		function k(t) {
+			cancelAnimationFrame(O);
+			let n = x.value;
+			if (e() || !b.duration || n === t) {
+				x.value = t;
+				return;
+			}
+			let r = performance.now(), i = (e) => {
+				let a = Math.min(1, (e - r) / b.duration);
+				x.value = T(n + (t - n) * (1 - (1 - a) ** 3)), a < 1 ? O = requestAnimationFrame(i) : x.value = t;
+			};
+			O = requestAnimationFrame(i);
+		}
+		return u(() => b.appear && k(b.value)), h(() => b.value, (e) => k(e)), l(() => cancelAnimationFrame(O)), (e, n) => (d(), r("span", { class: s(["bless-countup", { "bless-countup--odometer": o.odometer }]) }, [i("span", g, [o.odometer ? (d(!0), r(t, { key: 0 }, p(D.value, (e, n) => (d(), r(t, { key: n }, [/\d/.test(e) ? (d(), r("span", _, [i("span", {
+			class: "bless-countup__reel",
+			style: c({ "--bless-digit": e })
+		}, [(d(), r(t, null, p(10, (e) => i("i", { key: e }, m(e - 1), 1)), 64))], 4)])) : (d(), r("span", v, m(e), 1))], 64))), 128)) : (d(), r(t, { key: 1 }, [a(m(w(x.value)), 1)], 64))]), i("span", y, m(E.value), 1)], 2));
+	}
+});
+//#endregion
+export { b as default };

package/dist/components/BlessCropper.css

@@ -0,0 +1 @@
+.bless-cropper{font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);position:relative}.bless-cropper__stage{touch-action:none;-webkit-user-select:none;user-select:none;background:var(--bless-color-surface);position:relative;overflow:hidden}.bless-cropper__canvas{width:100%;height:auto;display:block}.bless-cropper__frame{box-sizing:border-box;border:2px solid var(--bless-color-bg);outline:1px solid var(--bless-color-text);box-shadow:0 0 0 9999px color-mix(in srgb, var(--bless-color-bg) 55%, transparent);cursor:move;touch-action:none;position:absolute}.bless-cropper__frame:focus-visible{outline:2px solid var(--bless-color-accent)}.bless-cropper__handle{background:var(--bless-color-bg);border:1px solid var(--bless-color-text);touch-action:none;width:12px;height:12px;position:absolute}.bless-cropper__handle--nw{cursor:nwse-resize;inset-block-start:-7px;inset-inline-start:-7px}.bless-cropper__handle--ne{cursor:nesw-resize;inset-block-start:-7px;inset-inline-end:-7px}.bless-cropper__handle--se{cursor:nwse-resize;inset-block-end:-7px;inset-inline-end:-7px}.bless-cropper__handle--sw{cursor:nesw-resize;inset-block-end:-7px;inset-inline-start:-7px}.bless-cropper__handle--n,.bless-cropper__handle--s{cursor:ns-resize;inset-inline-start:calc(50% - 6px)}.bless-cropper__handle--n{inset-block-start:-7px}.bless-cropper__handle--s{inset-block-end:-7px}.bless-cropper__handle--e,.bless-cropper__handle--w{cursor:ew-resize;inset-block-start:calc(50% - 6px)}.bless-cropper__handle--e{inset-inline-end:-7px}.bless-cropper__handle--w{inset-inline-start:-7px}.bless-cropper__foot{justify-content:space-between;align-items:center;gap:var(--bless-space-2);margin-top:var(--bless-space-2);color:var(--bless-color-text-muted);font-size:var(--bless-text-xs);display:flex}.bless-cropper__controls{gap:var(--bless-space-1);display:inline-flex}.bless-cropper__error{color:var(--bless-color-danger-text);margin:0}.bless-cropper__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}

package/dist/components/BlessCropper.js

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

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

@@ -0,0 +1,70 @@
+import { CropBox } from '../composables/cropBox';
+export interface BlessCropRect {
+    /** pixels of the full-size image after `rotation` has been applied */
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation: 0 | 90 | 180 | 270;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<{
+    src: string;
+    /** width / height of the result, e.g. `1` or `16 / 9`; leave out to crop freely */
+    aspect?: number;
+    /** `anonymous` lets `toBlob` read images from another origin that sends CORS headers */
+    crossorigin?: "anonymous" | "use-credentials";
+    /** show the rotate buttons */
+    controls?: boolean;
+    label?: string;
+    /** the crop readout said after a keystroke, the hint under the image and the rotate buttons */
+    labels?: Partial<{
+        size: (width: number, height: number, x: number, y: number) => string;
+        hint: string;
+        rotateLeft: string;
+        rotateRight: string;
+        loadError: string;
+    }>;
+} & {
+    modelValue?: BlessCropRect | null;
+}, {
+    toBlob: (o?: {
+        type?: string;
+        quality?: number;
+        maxWidth?: number;
+    }) => Promise<Blob | null>;
+    rotate: (d: 90 | -90) => 0 | 90 | 180 | 270;
+    reset: () => CropBox;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: BlessCropRect | null) => any;
+    error: () => any;
+    ready: () => any;
+}, string, import('vue').PublicProps, Readonly<{
+    src: string;
+    /** width / height of the result, e.g. `1` or `16 / 9`; leave out to crop freely */
+    aspect?: number;
+    /** `anonymous` lets `toBlob` read images from another origin that sends CORS headers */
+    crossorigin?: "anonymous" | "use-credentials";
+    /** show the rotate buttons */
+    controls?: boolean;
+    label?: string;
+    /** the crop readout said after a keystroke, the hint under the image and the rotate buttons */
+    labels?: Partial<{
+        size: (width: number, height: number, x: number, y: number) => string;
+        hint: string;
+        rotateLeft: string;
+        rotateRight: string;
+        loadError: string;
+    }>;
+} & {
+    modelValue?: BlessCropRect | null;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: BlessCropRect | null) => any) | undefined;
+    onError?: (() => any) | undefined;
+    onReady?: (() => any) | undefined;
+}>, {
+    label: string;
+    controls: boolean;
+    crossorigin: "anonymous" | "use-credentials";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;