rei-kit 0.11.2 → 0.12.0

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

@@ -13,6 +13,20 @@
 type __VLS_Props = {
     interactive?: boolean | undefined;
     as?: string | undefined;
+    /**
+     * How much room the card gives its contents.
+     *
+     * This component shipped with `px-5 py-4` baked in and was then used by
+     * nobody, across three apps and thirty-five hand-written card surfaces —
+     * which used `p-3` six times, `p-4` six times, `p-5` five times and `p-1`
+     * four times, and not once the pair this insisted on. A card that fixes its
+     * padding cannot be reached for, which is the same mistake `PageContainer`
+     * made with its width and `size="sm"` made with its height.
+     *
+     * `none` is for a card that holds a list: the rows own the padding, and the
+     * dividers have to reach the border.
+     */
+    padding?: 'none' | 'sm' | 'md' | 'lg' | undefined;
 };
 declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {};
 type __VLS_Slots = {} & {

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

@@ -10,6 +10,13 @@
 type __VLS_Props = {
     value: number;
     max?: number | undefined;
+    /**
+     * How thick the track is. `sm` for a bar under a step counter, where it is a
+     * hint rather than the subject; `lg` where the progress is the point.
+     *
+     * It shipped at one thickness and the two bars anybody wanted were `h-1`.
+     */
+    size?: 'sm' | 'md' | 'lg' | undefined;
     /** For screen readers. Without it this is a rectangle that means nothing. */
     label?: string | undefined;
 };

package/dist/index.js

@@ -838,9 +838,9 @@ function useToast() {
 }
 //#endregion
 //#region src/components/BaseAlert.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$23 = ["role", "aria-live"];
-var _hoisted_2$17 = { class: "min-w-0 flex-1" };
-var _hoisted_3$12 = {
+var _hoisted_1$22 = ["role", "aria-live"];
+var _hoisted_2$16 = { class: "min-w-0 flex-1" };
+var _hoisted_3$11 = {
 	key: 0,
 	class: "text-ink font-semibold"
 };
@@ -881,9 +881,9 @@ var BaseAlert_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(["mt-px grid size-6 shrink-0 place-items-center rounded-full text-xs font-semibold", mark.value]),
 					"aria-hidden": "true"
 				}, [renderSlot(_ctx.$slots, "mark")], 2)) : createCommentVNode("", true),
-				createElementVNode("div", _hoisted_2$17, [_ctx.$slots.title ? (openBlock(), createElementBlock("p", _hoisted_3$12, [renderSlot(_ctx.$slots, "title")])) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(_ctx.$slots.title ? "mt-1" : "") }, [renderSlot(_ctx.$slots, "default")], 2)]),
+				createElementVNode("div", _hoisted_2$16, [_ctx.$slots.title ? (openBlock(), createElementBlock("p", _hoisted_3$11, [renderSlot(_ctx.$slots, "title")])) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(_ctx.$slots.title ? "mt-1" : "") }, [renderSlot(_ctx.$slots, "default")], 2)]),
 				renderSlot(_ctx.$slots, "action")
-			], 10, _hoisted_1$23);
+			], 10, _hoisted_1$22);
 		};
 	}
 });
@@ -908,7 +908,7 @@ var BaseBadge_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/BaseButton.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$22 = {
+var _hoisted_1$21 = {
 	key: 0,
 	class: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent",
 	"aria-hidden": "true"
@@ -997,7 +997,8 @@ var BaseButton_default = /* @__PURE__ */ defineComponent({
 		const PRESSED_CLASS = {
 			ghost: "bg-primary text-white hover:bg-primary/90",
 			quiet: "bg-primary text-white hover:bg-primary/90",
-			secondary: "bg-primary border-primary text-white hover:bg-primary/90"
+			secondary: "bg-primary border-primary text-white hover:bg-primary/90",
+			row: "w-full justify-start text-left bg-muted text-ink hover:bg-muted"
 		};
 		const surface = computed(() => {
 			if (__props.pressed === true) return PRESSED_CLASS[__props.variant] ?? VARIANT_CLASS[__props.variant];
@@ -1037,7 +1038,7 @@ var BaseButton_default = /* @__PURE__ */ defineComponent({
 					__props.block ? "w-full" : ""
 				]]
 			}), {
-				default: withCtx(() => [__props.loading ? (openBlock(), createElementBlock("span", _hoisted_1$22)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")]),
+				default: withCtx(() => [__props.loading ? (openBlock(), createElementBlock("span", _hoisted_1$21)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")]),
 				_: 3
 			}, 16, [
 				"type",
@@ -1052,7 +1053,7 @@ var BaseButton_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/FormField.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$21 = ["for"];
+var _hoisted_1$20 = ["for"];
 //#endregion
 //#region src/components/FormField.vue
 var FormField_default = /* @__PURE__ */ defineComponent({
@@ -1080,7 +1081,7 @@ var FormField_default = /* @__PURE__ */ defineComponent({
 				createElementVNode("label", {
 					for: unref(id),
 					class: normalizeClass(["font-medium", [__props.labelHidden ? "sr-only" : "", __props.size === "sm" ? "text-ink-soft text-xs" : "text-ink text-sm"]])
-				}, toDisplayString(__props.label), 11, _hoisted_1$21),
+				}, toDisplayString(__props.label), 11, _hoisted_1$20),
 				renderSlot(_ctx.$slots, "default", {
 					id: unref(id),
 					describedBy: describedBy.value,
@@ -1102,7 +1103,7 @@ var FormField_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/BaseInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$20 = [
+var _hoisted_1$19 = [
 	"id",
 	"type",
 	"aria-invalid",
@@ -1150,7 +1151,7 @@ var BaseInput_default = /* @__PURE__ */ defineComponent({
 					__props.variant === "unstyled" ? "" : "border-hair bg-surface text-ink rounded-card focus-visible:outline-primary border px-3 focus-visible:outline-2 focus-visible:outline-offset-1",
 					__props.variant === "unstyled" ? "text-base" : CONTROL_CLASS,
 					__props.variant !== "unstyled" && invalid ? "border-negative" : ""
-				] }), null, 16, _hoisted_1$20), [[vModelDynamic, model.value]])]),
+				] }), null, 16, _hoisted_1$19), [[vModelDynamic, model.value]])]),
 				_: 1
 			}, 8, [
 				"label",
@@ -1164,9 +1165,9 @@ var BaseInput_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/BaseSheet.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$19 = { class: "shell-frame md:rounded-shell relative flex max-h-full flex-col justify-end overflow-hidden" };
-var _hoisted_2$16 = ["aria-label"];
-var _hoisted_3$11 = { class: "flex shrink-0 items-start gap-3 px-6 pt-4 pb-5" };
+var _hoisted_1$18 = { class: "shell-frame md:rounded-shell relative flex max-h-full flex-col justify-end overflow-hidden" };
+var _hoisted_2$15 = ["aria-label"];
+var _hoisted_3$10 = { class: "flex shrink-0 items-start gap-3 px-6 pt-4 pb-5" };
 var _hoisted_4$7 = { class: "min-w-0 flex-1" };
 var _hoisted_5$4 = { class: "text-ink text-xl leading-tight font-semibold" };
 var _hoisted_6$2 = {
@@ -1244,7 +1245,7 @@ var BaseSheet_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					key: 0,
 					class: "fixed inset-x-0 top-0 bottom-0 z-50 flex items-center justify-center",
 					style: normalizeStyle(viewportStyle.value)
-				}, [createElementVNode("div", _hoisted_1$19, [createElementVNode("div", {
+				}, [createElementVNode("div", _hoisted_1$18, [createElementVNode("div", {
 					class: "bg-ink/45 absolute inset-0 backdrop-blur-[2px]",
 					onClick: close
 				}), createElementVNode("section", {
@@ -1260,7 +1261,7 @@ var BaseSheet_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						class: "flex shrink-0 justify-center pt-3",
 						"aria-hidden": "true"
 					}, [createElementVNode("span", { class: "bg-hair h-1.5 w-10 rounded-full" })], -1)),
-					createElementVNode("header", _hoisted_3$11, [createElementVNode("div", _hoisted_4$7, [createElementVNode("h2", _hoisted_5$4, toDisplayString(__props.title), 1), __props.subtitle ? (openBlock(), createElementBlock("p", _hoisted_6$2, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)]), createVNode(BaseButton_default, {
+					createElementVNode("header", _hoisted_3$10, [createElementVNode("div", _hoisted_4$7, [createElementVNode("h2", _hoisted_5$4, toDisplayString(__props.title), 1), __props.subtitle ? (openBlock(), createElementBlock("p", _hoisted_6$2, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)]), createVNode(BaseButton_default, {
 						variant: "unstyled",
 						class: "text-ink-soft hover:bg-muted hover:text-ink -mt-1 flex size-10 shrink-0 items-center justify-center rounded-full transition-colors active:scale-90",
 						"aria-label": __props.closeLabel,
@@ -1270,7 +1271,7 @@ var BaseSheet_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						_: 1
 					}, 8, ["aria-label"])]),
 					createElementVNode("div", _hoisted_7$2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])
-				], 8, _hoisted_2$16)])], 4)) : createCommentVNode("", true)]),
+				], 8, _hoisted_2$15)])], 4)) : createCommentVNode("", true)]),
 				_: 3
 			})]);
 		};
@@ -1287,17 +1288,6 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 //#region src/components/BaseSheet.vue
 var BaseSheet_default = /*#__PURE__*/ _plugin_vue_export_helper_default(BaseSheet_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-51709579"]]);
 //#endregion
-//#region src/components/BaseCard.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$18 = {
-	key: 0,
-	class: "border-hair/70 border-b px-5 py-4"
-};
-var _hoisted_2$15 = { class: "px-5 py-4" };
-var _hoisted_3$10 = {
-	key: 1,
-	class: "border-hair/70 bg-muted/30 border-t px-5 py-3.5"
-};
-//#endregion
 //#region src/components/BaseCard.vue
 var BaseCard_default = /* @__PURE__ */ defineComponent({
 	__name: "BaseCard",
@@ -1306,7 +1296,8 @@ var BaseCard_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
-		as: { default: "div" }
+		as: { default: "div" },
+		padding: { default: "md" }
 	},
 	setup(__props) {
 		/**
@@ -1321,12 +1312,30 @@ var BaseCard_default = /* @__PURE__ */ defineComponent({
 		* the press, and it is opt-in because a card holding a form should not move
 		* when the pointer crosses it.
 		*/
+		const BODY = {
+			none: "",
+			sm: "p-3",
+			md: "p-4",
+			lg: "p-5"
+		};
+		const HEAD = {
+			none: "",
+			sm: "px-3 py-2.5",
+			md: "px-4 py-3",
+			lg: "px-5 py-4"
+		};
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(resolveDynamicComponent(__props.as), { class: normalizeClass(["border-hair bg-surface rounded-card border", __props.interactive ? "transition-[transform,box-shadow] duration-300 ease-out hover:-translate-y-0.5 hover:shadow-lg active:translate-y-0 active:shadow-sm" : ""]) }, {
 				default: withCtx(() => [
-					_ctx.$slots.head ? (openBlock(), createElementBlock("div", _hoisted_1$18, [renderSlot(_ctx.$slots, "head")])) : createCommentVNode("", true),
-					createElementVNode("div", _hoisted_2$15, [renderSlot(_ctx.$slots, "default")]),
-					_ctx.$slots.foot ? (openBlock(), createElementBlock("div", _hoisted_3$10, [renderSlot(_ctx.$slots, "foot")])) : createCommentVNode("", true)
+					_ctx.$slots.head ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(["border-hair/70 border-b", HEAD[__props.padding]])
+					}, [renderSlot(_ctx.$slots, "head")], 2)) : createCommentVNode("", true),
+					createElementVNode("div", { class: normalizeClass(BODY[__props.padding]) }, [renderSlot(_ctx.$slots, "default")], 2),
+					_ctx.$slots.foot ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(["border-hair/70 bg-muted/30 border-t", HEAD[__props.padding]])
+					}, [renderSlot(_ctx.$slots, "foot")], 2)) : createCommentVNode("", true)
 				]),
 				_: 3
 			}, 8, ["class"]);
@@ -1733,16 +1742,22 @@ var ProgressBar_default = /* @__PURE__ */ defineComponent({
 	props: {
 		value: {},
 		max: { default: 100 },
+		size: { default: "md" },
 		label: {}
 	},
 	setup(__props) {
+		const TRACK = {
+			sm: "h-1",
+			md: "h-1.5",
+			lg: "h-2"
+		};
 		const portion = computed(() => {
 			if (!Number.isFinite(__props.value) || !Number.isFinite(__props.max) || __props.max <= 0) return 0;
 			return Math.min(100, Math.max(0, __props.value / __props.max * 100));
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
-				class: "bg-muted h-1.5 w-full overflow-hidden rounded-full",
+				class: normalizeClass(["bg-muted w-full overflow-hidden rounded-full", TRACK[__props.size]]),
 				role: "progressbar",
 				"aria-valuenow": Math.round(portion.value),
 				"aria-valuemin": "0",
@@ -1751,7 +1766,7 @@ var ProgressBar_default = /* @__PURE__ */ defineComponent({
 			}, [createElementVNode("div", {
 				class: "bg-primary h-full rounded-full transition-[width] duration-700 ease-out",
 				style: normalizeStyle({ width: `${portion.value}%` })
-			}, null, 4)], 8, _hoisted_1$11);
+			}, null, 4)], 10, _hoisted_1$11);
 		};
 	}
 });
@@ -2412,7 +2427,7 @@ function createI18nRuntime(options) {
 *
 * The fallback keeps `vitest` and `vite dev` honest, where no define runs.
 */
-var VERSION = "0.11.2";
+var VERSION = "0.12.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, todayKey, useDebouncedCallback, useDragScroll, useMediaQuery, useOnline, useTheme, useToast, useToday, useVisualViewport };