rei-kit 0.3.1 → 0.4.0

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

@@ -0,0 +1,38 @@
+/**
+ * A message the reader has to take in before carrying on.
+ *
+ * Roles rather than colours, like everything else here: `info` is neutral,
+ * `success` confirms, `warning` is a condition to know about, `danger` is
+ * something that went wrong or is about to. A component that took a hex would
+ * be a component that ignores the theme, and the theme is the whole reason the
+ * kit exists.
+ *
+ * `assertive` decides how a screen reader treats it: a failed save interrupts,
+ * a note about a form field waits its turn. Getting this wrong is invisible on
+ * screen and rude in a screen reader, which is why it is a prop and not a
+ * guess.
+ */
+type __VLS_Props = {
+    tone?: 'info' | 'success' | 'warning' | 'danger';
+    /** Announce immediately, interrupting. For failures the reader must act on. */
+    assertive?: boolean;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    mark?: (props: typeof __VLS_1) => any;
+} & {
+    title?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
+} & {
+    action?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: 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 __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/BaseBadge.vue.d.ts

@@ -0,0 +1,23 @@
+/**
+ * A small standing label: a level, a state, a count.
+ *
+ * Not a button and never clickable — the moment one of these needs a click it
+ * is a chip, which is a different component with focus, a hit area and a way
+ * to be removed. Keeping that line drawn is most of the value.
+ */
+type __VLS_Props = {
+    tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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 __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/BaseCard.vue.d.ts

@@ -0,0 +1,33 @@
+/**
+ * A surface with a border, and optionally a head and a foot.
+ *
+ * Every app here had written this div. That is not a crisis on its own — it is
+ * four classes — but it is four classes that were slightly different in each,
+ * so a card on one screen had a heavier border than a card on the next and
+ * nobody could say why.
+ *
+ * `interactive` is for a card that is a link or a button: it adds the lift and
+ * the press, and it is opt-in because a card holding a form should not move
+ * when the pointer crosses it.
+ */
+type __VLS_Props = {
+    interactive?: boolean;
+    as?: string;
+};
+declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {};
+type __VLS_Slots = {} & {
+    head?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+} & {
+    foot?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: 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 __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/ErrorBoundary.vue.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Keeps one broken screen from taking the whole app down.
+ *
+ * An error thrown while a component renders unmounts the tree above it, and a
+ * single-page app has nothing underneath — the tab goes white and whoever was
+ * using it loses what they were in the middle of.
+ *
+ * What it does *not* do is decide what that looks like. All three apps in this
+ * workshop had written this component, and the parts they had in common were
+ * the mechanism — catch, report, reset when the route changes — while the
+ * parts that differed were the ones that should: an icon, a sentence, a way
+ * back. So the fallback is a slot, and the kit stays out of the wording.
+ *
+ * Only errors thrown while rendering a descendant reach `onErrorCaptured`.
+ * Rejected promises and failed queries do not, and should not: those belong to
+ * the code that owns the request.
+ *
+ * @example
+ * ```vue
+ * <ErrorBoundary :resetKey="route.fullPath" @error="reportError">
+ *   <template #fallback="{ reset }">
+ *     <EmptyState :title="t('error.title')">
+ *       <BaseButton @click="reset">{{ t('error.retry') }}</BaseButton>
+ *     </EmptyState>
+ *   </template>
+ *   <RouterView />
+ * </ErrorBoundary>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Clears the error whenever it changes — a route path, usually.
+     *
+     * An error on one screen should not follow somebody to the next one, and
+     * without this the boundary stays broken until a full reload.
+     */
+    resetKey?: string | number | undefined;
+};
+declare function reset(): void;
+declare var __VLS_1: {
+    error: {};
+    reset: typeof reset;
+}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    fallback?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    error: (cause: unknown) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onError?: (cause: unknown) => 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/PageContainer.vue.d.ts

@@ -0,0 +1,33 @@
+/**
+ * One measure, centred, with the page's gutters.
+ *
+ * The first thing a desktop app needs and the last thing a kit built for
+ * phones thinks to provide — a 430 px shell has no use for a maximum width, so
+ * this was missing, and the consuming app wrote `max-w-[1200px] mx-auto px-6`
+ * into every layout instead. Written once it costs nothing; written eleven
+ * times it is eleven chances for one page to be forty pixels narrower than the
+ * rest, which is the kind of thing nobody can name and everybody can see.
+ *
+ * Two widths rather than one, because a page and a passage are different
+ * problems: `wide` is the page, `reading` is a column of prose at the width
+ * type wants to be read at.
+ */
+type __VLS_Props = {
+    /** `wide` for a page, `reading` for prose, `full` to opt out. */
+    width?: 'wide' | 'reading' | 'full';
+    /** The element to render. `main`, `section` and `article` all belong here. */
+    as?: string;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: 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 __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/ProgressBar.vue.d.ts

@@ -0,0 +1,18 @@
+/**
+ * How far through something somebody is.
+ *
+ * Clamped rather than trusted. A progress bar is always fed a computed number,
+ * and computed numbers arrive as 101, as -0, and as NaN when the denominator
+ * is zero — which is the ordinary state of a course nobody has started. Any of
+ * those renders a bar that runs past its own track, and it is the sort of
+ * thing that ships because the happy path was the only one anybody looked at.
+ */
+type __VLS_Props = {
+    value: number;
+    max?: number;
+    /** For screen readers. Without it this is a rectangle that means nothing. */
+    label?: string | 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/composables/use-media-query.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Whether a media query matches, kept up to date.
+ *
+ * Starts false and resolves on mount, which is deliberate: this is the one
+ * place a component is tempted to branch on viewport during render, and doing
+ * that under prerendering produces HTML built for a screen the server does not
+ * have. Hydration then swaps it and the page jumps. False first, correct a
+ * frame later, no jump — and a layout that reads badly at `false` is a layout
+ * with a mobile-first bug worth knowing about.
+ *
+ * Guarded for the server for the same reason the rest of the kit is: this
+ * package has to be importable in Node, and `matchMedia` does not exist there.
+ *
+ * @example
+ * ```ts
+ * const wide = useMediaQuery('(min-width: 64rem)')
+ * ```
+ */
+export declare function useMediaQuery(query: string): import('vue').Ref<boolean, boolean>;

package/dist/index.d.ts

@@ -8,7 +8,18 @@
  *
  * @see https://github.com/ramazandogna/rei-kit
  */
-export declare const VERSION = "0.0.0";
+/**
+ * The published version, replaced at build time from `package.json`.
+ *
+ * It was a literal `'0.0.0'` and nothing ever rewrote it, so every consumer
+ * that imported this — and the showcase, which is how it was noticed — was
+ * told the kit was at 0.0.0 whatever it actually was. A symbol in a public API
+ * that reports something false is worse than one that is missing: nobody
+ * checks a value that looks like it works.
+ *
+ * The fallback keeps `vitest` and `vite dev` honest, where no define runs.
+ */
+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';
@@ -27,13 +38,20 @@ export { useToday } from './composables/use-today';
 export { useOnline } from './composables/use-online';
 export { useDebouncedCallback } from './composables/use-debounced-callback';
 export { useDragScroll } from './composables/use-drag-scroll';
+export { useMediaQuery } from './composables/use-media-query';
 export { useVisualViewport } from './composables/use-visual-viewport';
 export type { VisualViewportRect } from './composables/use-visual-viewport';
+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 BaseSheet } from './components/BaseSheet.vue';
+export { default as BaseCard } from './components/BaseCard.vue';
 export { default as EmptyState } from './components/EmptyState.vue';
+export { default as ErrorBoundary } from './components/ErrorBoundary.vue';
+export { default as PageContainer } from './components/PageContainer.vue';
 export { default as PageHeader } from './components/PageHeader.vue';
+export { default as ProgressBar } from './components/ProgressBar.vue';
 export { default as PriceCard } from './components/PriceCard.vue';
 export { default as SectionHeading } from './components/SectionHeading.vue';
 export { default as SegmentedControl } from './components/SegmentedControl.vue';