blessing-ui 0.1.0

package/dist/components/BlessDatePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,137 @@
+import { useFieldId as e, useFieldState as t } from "../composables/useFieldId.js";
+import { useFloating as n } from "../composables/useFloating.js";
+import { fromISO as r } from "../composables/date.js";
+import i from "./BlessCalendar.js";
+import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeModels as f, nextTick as p, normalizeClass as m, normalizeStyle as h, onMounted as g, openBlock as _, ref as v, toDisplayString as y, unref as b, useModel as x, vModelText as S, watch as C, withDirectives as w, withKeys as T, withModifiers as E } from "vue";
+//#region src/components/BlessDatePicker.vue?vue&type=script&setup=true&lang.ts
+var D = {
+	key: 0,
+	class: "bless-datepicker__field bless-lean--field"
+}, O = [
+	"id",
+	"min",
+	"max",
+	"disabled",
+	"aria-invalid",
+	"aria-describedby"
+], k = [
+	"id",
+	"disabled",
+	"aria-expanded",
+	"aria-invalid",
+	"aria-describedby"
+], A = ["aria-label", "onKeydown"], j = /*@__PURE__*/ d({
+	name: "BlessDatePicker",
+	__name: "BlessDatePicker",
+	props: /*@__PURE__*/ f({
+		id: {},
+		range: { type: Boolean },
+		min: {},
+		max: {},
+		placeholder: { default: "Select date" },
+		locale: { default: "ja-JP" },
+		disabled: { type: Boolean },
+		invalid: { type: Boolean },
+		nativeOnTouch: {
+			type: Boolean,
+			default: !0
+		},
+		size: { default: "md" }
+	}, {
+		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, {
+			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));
+		});
+		function U() {
+			P.value = !1, F.value?.focus();
+		}
+		C(P, (e) => p(() => {
+			let t = I.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();
+		});
+		function W() {
+			j.value = void 0, F.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--disabled": d.disabled
+		}]]) }, [B.value ? (_(), c("span", D, [w(l("input", {
+			id: b(M),
+			"onUpdate:modelValue": t[0] ||= (e) => j.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 }, [
+			l("button", {
+				ref_key: "anchor",
+				ref: F,
+				id: b(M),
+				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"])
+			}, [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", {
+				key: 0,
+				type: "button",
+				class: "bless-datepicker__clear",
+				"aria-label": "Clear date",
+				onClick: W
+			}, " × ")) : s("", !0),
+			l("div", {
+				ref_key: "panel",
+				ref: I,
+				popover: "auto",
+				class: "bless-datepicker__panel",
+				style: h({
+					left: `${b(L)}px`,
+					top: `${b(R)}px`
+				}),
+				role: "dialog",
+				"aria-label": d.placeholder,
+				onToggle: t[4] ||= (e) => P.value = e.newState === "open",
+				onKeydown: T(E(U, ["stop", "prevent"]), ["esc"])
+			}, [u(i, {
+				modelValue: j.value,
+				"onUpdate:modelValue": t[3] ||= (e) => j.value = e,
+				range: d.range,
+				min: d.min,
+				max: d.max,
+				locale: d.locale
+			}, null, 8, [
+				"modelValue",
+				"range",
+				"min",
+				"max",
+				"locale"
+			])], 44, A)
+		], 64))], 2));
+	}
+});
+//#endregion
+export { j as default };

package/dist/components/BlessDeferredContent.js

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

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

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    rootMargin?: string;
+    minHeight?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    placeholder?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    load: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onLoad?: (() => any) | undefined;
+}>, {
+    minHeight: string;
+    rootMargin: 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;
+    };
+};

package/dist/components/BlessDeferredContent.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,30 @@
+import { createElementBlock as e, defineComponent as t, normalizeStyle as n, onBeforeUnmount as r, onMounted as i, openBlock as a, ref as o, renderSlot as s } from "vue";
+//#region src/components/BlessDeferredContent.vue?vue&type=script&setup=true&lang.ts
+var c = /*@__PURE__*/ t({
+	name: "BlessDeferredContent",
+	__name: "BlessDeferredContent",
+	props: {
+		rootMargin: { default: "200px" },
+		minHeight: { default: "1px" }
+	},
+	emits: ["load"],
+	setup(t, { emit: c }) {
+		let l = t, u = c, d = o(), f = o(!1), p;
+		return i(() => {
+			if (typeof IntersectionObserver > "u") {
+				f.value = !0, u("load");
+				return;
+			}
+			p = new IntersectionObserver(([e]) => {
+				e?.isIntersecting && (f.value = !0, u("load"), p?.disconnect());
+			}, { rootMargin: l.rootMargin }), p.observe(d.value);
+		}), r(() => p?.disconnect()), (r, i) => (a(), e("div", {
+			ref_key: "el",
+			ref: d,
+			class: "bless-deferred",
+			style: n({ minHeight: f.value ? void 0 : t.minHeight })
+		}, [f.value ? s(r.$slots, "default", {}, void 0, void 0, 0) : s(r.$slots, "placeholder", {}, void 0, void 0, 1)], 4));
+	}
+});
+//#endregion
+export { c as default };

package/dist/components/BlessDialogHost.css

@@ -0,0 +1 @@
+.bless-dialog-host__text{font-size:var(--bless-text-sm);line-height:var(--bless-leading-normal);margin:0}

package/dist/components/BlessDialogHost.js

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

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessDialogHost.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,36 @@
+import e from "./BlessModal.js";
+import { dialogState as t, useDialog as n } from "../composables/useDialog.js";
+import { Fragment as r, createBlock as i, createElementBlock as a, defineComponent as o, mergeProps as s, openBlock as c, renderList as l, resolveDynamicComponent as u, toDisplayString as d, unref as f, withCtx as p } from "vue";
+//#region src/components/BlessDialogHost.vue?vue&type=script&setup=true&lang.ts
+var m = {
+	key: 1,
+	class: "bless-dialog-host__text"
+}, h = /*@__PURE__*/ o({
+	name: "BlessDialogHost",
+	__name: "BlessDialogHost",
+	setup(o) {
+		let { close: h } = n();
+		return (n, o) => (c(!0), a(r, null, l(f(t).items, (t) => (c(), i(e, {
+			key: t.id,
+			"model-value": t.open,
+			title: t.title,
+			size: t.size ?? "md",
+			dismissible: t.dismissible ?? !0,
+			"onUpdate:modelValue": (e) => !e && f(h)(t.id)
+		}, {
+			default: p(() => [t.component ? (c(), i(u(t.component), s({
+				key: 0,
+				ref_for: !0
+			}, t.props ?? {}, { close: (e) => f(h)(t.id, e) }), null, 16, ["close"])) : (c(), a("p", m, d(t.text), 1))]),
+			_: 2
+		}, 1032, [
+			"model-value",
+			"title",
+			"size",
+			"dismissible",
+			"onUpdate:modelValue"
+		]))), 128));
+	}
+});
+//#endregion
+export { h as default };

package/dist/components/BlessDrawer.js

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

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

@@ -0,0 +1,34 @@
+type __VLS_Props = {
+    title?: string;
+    dismissible?: boolean;
+    closeLabel?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_11: {}, __VLS_13: {}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_11) => any;
+} & {
+    default?: (props: typeof __VLS_13) => any;
+} & {
+    footer?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    dismissible: boolean;
+}, {}, {}, {}, 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/BlessDrawer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,54 @@
+import e from "./BlessSheet.js";
+import { createBlock as t, createSlots as n, defineComponent as r, mergeModels as i, openBlock as a, renderSlot as o, useModel as s, withCtx as c } from "vue";
+//#region src/components/BlessDrawer.vue?vue&type=script&setup=true&lang.ts
+var l = /*@__PURE__*/ r({
+	name: "BlessDrawer",
+	__name: "BlessDrawer",
+	props: /*@__PURE__*/ i({
+		title: {},
+		dismissible: {
+			type: Boolean,
+			default: !0
+		},
+		closeLabel: {}
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ i(["close"], ["update:modelValue"]),
+	setup(r, { emit: i }) {
+		let l = s(r, "modelValue"), u = i;
+		return (i, s) => (a(), t(e, {
+			modelValue: l.value,
+			"onUpdate:modelValue": s[0] ||= (e) => l.value = e,
+			side: "bottom",
+			handle: "",
+			title: r.title,
+			dismissible: r.dismissible,
+			"close-label": r.closeLabel,
+			class: "bless-drawer",
+			onClose: s[1] ||= (e) => u("close")
+		}, n({
+			default: c(() => [o(i.$slots, "default")]),
+			_: 2
+		}, [i.$slots.title ? {
+			name: "title",
+			fn: c(() => [o(i.$slots, "title")]),
+			key: "0"
+		} : void 0, i.$slots.footer ? {
+			name: "footer",
+			fn: c(() => [o(i.$slots, "footer")]),
+			key: "1"
+		} : void 0]), 1032, [
+			"modelValue",
+			"title",
+			"dismissible",
+			"close-label"
+		]));
+	}
+});
+//#endregion
+export { l as default };

package/dist/components/BlessDropdownMenu.css

@@ -0,0 +1 @@
+.bless-dropdown__anchor{display:inline-flex}.bless-dropdown__anchor--block{display:block}.bless-dropdown{inset:unset;background:0 0;border:0;margin:0;padding:0;position:fixed;overflow:visible}.bless-dropdown:popover-open{animation:bless-pop-in var(--bless-duration-base) var(--bless-ease-out)}

package/dist/components/BlessDropdownMenu.js

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

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

@@ -0,0 +1,43 @@
+import { Placement } from '../composables/useFloating';
+import { BlessMenuItem } from './menu';
+type __VLS_Props = {
+    items: BlessMenuItem[];
+    placement?: Placement;
+    checked?: Record<string, boolean>;
+    radios?: Record<string, string>;
+    /** context-menu mode: open at pointer on right click */
+    context?: boolean;
+    /** anchor renders as block (wraps an area rather than a button) */
+    block?: boolean;
+};
+type __VLS_ModelProps = {
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {
+    open: boolean;
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (item: BlessMenuItem) => any;
+    "update:open": (value: boolean) => any;
+    "update:checked": (v: Record<string, boolean>) => any;
+    "update:radios": (v: Record<string, string>) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((item: BlessMenuItem) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:checked"?: ((v: Record<string, boolean>) => any) | undefined;
+    "onUpdate:radios"?: ((v: Record<string, string>) => any) | undefined;
+}>, {
+    placement: Placement;
+}, {}, {}, {}, 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/BlessDropdownMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,126 @@
+import { logicalKey as e } from "../composables/rtl.js";
+import { useFloating as t } from "../composables/useFloating.js";
+import n from "./BlessMenuList.js";
+import { menubarKey as r } from "./menu.js";
+import { Fragment as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, inject as l, mergeModels as u, nextTick as d, normalizeClass as f, normalizeStyle as p, onBeforeUnmount as m, onMounted as h, openBlock as g, ref as _, renderSlot as v, unref as y, useId as b, useModel as x, watch as S } from "vue";
+//#region src/components/BlessDropdownMenu.vue?vue&type=script&setup=true&lang.ts
+var C = ["id"], w = /*@__PURE__*/ c({
+	name: "BlessDropdownMenu",
+	__name: "BlessDropdownMenu",
+	props: /*@__PURE__*/ u({
+		items: {},
+		placement: { default: "bottom-start" },
+		checked: {},
+		radios: {},
+		context: { type: Boolean },
+		block: { type: Boolean }
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ u([
+		"select",
+		"update:checked",
+		"update:radios"
+	], ["update:open"]),
+	setup(c, { emit: u }) {
+		let w = c, T = u, E = x(c, "open"), D = b(), O = _(), k = _(), A = _(), j = _(null), M = _(), { x: N, y: P } = t(M, k, E, () => ({
+			placement: w.placement,
+			offset: 4
+		})), F = l(r, null);
+		function I(e) {
+			let t = k.value;
+			t && typeof t.showPopover == "function" && (e && !t.matches(":popover-open") ? t.showPopover() : !e && t.matches(":popover-open") && t.hidePopover());
+		}
+		S(E, (e) => {
+			M.value = j.value ? { getBoundingClientRect: () => new DOMRect(j.value.x, j.value.y, 0, 0) } : O.value, d(() => {
+				I(e), e ? (A.value?.focusFirst(), F && (F.active.value = D)) : (j.value = null, F && F.active.value === D && (F.active.value = null));
+			});
+		}, { immediate: !0 });
+		function L(e) {
+			w.context || (E.value = !E.value);
+		}
+		function R(e) {
+			if (!w.context) return;
+			e.preventDefault();
+			let t = e.target.getBoundingClientRect?.();
+			j.value = e.clientX || e.clientY || !t ? {
+				x: e.clientX,
+				y: e.clientY
+			} : {
+				x: t.left,
+				y: t.bottom
+			}, E.value = !1;
+			let n = () => {
+				clearTimeout(r), removeEventListener("pointerup", n), E.value = !0;
+			};
+			addEventListener("pointerup", n, { once: !0 });
+			let r = setTimeout(n, 150);
+		}
+		function z(t) {
+			(t.key === "ArrowDown" || t.key === "ArrowUp") && (t.preventDefault(), E.value = !0, d(() => t.key === "ArrowUp" ? A.value?.focusLast() : A.value?.focusFirst())), F && (e(t) === "ArrowLeft" || e(t) === "ArrowRight") && F.focusNext(D, e(t) === "ArrowRight" ? 1 : -1);
+		}
+		function B(t) {
+			F && (e(t) === "ArrowLeft" || e(t) === "ArrowRight") && !t.target.closest(".bless-menu--sub") && !t.target.dataset.sub && (t.preventDefault(), F.focusNext(D, e(t) === "ArrowRight" ? 1 : -1));
+		}
+		function V(e) {
+			e.type === "checkbox" ? T("update:checked", {
+				...w.checked,
+				[e.value]: !w.checked?.[e.value]
+			}) : e.type === "radio" && T("update:radios", {
+				...w.radios,
+				[e.group]: e.value
+			}), T("select", e);
+		}
+		function H(e) {
+			let t = e.relatedTarget;
+			!t || k.value?.contains(t) || O.value?.contains(t) || (E.value = !1);
+		}
+		function U() {
+			E.value = !1, (O.value?.firstElementChild)?.focus?.();
+		}
+		function W() {
+			let e = O.value?.firstElementChild;
+			e?.matches("button, a[href], [role=button], input[type=button]") && (e.setAttribute("aria-haspopup", "menu"), e.setAttribute("aria-controls", D), e.setAttribute("aria-expanded", String(E.value)));
+		}
+		return h(W), S(E, () => d(W)), F?.register(D, () => E.value = !0, () => E.value = !1), m(() => F?.unregister(D)), (e, t) => (g(), a(i, null, [o("span", {
+			ref_key: "anchor",
+			ref: O,
+			class: f(["bless-dropdown__anchor", { "bless-dropdown__anchor--block": c.block }]),
+			onClick: L,
+			onContextmenu: R,
+			onKeydown: z,
+			onMouseenter: t[0] ||= (e) => y(F) && y(F).active.value && y(F).active.value !== y(D) && (E.value = !0)
+		}, [v(e.$slots, "trigger", { open: E.value })], 34), o("div", {
+			ref_key: "panel",
+			ref: k,
+			id: y(D),
+			popover: "auto",
+			class: "bless-dropdown",
+			style: p({
+				left: `${y(N)}px`,
+				top: `${y(P)}px`
+			}),
+			onToggle: t[1] ||= (e) => E.value = e.newState === "open",
+			onKeydown: B,
+			onFocusout: H
+		}, [s(n, {
+			ref_key: "list",
+			ref: A,
+			items: c.items,
+			checked: c.checked,
+			radios: c.radios,
+			onSelect: V,
+			onClose: U
+		}, null, 8, [
+			"items",
+			"checked",
+			"radios"
+		])], 44, C)], 64));
+	}
+});
+//#endregion
+export { w as default };

package/dist/components/BlessEditor.css

@@ -0,0 +1 @@
+.bless-editor{border-radius:var(--bless-radius);border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);font-family:var(--bless-font-sans);color:var(--bless-color-text);flex-direction:column;display:flex}.bless-editor:focus-within{border-color:var(--bless-color-text-muted)}.bless-editor__toolbar{padding:var(--bless-space-1);border-bottom:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-surface);flex-wrap:wrap;align-items:center;gap:2px;display:flex}.bless-editor__tool{min-width:28px;height:28px;padding:0 var(--bless-space-1);border:var(--bless-border-width) solid transparent;color:var(--bless-color-text);font:inherit;font-size:var(--bless-text-xs);font-weight:var(--bless-font-weight-bold);cursor:pointer;transform:skewX(var(--bless-skew));background:0 0;place-items:center;display:inline-grid}.bless-editor__tool>span{transform:skewX(var(--bless-skew-counter))}.bless-editor__tool:hover:not(:disabled){background:var(--bless-color-bg)}.bless-editor__tool--on{background:var(--bless-color-accent);color:var(--bless-color-on-accent)}.bless-editor__tool:disabled{opacity:.35;cursor:not-allowed}.bless-editor__tool:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:1px}.bless-editor__sep{width:var(--bless-border-width);height:18px;margin:0 var(--bless-space-1);background:var(--bless-color-border)}.bless-editor__content{padding:var(--bless-space-3) var(--bless-space-4);flex:1}.bless-editor__content .tiptap,.bless-editor__content .ProseMirror{min-height:var(--_min);font-size:var(--bless-text-md);line-height:var(--bless-leading-normal);outline:0}.bless-editor__content .tiptap>*+*{margin-top:var(--bless-space-2)}.bless-editor__content .tiptap>:first-child{margin-top:0}.bless-editor__content .tiptap :is(h1,h2,h3){margin:var(--bless-space-4) 0 var(--bless-space-2);font-weight:var(--bless-font-weight-light);letter-spacing:var(--bless-tracking-tight);line-height:var(--bless-leading-tight);border:0;padding:0}.bless-editor__content .tiptap h1{font-size:var(--bless-text-xl)}.bless-editor__content .tiptap h2{font-size:var(--bless-text-lg)}.bless-editor__content .tiptap :is(ul,ol){margin:0;padding-inline-start:var(--bless-space-6)}.bless-editor__content .tiptap li{line-height:inherit;margin:0}.bless-editor__content .tiptap li+li{margin-top:var(--bless-space-1)}.bless-editor__content .tiptap p{line-height:inherit;margin:0}.bless-editor__content .tiptap blockquote{border-inline-start:3px solid var(--bless-color-rule);color:var(--bless-color-text-muted);margin:0;padding-inline-start:var(--bless-space-3)}.bless-editor__content .tiptap code{background:var(--bless-color-surface);padding:0 4px;font-size:.9em}.bless-editor__content .tiptap pre{padding:var(--bless-space-3);background:var(--bless-color-media-bg);color:#e8e9ea;overflow-x:auto}.bless-editor__content .tiptap pre code{background:0 0;padding:0}.bless-editor__content .tiptap hr{border:0;border-top:var(--bless-border-width) solid var(--bless-color-rule)}.bless-editor__content .tiptap p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;color:var(--bless-color-text-muted);pointer-events:none}.bless-editor__footer{padding:var(--bless-space-1) var(--bless-space-3);border-top:var(--bless-border-width) solid var(--bless-color-border);font-size:var(--bless-text-xs);color:var(--bless-color-text-muted)}.bless-editor--disabled{opacity:.4;pointer-events:none}

package/dist/components/BlessEditor.js

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

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

@@ -0,0 +1,50 @@
+type Chain = {
+    run: () => boolean;
+    [command: string]: (...args: any[]) => any;
+};
+export interface BlessEditorLike {
+    chain: () => {
+        focus: () => Chain;
+    };
+    isActive: (name: string, attrs?: any) => boolean;
+    can: () => {
+        undo: () => boolean;
+        redo: () => boolean;
+    };
+}
+type Editor = BlessEditorLike;
+export type BlessEditorTool = "bold" | "italic" | "strike" | "code" | "h1" | "h2" | "h3" | "bulletList" | "orderedList" | "blockquote" | "codeBlock" | "hr" | "undo" | "redo" | "|";
+type __VLS_Props = {
+    /** the Tiptap editor from useEditor(); the content goes in the default slot as <EditorContent :editor /> */
+    editor: Editor | null | undefined;
+    tools?: BlessEditorTool[];
+    label?: string;
+    disabled?: boolean;
+    /** min height of the writing area */
+    minHeight?: string;
+};
+declare var __VLS_1: {
+    editor: BlessEditorLike | null | undefined;
+}, __VLS_3: {}, __VLS_5: {
+    editor: BlessEditorLike | null | undefined;
+};
+type __VLS_Slots = {} & {
+    toolbar?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    footer?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    tools: BlessEditorTool[];
+    minHeight: 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;
+    };
+};