opus-react 0.2.3

package/dist/index.d.cts

@@ -0,0 +1,1129 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, ChangeEventHandler, CSSProperties } from 'react';
+
+type Theme = "light" | "dark";
+type FieldMode = "stacked" | "flagged";
+type LabelPosition = "left" | "right";
+type ChoiceShape = "round" | "square";
+type ChipInputVariant = "filled" | "outlined" | "soft" | "glass" | "gradient";
+type ChipInputPreset = "chip-input" | "tag-input" | "token-input";
+type ChoiceOption = {
+    error?: string;
+    label: string;
+    value: string;
+};
+type GalleryImage = {
+    alt: string;
+    caption?: string;
+    id?: string;
+    src: string;
+};
+type ModelFireOverlay = {
+    alphaSrc: string;
+    colorSrc: string;
+};
+type ModelAsset = {
+    alt: string;
+    animationName?: string;
+    autoplay?: boolean;
+    cameraOrbit?: string;
+    description?: string;
+    fireOverlay?: ModelFireOverlay;
+    id?: string;
+    name: string;
+    src: string;
+};
+type AlertStatus = "error" | "success" | "warning" | "info";
+type DialogActionSet = "ok" | "ok-cancel" | "yes-no" | "delete";
+type ModalSize = "small" | "medium" | "large" | "fullscreen";
+type DrawerSide = "left" | "right" | "top" | "bottom";
+type PopoverPlacement = "top" | "right" | "bottom" | "left";
+type DropdownMenuPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
+type TabsOrientation = "horizontal" | "vertical";
+type TabsVariant = "line" | "contained";
+type SurfaceTone = "default" | "accent" | "success" | "warning" | "danger" | "info";
+type SurfaceDensity = "comfortable" | "compact";
+type TableDensity = "comfortable" | "compact";
+type EmptyStateIcon = "folder" | "inbox" | "search";
+type SidebarSide = "left" | "right";
+type SkeletonVariant = "text" | "card" | "avatar" | "table";
+type SkeletonAnimation = "shimmer" | "pulse" | "none";
+type ImageThumbnailSize = "small" | "medium" | "large";
+type ModelThumbnailSize = "small" | "medium" | "large";
+type ChartPalette = "opus" | "cool" | "warm" | "mono";
+type ChartVariant = "area" | "bar-horizontal" | "bar-vertical" | "box-plot" | "bubble" | "bubble-map" | "calendar-heatmap" | "candlestick" | "chord" | "choropleth" | "circle-packing" | "density" | "donut" | "force-directed" | "funnel" | "gantt" | "geo-map" | "grouped-bar" | "heatmap" | "hexbin" | "histogram" | "line" | "milestone-timeline" | "multi-line" | "network" | "pie" | "polar-area" | "pyramid" | "radar" | "ridgeline" | "sankey" | "scatter" | "spline" | "stacked-area" | "stacked-bar" | "stacked-bar-100" | "stream" | "sunburst" | "timeline" | "treemap" | "violin" | "waterfall";
+type ToastVerticalPosition = "top" | "bottom";
+type ToastHorizontalPosition = "left" | "right";
+type ToastViewportPosition = {
+    horizontal: ToastHorizontalPosition;
+    vertical: ToastVerticalPosition;
+};
+type AccordionGroupType = "single" | "multiple";
+
+type ButtonVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link";
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    children: ReactNode;
+    variant?: ButtonVariant;
+};
+declare function Button({ children, className, variant, type, ...props }: ButtonProps): react.JSX.Element;
+
+type FieldShellAriaContextValue = {
+    describedBy?: string;
+    errorId?: string;
+    labelId?: string;
+    required?: boolean;
+};
+declare function useFieldShellAria(): FieldShellAriaContextValue | null;
+declare function fieldInputAriaProps(aria: FieldShellAriaContextValue | null | undefined, options?: {
+    invalid?: boolean;
+}): {
+    "aria-labelledby"?: string | undefined;
+    "aria-required"?: true | undefined;
+    required?: true | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-describedby"?: string | undefined;
+};
+type FieldShellProps = {
+    children: ReactNode;
+    className?: string;
+    compactControl?: boolean;
+    error?: string;
+    fitContent?: boolean;
+    flaggedAlign?: "center" | "start";
+    help?: string;
+    id?: string;
+    label: string;
+    labelVisuallyHidden?: boolean;
+    labelPosition?: LabelPosition;
+    labelTag?: "div" | "label";
+    mode?: FieldMode;
+    required?: boolean;
+    suppressErrorDisplay?: boolean;
+};
+declare function FieldShell({ children, className, compactControl, error, fitContent, flaggedAlign, help, id, label, labelVisuallyHidden, labelPosition, labelTag, mode, required, suppressErrorDisplay, }: FieldShellProps): react.JSX.Element;
+
+type CheckboxFieldProps = {
+    checked: boolean;
+    error?: string;
+    help?: string;
+    id: string;
+    label: string;
+    labelPosition?: LabelPosition;
+    mode?: FieldMode;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    shape?: ChoiceShape;
+};
+declare function CheckboxField({ checked, error, help, id, label, labelPosition, mode, onChange, shape, }: CheckboxFieldProps): react.JSX.Element;
+
+type ColorFieldProps = {
+    error?: string;
+    help?: string;
+    id: string;
+    label: string;
+    labelPosition?: LabelPosition;
+    mode?: FieldMode;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    value: string;
+};
+declare function ColorField({ error, help, id, label, labelPosition, mode, onChange, value, }: ColorFieldProps): react.JSX.Element;
+
+type DateInputType = "date" | "datetime-local" | "month" | "time" | "week";
+type DateFieldProps = {
+    error?: string;
+    help?: string;
+    id: string;
+    label: string;
+    labelPosition?: LabelPosition;
+    mode?: FieldMode;
+    required?: boolean;
+    type?: DateInputType;
+    value: string;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+};
+declare function DateField({ error, help, id, label, labelPosition, mode, required, type, value, onChange, }: DateFieldProps): react.JSX.Element;
+
+type HiddenFieldProps = {
+    help?: string;
+    id: string;
+    label: string;
+    labelPosition?: LabelPosition;
+    mode?: FieldMode;
+    name?: string;
+    required?: boolean;
+    value: string;
+};
+declare function HiddenField({ help, id, label, labelPosition, mode, name, required, value, }: HiddenFieldProps): react.JSX.Element;
+
+type FileFieldProps = {
+    error?: string;
+    footnote?: string;
+    help?: string;
+    id: string;
+    label: string;
+    labelPosition?: LabelPosition;
+    mode?: FieldMode;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    fileName?: string;
+};
+declare function FileField({ error, fileName, footnote, help, id, label, labelPosition, mode, onChange, }: FileFieldProps): react.JSX.Element;
+
+type NumberFieldProps = {
+    error?: string;
+    help?: string;
+    id: string;
+    label: string;
+    labelPosition?: LabelPosition;
+    max?: number;
+    min?: number;
+    mode?: FieldMode;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    step?: number;
+    value: number;
+};
+declare function NumberField({ error, help, id, label, labelPosition, max, min, mode, onChange, step, value, }: NumberFieldProps): react.JSX.Element;
+
+type RadioGroupProps = {
+    children: ReactNode;
+    error?: string;
+    help?: string;
+    id?: string;
+    label: string;
+    labelPosition?: LabelPosition;
+    mode?: FieldMode;
+    name: string;
+    onChange: (value: string) => void;
+    shape?: ChoiceShape;
+    value: string | null;
+};
+declare function RadioGroup({ children, error, help, id, label, labelPosition, mode, name, onChange, shape, value, }: RadioGroupProps): react.JSX.Element;
+type RadioProps = {
+    children?: ReactNode;
+    error?: string;
+    name?: string;
+    shape?: ChoiceShape;
+    value: string;
+    defaultChecked?: boolean;
+};
+declare function Radio({ children, error, name, shape, value, defaultChecked }: RadioProps): react.JSX.Element;
+
+type ChipInputProps = {
+    disabled?: boolean;
+    error?: string;
+    help?: string;
+    id: string;
+    label: string;
+    labelPosition?: LabelPosition;
+    mode?: FieldMode;
+    onChange: (value: string[]) => void;
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    value: string[];
+    variant?: ChipInputVariant;
+};
+declare function ChipInput({ disabled, error, help, id, label, labelPosition, mode, onChange, placeholder, readOnly, required, value, variant, }: ChipInputProps): react.JSX.Element;
+declare const ChipInputField: typeof ChipInput;
+
+type RangeFieldProps = {
+    error?: string;
+    help?: string;
+    id: string;
+    label: string;
+    labelPosition?: LabelPosition;
+    max?: number;
+    min?: number;
+    mode?: FieldMode;
+    step?: number;
+    value: number;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+};
+declare function RangeField({ error, help, id, label, labelPosition, max, min, mode, step, value, onChange, }: RangeFieldProps): react.JSX.Element;
+
+type SelectFieldProps = {
+    error?: string;
+    help?: string;
+    id: string;
+    label: string;
+    labelPosition?: LabelPosition;
+    mode?: FieldMode;
+    options: string[];
+    required?: boolean;
+    value: string;
+    onChange: ChangeEventHandler<HTMLSelectElement>;
+};
+declare function SelectField({ error, help, id, label, labelPosition, mode, options, required, value, onChange, }: SelectFieldProps): react.JSX.Element;
+
+type SwitchFieldProps = {
+    checked: boolean;
+    error?: string;
+    help?: string;
+    id: string;
+    label: string;
+    labelPosition?: LabelPosition;
+    mode?: FieldMode;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+};
+declare function SwitchField({ checked, error, help, id, label, labelPosition, mode, onChange, }: SwitchFieldProps): react.JSX.Element;
+
+type TextAreaFieldProps = {
+    error?: string;
+    help?: string;
+    id: string;
+    label: string;
+    labelPosition?: LabelPosition;
+    maxChars?: number;
+    mode?: FieldMode;
+    placeholder?: string;
+    required?: boolean;
+    value: string;
+    onChange: ChangeEventHandler<HTMLTextAreaElement>;
+};
+declare function TextAreaField({ error, help, id, label, labelPosition, maxChars, mode, placeholder, required, value, onChange, }: TextAreaFieldProps): react.JSX.Element;
+
+type TextFieldProps = {
+    error?: string;
+    help?: string;
+    id: string;
+    label: string;
+    labelPosition?: LabelPosition;
+    mode?: FieldMode;
+    placeholder?: string;
+    required?: boolean;
+    type: "email" | "password" | "search" | "tel" | "text" | "url";
+    value: string;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+};
+declare function TextField({ error, help, id, label, labelPosition, mode, placeholder, required, type, value, onChange, }: TextFieldProps): react.JSX.Element;
+
+type ThemeToggleFieldProps = {
+    className?: string;
+    id: string;
+    label?: string;
+    labelPosition?: LabelPosition;
+    labelVisuallyHidden?: boolean;
+    mode?: FieldMode;
+    value: Theme;
+    onChange: (value: Theme) => void;
+};
+declare function ThemeToggleField({ className, id, label, labelPosition, labelVisuallyHidden, mode, value, onChange, }: ThemeToggleFieldProps): react.JSX.Element;
+
+type TooltipProps = {
+    content: string;
+    label?: string;
+};
+declare function Tooltip({ content, label }: TooltipProps): react.JSX.Element;
+
+type AlertProps = {
+    description: string;
+    dismissible?: boolean;
+    iconFlagged?: boolean;
+    onDismiss?: () => void;
+    status?: AlertStatus;
+    title: string;
+};
+declare function Alert({ description, dismissible, iconFlagged, onDismiss, status, title, }: AlertProps): react.JSX.Element;
+
+type DialogResult = "confirm" | "cancel" | "dismiss";
+type DialogProps = {
+    actionSet?: DialogActionSet;
+    children?: ReactNode;
+    description: string;
+    dismissOnBackdrop?: boolean;
+    dismissOnEscape?: boolean;
+    onClose: (result: DialogResult) => void;
+    open: boolean;
+    status?: AlertStatus;
+    title: string;
+};
+declare function Dialog({ actionSet, children, description, dismissOnBackdrop, dismissOnEscape, onClose, open, status, title, }: DialogProps): react.JSX.Element | null;
+
+type ModalProps = {
+    actions?: ReactNode;
+    children: ReactNode;
+    closeButton?: boolean;
+    description?: string;
+    dismissOnBackdrop?: boolean;
+    dismissOnEscape?: boolean;
+    footer?: ReactNode;
+    onClose: () => void;
+    open: boolean;
+    size?: ModalSize;
+    title: string;
+};
+declare function Modal({ actions, children, closeButton, description, dismissOnBackdrop, dismissOnEscape, footer, onClose, open, size, title, }: ModalProps): react.JSX.Element | null;
+declare function ModalDefaultActions({ onClose }: {
+    onClose: () => void;
+}): react.JSX.Element;
+
+type DrawerProps = {
+    actions?: ReactNode;
+    children: ReactNode;
+    closeButton?: boolean;
+    description?: string;
+    dismissOnBackdrop?: boolean;
+    dismissOnEscape?: boolean;
+    footer?: ReactNode;
+    onClose: () => void;
+    open: boolean;
+    side?: DrawerSide;
+    title: string;
+};
+declare function Drawer({ actions, children, closeButton, description, dismissOnBackdrop, dismissOnEscape, footer, onClose, open, side, title, }: DrawerProps): react.JSX.Element | null;
+declare function DrawerDefaultActions({ onClose }: {
+    onClose: () => void;
+}): react.JSX.Element;
+
+type PopoverProps = {
+    children: ReactNode;
+    closeOnEscape?: boolean;
+    closeOnOutside?: boolean;
+    defaultOpen?: boolean;
+    label?: string;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    placement?: PopoverPlacement;
+    showArrow?: boolean;
+    title?: string;
+    trigger: ReactNode;
+};
+declare function Popover({ children, closeOnEscape, closeOnOutside, defaultOpen, label, onOpenChange, open, placement, showArrow, title, trigger, }: PopoverProps): react.JSX.Element;
+
+type DropdownMenuItemData = {
+    checked?: boolean;
+    disabled?: boolean;
+    destructive?: boolean;
+    icon?: ReactNode;
+    id: string;
+    label: string;
+    onSelect?: () => void;
+    shortcut?: string;
+};
+type DropdownMenuProps = {
+    closeOnEscape?: boolean;
+    closeOnOutside?: boolean;
+    closeOnSelect?: boolean;
+    defaultOpen?: boolean;
+    elevated?: boolean;
+    items: DropdownMenuItemData[];
+    label?: string;
+    navigationId?: string;
+    onOpenChange?: (open: boolean) => void;
+    onSelect?: (item: DropdownMenuItemData) => void;
+    open?: boolean;
+    openOnHover?: boolean;
+    placement?: DropdownMenuPlacement;
+    trigger: ReactNode;
+};
+declare function DropdownMenuItem({ item, onSelect, showIconColumn, }: {
+    item: DropdownMenuItemData;
+    onSelect: (item: DropdownMenuItemData) => void;
+    showIconColumn?: boolean;
+}): react.JSX.Element;
+declare function DropdownMenu({ closeOnEscape, closeOnOutside, closeOnSelect, defaultOpen, elevated, items, label, navigationId, onOpenChange, onSelect, open, openOnHover, placement, trigger, }: DropdownMenuProps): react.JSX.Element;
+
+type ContextMenuTargetRegistration = {
+    getElement: () => HTMLDivElement | null;
+    items: DropdownMenuItemData[];
+    label: string;
+    onSelect?: (item: DropdownMenuItemData) => void;
+};
+type ContextMenuContextValue = {
+    activeTargetId: string | null;
+    close: () => void;
+    isOpen: boolean;
+    menuId: string;
+    openFromTarget: (targetId: string, x: number, y: number) => void;
+    registerTarget: (targetId: string, registration: ContextMenuTargetRegistration) => () => void;
+};
+declare function useContextMenu(): ContextMenuContextValue;
+type ContextMenuProviderProps = {
+    children: ReactNode;
+    closeOnEscape?: boolean;
+    closeOnOutside?: boolean;
+    closeOnSelect?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+};
+declare function ContextMenuProvider({ children, closeOnEscape, closeOnOutside, closeOnSelect, onOpenChange, open, }: ContextMenuProviderProps): react.JSX.Element;
+type ContextMenuTargetProps = {
+    children: ReactNode;
+    className?: string;
+    items: DropdownMenuItemData[];
+    label?: string;
+    onSelect?: (item: DropdownMenuItemData) => void;
+};
+declare function ContextMenuTarget({ children, className, items, label, onSelect, }: ContextMenuTargetProps): react.JSX.Element;
+declare namespace ContextMenuTarget {
+    var displayName: string;
+}
+
+declare function useOpusTheme(): Theme;
+type OpusThemeProviderProps = {
+    children: ReactNode;
+    theme: Theme;
+};
+declare function OpusThemeProvider({ children, theme }: OpusThemeProviderProps): react.JSX.Element;
+
+type CommandPaletteItem = {
+    description?: string;
+    disabled?: boolean;
+    group?: string;
+    id: string;
+    label: string;
+    shortcut?: string;
+};
+type CommandPaletteProps = {
+    closeOnSelect?: boolean;
+    dismissOnBackdrop?: boolean;
+    dismissOnEscape?: boolean;
+    emptyMessage?: string;
+    items: CommandPaletteItem[];
+    onClose: () => void;
+    onSelect: (item: CommandPaletteItem) => void;
+    open: boolean;
+    placeholder?: string;
+    query?: string;
+    onQueryChange?: (query: string) => void;
+    showDescriptions?: boolean;
+    showGroups?: boolean;
+    showShortcuts?: boolean;
+};
+declare function CommandPalette({ closeOnSelect, dismissOnBackdrop, dismissOnEscape, emptyMessage, items, onClose, onSelect, open, placeholder, query, onQueryChange, showDescriptions, showGroups, showShortcuts, }: CommandPaletteProps): react.JSX.Element | null;
+
+type AccordionProps = {
+    children: ReactNode;
+    className?: string;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    title: string;
+    value?: string;
+};
+declare function Accordion({ children, className, defaultOpen, disabled, onOpenChange, open, title, value, }: AccordionProps): react.JSX.Element;
+
+type AccordionGroupProps = {
+    children: ReactNode;
+    className?: string;
+    collapsible?: boolean;
+    defaultValue?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    type?: AccordionGroupType;
+    value?: string | string[];
+};
+declare function AccordionGroup({ children, className, collapsible, defaultValue, onValueChange, type, value, }: AccordionGroupProps): react.JSX.Element;
+
+type ShowMoreProps = {
+    children: ReactNode;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    maxLines?: number;
+    onExpandedChange?: (expanded: boolean) => void;
+    showLessLabel?: string;
+    showMoreLabel?: string;
+};
+declare function ShowMore({ children, defaultExpanded, expanded, maxLines, onExpandedChange, showLessLabel, showMoreLabel, }: ShowMoreProps): react.JSX.Element;
+
+type ToastProps = {
+    description?: string;
+    dismissible?: boolean;
+    duration?: number;
+    onDismiss?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    paused?: boolean;
+    phase?: "entering" | "visible" | "exiting";
+    status?: AlertStatus;
+    title: string;
+};
+declare function Toast({ description, dismissible, duration, onDismiss, onMouseEnter, onMouseLeave, paused, phase, status, title, }: ToastProps): react.JSX.Element;
+
+declare const DEFAULT_TOAST_DURATION_MS = 3000;
+type ShowToastOptions = {
+    description?: string;
+    dismissible?: boolean;
+    duration?: number;
+    status?: AlertStatus;
+    title: string;
+};
+type ToastContextValue = {
+    dismiss: (id: string) => void;
+    dismissAll: () => void;
+    setViewport: (position: ToastViewportPosition) => void;
+    show: (options: ShowToastOptions) => string;
+    viewport: ToastViewportPosition;
+};
+declare function useToast(): ToastContextValue;
+type ToastProviderProps = {
+    children: ReactNode;
+    horizontal?: ToastViewportPosition["horizontal"];
+    theme?: Theme;
+    vertical?: ToastViewportPosition["vertical"];
+};
+declare function ToastProvider({ children, horizontal, theme: themeProp, vertical, }: ToastProviderProps): react.JSX.Element;
+
+type TabItem = {
+    content: ReactNode;
+    disabled?: boolean;
+    label: string;
+    value: string;
+};
+type TabsProps = {
+    "aria-label"?: string;
+    defaultValue?: string;
+    fitted?: boolean;
+    items: TabItem[];
+    onValueChange?: (value: string) => void;
+    orientation?: TabsOrientation;
+    value?: string;
+    variant?: TabsVariant;
+};
+declare function Tabs({ "aria-label": ariaLabel, defaultValue, fitted, items, onValueChange, orientation, value, variant, }: TabsProps): react.JSX.Element;
+
+type CardProps = {
+    actions?: ReactNode;
+    children: ReactNode;
+    density?: SurfaceDensity;
+    eyebrow?: string;
+    footer?: ReactNode;
+    media?: ReactNode;
+    title: string;
+    tone?: SurfaceTone;
+};
+declare function Card({ actions, children, density, eyebrow, footer, media, title, tone, }: CardProps): react.JSX.Element;
+
+type StatCardTrend = "up" | "down";
+type StatCardProps = {
+    change?: string;
+    density?: SurfaceDensity;
+    icon?: ReactNode;
+    label: string;
+    trend?: StatCardTrend;
+    value: string;
+};
+declare function StatCard({ change, density, icon, label, trend, value, }: StatCardProps): react.JSX.Element;
+
+type GaugeTrend = "up" | "down";
+type GaugeVariant = "half" | "full";
+type GaugeFooterItem = {
+    color?: string;
+    label: string;
+    trend?: GaugeTrend;
+    value: string;
+};
+type GaugeProps = {
+    change?: string;
+    changeTrend?: GaugeTrend;
+    density?: SurfaceDensity;
+    footer?: GaugeFooterItem[];
+    subtitle?: string;
+    summary?: string;
+    title: string;
+    trackColor?: string;
+    value: number;
+    valueColor?: string;
+    variant?: GaugeVariant;
+};
+declare function Gauge({ change, changeTrend, density, footer, subtitle, summary, title, trackColor, value, valueColor, variant, }: GaugeProps): react.JSX.Element;
+
+type SparklineProps = {
+    height?: number;
+    label?: string;
+    palette?: "cool" | "mono" | "opus" | "warm";
+    values: number[];
+    variant?: "inline" | "labeled";
+    width?: number;
+};
+declare function Sparkline({ height, label, palette, values, variant, width, }: SparklineProps): react.JSX.Element;
+
+type ProgressRingProps = {
+    label: string;
+    max?: number;
+    value: number;
+};
+declare function ProgressRing({ label, max, value }: ProgressRingProps): react.JSX.Element;
+
+type ProgressBarProps = {
+    label: string;
+    max?: number;
+    value: number;
+};
+declare function ProgressBar({ label, max, value }: ProgressBarProps): react.JSX.Element;
+
+type SpeedometerProps = {
+    label: string;
+    max?: number;
+    value: number;
+};
+declare function Speedometer({ label, max, value }: SpeedometerProps): react.JSX.Element;
+
+type MetricTileProps = {
+    density?: SurfaceDensity;
+    icon?: ReactNode;
+    label: string;
+    sparkline?: number[];
+    value: string;
+};
+declare function MetricTile({ density, icon, label, sparkline, value }: MetricTileProps): react.JSX.Element;
+
+type StatusIndicatorState = "error" | "neutral" | "success" | "warning";
+type StatusIndicatorProps = {
+    label: string;
+    status: StatusIndicatorState;
+};
+declare function StatusIndicator({ label, status }: StatusIndicatorProps): react.JSX.Element;
+
+type TrendBadgeDirection = "down" | "up";
+type TrendBadgeProps = {
+    direction: TrendBadgeDirection;
+    value: string;
+};
+declare function TrendBadge({ direction, value }: TrendBadgeProps): react.JSX.Element;
+
+type PanelProps = {
+    actions?: ReactNode;
+    children: ReactNode;
+    density?: SurfaceDensity;
+    description?: string;
+    divided?: boolean;
+    footer?: ReactNode;
+    title: string;
+    tone?: SurfaceTone;
+};
+declare function Panel({ actions, children, density, description, divided, footer, title, tone, }: PanelProps): react.JSX.Element;
+
+type SectionBreakpoint = "mobile" | "tablet" | "desktop";
+/** @deprecated Use sidebar + columns instead. Kept for Section.Row shorthand. */
+type SectionLayoutPreset = "stack" | "2-equal" | "3-equal" | "4-equal" | "5-equal" | "sidebar-left" | "sidebar-right" | "auto-fit";
+type SectionSidebar = "none" | "left" | "right";
+type SectionColumns = 1 | 2 | 3 | 4 | 5;
+type SectionGap = "sm" | "md" | "lg";
+type SectionStackBelow = "mobile" | "tablet" | "never";
+type SectionSidebarRatio = "1:2" | "1:3" | "2:3";
+type SectionAlign = "start" | "center" | "end" | "stretch";
+type SectionJustify = "start" | "center" | "end" | "stretch";
+type SectionTemplate = Partial<Record<SectionBreakpoint, string>>;
+type SectionSpan = Partial<Record<SectionBreakpoint, number>>;
+type SectionWidth = Partial<Record<SectionBreakpoint, string>>;
+
+type SectionMaxWidth = "full" | "narrow" | "wide";
+type SectionProps = {
+    children: ReactNode;
+    className?: string;
+    description?: string;
+    gap?: SectionGap;
+    maxWidth?: SectionMaxWidth;
+    style?: CSSProperties;
+    title?: string;
+};
+type SectionRowProps = {
+    align?: SectionAlign;
+    children: ReactNode;
+    className?: string;
+    columns?: SectionColumns;
+    gap?: SectionGap;
+    justify?: SectionJustify;
+    layout?: SectionLayoutPreset;
+    sidebar?: SectionSidebar;
+    sidebarRatio?: SectionSidebarRatio;
+    stackBelow?: SectionStackBelow;
+    style?: CSSProperties;
+    template?: SectionTemplate;
+};
+type SectionColumnProps = {
+    children: ReactNode;
+    className?: string;
+    span?: SectionSpan;
+    style?: CSSProperties;
+    width?: SectionWidth;
+};
+declare function SectionRoot({ children, className, description, gap, maxWidth, style, title, }: SectionProps): react.JSX.Element;
+declare function SectionRow({ align, children, className, columns, gap, justify, layout, sidebar, sidebarRatio, stackBelow, style, template, }: SectionRowProps): react.JSX.Element;
+declare function SectionColumn({ children, className, span, style, width }: SectionColumnProps): react.JSX.Element;
+declare const Section: typeof SectionRoot & {
+    Row: typeof SectionRow;
+    Column: typeof SectionColumn;
+};
+
+type TableColumn = {
+    align?: "left" | "right" | "center";
+    key: string;
+    label: string;
+};
+type TableRow = {
+    id: string;
+    values: Record<string, ReactNode>;
+};
+type TableProps = {
+    bordered?: boolean;
+    caption?: string;
+    columns: TableColumn[];
+    density?: TableDensity;
+    emptyMessage?: string;
+    rows: TableRow[];
+    showCaption?: boolean;
+    striped?: boolean;
+};
+declare function Table({ bordered, caption, columns, density, emptyMessage, rows, showCaption, striped, }: TableProps): react.JSX.Element;
+
+type DataGridColumn = {
+    align?: "left" | "right" | "center";
+    filterable?: boolean;
+    key: string;
+    label: string;
+    resizable?: boolean;
+    sortable?: boolean;
+};
+type DataGridRowHeaderColumn = {
+    filterable?: boolean;
+    resizable?: boolean;
+    sortable?: boolean;
+};
+type DataGridRow = {
+    id: string;
+    label?: string;
+    values: Record<string, ReactNode>;
+};
+type DataGridProps = {
+    bordered?: boolean;
+    caption?: string;
+    columns: DataGridColumn[];
+    density?: TableDensity;
+    rowHeader?: DataGridRowHeaderColumn;
+    rows: DataGridRow[];
+    stickyFirstColumn?: boolean;
+    stickyHeader?: boolean;
+    striped?: boolean;
+};
+declare function DataGrid({ bordered, caption, columns, density, rowHeader, rows, stickyFirstColumn, stickyHeader, striped, }: DataGridProps): react.JSX.Element;
+
+type ChartDatum = {
+    region?: string;
+    lat?: number;
+    lng?: number;
+    close?: number;
+    end?: number;
+    group?: string;
+    high?: number;
+    label: string;
+    low?: number;
+    max?: number;
+    median?: number;
+    min?: number;
+    open?: number;
+    parent?: string;
+    q1?: number;
+    q3?: number;
+    start?: number;
+    value: number;
+    values?: number[];
+    x?: number;
+    y?: number;
+};
+type ChartSeries = {
+    id: string;
+    label: string;
+    values: number[];
+};
+type ChartProps = {
+    data?: ChartDatum[];
+    height?: number;
+    highlightLabel?: string;
+    maximise?: boolean;
+    palette?: ChartPalette;
+    series?: ChartSeries[];
+    showAxis?: boolean;
+    showGrid?: boolean;
+    showLegend?: boolean;
+    showValues?: boolean;
+    title?: string;
+    variant: ChartVariant;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+};
+declare function Chart({ data, height, highlightLabel, maximise, palette, series, showAxis, showGrid, showLegend, showValues, title, variant, xAxisLabel, yAxisLabel, }: ChartProps): react.JSX.Element;
+
+type SkeletonProps = {
+    animation?: SkeletonAnimation;
+    lines?: number;
+    variant?: SkeletonVariant;
+};
+declare function Skeleton({ animation, lines, variant, }: SkeletonProps): react.JSX.Element;
+
+type CarouselProps = {
+    ariaLabel?: string;
+    images: GalleryImage[];
+    initialIndex?: number;
+    loop?: boolean;
+    showCaptions?: boolean;
+    showPips?: boolean;
+};
+declare function Carousel({ ariaLabel, images, initialIndex, loop, showCaptions, showPips, }: CarouselProps): react.JSX.Element;
+
+type LightboxProps = {
+    dismissOnBackdrop?: boolean;
+    dismissOnEscape?: boolean;
+    image: GalleryImage;
+    open?: boolean;
+    showCaption?: boolean;
+    trigger?: ReactNode;
+    triggerLabel?: string;
+    triggerVariant?: "button" | "image";
+    onOpenChange?: (open: boolean) => void;
+};
+declare function Lightbox({ dismissOnBackdrop, dismissOnEscape, image, open, showCaption, trigger, triggerLabel, triggerVariant, onOpenChange, }: LightboxProps): react.JSX.Element;
+
+type ImageThumbnailProps = {
+    ellipsisCaption?: boolean;
+    image: GalleryImage;
+    openInLightbox?: boolean;
+    showCaption?: boolean;
+    size?: "small" | "medium" | "large";
+};
+declare function ImageThumbnail({ ellipsisCaption, image, openInLightbox, showCaption, size, }: ImageThumbnailProps): react.JSX.Element;
+
+type ImageGalleryProps = {
+    columns?: 2 | 3 | 4;
+    images: GalleryImage[];
+    showCaptions?: boolean;
+    thumbnailSize?: ImageThumbnailSize;
+};
+declare function ImageGallery({ columns, images, showCaptions, thumbnailSize, }: ImageGalleryProps): react.JSX.Element;
+
+type ModelViewerProps = {
+    asset: ModelAsset;
+    autoRotate?: boolean;
+    cameraControls?: boolean;
+    height?: "compact" | "default" | "large" | "lightbox";
+    showCaption?: boolean;
+};
+declare function ModelViewer({ asset, autoRotate, cameraControls, height, showCaption, }: ModelViewerProps): react.JSX.Element;
+
+type ModelLightboxProps = {
+    asset: ModelAsset;
+    dismissOnBackdrop?: boolean;
+    dismissOnEscape?: boolean;
+    open?: boolean;
+    showCaption?: boolean;
+    trigger?: ReactNode;
+    triggerLabel?: string;
+    onOpenChange?: (open: boolean) => void;
+};
+declare function ModelLightbox({ asset, dismissOnBackdrop, dismissOnEscape, open, showCaption, trigger, triggerLabel, onOpenChange, }: ModelLightboxProps): react.JSX.Element;
+
+type ModelThumbnailProps = {
+    asset: ModelAsset;
+    openInLightbox?: boolean;
+    showCaption?: boolean;
+    size?: ModelThumbnailSize;
+};
+declare function ModelThumbnail({ asset, openInLightbox, showCaption, size, }: ModelThumbnailProps): react.JSX.Element;
+
+type ModelGalleryProps = {
+    assets: ModelAsset[];
+    columns?: 2 | 3 | 4;
+    showCaptions?: boolean;
+    thumbnailSize?: ModelThumbnailSize;
+};
+declare function ModelGallery({ assets, columns, showCaptions, thumbnailSize, }: ModelGalleryProps): react.JSX.Element;
+
+type EmptyStateProps = {
+    actions?: ReactNode;
+    description?: string;
+    density?: SurfaceDensity;
+    icon?: string | false;
+    title: string;
+};
+declare function EmptyState({ actions, description, density, icon, title, }: EmptyStateProps): react.JSX.Element;
+
+type SidebarProps = {
+    children: ReactNode;
+    collapsed?: boolean;
+    density?: SurfaceDensity;
+    footer?: ReactNode;
+    header?: ReactNode;
+    side?: SidebarSide;
+};
+declare function Sidebar({ children, collapsed, density, footer, header, side, }: SidebarProps): react.JSX.Element;
+type SidebarHeaderProps = {
+    children?: ReactNode;
+    title: string;
+};
+declare function SidebarHeader({ children, title }: SidebarHeaderProps): react.JSX.Element;
+type SidebarNavProps = {
+    "aria-label": string;
+    children: ReactNode;
+};
+declare function SidebarNav({ "aria-label": ariaLabel, children }: SidebarNavProps): react.JSX.Element;
+type SidebarLinkProps = {
+    active?: boolean;
+    children: ReactNode;
+    href?: string;
+    onClick?: () => void;
+};
+declare function SidebarLink({ active, children, href, onClick }: SidebarLinkProps): react.JSX.Element;
+type SidebarGroupProps = {
+    children: ReactNode;
+    defaultOpen?: boolean;
+    id?: string;
+    label: string;
+};
+declare function SidebarGroup({ children, defaultOpen, id, label }: SidebarGroupProps): react.JSX.Element;
+type SidebarLayoutProps = {
+    children: ReactNode;
+    collapsed?: boolean;
+    main: ReactNode;
+    side?: SidebarSide;
+};
+declare function SidebarLayout({ children, collapsed, main, side }: SidebarLayoutProps): react.JSX.Element;
+
+type MegaMenuItem = {
+    description?: string;
+    href?: string;
+    icon?: ReactNode;
+    id: string;
+    label: string;
+    onSelect?: () => void;
+};
+type MegaMenuSection = {
+    id: string;
+    items: MegaMenuItem[];
+    title: string;
+};
+type MegaMenuFeatured = {
+    actionLabel?: string;
+    description: string;
+    eyebrow?: string;
+    title: string;
+};
+type MegaMenuConfig = {
+    featured?: MegaMenuFeatured;
+    id: string;
+    label: string;
+    sections: MegaMenuSection[];
+};
+type MegaMenuProps = {
+    activeMenu?: string;
+    closeOnEscape?: boolean;
+    closeOnOutside?: boolean;
+    density?: SurfaceDensity;
+    featured?: MegaMenuFeatured;
+    label?: string;
+    menus?: MegaMenuConfig[];
+    navigationId?: string;
+    onActiveMenuChange?: (menuId: string) => void;
+    onOpenChange?: (open: boolean) => void;
+    onSelect?: (item: MegaMenuItem) => void;
+    open?: boolean;
+    sections?: MegaMenuSection[];
+    staticPanel?: boolean;
+    triggerLabel?: string;
+};
+declare const defaultMegaMenuFeatured: MegaMenuFeatured;
+declare const defaultMegaMenuMenus: MegaMenuConfig[];
+declare const defaultMegaMenuSections: MegaMenuSection[];
+declare const defaultTopNavigationMegaMenus: MegaMenuConfig[];
+declare function MegaMenu({ activeMenu, closeOnEscape, closeOnOutside, density, featured, label, menus, navigationId, onActiveMenuChange, onOpenChange, onSelect, open, sections, staticPanel, triggerLabel, }: MegaMenuProps): react.JSX.Element;
+
+type TopNavigationSelectItem = {
+    description?: string;
+    id: string;
+    label: string;
+};
+type TopNavigationContextValue = {
+    activeMenu: string | null;
+    closeMenu: () => void;
+    closeOnEscape: boolean;
+    closeOnOutside: boolean;
+    closeOnSelect: boolean;
+    onMenuSelect?: (menuId: string, item: TopNavigationSelectItem) => void;
+    openMenu: (menuId: string) => void;
+    presentMenus: ReadonlySet<string>;
+    setMenuPresent: (menuId: string, present: boolean) => void;
+    showShortcuts: boolean;
+};
+declare function useTopNavigation(): TopNavigationContextValue | null;
+
+type TopNavigationMenuConfig = {
+    id: string;
+    items: DropdownMenuItemData[];
+    label: string;
+};
+type TopNavigationDropdownMenu = {
+    type: "dropdown";
+    id: string;
+    items: DropdownMenuItemData[];
+    label: string;
+};
+type TopNavigationMegaMenu = {
+    type: "mega";
+    featured?: MegaMenuFeatured;
+    id: string;
+    label: string;
+    sections: MegaMenuSection[];
+};
+type TopNavigationBarMenu = TopNavigationDropdownMenu | TopNavigationMegaMenu;
+declare const defaultTopNavigationMenus: TopNavigationMenuConfig[];
+declare const defaultTopNavigationBarMenus: TopNavigationBarMenu[];
+type TopNavigationMenuProps = {
+    children?: ReactNode;
+    id?: string;
+    items?: DropdownMenuItemData[];
+    label: string;
+};
+declare function TopNavigationMenu({ children, id, items, label }: TopNavigationMenuProps): react.JSX.Element;
+declare namespace TopNavigationMenu {
+    var displayName: string;
+}
+type TopNavigationProps = {
+    activeMenu?: string | null;
+    children?: ReactNode;
+    closeOnEscape?: boolean;
+    closeOnOutside?: boolean;
+    closeOnSelect?: boolean;
+    density?: SurfaceDensity;
+    menus?: TopNavigationBarMenu[];
+    onActiveMenuChange?: (menuId: string | null) => void;
+    onSelect?: (menuId: string, item: TopNavigationSelectItem) => void;
+    showShortcuts?: boolean;
+};
+declare function TopNavigation({ activeMenu, children, closeOnEscape, closeOnOutside, closeOnSelect, density, menus, onActiveMenuChange, onSelect, showShortcuts, }: TopNavigationProps): react.JSX.Element;
+
+type AccentColor = {
+    label: string;
+    value: string;
+};
+declare const accentColors: AccentColor[];
+declare function createAccentStyle(accent: string): CSSProperties;
+declare function useAccentPreference(): {
+    accent: string;
+    accentStyle: CSSProperties;
+    setAccent: (next: string) => void;
+};
+type AccentColorPickerProps = {
+    id: string;
+    label?: string;
+    labelPosition?: LabelPosition;
+    mode?: FieldMode;
+    value: string;
+    onChange: (value: string) => void;
+};
+declare function AccentColorPicker({ id, label, labelPosition, mode, onChange, value, }: AccentColorPickerProps): react.JSX.Element;
+
+type CatalogIconProps = {
+    iconName: string;
+};
+declare function CatalogIcon({ iconName }: CatalogIconProps): react.JSX.Element;
+
+type IconPickerProps = {
+    id: string;
+    label?: string;
+    labelPosition?: LabelPosition;
+    mode?: FieldMode;
+    searchPlaceholder?: string;
+    value: string;
+    onChange: (value: string) => void;
+};
+declare function IconPicker({ id, label, labelPosition, mode, onChange, searchPlaceholder, value, }: IconPickerProps): react.JSX.Element;
+
+export { type AccentColor, AccentColorPicker, Accordion, AccordionGroup, type AccordionGroupType, Alert, type AlertStatus, Button, type ButtonVariant, Card, Carousel, CatalogIcon, Chart, type ChartDatum, type ChartPalette, type ChartSeries, type ChartVariant, CheckboxField, ChipInput, ChipInputField, type ChipInputPreset, type ChipInputVariant, type ChoiceOption, type ChoiceShape, ColorField, CommandPalette, type CommandPaletteItem, ContextMenuProvider, ContextMenuTarget, DEFAULT_TOAST_DURATION_MS, DataGrid, type DataGridColumn, type DataGridRow, type DataGridRowHeaderColumn, DateField, type DateInputType, Dialog, type DialogActionSet, type DialogResult, Drawer, DrawerDefaultActions, type DrawerSide, DropdownMenu, DropdownMenuItem, type DropdownMenuItemData, type DropdownMenuPlacement, EmptyState, type EmptyStateIcon, type FieldMode, FieldShell, FileField, type GalleryImage, Gauge, type GaugeFooterItem, type GaugeTrend, type GaugeVariant, HiddenField, IconPicker, ImageGallery, ImageThumbnail, type ImageThumbnailSize, type LabelPosition, Lightbox, MegaMenu, type MegaMenuConfig, type MegaMenuFeatured, type MegaMenuItem, type MegaMenuSection, MetricTile, Modal, ModalDefaultActions, type ModalSize, type ModelAsset, ModelGallery, ModelLightbox, ModelThumbnail, type ModelThumbnailSize, ModelViewer, NumberField, OpusThemeProvider, Panel, Popover, type PopoverPlacement, ProgressBar, ProgressRing, Radio, RadioGroup, RangeField, Section, type SectionAlign, type SectionColumns, type SectionGap, type SectionJustify, type SectionLayoutPreset, type SectionSidebar, type SectionSidebarRatio, type SectionSpan, type SectionStackBelow, type SectionTemplate, type SectionWidth, SelectField, ShowMore, type ShowToastOptions, Sidebar, SidebarGroup, SidebarHeader, SidebarLayout, SidebarLink, SidebarNav, type SidebarSide, Skeleton, type SkeletonAnimation, type SkeletonVariant, Sparkline, Speedometer, StatCard, type StatCardTrend, StatusIndicator, type StatusIndicatorState, type SurfaceDensity, type SurfaceTone, SwitchField, type TabItem, Table, type TableColumn, type TableDensity, type TableRow, Tabs, type TabsOrientation, type TabsVariant, TextAreaField, TextField, type Theme, ThemeToggleField, Toast, type ToastHorizontalPosition, ToastProvider, type ToastVerticalPosition, type ToastViewportPosition, Tooltip, TopNavigation, type TopNavigationBarMenu, type TopNavigationDropdownMenu, type TopNavigationMegaMenu, TopNavigationMenu, type TopNavigationMenuConfig, type TopNavigationSelectItem, TrendBadge, type TrendBadgeDirection, accentColors, createAccentStyle, defaultMegaMenuFeatured, defaultMegaMenuMenus, defaultMegaMenuSections, defaultTopNavigationBarMenus, defaultTopNavigationMegaMenus, defaultTopNavigationMenus, fieldInputAriaProps, useAccentPreference, useContextMenu, useFieldShellAria, useOpusTheme, useToast, useTopNavigation };