foss-design 0.2.0 → 0.3.0

package/dist/viewer-lib/types/viewer/src/lib/viewer.d.ts

@@ -0,0 +1,44 @@
+import { type ReactNode } from 'react';
+import type { ViewerSource } from './source';
+/** Places where an app that embeds the viewer adds its own controls. */
+export interface ViewerSlots {
+    /** At the start of every top bar. */
+    barStart?: ReactNode;
+    /** At the end of every top bar. */
+    barEnd?: ReactNode;
+    /** Full width under every top bar, above the page: a notice strip. */
+    belowBar?: ReactNode;
+    /** Next to the project title on the home page. */
+    homeActions?: ReactNode;
+    /** At the end of each canvas row on the home page. */
+    canvasRowActions?: (canvasId: string) => ReactNode;
+    /** Below the panels of the home page. */
+    homeAfter?: ReactNode;
+}
+/** Single-canvas mode: only this canvas is reachable, without the design system or other canvases. */
+export interface ViewerScope {
+    canvas: string;
+}
+/** Query keys of one source, so viewers of different projects can share a QueryClient. */
+export declare function viewerKeys(id: string): {
+    all: readonly ['design', string];
+    project: readonly ['design', string, 'project'];
+    canvas: (canvas: string) => readonly ['design', string, 'canvas', string];
+    system: readonly ['design', string, 'system'];
+    sources: readonly ['design', string, 'source'];
+    source: (unit: string, path: string) => readonly ['design', string, 'source', string, string];
+};
+export type ViewerKeys = ReturnType<typeof viewerKeys>;
+export interface Viewer {
+    source: ViewerSource;
+    keys: ViewerKeys;
+    frameSandbox?: string;
+    slots: ViewerSlots;
+    scope: ViewerScope | null;
+}
+/** A stable id per source object. */
+export declare function sourceId(source: ViewerSource): string;
+export declare const ViewerContext: import("react").Context<Viewer | null>;
+export declare function useViewer(): Viewer;
+/** Whether a route parameter names the canvas `id`, encoded or not. */
+export declare function sameId(param: string, id: string): boolean;

package/dist/viewer-lib/types/viewer/src/library.d.ts

@@ -0,0 +1,25 @@
+export type { AssetDoc, CanvasDoc, CanvasItem, CanvasPage, CanvasSection, CanvasSummary, ComponentDoc, FrameSize, GuidelineDoc, ImageItem, Issue, NoteItem, ProjectInfo, ScreenItem, SystemDoc, SystemSummary, Theme, Token, TokenKind, TokenValue, UrlItem, } from '../../src/shared/types';
+export { DesignViewer, type DesignViewerProps } from './app';
+export { SlidePanel } from './components/slide-panel';
+export { ThemeMenu } from './components/theme-menu';
+export { Bar } from './components/topbar';
+export { Mark, Wordmark } from './components/wordmark';
+export { cn } from './lib/cn';
+export { copyText } from './lib/copy';
+export { ApiError, localSource, resolveUrl, staticSource, type ViewerSource } from './lib/source';
+export { setThemePref, type ThemePref, useTheme, useThemePref } from './lib/theme';
+export type { ViewerScope, ViewerSlots } from './lib/viewer';
+export { Avatar, initials } from './ui/avatar';
+export { Badge, Count, type Tone } from './ui/badge';
+export { Button, ButtonAnchor, type ButtonKind, ButtonLink, type ButtonProps, buttonClass, IconButton, type IconButtonProps, iconButtonClass, } from './ui/button';
+export { Segmented, Switch } from './ui/choice';
+export { Dialog } from './ui/dialog';
+export { Icon, type IconName } from './ui/icon';
+export { floatingSurface, Menu, MenuItem, MenuLabel, MenuSeparator, menuItemClass, menuSurface } from './ui/menu';
+export { Meter } from './ui/meter';
+export { Content, type NavItem, NavLabel, Notice, NoticeCard, PageHead, SubNav } from './ui/page';
+export { GroupRow, KV, Panel, PanelBody, PanelFoot, PanelHead, PanelTabs, Row, RowLink, type RowProps, Strip, THead, } from './ui/panel';
+export { Kbd, Mono, Muted, Two } from './ui/text';
+export { TextArea, type TextAreaProps, TextField, type TextFieldProps } from './ui/text-field';
+export { Toaster, type ToastTone, toast } from './ui/toast';
+export { Tooltip, TooltipProvider } from './ui/tooltip';

package/dist/viewer-lib/types/viewer/src/pages/canvas/camera.d.ts

@@ -0,0 +1,43 @@
+/** Screen = world × z + (x, y). */
+export interface Camera {
+    x: number;
+    y: number;
+    z: number;
+}
+export interface Rect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** The farthest out the camera goes; past it a page is specks, and every one of them still costs. */
+export declare const MIN_ZOOM = 0.1;
+export declare const MAX_ZOOM = 8;
+type Listener = (camera: Camera) => void;
+/** The canvas camera. Lives outside React so panning never re-renders the tree. */
+export declare class CameraStore {
+    camera: Camera;
+    /** How far out the camera may go; the viewport sets it from the size of the page. */
+    minZoom: number;
+    private listeners;
+    private animation;
+    subscribe(listener: Listener): () => void;
+    set(next: Camera): void;
+    /** Stop any animation: the user took over. */
+    interrupt(): void;
+    panBy(dx: number, dy: number): void;
+    /** Zoom by `factor` keeping the screen point (sx, sy) in place. */
+    zoomAt(sx: number, sy: number, factor: number): void;
+    animateTo(target: Camera, duration?: number): void;
+    toWorld(sx: number, sy: number): {
+        x: number;
+        y: number;
+    };
+}
+/**
+ * The camera that shows `rect` inside a viewport of `w`×`h` with `pad` screen pixels around it.
+ * When `rect` does not fit even at `minZoom`, it lines up with the top (and the left, if it is too wide).
+ */
+export declare function fitRect(rect: Rect, w: number, h: number, pad?: number, maxZoom?: number, minZoom?: number): Camera;
+export declare function intersects(a: Rect, b: Rect): boolean;
+export {};

package/dist/viewer-lib/types/viewer/src/pages/canvas/canvas-bar.d.ts

@@ -0,0 +1,29 @@
+import type { CanvasDoc, CanvasItem, CanvasPage as Page, Theme } from '../../../../src/shared/types';
+import type { ViewStore } from './view-state';
+/** The canvas page's top bar: the canvas and its pages, screen theme, inspect and play. */
+export declare function CanvasBar({ canvas, page, theme, onTheme, sidebar, onSidebar, onPlay, canPlay, inspect, onInspect, }: {
+    canvas: CanvasDoc;
+    page: Page | undefined;
+    theme: Theme;
+    onTheme(theme: Theme): void;
+    sidebar: boolean;
+    onSidebar(value: boolean): void;
+    onPlay(): void;
+    canPlay: boolean;
+    inspect: boolean;
+    onInspect(value: boolean): void;
+}): import("react").JSX.Element;
+/** The selected item's name and actions, floating over the bottom of the canvas. */
+export declare function SelectionBar({ canvas, store, layoutItems, theme, onPlay, inspect, }: {
+    canvas: CanvasDoc;
+    store: ViewStore;
+    layoutItems: CanvasItem[];
+    theme: Theme;
+    onPlay(id: string): void;
+    inspect: boolean;
+}): import("react").JSX.Element | null;
+/** The inspect mode switch: a button that stays pressed while on. */
+export declare function InspectToggle({ on, onChange }: {
+    on: boolean;
+    onChange(value: boolean): void;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/pages/canvas/canvas-page.d.ts

@@ -0,0 +1,4 @@
+export declare function CanvasPage({ canvasId, pageId }: {
+    canvasId: string;
+    pageId?: string;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/pages/canvas/items.d.ts

@@ -0,0 +1,47 @@
+import type { CanvasSection, ImageItem, NoteItem, ScreenItem, Theme, UrlItem } from '../../../../src/shared/types';
+import type { Placed } from './layout';
+import { type ViewStore } from './view-state';
+import type { FrameMode } from './viewport';
+export interface FrameEvents {
+    onGo(from: string, target: string): void;
+    onWheel(frame: HTMLIFrameElement, message: {
+        deltaX: number;
+        deltaY: number;
+        x: number;
+        y: number;
+        zoom: boolean;
+    }): void;
+    onEscape(): void;
+}
+/** A screen or an external page on the canvas: live frame, snapshot or placeholder. */
+export declare const FrameItem: import("react").MemoExoticComponent<({ placed, mode, thumb, theme, store, events, capture, }: {
+    placed: Placed & {
+        item: ScreenItem | UrlItem;
+    };
+    mode: FrameMode;
+    /** Small on screen: show the small snapshot. */
+    thumb: boolean;
+    theme: Theme;
+    store: ViewStore;
+    events: FrameEvents;
+    capture: boolean;
+}) => import("react").JSX.Element>;
+export declare const NoteView: import("react").MemoExoticComponent<({ placed, store, }: {
+    placed: Placed & {
+        item: NoteItem;
+    };
+    store: ViewStore;
+}) => import("react").JSX.Element>;
+export declare const ImageView: import("react").MemoExoticComponent<({ placed, store, }: {
+    placed: Placed & {
+        item: ImageItem;
+    };
+    store: ViewStore;
+}) => import("react").JSX.Element>;
+export declare const SectionHeader: import("react").MemoExoticComponent<({ section, x, y, w, store, }: {
+    section: CanvasSection;
+    x: number;
+    y: number;
+    w: number;
+    store: ViewStore;
+}) => import("react").JSX.Element | null>;

package/dist/viewer-lib/types/viewer/src/pages/canvas/layout.d.ts

@@ -0,0 +1,30 @@
+import type { CanvasItem, CanvasPage, CanvasSection } from '../../../../src/shared/types';
+import type { Rect } from './camera';
+export interface Placed extends Rect {
+    item: CanvasItem;
+    section: CanvasSection;
+}
+export interface PlacedSection extends Rect {
+    section: CanvasSection;
+    /** Height of the title/description block above the row. */
+    header: number;
+}
+export interface Layout {
+    items: Placed[];
+    sections: PlacedSection[];
+    bounds: Rect;
+}
+/** Measured sizes: auto-height frames, notes, section headers, images. Keyed by item id or `section:<id>`. */
+export type Sizes = Record<string, {
+    w?: number;
+    h: number;
+}>;
+export declare const isFrame: (item: CanvasItem) => item is import("../../../../src/shared/types").ScreenItem | import("../../../../src/shared/types").UrlItem;
+export declare function itemSize(item: CanvasItem, sizes: Sizes): {
+    w: number;
+    h: number;
+};
+/** Sections stack top to bottom; items run left to right, wrapping after `columns`. */
+export declare function layoutPage(page: CanvasPage, sizes: Sizes): Layout;
+/** Frames in reading order, for arrow-key stepping and play mode. */
+export declare function frameOrder(layout: Layout): Placed[];

package/dist/viewer-lib/types/viewer/src/pages/canvas/overlay.d.ts

@@ -0,0 +1,19 @@
+import { type Layout } from './layout';
+import type { ViewStore } from './view-state';
+/**
+ * Labels and outlines drawn in screen space so they stay crisp at every zoom.
+ * Only frames near the screen get a label: every label restyles as the camera moves.
+ */
+export declare function Overlay({ layout, view, store, overlayRef, }: {
+    layout: Layout;
+    /** The camera and viewport size, updated a few times a second while it moves. */
+    view: {
+        x: number;
+        y: number;
+        z: number;
+        w: number;
+        h: number;
+    } | null;
+    store: ViewStore;
+    overlayRef: React.RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/pages/canvas/play-page.d.ts

@@ -0,0 +1,4 @@
+export declare function PlayPage({ canvasId, itemId }: {
+    canvasId: string;
+    itemId: string;
+}): import("react").JSX.Element | null;

package/dist/viewer-lib/types/viewer/src/pages/canvas/sidebar.d.ts

@@ -0,0 +1,10 @@
+import type { CanvasDoc, CanvasPage } from '../../../../src/shared/types';
+import type { ViewStore } from './view-state';
+export declare function pageHref(canvas: CanvasDoc, page: CanvasPage): string;
+/** Pages of the canvas and the items on the current one. */
+export declare function Sidebar({ canvas, page, store, onPick, }: {
+    canvas: CanvasDoc;
+    page: CanvasPage;
+    store: ViewStore;
+    onPick(id: string): void;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/pages/canvas/view-state.d.ts

@@ -0,0 +1,30 @@
+import { Store } from '../../lib/store';
+import type { Sizes } from './layout';
+export interface FrameStatus {
+    ready: boolean;
+    errors: string[];
+}
+export interface ViewState {
+    selected: string | null;
+    /** The frame that receives the pointer; the others sit behind a shield. */
+    active: string | null;
+    hovered: string | null;
+    sizes: Sizes;
+    frames: Record<string, FrameStatus>;
+    /** Frames kept alive, most recently wanted first. */
+    live: string[];
+    panning: boolean;
+    zoomTiny: boolean;
+    /** Mounted iframes by item id, for the inspector. */
+    frameEls: Record<string, HTMLIFrameElement | null>;
+    /** Inspect mode: screens take the pointer so the inspector can see it. */
+    inspecting: boolean;
+}
+export declare function createViewState(): Store<ViewState>;
+export type ViewStore = ReturnType<typeof createViewState>;
+export declare function setSize(store: ViewStore, key: string, size: {
+    w?: number;
+    h: number;
+}): void;
+export declare function setFrame(store: ViewStore, id: string, patch: Partial<FrameStatus>): void;
+export declare function setFrameEl(store: ViewStore, id: string, el: HTMLIFrameElement | null): void;

package/dist/viewer-lib/types/viewer/src/pages/canvas/viewport.d.ts

@@ -0,0 +1,37 @@
+import type { Theme } from '../../../../src/shared/types';
+import { type RefObject } from 'react';
+import { type CameraStore } from './camera';
+import { type FrameEvents } from './items';
+import { type Layout } from './layout';
+import type { ViewStore } from './view-state';
+/** How a frame runs: live, mounted but asleep behind its snapshot, or not mounted. */
+export type FrameMode = 'live' | 'asleep' | 'off';
+export interface ViewportApi {
+    /** The first view of a page: all of it, or its top when it is too big to see at once. */
+    openView(): void;
+    fitAll(animate?: boolean): void;
+    fitItem(id: string, animate?: boolean): void;
+    zoomBy(factor: number): void;
+    zoomTo(z: number): void;
+    size(): {
+        w: number;
+        h: number;
+    };
+}
+interface ViewportProps {
+    layout: Layout;
+    theme: Theme;
+    store: ViewStore;
+    camera: CameraStore;
+    events: FrameEvents;
+    capture: boolean;
+    apiRef: RefObject<ViewportApi | null>;
+    onPlay(id: string): void;
+    onSelect(id: string | null, point?: {
+        x: number;
+        y: number;
+    }): void;
+}
+export declare function Viewport({ layout, theme, store, camera, events, capture, apiRef, onPlay, onSelect }: ViewportProps): import("react").JSX.Element;
+export declare function isTyping(target: EventTarget | null): boolean;
+export {};

package/dist/viewer-lib/types/viewer/src/pages/home.d.ts

@@ -0,0 +1 @@
+export declare function HomePage(): import("react").JSX.Element | null;

package/dist/viewer-lib/types/viewer/src/pages/not-found.d.ts

@@ -0,0 +1,4 @@
+export declare function NotFound({ title, text }: {
+    title?: string;
+    text?: string;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/pages/system/assets.d.ts

@@ -0,0 +1,4 @@
+import type { SystemDoc } from '../../../../src/shared/types';
+export declare function AssetsPage({ system }: {
+    system: SystemDoc;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/pages/system/colors.d.ts

@@ -0,0 +1,4 @@
+import type { SystemDoc } from '../../../../src/shared/types';
+export declare function ColorsPage({ system }: {
+    system: SystemDoc;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/pages/system/component-page.d.ts

@@ -0,0 +1,5 @@
+import type { SystemDoc } from '../../../../src/shared/types';
+export declare function ComponentPage({ system, id }: {
+    system: SystemDoc;
+    id: string;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/pages/system/guideline.d.ts

@@ -0,0 +1,5 @@
+import type { SystemDoc } from '../../../../src/shared/types';
+export declare function GuidelinePage({ system, slug }: {
+    system: SystemDoc;
+    slug: string;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/pages/system/motion.d.ts

@@ -0,0 +1,7 @@
+import type { SystemDoc } from '../../../../src/shared/types';
+type Bezier = [number, number, number, number];
+export declare function parseBezier(value: string): Bezier | null;
+export declare function MotionPage({ system }: {
+    system: SystemDoc;
+}): import("react").JSX.Element;
+export {};

package/dist/viewer-lib/types/viewer/src/pages/system/nav.d.ts

@@ -0,0 +1,5 @@
+import type { SystemDoc } from '../../../../src/shared/types';
+/** Grouped links of the system section; a wrapping row above the content on narrow screens. */
+export declare function SystemNav({ system }: {
+    system: SystemDoc;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/pages/system/other-tokens.d.ts

@@ -0,0 +1,4 @@
+import type { SystemDoc } from '../../../../src/shared/types';
+export declare function OtherTokensPage({ system }: {
+    system: SystemDoc;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/pages/system/overview.d.ts

@@ -0,0 +1,4 @@
+import type { SystemDoc } from '../../../../src/shared/types';
+export declare function OverviewPage({ system }: {
+    system: SystemDoc;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/pages/system/shape.d.ts

@@ -0,0 +1,4 @@
+import type { SystemDoc } from '../../../../src/shared/types';
+export declare function ShapePage({ system }: {
+    system: SystemDoc;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/pages/system/shared.d.ts

@@ -0,0 +1,34 @@
+import type { Theme, Token, TokenKind } from '../../../../src/shared/types';
+import { type ReactNode } from 'react';
+/** Tailwind classes a token feeds, such as `bg-ink` for `--color-ink`. */
+export declare function utilityHints(token: Token): string[];
+export declare function byKind(tokens: Token[], ...kinds: TokenKind[]): Token[];
+/** Tokens in the order their groups first appear. */
+export declare function groupTokens(tokens: Token[]): {
+    group: string;
+    tokens: Token[];
+}[];
+/** A CSS length in pixels, with rem and em at 16px; null when it is not a plain length. */
+export declare function toPx(value: string): number | null;
+/** The value a token has in `theme`, falling back to light. */
+export declare function valueIn(token: Token, theme: Theme): string | undefined;
+/** A section's theme: follows the app until the reader picks one. */
+export declare function useLocalTheme(): [Theme, (theme: Theme) => void];
+export declare function ThemeSwitch({ value, onChange }: {
+    value: Theme;
+    onChange: (theme: Theme) => void;
+}): import("react").JSX.Element;
+export declare function Hints({ items }: {
+    items: string[];
+}): import("react").JSX.Element | null;
+/** What to add, and where, when a page has nothing to show. */
+export declare function EmptyPanel({ title, children }: {
+    title: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare const TOKENS_FILE = ".design/system/tokens.css";
+/** A token value in mono that wraps between words, never inside a number. */
+export declare function Value({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/pages/system/system-routes.d.ts

@@ -0,0 +1,2 @@
+/** `/system/*`: foundations, guidelines and components of `.design/system`. */
+export declare function SystemRoutes(): import("react").JSX.Element | null;

package/dist/viewer-lib/types/viewer/src/pages/system/typography.d.ts

@@ -0,0 +1,4 @@
+import type { SystemDoc } from '../../../../src/shared/types';
+export declare function TypographyPage({ system }: {
+    system: SystemDoc;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/ui/avatar.d.ts

@@ -0,0 +1,14 @@
+/** Up to two letters: the first of the first and last words. */
+export declare function initials(name: string): string;
+/**
+ * A person's picture, or their initials when there is none or it fails to
+ * load. The picture is fetched without a referrer: it usually sits on a
+ * third-party host.
+ */
+export declare function Avatar({ src, name, size, shape, className, }: {
+    src?: string | null;
+    name: string;
+    size?: number;
+    shape?: 'circle' | 'square';
+    className?: string;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/ui/badge.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type Tone = 'neutral' | 'action' | 'ok' | 'danger';
+export declare function Badge({ tone, children, className, }: {
+    tone?: Tone;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function Count({ value, tone }: {
+    value: number;
+    tone?: 'neutral' | 'action' | 'danger';
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/ui/button.d.ts

@@ -0,0 +1,37 @@
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { type IconName } from './icon';
+export type ButtonKind = 'primary' | 'secondary' | 'ghost' | 'dashed' | 'danger';
+export declare const buttonClass: (kind?: ButtonKind, extra?: string) => string;
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    kind?: ButtonKind;
+    icon?: IconName;
+    loading?: boolean;
+    children?: ReactNode;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const ICON_KIND: {
+    ghost: string;
+    secondary: string;
+};
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    icon: IconName;
+    label: string;
+    kind?: keyof typeof ICON_KIND;
+    size?: number;
+}
+export declare const iconButtonClass: (kind?: keyof typeof ICON_KIND, extra?: string) => string;
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** An in-app link styled as a button. */
+export declare function ButtonLink({ to, kind, icon, className, children, }: {
+    to: string;
+    kind?: ButtonKind;
+    icon?: IconName;
+    className?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** A link out of the app (a frame in a new tab), styled as a button. */
+export declare function ButtonAnchor({ kind, icon, className, children, ...rest }: {
+    kind?: ButtonKind;
+    icon?: IconName;
+} & AnchorHTMLAttributes<HTMLAnchorElement>): import("react").JSX.Element;
+export {};

package/dist/viewer-lib/types/viewer/src/ui/choice.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+export declare function Switch({ checked, onChange, label, disabled, }: {
+    checked: boolean;
+    onChange?: (value: boolean) => void;
+    label: string;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+export declare function Segmented<T extends string>({ items, value, onChange, label, stretch, size, }: {
+    items: {
+        value: T;
+        label: ReactNode;
+        title?: string;
+    }[];
+    value: T;
+    onChange: (value: T) => void;
+    label: string;
+    stretch?: boolean;
+    size?: 'ctrl' | 'sm';
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/ui/dialog.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+/**
+ * A modal over a dimmed page: focus stays inside until it closes, Escape and a
+ * click outside close it. Head and foot are a panel's; `actions` go to the foot.
+ */
+export declare function Dialog({ open, onOpenChange, title, description, children, actions, footNote, width, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: ReactNode;
+    /** Under the title, and what screen readers announce with it. */
+    description?: ReactNode;
+    children?: ReactNode;
+    /** Buttons at the end of the foot. */
+    actions?: ReactNode;
+    /** Muted text at the start of the foot. */
+    footNote?: ReactNode;
+    width?: number;
+}): import("react").JSX.Element;