@karni/ui 0.0.0-stage → 0.4.0

package/dist/src/auth/engine.d.ts

@@ -0,0 +1,101 @@
+import { KarniClient } from '../schema/client';
+import { TokenStorage } from './storage';
+import { AuthStatus, KarniUser, LoginResult } from './types';
+export type AuthMode = "jwt" | "session";
+export interface AuthEngineOptions {
+    client: KarniClient;
+    tokenStorage: TokenStorage;
+    /** Skips schema-based mode detection entirely when set. */
+    modeOverride?: AuthMode;
+    /** Session-mode CSRF cookie name (A4 pin). Default "csrftoken". */
+    csrfCookieName?: string;
+    /** Session-mode CSRF header name (A4 pin). Default "X-CSRFToken". */
+    csrfHeaderName?: string;
+    /** Path prefix of the auth endpoints, relative to the client's baseUrl. */
+    authBasePath?: string;
+    /**
+     * Reads whatever the schema loader cached under karniKeys.schema(). The
+     * engine consults it (shape-guarded) for `authMode` before fetching the
+     * document.
+     */
+    readCachedSchema?: () => unknown;
+}
+export interface AuthSnapshot {
+    readonly status: AuthStatus;
+    readonly user: KarniUser | null;
+    readonly mode: AuthMode | null;
+}
+/**
+ * Reads the auth mode out of either a ParsedSchema (`authMode`) or a raw
+ * OpenAPI document (root `x-karni-auth-mode`), shape-guarded.
+ */
+export declare function readAuthMode(value: unknown): AuthMode | undefined;
+/** Validates/normalizes a `me` payload into a KarniUser (roles default []). */
+export declare function normalizeUser(value: unknown): KarniUser | null;
+export declare class AuthEngine {
+    private readonly client;
+    private readonly tokenStorage;
+    private readonly modeOverride;
+    private readonly csrfCookieName;
+    private readonly csrfHeaderName;
+    private readonly authBasePath;
+    private readonly readCachedSchema;
+    private mode;
+    private accessToken;
+    private refreshPromise;
+    private initPromise;
+    private readonly listeners;
+    private state;
+    constructor(options: AuthEngineOptions);
+    /** Registers the D6 hook points on the client. Idempotent. */
+    attach(): void;
+    /**
+     * Clears every hook this engine registered, including a `getAccessToken`
+     * the app passed to createKarniClient. An unmounted AuthProvider leaves
+     * the client fully unauthenticated by design.
+     */
+    detach(): void;
+    private csrfHeaders;
+    /**
+     * The client calls this at most once per 401-ing request (D6). Returning
+     * true makes the client retry that request exactly once with
+     * freshly-injected credentials. The retry's outcome is always surfaced.
+     */
+    private handleUnauthorized;
+    readonly subscribe: (listener: () => void) => (() => void);
+    readonly getSnapshot: () => AuthSnapshot;
+    private setState;
+    /** Idempotent: the first call kicks off mode resolution + session restore. */
+    ensureInitialized(): Promise<void>;
+    private initialize;
+    private fetchSchemaAuthMode;
+    /** Fetches `/me/` and mirrors the result. Any failure means anonymous. */
+    private syncUser;
+    /**
+     * Reads the CSRF cookie, bootstrapping it via `GET <authBasePath>/csrf/`
+     * when absent (A4). Returns null when the cookie stays unreadable (e.g.
+     * CSRF_COOKIE_HTTPONLY). Requests then go out without the header and the
+     * backend's 403 surfaces, which is the honest failure mode.
+     */
+    private ensureCsrfToken;
+    /** ONE shared in-flight refresh. Resolves true on success. */
+    private ensureRefresh;
+    private performRefresh;
+    login(email: string, password: string): Promise<LoginResult>;
+    private fetchMe;
+    /** Best-effort server logout, then always clears local state (anonymous). */
+    logout(): Promise<void>;
+    /**
+     * Adopts tokens issued out of band, which is what
+     * `@karni/impersonation-ui` does when a support user starts or stops
+     * impersonating (the backend answers with tokens for the other identity).
+     * JWT mode only. In session mode the server-side session already changed,
+     * so this just re-syncs `/me/`.
+     */
+    adoptTokens(access: string | null, refresh: string | null): Promise<void>;
+    /**
+     * Re-syncs the session: rotates the tokens in JWT mode (A3: /refresh/ is
+     * 405 in session mode, so session mode only re-fetches /me/).
+     */
+    refresh(): Promise<void>;
+}

package/dist/src/auth/provider.d.ts

@@ -0,0 +1,43 @@
+import { ReactElement, ReactNode } from 'react';
+import { TokenStorage } from './storage';
+import { AuthStatus, KarniUser, LoginResult } from './types';
+export interface AuthProviderProps {
+    /**
+     * "jwt" | "session". When omitted, the mode comes from the schema root's
+     * x-karni-auth-mode (D6), falling back to "jwt" when the schema does not
+     * declare one.
+     */
+    mode?: "jwt" | "session";
+    /** JWT mode refresh-token storage. Defaults to the localStorage adapter. */
+    tokenStorage?: TokenStorage;
+    /** Session mode CSRF cookie name. Default "csrftoken" (D6/A4). */
+    csrfCookieName?: string;
+    /** Session mode CSRF header name. Default "X-CSRFToken" (D6/A4). */
+    csrfHeaderName?: string;
+    /** Path prefix of the auth endpoints relative to baseUrl. Default "/auth". */
+    authBasePath?: string;
+    children?: ReactNode;
+}
+export interface AuthContextValue {
+    user: KarniUser | null;
+    roles: string[];
+    status: AuthStatus;
+    login(email: string, password: string): Promise<LoginResult>;
+    logout(): Promise<void>;
+    refresh(): Promise<void>;
+    /**
+     * Adopts tokens issued out of band (JWT mode, or a `/me/` re-sync in session
+     * mode), e.g. after starting or stopping an impersonated session.
+     */
+    adoptTokens(access: string | null, refresh: string | null): Promise<void>;
+}
+/**
+ * The React mirror of the auth engine's state. Exported for advanced
+ * composition (stories, tests, custom providers). Application code should
+ * use <AuthProvider> + useAuth().
+ */
+export declare const AuthContext: import('react').Context<AuthContextValue | null>;
+/** Rendered inside `KarniProvider`, it holds the signed-in user and attaches credentials (JWT or session) to every request. */
+export declare function AuthProvider({ mode, tokenStorage, csrfCookieName, csrfHeaderName, authBasePath, children, }: AuthProviderProps): ReactElement;
+/** Returns the signed-in user, auth status, `login` and `logout`, and throws a descriptive error outside `AuthProvider`. */
+export declare function useAuth(): AuthContextValue;

package/dist/src/auth/storage.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Pluggable refresh-token storage for JWT mode (contract "Hooks + auth").
+ *
+ * The default adapter is `localStorage`: it survives reloads and is the
+ * simplest thing that works, but any XSS on your page can read it. Stricter
+ * setups use `createMemoryTokenStorage()` (logout on reload) or implement
+ * the three-method `TokenStorage` interface themselves (e.g. backed by a
+ * worker, or by an HttpOnly-cookie BFF). Session mode needs no storage.
+ */
+export interface TokenStorage {
+    get(): string | null;
+    set(token: string): void;
+    clear(): void;
+}
+/**
+ * The default storage, which keeps the refresh token in localStorage. `key` defaults to "karni.refreshToken". Every storage
+ * access is guarded: when localStorage is unavailable (SSR, private windows,
+ * blocked site data) the adapter degrades to a no-op that returns `null`
+ * instead of throwing.
+ */
+export declare function createLocalStorageTokenStorage(key?: string): TokenStorage;
+/**
+ * In-memory adapter: most secure (nothing persisted anywhere), but a page
+ * reload logs the user out.
+ */
+export declare function createMemoryTokenStorage(): TokenStorage;

package/dist/src/auth/types.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Public auth types (contract "Hooks + auth" + D6, accounts contract A15).
+ */
+/**
+ * Shape of the `/api/auth/me/` response. The accounts contract (A15)
+ * guarantees `roles: string[]` on MeSerializer. Every other field the
+ * backend's user serializer exposes rides along via the index signature.
+ */
+export interface KarniUser {
+    id: string | number;
+    email: string;
+    roles: string[];
+    [extra: string]: unknown;
+}
+/**
+ * "loading" while the initial session restore runs, then "authenticated" or
+ * "anonymous". A failed token refresh always lands on "anonymous" (D6).
+ */
+export type AuthStatus = "loading" | "authenticated" | "anonymous";
+/**
+ * Discriminated login result (D6). When the backend's 2FA gate fires
+ * (accounts A6), `login()` resolves `{ requires2fa, ephemeralToken }`.
+ * The 2FA UI is out of scope in v0.1, so consumers exchange the ephemeral
+ * token themselves via `POST /api/auth/2fa/login/`.
+ */
+export type LoginResult = {
+    ok: true;
+    user: KarniUser;
+} | {
+    requires2fa: true;
+    ephemeralToken: string;
+};

package/dist/src/auth/usePermission.d.ts

@@ -0,0 +1,7 @@
+export interface PermissionHelpers {
+    /** True when the user has at least one of the given role names. */
+    hasRole(...names: string[]): boolean;
+    isAuthenticated: boolean;
+}
+/** `isAuthenticated` and `hasRole(...names)` for the signed-in user. */
+export declare function usePermission(): PermissionHelpers;

package/dist/src/components/brand/karni-mark.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export interface KarniMarkProps extends Omit<React.SVGAttributes<SVGSVGElement>, "children"> {
+    /** Rendered size in px (width and height). Default 28. */
+    size?: number;
+    /**
+     * Which drawing: the full mark, the small-size variant, or `auto` (the
+     * default): the small variant at 32px and below, the full mark above.
+     */
+    variant?: "auto" | "full" | "simple";
+    /** Accessible name. Pass an empty string to hide a purely decorative mark. */
+    title?: string;
+}
+/**
+ * The Karni mark as inline SVG, so there is no asset to load or bundle.
+ *
+ * It is the default content of `<Layout>`'s `sidebarHeader` slot so a bare
+ * shell is never nameless. A project replaces it by passing its own
+ * `sidebarHeader` (the scaffold already does). Do not recolour or restyle it:
+ * the mark is Karni's, see assets/brand/README.md in the repository.
+ */
+export declare const KarniMark: React.ForwardRefExoticComponent<KarniMarkProps & React.RefAttributes<SVGSVGElement>>;

package/dist/src/components/brand/mark-paths.d.ts

@@ -0,0 +1,8 @@
+export declare const MARK_VIEWBOX = "0 0 1000 1000";
+/** The full mark: ground, rings, strokes. */
+export declare const MARK_PATHS: ReadonlyArray<{
+    readonly fill: string;
+    readonly d: string;
+}>;
+/** The small-size variant's SVG body (use at 32px and below). */
+export declare const MARK_SIMPLE_BODY = "<path fill=\"#000000\" d=\"M495.8 884.4C291.9 874.2 135.4 724 114.7 518.5C97.9 351.3 160.2 221 290.9 150.2C372.3 106.1 439.7 86.4 513.6 85.2C686 82.3 812.9 171.5 867 333.5C903.9 444 890.2 573.8 828.6 698.6C766.8 823.4 644.3 891.8 495.8 884.4Z\"/>\n<circle cx=\"340\" cy=\"300\" r=\"44\" fill=\"#FB5D08\"/>\n<circle cx=\"500\" cy=\"276\" r=\"44\" fill=\"#FB5D08\"/>\n<circle cx=\"660\" cy=\"300\" r=\"44\" fill=\"#FB5D08\"/>\n<path fill=\"none\" stroke=\"#FFFFFF\" stroke-width=\"58\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n      d=\"M318 420v280l182-250 182 250V420M500 450 410 700M500 450l90 250\"/>";

package/dist/src/components/chart/data-chart.d.ts

@@ -0,0 +1,129 @@
+import * as React from "react";
+/**
+ * In-house SVG chart (contract: no chart dependency).
+ *
+ * Accessibility model (contract D10): the SVG is a labelled image
+ * (role="img" + aria-label + <title>/<desc>) described by a generated
+ * summary (the range of each series). The REAL accessible data surface is a
+ * visually-hidden <table> rendered next to it. The tooltip is rendered
+ * OUTSIDE the role="img" element and hidden from assistive tech. The SVG is
+ * focusable, the arrow keys move the tooltip from point to point, and each
+ * point is announced through a polite live region.
+ *
+ * Colors come exclusively from the --karni-chart-1..5 tokens, via the
+ * Tailwind preset's chart color scale (stroke-chart-N / fill-chart-N /
+ * bg-chart-N classes, whole class names per contract D7).
+ */
+export type DataChartKind = "line" | "bar";
+export interface DataChartPoint {
+    label: string;
+    value: number;
+}
+export interface DataChartSeries {
+    name: string;
+    data: readonly DataChartPoint[];
+}
+export interface DataChartTooltipContext {
+    /** Category (x-axis) label under the pointer. */
+    label: string;
+    /** One entry per series that has a value at this category. */
+    points: ReadonlyArray<{
+        seriesName: string;
+        value: number;
+        swatchClassName: string;
+    }>;
+}
+/** What the `Tooltip` slot receives: the hovered (or keyboard-selected) category. */
+export interface DataChartTooltipProps extends DataChartTooltipContext {
+    valueFormatter: (value: number) => string;
+}
+/** What the `Legend` slot receives. */
+export interface DataChartLegendProps {
+    series: ReadonlyArray<{
+        name: string;
+        swatchClassName: string;
+    }>;
+}
+/** What the `Empty` slot receives (no plottable data). */
+export interface DataChartEmptyProps {
+    /** The chart's title, for screen readers. */
+    title: string;
+    /** The `emptyLabel` prop. */
+    label: React.ReactNode;
+}
+/** What the `Loading` slot receives (`loading` is true). */
+export interface DataChartLoadingProps {
+    title: string;
+    /** The viewBox size, for a placeholder of the chart's proportions. */
+    width: number;
+    height: number;
+}
+/** The parts of the chart a project can replace (`slots={{ Tooltip: MyTooltip }}`). */
+export interface DataChartSlots {
+    /** The tooltip's content (the positioned box around it stays the chart's). */
+    Tooltip: React.ComponentType<DataChartTooltipProps>;
+    /** The series legend, decorative (the hidden table carries the names). */
+    Legend: React.ComponentType<DataChartLegendProps>;
+    /** Shown instead of the chart when there is nothing to plot. */
+    Empty: React.ComponentType<DataChartEmptyProps>;
+    /** Shown instead of the chart while `loading`. */
+    Loading: React.ComponentType<DataChartLoadingProps>;
+}
+export interface DataChartProps {
+    kind: DataChartKind;
+    /** Single-series shorthand (ignored when `series` is given). */
+    data?: readonly DataChartPoint[];
+    /** Multi-series data. Series cycle through --karni-chart-1..5. */
+    series?: readonly DataChartSeries[];
+    /** Chart title: SVG <title>, aria-label and the hidden table's caption. */
+    title: string;
+    /** Longer description for the SVG <desc>. */
+    description?: string;
+    /**
+     * What screen readers hear after the title and description. Default: a
+     * generated summary (each series' lowest and highest value). "" omits it.
+     */
+    summary?: string;
+    /** Formats values in the tooltip, y-axis ticks and the hidden table. */
+    valueFormatter?: (value: number) => string;
+    /** Formats x-axis tick labels (default: the category label itself). */
+    xTickFormatter?: (label: string) => string;
+    /** Fully custom tooltip content. Prefer the `Tooltip` slot. */
+    renderTooltip?: (context: DataChartTooltipContext) => React.ReactNode;
+    /** viewBox width (default 640). The rendered size is responsive. */
+    width?: number;
+    /** viewBox height (default 240). */
+    height?: number;
+    /** Approximate number of y-axis ticks (default 4). */
+    yTickCount?: number;
+    /** Show the series legend (default: only for 2+ series). */
+    showLegend?: boolean;
+    /** Show the tooltip on hover and keyboard focus (default true). */
+    showTooltip?: boolean;
+    /** Column header of the hidden table's category column (default "Label"). */
+    categoryHeader?: string;
+    /** Text shown when there is no plottable data. */
+    emptyLabel?: string;
+    /** True while the data loads: a placeholder of the chart's size replaces it. */
+    loading?: boolean;
+    /** Replaces the Tooltip, Legend, Empty or Loading. See DataChartSlots. */
+    slots?: Partial<DataChartSlots>;
+    className?: string;
+}
+/** The default pieces of the chart, for wrapping one. */
+export declare const defaultDataChartSlots: DataChartSlots;
+/**
+ * Minimal line/bar chart driven by `{label, value}` points or named series.
+ *
+ * Keyboard and screen readers: the chart is an image named by `title`,
+ * described by `description` and a generated summary, with every value in a
+ * visually-hidden table. Tab focuses it. The arrow keys (Home, End) move the
+ * tooltip from category to category and announce each one. Escape hides it.
+ *
+ * Escape hatches: `slots` (replaces the Tooltip, Legend, Empty or Loading
+ * pieces), `valueFormatter`/`xTickFormatter`, `summary`, `renderTooltip`,
+ * `width`/`height`/`yTickCount`, legend and tooltip toggles, `className`
+ * (merged via cn()). Colors are only themeable through the
+ * --karni-chart-1..5 CSS variables.
+ */
+export declare function DataChart({ kind, data, series, title, description, summary, valueFormatter, xTickFormatter, renderTooltip, width, height, yTickCount, showLegend, showTooltip, categoryHeader, emptyLabel, loading, slots, className, }: DataChartProps): React.ReactElement;

package/dist/src/components/empty-state/empty-state.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+/** What each EmptyState slot receives: the matching prop. */
+export interface EmptyStateSlotProps {
+    children: React.ReactNode;
+}
+/** The parts of the placeholder a project can replace (`slots={{ Title: MyHeading }}`). */
+export interface EmptyStateSlots {
+    /** Wraps `icon`. It is decorative and hidden from assistive tech. */
+    Icon: React.ComponentType<EmptyStateSlotProps>;
+    /** The headline. The default is an <h3>. */
+    Title: React.ComponentType<EmptyStateSlotProps>;
+    /** The supporting copy. */
+    Description: React.ComponentType<EmptyStateSlotProps>;
+    /** Wraps `action`. */
+    Actions: React.ComponentType<EmptyStateSlotProps>;
+}
+export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Optional illustration/icon slot, rendered above the title. */
+    icon?: React.ReactNode;
+    /** Short headline ("No events yet"). */
+    title: React.ReactNode;
+    /** Optional supporting copy under the title. */
+    description?: React.ReactNode;
+    /** Slot for a call to action (e.g. a "Create" button). */
+    action?: React.ReactNode;
+    /** Replaces the Icon, Title, Description or Actions. See EmptyStateSlots. */
+    slots?: Partial<EmptyStateSlots>;
+    children?: React.ReactNode;
+}
+/** The default pieces of the placeholder, for wrapping one. */
+export declare const defaultEmptyStateSlots: EmptyStateSlots;
+/**
+ * Centered placeholder for empty collections: icon, title, description and
+ * an action slot. Used by ResourceTable's `empty` slot and reusable anywhere.
+ *
+ * Escape hatches: `slots` replaces the Icon, Title (an <h3> by default: swap
+ * it for the heading level your page needs), Description or Actions.
+ * `className` merges via cn(), and extra children render under the action.
+ */
+export declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/file-upload/FileUpload.d.ts

@@ -0,0 +1,108 @@
+import * as React from "react";
+/** Why a file was refused by <FileUpload> (surfaced through `onReject`). */
+export type FileUploadRejectReason = "accept" | "size";
+/** What the `Dropzone` slot receives: the props of the button it replaces, plus its state. */
+export interface FileUploadDropzoneProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Attach to the button: focus returns to it after a file is removed. */
+    buttonRef: React.Ref<HTMLButtonElement>;
+    /** A file is being dragged over the dropzone. */
+    dragging: boolean;
+    multiple: boolean;
+    /** The `uploading` prop. */
+    uploading: boolean;
+    /** The `children` prop (custom content), or undefined for the default text. */
+    children?: React.ReactNode;
+}
+/** What the `FileRow` slot receives: one current file. Render an <li>. */
+export interface FileUploadFileRowProps {
+    /** A pending `File`, or the URL string of a file already uploaded. */
+    file: File | string;
+    /** The file name (a URL's last path segment). */
+    name: string;
+    /** A pending file's size ("12 KB"), undefined for a URL. */
+    size?: string;
+    /** Removes the file. Undefined when it cannot be removed (clearable=false, disabled, uploading). */
+    onRemove?: () => void;
+}
+/** The parts of the picker a project can replace (`slots={{ FileRow: Thumbnail }}`). */
+export interface FileUploadSlots {
+    /** The drop target: a button that opens the file picker. */
+    Dropzone: React.ComponentType<FileUploadDropzoneProps>;
+    /** One row of the current-files list. */
+    FileRow: React.ComponentType<FileUploadFileRowProps>;
+}
+export interface FileUploadProps {
+    /**
+     * Current value. A `string` is an existing uploaded file (the display URL a
+     * karni backend returns), and a `File` is a pending upload. Arrays are for
+     * `multiple` mode and may mix both.
+     */
+    value?: File | string | ReadonlyArray<File | string> | null;
+    /**
+     * Emits the newly chosen `File` (or `File[]` when `multiple`), and `null`
+     * when the value is cleared. Existing URL strings are display-only: they
+     * can be removed (emitting `null` / the remaining files) but never re-emitted.
+     */
+    onChange?: (value: File | File[] | null) => void;
+    /** Same grammar as the native `accept` attribute (".png,image/*,application/pdf"). */
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    /** Maximum size per file, in bytes. Larger files are rejected via `onReject`. */
+    maxSize?: number;
+    /** Called once per refused file with the reason ("accept" | "size"). */
+    onReject?: (file: File, reason: FileUploadRejectReason) => void;
+    /**
+     * The sentence shown (and announced) for a refused file. Default: "notes.txt
+     * isn't an accepted file type." / "big.png is larger than 1.0 MB.". Return
+     * null to show nothing (when `onReject` reports it elsewhere).
+     */
+    rejectionMessage?: (file: File, reason: FileUploadRejectReason, limits: {
+        accept?: string;
+        maxSize?: number;
+    }) => React.ReactNode;
+    /** An error to show under the dropzone (announced). It marks the field invalid. */
+    error?: React.ReactNode;
+    /** True while the file uploads: the dropzone shows progress and takes no new files. */
+    uploading?: boolean;
+    id?: string;
+    /** Forwarded to the hidden native file input. */
+    name?: string;
+    className?: string;
+    /** Replaces the default dropzone content (escape hatch). */
+    children?: React.ReactNode;
+    /** Set false to hide the per-file remove affordance. Default true. */
+    clearable?: boolean;
+    /** Replaces the Dropzone or FileRow (see FileUploadSlots). */
+    slots?: Partial<FileUploadSlots>;
+    "aria-label"?: string;
+    /** Ids of elements that label the dropzone (or point a <label htmlFor> at `id`). */
+    "aria-labelledby"?: string;
+    /** Ids of elements that describe the dropzone (help text, a form's error message). */
+    "aria-describedby"?: string;
+    /** Marks the dropzone invalid (a destructive border). `error` sets it too. */
+    "aria-invalid"?: React.AriaAttributes["aria-invalid"];
+    /** Called when focus leaves the dropzone (react-hook-form's onBlur). */
+    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+}
+/** The default pieces of the picker, for wrapping one. */
+export declare const defaultFileUploadSlots: FileUploadSlots;
+/**
+ * Drag-and-drop or click-to-browse file picker that shows the current file and the pending ones.
+ *
+ * Contract "FileUpload".
+ *
+ * Shows an existing uploaded value (URL string) as a link, pending `File`
+ * values with name and size, and emits `File` objects. The hooks layer turns
+ * them into multipart bodies per amendment D2.
+ *
+ * Keyboard and screen readers: the dropzone is a button (Enter or Space opens
+ * the picker), labelled by its text, `aria-label`, `aria-labelledby` or a
+ * <label htmlFor={id}>. A refused file and the `error` prop are announced and
+ * linked through aria-describedby. `aria-invalid` (or `error`) marks it
+ * invalid. Removing a file returns focus to the dropzone.
+ *
+ * Escape hatches: `slots` replaces the Dropzone or FileRow, `children`
+ * replaces the dropzone's content, `rejectionMessage` rewords refusals.
+ */
+export declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLButtonElement>>;