@ai-matrx/design-system 0.60.1 → 0.60.6

package/dist/desktop.d.ts

@@ -0,0 +1,484 @@
+import { ClassValue } from 'clsx';
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+export { A as AppRail, a as AppRailAvatar, b as AppRailAvatarProps, c as AppRailGroup, d as AppRailItem, e as AppRailItemProps, f as AppRailSpacer, C as CanvasColumnDef, g as CanvasLayout, h as CanvasLayoutProps, i as CanvasPanelDef, j as Checkbox, k as CheckboxProps, l as Collapsible, m as CollapsibleContent, n as CollapsibleTrigger, o as ConfirmDialog, p as ConfirmDialogHost, q as ConfirmDialogProps, r as ContextMenu, s as ContextMenuContent, t as ContextMenuItem, u as ContextMenuSeparator, v as ContextMenuShortcut, w as ContextMenuTrigger, D as Dialog, x as DialogClose, y as DialogContent, z as DialogDescription, B as DialogFooter, E as DialogHeader, F as DialogTitle, G as DialogTrigger, H as DropdownMenu, I as DropdownMenuCheckboxItem, J as DropdownMenuContent, K as DropdownMenuGroup, L as DropdownMenuItem, M as DropdownMenuLabel, N as DropdownMenuRadioGroup, O as DropdownMenuRadioItem, P as DropdownMenuSeparator, Q as DropdownMenuShortcut, R as DropdownMenuSub, S as DropdownMenuSubContent, T as DropdownMenuSubTrigger, U as DropdownMenuTrigger, V as ModeSwitch, W as ModeSwitchOption, X as ModeSwitchProps, Y as OrganizationMark, Z as Popover, _ as PopoverAnchor, $ as PopoverContent, a0 as PopoverTrigger, a1 as Skeleton, a2 as StatusDot, a3 as StatusDotProps, a4 as StatusTone, a5 as Switch, a6 as SwitchProps, a7 as Tooltip, a8 as TooltipContent, a9 as TooltipContentProps, aa as TooltipProvider, ab as TooltipTrigger, ac as organizationColor } from './organization-picker-mLqIcesx.js';
+import '@radix-ui/react-switch';
+import '@radix-ui/react-checkbox';
+import '@radix-ui/react-tooltip';
+import '@radix-ui/react-dropdown-menu';
+import '@radix-ui/react-context-menu';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-popover';
+import '@radix-ui/react-collapsible';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+/** The macOS text styles. Nothing else sets a font size in desktop app code. */
+type TextVariant = "title-large" | "title-1" | "title-2" | "title-3" | "headline" | "body" | "callout" | "caption";
+/** Emphasis levels and status tones. Status tones are for status words only, never decoration. */
+type TextTone = "primary" | "secondary" | "tertiary" | "tint" | "danger" | "warning" | "success";
+declare const TEXT_TONE: Record<TextTone, string>;
+interface TextProps extends React.HTMLAttributes<HTMLElement> {
+    variant?: TextVariant | undefined;
+    tone?: TextTone | undefined;
+    /** Medium weight for emphasis inside body copy (titles carry their own weight). */
+    emphasized?: boolean | undefined;
+    mono?: boolean | undefined;
+    /** One line, ellipsis at the end. */
+    truncate?: boolean | undefined;
+    /** Numbers that line up in columns. */
+    tabular?: boolean | undefined;
+    /** Text the user may select and copy (desktop chrome is unselectable by default). */
+    selectable?: boolean | undefined;
+    as?: "span" | "p" | "div" | "h1" | "h2" | "h3" | "label" | "dt" | "dd";
+}
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+
+interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {
+    size?: "sm" | "md" | "lg" | "xl";
+    /** Accessible name; omit when a visible label already says what is loading. */
+    label?: string;
+}
+/** The macOS activity indicator: twelve fading spokes, stepped rotation. */
+declare function Spinner({ size, label, className, ...props }: SpinnerProps): React.JSX.Element;
+
+/**
+ * The macOS push button family.
+ * - `primary`: the default action (the one blue button in a sheet or form). One per view.
+ * - `secondary`: an ordinary push button (raised control surface, hairline edge).
+ * - `plain`: borderless toolbar/inline button; shows a fill on hover.
+ * - `destructive`: an action that removes or stops something.
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "plain" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** Leading icon (16 px; 14 px at `sm`). */
+    icon?: React.ReactNode;
+    /** Shows the activity indicator in place of the icon and disables the button. */
+    busy?: boolean;
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const iconButtonVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "aria-label">, VariantProps<typeof iconButtonVariants> {
+    icon: React.ReactNode;
+    /** Required: the accessible name and the tooltip. An icon without a name is a guess. */
+    label: string;
+    /** Keyboard shortcut shown in the tooltip, e.g. "⌘K". */
+    shortcut?: string;
+    /** Pressed/on state for toggles (sidebar visibility, filters). */
+    active?: boolean;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+/** The text field surface: inset well, hairline edge, tint halo on focus. */
+declare const FIELD = "focus-ring w-full min-w-0 rounded-control bg-control text-body text-label shadow-control placeholder:text-label-tertiary disabled:opacity-40 read-only:bg-fill";
+interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    size?: "sm" | "md";
+    invalid?: boolean;
+}
+declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
+interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    invalid?: boolean;
+}
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+interface SearchFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "onChange" | "type"> {
+    value: string;
+    onValueChange: (value: string) => void;
+    size?: "sm" | "md";
+}
+/** The rounded search field: magnifier, clear button when non-empty, Escape clears. */
+declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;
+
+interface SelectOption {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+interface SelectProps {
+    value: string | undefined;
+    onValueChange: (value: string) => void;
+    /** Options; `"-"` draws a separator. */
+    options: ReadonlyArray<SelectOption | "-">;
+    placeholder?: string;
+    size?: "sm" | "md";
+    disabled?: boolean;
+    /** Accessible name when no visible label is associated. */
+    "aria-label"?: string;
+    id?: string;
+    className?: string;
+    /** `data-*` hooks land on the trigger. */
+    [data: `data-${string}`]: string | undefined;
+}
+/** The macOS pop-up button: a raised control with the up/down chevron, menu of options. */
+declare function Select({ value, onValueChange, options, placeholder, size, disabled, id, className, "aria-label": ariaLabel, ...data }: SelectProps): React.JSX.Element;
+
+interface Segment<T extends string> {
+    value: T;
+    label: React.ReactNode;
+    /** Required when `label` is an icon. */
+    ariaLabel?: string;
+    disabled?: boolean;
+}
+interface SegmentedProps<T extends string> {
+    value: T;
+    onValueChange: (value: T) => void;
+    segments: ReadonlyArray<Segment<T>>;
+    size?: "sm" | "md";
+    "aria-label": string;
+    className?: string;
+    [data: `data-${string}`]: string | undefined;
+}
+/** The macOS segmented control: one choice of a few (≤ 5), arrow keys move between segments. */
+declare function Segmented<T extends string>({ value, onValueChange, segments, size, className, "aria-label": ariaLabel, ...data }: SegmentedProps<T>): React.JSX.Element;
+
+type PageWidth = "form" | "wide" | "full";
+interface PageProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** `wide` (default) for every screen that lists things — tables, devices, displays, windows;
+     *  `form` for settings and one thing's facts (the body narrows, the left edge and header stay);
+     *  `full` only for a canvas-like screen. */
+    width?: PageWidth;
+    /** The page header; drawn at the top of the scrolling column. */
+    header?: React.ReactNode;
+}
+/**
+ * One scrolling content page: fixed side gutters, a centred column of the chosen width, and the
+ * same vertical rhythm on every screen (24 px between sections).
+ */
+declare const Page: React.ForwardRefExoticComponent<PageProps & React.RefAttributes<HTMLDivElement>>;
+interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    title: React.ReactNode;
+    /** One short line under the title (a status or a count; never a paragraph). */
+    subtitle?: React.ReactNode;
+    /** Leading icon or symbol (32 px). */
+    icon?: React.ReactNode;
+    /** Trailing controls: buttons, a search field. */
+    actions?: React.ReactNode;
+}
+declare function PageHeader({ title, subtitle, icon, actions, className, ...props }: PageHeaderProps): React.JSX.Element;
+interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The toolbar drags the window (title bar / unified toolbar). Controls inside never drag. */
+    draggable?: boolean;
+}
+/** A unified-toolbar row: 52 px, controls 28 px, 8 px apart. */
+declare function Toolbar({ draggable, className, ...props }: ToolbarProps): React.JSX.Element;
+/** Pushes the following toolbar items to the trailing edge. */
+declare function ToolbarSpacer(): React.JSX.Element;
+/** A thin vertical rule between toolbar groups. */
+declare function ToolbarDivider(): React.JSX.Element;
+
+interface SectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    /** Section title above the group (headline). */
+    title?: React.ReactNode;
+    /** Controls on the title line (a button, a count). */
+    actions?: React.ReactNode;
+    /** Explanatory line below the group (caption, secondary). */
+    footer?: React.ReactNode;
+    /** `grouped` (default) draws the inset rounded box with hairlines between rows (System
+     *  Settings). `plain` draws the rows straight on the page. */
+    appearance?: "grouped" | "plain";
+}
+/**
+ * A titled group of rows. Children are `Row`s (or `SectionContent` for free content); the
+ * hairline between rows is drawn here, inset to where the text starts, so no screen draws its own.
+ */
+declare function Section({ title, actions, footer, appearance, className, children, ...props }: SectionProps): React.JSX.Element;
+/** Free content inside a Section's group (a chart, a code block), with the group's padding. */
+declare function SectionContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+interface RowProps extends Omit<React.HTMLAttributes<HTMLElement>, "title" | "onSelect"> {
+    /** Leading icon (16 px) or a small image. */
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    /** Second line under the title; makes the row tall. */
+    subtitle?: React.ReactNode;
+    /** Trailing value text (secondary), e.g. "16 GB". */
+    value?: React.ReactNode;
+    /** Trailing control (a Switch, a Button, a Tag). Clicks inside it never select the row. */
+    accessory?: React.ReactNode;
+    /** Shows the disclosure chevron: the row opens a deeper page. */
+    chevron?: boolean;
+    /** Makes the whole row a button. */
+    onSelect?: () => void;
+    selected?: boolean;
+    disabled?: boolean;
+    destructive?: boolean;
+    /** Monospace title (paths, commands, identifiers). */
+    mono?: boolean;
+}
+/**
+ * THE row. Leading icon · title / subtitle · value · accessory · chevron. 36 px single line,
+ * 48 px with a subtitle. Selectable rows are buttons with the tint focus ring.
+ */
+declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLElement>>;
+interface FieldRowProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "action"> {
+    /** Label before the field (omit when the Section title already says it). */
+    label?: React.ReactNode;
+    /** The input: TextField, SearchField or Select. */
+    field: React.ReactNode;
+    /** The action that uses it (a Button; `type="submit"` makes Enter run it). */
+    action?: React.ReactNode;
+    /** Runs on Enter / the submit button. */
+    onSubmit?: () => void;
+    /** A multi-line field (TextArea): the action sits under it, at the trailing edge. */
+    stacked?: boolean;
+}
+/**
+ * THE input-plus-action row (a command to start, a link to open, a path to transcribe): one row in
+ * a Section, the field filling the space, the action at the trailing edge. Enter submits.
+ */
+declare function FieldRow({ label, field, action, onSubmit, stacked, className, ...props }: FieldRowProps): React.JSX.Element;
+
+interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {
+    /** Cap the height and scroll inside (long output, clipboard text, logs). */
+    scroll?: boolean;
+    /** Keep the newest line in view as text arrives (live output), unless the person scrolled up. */
+    follow?: boolean;
+}
+/** Preformatted, selectable monospace text: command output, file contents, the clipboard. */
+declare function CodeBlock({ scroll, follow, className, children, ...props }: CodeBlockProps): React.JSX.Element;
+
+interface Column<T> {
+    key: string;
+    header: React.ReactNode;
+    /** Cell content. Strings truncate with an ellipsis. */
+    cell: (row: T) => React.ReactNode;
+    /** Column width: `auto` shares the remaining space (default); `fit` shrinks to its content;
+     *  the named widths are fixed. */
+    width?: "auto" | "fit" | "xs" | "sm" | "md" | "lg";
+    align?: "start" | "end" | "center";
+    /** Numbers: right-aligned, tabular figures. */
+    numeric?: boolean;
+    mono?: boolean;
+    /** Makes the header sortable (click, or Enter on it); returns the ascending order. */
+    sort?: (a: T, b: T) => number;
+}
+/** The ONE action a row may show inline: always a small secondary button, never destructive. */
+interface RowAction {
+    label: string;
+    onSelect: () => void;
+    disabled?: boolean;
+}
+/** Everything else a row can do, behind its More button. Destructive items are drawn in red and
+ *  ask for confirmation in their own words. */
+interface RowMenuItem {
+    label: string;
+    onSelect: () => void;
+    /** Drawn in red; with `confirm`, asks first ("Stop node (pid 96209)?"). */
+    destructive?: boolean;
+    /** The confirmation question for a destructive item. */
+    confirm?: string;
+    disabled?: boolean;
+}
+interface SortState {
+    key: string;
+    direction: "ascending" | "descending";
+}
+interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "aria-label"> {
+    columns: ReadonlyArray<Column<T>>;
+    rows: ReadonlyArray<T>;
+    rowKey: (row: T) => string;
+    /** Row activation (click / Enter). */
+    onRowSelect?: (row: T) => void;
+    selectedKey?: string | null;
+    /** Shown in place of the body when there are no rows (use `StateView`). */
+    empty?: React.ReactNode;
+    /** Accessible name. */
+    "aria-label": string;
+    /** Alternating row backgrounds (macOS table default). */
+    striped?: boolean;
+    /** An outline row: content shown under the row when it is expanded (disclosure triangle,
+     *  click or Right/Left arrow). Return null for a row with nothing to show. */
+    detail?: (row: T) => React.ReactNode | null;
+    /** Rows that cannot be selected or expanded (drawn dimmed). */
+    isDisabled?: (row: T) => boolean;
+    /** The row's one inline action (e.g. Open, Show, Capture). */
+    rowAction?: (row: T) => RowAction | null;
+    /** The row's other actions (Edit, Remove, Stop), behind a More button. */
+    rowMenu?: (row: T) => ReadonlyArray<RowMenuItem> | null;
+    /** Initial sort (a sortable column's key). The person can change it by clicking headers. */
+    defaultSort?: SortState;
+    /** `data-*` attributes for a row (test hooks, state markers). */
+    rowData?: (row: T) => Record<`data-${string}`, string | undefined>;
+    className?: string;
+}
+/**
+ * The macOS table: 24 px rows, caption-weight headers, hairline under the header, optional
+ * alternating rows, tint selection. Arrow keys move between rows when rows are selectable.
+ */
+declare function DataTable<T>({ columns, rows, rowKey, onRowSelect, selectedKey, empty, striped, detail, isDisabled, rowAction, rowMenu, defaultSort, rowData, className, "aria-label": ariaLabel, ...rest }: DataTableProps<T>): React.JSX.Element;
+
+/**
+ * The source list (Finder / Mail / Notes sidebar). Sections of 28 px rows; the open row carries a
+ * neutral selection fill that dims when the window is inactive (`[data-window-active=false]` on any
+ * ancestor). Up/Down arrow keys move between rows; Home/End jump to the ends.
+ */
+declare function SourceList({ className, onKeyDown, ...props }: React.HTMLAttributes<HTMLElement>): React.JSX.Element;
+interface SourceListSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: React.ReactNode;
+    /** A trailing control on the title line (an IconButton "+"). */
+    action?: React.ReactNode;
+}
+declare function SourceListSection({ title, action, className, children, ...props }: SourceListSectionProps): React.JSX.Element;
+interface SourceListItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Leading icon (16 px, secondary) or a StatusLight. */
+    icon?: React.ReactNode;
+    label: React.ReactNode;
+    /** Second line (caption): makes the row two lines tall. */
+    hint?: React.ReactNode;
+    /** Trailing count or Tag. */
+    badge?: React.ReactNode;
+    /** This row is the open page. */
+    current?: boolean;
+}
+declare const SourceListItem: React.ForwardRefExoticComponent<SourceListItemProps & React.RefAttributes<HTMLButtonElement>>;
+/** "Show more / Show less" under a long section. */
+interface SourceListMoreProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
+    expanded: boolean;
+    onToggle: () => void;
+}
+declare function SourceListMore({ expanded, onToggle, className, ...props }: SourceListMoreProps): React.JSX.Element;
+
+/** Any read in flight: the shape `useDesktopRequest` returns (and any query hook can match). */
+interface ResourceState<T> {
+    data: T | undefined;
+    error: {
+        message: string;
+    } | undefined | null;
+    loading: boolean;
+    refetch?: () => unknown;
+}
+interface ResourceProps<T> {
+    state: ResourceState<T>;
+    /** What is being read, as the loading line ("Reading processes"). */
+    loading: string;
+    /** What failed, as the error title ("Processes can't be read"). */
+    failed: string;
+    /** Treat the data as empty (render `empty`). Default: an empty array. */
+    isEmpty?: (data: T) => boolean;
+    /** The empty state (a StateView kind="empty"). */
+    empty?: React.ReactNode;
+    /** `page` fills the content area; `inline` sits in a section (default). */
+    size?: "page" | "inline";
+    children: (data: T) => React.ReactNode;
+}
+/**
+ * THE way a screen shows data it reads: loading → error (with Try again) → empty → the content.
+ * Once data has arrived, a background refresh never blanks it; a refresh error keeps the last data.
+ */
+declare function Resource<T>({ state, loading, failed, isEmpty, empty, size, children }: ResourceProps<T>): React.JSX.Element;
+
+interface ComingSoonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** The feature's icon (the same one its menu entry shows). */
+    icon: React.ReactNode;
+    /** The feature's name, exactly as its menu entry says it. */
+    title: string;
+    /** One line: what it will do for the person. */
+    summary: string;
+    /** Up to four short lines: what it will include. */
+    includes?: ReadonlyArray<string>;
+}
+/**
+ * THE page for anything not built yet. Every menu entry, button and route either opens its real
+ * screen or this — never a control that does nothing. Same place, same look, every time.
+ */
+declare function ComingSoon({ icon, title, summary, includes, className, ...props }: ComingSoonProps): React.JSX.Element;
+
+interface StateViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** `empty`: nothing here yet. `loading`: work in flight. `error`: it failed (say why). */
+    kind: "empty" | "loading" | "error";
+    /** Large glyph (empty/error). Loading always shows the activity indicator. */
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    /** One line: the reason, or what to do. */
+    message?: React.ReactNode;
+    /** One or two Buttons (Retry, Create). */
+    actions?: React.ReactNode;
+    /** `page` centres in the whole content area; `inline` sits inside a section or table. */
+    size?: "page" | "inline";
+}
+/** THE empty / loading / error state. Every screen says these three things the same way. */
+declare function StateView({ kind, icon, title, message, actions, size, className, ...props }: StateViewProps): React.JSX.Element;
+type BannerTone = "neutral" | "info" | "warning" | "danger" | "success";
+interface BannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    tone: BannerTone;
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    message?: React.ReactNode;
+    /** Trailing Buttons (size sm). */
+    actions?: React.ReactNode;
+}
+/** An inline notice above content: something failed, needs attention, or just happened. */
+declare function Banner({ tone, icon, title, message, actions, className, ...props }: BannerProps): React.JSX.Element;
+interface ErrorBannerProps extends Omit<BannerProps, "tone" | "title" | "message" | "actions"> {
+    /** The failed action's error (e.g. `useDesktopAction().error`); nothing renders without one. */
+    error: {
+        message: string;
+    } | null | undefined;
+    onDismiss: () => void;
+    /** Headline; default "That didn't work". */
+    title?: React.ReactNode;
+}
+/** THE banner for a failed action: the error's own words and a Dismiss button. */
+declare function ErrorBanner({ error, onDismiss, title, ...props }: ErrorBannerProps): React.JSX.Element | null;
+
+interface MeterProps {
+    [data: `data-${string}`]: string | undefined;
+    /** 0 … max. `null` draws the indeterminate bar. */
+    value: number | null;
+    max?: number;
+    /** `level` colours by fullness (green → orange ≥ 70 % → red ≥ 90 %), for capacity (disk, memory).
+     *  `progress` is always the tint, for work under way. */
+    kind?: "level" | "progress";
+    size?: "sm" | "md";
+    "aria-label": string;
+    className?: string;
+}
+declare const METER_THRESHOLDS: {
+    readonly warning: 0.7;
+    readonly critical: 0.9;
+};
+declare function meterTone(fraction: number): "normal" | "warning" | "critical";
+/** The level indicator / progress bar. One threshold rule for every capacity in the app. */
+declare function Meter({ value, max, kind, size, className, "aria-label": ariaLabel, ...data }: MeterProps): React.JSX.Element;
+
+type TagTone = "neutral" | "tint" | "success" | "warning" | "danger";
+interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    tone?: TagTone;
+}
+/** A small capsule label: a state ("Running"), a kind ("Beta"), a count. Caption size, 18 px. */
+declare function Tag({ tone, className, ...props }: TagProps): React.JSX.Element;
+type StatusTone = "neutral" | "success" | "warning" | "danger" | "tint";
+/** The status light (8 px): running, stopped, needs attention. Always paired with words or a label. */
+interface StatusLightProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    tone: StatusTone;
+    /** What the light means ("Running"); read by assistive tech unless `aria-hidden`. */
+    label: string;
+}
+declare function StatusLight({ tone, label, className, ...props }: StatusLightProps): React.JSX.Element;
+/** A keyboard shortcut, e.g. `<Kbd>⌘K</Kbd>`. */
+declare function Kbd({ className, ...props }: React.HTMLAttributes<HTMLElement>): React.JSX.Element;
+
+/**
+ * Display formatting for desktop screens: ONE way to show a size, a duration, a time and an error.
+ * macOS shows file and memory sizes in decimal units (1 GB = 1,000,000,000 bytes), so do we.
+ */
+declare function formatBytes(bytes: number | null | undefined): string;
+/** "3 sec", "4 min", "2 hr 5 min", "3 days 4 hr" — the two largest units. */
+declare function formatDuration(ms: number | null | undefined): string;
+/** "just now", "5 minutes ago", "yesterday", then a date (Finder's Date Modified style). */
+declare function formatRelativeTime(at: Date | number | string | null | undefined, now?: number): string;
+/** The human sentence for any thrown value. */
+declare function errorMessage(error: unknown): string;
+/** The compact age for dense table cells: "now", "5m", "10h", "3d", then "Oct 3" (Mail's list). */
+declare function formatAge(at: Date | number | string | null | undefined, now?: number): string;
+/** A time of day, the way the menu bar shows it: "2:44 PM" (24-hour where the person's locale is). */
+declare function formatClockTime(at: Date | number | string | null | undefined): string;
+/** How much of a capacity is used, in the same words everywhere: "183 GB of 275 GB in use". */
+declare function formatUsage(used: number | null | undefined, total: number | null | undefined): string;
+
+export { Banner, type BannerProps, type BannerTone, Button, type ButtonProps, CodeBlock, type CodeBlockProps, type Column, ComingSoon, type ComingSoonProps, DataTable, type DataTableProps, ErrorBanner, type ErrorBannerProps, FIELD, FieldRow, type FieldRowProps, IconButton, type IconButtonProps, Kbd, METER_THRESHOLDS, Meter, type MeterProps, Page, PageHeader, type PageHeaderProps, type PageProps, type PageWidth, Resource, type ResourceProps, type ResourceState, Row, type RowAction, type RowMenuItem, type RowProps, SearchField, type SearchFieldProps, Section, SectionContent, type SectionProps, type Segment, Segmented, type SegmentedProps, Select, type SelectOption, type SelectProps, type SortState, SourceList, SourceListItem, type SourceListItemProps, SourceListMore, type SourceListMoreProps, SourceListSection, type SourceListSectionProps, Spinner, type SpinnerProps, StateView, type StateViewProps, StatusLight, type StatusLightProps, type StatusTone as StatusLightTone, TEXT_TONE, Tag, type TagProps, type TagTone, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, type TextTone, type TextVariant, Toolbar, ToolbarDivider, type ToolbarProps, ToolbarSpacer, buttonVariants, cn, errorMessage, formatAge, formatBytes, formatClockTime, formatDuration, formatRelativeTime, formatUsage, meterTone };