blessing-ui 0.1.0

package/dist/components/BlessInfiniteScroll.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,64 @@
+import e from "./BlessSpinner.js";
+import t from "./BlessButton.js";
+import { createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, onBeforeUnmount as l, onMounted as u, openBlock as d, ref as f, renderSlot as p, toDisplayString as m, watch as h, withCtx as g } from "vue";
+//#region src/components/BlessInfiniteScroll.vue?vue&type=script&setup=true&lang.ts
+var _ = { class: "bless-infinite" }, v = {
+	class: "bless-infinite__status",
+	role: "status",
+	"aria-live": "polite"
+}, y = { class: "bless-infinite__sr" }, b = { class: "bless-infinite__done" }, x = /*@__PURE__*/ c({
+	name: "BlessInfiniteScroll",
+	__name: "BlessInfiniteScroll",
+	props: {
+		disabled: { type: Boolean },
+		offset: { default: 200 },
+		root: {},
+		doneText: {},
+		loadingText: { default: "Loading more" },
+		moreLabel: { default: "Load more" }
+	},
+	emits: ["load"],
+	setup(c, { expose: x, emit: S }) {
+		let C = c, w = S, T = f(), E = f(!1), D = f(!1), O = f(!1), k;
+		function A() {
+			E.value || D.value || C.disabled || (E.value = !0, w("load", (e) => {
+				E.value = !1, e && (D.value = !0), requestAnimationFrame(() => k && T.value && j());
+			}));
+		}
+		function j() {
+			let e = T.value?.getBoundingClientRect(), t = C.root ? C.root.getBoundingClientRect().bottom : window.innerHeight;
+			e && e.top <= t + C.offset && A();
+		}
+		return u(() => {
+			if (typeof IntersectionObserver > "u") return void (O.value = !0);
+			k = new IntersectionObserver(([e]) => e?.isIntersecting && A(), {
+				root: C.root ?? null,
+				rootMargin: `0px 0px ${C.offset}px 0px`
+			}), k.observe(T.value);
+		}), l(() => k?.disconnect()), h(() => C.disabled, (e) => D.value = e), x({ reset: () => (D.value = !1, E.value = !1) }), (l, u) => (d(), i("div", _, [
+			p(l.$slots, "default"),
+			a("div", {
+				ref_key: "sentinel",
+				ref: T,
+				class: "bless-infinite__sentinel",
+				"aria-hidden": "true"
+			}, null, 512),
+			a("div", v, [E.value ? p(l.$slots, "loading", {}, () => [s(e, {
+				size: "sm",
+				label: ""
+			}), a("span", y, m(c.loadingText), 1)], void 0, 0) : D.value ? p(l.$slots, "done", {}, () => [a("span", b, m(c.doneText ?? ""), 1)], void 0, 1) : r("", !0)]),
+			O.value && !E.value && !D.value ? (d(), n(t, {
+				key: 0,
+				variant: "outline",
+				size: "sm",
+				class: "bless-infinite__more",
+				onClick: A
+			}, {
+				default: g(() => [o(m(c.moreLabel), 1)]),
+				_: 1
+			})) : r("", !0)
+		]));
+	}
+});
+//#endregion
+export { x as default };

package/dist/components/BlessInplace.css

@@ -0,0 +1 @@
+.bless-inplace{font-family:var(--bless-font-sans);color:var(--bless-color-text);display:inline-block}.bless-inplace__display{border-radius:var(--bless-radius);padding:var(--bless-space-1) 0;border:0;border-bottom:var(--bless-border-width) dashed transparent;color:inherit;font:inherit;text-align:start;cursor:text;background:0 0}.bless-inplace__display:hover,.bless-inplace__display:focus-visible{border-color:var(--bless-color-text-muted)}.bless-inplace__display:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-inplace__content{align-items:center;gap:var(--bless-space-2);display:inline-flex}.bless-inplace__close{min-width:24px;min-height:24px;color:var(--bless-color-text-muted);font:inherit;font-size:var(--bless-text-md);cursor:pointer;transition:opacity var(--bless-duration-slow) var(--bless-ease-in-out), var(--bless-lean-transition);background:0 0;border:0}.bless-inplace__close:hover{opacity:var(--bless-hover-opacity)}.bless-inplace--disabled{opacity:.4;pointer-events:none}

package/dist/components/BlessInplace.js

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

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

@@ -0,0 +1,37 @@
+type __VLS_Props = {
+    closable?: boolean;
+    disabled?: boolean;
+    closeLabel?: string;
+};
+declare function close(): void;
+type __VLS_ModelProps = {
+    "active"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_3: {
+    close: typeof close;
+};
+type __VLS_Slots = {} & {
+    display?: (props: typeof __VLS_1) => any;
+} & {
+    content?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    open: () => any;
+    close: () => any;
+    "update:active": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onOpen?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+    "onUpdate:active"?: ((value: boolean) => any) | undefined;
+}>, {
+    closeLabel: 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/BlessInplace.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,53 @@
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, mergeModels as i, nextTick as a, normalizeClass as o, openBlock as s, ref as c, renderSlot as l, useModel as u, withKeys as d, withModifiers as f } from "vue";
+//#region src/components/BlessInplace.vue?vue&type=script&setup=true&lang.ts
+var p = ["disabled"], m = ["onKeydown"], h = ["aria-label"], g = /*@__PURE__*/ r({
+	name: "BlessInplace",
+	__name: "BlessInplace",
+	props: /*@__PURE__*/ i({
+		closable: { type: Boolean },
+		disabled: { type: Boolean },
+		closeLabel: { default: "Close" }
+	}, {
+		active: {
+			type: Boolean,
+			default: !1
+		},
+		activeModifiers: {}
+	}),
+	emits: /*@__PURE__*/ i(["open", "close"], ["update:active"]),
+	setup(r, { emit: i }) {
+		let g = u(r, "active"), _ = i, v = c(), y = (e) => a(() => v.value?.querySelector(e)?.focus());
+		function b() {
+			g.value = !0, _("open"), y("input, textarea, select, [contenteditable], button, [href], [tabindex]:not([tabindex='-1'])");
+		}
+		function x() {
+			g.value && (g.value = !1, _("close"), y(".bless-inplace__display"));
+		}
+		return (i, a) => (s(), t("div", {
+			ref_key: "root",
+			ref: v,
+			class: o(["bless-inplace", {
+				"bless-inplace--active": g.value,
+				"bless-inplace--disabled": r.disabled
+			}])
+		}, [g.value ? (s(), t("div", {
+			key: 1,
+			class: "bless-inplace__content",
+			onKeydown: d(f(x, ["stop", "prevent"]), ["esc"])
+		}, [l(i.$slots, "content", { close: x }), r.closable ? (s(), t("button", {
+			key: 0,
+			type: "button",
+			class: "bless-inplace__close",
+			"aria-label": r.closeLabel,
+			onClick: x
+		}, [...a[0] ||= [n("span", { "aria-hidden": "true" }, "×", -1)]], 8, h)) : e("", !0)], 40, m)) : (s(), t("button", {
+			key: 0,
+			type: "button",
+			class: "bless-inplace__display",
+			disabled: r.disabled,
+			onClick: b
+		}, [l(i.$slots, "display")], 8, p))], 2));
+	}
+});
+//#endregion
+export { g as default };

package/dist/components/BlessInput.css

@@ -0,0 +1 @@
+.bless-input{--_h:40px;--_fs:var(--bless-text-md);font-family:var(--bless-font-sans);color:var(--bless-color-text);display:block}.bless-input--sm{--_h:32px;--_fs:var(--bless-text-sm)}.bless-input--lg{--_h:48px;--_fs:var(--bless-text-lg)}.bless-input__field{border-radius:var(--bless-radius-plate);height:var(--_h);border-bottom:calc(2 * var(--bless-border-width)) solid var(--bless-color-text-muted);transition:border-color var(--bless-duration-slow) var(--bless-ease-in-out), var(--bless-lean-transition);background:0 0;align-items:center;display:flex;position:relative}.bless-input__field:after{content:"";inset-inline-start:0;bottom:calc(-2 * var(--bless-border-width));width:100%;height:calc(2 * var(--bless-border-width));background:var(--bless-color-accent);transform-origin:0;transition:transform var(--bless-duration-slow) var(--bless-ease-out);position:absolute;transform:scaleX(0)}[dir=rtl] .bless-input__field:after{transform-origin:100%}.bless-input__field:focus-within:after{transform:scaleX(1)}.bless-input__control{min-width:0;height:100%;padding:0 var(--bless-space-3);font:inherit;font-size:var(--_fs);color:inherit;background:0 0;border:0;outline:0;flex:1}.bless-input__control::placeholder{color:var(--bless-color-text-muted)}.bless-input__control:focus-visible{outline:0}.bless-input__field:focus-within{outline:2px solid #0000}.bless-input__affix{padding:0 var(--bless-space-3);font-size:var(--bless-text-sm);color:var(--bless-color-text-muted);flex:none;align-items:center;display:inline-flex}.bless-input__affix--prefix+.bless-input__control,.bless-input__affix--suffix{padding-inline-start:0}.bless-input--invalid .bless-input__field{border-bottom-color:var(--bless-color-danger)}.bless-input--invalid .bless-input__field:after{background:var(--bless-color-danger)}.bless-input--disabled{opacity:.4}.bless-input--disabled .bless-input__control{cursor:not-allowed}.bless-input__description,.bless-input__error{margin:var(--bless-space-1) 0 0;font-size:var(--bless-text-xs);line-height:var(--bless-leading-tight);color:var(--bless-color-text-muted)}.bless-input__error{color:var(--bless-color-danger-text);font-weight:var(--bless-font-weight-bold)}.bless-input__field{transform:skewX(var(--bless-skew))}.bless-input__field>:not(.bless-skew,.bless-chip,.bless-badge){transform:skewX(var(--bless-skew-counter))}.bless-input__field>:first-child{padding-inline-start:calc(var(--bless-space-3) + 4px)}.bless-input__field>:last-child{padding-inline-end:calc(var(--bless-space-3) + 4px)}

package/dist/components/BlessInput.js

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

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

@@ -0,0 +1,40 @@
+type __VLS_Props = {
+    id?: string;
+    type?: string;
+    size?: "sm" | "md" | "lg";
+    invalid?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    /** text under the field; also wired via aria-describedby */
+    description?: string;
+    /** error text; sets aria-invalid */
+    error?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    prefix?: (props: typeof __VLS_1) => any;
+} & {
+    suffix?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    id: () => string;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    type: 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/BlessInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,70 @@
+import { joinIds as e, useFieldId as t, useFieldState as n } from "../composables/useFieldId.js";
+import { createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, normalizeClass as l, openBlock as u, renderSlot as d, toDisplayString as f, unref as p, useModel as m, vModelDynamic as h, withDirectives as g } from "vue";
+//#region src/components/BlessInput.vue?vue&type=script&setup=true&lang.ts
+var _ = { class: "bless-input__field bless-lean--field" }, v = {
+	key: 0,
+	class: "bless-input__affix bless-input__affix--prefix"
+}, y = [
+	"id",
+	"type",
+	"disabled",
+	"readonly",
+	"aria-invalid",
+	"aria-describedby"
+], b = {
+	key: 1,
+	class: "bless-input__affix bless-input__affix--suffix"
+}, x = ["id"], S = ["id"], C = /*@__PURE__*/ o({
+	name: "BlessInput",
+	inheritAttrs: !1,
+	__name: "BlessInput",
+	props: /*@__PURE__*/ s({
+		id: {},
+		type: { default: "text" },
+		size: { default: "md" },
+		invalid: { type: Boolean },
+		disabled: { type: Boolean },
+		readonly: { type: Boolean },
+		description: {},
+		error: {}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(o, { expose: s }) {
+		let C = o, w = m(o, "modelValue"), T = t(C), E = n(), D = () => `${T()}-desc`, O = () => `${T()}-err`;
+		return s({ id: T }), (t, n) => (u(), i("div", { class: l(["bless-input", [`bless-input--${o.size}`, {
+			"bless-input--invalid": o.invalid || o.error || p(E).invalid.value,
+			"bless-input--disabled": o.disabled
+		}]]) }, [
+			a("div", _, [
+				t.$slots.prefix ? (u(), i("span", v, [d(t.$slots, "prefix")])) : r("", !0),
+				g(a("input", c(t.$attrs, {
+					id: p(T)(),
+					"onUpdate:modelValue": n[0] ||= (e) => w.value = e,
+					type: o.type,
+					disabled: o.disabled,
+					readonly: o.readonly,
+					class: "bless-input__control",
+					"aria-invalid": o.invalid || o.error || p(E).invalid.value ? "true" : void 0,
+					"aria-describedby": p(e)(o.description && D(), o.error && O(), p(E).describedby.value, t.$attrs["aria-describedby"])
+				}), null, 16, y), [[h, w.value]]),
+				t.$slots.suffix ? (u(), i("span", b, [d(t.$slots, "suffix")])) : r("", !0)
+			]),
+			o.description ? (u(), i("p", {
+				key: 0,
+				id: D(),
+				class: "bless-input__description"
+			}, f(o.description), 9, x)) : r("", !0),
+			o.error ? (u(), i("p", {
+				key: 1,
+				id: O(),
+				class: "bless-input__error",
+				role: "alert"
+			}, f(o.error), 9, S)) : r("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { C as default };

package/dist/components/BlessInputGroup.css

@@ -0,0 +1 @@
+.bless-input-group{border-radius:var(--bless-radius-plate);--_h:40px;min-inline-size:0;font-family:var(--bless-font-sans);color:var(--bless-color-text);border:0;border-bottom:calc(2 * var(--bless-border-width)) solid var(--bless-color-text-muted);background:0 0;align-items:stretch;margin:0;padding:0;display:flex;position:relative}.bless-input-group--sm{--_h:32px}.bless-input-group--lg{--_h:48px}.bless-input-group:after{content:"";inset-inline-start:0;bottom:calc(-2 * var(--bless-border-width));width:100%;height:calc(2 * var(--bless-border-width));background:var(--bless-color-accent);transform-origin:0;transition:transform var(--bless-duration-slow) var(--bless-ease-out);position:absolute;transform:scaleX(0)}[dir=rtl] .bless-input-group:after{transform-origin:100%}.bless-input-group:focus-within:after{transform:scaleX(1)}.bless-input-group__control{flex:1;min-width:0}.bless-input-group .bless-input__field,.bless-input-group .bless-select__field{background:0 0;border-bottom:0}.bless-input-group .bless-input__field:after{display:none}.bless-input-group__addon{align-items:center;gap:var(--bless-space-1);min-height:var(--_h);padding:0 var(--bless-space-3);font-size:var(--bless-text-sm);color:var(--bless-color-text-muted);white-space:nowrap;flex:none;display:inline-flex}.bless-input-group__addon--prefix{border-inline-end:var(--bless-border-width) solid var(--bless-color-bg)}.bless-input-group__addon--suffix{border-inline-start:var(--bless-border-width) solid var(--bless-color-bg)}.bless-input-group__addon>.bless-button{margin:0 calc(-1 * var(--bless-space-2))}.bless-input-group--disabled{opacity:.4}.bless-input-group{transform:skewX(var(--bless-skew))}.bless-input-group>:not(.bless-skew,.bless-chip,.bless-badge,.bless-input-group__after){transform:skewX(var(--bless-skew-counter))}.bless-input-group .bless-input__field,.bless-input-group .bless-select__field,.bless-input-group .bless-combobox__field,.bless-input-group .bless-input__field>*,.bless-input-group .bless-select__field>*{transform:none}

package/dist/components/BlessInputGroup.js

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

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

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    prefix?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    suffix?: (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<{}>, {
+    size: "sm" | "md" | "lg";
+}, {}, {}, {}, 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/BlessInputGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,28 @@
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, renderSlot as o } from "vue";
+//#region src/components/BlessInputGroup.vue?vue&type=script&setup=true&lang.ts
+var s = ["disabled"], c = {
+	key: 0,
+	class: "bless-input-group__addon bless-input-group__addon--prefix"
+}, l = { class: "bless-input-group__control" }, u = {
+	key: 1,
+	class: "bless-input-group__addon bless-input-group__addon--suffix"
+}, d = /*@__PURE__*/ r({
+	name: "BlessInputGroup",
+	__name: "BlessInputGroup",
+	props: {
+		size: { default: "md" },
+		disabled: { type: Boolean }
+	},
+	setup(r) {
+		return (d, f) => (a(), t("fieldset", {
+			class: i(["bless-input-group bless-lean--field", [`bless-input-group--${r.size}`, { "bless-input-group--disabled": r.disabled }]]),
+			disabled: r.disabled
+		}, [
+			d.$slots.prefix ? (a(), t("span", c, [o(d.$slots, "prefix")])) : e("", !0),
+			n("div", l, [o(d.$slots, "default")]),
+			d.$slots.suffix ? (a(), t("span", u, [o(d.$slots, "suffix")])) : e("", !0)
+		], 10, s));
+	}
+});
+//#endregion
+export { d as default };

package/dist/components/BlessInputMask.js

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

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    /** # digit · A letter · * letter or digit · anything else is a literal */
+    mask: string;
+    /** placeholder shown when empty; defaults to the mask with tokens as _ */
+    placeholder?: string;
+};
+type __VLS_ModelProps = {
+    /** the formatted value, e.g. "090-1234-5678" */
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    "update:raw": (raw: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:raw"?: ((raw: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessInputMask.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,42 @@
+import e from "./BlessInput.js";
+import { applyMask as t, unmask as n } from "./mask.js";
+import { computed as r, createBlock as i, defineComponent as a, mergeModels as o, mergeProps as s, openBlock as c, useModel as l } from "vue";
+//#region src/components/BlessInputMask.vue?vue&type=script&setup=true&lang.ts
+var u = /*@__PURE__*/ a({
+	name: "BlessInputMask",
+	inheritAttrs: !1,
+	__name: "BlessInputMask",
+	props: /*@__PURE__*/ o({
+		mask: {},
+		placeholder: {}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ o(["update:raw"], ["update:modelValue"]),
+	setup(a, { emit: o }) {
+		let u = a, d = l(a, "modelValue"), f = o, p = r(() => u.placeholder ?? u.mask.replace(/[#A*]/g, "_")), m = r(() => !/[A*]/.test(u.mask));
+		function h(e) {
+			let r = t(u.mask, String(e));
+			d.value = r, f("update:raw", n(u.mask, r));
+		}
+		function g(e) {
+			let n = e.target, r = t(u.mask, n.value);
+			if (n.value === r) return;
+			let i = t(u.mask, n.value.slice(0, n.selectionStart ?? n.value.length)).length;
+			n.value = r, n.setSelectionRange(i, i);
+		}
+		return (t, n) => (c(), i(e, s({ inputmode: m.value ? "numeric" : void 0 }, t.$attrs, {
+			"model-value": d.value,
+			placeholder: p.value,
+			"onUpdate:modelValue": h,
+			onInputCapture: g
+		}), null, 16, [
+			"inputmode",
+			"model-value",
+			"placeholder"
+		]));
+	}
+});
+//#endregion
+export { u as default };

package/dist/components/BlessInputNumber.css

@@ -0,0 +1 @@
+.bless-number{border-radius:var(--bless-radius-plate);--_h:40px;height:var(--_h);border-bottom:calc(2 * var(--bless-border-width)) solid var(--bless-color-text-muted);font-family:var(--bless-font-sans);color:var(--bless-color-text);background:0 0;align-items:stretch;display:inline-flex}.bless-number--sm{--_h:32px}.bless-number--lg{--_h:48px}.bless-number:focus-within{border-bottom-color:var(--bless-color-accent-text)}.bless-number--invalid{border-bottom-color:var(--bless-color-danger)}.bless-number__control{width:6em;min-width:0;padding:0 var(--bless-space-2);font:inherit;font-variant-numeric:tabular-nums;text-align:end;color:inherit;background:0 0;border:0;outline:0}.bless-number__affix{padding:0 var(--bless-space-2);font-size:var(--bless-text-sm);color:var(--bless-color-text-muted);align-items:center;display:inline-flex}.bless-number__btn{width:var(--_h);color:var(--bless-color-text-muted);font:inherit;font-size:var(--bless-text-md);cursor:pointer;background:0 0;border:0}.bless-number__btn:hover:not(:disabled){color:var(--bless-color-text)}.bless-number__btn:disabled{opacity:.3;cursor:not-allowed}.bless-number--disabled{opacity:.4;pointer-events:none}.bless-number{transform:skewX(var(--bless-skew))}.bless-number>:not(.bless-skew,.bless-chip,.bless-badge){transform:skewX(var(--bless-skew-counter))}

package/dist/components/BlessInputNumber.js

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

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

@@ -0,0 +1,34 @@
+type __VLS_Props = {
+    id?: string;
+    /** submitted with the form as the plain number, not the formatted text */
+    name?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** ± buttons */
+    buttons?: boolean;
+    prefix?: string;
+    suffix?: string;
+    /** Intl.NumberFormat options used while not focused */
+    format?: Intl.NumberFormatOptions;
+    locale?: string;
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    invalid?: boolean;
+    label?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: number | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    step: number;
+    buttons: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessInputNumber.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,132 @@
+import { joinIds as e, useFieldId as t, useFieldState as n } from "../composables/useFieldId.js";
+import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeModels as c, mergeProps as l, normalizeClass as u, openBlock as d, ref as f, toDisplayString as p, unref as m, useModel as h } from "vue";
+//#region src/components/BlessInputNumber.vue?vue&type=script&setup=true&lang.ts
+var g = ["disabled"], _ = {
+	key: 1,
+	class: "bless-number__affix"
+}, v = [
+	"id",
+	"value",
+	"disabled",
+	"aria-label",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-valuemin",
+	"aria-valuemax"
+], y = ["name", "value"], b = {
+	key: 3,
+	class: "bless-number__affix"
+}, x = ["disabled"], S = /*@__PURE__*/ s({
+	name: "BlessInputNumber",
+	inheritAttrs: !1,
+	__name: "BlessInputNumber",
+	props: /*@__PURE__*/ c({
+		id: {},
+		name: {},
+		min: {},
+		max: {},
+		step: { default: 1 },
+		buttons: {
+			type: Boolean,
+			default: !0
+		},
+		prefix: {},
+		suffix: {},
+		format: {},
+		locale: {},
+		size: { default: "md" },
+		disabled: { type: Boolean },
+		invalid: { type: Boolean },
+		label: {}
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(s) {
+		let c = s, S = h(s, "modelValue"), C = t(c), w = n(), T = f(!1), E = r(() => new Intl.NumberFormat(c.locale, c.format)), D = r(() => new Intl.NumberFormat(c.locale).formatToParts(1.1).find((e) => e.type === "decimal")?.value ?? "."), O = r(() => S.value == null ? "" : T.value || !c.format ? String(S.value).replace(".", D.value) : E.value.format(S.value)), k = r(() => S.value == null ? void 0 : [
+			c.prefix,
+			c.format ? E.value.format(S.value) : S.value,
+			c.suffix
+		].filter((e) => e != null && e !== "").join(" ")), A = r(() => (String(c.step).split(".")[1] ?? "").length);
+		function j(e) {
+			let t = c.min ?? 0, n = Number((t + Math.round((e - t) / c.step) * c.step).toFixed(A.value));
+			return Math.min(c.max ?? Infinity, Math.max(c.min ?? -Infinity, n));
+		}
+		function M(e) {
+			let t = e.target.value;
+			D.value !== "." && (t = t.replaceAll(".", "").replace(D.value, ".")), t = t.replace(/[^\d.-]/g, ""), S.value = t === "" || t === "-" ? null : Number(t);
+		}
+		function N() {
+			T.value = !1, S.value != null && (S.value = j(S.value));
+		}
+		let P = (e) => S.value = j((S.value ?? c.min ?? 0) + e * c.step);
+		function F(e) {
+			let t = {
+				ArrowUp: 1,
+				ArrowDown: -1,
+				PageUp: 10,
+				PageDown: -10
+			}[e.key], n = e.key === "Home" ? c.min : e.key === "End" ? c.max : void 0;
+			if (t) P(t);
+			else if (n != null) S.value = n;
+			else return;
+			e.preventDefault();
+		}
+		return (t, n) => (d(), a("div", { class: u(["bless-number bless-lean--field", [`bless-number--${s.size}`, {
+			"bless-number--disabled": s.disabled,
+			"bless-number--invalid": s.invalid || m(w).invalid.value
+		}]]) }, [
+			s.buttons ? (d(), a("button", {
+				key: 0,
+				type: "button",
+				class: "bless-number__btn",
+				"aria-label": "Decrease",
+				disabled: s.disabled || s.min != null && (S.value ?? 0) <= s.min,
+				tabindex: "-1",
+				onClick: n[0] ||= (e) => P(-1)
+			}, " − ", 8, g)) : i("", !0),
+			s.prefix ? (d(), a("span", _, p(s.prefix), 1)) : i("", !0),
+			o("input", l(t.$attrs, {
+				id: m(C)(),
+				type: "text",
+				inputmode: "decimal",
+				class: "bless-number__control",
+				value: O.value,
+				disabled: s.disabled,
+				"aria-label": s.label,
+				"aria-invalid": s.invalid || m(w).invalid.value || void 0,
+				"aria-describedby": m(e)(m(w).describedby.value, t.$attrs["aria-describedby"]),
+				role: "spinbutton",
+				"aria-valuenow": S.value ?? void 0,
+				"aria-valuetext": k.value,
+				"aria-valuemin": s.min,
+				"aria-valuemax": s.max,
+				onFocus: n[1] ||= (e) => T.value = !0,
+				onBlur: N,
+				onInput: M,
+				onKeydown: F
+			}), null, 16, v),
+			s.name ? (d(), a("input", {
+				key: 2,
+				type: "hidden",
+				name: s.name,
+				value: S.value ?? ""
+			}, null, 8, y)) : i("", !0),
+			s.suffix ? (d(), a("span", b, p(s.suffix), 1)) : i("", !0),
+			s.buttons ? (d(), a("button", {
+				key: 4,
+				type: "button",
+				class: "bless-number__btn",
+				"aria-label": "Increase",
+				disabled: s.disabled || s.max != null && (S.value ?? 0) >= s.max,
+				tabindex: "-1",
+				onClick: n[2] ||= (e) => P(1)
+			}, " + ", 8, x)) : i("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { S as default };

package/dist/components/BlessInputOTP.css

@@ -0,0 +1 @@
+.bless-otp{align-items:center;gap:var(--bless-space-2);font-family:var(--bless-font-sans);display:inline-flex}.bless-otp__cell{border-radius:var(--bless-radius-plate);box-sizing:border-box;border:0;border-bottom:calc(2 * var(--bless-border-width)) solid var(--bless-color-text-muted);width:40px;height:48px;color:var(--bless-color-text);font:inherit;font-size:var(--bless-text-lg);font-weight:var(--bless-font-weight-bold);text-align:center;caret-color:var(--bless-color-accent-text);transform:skewX(var(--bless-skew));transition:border-color var(--bless-duration-base), var(--bless-lean-transition);background:0 0}.bless-otp__cell:focus{border-bottom-color:var(--bless-color-accent-text);background:var(--bless-color-bg);outline:0}.bless-otp__cell:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-otp__sep{background:var(--bless-color-text-muted);width:10px;height:2px}.bless-otp--invalid .bless-otp__cell{border-bottom-color:var(--bless-color-danger)}.bless-otp--disabled{opacity:.4}

package/dist/components/BlessInputOTP.js

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

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

@@ -0,0 +1,32 @@
+type __VLS_Props = {
+    /** id of the first cell; inside a BlessField it takes the field's */
+    id?: string;
+    /** submitted with the form as the joined code */
+    name?: string;
+    length?: number;
+    /** digits only (inputmode numeric) or any char */
+    numeric?: boolean;
+    /** indexes after which to render a separator */
+    separators?: number[];
+    disabled?: boolean;
+    invalid?: boolean;
+    label?: string;
+    masked?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    complete: (code: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onComplete?: ((code: string) => any) | undefined;
+}>, {
+    length: number;
+    numeric: boolean;
+    separators: number[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;