@mirror-physics/fractal-ui 0.2.0-next.3 → 0.2.0-next.30

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, HTMLAttributes, CSSProperties } from 'react';
 import { ClassValue } from 'clsx';
 
 type ButtonType = 'primary' | 'secondary' | 'ghost' | 'danger';
@@ -94,11 +94,16 @@ 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;
     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, className }: ModalProps): React.ReactPortal | null;
 
 interface DataTableColumn<T> {
     key: string;
@@ -133,6 +138,8 @@ interface DropdownProps {
     align?: 'left' | 'right';
     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';
     triggerVariant?: 'outline' | 'tertiary';
@@ -140,8 +147,9 @@ interface DropdownProps {
     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, triggerLabel, direction, align, triggerContent, label, iconOnly, noChevron, size, triggerVariant, className, triggerClassName, panelClassName, closeOnSelect, disabled, }: DropdownProps): React.JSX.Element | null;
 
 type LinkTheme = 'default' | 'muted' | 'accent';
 type LinkSize = 'sm' | 'md' | 'lg';
@@ -157,7 +165,17 @@ 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;
+    onCheckedChange: (checked: boolean) => void;
+}
+declare function Checkbox({ checked, onCheckedChange, className, disabled, onClick, onKeyDown, ...props }: CheckboxProps): React.JSX.Element;
+
 type SortDirection = 'asc' | 'desc' | null;
+interface SortableTableDefaultSort {
+    key: string;
+    direction: Exclude<SortDirection, null>;
+}
 interface SortableTableColumn<T> {
     key: string;
     header: string;
@@ -167,21 +185,34 @@ interface SortableTableColumn<T> {
     render: (row: T, index: number) => ReactNode;
     align?: 'left' | 'right';
 }
+interface SortableTableRowAction<T> {
+    label: (row: T, index: number) => string;
+    icon: (row: T, index: number) => ReactNode;
+}
 interface SortableTableProps<T> {
     columns: SortableTableColumn<T>[];
     data: T[];
     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;
+    /** 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;
     highlightRow?: (row: T, index: number) => boolean;
+    /** Invoked when a row is selected. Enables pointer and keyboard row activation. */
+    onRowClick?: (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, }: SortableTableProps<T>): React.JSX.Element;
+declare function SortableTable<T>({ columns, data, emptyMessage, header, size, embedded, className, defaultSort, defaultSortKey, defaultSortDirection, sortKey: controlledKey, sortDirection: controlledDirection, onSortChange, highlightRow, onRowClick, rowAction, }: SortableTableProps<T>): React.JSX.Element;
 
 interface TabItem {
     id: string;
@@ -196,8 +227,25 @@ interface TabsProps {
     onValueChange?: (id: string) => void;
     className?: string;
     ariaLabel?: string;
+    /** Extends a subtle divider across the entire tab list. */
+    divider?: boolean;
+}
+declare function Tabs({ items, defaultValue, value: controlledValue, onValueChange, className, ariaLabel, divider, }: 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;
@@ -206,10 +254,110 @@ 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?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    iconOnly?: boolean;
+}
+declare function ButtonGhost({ className, size, 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;
+    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, ...props }: HTMLAttributes<HTMLDivElement>): 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;
+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. */
@@ -218,6 +366,18 @@ interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
 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;
+    className?: string;
+}
+declare function SidebarAccountMenu({ name, items, onSelect, triggerLabel, 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> {
@@ -231,6 +391,63 @@ interface SidebarNavItemProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
 declare const SidebarNavItem: React.ForwardRefExoticComponent<SidebarNavItemProps & React.RefAttributes<HTMLButtonElement>>;
 declare const SidebarFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 
+interface SidePanelProps {
+    open: boolean;
+    onClose: () => void;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    /** 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, loading, loadingLabel, className }: SidePanelProps): React.ReactPortal | null;
+
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+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;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    className?: string;
+}
+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.
  *
@@ -242,4 +459,4 @@ 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, 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, Sidebar, SidebarBrand, SidebarFooter, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableProps, type TabItem, Tabs, type TabsProps, Toggle, type ToggleProps, cn, useEscapeDismiss };
+export { Alert, AlertDescription, AlertGhost, AlertTitle, 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, ContentSwitcher, ContentSwitcherGhost, type ContentSwitcherItem, type ContentSwitcherProps, 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, Pagination, PaginationGhost, type PaginationProps, PromptCard, PromptCardGhost, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, SidePanel, SidePanelGhost, type SidePanelProps, Sidebar, SidebarAccountMenu, type SidebarAccountMenuProps, SidebarBrand, SidebarFooter, SidebarGhost, type SidebarGhostProps, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableDefaultSort, SortableTableGhost, type SortableTableProps, type SortableTableRowAction, type SurfaceGhostProps, type TabItem, Tabs, TabsGhost, type TabsProps, TextButton, TextButtonGhost, type TextButtonIconPosition, type TextButtonProps, type TextButtonSize, type TextButtonTone, Textarea, TextareaGhost, type TextareaProps, Toggle, ToggleGhost, type ToggleProps, UILoader, type UILoaderProps, type UILoaderTone, cn, useEscapeDismiss };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, HTMLAttributes, CSSProperties } from 'react';
 import { ClassValue } from 'clsx';
 
 type ButtonType = 'primary' | 'secondary' | 'ghost' | 'danger';
@@ -94,11 +94,16 @@ 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;
     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, className }: ModalProps): React.ReactPortal | null;
 
 interface DataTableColumn<T> {
     key: string;
@@ -133,6 +138,8 @@ interface DropdownProps {
     align?: 'left' | 'right';
     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';
     triggerVariant?: 'outline' | 'tertiary';
@@ -140,8 +147,9 @@ interface DropdownProps {
     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, triggerLabel, direction, align, triggerContent, label, iconOnly, noChevron, size, triggerVariant, className, triggerClassName, panelClassName, closeOnSelect, disabled, }: DropdownProps): React.JSX.Element | null;
 
 type LinkTheme = 'default' | 'muted' | 'accent';
 type LinkSize = 'sm' | 'md' | 'lg';
@@ -157,7 +165,17 @@ 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;
+    onCheckedChange: (checked: boolean) => void;
+}
+declare function Checkbox({ checked, onCheckedChange, className, disabled, onClick, onKeyDown, ...props }: CheckboxProps): React.JSX.Element;
+
 type SortDirection = 'asc' | 'desc' | null;
+interface SortableTableDefaultSort {
+    key: string;
+    direction: Exclude<SortDirection, null>;
+}
 interface SortableTableColumn<T> {
     key: string;
     header: string;
@@ -167,21 +185,34 @@ interface SortableTableColumn<T> {
     render: (row: T, index: number) => ReactNode;
     align?: 'left' | 'right';
 }
+interface SortableTableRowAction<T> {
+    label: (row: T, index: number) => string;
+    icon: (row: T, index: number) => ReactNode;
+}
 interface SortableTableProps<T> {
     columns: SortableTableColumn<T>[];
     data: T[];
     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;
+    /** 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;
     highlightRow?: (row: T, index: number) => boolean;
+    /** Invoked when a row is selected. Enables pointer and keyboard row activation. */
+    onRowClick?: (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, }: SortableTableProps<T>): React.JSX.Element;
+declare function SortableTable<T>({ columns, data, emptyMessage, header, size, embedded, className, defaultSort, defaultSortKey, defaultSortDirection, sortKey: controlledKey, sortDirection: controlledDirection, onSortChange, highlightRow, onRowClick, rowAction, }: SortableTableProps<T>): React.JSX.Element;
 
 interface TabItem {
     id: string;
@@ -196,8 +227,25 @@ interface TabsProps {
     onValueChange?: (id: string) => void;
     className?: string;
     ariaLabel?: string;
+    /** Extends a subtle divider across the entire tab list. */
+    divider?: boolean;
+}
+declare function Tabs({ items, defaultValue, value: controlledValue, onValueChange, className, ariaLabel, divider, }: 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;
@@ -206,10 +254,110 @@ 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?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    iconOnly?: boolean;
+}
+declare function ButtonGhost({ className, size, 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;
+    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, ...props }: HTMLAttributes<HTMLDivElement>): 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;
+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. */
@@ -218,6 +366,18 @@ interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
 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;
+    className?: string;
+}
+declare function SidebarAccountMenu({ name, items, onSelect, triggerLabel, 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> {
@@ -231,6 +391,63 @@ interface SidebarNavItemProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
 declare const SidebarNavItem: React.ForwardRefExoticComponent<SidebarNavItemProps & React.RefAttributes<HTMLButtonElement>>;
 declare const SidebarFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 
+interface SidePanelProps {
+    open: boolean;
+    onClose: () => void;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    /** 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, loading, loadingLabel, className }: SidePanelProps): React.ReactPortal | null;
+
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+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;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    className?: string;
+}
+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.
  *
@@ -242,4 +459,4 @@ 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, 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, Sidebar, SidebarBrand, SidebarFooter, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableProps, type TabItem, Tabs, type TabsProps, Toggle, type ToggleProps, cn, useEscapeDismiss };
+export { Alert, AlertDescription, AlertGhost, AlertTitle, 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, ContentSwitcher, ContentSwitcherGhost, type ContentSwitcherItem, type ContentSwitcherProps, 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, Pagination, PaginationGhost, type PaginationProps, PromptCard, PromptCardGhost, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, SidePanel, SidePanelGhost, type SidePanelProps, Sidebar, SidebarAccountMenu, type SidebarAccountMenuProps, SidebarBrand, SidebarFooter, SidebarGhost, type SidebarGhostProps, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableDefaultSort, SortableTableGhost, type SortableTableProps, type SortableTableRowAction, type SurfaceGhostProps, type TabItem, Tabs, TabsGhost, type TabsProps, TextButton, TextButtonGhost, type TextButtonIconPosition, type TextButtonProps, type TextButtonSize, type TextButtonTone, Textarea, TextareaGhost, type TextareaProps, Toggle, ToggleGhost, type ToggleProps, UILoader, type UILoaderProps, type UILoaderTone, cn, useEscapeDismiss };