blessing-ui 0.2.0 → 0.3.0

package/dist/components/BlessDatePicker.vue_vue_type_script_setup_true_lang.js

@@ -20,7 +20,7 @@ var D = {
 	"aria-expanded",
 	"aria-invalid",
 	"aria-describedby"
-], A = ["aria-label", "onKeydown"], j = /*@__PURE__*/ d({
+], A = ["aria-label"], j = ["aria-label", "onKeydown"], M = /*@__PURE__*/ d({
 	name: "BlessDatePicker",
 	__name: "BlessDatePicker",
 	props: /*@__PURE__*/ f({
@@ -36,89 +36,90 @@ var D = {
 			type: Boolean,
 			default: !0
 		},
-		size: { default: "md" }
+		size: { default: "md" },
+		clearLabel: { default: "Clear date" }
 	}, {
 		modelValue: {},
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
 	setup(d) {
-		let f = d, j = x(d, "modelValue"), M = e(f)(), N = t(), P = v(!1), F = v(), I = v(), { x: L, y: R } = n(F, I, P, {
+		let f = d, M = x(d, "modelValue"), N = e(f)(), P = t(), F = v(!1), I = v(), L = v(), { x: R, y: z } = n(I, L, F, {
 			placement: "bottom-start",
 			offset: 4
-		}), z = v(!1);
-		g(() => z.value = matchMedia("(pointer: coarse)").matches);
-		let B = o(() => f.nativeOnTouch && !f.range && z.value), V = o(() => new Intl.DateTimeFormat(f.locale, { dateStyle: "medium" })), H = o(() => {
-			if (!j.value) return "";
-			let e = V.value;
-			return Array.isArray(j.value) ? `${e.format(r(j.value[0]))} – ${e.format(r(j.value[1]))}` : e.format(r(j.value));
+		}), B = v(!1);
+		g(() => B.value = matchMedia("(pointer: coarse)").matches);
+		let V = o(() => f.nativeOnTouch && !f.range && B.value), H = o(() => new Intl.DateTimeFormat(f.locale, { dateStyle: "medium" })), U = o(() => {
+			if (!M.value) return "";
+			let e = H.value;
+			return Array.isArray(M.value) ? `${e.format(r(M.value[0]))} – ${e.format(r(M.value[1]))}` : e.format(r(M.value));
 		});
-		function U() {
-			P.value = !1, F.value?.focus();
+		function W() {
+			F.value = !1, I.value?.focus();
 		}
-		C(P, (e) => p(() => {
-			let t = I.value;
+		C(F, (e) => p(() => {
+			let t = L.value;
 			t && typeof t.showPopover == "function" && (e && !t.matches(":popover-open") ? t.showPopover() : !e && t.matches(":popover-open") && t.hidePopover(), e && p(() => t.querySelector("[tabindex=\"0\"]")?.focus()));
-		})), C(j, (e) => {
-			P.value && (!f.range || Array.isArray(e)) && U();
+		})), C(M, (e) => {
+			F.value && (!f.range || Array.isArray(e)) && W();
 		});
-		function W() {
-			j.value = void 0, F.value?.focus();
+		function G() {
+			M.value = void 0, I.value?.focus();
 		}
 		return (e, t) => (_(), c("div", { class: m(["bless-datepicker", [`bless-datepicker--${d.size}`, {
-			"bless-datepicker--invalid": d.invalid || b(N).invalid.value,
+			"bless-datepicker--invalid": d.invalid || b(P).invalid.value,
 			"bless-datepicker--disabled": d.disabled
-		}]]) }, [B.value ? (_(), c("span", D, [w(l("input", {
-			id: b(M),
-			"onUpdate:modelValue": t[0] ||= (e) => j.value = e,
+		}]]) }, [V.value ? (_(), c("span", D, [w(l("input", {
+			id: b(N),
+			"onUpdate:modelValue": t[0] ||= (e) => M.value = e,
 			type: "date",
 			min: d.min,
 			max: d.max,
 			disabled: d.disabled,
 			class: "bless-datepicker__native",
-			"aria-invalid": d.invalid || b(N).invalid.value || void 0,
-			"aria-describedby": b(N).describedby.value
-		}, null, 8, O), [[S, j.value]])])) : (_(), c(a, { key: 1 }, [
+			"aria-invalid": d.invalid || b(P).invalid.value || void 0,
+			"aria-describedby": b(P).describedby.value
+		}, null, 8, O), [[S, M.value]])])) : (_(), c(a, { key: 1 }, [
 			l("button", {
 				ref_key: "anchor",
-				ref: F,
-				id: b(M),
+				ref: I,
+				id: b(N),
 				type: "button",
 				class: "bless-datepicker__trigger",
 				disabled: d.disabled,
 				"aria-haspopup": "dialog",
-				"aria-expanded": P.value,
-				"aria-invalid": d.invalid || b(N).invalid.value || void 0,
-				"aria-describedby": b(N).describedby.value,
-				onClick: t[1] ||= (e) => P.value = !P.value,
-				onKeydown: t[2] ||= T((e) => P.value &&= (e.preventDefault(), !1), ["esc"])
+				"aria-expanded": F.value,
+				"aria-invalid": d.invalid || b(P).invalid.value || void 0,
+				"aria-describedby": b(P).describedby.value,
+				onClick: t[1] ||= (e) => F.value = !F.value,
+				onKeydown: t[2] ||= T((e) => F.value &&= (e.preventDefault(), !1), ["esc"])
 			}, [t[5] ||= l("span", {
 				class: "bless-datepicker__icon",
 				"aria-hidden": "true"
-			}, "▦", -1), l("span", { class: m(["bless-datepicker__text", { "bless-datepicker__text--placeholder": !H.value }]) }, y(H.value || d.placeholder), 3)], 40, k),
-			H.value && !d.disabled ? (_(), c("button", {
+			}, "▦", -1), l("span", { class: m(["bless-datepicker__text", { "bless-datepicker__text--placeholder": !U.value }]) }, y(U.value || d.placeholder), 3)], 40, k),
+			U.value && !d.disabled ? (_(), c("button", {
 				key: 0,
 				type: "button",
 				class: "bless-datepicker__clear",
-				"aria-label": "Clear date",
-				onClick: W
-			}, " × ")) : s("", !0),
+				"aria-label": d.clearLabel,
+				onClick: G
+			}, " × ", 8, A)) : s("", !0),
 			l("div", {
 				ref_key: "panel",
-				ref: I,
+				ref: L,
 				popover: "auto",
 				class: "bless-datepicker__panel",
 				style: h({
-					left: `${b(L)}px`,
-					top: `${b(R)}px`
+					left: `${b(R)}px`,
+					top: `${b(z)}px`
 				}),
 				role: "dialog",
 				"aria-label": d.placeholder,
-				onToggle: t[4] ||= (e) => P.value = e.newState === "open",
-				onKeydown: T(E(U, ["stop", "prevent"]), ["esc"])
+				onToggle: t[4] ||= (e) => F.value = e.newState === "open",
+				onKeydown: T(E(W, ["stop", "prevent"]), ["esc"])
 			}, [u(i, {
-				modelValue: j.value,
-				"onUpdate:modelValue": t[3] ||= (e) => j.value = e,
+				modelValue: M.value,
+				"onUpdate:modelValue": t[3] ||= (e) => M.value = e,
 				range: d.range,
 				min: d.min,
 				max: d.max,
@@ -129,9 +130,9 @@ var D = {
 				"min",
 				"max",
 				"locale"
-			])], 44, A)
+			])], 44, j)
 		], 64))], 2));
 	}
 });
 //#endregion
-export { j as default };
+export { M as default };

package/dist/components/BlessDock.css

@@ -0,0 +1 @@
+.bless-dock{align-items:flex-end;gap:var(--bless-space-2);padding:var(--bless-space-2);background:var(--bless-color-surface);border:var(--bless-border-width) solid var(--bless-color-border);font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);display:inline-flex}.bless-dock--left,.bless-dock--right{flex-direction:column}.bless-dock--left{align-items:flex-start}.bless-dock--right{align-items:flex-end}.bless-dock__item{width:var(--_size);height:var(--_size);color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;place-items:center;padding:0;text-decoration:none;display:grid;position:relative}.bless-dock__item:disabled,.bless-dock__item[aria-disabled=true]{opacity:.45;cursor:not-allowed}.bless-dock__item:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-dock__icon{background:var(--bless-color-bg);border:var(--bless-border-width) solid var(--bless-color-border);width:100%;height:100%;font-size:calc(var(--_size) * .5);transform:scale(var(--_s,1));transform-origin:50% 100%;transition:transform var(--bless-duration-fast) var(--bless-ease-out);place-items:center;display:grid}.bless-dock--left .bless-dock__icon{transform-origin:0}.bless-dock--right .bless-dock__icon{transform-origin:100%}.bless-dock__item:hover .bless-dock__icon{border-color:var(--bless-color-accent)}.bless-dock__badge{top:-4px;background:var(--bless-color-badge);min-width:16px;color:var(--bless-color-on-accent);font-size:var(--bless-text-2xs);text-align:center;padding:0 4px;line-height:16px;position:absolute;inset-inline-end:-4px}.bless-dock__tip{inset-inline-start:50%;bottom:calc(100% + 6px + (var(--_s,1) - 1) * var(--_size));padding:2px var(--bless-space-2);background:var(--bless-color-text);color:var(--bless-color-bg);font-size:var(--bless-text-xs);white-space:nowrap;opacity:0;pointer-events:none;position:absolute;translate:-50%}.bless-dock--left .bless-dock__tip,.bless-dock--right .bless-dock__tip{top:50%;bottom:auto;translate:0 -50%}.bless-dock--left .bless-dock__tip{inset-inline-start:calc(100% + 6px + (var(--_s,1) - 1) * var(--_size))}.bless-dock--right .bless-dock__tip{inset-inline-start:auto;inset-inline-end:calc(100% + 6px + (var(--_s,1) - 1) * var(--_size))}.bless-dock__item:hover .bless-dock__tip,.bless-dock__item:focus-visible .bless-dock__tip{opacity:1}@media (prefers-reduced-motion:reduce){.bless-dock__icon{transition:none}}

package/dist/components/BlessDock.js

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

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

@@ -0,0 +1,55 @@
+export interface BlessDockItem {
+    id: string;
+    label: string;
+    /** a character, emoji or short text drawn big; use the `#item` slot for an image or icon */
+    icon?: string;
+    href?: string;
+    badge?: string | number;
+    disabled?: boolean;
+}
+/** Scale for an item whose centre is `distance` px from the pointer: `max` at 0, 1 beyond `radius`. */
+export declare function magnify(distance: number, radius: number, max: number): number;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
+    items: BlessDockItem[];
+    /** the screen edge it sits on: sets the direction it lays out, grows and is navigated in */
+    position?: "bottom" | "left" | "right";
+    /** px, the resting size of an icon */
+    size?: number;
+    /** how much the icon under the pointer grows; 1 turns the effect off */
+    magnification?: number;
+    /** px of reach either side of the pointer */
+    radius?: number;
+    label?: string;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (item: BlessDockItem) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    items: BlessDockItem[];
+    /** the screen edge it sits on: sets the direction it lays out, grows and is navigated in */
+    position?: "bottom" | "left" | "right";
+    /** px, the resting size of an icon */
+    size?: number;
+    /** how much the icon under the pointer grows; 1 turns the effect off */
+    magnification?: number;
+    /** px of reach either side of the pointer */
+    radius?: number;
+    label?: string;
+}> & Readonly<{
+    onSelect?: ((item: BlessDockItem) => any) | undefined;
+}>, {
+    label: string;
+    size: number;
+    position: "bottom" | "left" | "right";
+    radius: number;
+    magnification: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    item?: (props: {
+        item: BlessDockItem;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BlessDock.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,100 @@
+import { reducedMotion as e } from "../composables/useMedia.js";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderList as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, withCtx as _ } from "vue";
+//#region src/components/BlessDock.vue?vue&type=script&setup=true&lang.ts
+var v = ["aria-label", "aria-orientation"], y = {
+	class: "bless-dock__icon",
+	"aria-hidden": "true"
+}, b = {
+	key: 0,
+	class: "bless-dock__badge",
+	"aria-hidden": "true"
+}, x = {
+	class: "bless-dock__tip",
+	"aria-hidden": "true"
+};
+function S(e, t, n) {
+	let r = Math.abs(e);
+	return r >= t ? 1 : 1 + (n - 1) * (.5 + .5 * Math.cos(Math.PI * r / t));
+}
+var C = /*@__PURE__*/ c({
+	name: "BlessDock",
+	__name: "BlessDock",
+	props: {
+		items: {},
+		position: { default: "bottom" },
+		size: { default: 44 },
+		magnification: { default: 1.6 },
+		radius: { default: 110 },
+		label: { default: "Dock" }
+	},
+	emits: ["select"],
+	setup(c, { emit: C }) {
+		let w = c, T = C, E = n(() => w.position !== "bottom"), D = f(), O = f([]), k = f(0), A = (e) => O.value[e] ?? 1, j = () => w.magnification > 1 && !e(), M = () => Array.from(D.value?.querySelectorAll(".bless-dock__item") ?? [], (e) => {
+			let t = e.getBoundingClientRect();
+			return E.value ? t.top + t.height / 2 : t.left + t.width / 2;
+		});
+		function N(e) {
+			O.value = M().map((t) => S(t - e, w.radius, w.magnification));
+		}
+		let P = () => O.value = [];
+		function F(e) {
+			e.pointerType !== "touch" && j() && N(E.value ? e.clientY : e.clientX);
+		}
+		function I(e) {
+			let t = e.target, n = Array.from(D.value?.querySelectorAll(".bless-dock__item") ?? []).indexOf(t);
+			if (!(n < 0) && (k.value = n, j() && t.matches(":focus-visible"))) {
+				let e = t.getBoundingClientRect();
+				N(E.value ? e.top + e.height / 2 : e.left + e.width / 2);
+			}
+		}
+		function L(e) {
+			let t = Array.from(D.value?.querySelectorAll(".bless-dock__item:not(:disabled)") ?? []), n = t.indexOf(document.activeElement);
+			if (n < 0) return;
+			let [r, i] = E.value ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"], a = getComputedStyle(D.value).direction === "rtl" && !E.value ? -1 : 1, o = e.key === i ? n + a : e.key === r ? n - a : e.key === "Home" ? 0 : e.key === "End" ? t.length - 1 : null;
+			o !== null && (e.preventDefault(), t[(o + t.length) % t.length].focus());
+		}
+		return (e, n) => (d(), a("div", {
+			ref_key: "root",
+			ref: D,
+			class: l(["bless-dock", `bless-dock--${c.position}`]),
+			role: "toolbar",
+			"aria-label": c.label,
+			"aria-orientation": E.value ? "vertical" : "horizontal",
+			style: u({ "--_size": `${c.size}px` }),
+			onPointermove: F,
+			onPointerleave: P,
+			onFocusin: I,
+			onFocusout: P,
+			onKeydown: L
+		}, [(d(!0), a(t, null, p(c.items, (t, n) => (d(), r(h(t.href ? "a" : "button"), {
+			key: t.id,
+			class: "bless-dock__item",
+			href: t.href,
+			type: t.href ? void 0 : "button",
+			disabled: t.href ? void 0 : t.disabled,
+			"aria-disabled": t.href && t.disabled ? !0 : void 0,
+			"aria-label": t.label,
+			tabindex: k.value === n ? 0 : -1,
+			style: u({ "--_s": A(n) }),
+			onClick: (e) => !t.disabled && T("select", t)
+		}, {
+			default: _(() => [
+				o("span", y, [m(e.$slots, "item", { item: t }, () => [s(g(t.icon), 1)])]),
+				t.badge == null ? i("", !0) : (d(), a("span", b, g(t.badge), 1)),
+				o("span", x, g(t.label), 1)
+			]),
+			_: 2
+		}, 1032, [
+			"href",
+			"type",
+			"disabled",
+			"aria-disabled",
+			"aria-label",
+			"tabindex",
+			"style",
+			"onClick"
+		]))), 128))], 46, v));
+	}
+});
+//#endregion
+export { C as default, S as magnify };

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

@@ -19,6 +19,8 @@ type __VLS_Props = {
     editor: Editor | null | undefined;
     tools?: BlessEditorTool[];
     label?: string;
+    /** rename tools by key: `{ bold: "Tebal", h1: "Judul 1" }` */
+    labels?: Partial<Record<Exclude<BlessEditorTool, "|">, string>>;
     disabled?: boolean;
     /** min height of the writing area */
     minHeight?: string;

package/dist/components/BlessEditor.vue_vue_type_script_setup_true_lang.js

@@ -38,94 +38,95 @@ var m = ["aria-label"], h = {
 			"redo"
 		] },
 		label: { default: "Formatting" },
+		labels: {},
 		disabled: { type: Boolean },
 		minHeight: { default: "160px" }
 	},
 	setup(a) {
 		let b = l();
 		e(b);
-		let x = (e) => e.chain().focus(), S = {
+		let x = a, S = (e) => x.labels?.[e] ?? w[e].title, C = (e) => e.chain().focus(), w = {
 			bold: {
 				title: "Bold",
 				icon: "B",
-				run: (e) => x(e).toggleBold().run(),
+				run: (e) => C(e).toggleBold().run(),
 				active: (e) => e.isActive("bold")
 			},
 			italic: {
 				title: "Italic",
 				icon: "I",
-				run: (e) => x(e).toggleItalic().run(),
+				run: (e) => C(e).toggleItalic().run(),
 				active: (e) => e.isActive("italic")
 			},
 			strike: {
 				title: "Strikethrough",
 				icon: "S",
-				run: (e) => x(e).toggleStrike().run(),
+				run: (e) => C(e).toggleStrike().run(),
 				active: (e) => e.isActive("strike")
 			},
 			code: {
 				title: "Inline code",
 				icon: "‹›",
-				run: (e) => x(e).toggleCode().run(),
+				run: (e) => C(e).toggleCode().run(),
 				active: (e) => e.isActive("code")
 			},
 			h1: {
 				title: "Heading 1",
 				icon: "H1",
-				run: (e) => x(e).toggleHeading({ level: 1 }).run(),
+				run: (e) => C(e).toggleHeading({ level: 1 }).run(),
 				active: (e) => e.isActive("heading", { level: 1 })
 			},
 			h2: {
 				title: "Heading 2",
 				icon: "H2",
-				run: (e) => x(e).toggleHeading({ level: 2 }).run(),
+				run: (e) => C(e).toggleHeading({ level: 2 }).run(),
 				active: (e) => e.isActive("heading", { level: 2 })
 			},
 			h3: {
 				title: "Heading 3",
 				icon: "H3",
-				run: (e) => x(e).toggleHeading({ level: 3 }).run(),
+				run: (e) => C(e).toggleHeading({ level: 3 }).run(),
 				active: (e) => e.isActive("heading", { level: 3 })
 			},
 			bulletList: {
 				title: "Bullet list",
 				icon: "•",
-				run: (e) => x(e).toggleBulletList().run(),
+				run: (e) => C(e).toggleBulletList().run(),
 				active: (e) => e.isActive("bulletList")
 			},
 			orderedList: {
 				title: "Numbered list",
 				icon: "1.",
-				run: (e) => x(e).toggleOrderedList().run(),
+				run: (e) => C(e).toggleOrderedList().run(),
 				active: (e) => e.isActive("orderedList")
 			},
 			blockquote: {
 				title: "Quote",
 				icon: "❝",
-				run: (e) => x(e).toggleBlockquote().run(),
+				run: (e) => C(e).toggleBlockquote().run(),
 				active: (e) => e.isActive("blockquote")
 			},
 			codeBlock: {
 				title: "Code block",
 				icon: "{ }",
-				run: (e) => x(e).toggleCodeBlock().run(),
+				run: (e) => C(e).toggleCodeBlock().run(),
 				active: (e) => e.isActive("codeBlock")
 			},
 			hr: {
 				title: "Rule",
 				icon: "―",
-				run: (e) => x(e).setHorizontalRule().run()
+				run: (e) => C(e).setHorizontalRule().run()
 			},
 			undo: {
 				title: "Undo",
 				icon: "↶",
-				run: (e) => x(e).undo().run(),
+				run: (e) => C(e).undo().run(),
 				can: (e) => e.can().undo()
 			},
 			redo: {
 				title: "Redo",
 				icon: "↷",
-				run: (e) => x(e).redo().run(),
+				run: (e) => C(e).redo().run(),
 				can: (e) => e.can().redo()
 			}
 		};
@@ -142,14 +143,14 @@ var m = ["aria-label"], h = {
 			}, [d(e.$slots, "toolbar", { editor: a.editor }, () => [(c(!0), r(t, null, u(a.tools, (e, n) => (c(), r(t, { key: n }, [e === "|" ? (c(), r("span", h)) : (c(), r("button", {
 				key: 1,
 				type: "button",
-				class: o(["bless-editor__tool", { "bless-editor__tool--on": a.editor && S[e].active?.(a.editor) }]),
-				title: S[e].title,
-				"aria-label": S[e].title,
-				"aria-pressed": S[e].active ? !!(a.editor && S[e].active(a.editor)) : void 0,
-				disabled: a.disabled || !a.editor || (S[e].can ? !S[e].can(a.editor) : !1),
+				class: o(["bless-editor__tool", { "bless-editor__tool--on": a.editor && w[e].active?.(a.editor) }]),
+				title: S(e),
+				"aria-label": S(e),
+				"aria-pressed": w[e].active ? !!(a.editor && w[e].active(a.editor)) : void 0,
+				disabled: a.disabled || !a.editor || (w[e].can ? !w[e].can(a.editor) : !1),
 				onMousedown: l[0] ||= p(() => {}, ["prevent"]),
-				onClick: (t) => a.editor && S[e].run(a.editor)
-			}, [i("span", _, f(S[e].icon), 1)], 42, g))], 64))), 128))])], 8, m),
+				onClick: (t) => a.editor && w[e].run(a.editor)
+			}, [i("span", _, f(w[e].icon), 1)], 42, g))], 64))), 128))])], 8, m),
 			i("div", v, [d(e.$slots, "default")]),
 			e.$slots.footer ? (c(), r("div", y, [d(e.$slots, "footer", { editor: a.editor })])) : n("", !0)
 		], 6));

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

@@ -9,6 +9,8 @@ type __VLS_Props = {
     hint?: string;
     /** show the chosen files under the zone */
     list?: boolean;
+    /** name of a file's remove button */
+    removeLabel?: (name: string) => string;
 };
 type __VLS_ModelProps = {
     modelValue?: File[];

package/dist/components/BlessFileInput.vue_vue_type_script_setup_true_lang.js

@@ -29,7 +29,8 @@ var x = ["for"], S = [
 		list: {
 			type: Boolean,
 			default: !0
-		}
+		},
+		removeLabel: {}
 	}, {
 		modelValue: { default: () => [] },
 		modelModifiers: {}
@@ -97,7 +98,7 @@ var x = ["for"], S = [
 			o("button", {
 				type: "button",
 				class: "bless-file__remove",
-				"aria-label": `Remove ${e.name}`,
+				"aria-label": (c.removeLabel ?? ((e) => `Remove ${e}`))(e.name),
 				onClick: (e) => R(t)
 			}, " × ", 8, O)
 		]))), 128))], 512)) : i("", !0)], 2));

package/dist/components/BlessFormula.css

@@ -0,0 +1 @@
+.bless-formula{gap:var(--bless-space-2);max-width:480px;font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);display:grid}.bless-formula__label{font-weight:var(--bless-font-weight-bold,700)}.bless-formula__input{box-sizing:border-box;width:100%;min-height:36px;padding:var(--bless-space-1) var(--bless-space-3);background:var(--bless-color-bg);border:var(--bless-border-width) solid var(--bless-color-border);color:var(--bless-color-text);font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.bless-formula__input:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:1px}.bless-formula--bad .bless-formula__input{border-color:var(--bless-color-danger)}.bless-formula__vars{gap:var(--bless-space-1);flex-wrap:wrap;display:flex}.bless-formula__chip{padding:2px var(--bless-space-2);background:var(--bless-color-surface);border:var(--bless-border-width) solid var(--bless-color-border);color:inherit;font:inherit;font-size:var(--bless-text-xs);cursor:pointer}.bless-formula__chip[aria-pressed=true]{border-color:var(--bless-color-accent);color:var(--bless-color-accent-text)}.bless-formula__chip:focus-visible,.bless-formula__fix:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-formula__out{min-height:1.6em;margin:0}.bless-formula__value{font-weight:var(--bless-font-weight-bold,700)}.bless-formula__error{color:var(--bless-color-danger-text)}.bless-formula__fix{color:var(--bless-color-accent-text);font:inherit;cursor:pointer;background:0 0;border:0;margin-inline-start:var(--bless-space-2);padding:0;text-decoration:underline}

package/dist/components/BlessFormula.js

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

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

@@ -0,0 +1,53 @@
+import { FormulaError, FormulaFns } from '../composables/formula';
+export interface BlessFormulaVariable {
+    name: string;
+    /** what the chip says instead of the name */
+    label?: string;
+    value: number;
+}
+export type { FormulaError as BlessFormulaError } from '../composables/formula';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<{
+    variables?: BlessFormulaVariable[];
+    /** extra functions: `{ vat: (x) => x * 0.11 }` */
+    functions?: FormulaFns;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    locale?: string;
+    labels?: Partial<{
+        insert: string;
+        result: (value: string) => string;
+        error: (e: FormulaError) => string;
+        use: (name: string) => string;
+    }>;
+} & {
+    modelValue?: string;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    result: (value: number | null) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    variables?: BlessFormulaVariable[];
+    /** extra functions: `{ vat: (x) => x * 0.11 }` */
+    functions?: FormulaFns;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    locale?: string;
+    labels?: Partial<{
+        insert: string;
+        result: (value: string) => string;
+        error: (e: FormulaError) => string;
+        use: (name: string) => string;
+    }>;
+} & {
+    modelValue?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onResult?: ((value: number | null) => any) | undefined;
+}>, {
+    label: string;
+    placeholder: string;
+    variables: BlessFormulaVariable[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;