blessing-ui 0.1.0

package/dist/components/BlessBottomTabs.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,67 @@
+import { useLink as e } from "../composables/useLink.js";
+import { Fragment as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, mergeModels as c, mergeProps as l, normalizeClass as u, openBlock as d, renderList as f, renderSlot as p, resolveDynamicComponent as m, toDisplayString as h, unref as g, useModel as _, withCtx as v } from "vue";
+//#region src/components/BlessBottomTabs.vue?vue&type=script&setup=true&lang.ts
+var y = ["aria-label"], b = {
+	class: "bless-bottom-tabs__icon",
+	"aria-hidden": "true"
+}, x = {
+	key: 0,
+	class: "bless-bottom-tabs__label"
+}, S = {
+	key: 1,
+	class: "bless-bottom-tabs__badge",
+	"aria-hidden": "true"
+}, C = {
+	key: 2,
+	class: "bless-bottom-tabs__sr"
+}, w = /*@__PURE__*/ s({
+	name: "BlessBottomTabs",
+	__name: "BlessBottomTabs",
+	props: /*@__PURE__*/ c({
+		items: {},
+		variant: { default: "bar" },
+		inline: { type: Boolean },
+		label: { default: "Primary" },
+		badgeLabel: { default: "new" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["select"], ["update:modelValue"]),
+	setup(s, { emit: c }) {
+		let w = e(), T = s, E = _(s, "modelValue"), D = (e) => e.badge ? e.badge === !0 ? T.badgeLabel : `${e.badge} ${T.badgeLabel}` : "", O = c;
+		return (e, c) => (d(), i("nav", {
+			class: u(["bless-bottom-tabs", [`bless-bottom-tabs--${s.variant}`, { "bless-bottom-tabs--inline": s.inline }]]),
+			"aria-label": s.label
+		}, [(d(!0), i(t, null, f(s.items, (t) => (d(), n(m(g(w)(t.href, void 0, "button").is), l({ ref_for: !0 }, g(w)(t.href, void 0, "button").attrs, {
+			key: t.value,
+			type: t.href ? void 0 : "button",
+			class: ["bless-bottom-tabs__item", { "bless-bottom-tabs__item--active": E.value === t.value }],
+			"aria-current": E.value === t.value ? "page" : void 0,
+			"aria-label": s.variant === "dock" ? [t.label, D(t)].filter(Boolean).join(", ") : void 0,
+			title: s.variant === "dock" ? t.label : void 0,
+			disabled: t.href ? void 0 : t.disabled,
+			"aria-disabled": t.disabled || void 0,
+			onClick: (e) => t.disabled ? e.preventDefault() : (E.value = t.value, O("select", t, e))
+		}), {
+			default: v(() => [
+				a("span", b, [p(e.$slots, "icon", { item: t }, () => [o(h(t.icon), 1)])]),
+				s.variant === "bar" ? (d(), i("span", x, h(t.label), 1)) : r("", !0),
+				t.badge ? (d(), i("span", S, h(t.badge === !0 ? "" : t.badge), 1)) : r("", !0),
+				t.badge && s.variant === "bar" ? (d(), i("span", C, h(D(t)), 1)) : r("", !0)
+			]),
+			_: 2
+		}, 1040, [
+			"type",
+			"class",
+			"aria-current",
+			"aria-label",
+			"title",
+			"disabled",
+			"aria-disabled",
+			"onClick"
+		]))), 128))], 10, y));
+	}
+});
+//#endregion
+export { w as default };

package/dist/components/BlessBreadcrumb.css

@@ -0,0 +1 @@
+.bless-breadcrumb__list{align-items:center;gap:var(--bless-space-2);font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);letter-spacing:var(--bless-tracking-wide);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.bless-breadcrumb__item{align-items:center;gap:var(--bless-space-2);display:inline-flex}.bless-breadcrumb__link{color:var(--bless-color-text-muted);transition:color var(--bless-duration-slow) var(--bless-ease-in-out), var(--bless-lean-transition);text-decoration:none}.bless-breadcrumb__link:hover{color:var(--bless-color-text)}.bless-breadcrumb__link:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-breadcrumb__current{color:var(--bless-color-text);font-weight:var(--bless-font-weight-bold)}.bless-breadcrumb__sep{color:var(--bless-color-text-muted);transform:skewX(var(--bless-skew));display:inline-block}

package/dist/components/BlessBreadcrumb.js

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

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

@@ -0,0 +1,28 @@
+export interface BlessCrumb {
+    label: string;
+    href?: string;
+}
+type __VLS_Props = {
+    items: BlessCrumb[];
+    label?: string;
+    separator?: string;
+};
+declare var __VLS_1: {
+    item: BlessCrumb;
+    last: boolean;
+};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_1) => 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;
+    separator: 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/BlessBreadcrumb.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,44 @@
+import { useLink as e } from "../composables/useLink.js";
+import { Fragment as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, mergeProps as c, openBlock as l, renderList as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, withCtx as h } from "vue";
+//#region src/components/BlessBreadcrumb.vue?vue&type=script&setup=true&lang.ts
+var g = ["aria-label"], _ = {
+	role: "list",
+	class: "bless-breadcrumb__list"
+}, v = ["aria-current"], y = {
+	key: 0,
+	class: "bless-breadcrumb__sep",
+	"aria-hidden": "true"
+}, b = /*@__PURE__*/ s({
+	name: "BlessBreadcrumb",
+	__name: "BlessBreadcrumb",
+	props: {
+		items: {},
+		label: { default: "Breadcrumb" },
+		separator: { default: "/" }
+	},
+	setup(s) {
+		let b = e();
+		return (e, x) => (l(), i("nav", {
+			class: "bless-breadcrumb",
+			"aria-label": s.label
+		}, [a("ol", _, [(l(!0), i(t, null, u(s.items, (t, a) => (l(), i("li", {
+			key: a,
+			class: "bless-breadcrumb__item"
+		}, [d(e.$slots, "item", {
+			item: t,
+			last: a === s.items.length - 1
+		}, () => [t.href && a < s.items.length - 1 ? (l(), n(f(m(b)(t.href).is), c({
+			key: 0,
+			ref_for: !0
+		}, m(b)(t.href).attrs, { class: "bless-breadcrumb__link" }), {
+			default: h(() => [o(p(t.label), 1)]),
+			_: 2
+		}, 1040)) : (l(), i("span", {
+			key: 1,
+			class: "bless-breadcrumb__current",
+			"aria-current": a === s.items.length - 1 ? "page" : void 0
+		}, p(t.label), 9, v))]), a < s.items.length - 1 ? (l(), i("span", y, p(s.separator), 1)) : r("", !0)]))), 128))])], 8, g));
+	}
+});
+//#endregion
+export { b as default };

package/dist/components/BlessBubble.css

@@ -0,0 +1 @@
+.bless-bubble{border-radius:var(--bless-radius-petal-lg);--_bg:var(--bless-color-surface);--_fg:var(--bless-color-text);gap:var(--bless-space-2);max-width:100%;padding:var(--bless-space-2) var(--bless-space-3);background:var(--_bg);color:var(--_fg);font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);line-height:var(--bless-leading-normal);flex-direction:column;display:inline-flex;position:relative}.bless-bubble--accent{--_bg:var(--bless-color-accent);--_fg:var(--bless-color-on-accent)}.bless-bubble--outline{--_bg:transparent;box-shadow:inset 0 0 0 var(--bless-border-width) var(--bless-color-border)}.bless-bubble--plain{--_bg:transparent;clip-path:none;padding:0}.bless-bubble+.bless-bubble{margin-top:2px}.bless-bubble__content>:first-child{margin-top:0}.bless-bubble__content>:last-child{margin-bottom:0}.bless-bubble--clamped .bless-bubble__content{-webkit-line-clamp:var(--_lines);line-clamp:var(--_lines);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.bless-bubble__more{color:inherit;font:inherit;font-size:var(--bless-text-xs);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide);text-transform:uppercase;cursor:pointer;opacity:.8;background:0 0;border:0;align-self:flex-start;padding:0}.bless-bubble__more:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-bubble__reactions{gap:var(--bless-space-1);flex-wrap:wrap;display:flex}.bless-bubble__reaction{padding:2px var(--bless-space-2);border:var(--bless-border-width) solid transparent;background:var(--bless-color-bg);color:var(--bless-color-text);font:inherit;font-size:var(--bless-text-xs);cursor:pointer;transform:skewX(var(--bless-skew));align-items:center;gap:4px;display:inline-flex}.bless-bubble__reaction>*{transform:skewX(var(--bless-skew-counter));display:inline-block}.bless-bubble__reaction[aria-pressed=true]{border-color:var(--bless-color-accent-text);color:var(--bless-color-accent-text)}.bless-bubble__reaction:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}

package/dist/components/BlessBubble.js

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

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

@@ -0,0 +1,39 @@
+export interface BlessReaction {
+    emoji: string;
+    count?: number;
+    /** current user reacted */
+    active?: boolean;
+}
+type __VLS_Props = {
+    variant?: "surface" | "accent" | "outline" | "plain";
+    align?: "start" | "end";
+    /** clamp to n lines with a show-more toggle */
+    collapsible?: boolean;
+    lines?: number;
+    reactions?: BlessReaction[];
+    moreLabel?: string;
+    lessLabel?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    react: (reaction: BlessReaction) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReact?: ((reaction: BlessReaction) => any) | undefined;
+}>, {
+    variant: "surface" | "accent" | "outline" | "plain";
+    lines: number;
+    align: "start" | "end";
+    moreLabel: string;
+    lessLabel: 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/BlessBubble.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,48 @@
+import { Fragment as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, ref as l, renderList as u, renderSlot as d, toDisplayString as f } from "vue";
+//#region src/components/BlessBubble.vue?vue&type=script&setup=true&lang.ts
+var p = { class: "bless-bubble__content" }, m = ["aria-expanded"], h = {
+	key: 1,
+	class: "bless-bubble__reactions"
+}, g = ["aria-pressed", "onClick"], _ = { key: 0 }, v = /*@__PURE__*/ a({
+	name: "BlessBubble",
+	__name: "BlessBubble",
+	props: {
+		variant: { default: "surface" },
+		align: { default: "start" },
+		collapsible: { type: Boolean },
+		lines: { default: 4 },
+		reactions: {},
+		moreLabel: { default: "Show more" },
+		lessLabel: { default: "Show less" }
+	},
+	emits: ["react"],
+	setup(a, { emit: v }) {
+		let y = v, b = l(!1);
+		return (l, v) => (c(), n("div", {
+			class: o(["bless-bubble", [
+				`bless-bubble--${a.variant}`,
+				`bless-bubble--${a.align}`,
+				{ "bless-bubble--clamped": a.collapsible && !b.value }
+			]]),
+			style: s(a.collapsible ? { "--_lines": a.lines } : void 0)
+		}, [
+			r("div", p, [d(l.$slots, "default")]),
+			a.collapsible ? (c(), n("button", {
+				key: 0,
+				type: "button",
+				class: "bless-bubble__more",
+				"aria-expanded": b.value,
+				onClick: v[0] ||= (e) => b.value = !b.value
+			}, f(b.value ? a.lessLabel : a.moreLabel), 9, m)) : t("", !0),
+			a.reactions?.length ? (c(), n("div", h, [(c(!0), n(e, null, u(a.reactions, (e) => (c(), n("button", {
+				key: e.emoji,
+				type: "button",
+				class: "bless-bubble__reaction",
+				"aria-pressed": !!e.active,
+				onClick: (t) => y("react", e)
+			}, [i(f(e.emoji), 1), e.count ? (c(), n("span", _, f(e.count), 1)) : t("", !0)], 8, g))), 128))])) : t("", !0)
+		], 6));
+	}
+});
+//#endregion
+export { v as default };

package/dist/components/BlessButton.css

@@ -0,0 +1 @@
+.bless-button{--_c:var(--bless-color-text);cursor:pointer;border:var(--bless-border-width) solid transparent;font-family:var(--bless-font-sans);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide);line-height:var(--bless-leading-none);text-transform:uppercase;transition:opacity var(--bless-duration-slow) var(--bless-ease-in-out), var(--bless-lean-transition);text-decoration:none}.bless-button--accent{--_c:var(--bless-color-accent-text)}.bless-button--danger{--_c:var(--bless-color-danger-text)}.bless-button--sm{padding:var(--bless-space-1) var(--bless-space-3);font-size:var(--bless-text-xs)}.bless-button--md{padding:var(--bless-space-2) var(--bless-space-4);font-size:var(--bless-text-sm)}.bless-button--lg{padding:var(--bless-space-3) var(--bless-space-6);font-size:var(--bless-text-md)}.bless-button--outline{border-color:var(--_c);color:var(--_c);background:0 0}.bless-button--ghost{color:var(--_c);background:0 0}.bless-button:hover:not([aria-disabled]){opacity:var(--bless-hover-opacity)}.bless-button--text:active:not([aria-disabled]),.bless-button--accent:active:not([aria-disabled]){border-color:var(--bless-color-accent);background:var(--bless-color-accent);color:var(--bless-color-on-accent);opacity:1}.bless-button:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-button[aria-disabled]{cursor:not-allowed;opacity:.4}.bless-button--loading{cursor:progress}.bless-button--block{width:100%;display:flex}.bless-button--block .bless-skew__inner{justify-content:center}.bless-button--icon.bless-button--sm{padding:var(--bless-space-1)}.bless-button--icon.bless-button--md{padding:var(--bless-space-2)}.bless-button--icon.bless-button--lg{padding:var(--bless-space-3)}.bless-button .bless-skew__inner{align-items:center;gap:var(--bless-space-2);display:inline-flex}

package/dist/components/BlessButton.js

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

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

@@ -0,0 +1,40 @@
+type __VLS_Props = {
+    variant?: "solid" | "outline" | "ghost";
+    color?: "text" | "accent" | "danger";
+    size?: "sm" | "md" | "lg";
+    /** renders <a> when set */
+    href?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    type?: "button" | "submit" | "reset";
+    /** full width of its container */
+    block?: boolean;
+    /** icon-only: equal padding all round — pass an aria-label */
+    icon?: boolean;
+};
+declare var __VLS_15: {}, __VLS_17: {}, __VLS_19: {};
+type __VLS_Slots = {} & {
+    prefix?: (props: typeof __VLS_15) => any;
+} & {
+    default?: (props: typeof __VLS_17) => any;
+} & {
+    suffix?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (e: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((e: MouseEvent) => any) | undefined;
+}>, {
+    color: "text" | "accent" | "danger";
+    size: "sm" | "md" | "lg";
+    type: "button" | "submit" | "reset";
+    variant: "solid" | "outline" | "ghost";
+}, {}, {}, {}, 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/BlessButton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,68 @@
+import e from "./BlessSkew.js";
+import { useLink as t } from "../composables/useLink.js";
+import n from "./BlessSpinner.js";
+import { computed as r, createBlock as i, defineComponent as a, mergeProps as o, openBlock as s, renderSlot as c, withCtx as l } from "vue";
+//#region src/components/BlessButton.vue?vue&type=script&setup=true&lang.ts
+var u = /*@__PURE__*/ a({
+	name: "BlessButton",
+	__name: "BlessButton",
+	props: {
+		variant: { default: "solid" },
+		color: { default: "text" },
+		size: { default: "md" },
+		href: {},
+		disabled: { type: Boolean },
+		loading: { type: Boolean },
+		type: { default: "button" },
+		block: { type: Boolean },
+		icon: { type: Boolean }
+	},
+	emits: ["click"],
+	setup(a, { emit: u }) {
+		let d = a, f = u, p = t(), m = r(() => p(d.href, void 0, "button")), h = r(() => d.disabled || d.loading), g = r(() => d.variant === "solid" ? d.color : "none");
+		function _(e) {
+			h.value ? e.preventDefault() : f("click", e);
+		}
+		return (t, r) => (s(), i(e, o({ as: m.value.is }, m.value.attrs, {
+			color: g.value,
+			class: ["bless-button", [
+				`bless-button--${a.variant}`,
+				`bless-button--${a.color}`,
+				`bless-button--${a.size}`,
+				{
+					"bless-button--loading": a.loading,
+					"bless-button--block": a.block,
+					"bless-button--icon": a.icon
+				}
+			]],
+			type: a.href ? void 0 : a.type,
+			disabled: a.href ? void 0 : a.disabled,
+			"aria-disabled": h.value || void 0,
+			"aria-busy": a.loading || void 0,
+			tabindex: a.href && h.value ? -1 : void 0,
+			onClick: _
+		}), {
+			default: l(() => [
+				a.loading ? (s(), i(n, {
+					key: 0,
+					size: "sm",
+					label: ""
+				})) : c(t.$slots, "prefix", {}, void 0, void 0, 1),
+				c(t.$slots, "default"),
+				c(t.$slots, "suffix")
+			]),
+			_: 3
+		}, 16, [
+			"as",
+			"color",
+			"class",
+			"type",
+			"disabled",
+			"aria-disabled",
+			"aria-busy",
+			"tabindex"
+		]));
+	}
+});
+//#endregion
+export { u as default };

package/dist/components/BlessButtonGroup.css

@@ -0,0 +1 @@
+.bless-button-group{align-items:stretch;display:inline-flex}.bless-button-group--vertical{--_gskew:var(--bless-skew);transform:skewX(var(--_gskew));flex-direction:column;align-items:stretch}.bless-button-group--vertical>.bless-button{--bless-skew:0deg;--bless-skew-counter:0deg}.bless-button-group--vertical>.bless-button .bless-skew__inner{transform:skewX(calc(-1 * var(--_gskew)))}.bless-button-group>.bless-button{border-radius:0;margin:0}.bless-button-group--horizontal>.bless-button:first-child{border-start-start-radius:var(--bless-radius);border-end-start-radius:var(--bless-radius)}.bless-button-group--horizontal>.bless-button:last-child{border-start-end-radius:var(--bless-radius);border-end-end-radius:var(--bless-radius)}.bless-button-group--vertical>.bless-button:first-child{border-start-start-radius:var(--bless-radius);border-start-end-radius:var(--bless-radius)}.bless-button-group--vertical>.bless-button:last-child{border-end-end-radius:var(--bless-radius);border-end-start-radius:var(--bless-radius)}.bless-button-group--horizontal>.bless-button+.bless-button{margin-inline-start:calc(-1 * var(--bless-border-width))}.bless-button-group--vertical>.bless-button+.bless-button{margin-top:calc(-1 * var(--bless-border-width))}.bless-button-group>.bless-button:focus-visible{z-index:1;position:relative}

package/dist/components/BlessButtonGroup.js

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

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    orientation?: "horizontal" | "vertical";
+    label?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, 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/BlessButtonGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,19 @@
+import { createElementBlock as e, defineComponent as t, normalizeClass as n, openBlock as r, renderSlot as i } from "vue";
+//#region src/components/BlessButtonGroup.vue?vue&type=script&setup=true&lang.ts
+var a = ["aria-label"], o = /*@__PURE__*/ t({
+	name: "BlessButtonGroup",
+	__name: "BlessButtonGroup",
+	props: {
+		orientation: { default: "horizontal" },
+		label: {}
+	},
+	setup(t) {
+		return (o, s) => (r(), e("div", {
+			class: n(["bless-button-group bless-lean", `bless-button-group--${t.orientation}`]),
+			role: "group",
+			"aria-label": t.label
+		}, [i(o.$slots, "default")], 10, a));
+	}
+});
+//#endregion
+export { o as default };

package/dist/components/BlessCalendar.css

@@ -0,0 +1 @@
+.bless-calendar{font-family:var(--bless-font-sans);color:var(--bless-color-text);-webkit-user-select:none;user-select:none;display:inline-block}.bless-calendar__grid--pending{min-block-size:248px;min-inline-size:252px}.bless-calendar__head{margin-bottom:var(--bless-space-2);justify-content:space-between;align-items:center;display:flex}.bless-calendar__month{font-size:var(--bless-text-sm);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide)}.bless-calendar__nav{width:32px;height:32px;color:var(--bless-color-text);font-size:var(--bless-text-lg);cursor:pointer;transition:opacity var(--bless-duration-slow) var(--bless-ease-in-out), var(--bless-lean-transition);background:0 0;border:0}.bless-calendar__nav:hover{opacity:var(--bless-hover-opacity)}.bless-calendar__nav:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-calendar__row{grid-template-columns:repeat(7,36px);display:grid}.bless-calendar__dow{padding:var(--bless-space-1) 0;text-align:center;font-size:var(--bless-text-2xs);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide);text-transform:uppercase;color:var(--bless-color-text-muted)}.bless-calendar__day{border-radius:var(--bless-radius);height:36px;color:inherit;font:inherit;font-size:var(--bless-text-sm);font-variant-numeric:tabular-nums;cursor:pointer;transition:background var(--bless-duration-fast), color var(--bless-duration-fast), var(--bless-lean-transition);background:0 0;border:0;position:relative}.bless-calendar__day:hover:not([aria-disabled]){background:var(--bless-color-surface)}.bless-calendar__day:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:-2px;z-index:1}.bless-calendar__day--outside{color:var(--bless-color-text-muted);font-weight:var(--bless-font-weight-light)}.bless-calendar__day--today{font-weight:var(--bless-font-weight-bold)}.bless-calendar__day--today:after{content:"";inset-inline-start:50%;background:currentColor;width:4px;height:4px;margin-inline-start:-2px;position:absolute;bottom:4px}.bless-calendar__day--in-range{background:color-mix(in srgb, var(--bless-color-accent) 16%, transparent)}.bless-calendar__day--selected{background:var(--bless-color-accent);color:var(--bless-color-on-accent);opacity:1}.bless-calendar__day--selected:after{background:var(--bless-color-on-accent)}.bless-calendar__day--start{clip-path:polygon(6px 0,100% 0,100% 100%,0 100%)}.bless-calendar__day--end,[dir=rtl] .bless-calendar__day--start{clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%)}[dir=rtl] .bless-calendar__day--end{clip-path:polygon(6px 0,100% 0,100% 100%,0 100%)}.bless-calendar__day[aria-disabled]{color:var(--bless-color-text-muted);cursor:not-allowed;text-decoration:line-through}.bless-calendar__day--outside[aria-disabled]{opacity:.5;text-decoration:none}

package/dist/components/BlessCalendar.js

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

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

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    /** range mode: model is [start, end] */
+    range?: boolean;
+    min?: string;
+    max?: string;
+    /** 0 = Sunday, 1 = Monday */
+    weekStart?: 0 | 1;
+    locale?: string;
+    disabledDates?: (iso: string) => boolean;
+    /** month shown initially (YYYY-MM); defaults to model or today */
+    month?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | [string, string] | undefined;
+};
+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 | [string, string] | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | [string, string] | undefined) => any) | undefined;
+}>, {
+    weekStart: 0 | 1;
+    locale: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessCalendar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,150 @@
+import { logicalKey as e } from "../composables/rtl.js";
+import { addDays as t, addMonths as n, fromISO as r, isoToday as i, toISO as a } from "../composables/date.js";
+import { Fragment as o, computed as s, createElementBlock as c, createElementVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, onMounted as p, openBlock as m, ref as h, renderList as g, toDisplayString as _, unref as v, useId as y, useModel as b, watch as x } from "vue";
+//#region src/components/BlessCalendar.vue?vue&type=script&setup=true&lang.ts
+var S = ["aria-label"], C = { class: "bless-calendar__head" }, w = {
+	class: "bless-calendar__month",
+	"aria-live": "polite"
+}, T = {
+	key: 0,
+	class: "bless-calendar__grid bless-calendar__grid--pending"
+}, E = {
+	role: "row",
+	class: "bless-calendar__row bless-calendar__row--head"
+}, D = [
+	"id",
+	"tabindex",
+	"aria-selected",
+	"aria-disabled",
+	"aria-label",
+	"onClick",
+	"onMouseenter",
+	"onFocus"
+], O = /*@__PURE__*/ u({
+	name: "BlessCalendar",
+	__name: "BlessCalendar",
+	props: /*@__PURE__*/ d({
+		range: { type: Boolean },
+		min: {},
+		max: {},
+		weekStart: { default: 1 },
+		locale: { default: "ja-JP" },
+		disabledDates: {},
+		month: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(u) {
+		let d = u, O = b(u, "modelValue"), k = y(), A = s(() => Array.isArray(O.value) ? O.value[0] : O.value), j = d.month ? `${d.month}-01` : A.value, M = h(""), N = h(!!j), P = h(r(j ?? i())), F = h(A.value ?? j ?? i());
+		p(() => {
+			M.value = i(), j || (P.value = r(M.value), F.value = M.value, N.value = !0);
+		});
+		let I = h(), L = h(), R = s(() => new Intl.DateTimeFormat(d.locale, {
+			year: "numeric",
+			month: "long"
+		}).format(P.value)), z = s(() => new Intl.DateTimeFormat(d.locale, { dateStyle: "full" })), B = s(() => {
+			let e = new Intl.DateTimeFormat(d.locale, { weekday: "short" }), n = new Date(2024, 0, 7 + d.weekStart);
+			return Array.from({ length: 7 }, (r, i) => e.format(t(n, i)));
+		}), V = s(() => {
+			let e = P.value.getFullYear(), t = P.value.getMonth(), n = (new Date(e, t, 1).getDay() - d.weekStart + 7) % 7, r = [];
+			for (let i = -n; r.length < 42; i++) {
+				let n = new Date(e, t, 1 + i);
+				r.push({
+					iso: a(n),
+					date: n,
+					outside: n.getMonth() !== t
+				});
+			}
+			return r;
+		}), H = (e) => d.min && e < d.min || d.max && e > d.max || !!d.disabledDates?.(e), U = s(() => {
+			if (!d.range) return null;
+			if (L.value) {
+				let e = I.value ?? F.value;
+				return e < L.value ? [e, L.value] : [L.value, e];
+			}
+			return Array.isArray(O.value) ? O.value : null;
+		}), W = (e) => d.range ? U.value?.[0] === e || U.value?.[1] === e : O.value === e, G = (e) => !!U.value && e > U.value[0] && e < U.value[1];
+		function K(e) {
+			if (!H(e)) {
+				if (F.value = e, !d.range) return void (O.value = e);
+				L.value ? (O.value = e < L.value ? [e, L.value] : [L.value, e], L.value = void 0) : L.value = e;
+			}
+		}
+		function q(e) {
+			let n = r(F.value);
+			n = t(n, e), F.value = a(n), (n.getMonth() !== P.value.getMonth() || n.getFullYear() !== P.value.getFullYear()) && (P.value = new Date(n.getFullYear(), n.getMonth(), 1)), requestAnimationFrame(() => document.getElementById(`${k}-${F.value}`)?.focus());
+		}
+		function J(t) {
+			let n = {
+				ArrowLeft: -1,
+				ArrowRight: 1,
+				ArrowUp: -7,
+				ArrowDown: 7
+			};
+			t.key in n ? (t.preventDefault(), q(n[e(t)])) : t.key === "PageUp" ? (t.preventDefault(), Y(t.shiftKey ? -12 : -1, !0)) : t.key === "PageDown" ? (t.preventDefault(), Y(t.shiftKey ? 12 : 1, !0)) : t.key === "Home" ? (t.preventDefault(), q(-((r(F.value).getDay() - d.weekStart + 7) % 7))) : t.key === "End" ? (t.preventDefault(), q(6 - (r(F.value).getDay() - d.weekStart + 7) % 7)) : (t.key === "Enter" || t.key === " ") && (t.preventDefault(), K(F.value));
+		}
+		function Y(e, t = !1) {
+			P.value = n(P.value, e), t && requestAnimationFrame(() => document.getElementById(`${k}-${F.value}`)?.focus());
+		}
+		return x(A, (e) => e && (P.value = n(r(e), 0))), x(P, (e) => {
+			let t = r(F.value);
+			(t.getFullYear() !== e.getFullYear() || t.getMonth() !== e.getMonth()) && (F.value = a(new Date(e.getFullYear(), e.getMonth(), Math.min(t.getDate(), 28))));
+		}, { immediate: !0 }), (e, t) => (m(), c("div", {
+			class: "bless-calendar",
+			role: "group",
+			"aria-label": N.value ? R.value : void 0
+		}, [l("div", C, [
+			l("button", {
+				type: "button",
+				class: "bless-calendar__nav",
+				"aria-label": "Previous month",
+				onClick: t[0] ||= (e) => Y(-1)
+			}, [...t[3] ||= [l("span", { "aria-hidden": "true" }, "‹", -1)]]),
+			l("span", w, _(N.value ? R.value : ""), 1),
+			l("button", {
+				type: "button",
+				class: "bless-calendar__nav",
+				"aria-label": "Next month",
+				onClick: t[1] ||= (e) => Y(1)
+			}, [...t[4] ||= [l("span", { "aria-hidden": "true" }, "›", -1)]])
+		]), N.value ? (m(), c("div", {
+			key: 1,
+			class: "bless-calendar__grid",
+			role: "grid",
+			onKeydown: J
+		}, [l("div", E, [(m(!0), c(o, null, g(B.value, (e) => (m(), c("span", {
+			key: e,
+			role: "columnheader",
+			class: "bless-calendar__dow"
+		}, _(e), 1))), 128))]), (m(), c(o, null, g(6, (e) => l("div", {
+			key: e,
+			role: "row",
+			class: "bless-calendar__row"
+		}, [(m(!0), c(o, null, g(V.value.slice((e - 1) * 7, e * 7), (e) => (m(), c("button", {
+			key: e.iso,
+			id: `${v(k)}-${e.iso}`,
+			type: "button",
+			role: "gridcell",
+			class: f(["bless-calendar__day", {
+				"bless-calendar__day--outside": e.outside,
+				"bless-calendar__day--today": e.iso === M.value,
+				"bless-calendar__day--selected": W(e.iso),
+				"bless-calendar__day--in-range": G(e.iso),
+				"bless-calendar__day--start": U.value?.[0] === e.iso,
+				"bless-calendar__day--end": U.value?.[1] === e.iso
+			}]),
+			tabindex: e.iso === F.value ? 0 : -1,
+			"aria-selected": W(e.iso) || void 0,
+			"aria-disabled": H(e.iso) || void 0,
+			"aria-label": z.value.format(e.date),
+			onClick: (t) => K(e.iso),
+			onMouseenter: (t) => I.value = e.iso,
+			onMouseleave: t[2] ||= (e) => I.value = void 0,
+			onFocus: (t) => F.value = e.iso
+		}, _(e.date.getDate()), 43, D))), 128))])), 64))], 32)) : (m(), c("div", T))], 8, S));
+	}
+});
+//#endregion
+export { O as default };

package/dist/components/BlessCard.css

@@ -0,0 +1 @@
+.bless-card{box-sizing:border-box;font-family:var(--bless-font-sans);color:var(--bless-color-text);border-radius:var(--bless-radius);text-decoration:none;display:block;position:relative}.bless-card--bg{background:var(--bless-color-bg)}.bless-card--surface{background:var(--bless-color-surface)}.bless-card--bordered{border:var(--bless-border-width) solid var(--bless-color-border)}.bless-card--link{transition:opacity var(--bless-duration-slow) var(--bless-ease-in-out), var(--bless-lean-transition)}.bless-card--link:hover{opacity:var(--bless-hover-opacity)}.bless-card--link:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-card__label{top:calc(-1 * var(--bless-space-3));z-index:1;padding:var(--bless-space-1) var(--bless-space-3);font-size:var(--bless-text-xs);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide);line-height:var(--bless-leading-none);text-transform:uppercase;position:absolute;inset-inline-start:var(--bless-space-4)}.bless-card__media{line-height:0}.bless-card__media>img,.bless-card__media>video{width:100%;height:auto;display:block}.bless-card__body{padding:var(--bless-space-4)}.bless-card__footer{padding:var(--bless-space-3) var(--bless-space-4);border-top:var(--bless-border-width) solid var(--bless-color-border)}

package/dist/components/BlessCard.js

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