rei-kit 2.15.0 → 2.17.0

package/README.md

@@ -1,6 +1,6 @@
 # rei-kit
 
-**One kit. Every look.** 90 accessible components for Vue 3 and Tailwind 4.
+**One kit. Every look.** 92 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.
 
@@ -112,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 90 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 92 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.                                                                                                                                                 |
@@ -124,11 +124,11 @@ Each claim here is enforced by something that fails, not by a promise.
 
 ## Status
 
-**v2.15.0 — three consumers.**
+**v2.17.0 — three consumers.**
 
 |              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Components   | 90 (`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   | 92 (`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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |

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

@@ -0,0 +1,61 @@
+import { Component } from 'vue';
+export interface TimelineEvent {
+    /** Identity, and the name of this event's own body slot. */
+    key: string;
+    /**
+     * When it happened, **already formatted for the active locale**.
+     *
+     * A string rather than a date key, because only the app knows whether this
+     * line should read "12 September", "2 hours ago" or "09:42" — and
+     * `formatDate` is right there for the first of those.
+     */
+    time: string;
+    /** Already translated. Omit when the body says it. */
+    title?: string | undefined;
+    /** A line under the title. Already translated. */
+    description?: string | undefined;
+    /**
+     * Background utility for the marker, e.g. `bg-positive`.
+     *
+     * A class rather than a category, the same contract as `ToneDot`: an app
+     * keys it off whatever its own domain calls a kind — habit types, order
+     * states, priorities — without this component knowing about any of them.
+     */
+    fill?: string | undefined;
+    /** Drawn inside the marker instead of a plain dot. */
+    icon?: Component | undefined;
+}
+declare const __VLS_export: <T extends TimelineEvent>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<{
+        events: readonly T[];
+        /** Names the list. Already translated. */
+        label: string;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        [key: string]: ((props: {
+            event: T;
+        }) => unknown) | undefined;
+        /** The body of every event — a note, a card, a quote. */
+        default?: (props: {
+            event: T;
+        }) => unknown;
+        /** The marker for every event, when a dot is not enough. */
+        marker?: (props: {
+            event: T;
+        }) => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,58 @@
+export interface ColorSwatch {
+    /** A hex value, `#rgb` or `#rrggbb`. */
+    value: string;
+    /** What to call it. Already translated. */
+    label: string;
+}
+/**
+ * A colour, as a hex value.
+ *
+ * ## A native `input[type="color"]`, painted
+ *
+ * The same decision as `BaseSlider`: the platform's own picker is better
+ * than anything a page can build. It is the one the reader already knows, it
+ * has the eyedropper on the desktops that have one, and on a phone it is a
+ * full-screen control no web page matches. What it does not have is a look
+ * that matches the rest of the kit, so the look is all that is replaced.
+ *
+ * ## What the kit supplies and what the app does
+ *
+ * `swatches` are the app's, values **and** names. A kit that shipped a row
+ * of colours would be shipping a product decision, and one that shipped
+ * unnamed colours would be shipping a set of buttons a screen reader reads
+ * as nothing. `PALETTES` is a ready source for an app that wants the kit's
+ * own ten.
+ *
+ * The hex field appears only when `hexLabel` is given, for the same reason
+ * `BaseChip` grows a remove button only when it is told what to call it: a
+ * control whose name the kit had to invent speaks a language the app does
+ * not.
+ *
+ * ## The value contract
+ *
+ * In and out as `#rrggbb`, lowercase — the way dates are `YYYY-MM-DD` and
+ * times are `HH:mm`. Short hex (`#abc`) and capitals are accepted from a
+ * reader typing and normalised on the way out, so an app never has to
+ * compare two spellings of the same colour.
+ */
+type __VLS_Props = {
+    /** Names the control. Already translated. */
+    label: string;
+    /** The colour, as `#rrggbb`. Required: a picker with no colour shows none. */
+    modelValue: string;
+    /** Colours to offer beside the picker. The app's values and names. */
+    swatches?: readonly ColorSwatch[] | undefined;
+    /** Names the hex field. Without it, there is no hex field. */
+    hexLabel?: string | undefined;
+    hint?: string | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    labelHidden?: boolean | undefined;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/index.d.ts

@@ -100,12 +100,16 @@ export { default as BaseLink } from './components/BaseLink.vue';
 export { default as BaseRating } from './components/BaseRating.vue';
 export { default as BaseSeparator } from './components/BaseSeparator.vue';
 export { default as BaseSkeleton } from './components/BaseSkeleton.vue';
+export { default as ColorPicker } from './components/ColorPicker.vue';
+export type { ColorSwatch } from './components/ColorPicker.vue';
 export { default as CopyButton } from './components/CopyButton.vue';
 export { default as DescriptionList } from './components/DescriptionList.vue';
 export type { DescriptionItem } from './components/DescriptionList.vue';
 export { default as FileDrop } from './components/FileDrop.vue';
 export { default as TagsInput } from './components/TagsInput.vue';
 export { default as TimePicker } from './components/TimePicker.vue';
+export { default as BaseTimeline } from './components/BaseTimeline.vue';
+export type { TimelineEvent } from './components/BaseTimeline.vue';
 export type { DateRange } from './components/BaseCalendar.vue';
 export { default as BaseDatePicker } from './components/BaseDatePicker.vue';
 export type { DatePreset } from './components/BaseDatePicker.vue';