@mirror-physics/fractal-ui 0.2.0-next.9 → 0.2.0-next.90

package/dist/index.d.ts

@@ -1,19 +1,27 @@
 import * as React from 'react';
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties, ReactElement } from 'react';
 import { ClassValue } from 'clsx';
+export { ColumnEditor, ColumnEditorItem, ColumnEditorProps } from './column-editor.js';
+
+/** Shared density scale for single-line controls and their labels. */
+type ControlSize = 'sm' | 'md' | 'lg' | 'xl';
 
 type ButtonType = 'primary' | 'secondary' | 'ghost' | 'danger';
-type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ButtonSize = ControlSize;
 type ButtonColor = 'blue' | 'pink' | 'orange' | 'green';
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Visual hierarchy. Primary = strongest action, Secondary = neutral bordered, Ghost = minimal, Danger = destructive. */
     buttonType?: ButtonType;
-    /** Size preset matching the component height scale. */
+    /** Shared visual density; takes precedence over the buttonSize alias. */
+    controlSize?: ControlSize;
+    /** Backward-compatible alias for controlSize. */
     buttonSize?: ButtonSize;
-    /** Color theme — maps to the design system's color scales. */
+    /** Explicit primary color preset. Omit to inherit the application's primary tokens. */
     color?: ButtonColor;
     /** Icon element. */
     icon?: React.ReactNode;
+    /** Decorative keyboard shortcut hint shown after the label. Set aria-keyshortcuts separately when applicable. */
+    shortcut?: React.ReactNode;
     /** Whether the button displays only an icon (no text). Must include aria-label. */
     hasIconOnly?: boolean;
     /** Position of the icon relative to the label. */
@@ -21,6 +29,48 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
+interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    /** Code or structured text displayed by the component. */
+    value: string;
+    /** Language name or common alias, such as `json`, `typescript`, `python`, or `bash`. */
+    language?: string;
+    /** Optional file name. Used for display and language detection when `language` is omitted. */
+    fileName?: string;
+    /** Optional title shown in the toolbar. */
+    label?: ReactNode;
+    /** Enables editing. Read-only viewer mode is the default. */
+    editable?: boolean;
+    /** Called when an editable block changes. */
+    onChange?: (value: string) => void;
+    /** Shows line numbers and a fold gutter. */
+    lineNumbers?: boolean;
+    /** Wraps long lines instead of requiring horizontal scrolling. */
+    wrap?: boolean;
+    /** Shows a copy action in the toolbar. */
+    copyable?: boolean;
+    /** Accessible name for the editing or viewing surface. */
+    ariaLabel?: string;
+    /** CodeMirror height constraints. Any valid CSS length is accepted. */
+    height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    placeholder?: string;
+    autoFocus?: boolean;
+}
+declare function CodeBlock({ value, language, fileName, label, editable, onChange, lineNumbers, wrap, copyable, ariaLabel, height, minHeight, maxHeight, placeholder, autoFocus, className, ...props }: CodeBlockProps): React.JSX.Element;
+
+interface BreadcrumbItem {
+    label: React.ReactNode;
+    href?: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+}
+interface BreadcrumbsProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+    items: BreadcrumbItem[];
+    ariaLabel?: string;
+    separator?: React.ReactNode;
+}
+declare function Breadcrumbs({ items, ariaLabel, separator, className, ...props }: BreadcrumbsProps): React.JSX.Element | null;
+
 declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
@@ -57,10 +107,59 @@ interface PromptGridProps extends React.HTMLAttributes<HTMLDivElement> {
 declare const PromptGrid: React.ForwardRefExoticComponent<PromptGridProps & React.RefAttributes<HTMLDivElement>>;
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** Visual density; native `size` still controls the character-width hint. */
+    controlSize?: ControlSize;
+    /** Persistent title that floats into the border on focus or when filled. Search uses it only as an accessible name. */
+    fieldLabel?: string;
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
+type TableSearchType = 'text' | 'glob';
+interface TableSearchProps extends Omit<InputProps, 'type'> {
+    /** Controls the search affordance. Filtering remains controlled by the table's data owner. */
+    searchType?: TableSearchType;
+    inputClassName?: string;
+}
+declare const TableSearch: React.ForwardRefExoticComponent<TableSearchProps & React.RefAttributes<HTMLInputElement>>;
+
+interface NumberInputProps extends Omit<InputProps, 'type'> {
+    unit?: string;
+}
+declare function NumberInput({ unit, controlSize, className, value, defaultValue, disabled, readOnly, min, max, ...props }: NumberInputProps): React.JSX.Element;
+
+type SliderBaseProps = {
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    className?: string;
+    showValues?: boolean;
+    formatValue?: (value: number) => React.ReactNode;
+};
+type SingleSliderProps = SliderBaseProps & {
+    knobs?: 1;
+    value: number;
+    onValueChange: (value: number) => void;
+    ariaLabel?: string;
+};
+type RangeSliderProps = SliderBaseProps & {
+    knobs: 2;
+    value: [number, number];
+    onValueChange: (value: [number, number]) => void;
+    lowerAriaLabel?: string;
+    upperAriaLabel?: string;
+};
+type SliderProps = SingleSliderProps | RangeSliderProps;
+declare function Slider(props: SliderProps): React.JSX.Element;
+
+interface PasswordInputProps extends Omit<InputProps, 'type'> {
+    showPasswordLabel?: string;
+    hidePasswordLabel?: string;
+}
+declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+
 interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    controlSize?: ControlSize;
 }
 declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
 
@@ -73,6 +172,31 @@ declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttri
 declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
 declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 
+type ToastVariant = 'default' | 'info' | 'success' | 'warning' | 'error';
+type ToastPosition = 'top-center' | 'top-right' | 'bottom-center';
+interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Semantic tone. Error toasts announce assertively; all other tones announce politely. */
+    variant?: ToastVariant;
+    /** Replaces the default semantic icon. */
+    icon?: React.ReactNode;
+    /** Optional action control, such as an Undo or View button. */
+    action?: React.ReactNode;
+    /** Called by the close control or after the auto-dismiss duration. */
+    onDismiss: () => void;
+    /** Accessible label for the close control. */
+    dismissLabel?: string;
+    /** Auto-dismiss delay in milliseconds. Pass null to keep the toast open. Defaults to 5 seconds, except errors, which persist. */
+    duration?: number | null;
+}
+interface ToastViewportProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Screen edge used for the toast stack. */
+    position?: ToastPosition;
+    /** Render into document.body so the stack is not clipped by product layout. */
+    portal?: boolean;
+}
+declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+declare const ToastViewport: React.ForwardRefExoticComponent<ToastViewportProps & React.RefAttributes<HTMLDivElement>>;
+
 interface ToggleProps {
     checked: boolean;
     onChange: (checked: boolean) => void;
@@ -94,19 +218,61 @@ interface ModalProps {
     footer?: React.ReactNode;
     /** When true, prevents closing via overlay click or Escape. */
     noClose?: boolean;
+    /** Keeps the close control visible but disables every dismissal route. */
+    closeDisabled?: boolean;
     /** Modal width: 'sm' (420px), 'md' (756px), 'lg' (near-fullscreen). */
     size?: 'sm' | 'md' | 'lg';
+    /** Replaces the body with a whole-surface loading state while retaining the modal chrome. */
+    loading?: boolean;
+    loadingLabel?: string;
+    /** Constrains the modal to the viewport, scrolls the body, and separates the fixed footer with a full-width divider. */
+    scrollable?: boolean;
     className?: string;
 }
-declare function Modal({ open, onClose, title, children, danger, warn, footer, noClose, size, className }: ModalProps): React.ReactPortal | null;
+declare function Modal({ open, onClose, title, children, danger, warn, footer, noClose, closeDisabled, size, loading, loadingLabel, scrollable, className }: ModalProps): React.ReactPortal | null;
+
+interface TableOverflowMenuItem {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+interface TableOverflowMenuConfig<T> {
+    items: (row: T, index: number) => TableOverflowMenuItem[];
+    onSelect: (value: string, row: T, index: number) => void;
+    getLabel?: (row: T, index: number) => string;
+    isDisabled?: (row: T, index: number) => boolean;
+}
+
+interface TableColumnSizing {
+    /** Preferred column width. Percentage widths require layout="fill". */
+    width?: string;
+    /** Minimum content width, including cell padding. */
+    minWidth?: number | string;
+    /** Maximum content width, including cell padding. Defaults adapt to the table container. */
+    maxWidth?: number | string;
+}
+interface TableLayoutProps {
+    /** Defaults to fill: distribute spare width across content-sized columns; overflow at their preferred widths. Content opts out of expansion. */
+    layout?: 'content' | 'fill';
+    /** Keeps column headers at the top of this table's scroll viewport. */
+    stickyHeader?: boolean;
+    /** Keeps the first data column (and selection column, if present) visible. */
+    stickyFirstColumn?: boolean;
+    /** Bounds vertical scrolling. Required for sticky headers during vertical scrolling. */
+    maxHeight?: number | string;
+}
 
-interface DataTableColumn<T> {
+interface DataTableColumn<T> extends TableColumnSizing {
     key: string;
     header: string;
     width?: string;
     render: (row: T, index: number) => ReactNode;
 }
-interface DataTableProps<T> {
+interface DataTableProps<T> extends TableLayoutProps {
+    'aria-label'?: string;
+    /** Adds a trailing, sticky row-actions column with an overflow menu. */
+    overflowMenu?: TableOverflowMenuConfig<T>;
     columns: DataTableColumn<T>[];
     data: T[];
     emptyMessage?: string;
@@ -114,7 +280,7 @@ interface DataTableProps<T> {
     size?: 'sm' | 'md' | 'lg';
     className?: string;
 }
-declare function DataTable<T>({ columns, data, emptyMessage, header, size, className }: DataTableProps<T>): React.JSX.Element;
+declare function DataTable<T>({ columns, data, emptyMessage, header, size, className, overflowMenu, layout, stickyHeader, stickyFirstColumn, maxHeight, 'aria-label': ariaLabel }: DataTableProps<T>): React.JSX.Element;
 
 interface DropdownItem {
     value: string;
@@ -126,22 +292,48 @@ interface DropdownItem {
 }
 interface DropdownProps {
     items: DropdownItem[];
-    selectedValue: string;
-    onSelect: (value: string) => void;
+    selectedValue?: string;
+    onSelect?: (value: string) => void;
+    /** Checkbox-style options that remain open after selection. */
+    multiple?: boolean;
+    selectedValues?: string[];
+    onSelectionChange?: (values: string[]) => void;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
     triggerLabel?: string;
-    direction?: 'up' | 'down';
+    /** Floating field title. Empty selectedValue is the unfilled state. */
+    fieldLabel?: string;
+    /** Show a clear action; defaults to true for floating fields. */
+    clearable?: boolean;
+    direction?: 'up' | 'down' | 'left' | 'right';
+    /** Preferred alignment; shifted as needed to stay inside visible bounds. */
     align?: 'left' | 'right';
+    /** Maximum menu height in pixels, further limited by available space. Default: 320. */
+    maxHeight?: number;
+    /** Minimum inset from the viewport and clipping ancestors in pixels. Default: 8. */
+    collisionPadding?: number;
+    /** Arranges the trigger content vertically without rotating the dropdown panel. */
+    triggerOrientation?: 'horizontal' | 'vertical';
     triggerContent?: React.ReactNode;
     label?: React.ReactNode;
+    /** Renders the trigger as a square icon button. Requires an accessible triggerLabel. */
+    iconOnly?: boolean;
     noChevron?: boolean;
-    size?: 'sm' | 'md';
+    /** Shared visual density; takes precedence over size. */
+    controlSize?: ControlSize;
+    /** Backward-compatible size alias. */
+    size?: ControlSize;
+    /** Connect a persistent Label with htmlFor to the trigger. */
+    triggerId?: string;
     triggerVariant?: 'outline' | 'tertiary';
     className?: string;
     triggerClassName?: string;
     panelClassName?: string;
     closeOnSelect?: boolean;
+    disabled?: boolean;
 }
-declare function Dropdown({ items, selectedValue, onSelect, triggerLabel, direction, align, triggerContent, label, noChevron, size, triggerVariant, className, triggerClassName, panelClassName, closeOnSelect, }: DropdownProps): React.JSX.Element | null;
+declare function Dropdown({ items, selectedValue, onSelect, multiple, selectedValues, onSelectionChange, searchable, searchPlaceholder, emptyMessage, triggerLabel, fieldLabel, clearable, direction, align, maxHeight, collisionPadding, triggerOrientation, triggerContent, label, iconOnly, noChevron, size: sizeAlias, controlSize, triggerId, triggerVariant, className, triggerClassName, panelClassName, closeOnSelect, disabled, }: DropdownProps): React.JSX.Element | null;
 
 type LinkTheme = 'default' | 'muted' | 'accent';
 type LinkSize = 'sm' | 'md' | 'lg';
@@ -157,8 +349,26 @@ interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLSpanElement>>;
 
+interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    checked: boolean;
+    indeterminate?: boolean;
+    onCheckedChange: (checked: boolean) => void;
+}
+declare function Checkbox({ checked, indeterminate, onCheckedChange, className, disabled, onClick, onKeyDown, ...props }: CheckboxProps): React.JSX.Element;
+
+interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children' | 'onChange' | 'type'> {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    onCheckedChange?: (checked: boolean) => void;
+}
+declare function Radio({ checked, className, description, disabled, label, onCheckedChange, ...props }: RadioProps): React.JSX.Element;
+
 type SortDirection = 'asc' | 'desc' | null;
-interface SortableTableColumn<T> {
+interface SortableTableDefaultSort {
+    key: string;
+    direction: Exclude<SortDirection, null>;
+}
+interface SortableTableColumn<T> extends TableColumnSizing {
     key: string;
     header: string;
     width?: string;
@@ -167,23 +377,70 @@ interface SortableTableColumn<T> {
     render: (row: T, index: number) => ReactNode;
     align?: 'left' | 'right';
 }
-interface SortableTableProps<T> {
+interface SortableTableRowAction<T> {
+    label: (row: T, index: number) => string;
+    icon: (row: T, index: number) => ReactNode;
+}
+interface SortableTableSelection<T> {
+    /** Returns whether a row is selected. Selection is controlled by the consumer. */
+    isSelected: (row: T) => boolean;
+    /** Called when an individual row changes selection. */
+    onSelectedChange: (row: T, selected: boolean) => void;
+    /**
+     * Handles the complete selectable row set in one update when the header
+     * checkbox changes. Falls back to `onSelectedChange` for each row when omitted.
+     */
+    onSelectAllChange?: (rows: T[], selected: boolean) => void;
+    /** Accessible name for an individual row's checkbox. */
+    getRowLabel: (row: T) => string;
+    /** Accessible name for the header checkbox. */
+    selectAllLabel?: string;
+}
+interface SortableTablePagination {
+    page: number;
+    pageSize: number;
+}
+interface SortableTableProps<T> extends TableLayoutProps {
+    /** Adds a trailing, sticky row-actions column with an overflow menu. */
+    overflowMenu?: TableOverflowMenuConfig<T>;
     columns: SortableTableColumn<T>[];
     data: T[];
+    /** Accessible name applied to the underlying table element. */
+    'aria-label'?: string;
     emptyMessage?: string;
     header?: ReactNode;
     size?: 'sm' | 'md' | 'lg';
+    /** Removes the table's outer border and radius for use inside another framed surface. */
+    embedded?: boolean;
     className?: string;
+    /** Required baseline row ordering that does not appear as an active user sort. */
+    defaultSort: SortableTableDefaultSort;
+    /** Initial visible user sort state. */
     defaultSortKey?: string;
     defaultSortDirection?: SortDirection;
     sortKey?: string | null;
     sortDirection?: SortDirection;
     onSortChange?: (key: string | null, direction: SortDirection) => void;
+    /**
+     * Slices the globally sorted dataset for display. Always pass the complete
+     * filtered dataset in `data`; sorting is applied before pagination.
+     */
+    pagination?: SortableTablePagination;
     highlightRow?: (row: T, index: number) => boolean;
+    /** Adds a leading checkbox column with controlled row selection. */
+    selection?: SortableTableSelection<T>;
+    /** Disabled rows remain visible but cannot be selected or activated. */
+    isRowDisabled?: (row: T) => boolean;
+    /** Disables only a row's selection control while preserving row activation. */
+    isRowSelectionDisabled?: (row: T) => boolean;
     /** Invoked when a row is selected. Enables pointer and keyboard row activation. */
     onRowClick?: (row: T, index: number) => void;
+    /** Invoked when a row is double-clicked. */
+    onRowDoubleClick?: (row: T, index: number) => void;
+    /** Directional affordance displayed over the right edge of an interactive row. */
+    rowAction?: SortableTableRowAction<T>;
 }
-declare function SortableTable<T>({ columns, data, emptyMessage, header, size, className, defaultSortKey, defaultSortDirection, sortKey: controlledKey, sortDirection: controlledDirection, onSortChange, highlightRow, onRowClick, }: SortableTableProps<T>): React.JSX.Element;
+declare function SortableTable<T>({ columns, data, 'aria-label': ariaLabel, emptyMessage, header, size, embedded, layout, stickyHeader, stickyFirstColumn, maxHeight, overflowMenu, className, defaultSort, defaultSortKey, defaultSortDirection, sortKey: controlledKey, sortDirection: controlledDirection, onSortChange, pagination, highlightRow, selection, isRowDisabled, isRowSelectionDisabled, onRowClick, onRowDoubleClick, rowAction, }: SortableTableProps<T>): React.JSX.Element;
 
 interface TabItem {
     id: string;
@@ -191,6 +448,7 @@ interface TabItem {
     content: ReactNode;
     disabled?: boolean;
 }
+type TabsVariant = 'line' | 'surface';
 interface TabsProps {
     items: TabItem[];
     defaultValue?: string;
@@ -198,8 +456,27 @@ interface TabsProps {
     onValueChange?: (id: string) => void;
     className?: string;
     ariaLabel?: string;
+    /** Extends a subtle divider across the entire tab list. */
+    divider?: boolean;
+    /** Visual treatment. Surface tabs sit on a full-width secondary surface with the active tab connected to its panel. */
+    variant?: TabsVariant;
+}
+declare function Tabs({ items, defaultValue, value: controlledValue, onValueChange, className, ariaLabel, divider, variant, }: TabsProps): React.JSX.Element;
+
+interface ContentSwitcherItem {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+interface ContentSwitcherProps {
+    items: ContentSwitcherItem[];
+    value: string;
+    onValueChange: (value: string) => void;
+    ariaLabel: string;
+    fullWidth?: boolean;
+    className?: string;
 }
-declare function Tabs({ items, defaultValue, value: controlledValue, onValueChange, className, ariaLabel, }: TabsProps): React.JSX.Element;
+declare function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth, className }: ContentSwitcherProps): React.JSX.Element;
 
 interface DisclosureProps {
     title: ReactNode;
@@ -208,18 +485,140 @@ interface DisclosureProps {
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
     className?: string;
     variant?: 'card' | 'plain';
 }
-declare function Disclosure({ title, meta, children, defaultOpen, open: controlledOpen, onOpenChange, className, variant, }: DisclosureProps): React.JSX.Element;
+declare function Disclosure({ title, meta, children, defaultOpen, open: controlledOpen, onOpenChange, disabled, className, variant, }: DisclosureProps): React.JSX.Element;
+
+interface LatticeLoaderProps extends HTMLAttributes<HTMLSpanElement> {
+    label?: string;
+}
+declare function LatticeLoader({ className, label, ...props }: LatticeLoaderProps): React.JSX.Element;
+
+type UILoaderTone = 'neutral' | 'blue' | 'green';
+interface UILoaderProps {
+    /** Visual height. Width follows the mark's aspect ratio. */
+    size?: number | string;
+    tone?: UILoaderTone;
+    className?: string;
+    style?: CSSProperties;
+    label?: string;
+    /** Use when another nearby element already announces loading. */
+    ariaHidden?: boolean;
+}
+/** A branded shine loader for whole UI surfaces, not component-level content. */
+declare function UILoader({ size, tone, className, style, label, ariaHidden }: UILoaderProps): React.JSX.Element;
+
+type GhostLength = number | string;
+interface GhostProps extends HTMLAttributes<HTMLDivElement> {
+    /** Width of the placeholder. Numbers are interpreted as pixels. */
+    width?: GhostLength;
+    /** Height of the placeholder. Numbers are interpreted as pixels. */
+    height?: GhostLength;
+    /** Border radius override. */
+    radius?: GhostLength;
+}
+interface GhostLineProps extends Omit<GhostProps, 'height'> {
+    /** Text-line size. */
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * An intentionally content-free, shimmering placeholder. Use the composed
+ * ghosts below for standard Fractal components; use this primitive for custom
+ * product layouts.
+ */
+declare function Ghost({ className, width, height, radius, style, ...props }: GhostProps): React.JSX.Element;
+declare function GhostLine({ className, size, width, ...props }: GhostLineProps): React.JSX.Element;
+interface ButtonGhostProps extends Omit<GhostProps, 'height'> {
+    size?: ControlSize;
+    controlSize?: ControlSize;
+    iconOnly?: boolean;
+}
+declare function ButtonGhost({ className, size, controlSize, iconOnly, width, ...props }: ButtonGhostProps): React.JSX.Element;
+interface CardGhostProps extends HTMLAttributes<HTMLDivElement> {
+    lines?: number;
+    showHeader?: boolean;
+}
+declare function CardGhost({ className, lines, showHeader, ...props }: CardGhostProps): React.JSX.Element;
+interface DataTableGhostProps extends HTMLAttributes<HTMLDivElement> {
+    /** Display placeholder cells for a header that is itself still loading. */
+    showHeader?: boolean;
+    /** Static header labels to retain while only rows are loading. */
+    headers?: ReactNode[];
+    /** Number of column placeholders. */
+    columns?: number;
+    /** Number of data row placeholders. */
+    rows?: number;
+    /** Optional CSS widths mirroring the eventual table columns. */
+    columnWidths?: string[];
+    size?: 'sm' | 'md' | 'lg';
+}
+declare function DataTableGhost({ className, showHeader, headers, columns, rows, columnWidths, size, ...props }: DataTableGhostProps): React.JSX.Element;
+interface FormFieldGhostProps extends HTMLAttributes<HTMLDivElement> {
+    labelWidth?: GhostLength;
+    controlSize?: ControlSize;
+    multiline?: boolean;
+}
+declare function InputGhost({ className, labelWidth, ...props }: FormFieldGhostProps): React.JSX.Element;
+declare function TextareaGhost({ className, labelWidth, ...props }: FormFieldGhostProps): React.JSX.Element;
+declare function LabelGhost({ className, width, ...props }: Omit<GhostLineProps, 'size'>): React.JSX.Element;
+declare function AlertGhost({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare function CheckboxGhost({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare const ToggleGhost: typeof CheckboxGhost;
+declare function ChipGhost({ className, width, ...props }: Omit<GhostProps, 'height'>): React.JSX.Element;
+declare function LinkGhost({ className, width, ...props }: Omit<GhostLineProps, 'size'>): React.JSX.Element;
+declare const TextButtonGhost: typeof LinkGhost;
+declare function DropdownGhost({ className, controlSize, ...props }: HTMLAttributes<HTMLDivElement> & {
+    controlSize?: ControlSize;
+}): React.JSX.Element;
+declare function ContentSwitcherGhost({ className, options, ...props }: HTMLAttributes<HTMLDivElement> & {
+    options?: number;
+}): React.JSX.Element;
+declare const TabsGhost: typeof ContentSwitcherGhost;
+declare function DisclosureGhost({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare function PaginationGhost({ className, pages, ...props }: HTMLAttributes<HTMLDivElement> & {
+    pages?: number;
+}): React.JSX.Element;
+declare function FileDropzoneGhost({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare function PromptCardGhost({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+type ConversationGhostProps = HTMLAttributes<HTMLDivElement>;
+declare function ConversationGhost({ className, 'aria-label': ariaLabel, ...props }: ConversationGhostProps): React.JSX.Element;
+declare function SortableTableGhost(props: DataTableGhostProps): React.JSX.Element;
+interface SidebarGhostProps extends HTMLAttributes<HTMLDivElement> {
+    items?: number;
+}
+declare function SidebarGhost({ className, items, ...props }: SidebarGhostProps): React.JSX.Element;
+interface SurfaceGhostProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title?: ReactNode;
+    lines?: number;
+}
+declare function ModalGhost({ className, title, lines, ...props }: SurfaceGhostProps): React.JSX.Element;
+declare function SidePanelGhost({ className, title, lines, ...props }: SurfaceGhostProps): React.JSX.Element;
 
 interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
     /** Fixed sidebar width. Defaults to the standard application width. */
     width?: string;
+    /** Collapses the sidebar to an icon rail until it is hovered or receives focus. */
+    compact?: boolean;
 }
 declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>>;
 declare const SidebarHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const SidebarBrand: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+interface SidebarAccountMenuProps {
+    /** Person or workspace label shown in the sidebar header. */
+    name: string;
+    /** Available account actions. */
+    items: DropdownItem[];
+    /** Invoked when an account action is selected. */
+    onSelect: (value: string) => void;
+    /** Accessible label for the account actions menu. */
+    triggerLabel?: string;
+    /** Leading profile or workspace mark. */
+    icon?: React.ReactNode;
+    className?: string;
+}
+declare function SidebarAccountMenu({ name, items, onSelect, triggerLabel, icon, className, }: SidebarAccountMenuProps): React.JSX.Element;
 declare const SidebarNav: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
 declare const SidebarSection: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 interface SidebarNavItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -240,16 +639,34 @@ interface SidePanelProps {
     description?: React.ReactNode;
     children: React.ReactNode;
     footer?: React.ReactNode;
-    /** Panel width: sm (420px), md (540px), or lg (680px). */
-    size?: 'sm' | 'md' | 'lg';
+    /** Panel width: sm (420px), md (540px), lg (680px), or xl (960px). */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Replaces the body with a whole-surface loading state while retaining the panel header. */
+    loading?: boolean;
+    loadingLabel?: string;
     className?: string;
 }
-declare function SidePanel({ open, onClose, title, description, children, footer, size, className }: SidePanelProps): React.ReactPortal | null;
+declare function SidePanel({ open, onClose, title, description, children, footer, size, loading, loadingLabel, className }: SidePanelProps): React.ReactPortal | null;
 
 interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Persistent title: starts on the first line, floats into the border on focus or when filled. */
+    fieldLabel?: string;
+    /** Prose uses the input font; source preserves the existing monospace treatment. */
+    textStyle?: 'prose' | 'source';
 }
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
+type TextButtonSize = 'sm' | 'md';
+type TextButtonIconPosition = 'start' | 'end';
+type TextButtonTone = 'primary' | 'secondary';
+interface TextButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+    iconPosition?: TextButtonIconPosition;
+    size?: TextButtonSize;
+    tone?: TextButtonTone;
+}
+declare const TextButton: React.ForwardRefExoticComponent<TextButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
 interface FileDropzoneProps {
     files: File[];
     onFilesChange: (files: File[]) => void;
@@ -262,6 +679,20 @@ interface FileDropzoneProps {
 }
 declare function FileDropzone({ files, onFilesChange, accept, multiple, disabled, title, description, className, }: FileDropzoneProps): React.JSX.Element;
 
+interface PaginationProps {
+    /** One-based active page. */
+    page: number;
+    pageSize: number;
+    totalItems: number;
+    onPageChange: (page: number) => void;
+    /** Optional page sizes, rendered as an unframed selector in the pagination footer. */
+    pageSizeOptions?: number[];
+    onPageSizeChange?: (pageSize: number) => void;
+    ariaLabel?: string;
+    className?: string;
+}
+declare function Pagination({ page, pageSize, totalItems, onPageChange, pageSizeOptions, onPageSizeChange, ariaLabel, className, }: PaginationProps): React.JSX.Element;
+
 /**
  * Register an Escape-key dismiss handler with the global priority stack.
  *
@@ -273,4 +704,19 @@ declare function useEscapeDismiss(priority: number, handler: () => void, enabled
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Alert, AlertDescription, AlertTitle, Button, type ButtonColor, type ButtonProps, type ButtonSize, type ButtonType, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Chip, type ChipProps, type ChipTone, DataTable, type DataTableColumn, type DataTableProps, Disclosure, type DisclosureProps, Dropdown, type DropdownItem, type DropdownProps, FeatureCard, type FeatureCardProps, FileDropzone, type FileDropzoneProps, FolderCard, type FolderCardProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, type LinkSize, type LinkTheme, Modal, type ModalProps, PromptCard, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, SidePanel, type SidePanelProps, Sidebar, SidebarBrand, SidebarFooter, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableProps, type TabItem, Tabs, type TabsProps, Textarea, type TextareaProps, Toggle, type ToggleProps, cn, useEscapeDismiss };
+interface TooltipProps {
+    /** Supplementary, non-interactive help. Keep essential instructions visible. */
+    content: ReactNode;
+    /** One focusable element that forwards its props and ref (for example Button). */
+    children: ReactElement;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    maxWidth?: number | string;
+    /** Delay before opening on hover, in milliseconds. Keyboard focus is immediate. */
+    delay?: number;
+    disabled?: boolean;
+    className?: string;
+}
+/** Inverse hover/focus help with an arrow, viewport collision handling and Escape dismissal. */
+declare function Tooltip({ content, children, placement, maxWidth, delay, disabled, className, }: TooltipProps): React.JSX.Element;
+
+export { Alert, AlertDescription, AlertGhost, AlertTitle, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonColor, ButtonGhost, type ButtonGhostProps, type ButtonProps, type ButtonSize, type ButtonType, Card, CardContent, CardDescription, CardFooter, CardGhost, type CardGhostProps, CardHeader, CardTitle, Checkbox, CheckboxGhost, type CheckboxProps, Chip, ChipGhost, type ChipProps, type ChipTone, CodeBlock, type CodeBlockProps, ContentSwitcher, ContentSwitcherGhost, type ContentSwitcherItem, type ContentSwitcherProps, type ControlSize, ConversationGhost, type ConversationGhostProps, DataTable, type DataTableColumn, DataTableGhost, type DataTableGhostProps, type DataTableProps, Disclosure, DisclosureGhost, type DisclosureProps, Dropdown, DropdownGhost, type DropdownItem, type DropdownProps, FeatureCard, type FeatureCardProps, FileDropzone, FileDropzoneGhost, type FileDropzoneProps, FolderCard, type FolderCardProps, type FormFieldGhostProps, Ghost, GhostLine, type GhostLineProps, type GhostProps, Input, InputGhost, type InputProps, Label, LabelGhost, type LabelProps, LatticeLoader, type LatticeLoaderProps, Link, LinkGhost, type LinkProps, type LinkSize, type LinkTheme, Modal, ModalGhost, type ModalProps, NumberInput, type NumberInputProps, Pagination, PaginationGhost, type PaginationProps, PasswordInput, type PasswordInputProps, PromptCard, PromptCardGhost, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, Radio, type RadioProps, type RangeSliderProps, SidePanel, SidePanelGhost, type SidePanelProps, Sidebar, SidebarAccountMenu, type SidebarAccountMenuProps, SidebarBrand, SidebarFooter, SidebarGhost, type SidebarGhostProps, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SingleSliderProps, Slider, type SliderProps, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableDefaultSort, SortableTableGhost, type SortableTablePagination, type SortableTableProps, type SortableTableRowAction, type SortableTableSelection, type SurfaceGhostProps, type TabItem, type TableColumnSizing, type TableLayoutProps, type TableOverflowMenuConfig, type TableOverflowMenuItem, TableSearch, type TableSearchProps, type TableSearchType, Tabs, TabsGhost, type TabsProps, type TabsVariant, TextButton, TextButtonGhost, type TextButtonIconPosition, type TextButtonProps, type TextButtonSize, type TextButtonTone, Textarea, TextareaGhost, type TextareaProps, Toast, type ToastPosition, type ToastProps, type ToastVariant, ToastViewport, type ToastViewportProps, Toggle, ToggleGhost, type ToggleProps, Tooltip, type TooltipProps, UILoader, type UILoaderProps, type UILoaderTone, cn, useEscapeDismiss };