rei-kit 0.5.0 → 0.5.2

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

@@ -15,6 +15,16 @@ type __VLS_Props = {
     error?: string | undefined;
     hint?: string | undefined;
     disabled?: boolean | undefined;
+    /**
+     * `md` is a setting: a line the reader came here to change, in ink.
+     * `sm` is an aside — "remember me" under a sign-in form, "show the ones I
+     * have learned" above a list — quieter and tighter.
+     *
+     * The two are not a guess. Of the five hand-written checkboxes across the
+     * three consuming apps, four were the aside and one was the setting, and
+     * they differed in exactly these two ways.
+     */
+    size?: 'sm' | 'md' | undefined;
 };
 type __VLS_ModelProps = {
     modelValue?: boolean;

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

@@ -9,6 +9,8 @@ type __VLS_Props = {
      */
     labelHidden?: boolean | undefined;
     type?: 'text' | 'email' | 'password' | 'number' | undefined;
+    /** `sm` for a field inside a row rather than in a form of its own. */
+    size?: 'sm' | 'md' | undefined;
 };
 type __VLS_ModelProps = {
     modelValue?: string | undefined;

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

@@ -26,6 +26,12 @@ type __VLS_Props = {
      * someone go back to having answered nothing, which no form wants.
      */
     placeholder?: string | undefined;
+    /**
+     * `sm` for a select that filters or sorts rather than answers a form.
+     *
+     * Every hand-written select across the three consuming apps was this one.
+     */
+    size?: 'sm' | 'md' | undefined;
 };
 type __VLS_ModelProps = {
     modelValue?: string | undefined;

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

@@ -4,6 +4,8 @@ type __VLS_Props = {
     hint?: string | undefined;
     labelHidden?: boolean | undefined;
     rows?: number | undefined;
+    /** `sm` for editing in place, inside a row that is already small. */
+    size?: 'sm' | 'md' | undefined;
 };
 type __VLS_ModelProps = {
     modelValue?: string | undefined;

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

@@ -25,6 +25,15 @@ type __VLS_Props = {
     label: string;
     error?: string | undefined;
     hint?: string | undefined;
+    /**
+     * `sm` for a control that sits inside something else — a toolbar, a filter
+     * row, a settings line — rather than in a form of its own.
+     *
+     * It exists because every hand-written select in all three apps was the
+     * small one, and the kit only had the large one. A part is not reusable if
+     * reaching for it costs a size somebody chose on purpose.
+     */
+    size?: 'sm' | 'md' | undefined;
     /**
      * Hides the label visually but keeps it for assistive tech. For fields whose
      * surrounding row already names them — dropping the label entirely would
@@ -36,6 +45,7 @@ declare var __VLS_1: {
     id: string;
     describedBy: string | undefined;
     invalid: boolean;
+    size: "sm" | "md";
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;

package/dist/index.js

@@ -729,7 +729,7 @@ function useVisualViewport() {
 //#endregion
 //#region src/components/BaseAlert.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$22 = ["role", "aria-live"];
-var _hoisted_2$17 = { class: "min-w-0 flex-1" };
+var _hoisted_2$16 = { class: "min-w-0 flex-1" };
 var _hoisted_3$12 = {
 	key: 0,
 	class: "text-ink font-semibold"
@@ -771,7 +771,7 @@ 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$12, [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$22);
 		};
@@ -881,8 +881,7 @@ var BaseButton_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/FormField.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$20 = { class: "flex flex-col gap-1.5" };
-var _hoisted_2$16 = ["for"];
+var _hoisted_1$20 = ["for"];
 //#endregion
 //#region src/components/FormField.vue
 var FormField_default = /* @__PURE__ */ defineComponent({
@@ -891,6 +890,7 @@ var FormField_default = /* @__PURE__ */ defineComponent({
 		label: {},
 		error: { default: "" },
 		hint: { default: "" },
+		size: { default: "md" },
 		labelHidden: {
 			type: Boolean,
 			default: false
@@ -905,15 +905,16 @@ var FormField_default = /* @__PURE__ */ defineComponent({
 			if (__props.hint) return hintId;
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$20, [
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["flex flex-col", __props.size === "sm" ? "gap-1" : "gap-1.5"]) }, [
 				createElementVNode("label", {
 					for: unref(id),
-					class: normalizeClass(["text-ink text-sm font-medium", __props.labelHidden ? "sr-only" : ""])
-				}, toDisplayString(__props.label), 11, _hoisted_2$16),
+					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$20),
 				renderSlot(_ctx.$slots, "default", {
 					id: unref(id),
 					describedBy: describedBy.value,
-					invalid: Boolean(__props.error)
+					invalid: Boolean(__props.error),
+					size: __props.size
 				}),
 				__props.error ? (openBlock(), createElementBlock("p", {
 					key: 0,
@@ -924,7 +925,7 @@ var FormField_default = /* @__PURE__ */ defineComponent({
 					id: hintId,
 					class: "text-ink-soft text-xs"
 				}, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
-			]);
+			], 2);
 		};
 	}
 });
@@ -949,20 +950,26 @@ var BaseInput_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
-		type: { default: "text" }
+		type: { default: "text" },
+		size: { default: "md" }
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
 	}),
 	emits: ["update:modelValue"],
 	setup(__props) {
+		const SIZE_CLASS = {
+			sm: "h-11 text-sm",
+			md: "h-11 text-base"
+		};
 		const model = useModel(__props, "modelValue");
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FormField_default, {
 				label: __props.label,
 				error: __props.error,
 				hint: __props.hint,
-				"label-hidden": __props.labelHidden
+				"label-hidden": __props.labelHidden,
+				size: __props.size
 			}, {
 				default: withCtx(({ id, describedBy, invalid }) => [withDirectives(createElementVNode("input", mergeProps({
 					id,
@@ -970,13 +977,14 @@ var BaseInput_default = /* @__PURE__ */ defineComponent({
 					type: __props.type,
 					"aria-invalid": invalid,
 					"aria-describedby": describedBy
-				}, _ctx.$attrs, { class: ["border-hair bg-surface text-ink rounded-card focus-visible:outline-primary h-11 border px-3 focus-visible:outline-2 focus-visible:outline-offset-1", invalid ? "border-negative" : ""] }), null, 16, _hoisted_1$19), [[vModelDynamic, model.value]])]),
+				}, _ctx.$attrs, { class: ["border-hair bg-surface text-ink rounded-card focus-visible:outline-primary border px-3 focus-visible:outline-2 focus-visible:outline-offset-1", [SIZE_CLASS[__props.size], invalid ? "border-negative" : ""]] }), null, 16, _hoisted_1$19), [[vModelDynamic, model.value]])]),
 				_: 1
 			}, 8, [
 				"label",
 				"error",
 				"hint",
-				"label-hidden"
+				"label-hidden",
+				"size"
 			]);
 		};
 	}
@@ -986,7 +994,7 @@ var BaseInput_default = /* @__PURE__ */ defineComponent({
 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$11 = { class: "flex shrink-0 items-start gap-3 px-6 pt-4 pb-5" };
-var _hoisted_4$8 = { class: "min-w-0 flex-1" };
+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 = {
 	key: 0,
@@ -1080,7 +1088,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$8, [createElementVNode("h2", _hoisted_5$4, toDisplayString(__props.title), 1), __props.subtitle ? (openBlock(), createElementBlock("p", _hoisted_6$2, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)]), createElementVNode("button", {
+					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)]), createElementVNode("button", {
 						type: "button",
 						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,
@@ -1160,7 +1168,6 @@ var _hoisted_3$9 = [
 	"aria-invalid",
 	"aria-describedby"
 ];
-var _hoisted_4$7 = { class: "text-ink text-sm" };
 //#endregion
 //#region src/components/BaseCheckbox.vue
 var BaseCheckbox_default = /* @__PURE__ */ defineComponent({
@@ -1172,7 +1179,8 @@ var BaseCheckbox_default = /* @__PURE__ */ defineComponent({
 		disabled: {
 			type: Boolean,
 			default: false
-		}
+		},
+		size: { default: "md" }
 	}, {
 		"modelValue": {
 			type: Boolean,
@@ -1193,7 +1201,7 @@ var BaseCheckbox_default = /* @__PURE__ */ defineComponent({
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$16, [createElementVNode("label", {
 				for: unref(id),
-				class: normalizeClass(["flex items-center gap-3", __props.disabled ? "opacity-50" : "cursor-pointer"])
+				class: normalizeClass(["flex items-center", [__props.size === "sm" ? "gap-2" : "gap-3", __props.disabled ? "opacity-50" : "cursor-pointer"]])
 			}, [withDirectives(createElementVNode("input", {
 				id: unref(id),
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
@@ -1202,7 +1210,7 @@ var BaseCheckbox_default = /* @__PURE__ */ defineComponent({
 				"aria-invalid": Boolean(__props.error),
 				"aria-describedby": describedBy.value,
 				class: "accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2"
-			}, null, 8, _hoisted_3$9), [[vModelCheckbox, model.value]]), createElementVNode("span", _hoisted_4$7, toDisplayString(__props.label), 1)], 10, _hoisted_2$13), __props.error ? (openBlock(), createElementBlock("p", {
+			}, null, 8, _hoisted_3$9), [[vModelCheckbox, model.value]]), createElementVNode("span", { class: normalizeClass(["text-sm", __props.size === "sm" ? "text-ink-soft" : "text-ink"]) }, toDisplayString(__props.label), 3)], 10, _hoisted_2$13), __props.error ? (openBlock(), createElementBlock("p", {
 				key: 0,
 				id: errorId,
 				class: "text-negative text-xs"
@@ -1309,27 +1317,33 @@ var BaseSelect_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
-		placeholder: { default: "" }
+		placeholder: { default: "" },
+		size: { default: "md" }
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
 	}),
 	emits: ["update:modelValue"],
 	setup(__props) {
+		const SIZE_CLASS = {
+			sm: "h-11 text-sm",
+			md: "h-11 text-base"
+		};
 		const model = useModel(__props, "modelValue");
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FormField_default, {
 				label: __props.label,
 				error: __props.error,
 				hint: __props.hint,
-				"label-hidden": __props.labelHidden
+				"label-hidden": __props.labelHidden,
+				size: __props.size
 			}, {
 				default: withCtx(({ id, describedBy, invalid }) => [createElementVNode("div", _hoisted_1$14, [withDirectives(createElementVNode("select", {
 					id,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
 					"aria-invalid": invalid,
 					"aria-describedby": describedBy,
-					class: normalizeClass(["border-hair bg-surface text-ink rounded-card focus-visible:outline-primary h-11 w-full appearance-none border py-0 pr-10 pl-3 focus-visible:outline-2 focus-visible:outline-offset-1", invalid ? "border-negative" : ""])
+					class: normalizeClass(["border-hair bg-surface text-ink rounded-card focus-visible:outline-primary w-full appearance-none border py-0 pr-10 pl-3 focus-visible:outline-2 focus-visible:outline-offset-1", [SIZE_CLASS[__props.size], invalid ? "border-negative" : ""]])
 				}, [__props.placeholder ? (openBlock(), createElementBlock("option", _hoisted_3$7, toDisplayString(__props.placeholder), 1)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
 					return openBlock(), createElementBlock("option", {
 						key: option.value,
@@ -1345,7 +1359,8 @@ var BaseSelect_default = /* @__PURE__ */ defineComponent({
 				"label",
 				"error",
 				"hint",
-				"label-hidden"
+				"label-hidden",
+				"size"
 			]);
 		};
 	}
@@ -1371,7 +1386,8 @@ var BaseTextarea_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
-		rows: { default: 4 }
+		rows: { default: 4 },
+		size: { default: "md" }
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -1384,7 +1400,8 @@ var BaseTextarea_default = /* @__PURE__ */ defineComponent({
 				label: __props.label,
 				error: __props.error,
 				hint: __props.hint,
-				"label-hidden": __props.labelHidden
+				"label-hidden": __props.labelHidden,
+				size: __props.size
 			}, {
 				default: withCtx(({ id, describedBy, invalid }) => [withDirectives(createElementVNode("textarea", mergeProps({
 					id,
@@ -1392,13 +1409,14 @@ var BaseTextarea_default = /* @__PURE__ */ defineComponent({
 					rows: __props.rows,
 					"aria-invalid": invalid,
 					"aria-describedby": describedBy
-				}, _ctx.$attrs, { class: ["border-hair bg-surface text-ink rounded-card focus-visible:outline-primary resize-y border px-3 py-2 leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-1", invalid ? "border-negative" : ""] }), null, 16, _hoisted_1$13), [[vModelText, model.value]])]),
+				}, _ctx.$attrs, { class: ["border-hair bg-surface text-ink rounded-card focus-visible:outline-primary resize-y border px-3 py-2 leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-1", [__props.size === "sm" ? "text-sm" : "text-base", invalid ? "border-negative" : ""]] }), null, 16, _hoisted_1$13), [[vModelText, model.value]])]),
 				_: 1
 			}, 8, [
 				"label",
 				"error",
 				"hint",
-				"label-hidden"
+				"label-hidden",
+				"size"
 			]);
 		};
 	}
@@ -2124,7 +2142,7 @@ function createI18nRuntime(options) {
 *
 * The fallback keeps `vitest` and `vite dev` honest, where no define runs.
 */
-var VERSION = "0.5.0";
+var VERSION = "0.5.2";
 //#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, 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, useToday, useVisualViewport };