@fabrika/ui 0.8.2 → 0.9.0-cloudflare.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@fabrika/ui",
-	"version": "0.8.2",
+	"version": "0.9.0-cloudflare.2",
 	"type": "module",
 	"description": "React component kit for the paved road: accessible admin components styled through CSS custom properties.",
 	"license": "MIT",
@@ -14,17 +14,18 @@
 	},
 	"files": [
 		"src",
-		"!src/**/__tests__/**"
+		"!src/**/__tests__/**",
+		"types"
 	],
 	"exports": {
 		".": {
 			"bun": "./src/index.ts",
-			"types": "./src/index.ts",
+			"types": "./types/src/index.d.ts",
 			"default": "./src/index.ts"
 		},
 		"./challenge": {
 			"bun": "./src/Challenge.tsx",
-			"types": "./src/Challenge.tsx",
+			"types": "./types/src/Challenge.d.ts",
 			"default": "./src/Challenge.tsx"
 		},
 		"./styles.css": "./src/styles.css",

package/types/src/AppShell.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+export interface NavItem {
+    readonly label: string;
+    readonly href: string;
+    readonly active?: boolean;
+    readonly count?: number;
+}
+export interface AppShellProps {
+    readonly brand: ReactNode;
+    readonly nav: readonly NavItem[];
+    /** The signed-in caller, shown at the end of the top bar. */
+    readonly user?: ReactNode;
+    readonly actions?: ReactNode;
+    /** The top bar: shown when there is a `user` or `actions`, unless `false`. */
+    readonly topBar?: boolean;
+    /** The current navigation item: a soft accent (the default), or `filled` with the accent and an inverted count. */
+    readonly navStyle?: 'soft' | 'filled';
+    readonly children: ReactNode;
+    readonly navLabel?: string;
+    readonly className?: string;
+}
+export declare function AppShell({ brand, nav, user, actions, topBar, navStyle, children, navLabel, className }: AppShellProps): import("react").JSX.Element;

package/types/src/Button.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export type ButtonSize = 'sm' | 'md';
+export interface ButtonProps extends Readonly<ComponentProps<'button'>> {
+    readonly variant?: ButtonVariant;
+    readonly size?: ButtonSize;
+    /** Disables the button and shows a spinner beside its label until the work it started settles. */
+    readonly loading?: boolean;
+}
+export declare function Button({ variant, size, loading, type, disabled, className, children, ...rest }: ButtonProps): import("react").JSX.Element;
+export interface ButtonLinkProps extends Readonly<ComponentProps<'a'>> {
+    readonly href: string;
+    readonly variant?: ButtonVariant;
+    readonly size?: ButtonSize;
+}
+export declare function ButtonLink({ variant, size, className, children, ...rest }: ButtonLinkProps): import("react").JSX.Element;

package/types/src/Card.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+export interface CardProps {
+    readonly title?: ReactNode;
+    readonly actions?: ReactNode;
+    readonly children: ReactNode;
+    readonly footer?: ReactNode;
+    readonly className?: string;
+}
+export declare function Card({ title, actions, children, footer, className }: CardProps): import("react").JSX.Element;
+export interface SectionProps {
+    readonly title: ReactNode;
+    readonly description?: ReactNode;
+    readonly actions?: ReactNode;
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+export declare function Section({ title, description, actions, children, className }: SectionProps): import("react").JSX.Element;

package/types/src/Challenge.d.ts

@@ -0,0 +1,37 @@
+import 'altcha';
+/**
+ * The texts the widget renders as text, each with the widget's English default. Its footer is not among them: the
+ * widget renders that one as HTML, and the kit hides it.
+ */
+export interface ChallengeStrings {
+    readonly label: string;
+    readonly verifying: string;
+    readonly verified: string;
+    readonly verificationRequired: string;
+    readonly expired: string;
+    readonly error: string;
+    readonly reload: string;
+    readonly waitAlert: string;
+    /** @deprecated The label of the widget's logo link, which the kit hides; it reaches nothing, so it is not sent. */
+    readonly ariaLinkLabel?: string;
+}
+export interface ChallengeProps {
+    /** Where the widget fetches its challenge: `challengeUrl(api.<procedure>)` of `@fabrika/app/client`. */
+    readonly url: string;
+    /** The solved payload, or `null` once there is none again: the challenge expired or failed. */
+    readonly onToken?: (token: string | null) => void;
+    /**
+     * The hidden input the widget adds to its form, which a native form posts: `challengeToken`, the field a procedure
+     * with a challenge reads.
+     */
+    readonly name?: string;
+    /** When the widget solves by itself; `off` (the default) waits for the visitor to tick it. */
+    readonly auto?: 'off' | 'onfocus' | 'onload' | 'onsubmit';
+    readonly strings?: Partial<ChallengeStrings>;
+    readonly className?: string;
+}
+/**
+ * The proof-of-work widget for one procedure's challenge. A challenge passes once: after a refused submission, give the
+ * component a new `key` so the visitor solves a fresh one.
+ */
+export declare function Challenge({ url, onToken, name, auto, strings, className }: ChallengeProps): import("react").JSX.Element;

package/types/src/Columns.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+export interface ColumnsProps {
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+/** A main column that grows and a `SidePanel` beside it; they stack on narrow screens. */
+export declare function Columns({ children, className }: ColumnsProps): import("react").JSX.Element;
+export interface SidePanelProps {
+    readonly title?: ReactNode;
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+export declare function SidePanel({ title, children, className }: SidePanelProps): import("react").JSX.Element;

package/types/src/DataTable.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react';
+export interface Column<Row> {
+    readonly key: string;
+    readonly header: ReactNode;
+    readonly cell: (row: Row) => ReactNode;
+    readonly align?: 'start' | 'end';
+    /** Takes the width the other columns leave; the remaining columns shrink to their content. */
+    readonly grow?: boolean;
+    /** A width of the column scale (`--fui-column-width-<size>`), on its head and its cells. */
+    readonly width?: ColumnWidth;
+    /** Its cells wrap their text instead of keeping it on one line. */
+    readonly wrap?: boolean;
+}
+export type ColumnWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface TableSelection {
+    readonly selected: ReadonlySet<string>;
+    readonly onChange: (next: ReadonlySet<string>) => void;
+}
+export interface LoadMore {
+    readonly hasMore: boolean;
+    readonly loading: boolean;
+    readonly onLoadMore: () => void;
+    readonly label?: string;
+}
+export type TableStatus = 'loading' | 'error' | 'ready';
+export interface DataTableProps<Row> {
+    readonly caption?: ReactNode;
+    readonly columns: readonly Column<Row>[];
+    readonly rows: readonly Row[];
+    readonly rowKey: (row: Row) => string;
+    readonly status?: TableStatus;
+    readonly error?: ReactNode;
+    readonly onRetry?: () => void;
+    readonly empty?: ReactNode;
+    readonly selection?: TableSelection;
+    readonly selectionActions?: (selectedKeys: readonly string[]) => ReactNode;
+    readonly loadMore?: LoadMore;
+    readonly selectRowLabel?: (row: Row) => string;
+    readonly selectAllLabel?: string;
+    readonly selectedLabel?: (count: number) => string;
+    readonly selectionToolbarLabel?: string;
+    readonly clearSelectionLabel?: string;
+    readonly loadingLabel?: string;
+    readonly retryLabel?: string;
+    readonly className?: string;
+}
+export declare function DataTable<Row>({ caption, columns, rows, rowKey, status, error, onRetry, empty, selection, selectionActions, loadMore, selectRowLabel, selectAllLabel, selectedLabel, selectionToolbarLabel, clearSelectionLabel, loadingLabel, retryLabel, className, }: DataTableProps<Row>): import("react").JSX.Element;
+export interface Selection extends TableSelection {
+    readonly toggle: (key: string) => void;
+    readonly clear: () => void;
+}
+/** Selection state shaped to pass straight to `DataTable`'s `selection`. */
+export declare function useSelection(initial?: Iterable<string>): Selection;

package/types/src/Dialog.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react';
+export interface DialogProps {
+    readonly open: boolean;
+    readonly title: ReactNode;
+    readonly description?: ReactNode;
+    readonly onClose: () => void;
+    readonly children?: ReactNode;
+    readonly actions?: ReactNode;
+    readonly closeLabel?: string;
+    readonly className?: string;
+}
+/** A modal dialog rendered in place over a fixed overlay; it traps focus and gives it back on close. */
+export declare function Dialog({ open, title, description, onClose, children, actions, closeLabel, className }: DialogProps): import("react").JSX.Element | null;
+export interface ConfirmDialogProps {
+    readonly open: boolean;
+    readonly title: ReactNode;
+    readonly message: ReactNode;
+    readonly confirmLabel: string;
+    readonly cancelLabel?: string;
+    readonly tone?: 'primary' | 'danger';
+    /** The confirmed work is running: the confirm button spins and the dialog cannot be dismissed. */
+    readonly pending?: boolean;
+    readonly onConfirm: () => void;
+    readonly onCancel: () => void;
+    readonly closeLabel?: string;
+}
+export declare function ConfirmDialog({ open, title, message, confirmLabel, cancelLabel, tone, pending, onConfirm, onCancel, closeLabel, }: ConfirmDialogProps): import("react").JSX.Element;

package/types/src/Field.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from 'react';
+/** What a `Field` hands the one control inside it. */
+export interface FieldControl {
+    readonly id: string;
+    readonly name: string | undefined;
+    readonly describedBy: string | undefined;
+    readonly invalid: boolean;
+    readonly required: boolean;
+}
+export declare function useFieldControl(): FieldControl | undefined;
+export interface FieldProps {
+    readonly label: ReactNode;
+    readonly name?: string;
+    readonly hint?: ReactNode;
+    readonly error?: string;
+    readonly required?: boolean;
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+export declare function Field({ label, name, hint, error, required, children, className }: FieldProps): import("react").JSX.Element;
+interface ControlAttributes {
+    readonly id?: string;
+    readonly name?: string;
+    readonly required?: boolean;
+    readonly 'aria-describedby'?: string;
+    readonly 'aria-invalid'?: boolean | 'true' | 'false' | 'grammar' | 'spelling';
+}
+/** The attributes a control takes from its `Field`; what the author passed explicitly wins. */
+export declare function useFieldAttributes(own: ControlAttributes): ControlAttributes;
+export {};

package/types/src/FieldList.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export interface FieldListItem {
+    readonly label: ReactNode;
+    readonly value: ReactNode;
+}
+export interface FieldListProps {
+    readonly items: readonly FieldListItem[];
+    readonly columns?: 1 | 2 | 3;
+    readonly className?: string;
+}
+export declare function FieldList({ items, columns, className }: FieldListProps): import("react").JSX.Element;

package/types/src/FilterBar.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface FilterBarProps {
+    readonly children: ReactNode;
+    readonly onReset?: () => void;
+    readonly resetLabel?: string;
+    readonly label?: string;
+    readonly className?: string;
+}
+export declare function FilterBar({ children, onReset, resetLabel, label, className }: FilterBarProps): import("react").JSX.Element;

package/types/src/Form.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+/**
+ * The error a form shows. Structural on purpose: the framework's page hooks answer an error union whose members all
+ * carry a `message`, and the validation member carries `fields` by input path — it fits without this kit importing it.
+ */
+export interface FormErrorLike {
+    readonly message: string;
+    readonly fields?: Readonly<Record<string, string>>;
+}
+/** The message the enclosing `Form` holds for the field `name`, if any. */
+export declare function useFormFieldError(name: string | undefined): string | undefined;
+export interface FormProps {
+    readonly onSubmit: (data: FormData, form: HTMLFormElement) => void;
+    readonly error?: FormErrorLike | null;
+    readonly children: ReactNode;
+    readonly className?: string;
+    readonly fieldsSummary?: string;
+    readonly 'aria-label'?: string;
+}
+export declare function Form({ onSubmit, error, children, className, fieldsSummary, ...rest }: FormProps): import("react").JSX.Element;
+export interface FormActionsProps {
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+export declare function FormActions({ children, className }: FormActionsProps): import("react").JSX.Element;

package/types/src/PageHeader.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export interface PageHeaderProps {
+    readonly title: ReactNode;
+    readonly lead?: ReactNode;
+    readonly back?: {
+        readonly href: string;
+        readonly label: string;
+    };
+    readonly actions?: ReactNode;
+    readonly meta?: ReactNode;
+    readonly className?: string;
+}
+export declare function PageHeader({ title, lead, back, actions, meta, className }: PageHeaderProps): import("react").JSX.Element;

package/types/src/StatusPill.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { Tone } from './tone';
+export interface StatusPillProps {
+    readonly tone?: Tone;
+    /** The tone's dot before the text; `false` leaves it out. */
+    readonly dot?: boolean;
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+export declare function StatusPill({ tone, dot, children, className }: StatusPillProps): import("react").JSX.Element;

package/types/src/Tabs.d.ts

@@ -0,0 +1,16 @@
+export interface TabItem<K extends string> {
+    readonly key: K;
+    readonly label: string;
+    readonly count?: number;
+}
+export interface TabsProps<K extends string> {
+    readonly label: string;
+    readonly items: readonly TabItem<K>[];
+    readonly active: K;
+    readonly onChange: (key: K) => void;
+    /** `underline` (the default) marks the active tab by a line under it; `boxed` puts each tab in a box, its count after a dot. */
+    readonly variant?: 'underline' | 'boxed';
+    readonly className?: string;
+}
+/** A WAI-ARIA tab list with automatic activation: moving focus with the keyboard also selects. */
+export declare function Tabs<K extends string>({ label, items, active, onChange, variant, className }: TabsProps<K>): import("react").JSX.Element;

package/types/src/Timeline.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { Tone } from './tone';
+export interface TimelineItem {
+    readonly id: string;
+    readonly at: ReactNode;
+    readonly title: ReactNode;
+    readonly body?: ReactNode;
+    readonly tone?: Tone;
+}
+export interface TimelineProps {
+    readonly items: readonly TimelineItem[];
+    readonly empty?: ReactNode;
+    readonly className?: string;
+}
+export declare function Timeline({ items, empty, className }: TimelineProps): import("react").JSX.Element;

package/types/src/Toast.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+export type ToastTone = 'neutral' | 'success' | 'danger';
+export interface ToastOptions {
+    readonly tone?: ToastTone;
+    readonly message: string;
+    /** How long the toast stays; `0` keeps it until it is dismissed. */
+    readonly timeoutMs?: number;
+}
+export interface ToastApi {
+    readonly show: (options: ToastOptions) => void;
+}
+export interface ToastProviderProps {
+    readonly children: ReactNode;
+    readonly dismissLabel?: string;
+    readonly regionLabel?: string;
+}
+export declare function ToastProvider({ children, dismissLabel, regionLabel }: ToastProviderProps): import("react").JSX.Element;
+export declare function useToast(): ToastApi;

package/types/src/class-names.d.ts

@@ -0,0 +1,2 @@
+/** Joins the truthy class names: `classNames('fui-button', primary && 'fui-button--primary', className)`. */
+export declare function classNames(...names: readonly (string | false | null | undefined)[]): string;

package/types/src/index.d.ts

@@ -0,0 +1,20 @@
+export { AppShell, type AppShellProps, type NavItem } from './AppShell';
+export { Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant } from './Button';
+export { Card, type CardProps, Section, type SectionProps } from './Card';
+export { Columns, type ColumnsProps, SidePanel, type SidePanelProps } from './Columns';
+export { type Column, type ColumnWidth, DataTable, type DataTableProps, type LoadMore, type Selection, type TableSelection, type TableStatus, useSelection, } from './DataTable';
+export { ConfirmDialog, type ConfirmDialogProps, Dialog, type DialogProps } from './Dialog';
+export { Field, type FieldControl, type FieldProps, useFieldControl } from './Field';
+export { FieldList, type FieldListItem, type FieldListProps } from './FieldList';
+export { FilterBar, type FilterBarProps } from './FilterBar';
+export { Form, FormActions, type FormActionsProps, type FormErrorLike, type FormProps } from './Form';
+export { Checkbox, type CheckboxProps, DateInput, type DateInputProps, DateRange, type DateRangeProps, type DateRangeValue, Input, type InputProps, RadioGroup, type RadioGroupProps, Select, type SelectOption, type SelectProps, Textarea, type TextareaProps, } from './inputs';
+export { type Gap, Inline, type InlineProps, Stack, type StackProps } from './layout';
+export { PageHeader, type PageHeaderProps } from './PageHeader';
+export { type CreatedRouter, createRouter, type LinkProps, type NavigateOptions, type ParamsArgs, type ParamsOf, type RouteMatch, type RouterOptions, type RouterProps, type RouteTable, } from './router';
+export { CountBadge, type CountBadgeProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, LoadingState, type LoadingStateProps, Spinner, type SpinnerProps, } from './states';
+export { StatusPill, type StatusPillProps } from './StatusPill';
+export { type TabItem, Tabs, type TabsProps } from './Tabs';
+export { Timeline, type TimelineItem, type TimelineProps } from './Timeline';
+export { type ToastApi, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, useToast } from './Toast';
+export type { Tone } from './tone';

package/types/src/inputs.d.ts

@@ -0,0 +1,59 @@
+import { type ComponentProps, type ReactNode } from 'react';
+export interface InputProps extends Readonly<ComponentProps<'input'>> {
+}
+export declare function Input({ className, ...rest }: InputProps): import("react").JSX.Element;
+export interface DateInputProps extends Readonly<Omit<ComponentProps<'input'>, 'type'>> {
+}
+export declare function DateInput({ className, ...rest }: DateInputProps): import("react").JSX.Element;
+export interface TextareaProps extends Readonly<ComponentProps<'textarea'>> {
+}
+export declare function Textarea({ className, ...rest }: TextareaProps): import("react").JSX.Element;
+export interface SelectOption {
+    readonly value: string;
+    readonly label: string;
+}
+export interface SelectProps extends Readonly<Omit<ComponentProps<'select'>, 'children'>> {
+    readonly options: readonly SelectOption[];
+    /** An empty-valued first option, such as "All statuses" in a filter or "Choose…" in a form. */
+    readonly placeholder?: string;
+}
+export declare function Select({ options, placeholder, className, ...rest }: SelectProps): import("react").JSX.Element;
+export interface DateRangeValue {
+    readonly from: string;
+    readonly to: string;
+}
+export interface DateRangeProps extends DateRangeValue {
+    readonly onChange: (next: DateRangeValue) => void;
+    readonly fromLabel?: string;
+    readonly toLabel?: string;
+    readonly disabled?: boolean;
+    readonly className?: string;
+}
+export declare function DateRange({ from, to, onChange, fromLabel, toLabel, disabled, className }: DateRangeProps): import("react").JSX.Element;
+export interface CheckboxProps {
+    readonly label: ReactNode;
+    readonly checked: boolean;
+    readonly onChange: (checked: boolean) => void;
+    readonly indeterminate?: boolean;
+    readonly disabled?: boolean;
+    readonly name?: string;
+    readonly value?: string;
+    /** Keeps the label for assistive technology only, as in a table's selection column. */
+    readonly hideLabel?: boolean;
+    readonly className?: string;
+}
+export declare function Checkbox({ label, checked, onChange, indeterminate, disabled, name, value, hideLabel, className }: CheckboxProps): import("react").JSX.Element;
+export interface RadioGroupProps<V extends string> {
+    readonly label: ReactNode;
+    readonly name: string;
+    readonly options: readonly {
+        readonly value: V;
+        readonly label: ReactNode;
+    }[];
+    readonly value: V | undefined;
+    readonly onChange: (value: V) => void;
+    readonly disabled?: boolean;
+    readonly inline?: boolean;
+    readonly className?: string;
+}
+export declare function RadioGroup<V extends string>({ label, name, options, value, onChange, disabled, inline, className }: RadioGroupProps<V>): import("react").JSX.Element;

package/types/src/layout.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export type Gap = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export interface StackProps {
+    readonly gap?: Gap;
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+export declare function Stack({ gap, children, className }: StackProps): import("react").JSX.Element;
+export interface InlineProps {
+    readonly gap?: Gap;
+    readonly align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+    readonly justify?: 'start' | 'center' | 'end' | 'between';
+    readonly wrap?: boolean;
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+export declare function Inline({ gap, align, justify, wrap, children, className }: InlineProps): import("react").JSX.Element;

package/types/src/router.d.ts

@@ -0,0 +1,47 @@
+import { type ComponentProps, type ReactNode } from 'react';
+type ParamNames<P extends string> = P extends `${string}:${infer Name}/${infer Rest}` ? Name | ParamNames<`/${Rest}`> : P extends `${string}:${infer Name}` ? Name : never;
+/** The params of a path pattern: `ParamsOf<'/deals/:id'>` is `{ readonly id: string }`. */
+export type ParamsOf<P extends string> = {
+    readonly [Name in ParamNames<P>]: string;
+};
+/** A route name → path pattern table, such as `{ deals: '/deals', deal: '/deals/:id' }`. */
+export type RouteTable = Readonly<Record<string, string>>;
+type RouteName<R extends RouteTable> = keyof R & string;
+/** A pattern without params takes no params argument; one with params requires them. */
+export type ParamsArgs<P extends string> = [ParamNames<P>] extends [never] ? [] : [params: ParamsOf<P>];
+export type RouteMatch<R extends RouteTable> = {
+    [Name in RouteName<R>]: {
+        readonly name: Name;
+        readonly params: ParamsOf<R[Name]>;
+    };
+}[RouteName<R>];
+export interface RouterOptions {
+    /** The path the application is mounted under; it is stripped when matching and added by `href`. */
+    readonly base?: string;
+}
+export interface NavigateOptions {
+    readonly replace?: boolean;
+}
+export type LinkProps<R extends RouteTable, Name extends RouteName<R>> = Readonly<Omit<ComponentProps<'a'>, 'href'>> & {
+    readonly to: Name;
+} & ([ParamNames<R[Name]>] extends [never] ? {
+    readonly params?: undefined;
+} : {
+    readonly params: ParamsOf<R[Name]>;
+});
+export interface RouterProps {
+    readonly children: ReactNode;
+}
+export interface CreatedRouter<R extends RouteTable> {
+    readonly Router: (props: RouterProps) => ReactNode;
+    readonly Link: <Name extends RouteName<R>>(props: LinkProps<R, Name>) => ReactNode;
+    readonly useRoute: () => RouteMatch<R> | null;
+    readonly href: <Name extends RouteName<R>>(name: Name, ...params: ParamsArgs<R[Name]>) => string;
+    readonly navigate: <Name extends RouteName<R>>(name: Name, ...args: [...ParamsArgs<R[Name]>, options?: NavigateOptions]) => void;
+}
+/**
+ * A typed History API router over a route table. Every function it answers is typed from `routes`, and `Router` turns
+ * every plain same-origin `<a href>` under `base` into an in-app navigation.
+ */
+export declare function createRouter<const R extends RouteTable>(routes: R, options?: RouterOptions): CreatedRouter<R>;
+export {};

package/types/src/states.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+export interface SpinnerProps {
+    readonly label?: string;
+    readonly className?: string;
+}
+export declare function Spinner({ label, className }: SpinnerProps): import("react").JSX.Element;
+export interface CountBadgeProps {
+    readonly count: number;
+    readonly className?: string;
+}
+export declare function CountBadge({ count, className }: CountBadgeProps): import("react").JSX.Element;
+export interface EmptyStateProps {
+    readonly title: ReactNode;
+    readonly text?: ReactNode;
+    readonly action?: ReactNode;
+    readonly className?: string;
+}
+export declare function EmptyState({ title, text, action, className }: EmptyStateProps): import("react").JSX.Element;
+export interface ErrorStateProps {
+    readonly title?: ReactNode;
+    readonly text: ReactNode;
+    readonly onRetry?: () => void;
+    readonly retryLabel?: string;
+    readonly className?: string;
+}
+export declare function ErrorState({ title, text, onRetry, retryLabel, className }: ErrorStateProps): import("react").JSX.Element;
+export interface LoadingStateProps {
+    readonly text?: ReactNode;
+    readonly className?: string;
+}
+export declare function LoadingState({ text, className }: LoadingStateProps): import("react").JSX.Element;

package/types/src/tone.d.ts

@@ -0,0 +1 @@
+export type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'accent';