rei-kit 0.18.2 → 0.20.0

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

@@ -0,0 +1,63 @@
+/**
+ * A list of actions behind one control.
+ *
+ * ## `role="menu"` is a promise
+ *
+ * Declaring it tells a screen reader that the arrow keys move between the
+ * items, that Escape closes, and that Tab leaves rather than walking through.
+ * A div with `role="menu"` and none of that is worse than a plain list of
+ * links: it announces a contract and then breaks it, and the reader is left
+ * pressing keys that do nothing.
+ *
+ * The hand-written menu this replaces declared the role and had none of the
+ * behaviour. That is the usual shape of the bug — the roles are the part people
+ * remember, because they are the part you can see in the markup.
+ *
+ * So: focus moves into the menu on open and back to the trigger on close,
+ * ArrowUp/ArrowDown move and wrap, Home and End jump, Escape closes, and a
+ * click outside closes. Items are found in the DOM rather than declared as
+ * data, so a caller can mix links, buttons and separators freely.
+ *
+ * @example
+ * ```vue
+ * <BaseMenu :label="t('nav.account')">
+ *   <template #trigger="{ open }">
+ *     <BaseAvatar :label="t('nav.account')" />
+ *   </template>
+ *
+ *   <RouterLink to="/profil" role="menuitem">{{ t('nav.profile') }}</RouterLink>
+ *   <button type="button" role="menuitem" @click="signOut">{{ t('auth.signOut') }}</button>
+ * </BaseMenu>
+ * ```
+ */
+type __VLS_Props = {
+    /** Accessible name for the trigger. Required: the trigger is usually a glyph. */
+    label: string;
+    /** Which edge the panel lines up with. */
+    align?: 'start' | 'end' | undefined;
+};
+type __VLS_Slots = {
+    /** The control that opens it. Receives the open state for its own styling. */
+    trigger?: (props: {
+        open: boolean;
+    }) => unknown;
+    /** The items. Anything with `role="menuitem"` joins the keyboard order. */
+    default: () => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: boolean) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,40 @@
+/**
+ * A value picked from a range, where roughly right is the point.
+ *
+ * A native `input[type="range"]`, painted. That is deliberate: the native
+ * control already has the keyboard (arrows, Page Up/Down, Home/End), the
+ * pointer, the touch target and the correct announcements, and every
+ * hand-rolled slider gives some of that up. What it does not have is a look
+ * that matches the rest of the kit, so the look is all that is replaced.
+ *
+ * `aria-valuetext` is the part worth stopping on. Without it a screen reader
+ * reads the number alone — "45" — and a number with no unit is not an answer to
+ * anything. Pass `format` and it reads "45 minutes".
+ */
+type __VLS_Props = {
+    label: string;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
+    hint?: string | undefined;
+    disabled?: boolean | undefined;
+    /**
+     * Turns the number into something a person would say — "45 minutes", "₺12".
+     *
+     * Used for the visible readout and for `aria-valuetext`, so both say the same
+     * thing and neither is a bare number.
+     */
+    format?: ((value: number) => string) | undefined;
+    showValue?: boolean | undefined;
+};
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: number) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,20 @@
+/**
+ * Work in progress, with no idea how much is left.
+ *
+ * `ProgressBar` is the one to reach for when the amount is known; this is for
+ * when it is not. Showing a bar that cannot move is worse than a spinner,
+ * because a bar is a promise about how long.
+ *
+ * `role="status"` and a label, so a screen reader says what is happening. A
+ * spinner with no accessible name is a decoration that happens to be the only
+ * thing on screen — which is why `label` is required and not defaulted to
+ * "Loading" in a language the app may not speak.
+ */
+type __VLS_Props = {
+    /** What is being waited for. Already translated. */
+    label: string;
+    size?: 'sm' | 'md' | 'lg' | undefined;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,34 @@
+/**
+ * A setting that takes effect the moment it is touched.
+ *
+ * Not `BaseCheckbox` with a rounder skin, and the difference is not visual. A
+ * checkbox states an intention that something else commits — a form is
+ * submitted, a dialog is confirmed. A switch *is* the commit: there is no Save
+ * after it, which is why it belongs in a settings row and why a form full of
+ * them is usually a form of checkboxes drawn wrong.
+ *
+ * `role="switch"` rather than a styled checkbox, because a screen reader
+ * announces "on"/"off" for a switch and "checked"/"unchecked" for a checkbox,
+ * and those are different sentences about different things.
+ *
+ * The whole row is the label, so the words are part of the hit target. On a
+ * phone that is the difference between a control and a coin toss.
+ */
+type __VLS_Props = {
+    label: string;
+    hint?: string | undefined;
+    disabled?: boolean | undefined;
+    /** For a switch inside a row that already names it — it keeps its accessible name. */
+    labelHidden?: boolean | undefined;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: boolean) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,44 @@
+export interface Column<Row> {
+    /** Key into the row, and the slot name for a custom cell. */
+    key: string & keyof Row;
+    /** Column heading. Already translated. */
+    label: string;
+    /** `end` for money and counts, which are read by their last digit. */
+    align?: 'start' | 'end' | undefined;
+    /** Stops a column wrapping — dates, short codes. */
+    nowrap?: boolean | undefined;
+}
+declare const __VLS_export: <Row extends Record<string, unknown>>(__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<{
+        columns: readonly Column<Row>[];
+        rows: readonly Row[];
+        /** What this table is. Required — an unnamed table is a box of numbers. */
+        caption: string;
+        /** Keeps the caption for assistive tech when the page already shows a heading. */
+        captionHidden?: boolean | undefined;
+        /** Which field identifies a row. Falls back to the index. */
+        rowKey?: (string & keyof Row) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        [key: string]: (props: {
+            row: Row;
+            value: unknown;
+        }) => unknown;
+        /** Shown instead of the body when there are no rows. */
+        empty?: () => 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/EmptyState.vue.d.ts

@@ -1,3 +1,11 @@
+/**
+ * A list with nothing in it yet, said kindly.
+ *
+ * A blank area reads as a page that failed to load, and the reader's first
+ * thought is that something is broken rather than that they have not started.
+ * So there is always a sentence, and the slot below it is where the way out
+ * goes — the button that creates the first one.
+ */
 type __VLS_Props = {
     title: string;
     description?: string | undefined;

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

@@ -1,3 +1,12 @@
+/**
+ * The bar at the top of a screen: a title with room either side of it.
+ *
+ * Three fixed columns rather than a flex row, so the title is centred on the
+ * screen rather than centred on what is left after the buttons. A back arrow on
+ * one side and nothing on the other would otherwise push every title off centre
+ * by exactly half a button, which is visible the moment two screens sit next to
+ * each other.
+ */
 type __VLS_Props = {
     title: string;
 };

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

@@ -1,3 +1,10 @@
+/**
+ * A titled run of settings rows.
+ *
+ * The heading is a real `h2` rather than styled text, because a settings screen
+ * is long and the headings are how somebody moves through it without reading
+ * all of it. Uppercase and quiet in the design, structural in the markup.
+ */
 type __VLS_Props = {
     title: string;
 };

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

@@ -1,3 +1,12 @@
+/**
+ * One number, with what it means and which way it is going.
+ *
+ * The trend is an arrow and a colour, and neither is allowed to be the whole
+ * message: the direction is also in the arrow's shape, so it survives a reader
+ * who cannot separate the kit's positive and negative hues. `null` is a real
+ * state rather than a missing one — a figure with no comparison yet is not a
+ * flat figure.
+ */
 type __VLS_Props = {
     value: string;
     label: string;

package/dist/index.d.ts

@@ -43,15 +43,24 @@ export { useVisualViewport } from './composables/use-visual-viewport';
 export { useToast } from './composables/use-toast';
 export type { Toast, ToastOptions, ToastTone } from './composables/use-toast';
 export type { VisualViewportRect } from './composables/use-visual-viewport';
+export { default as BaseAvatar } from './components/BaseAvatar.vue';
 export { default as BaseAlert } from './components/BaseAlert.vue';
 export { default as BaseBadge } from './components/BaseBadge.vue';
 export { default as BaseButton } from './components/BaseButton.vue';
 export { default as BaseInput } from './components/BaseInput.vue';
+export { default as BaseMenu } from './components/BaseMenu.vue';
 export { default as BaseSheet } from './components/BaseSheet.vue';
 export { default as BaseCard } from './components/BaseCard.vue';
+export { default as BaseCombobox } from './components/BaseCombobox.vue';
+export type { ComboboxOption } from './components/BaseCombobox.vue';
 export { default as BaseCheckbox } from './components/BaseCheckbox.vue';
 export { default as BaseRadioGroup } from './components/BaseRadioGroup.vue';
 export { default as BaseSelect } from './components/BaseSelect.vue';
+export { default as BaseSlider } from './components/BaseSlider.vue';
+export { default as BaseSpinner } from './components/BaseSpinner.vue';
+export { default as BaseSwitch } from './components/BaseSwitch.vue';
+export { default as BaseTable } from './components/BaseTable.vue';
+export type { Column } from './components/BaseTable.vue';
 export { default as BaseTextarea } from './components/BaseTextarea.vue';
 export { default as EmptyState } from './components/EmptyState.vue';
 export { default as FormField } from './components/FormField.vue';