rei-kit 0.10.1 → 0.11.0

package/README.md

@@ -16,41 +16,31 @@ That is the whole trick, and everything else follows from it.
 
 ### What gets to be in here
 
-The kit is not built from what its current apps happen to need. It is built to
-be the thing the next app starts from. So the rule depends on what kind of
-thing is being added — and conflating the two cost this package three releases
-that shipped parts nobody could use.
-
-**Primitives are complete by construction.** A button, a field, a toast, a
-modal. There is no uncertainty about whether the next app will want one, so
-they do not wait for a second consumer: waiting means every new app begins by
-copying, which is the thing this package exists to prevent. A primitive is
-finished when two checkable things are true:
-
-- **It covers every role the design system declares.** `tokens.css` names five
-  colour roles while `BaseButton` exposed two, so an app that wanted a
-  success-coloured action hand-wrote the button. A component that cannot use a
-  role its own token file declares is not being careful; it is incomplete.
-- **The app can take the behaviour without the appearance.** `variant="unstyled"`
-  exists because 58 raw `<button>` elements sat in 24 files that already
-  imported `BaseButton`. A picker cell, a chip, a calendar day: the surface is
-  the app's and should be, but the element, the focus ring, the disabled
-  handling and the `aria-pressed` bookkeeping are not — and they were being
-  rewritten every time, usually without the focus ring.
-
-**Composed components wait for two apps.** A `PriceCard`, a `TourShell`, a
-`DangerZone`. These carry a shape, and a shape designed from one example is
-designed wrong. Here the measure is `diff`, not taste: **a file that is 90%
-identical in two apps is a kit candidate.**
-
-**Both kinds:** no new required peer — anything needing a library goes behind
-its own entry point or stays in the app — and no product decision. No colour,
-no copy, no icon. Those arrive as props and slots.
-
-**And one test worth more than the rule:** a raw `<button>` in a file that
-already imports `BaseButton` is a bug in the kit, not in the app. That grep
-found every gap closed between 0.5.0 and 0.7.0, and it found them after those
-releases had claimed to be finished.
+**This is a kit. It is built for the ecosystem, not for the apps that happen to
+exist today.**
+
+A part belongs here if it is a piece of user interface at all — a button, a
+field, a toast, a modal, a shell. There is no waiting for a second consumer and
+no counting of call sites: an app that needs something the kit does not have is
+a gap in the kit, and the kit is what changes. Waiting means the next app
+begins by copying, and a kit whose parts arrive after the apps that needed them
+is a library of things nobody reached for.
+
+A part is finished when three things are true:
+
+1. **It covers every role the design system declares.** `tokens.css` names five
+   colour roles; a button that exposes two of them is incomplete, whatever the
+   apps currently use.
+2. **The app can take the behaviour without the appearance.** `variant="unstyled"`
+   is the last resort, not the first: if several apps paint the same shape by
+   hand, that shape is a variant the kit is missing.
+3. **It carries no product decision** — no colour value, no copy, no icon.
+   Those arrive as props and slots, which is what lets three apps that look
+   nothing alike share one part.
+
+**The test that finds the gaps:** a hand-written control in a file that already
+imports the kit's version of it. That is a bug in the kit, every time. Not in
+the app, and not a matter of taste.
 
 ## Status
 

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

@@ -21,7 +21,7 @@ type __VLS_Props = {
      * height and no padding: giving it either would make it a ghost button,
      * which is a different thing and was already here.
      */
-    variant?: 'primary' | 'secondary' | 'ghost' | 'quiet' | 'danger' | 'positive' | 'warning' | 'accent' | 'link' | 'unstyled' | undefined;
+    variant?: 'primary' | 'secondary' | 'ghost' | 'quiet' | 'row' | 'danger' | 'positive' | 'warning' | 'accent' | 'link' | 'unstyled' | undefined;
     /** `xs` is the action inside a prompt or a nudge, not on a page. */
     size?: 'xs' | 'sm' | 'md' | 'lg' | undefined;
     loading?: boolean | undefined;

package/dist/index.js

@@ -954,6 +954,7 @@ var BaseButton_default = /* @__PURE__ */ defineComponent({
 			primary: "bg-primary text-white hover:bg-primary/90",
 			secondary: "border-hair bg-surface text-ink border hover:bg-muted",
 			ghost: "bg-transparent text-ink hover:bg-muted",
+			row: "w-full justify-start text-left bg-transparent text-ink hover:bg-muted",
 			quiet: "bg-transparent text-ink-soft hover:text-ink",
 			danger: "bg-negative text-white hover:bg-negative/90",
 			positive: "bg-positive text-white hover:bg-positive/90",
@@ -974,6 +975,12 @@ var BaseButton_default = /* @__PURE__ */ defineComponent({
 			md: "size-11 text-base",
 			lg: "size-14 text-lg"
 		};
+		const ROW_SIZE_CLASS = {
+			xs: "px-2 py-1.5 text-xs",
+			sm: "px-3 py-2 text-sm",
+			md: "px-3 py-2.5 text-base",
+			lg: "px-4 py-3 text-lg"
+		};
 		const LINK_SIZE_CLASS = {
 			xs: "text-xs",
 			sm: "text-sm",
@@ -983,6 +990,7 @@ var BaseButton_default = /* @__PURE__ */ defineComponent({
 		const sizing = computed(() => {
 			if (__props.variant === "unstyled") return "";
 			if (__props.variant === "link") return LINK_SIZE_CLASS[__props.size];
+			if (__props.variant === "row") return ROW_SIZE_CLASS[__props.size];
 			return __props.icon ? ICON_SIZE_CLASS[__props.size] : SIZE_CLASS[__props.size];
 		});
 		const PRESSED_CLASS = {
@@ -992,9 +1000,15 @@ var BaseButton_default = /* @__PURE__ */ defineComponent({
 		};
 		const surface = computed(() => {
 			if (__props.pressed === true) return PRESSED_CLASS[__props.variant] ?? VARIANT_CLASS[__props.variant];
+			if (__props.variant === "quiet" && __props.icon) return `${VARIANT_CLASS.quiet} hover:bg-muted`;
 			return VARIANT_CLASS[__props.variant];
 		});
-		const shell = computed(() => __props.variant === "unstyled" ? "" : "inline-flex items-center justify-center gap-2 font-medium transition-[transform,color,background-color,border-color] duration-100 select-none active:scale-95");
+		const shell = computed(() => {
+			if (__props.variant === "unstyled") return "";
+			const feel = "transition-[transform,color,background-color,border-color] duration-100 select-none";
+			if (__props.variant === "row") return `inline-flex items-center gap-2 font-medium ${feel}`;
+			return `inline-flex items-center justify-center gap-2 font-medium ${feel} active:scale-95`;
+		});
 		const radius = computed(() => {
 			if (__props.variant === "unstyled") return "";
 			if (__props.variant === "link") return "rounded-xs";
@@ -2397,7 +2411,7 @@ function createI18nRuntime(options) {
 *
 * The fallback keeps `vitest` and `vite dev` honest, where no define runs.
 */
-var VERSION = "0.10.1";
+var VERSION = "0.11.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 };