rei-kit 2.2.0 → 2.3.0

package/README.md

@@ -1,6 +1,6 @@
 # rei-kit
 
-**One kit. Every look.** 53 accessible components for Vue 3 and Tailwind 4.
+**One kit. Every look.** 59 accessible components for Vue 3 and Tailwind 4.
 Change the **material** with one attribute and the **palette** with another —
 every component follows, and none of them knows your brand.
 
@@ -34,6 +34,7 @@ That line is the whole redesign. Three axes, each changed on its own:
 | **`rei-kit/web`**      | Wide-site parts: dialogs, tabs, tooltips, pagination, breadcrumbs              |
 | **`rei-kit/app`**      | Phone-app parts: the shell, the tab transition, the sign-in form               |
 | **`rei-kit/pwa`**      | Installing and updating                                                        |
+| **`rei-kit/motion`**   | Numbers that count and roll, words that rotate and type, content that arrives  |
 | **`rei-kit/supabase`** | An optional Supabase entry — auth errors, a remember-me client                 |
 
 Three apps run on it and no two resemble each other. Every component is typed,
@@ -86,7 +87,7 @@ styles included and Vue left out. Minified, gzip -9:
 
 | Kit                  |         JS |         CSS |       Total |
 | -------------------- | ---------: | ----------: | ----------: |
-| **rei-kit 2.2.0**    | **3.1 KB** | **14.5 KB** | **17.6 KB** |
+| **rei-kit 2.3.0**    | **3.1 KB** | **15.2 KB** | **18.4 KB** |
 | element-plus 2.14.6  |    27.3 KB |      6.0 KB |     33.3 KB |
 | naive-ui 2.45.3      |    51.2 KB |           — |     51.2 KB |
 | primevue 5.0.1       |    53.6 KB |           — |     53.6 KB |
@@ -111,7 +112,7 @@ Each claim here is enforced by something that fails, not by a promise.
 
 | Standard                                 | How it is held                                                                                                                                                                                             |
 | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Open for extension, closed for edits** | A new look is a token, a material or a palette — never an edit to a component. Materials and palettes restyle all 53 without touching one, and a test fails if a component holds a colour.                 |
+| **Open for extension, closed for edits** | A new look is a token, a material or a palette — never an edit to a component. Materials and palettes restyle all 59 without touching one, and a test fails if a component holds a colour.                 |
 | **Single responsibility**                | One part, one job. Label-and-error wiring lives in `FormField`, not in five inputs; taking the page behind a layer out of reach lives in one helper the modal, the sheet and the guide share.              |
 | **Depend on roles, not values**          | Components read `primary`, `surface`, `--shadow-card` — never a hex or a pixel shadow. An app's brand wins in both modes, tested.                                                                          |
 | **WAI-ARIA Authoring Practices**         | Menus, comboboxes, tabs, sliders, dialogs and accordions follow their APG pattern: arrows move, Tab leaves, Escape closes, focus returns. Behaviour tests drive each with the keyboard.                    |
@@ -123,11 +124,11 @@ Each claim here is enforced by something that fails, not by a promise.
 
 ## Status
 
-**v2.2.0 — three consumers.**
+**v2.3.0 — three consumers.**
 
 |              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Components   | 53 (`AuthForm`, `BaseTable`, `BaseCombobox`, `BaseSlider`, `TabShell`, `BaseModal`, `BaseTabs`, `BaseTooltip`, `BasePagination`, `BaseBreadcrumb`, `BaseDisclosure`, `BaseAccordion`, `NavLinks`, `OfflineBanner`, `FabButton`, `BaseButton`, `BaseCard`, `BaseInput`, `BaseSelect`, `BaseTextarea`, `BaseCheckbox`, `BaseSwitch`, `BaseRadioGroup`, `BaseMenu`, `BaseAvatar`, `BaseSpinner`, `BaseAlert`, `BaseBadge`, `BaseSheet`, `ProgressBar`, `PriceCard`, `ToastHost`, `TabBar`, `GoogleButton`, `LocaleLinks`, `LocaleSheet`, `AuthShell`, `TourShell`, `InstallPrompt`, `UpdatePrompt`, `InstallSettings`, `SkeletonList`, `PageContainer`, `ErrorBoundary`, etc.) |
+| Components   | 59 (`AuthForm`, `BaseTable`, `BaseCombobox`, `BaseSlider`, `TabShell`, `BaseModal`, `BaseTabs`, `BaseTooltip`, `BasePagination`, `BaseBreadcrumb`, `BaseDisclosure`, `BaseAccordion`, `NavLinks`, `OfflineBanner`, `FabButton`, `BaseButton`, `BaseCard`, `BaseInput`, `BaseSelect`, `BaseTextarea`, `BaseCheckbox`, `BaseSwitch`, `BaseRadioGroup`, `BaseMenu`, `BaseAvatar`, `BaseSpinner`, `BaseAlert`, `BaseBadge`, `BaseSheet`, `ProgressBar`, `PriceCard`, `ToastHost`, `TabBar`, `GoogleButton`, `LocaleLinks`, `LocaleSheet`, `AuthShell`, `TourShell`, `InstallPrompt`, `UpdatePrompt`, `InstallSettings`, `SkeletonList`, `PageContainer`, `ErrorBoundary`, etc.) |
 | Composables  | 16 (`useToast`, `useTheme`, `useMaterial`, `usePalette`, `useToday`, `useMediaQuery`, `useInstall`, `watchInstallability`, `createTabTransition`, `useThemeSync`, `useVisualViewport`, etc.)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 | Utilities    | 33 (`applyTheme`, `applyMaterial`, `applyPalette`, `MATERIALS`, `PALETTES`, `formatDate`, `fieldErrors`, `toAuthMessageKey`, `createAuthGuard`, `createQueryDefaults`, `createWriteReport`, `toRedirectPath`, `Supabase error mapper`, i18n runtime, etc.)                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | Entry Points | `rei-kit`, `rei-kit/app`, `rei-kit/web`, `rei-kit/pwa`, `rei-kit/supabase`, `rei-kit/mobile.css`, `rei-kit/web.css`, and each stylesheet on its own                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
@@ -297,6 +298,39 @@ way in; each got the smallest nudge that clears the line.
 Palettes are generated from `src/palettes/palettes.source.json` by
 `pnpm palettes`; a test asserts the shipped CSS matches the source.
 
+### Motion
+
+`rei-kit/motion` is for the parts of a page that move on purpose:
+
+```vue
+<script setup lang="ts">
+import { CountUp, NumberTicker, TextRotate } from 'rei-kit/motion'
+</script>
+
+<template>
+  <NumberTicker :value="balance" :format="{ style: 'currency', currency: 'TRY' }" />
+  <CountUp :value="12480" />
+  <h1>Build it <TextRotate :words="['glass', 'brutal', 'soft']" /></h1>
+</template>
+```
+
+| Component      | What it does                                                    |
+| -------------- | --------------------------------------------------------------- |
+| `NumberTicker` | Rolls each digit into place, like an odometer or a note counter |
+| `CountUp`      | Counts through every value once it scrolls into view            |
+| `TextRotate`   | One word in a sentence that changes on its own                  |
+| `TypeWriter`   | Types a line out, and deletes it for the next                   |
+| `BaseReveal`   | Fades or rises into view on scroll; staggers with `:delay`      |
+| `BaseMarquee`  | An endless sideways row — logos, testimonials                   |
+
+The presets also bring `animate-float`, `animate-pulse-soft`, `animate-glow`,
+`animate-wiggle`, `animate-pop` and `text-shimmer`.
+
+Every one of them renders its finished state on a server and for anyone who
+has asked their system for less motion, reads only the final value to a
+screen reader, and stops while hovered if it moves on its own. Six
+components together add under 2 KB gzip.
+
 ### Colours
 
 `tokens.css` defines all eleven roles, the five `on-*` colours that sit on a

package/dist/format-BEvBK1SJ.js

@@ -0,0 +1,80 @@
+import { ref } from "vue";
+//#region src/utils/format.ts
+/**
+* The locale `Intl` formatting uses.
+*
+* Held here rather than imported from an i18n runtime so the utilities have no
+* i18n dependency at all: an app that never installs vue-i18n still gets dates
+* in the right language. `createI18nRuntime` sets this when it is used.
+*/
+var locale = ref(typeof navigator === "undefined" ? "en" : navigator.language ?? "en");
+/**
+* Points every formatter at a new locale.
+*
+* @example
+* ```ts
+* setFormatLocale('tr-TR')
+* ```
+*/
+function setFormatLocale(next) {
+	locale.value = next;
+}
+/**
+* `Intl.DateTimeFormat` is expensive to construct, so instances are cached per
+* locale and option set. The key includes the locale, which is what lets the
+* cache survive a language change instead of returning stale formatters.
+*/
+var cache = /* @__PURE__ */ new Map();
+/**
+* Formats a date in the active locale.
+*
+* Reading the locale ref here is deliberate: called from a `computed`, the
+* result re-evaluates when the language changes.
+*
+* @param date - Date to format.
+* @param options - Passed straight to `Intl.DateTimeFormat`.
+*
+* @example
+* ```ts
+* formatDate(new Date(), { weekday: 'narrow' }) // 'T'
+* ```
+*/
+function formatDate(date, options) {
+	const tag = locale.value;
+	const key = `${tag}:${JSON.stringify(options)}`;
+	let formatter = cache.get(key);
+	if (!formatter) {
+		formatter = new Intl.DateTimeFormat(tag, options);
+		cache.set(key, formatter);
+	}
+	return formatter.format(date);
+}
+var numberCache = /* @__PURE__ */ new Map();
+/**
+* Formats a number in the active locale, or in `tag` when one is given.
+*
+* The same cache and the same locale as `formatDate`, so a counter and the
+* date beside it change language together.
+*
+* @param value - Number to format.
+* @param options - Passed straight to `Intl.NumberFormat`: currency, percent, decimals.
+* @param tag - A BCP 47 tag that overrides the active locale for this call.
+*
+* @example
+* ```ts
+* formatNumber(48200, { style: 'currency', currency: 'JPY' }) // '¥48,200'
+* ```
+*/
+function formatNumber(value, options = {}, tag = locale.value) {
+	const key = `${tag}:${JSON.stringify(options)}`;
+	let formatter = numberCache.get(key);
+	if (!formatter) {
+		formatter = new Intl.NumberFormat(tag, options);
+		numberCache.set(key, formatter);
+	}
+	return formatter.format(value);
+}
+//#endregion
+export { formatNumber as n, setFormatLocale as r, formatDate as t };
+
+//# sourceMappingURL=format-BEvBK1SJ.js.map

package/dist/format-BEvBK1SJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-BEvBK1SJ.js","names":[],"sources":["../src/utils/format.ts"],"sourcesContent":["import { ref } from 'vue'\n\n/**\n * The locale `Intl` formatting uses.\n *\n * Held here rather than imported from an i18n runtime so the utilities have no\n * i18n dependency at all: an app that never installs vue-i18n still gets dates\n * in the right language. `createI18nRuntime` sets this when it is used.\n */\nconst locale = ref<string>(typeof navigator === 'undefined' ? 'en' : (navigator.language ?? 'en'))\n\n/**\n * Points every formatter at a new locale.\n *\n * @example\n * ```ts\n * setFormatLocale('tr-TR')\n * ```\n */\nexport function setFormatLocale(next: string): void {\n  locale.value = next\n}\n\n/**\n * `Intl.DateTimeFormat` is expensive to construct, so instances are cached per\n * locale and option set. The key includes the locale, which is what lets the\n * cache survive a language change instead of returning stale formatters.\n */\nconst cache = new Map<string, Intl.DateTimeFormat>()\n\n/**\n * Formats a date in the active locale.\n *\n * Reading the locale ref here is deliberate: called from a `computed`, the\n * result re-evaluates when the language changes.\n *\n * @param date - Date to format.\n * @param options - Passed straight to `Intl.DateTimeFormat`.\n *\n * @example\n * ```ts\n * formatDate(new Date(), { weekday: 'narrow' }) // 'T'\n * ```\n */\nexport function formatDate(date: Date, options: Intl.DateTimeFormatOptions): string {\n  const tag = locale.value\n  const key = `${tag}:${JSON.stringify(options)}`\n\n  let formatter = cache.get(key)\n  if (!formatter) {\n    formatter = new Intl.DateTimeFormat(tag, options)\n    cache.set(key, formatter)\n  }\n\n  return formatter.format(date)\n}\n\nconst numberCache = new Map<string, Intl.NumberFormat>()\n\n/**\n * Formats a number in the active locale, or in `tag` when one is given.\n *\n * The same cache and the same locale as `formatDate`, so a counter and the\n * date beside it change language together.\n *\n * @param value - Number to format.\n * @param options - Passed straight to `Intl.NumberFormat`: currency, percent, decimals.\n * @param tag - A BCP 47 tag that overrides the active locale for this call.\n *\n * @example\n * ```ts\n * formatNumber(48200, { style: 'currency', currency: 'JPY' }) // '¥48,200'\n * ```\n */\nexport function formatNumber(\n  value: number,\n  options: Intl.NumberFormatOptions = {},\n  tag: string = locale.value,\n): string {\n  const key = `${tag}:${JSON.stringify(options)}`\n\n  let formatter = numberCache.get(key)\n  if (!formatter) {\n    formatter = new Intl.NumberFormat(tag, options)\n    numberCache.set(key, formatter)\n  }\n\n  return formatter.format(value)\n}\n"],"mappings":";;;;;;;;;AASA,IAAM,SAAS,IAAY,OAAO,cAAc,cAAc,OAAQ,UAAU,YAAY,IAAK;;;;;;;;;AAUjG,SAAgB,gBAAgB,MAAoB;CAClD,OAAO,QAAQ;AACjB;;;;;;AAOA,IAAM,wBAAQ,IAAI,IAAiC;;;;;;;;;;;;;;;AAgBnD,SAAgB,WAAW,MAAY,SAA6C;CAClF,MAAM,MAAM,OAAO;CACnB,MAAM,MAAM,GAAG,IAAI,GAAG,KAAK,UAAU,OAAO;CAE5C,IAAI,YAAY,MAAM,IAAI,GAAG;CAC7B,IAAI,CAAC,WAAW;EACd,YAAY,IAAI,KAAK,eAAe,KAAK,OAAO;EAChD,MAAM,IAAI,KAAK,SAAS;CAC1B;CAEA,OAAO,UAAU,OAAO,IAAI;AAC9B;AAEA,IAAM,8BAAc,IAAI,IAA+B;;;;;;;;;;;;;;;;AAiBvD,SAAgB,aACd,OACA,UAAoC,CAAC,GACrC,MAAc,OAAO,OACb;CACR,MAAM,MAAM,GAAG,IAAI,GAAG,KAAK,UAAU,OAAO;CAE5C,IAAI,YAAY,YAAY,IAAI,GAAG;CACnC,IAAI,CAAC,WAAW;EACd,YAAY,IAAI,KAAK,aAAa,KAAK,OAAO;EAC9C,YAAY,IAAI,KAAK,SAAS;CAChC;CAEA,OAAO,UAAU,OAAO,KAAK;AAC/B"}

package/dist/index.d.ts

@@ -22,7 +22,7 @@
 export declare const VERSION: string;
 export { addDays, eachDayOfYear, fromDateKey, lastNDays, leadingBlanks, startOfWeek, toDateKey, todayKey, } from './utils/date';
 export type { WeekStart } from './utils/date';
-export { formatDate, setFormatLocale } from './utils/format';
+export { formatDate, formatNumber, setFormatLocale } from './utils/format';
 export { relativeDayLabel } from './utils/day-label';
 export type { DayLabels } from './utils/day-label';
 export { downloadJson } from './utils/download';

package/dist/index.js

@@ -1,4 +1,5 @@
 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-BXkajKGl.js";
+import { n as formatNumber, r as setFormatLocale, t as formatDate } from "./format-BEvBK1SJ.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, v as SHEET_ROOT_ID, y as ensureSheetRoot } from "./GoogleButton-D82EoXSQ.js";
 import { n as registerErrorMapper, r as toAppError, t as AppError } from "./app-error-DF9cijE0.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
@@ -7,57 +8,6 @@ import { Fragment, Teleport, TransitionGroup, computed, createBlock, createComme
 import { ArrowDown, ArrowRight, ArrowUp, CheckCircle2, ChevronDown, Info, TriangleAlert, X, XCircle } from "lucide-vue-next";
 import { RouterLink } from "vue-router";
 import { createI18n } from "vue-i18n";
-//#region src/utils/format.ts
-/**
-* The locale `Intl` formatting uses.
-*
-* Held here rather than imported from an i18n runtime so the utilities have no
-* i18n dependency at all: an app that never installs vue-i18n still gets dates
-* in the right language. `createI18nRuntime` sets this when it is used.
-*/
-var locale = ref(typeof navigator === "undefined" ? "en" : navigator.language ?? "en");
-/**
-* Points every formatter at a new locale.
-*
-* @example
-* ```ts
-* setFormatLocale('tr-TR')
-* ```
-*/
-function setFormatLocale(next) {
-	locale.value = next;
-}
-/**
-* `Intl.DateTimeFormat` is expensive to construct, so instances are cached per
-* locale and option set. The key includes the locale, which is what lets the
-* cache survive a language change instead of returning stale formatters.
-*/
-var cache = /* @__PURE__ */ new Map();
-/**
-* Formats a date in the active locale.
-*
-* Reading the locale ref here is deliberate: called from a `computed`, the
-* result re-evaluates when the language changes.
-*
-* @param date - Date to format.
-* @param options - Passed straight to `Intl.DateTimeFormat`.
-*
-* @example
-* ```ts
-* formatDate(new Date(), { weekday: 'narrow' }) // 'T'
-* ```
-*/
-function formatDate(date, options) {
-	const tag = locale.value;
-	const key = `${tag}:${JSON.stringify(options)}`;
-	let formatter = cache.get(key);
-	if (!formatter) {
-		formatter = new Intl.DateTimeFormat(tag, options);
-		cache.set(key, formatter);
-	}
-	return formatter.format(date);
-}
-//#endregion
 //#region src/utils/day-label.ts
 /**
 * A short name for a day, relative to today.
@@ -2106,8 +2056,8 @@ function createI18nRuntime(options) {
 *
 * The fallback keeps `vitest` and `vite dev` honest, where no define runs.
 */
-var VERSION = "2.2.0";
+var VERSION = "2.3.0";
 //#endregion
-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, BaseCombobox_default as BaseCombobox, BaseInput_default as BaseInput, BaseMenu_default as BaseMenu, BaseRadioGroup_default as BaseRadioGroup, BaseSelect_default as BaseSelect, BaseSheet_default as BaseSheet, BaseSlider_default as BaseSlider, BaseSpinner_default as BaseSpinner, BaseSwitch_default as BaseSwitch, BaseTable_default as BaseTable, BaseTextarea_default as BaseTextarea, EmptyState_default as EmptyState, ErrorBoundary_default as ErrorBoundary, FormField_default as FormField, GoogleButton_default as GoogleButton, LocaleLinks_default as LocaleLinks, MATERIALS, PALETTES, PageContainer_default as PageContainer, PageHeader_default as PageHeader, PriceCard_default as PriceCard, ProgressBar_default as ProgressBar, SHEET_ROOT_ID, 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, applyMaterial, applyPalette, applyTheme, createI18nRuntime, downloadJson, eachDayOfYear, ensureSheetRoot, formatDate, fromDateKey, isApplePortable, isInstalled, isMaterial, isPaletteName, isThemePreference, lastNDays, leadingBlanks, needsIosInstall, readStoredTheme, registerErrorMapper, relativeDayLabel, safeRedirect, setFormatLocale, setMaterialStorageKey, setPaletteStorageKey, setThemeStorageKey, startOfWeek, tapFeedback, toAppError, toDateKey, toRedirectPath, todayKey, useDebouncedCallback, useDragScroll, useMaterial, useMediaQuery, useOnline, usePalette, 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, BaseCombobox_default as BaseCombobox, BaseInput_default as BaseInput, BaseMenu_default as BaseMenu, BaseRadioGroup_default as BaseRadioGroup, BaseSelect_default as BaseSelect, BaseSheet_default as BaseSheet, BaseSlider_default as BaseSlider, BaseSpinner_default as BaseSpinner, BaseSwitch_default as BaseSwitch, BaseTable_default as BaseTable, BaseTextarea_default as BaseTextarea, EmptyState_default as EmptyState, ErrorBoundary_default as ErrorBoundary, FormField_default as FormField, GoogleButton_default as GoogleButton, LocaleLinks_default as LocaleLinks, MATERIALS, PALETTES, PageContainer_default as PageContainer, PageHeader_default as PageHeader, PriceCard_default as PriceCard, ProgressBar_default as ProgressBar, SHEET_ROOT_ID, 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, applyMaterial, applyPalette, applyTheme, createI18nRuntime, downloadJson, eachDayOfYear, ensureSheetRoot, formatDate, formatNumber, fromDateKey, isApplePortable, isInstalled, isMaterial, isPaletteName, isThemePreference, lastNDays, leadingBlanks, needsIosInstall, readStoredTheme, registerErrorMapper, relativeDayLabel, safeRedirect, setFormatLocale, setMaterialStorageKey, setPaletteStorageKey, setThemeStorageKey, startOfWeek, tapFeedback, toAppError, toDateKey, toRedirectPath, todayKey, useDebouncedCallback, useDragScroll, useMaterial, useMediaQuery, useOnline, usePalette, useTheme, useToast, useToday, useVisualViewport };
 
 //# sourceMappingURL=index.js.map