rei-kit 0.18.1 → 0.19.0

package/dist/index.js

@@ -1,9 +1,9 @@
 import { a as addDays, c as lastNDays, d as toDateKey, f as todayKey, i as needsIosInstall, l as leadingBlanks, n as isApplePortable, o as eachDayOfYear, r as isInstalled, s as fromDateKey, t as SettingsGroup_default, u as startOfWeek } from "./SettingsGroup-DtEB_Hrd.js";
-import { _ as toRedirectPath, a as FormField_default, c as useVisualViewport, d as isThemePreference, f as readStoredTheme, g as safeRedirect, h as tapFeedback, i as BaseInput_default, l as useOnline, m as useTheme, n as BaseCheckbox_default, o as BaseAlert_default, p as setThemeStorageKey, r as BaseSheet_default, s as useToast, t as GoogleButton_default, u as applyTheme } from "./GoogleButton-DV_RIpJE.js";
+import { _ as toRedirectPath, a as FormField_default, c as useVisualViewport, d as isThemePreference, f as readStoredTheme, g as safeRedirect, h as tapFeedback, i as BaseInput_default, l as useOnline, m as useTheme, n as BaseCheckbox_default, o as BaseAlert_default, p as setThemeStorageKey, r as BaseSheet_default, s as useToast, t as GoogleButton_default, u as applyTheme } from "./GoogleButton-dXOuBJwe.js";
 import { n as registerErrorMapper, r as toAppError, t as AppError } from "./app-error-DF9cijE0.js";
-import { n as BaseButton_default, t as SettingsRow_default } from "./SettingsRow-3lPRJbBZ.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
-import { Fragment, Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onErrorCaptured, onMounted, onScopeDispose, openBlock, readonly, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useModel, vModelRadio, vModelSelect, vModelText, watch, watchEffect, withCtx, withDirectives } from "vue";
+import { n as BaseButton_default, t as SettingsRow_default } from "./SettingsRow-3lPRJbBZ.js";
+import { Fragment, Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onErrorCaptured, onMounted, onScopeDispose, openBlock, readonly, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useModel, vModelRadio, vModelSelect, vModelText, watch, watchEffect, withCtx, withDirectives } from "vue";
 import { ArrowDown, ArrowRight, ArrowUp, CheckCircle2, ChevronDown, Info, TriangleAlert, X, XCircle } from "lucide-vue-next";
 import { RouterLink } from "vue-router";
 import { createI18n } from "vue-i18n";
@@ -331,6 +331,77 @@ function useMediaQuery(query) {
 	return matches;
 }
 //#endregion
+//#region src/components/BaseAvatar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$18 = [
+	"role",
+	"aria-label",
+	"aria-hidden"
+];
+var _hoisted_2$15 = ["src"];
+var _hoisted_3$8 = {
+	key: 1,
+	class: "rk-avatar-initials"
+};
+var _hoisted_4$7 = {
+	key: 2,
+	viewBox: "0 0 20 20",
+	class: "rk-avatar-figure",
+	fill: "none",
+	stroke: "currentColor"
+};
+//#endregion
+//#region src/components/BaseAvatar.vue
+var BaseAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseAvatar",
+	props: {
+		name: { default: "" },
+		src: { default: "" },
+		size: { default: "md" },
+		fallback: { default: "figure" },
+		label: { default: "" }
+	},
+	setup(__props) {
+		const broken = ref(false);
+		watch(() => __props.src, () => broken.value = false);
+		const showImage = computed(() => Boolean(__props.src) && !broken.value);
+		/**
+		* Two letters at most, from the first and last word.
+		*
+		* `Array.from` rather than `slice`, so a name written in a script outside the
+		* basic plane is cut between characters rather than through one.
+		*/
+		const initials = computed(() => {
+			const words = __props.name.trim().split(/\s+/).filter(Boolean);
+			if (words.length === 0) return "";
+			return ((Array.from(words[0])[0] ?? "") + (words.length > 1 ? Array.from(words[words.length - 1])[0] ?? "" : "")).toUpperCase();
+		});
+		const accessibleName = computed(() => __props.label || __props.name);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				class: normalizeClass(["rk-avatar", `is-${__props.size}`]),
+				role: accessibleName.value ? "img" : void 0,
+				"aria-label": accessibleName.value || void 0,
+				"aria-hidden": accessibleName.value ? void 0 : "true"
+			}, [showImage.value ? (openBlock(), createElementBlock("img", {
+				key: 0,
+				src: __props.src,
+				alt: "",
+				class: "rk-avatar-img",
+				onError: _cache[0] || (_cache[0] = ($event) => broken.value = true)
+			}, null, 40, _hoisted_2$15)) : __props.fallback === "initials" && initials.value ? (openBlock(), createElementBlock("span", _hoisted_3$8, toDisplayString(initials.value), 1)) : (openBlock(), createElementBlock("svg", _hoisted_4$7, [..._cache[1] || (_cache[1] = [createElementVNode("circle", {
+				cx: "10",
+				cy: "6.75",
+				r: "3.25",
+				"stroke-width": "1.5"
+			}, null, -1), createElementVNode("path", {
+				d: "M3.75 17c0-3.05 2.8-5.25 6.25-5.25S16.25 13.95 16.25 17",
+				"stroke-width": "1.5",
+				"stroke-linecap": "round"
+			}, null, -1)])]))], 10, _hoisted_1$18);
+		};
+	}
+}), [["__scopeId", "data-v-47586bec"]]);
+//#endregion
 //#region src/components/BaseBadge.vue
 var BaseBadge_default = /* @__PURE__ */ defineComponent({
 	__name: "BaseBadge",
@@ -350,6 +421,123 @@ var BaseBadge_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/BaseMenu.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$17 = [
+	"aria-label",
+	"aria-expanded",
+	"aria-controls"
+];
+var _hoisted_2$14 = ["id"];
+//#endregion
+//#region src/components/BaseMenu.vue
+var BaseMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseMenu",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		align: { default: "end" }
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const open = useModel(__props, "modelValue");
+		const root = ref(null);
+		const panel = ref(null);
+		const trigger = ref(null);
+		const id = useId();
+		function items() {
+			if (!panel.value) return [];
+			return Array.from(panel.value.querySelectorAll("[role=\"menuitem\"]"));
+		}
+		function focusAt(index) {
+			const list = items();
+			if (list.length === 0) return;
+			list[(index + list.length) % list.length]?.focus();
+		}
+		function currentIndex() {
+			return items().indexOf(document.activeElement);
+		}
+		function onKeydown(event) {
+			if (!open.value) {
+				if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+					event.preventDefault();
+					open.value = true;
+				}
+				return;
+			}
+			switch (event.key) {
+				case "Escape":
+					event.preventDefault();
+					open.value = false;
+					break;
+				case "ArrowDown":
+					event.preventDefault();
+					focusAt(currentIndex() + 1);
+					break;
+				case "ArrowUp":
+					event.preventDefault();
+					focusAt(currentIndex() - 1);
+					break;
+				case "Home":
+					event.preventDefault();
+					focusAt(0);
+					break;
+				case "End":
+					event.preventDefault();
+					focusAt(items().length - 1);
+					break;
+				case "Tab": open.value = false;
+			}
+		}
+		function onDocumentPointer(event) {
+			if (root.value && !root.value.contains(event.target)) open.value = false;
+		}
+		watch(open, async (isOpen) => {
+			if (typeof document === "undefined") return;
+			if (isOpen) {
+				document.addEventListener("pointerdown", onDocumentPointer);
+				await nextTick();
+				items()[0]?.focus();
+			} else {
+				document.removeEventListener("pointerdown", onDocumentPointer);
+				if (root.value?.contains(document.activeElement)) trigger.value?.focus();
+			}
+		}, { immediate: true });
+		onBeforeUnmount(() => {
+			if (typeof document !== "undefined") document.removeEventListener("pointerdown", onDocumentPointer);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				class: "rk-menu",
+				onKeydown
+			}, [createElementVNode("button", {
+				ref_key: "trigger",
+				ref: trigger,
+				type: "button",
+				class: "rk-menu-trigger",
+				"aria-label": __props.label,
+				"aria-expanded": open.value,
+				"aria-haspopup": true,
+				"aria-controls": open.value ? unref(id) : void 0,
+				onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)
+			}, [renderSlot(_ctx.$slots, "trigger", { open: open.value }, void 0, true)], 8, _hoisted_1$17), open.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				id: unref(id),
+				ref_key: "panel",
+				ref: panel,
+				class: normalizeClass(["rk-menu-panel", `is-${__props.align}`]),
+				role: "menu"
+			}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 10, _hoisted_2$14)) : createCommentVNode("", true)], 544);
+		};
+	}
+}), [["__scopeId", "data-v-8ad05b3d"]]);
+//#endregion
 //#region src/components/BaseCard.vue
 var BaseCard_default = /* @__PURE__ */ defineComponent({
 	__name: "BaseCard",
@@ -416,13 +604,13 @@ var BaseCard_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/BaseRadioGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$14 = ["aria-describedby"];
-var _hoisted_2$11 = [
+var _hoisted_1$16 = ["aria-describedby"];
+var _hoisted_2$13 = [
 	"name",
 	"value",
 	"disabled"
 ];
-var _hoisted_3$6 = { class: "text-ink text-sm" };
+var _hoisted_3$7 = { class: "text-ink text-sm" };
 //#endregion
 //#region src/components/BaseRadioGroup.vue
 var BaseRadioGroup_default = /* @__PURE__ */ defineComponent({
@@ -467,7 +655,7 @@ var BaseRadioGroup_default = /* @__PURE__ */ defineComponent({
 						value: option.value,
 						disabled: option.disabled,
 						class: "accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2"
-					}, null, 8, _hoisted_2$11), [[vModelRadio, model.value]]), createElementVNode("span", _hoisted_3$6, toDisplayString(option.label), 1)], 2);
+					}, null, 8, _hoisted_2$13), [[vModelRadio, model.value]]), createElementVNode("span", _hoisted_3$7, toDisplayString(option.label), 1)], 2);
 				}), 128)),
 				__props.error ? (openBlock(), createElementBlock("p", {
 					key: 0,
@@ -478,24 +666,24 @@ var BaseRadioGroup_default = /* @__PURE__ */ defineComponent({
 					id: hintId,
 					class: "text-ink-soft text-xs"
 				}, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
-			], 8, _hoisted_1$14);
+			], 8, _hoisted_1$16);
 		};
 	}
 });
 //#endregion
 //#region src/components/BaseSelect.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$13 = { class: "relative" };
-var _hoisted_2$10 = [
+var _hoisted_1$15 = { class: "relative" };
+var _hoisted_2$12 = [
 	"id",
 	"aria-invalid",
 	"aria-describedby"
 ];
-var _hoisted_3$5 = {
+var _hoisted_3$6 = {
 	key: 0,
 	value: void 0,
 	disabled: ""
 };
-var _hoisted_4$5 = ["value", "disabled"];
+var _hoisted_4$6 = ["value", "disabled"];
 //#endregion
 //#region src/components/BaseSelect.vue
 var BaseSelect_default = /* @__PURE__ */ defineComponent({
@@ -531,7 +719,7 @@ var BaseSelect_default = /* @__PURE__ */ defineComponent({
 				"label-hidden": __props.labelHidden,
 				size: __props.size
 			}, {
-				default: withCtx(({ id, describedBy, invalid }) => [createElementVNode("div", _hoisted_1$13, [withDirectives(createElementVNode("select", {
+				default: withCtx(({ id, describedBy, invalid }) => [createElementVNode("div", _hoisted_1$15, [withDirectives(createElementVNode("select", {
 					id,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
 					"aria-invalid": invalid,
@@ -541,13 +729,13 @@ var BaseSelect_default = /* @__PURE__ */ defineComponent({
 						__props.variant === "unstyled" ? "" : SIZE_CLASS[__props.size],
 						__props.variant !== "unstyled" && invalid ? "border-negative" : ""
 					]])
-				}, [__props.placeholder ? (openBlock(), createElementBlock("option", _hoisted_3$5, toDisplayString(__props.placeholder), 1)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+				}, [__props.placeholder ? (openBlock(), createElementBlock("option", _hoisted_3$6, toDisplayString(__props.placeholder), 1)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
 					return openBlock(), createElementBlock("option", {
 						key: option.value,
 						value: option.value,
 						disabled: option.disabled
-					}, toDisplayString(option.label), 9, _hoisted_4$5);
-				}), 128))], 10, _hoisted_2$10), [[vModelSelect, model.value]]), createVNode(unref(ChevronDown), {
+					}, toDisplayString(option.label), 9, _hoisted_4$6);
+				}), 128))], 10, _hoisted_2$12), [[vModelSelect, model.value]]), createVNode(unref(ChevronDown), {
 					class: "text-ink-soft pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2",
 					"aria-hidden": "true"
 				})])]),
@@ -563,6 +751,122 @@ var BaseSelect_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/BaseSpinner.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$14 = {
+	class: "rk-spin-wrap",
+	role: "status"
+};
+var _hoisted_2$11 = { class: "rk-spin-label" };
+//#endregion
+//#region src/components/BaseSpinner.vue
+var BaseSpinner_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseSpinner",
+	props: {
+		label: {},
+		size: { default: "md" }
+	},
+	setup(__props) {
+		/**
+		* Work in progress, with no idea how much is left.
+		*
+		* `ProgressBar` is the one to reach for when the amount is known; this is for
+		* when it is not. Showing a bar that cannot move is worse than a spinner,
+		* because a bar is a promise about how long.
+		*
+		* `role="status"` and a label, so a screen reader says what is happening. A
+		* spinner with no accessible name is a decoration that happens to be the only
+		* thing on screen — which is why `label` is required and not defaulted to
+		* "Loading" in a language the app may not speak.
+		*/
+		const SIZES = {
+			sm: "1rem",
+			md: "1.5rem",
+			lg: "2.5rem"
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", _hoisted_1$14, [createElementVNode("span", {
+				class: "rk-spin",
+				style: normalizeStyle({
+					width: SIZES[__props.size],
+					height: SIZES[__props.size]
+				}),
+				"aria-hidden": "true"
+			}, null, 4), createElementVNode("span", _hoisted_2$11, toDisplayString(__props.label), 1)]);
+		};
+	}
+}), [["__scopeId", "data-v-842da62c"]]);
+//#endregion
+//#region src/components/BaseSwitch.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$13 = { class: "flex items-center justify-between gap-4" };
+var _hoisted_2$10 = {
+	key: 0,
+	class: "min-w-0"
+};
+var _hoisted_3$5 = ["id"];
+var _hoisted_4$5 = [
+	"aria-checked",
+	"aria-labelledby",
+	"aria-label",
+	"aria-describedby",
+	"disabled"
+];
+//#endregion
+//#region src/components/BaseSwitch.vue
+var BaseSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseSwitch",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		hint: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		labelHidden: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const id = useId();
+		const hintId = `${id}-hint`;
+		const describedBy = computed(() => __props.hint ? hintId : void 0);
+		function toggle() {
+			if (!__props.disabled) model.value = !model.value;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$13, [!__props.labelHidden ? (openBlock(), createElementBlock("span", _hoisted_2$10, [createElementVNode("span", {
+				id: unref(id),
+				class: "text-ink block text-sm"
+			}, toDisplayString(__props.label), 9, _hoisted_3$5), __props.hint ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				id: hintId,
+				class: "text-ink-soft mt-0.5 block text-xs"
+			}, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), createElementVNode("button", {
+				type: "button",
+				role: "switch",
+				class: normalizeClass(["rk-switch", { "is-on": model.value }]),
+				"aria-checked": model.value,
+				"aria-labelledby": __props.labelHidden ? void 0 : unref(id),
+				"aria-label": __props.labelHidden ? __props.label : void 0,
+				"aria-describedby": describedBy.value,
+				disabled: __props.disabled,
+				onClick: toggle
+			}, [..._cache[0] || (_cache[0] = [createElementVNode("span", {
+				class: "rk-switch-knob",
+				"aria-hidden": "true"
+			}, null, -1)])], 10, _hoisted_4$5)]);
+		};
+	}
+}), [["__scopeId", "data-v-a9f65b91"]]);
+//#endregion
 //#region src/components/BaseTextarea.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$12 = [
 	"id",
@@ -1342,8 +1646,8 @@ function createI18nRuntime(options) {
 *
 * The fallback keeps `vitest` and `vite dev` honest, where no define runs.
 */
-var VERSION = "0.18.1";
+var VERSION = "0.19.0";
 //#endregion
-export { AppError, BaseAlert_default as BaseAlert, BaseBadge_default as BaseBadge, BaseButton_default as BaseButton, BaseCard_default as BaseCard, BaseCheckbox_default as BaseCheckbox, BaseInput_default as BaseInput, BaseRadioGroup_default as BaseRadioGroup, BaseSelect_default as BaseSelect, BaseSheet_default as BaseSheet, BaseTextarea_default as BaseTextarea, EmptyState_default as EmptyState, ErrorBoundary_default as ErrorBoundary, FormField_default as FormField, GoogleButton_default as GoogleButton, LocaleLinks_default as LocaleLinks, PageContainer_default as PageContainer, PageHeader_default as PageHeader, PriceCard_default as PriceCard, ProgressBar_default as ProgressBar, SectionHeading_default as SectionHeading, SegmentedControl_default as SegmentedControl, SettingsGroup_default as SettingsGroup, SettingsRow_default as SettingsRow, SkeletonList_default as SkeletonList, StatCard_default as StatCard, TabBar_default as TabBar, ToastHost_default as ToastHost, ToneDot_default as ToneDot, VERSION, addDays, applyTheme, createI18nRuntime, downloadJson, eachDayOfYear, formatDate, fromDateKey, isApplePortable, isInstalled, isThemePreference, lastNDays, leadingBlanks, needsIosInstall, readStoredTheme, registerErrorMapper, relativeDayLabel, safeRedirect, setFormatLocale, setThemeStorageKey, startOfWeek, tapFeedback, toAppError, toDateKey, toRedirectPath, todayKey, useDebouncedCallback, useDragScroll, useMediaQuery, useOnline, useTheme, useToast, useToday, useVisualViewport };
+export { AppError, BaseAlert_default as BaseAlert, BaseAvatar_default as BaseAvatar, BaseBadge_default as BaseBadge, BaseButton_default as BaseButton, BaseCard_default as BaseCard, BaseCheckbox_default as BaseCheckbox, BaseInput_default as BaseInput, BaseMenu_default as BaseMenu, BaseRadioGroup_default as BaseRadioGroup, BaseSelect_default as BaseSelect, BaseSheet_default as BaseSheet, BaseSpinner_default as BaseSpinner, BaseSwitch_default as BaseSwitch, BaseTextarea_default as BaseTextarea, EmptyState_default as EmptyState, ErrorBoundary_default as ErrorBoundary, FormField_default as FormField, GoogleButton_default as GoogleButton, LocaleLinks_default as LocaleLinks, PageContainer_default as PageContainer, PageHeader_default as PageHeader, PriceCard_default as PriceCard, ProgressBar_default as ProgressBar, SectionHeading_default as SectionHeading, SegmentedControl_default as SegmentedControl, SettingsGroup_default as SettingsGroup, SettingsRow_default as SettingsRow, SkeletonList_default as SkeletonList, StatCard_default as StatCard, TabBar_default as TabBar, ToastHost_default as ToastHost, ToneDot_default as ToneDot, VERSION, addDays, applyTheme, createI18nRuntime, downloadJson, eachDayOfYear, formatDate, fromDateKey, isApplePortable, isInstalled, isThemePreference, lastNDays, leadingBlanks, needsIosInstall, readStoredTheme, registerErrorMapper, relativeDayLabel, safeRedirect, setFormatLocale, setThemeStorageKey, startOfWeek, tapFeedback, toAppError, toDateKey, toRedirectPath, todayKey, useDebouncedCallback, useDragScroll, useMediaQuery, useOnline, useTheme, useToast, useToday, useVisualViewport };
 
 //# sourceMappingURL=index.js.map