opus-react 0.2.20 → 0.2.23

package/dist/index.d.ts

@@ -1,10 +1,11 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, ChangeEventHandler, CSSProperties } from 'react';
+import { ButtonHTMLAttributes, ReactNode, ChangeEventHandler, CSSProperties, RefObject } from 'react';
 
 type Theme = "light" | "dark";
 type FieldMode = "stacked" | "flagged";
 type LabelPosition = "left" | "right";
 type ChoiceShape = "round" | "square";
+type ChoiceControlSize = "lg" | "md" | "sm";
 type ChipInputVariant = "filled" | "outlined" | "soft" | "glass" | "gradient";
 type ChipInputPreset = "chip-input" | "tag-input" | "token-input";
 type ChoiceOption = {
@@ -51,7 +52,7 @@ 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 ChartVariant = "area" | "bar-horizontal" | "bar-vertical" | "box-plot" | "bubble" | "bubble-map" | "bullet" | "calendar-heatmap" | "candlestick" | "chord" | "choropleth" | "circle-packing" | "contour" | "density" | "donut" | "error-bar" | "force-directed" | "funnel" | "gantt" | "geo-map" | "grouped-bar" | "heatmap" | "hexbin" | "histogram" | "line" | "milestone-timeline" | "multi-line" | "network" | "ohlc" | "parallel-coordinates" | "pareto" | "pie" | "polar-area" | "pyramid" | "radar" | "range-area" | "range-bar" | "ridgeline" | "sankey" | "scatter" | "spline" | "stacked-area" | "stacked-bar" | "stacked-bar-100" | "stream" | "sunburst" | "surface" | "timeline" | "treemap" | "violin" | "waterfall";
 type ToastVerticalPosition = "top" | "bottom";
 type ToastHorizontalPosition = "left" | "right";
 type ToastViewportPosition = {
@@ -59,6 +60,16 @@ type ToastViewportPosition = {
     vertical: ToastVerticalPosition;
 };
 type AccordionGroupType = "single" | "multiple";
+type BadgeTone = "neutral" | "accent" | "success" | "warning" | "danger" | "info";
+type BadgeVariant = "solid" | "soft" | "outline";
+type BadgeSize = "sm" | "md";
+type AvatarSize = "sm" | "md" | "lg" | "xl";
+type AvatarShape = "circle" | "rounded";
+type DividerOrientation = "horizontal" | "vertical";
+type DividerTone = "default" | "muted" | "strong";
+type DescriptionListLayout = "stacked" | "inline";
+type ContentTimelineStatus = "default" | "success" | "warning" | "danger" | "muted";
+type StatisticTrend = "up" | "down" | "flat";
 
 type ButtonVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link";
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -104,16 +115,20 @@ declare function FieldShell({ children, className, compactControl, error, fitCon
 
 type CheckboxFieldProps = {
     checked: boolean;
+    className?: string;
     error?: string;
+    fitContent?: boolean;
     help?: string;
     id: string;
     label: string;
     labelPosition?: LabelPosition;
+    labelVisuallyHidden?: boolean;
     mode?: FieldMode;
     onChange: ChangeEventHandler<HTMLInputElement>;
     shape?: ChoiceShape;
+    size?: ChoiceControlSize;
 };
-declare function CheckboxField({ checked, error, help, id, label, labelPosition, mode, onChange, shape, }: CheckboxFieldProps): react.JSX.Element;
+declare function CheckboxField({ checked, className, error, fitContent, help, id, label, labelPosition, labelVisuallyHidden, mode, onChange, shape, size, }: CheckboxFieldProps): react.JSX.Element;
 
 type ColorFieldProps = {
     error?: string;
@@ -193,9 +208,10 @@ type RadioGroupProps = {
     name: string;
     onChange: (value: string) => void;
     shape?: ChoiceShape;
+    size?: ChoiceControlSize;
     value: string | null;
 };
-declare function RadioGroup({ children, error, help, id, label, labelPosition, mode, name, onChange, shape, value, }: RadioGroupProps): react.JSX.Element;
+declare function RadioGroup({ children, error, help, id, label, labelPosition, mode, name, onChange, shape, size, value, }: RadioGroupProps): react.JSX.Element;
 type RadioProps = {
     children?: ReactNode;
     error?: string;
@@ -235,9 +251,10 @@ type RangeFieldProps = {
     mode?: FieldMode;
     step?: number;
     value: number;
+    valueUnit?: string;
     onChange: ChangeEventHandler<HTMLInputElement>;
 };
-declare function RangeField({ error, help, id, label, labelPosition, max, min, mode, step, value, onChange, }: RangeFieldProps): react.JSX.Element;
+declare function RangeField({ error, help, id, label, labelPosition, max, min, mode, step, value, valueUnit, onChange, }: RangeFieldProps): react.JSX.Element;
 
 type SelectFieldProps = {
     error?: string;
@@ -1001,6 +1018,15 @@ type TableProps = {
 };
 declare function Table({ bordered, caption, columns, density, emptyMessage, rows, showCaption, striped, }: TableProps): react.JSX.Element;
 
+type DataGridLayout = "flat" | "grouped" | "tree" | "pivot";
+
+type DataGridPivotConfig = {
+    aggregator?: "sum" | "avg" | "count";
+    columns: string[];
+    rows: string[];
+    values: string[];
+};
+
 type DataGridColumn = {
     align?: "left" | "right" | "center";
     filterable?: boolean;
@@ -1015,22 +1041,37 @@ type DataGridRowHeaderColumn = {
     sortable?: boolean;
 };
 type DataGridRow = {
+    children?: DataGridRow[];
     id: string;
     label?: string;
     values: Record<string, ReactNode>;
 };
+
 type DataGridProps = {
     bordered?: boolean;
     caption?: string;
     columns: DataGridColumn[];
+    defaultExpandedIds?: string[];
     density?: TableDensity;
+    detailExpandedIds?: string[];
+    getDetailContent?: (row: DataGridRow) => ReactNode;
+    groupBy?: string;
+    hasMore?: boolean;
+    layout?: DataGridLayout;
+    loadingMore?: boolean;
+    onExpandedChange?: (ids: string[]) => void;
+    onLoadMore?: () => void;
+    pivot?: DataGridPivotConfig;
     rowHeader?: DataGridRowHeaderColumn;
+    rowHeight?: number;
     rows: DataGridRow[];
     stickyFirstColumn?: boolean;
     stickyHeader?: boolean;
     striped?: boolean;
+    viewportHeight?: number;
+    virtualized?: boolean;
 };
-declare function DataGrid({ bordered, caption, columns, density, rowHeader, rows, stickyFirstColumn, stickyHeader, striped, }: DataGridProps): react.JSX.Element;
+declare function DataGrid({ bordered, caption, columns, defaultExpandedIds, density, detailExpandedIds, getDetailContent, groupBy, hasMore, layout, loadingMore, onExpandedChange, onLoadMore, pivot, rowHeader, rowHeight, rows, stickyFirstColumn, stickyHeader, striped, viewportHeight, virtualized, }: DataGridProps): react.JSX.Element;
 
 type ChartDatum = {
     region?: string;
@@ -1038,6 +1079,8 @@ type ChartDatum = {
     lng?: number;
     close?: number;
     end?: number;
+    /** Error / uncertainty magnitude used by error-bar charts when high/low are omitted. */
+    error?: number;
     group?: string;
     high?: number;
     label: string;
@@ -1050,6 +1093,8 @@ type ChartDatum = {
     q1?: number;
     q3?: number;
     start?: number;
+    /** Target value for bullet charts. */
+    target?: number;
     value: number;
     values?: number[];
     x?: number;
@@ -1148,11 +1193,12 @@ declare function ModelLightbox({ asset, dismissOnBackdrop, dismissOnEscape, open
 
 type ModelThumbnailProps = {
     asset: ModelAsset;
+    fill?: boolean;
     openInLightbox?: boolean;
     showCaption?: boolean;
     size?: ModelThumbnailSize;
 };
-declare function ModelThumbnail({ asset, openInLightbox, showCaption, size, }: ModelThumbnailProps): react.JSX.Element;
+declare function ModelThumbnail({ asset, fill, openInLightbox, showCaption, size, }: ModelThumbnailProps): react.JSX.Element;
 
 type ModelGalleryProps = {
     assets: ModelAsset[];
@@ -1171,6 +1217,793 @@ type EmptyStateProps = {
 };
 declare function EmptyState({ actions, description, density, icon, title, }: EmptyStateProps): react.JSX.Element;
 
+type BadgeProps = {
+    dot?: boolean;
+    label: string;
+    size?: BadgeSize;
+    tone?: BadgeTone;
+    variant?: BadgeVariant;
+};
+declare function Badge({ dot, label, size, tone, variant, }: BadgeProps): react.JSX.Element;
+
+type DividerProps = {
+    label?: string;
+    orientation?: DividerOrientation;
+    tone?: DividerTone;
+};
+declare function Divider({ label, orientation, tone, }: DividerProps): react.JSX.Element;
+
+type AvatarProps = {
+    name: string;
+    shape?: AvatarShape;
+    size?: AvatarSize;
+    src?: string;
+};
+declare function Avatar({ name, shape, size, src, }: AvatarProps): react.JSX.Element;
+
+type AvatarGroupItem = {
+    name: string;
+    src?: string;
+};
+type AvatarGroupProps = {
+    items: AvatarGroupItem[];
+    max?: number;
+    size?: AvatarSize;
+};
+declare function AvatarGroup({ items, max, size }: AvatarGroupProps): react.JSX.Element;
+
+type StatisticProps = {
+    label: string;
+    prefix?: string;
+    suffix?: string;
+    trend?: StatisticTrend;
+    trendLabel?: string;
+    value: string;
+};
+declare function Statistic({ label, prefix, suffix, trend, trendLabel, value, }: StatisticProps): react.JSX.Element;
+
+type ListItem = {
+    description?: string;
+    icon?: string;
+    meta?: string;
+    title: string;
+};
+type ListProps = {
+    density?: SurfaceDensity;
+    items: ListItem[];
+    ordered?: boolean;
+};
+declare function List({ density, items, ordered }: ListProps): react.JSX.Element;
+
+type DescriptionListItem = {
+    details: string;
+    term: string;
+};
+type DescriptionListProps = {
+    items: DescriptionListItem[];
+    layout?: DescriptionListLayout;
+};
+declare function DescriptionList({ items, layout, }: DescriptionListProps): react.JSX.Element;
+
+type PropertyGridItem = {
+    copyable?: boolean;
+    label: string;
+    value: string;
+};
+type PropertyGridProps = {
+    items: PropertyGridItem[];
+};
+declare function PropertyGrid({ items }: PropertyGridProps): react.JSX.Element;
+
+type StackAlign = "start" | "center" | "end" | "stretch";
+type StackJustify = "start" | "center" | "end" | "between" | "around";
+type StackDirection = "row" | "column";
+type StackProps = {
+    align?: StackAlign;
+    children: ReactNode;
+    className?: string;
+    direction?: StackDirection;
+    gap?: number | string;
+    justify?: StackJustify;
+    style?: CSSProperties;
+    wrap?: boolean;
+};
+declare function Stack({ align, children, className, direction, gap, justify, style, wrap, }: StackProps): react.JSX.Element;
+
+type ColumnsDirection = "column" | "row";
+type ColumnsProps = {
+    children: ReactNode;
+    className?: string;
+    columns?: number;
+    direction?: ColumnsDirection;
+    gap?: number | string;
+    style?: CSSProperties;
+};
+declare function Columns({ children, className, columns, direction, gap, style, }: ColumnsProps): react.JSX.Element;
+
+type GridProps = {
+    children: ReactNode;
+    className?: string;
+    columns?: number | string;
+    gap?: number | string;
+    minItemWidth?: number | string;
+    style?: CSSProperties;
+};
+declare function Grid({ children, className, columns, gap, minItemWidth, style, }: GridProps): react.JSX.Element;
+
+type SplitterOrientation = "horizontal" | "vertical";
+type SplitterProps = {
+    children: [ReactNode, ReactNode];
+    className?: string;
+    defaultSize?: number;
+    minSize?: number;
+    onSizeChange?: (size: number) => void;
+    orientation?: SplitterOrientation;
+    size?: number;
+    style?: CSSProperties;
+};
+declare function Splitter({ children, className, defaultSize, minSize, onSizeChange, orientation, size: controlledSize, style, }: SplitterProps): react.JSX.Element;
+
+type ResizablePanelProps = {
+    children: ReactNode;
+    className?: string;
+    defaultHeight?: number;
+    defaultWidth?: number;
+    maxHeight?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    minWidth?: number;
+    onResize?: (size: {
+        height: number;
+        width: number;
+    }) => void;
+    style?: CSSProperties;
+};
+declare function ResizablePanel({ children, className, defaultHeight, defaultWidth, maxHeight, maxWidth, minHeight, minWidth, onResize, style, }: ResizablePanelProps): react.JSX.Element;
+
+type DockLayoutProps = {
+    bottom?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    left?: ReactNode;
+    right?: ReactNode;
+    style?: CSSProperties;
+    top?: ReactNode;
+};
+declare function DockLayout({ bottom, children, className, left, right, style, top, }: DockLayoutProps): react.JSX.Element;
+
+type ScrollAreaProps = {
+    children: ReactNode;
+    className?: string;
+    maxHeight?: number | string;
+    orientation?: "vertical" | "horizontal" | "both";
+    style?: CSSProperties;
+};
+declare function ScrollArea({ children, className, maxHeight, orientation, style, }: ScrollAreaProps): react.JSX.Element;
+
+type AspectRatioProps = {
+    children: ReactNode;
+    className?: string;
+    ratio?: number | string;
+    style?: CSSProperties;
+};
+declare function AspectRatio({ children, className, ratio, style }: AspectRatioProps): react.JSX.Element;
+
+type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
+type ContainerProps = {
+    children: ReactNode;
+    className?: string;
+    padded?: boolean;
+    size?: ContainerSize;
+    style?: CSSProperties;
+};
+declare function Container({ children, className, padded, size, style, }: ContainerProps): react.JSX.Element;
+
+type SpacerProps = {
+    axis?: "x" | "y" | "both";
+    className?: string;
+    flex?: boolean | number;
+    size?: number | string;
+    style?: CSSProperties;
+};
+declare function Spacer({ axis, className, flex, size, style }: SpacerProps): react.JSX.Element;
+
+type BreadcrumbItem = {
+    href?: string;
+    id: string;
+    label: string;
+};
+type BreadcrumbProps = {
+    items: BreadcrumbItem[];
+    onNavigate?: (id: string) => void;
+    separator?: ReactNode;
+};
+declare function Breadcrumb({ items, onNavigate, separator }: BreadcrumbProps): react.JSX.Element;
+
+type PaginationProps = {
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    siblingCount?: number;
+};
+declare function Pagination({ page, pageCount, onPageChange, siblingCount }: PaginationProps): react.JSX.Element;
+
+type PageHeaderProps = {
+    actions?: ReactNode;
+    breadcrumbs?: ReactNode;
+    description?: string;
+    eyebrow?: string;
+    title: string;
+};
+declare function PageHeader({ actions, breadcrumbs, description, eyebrow, title }: PageHeaderProps): react.JSX.Element;
+
+type ToolbarProps = {
+    children: ReactNode;
+    className?: string;
+    dense?: boolean;
+    end?: ReactNode;
+    label?: string;
+    start?: ReactNode;
+};
+declare function Toolbar({ children, className, dense, end, label, start }: ToolbarProps): react.JSX.Element;
+
+type BottomNavigationItem = {
+    href?: string;
+    icon?: ReactNode;
+    id: string;
+    label: string;
+};
+type BottomNavigationProps = {
+    items: BottomNavigationItem[];
+    onChange?: (id: string) => void;
+    value: string;
+};
+declare function BottomNavigation({ items, onChange, value }: BottomNavigationProps): react.JSX.Element;
+
+type NavigationRailItem = {
+    href?: string;
+    icon?: ReactNode;
+    id: string;
+    label: string;
+};
+type NavigationRailProps = {
+    collapsed?: boolean;
+    items: NavigationRailItem[];
+    onChange?: (id: string) => void;
+    value: string;
+};
+declare function NavigationRail({ collapsed, items, onChange, value }: NavigationRailProps): react.JSX.Element;
+
+type SplitButtonAction = {
+    disabled?: boolean;
+    id: string;
+    label: string;
+};
+type SplitButtonProps = {
+    actions: SplitButtonAction[];
+    children: ReactNode;
+    disabled?: boolean;
+    onActionSelect?: (id: string) => void;
+    onClick?: () => void;
+    variant?: ButtonVariant;
+};
+declare function SplitButton({ actions, children, disabled, onActionSelect, onClick, variant, }: SplitButtonProps): react.JSX.Element;
+
+type FloatingActionButtonSize = "sm" | "md" | "lg";
+type FloatingActionButtonPosition = "end" | "start" | "inline";
+type FloatingActionButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    extended?: boolean;
+    icon?: ReactNode;
+    label: string;
+    position?: FloatingActionButtonPosition;
+    size?: FloatingActionButtonSize;
+};
+declare function FloatingActionButton({ className, extended, icon, label, position, size, type, ...props }: FloatingActionButtonProps): react.JSX.Element;
+
+type TileTone = "purple" | "blue";
+type TileProps = {
+    className?: string;
+    href?: string;
+    icon: string;
+    label: string;
+    onClick?: () => void;
+    role?: string;
+    tone?: TileTone;
+    withGradients?: boolean;
+};
+declare function Tile({ className, href, icon, label, onClick, role, tone, withGradients, }: TileProps): react.JSX.Element;
+
+type TilesLayout = "fill" | "fixed";
+type TileItem = {
+    href?: string;
+    icon: string;
+    id: string;
+    label: string;
+    onClick?: () => void;
+    tone?: TileTone;
+};
+type TilesProps = {
+    className?: string;
+    items: TileItem[];
+    layout?: TilesLayout;
+};
+declare function Tiles({ className, items, layout }: TilesProps): react.JSX.Element;
+
+type StatTileTrend = "up" | "down";
+type StatTileTone = "purple" | "blue";
+type StatTileProps = {
+    className?: string;
+    comparison?: string;
+    icon: string;
+    label: string;
+    onClick?: () => void;
+    role?: string;
+    tone?: StatTileTone;
+    trend?: StatTileTrend;
+    trendValue?: string;
+    value: string;
+};
+declare function StatTile({ className, comparison, icon, label, onClick, role, tone, trend, trendValue, value, }: StatTileProps): react.JSX.Element;
+
+type StatTileItem = {
+    comparison?: string;
+    icon: string;
+    id: string;
+    label: string;
+    onClick?: () => void;
+    tone?: StatTileTone;
+    trend?: StatTileTrend;
+    trendValue?: string;
+    value: string;
+};
+type StatTilesProps = {
+    className?: string;
+    items: StatTileItem[];
+    layout?: TilesLayout;
+};
+declare function StatTiles({ className, items, layout }: StatTilesProps): react.JSX.Element;
+
+type PipelineStage = {
+    displayValue: string;
+    id: string;
+    label: string;
+    percentage: number;
+    value: number;
+};
+type PipelineOverviewProps = {
+    className?: string;
+    onPeriodChange?: (period: string) => void;
+    period?: string;
+    periodOptions?: string[];
+    stages: PipelineStage[];
+    totalLabel?: string;
+    totalValue: string;
+};
+declare function PipelineOverview({ className, onPeriodChange, period, periodOptions, stages, totalLabel, totalValue, }: PipelineOverviewProps): react.JSX.Element;
+
+type DealsOverTimePalette = "blue" | "purple";
+
+type DealsOverTimePoint = {
+    label: string;
+    tooltipLabel?: string;
+    value: number;
+};
+type DealsOverTimeProps = {
+    className?: string;
+    data: DealsOverTimePoint[];
+    maxValue?: number;
+    onPeriodChange?: (period: string) => void;
+    palette?: DealsOverTimePalette;
+    period?: string;
+    periodOptions?: string[];
+    title?: string;
+    valueLabel?: string;
+};
+declare function DealsOverTime({ className, data, maxValue, onPeriodChange, palette, period, periodOptions, title, valueLabel, }: DealsOverTimeProps): react.JSX.Element;
+
+type UpcomingTaskItem = {
+    completed?: boolean;
+    id: string;
+    subtitle: string;
+    time: string;
+    title: string;
+};
+type UpcomingTasksProps = {
+    checkboxSize?: "lg" | "md" | "sm";
+    className?: string;
+    footerHref?: string;
+    footerLabel?: string;
+    onFooterClick?: () => void;
+    onTaskClick?: (task: UpcomingTaskItem) => void;
+    onTaskCompleteChange?: (task: UpcomingTaskItem, completed: boolean) => void;
+    tasks: UpcomingTaskItem[];
+    title?: string;
+};
+declare function UpcomingTasks({ checkboxSize, className, footerHref, footerLabel, onFooterClick, onTaskClick, onTaskCompleteChange, tasks, title, }: UpcomingTasksProps): react.JSX.Element;
+
+type RecentActivityIconTone = "blue" | "green" | "orange";
+type RecentActivityItem = {
+    icon: string;
+    iconTone: RecentActivityIconTone;
+    id: string;
+    subtitle: string;
+    time: string;
+    title: string;
+};
+type RecentActivityProps = {
+    className?: string;
+    footerHref?: string;
+    footerLabel?: string;
+    items: RecentActivityItem[];
+    onFooterClick?: () => void;
+    onItemClick?: (item: RecentActivityItem) => void;
+    title?: string;
+};
+declare function RecentActivity({ className, footerHref, footerLabel, items, onFooterClick, onItemClick, title, }: RecentActivityProps): react.JSX.Element;
+
+type TopPerformingUserItem = {
+    displayValue: string;
+    id: string;
+    name: string;
+    src?: string;
+    value: number;
+};
+type TopPerformingUsersProps = {
+    className?: string;
+    footerHref?: string;
+    footerLabel?: string;
+    onFooterClick?: () => void;
+    onPersonClick?: (person: TopPerformingUserItem) => void;
+    title?: string;
+    users: TopPerformingUserItem[];
+};
+declare function TopPerformingUsers({ className, footerHref, footerLabel, onFooterClick, onPersonClick, title, users, }: TopPerformingUsersProps): react.JSX.Element;
+
+type DashboardContentContainerWidth = "full" | "widget";
+type DashboardContentContainerProps = {
+    children: ReactNode;
+    className?: string;
+    "data-component"?: string;
+    title?: string;
+    width?: DashboardContentContainerWidth;
+};
+declare function DashboardContentContainer({ children, className, "data-component": dataComponent, title, width, }: DashboardContentContainerProps): react.JSX.Element;
+
+type PropertyInspectorValue = string | number | boolean | null | undefined | {
+    options: string[];
+    value: string;
+};
+type PropertyInspectorItem = {
+    group?: string;
+    id: string;
+    label: string;
+    readOnly?: boolean;
+    value: PropertyInspectorValue;
+};
+type PropertyInspectorProps = {
+    items: PropertyInspectorItem[];
+    onChange?: (id: string, value: PropertyInspectorValue) => void;
+    searchable?: boolean;
+};
+declare function PropertyInspector({ items, onChange, searchable }: PropertyInspectorProps): react.JSX.Element;
+
+type FilterOperator = "eq" | "neq" | "contains" | "gt" | "lt" | "empty";
+type FilterCondition = {
+    field: string;
+    id: string;
+    operator: FilterOperator;
+    value: string;
+};
+type FilterBuilderProps = {
+    conditions: FilterCondition[];
+    fields: string[];
+    onChange: (conditions: FilterCondition[]) => void;
+};
+declare function FilterBuilder({ conditions, fields, onChange }: FilterBuilderProps): react.JSX.Element;
+
+type QueryOperator = "eq" | "neq" | "contains" | "gt" | "lt" | "in";
+type QueryCombinator = "and" | "or";
+type QueryRule = {
+    field: string;
+    id: string;
+    operator: QueryOperator;
+    value: string;
+};
+type QueryGroup = {
+    combinator: QueryCombinator;
+    id: string;
+    rules: QueryRule[];
+};
+type QueryBuilderProps = {
+    fields: string[];
+    group: QueryGroup;
+    onChange: (group: QueryGroup) => void;
+};
+declare function QueryBuilder({ fields, group, onChange }: QueryBuilderProps): react.JSX.Element;
+
+type RuleEffect = "allow" | "deny" | "notify" | "route";
+type RuleDefinition = {
+    conditions: string;
+    effect: RuleEffect;
+    enabled: boolean;
+    id: string;
+    name: string;
+    priority: number;
+};
+type RuleBuilderProps = {
+    onChange: (rules: RuleDefinition[]) => void;
+    rules: RuleDefinition[];
+};
+declare function RuleBuilder({ onChange, rules }: RuleBuilderProps): react.JSX.Element;
+
+type PermissionLevel = "none" | "read" | "write" | "admin";
+type PermissionsMatrixProps = {
+    onChange: (role: string, resource: string, level: PermissionLevel) => void;
+    permissions: Record<string, Record<string, PermissionLevel>>;
+    resources: string[];
+    roles: string[];
+};
+declare function PermissionsMatrix({ onChange, permissions, resources, roles }: PermissionsMatrixProps): react.JSX.Element;
+
+type DualListItem = {
+    id: string;
+    label: string;
+};
+type DualListBuilderProps = {
+    available: DualListItem[];
+    availableTitle?: string;
+    onChange: (selectedIds: string[]) => void;
+    selectedIds: string[];
+    selectedTitle?: string;
+};
+declare function DualListBuilder({ available, availableTitle, onChange, selectedIds, selectedTitle, }: DualListBuilderProps): react.JSX.Element;
+
+type SchedulerEvent = {
+    day: number;
+    id: string;
+    startHour: number;
+    title: string;
+    durationHours?: number;
+    tone?: "accent" | "success" | "warning" | "danger";
+};
+type SchedulerProps = {
+    days?: string[];
+    endHour?: number;
+    events: SchedulerEvent[];
+    startHour?: number;
+};
+declare function Scheduler({ days, endHour, events, startHour, }: SchedulerProps): react.JSX.Element;
+
+type KanbanCard = {
+    id: string;
+    title: string;
+    meta?: string;
+    tone?: "default" | "accent" | "success" | "warning" | "danger";
+};
+type KanbanColumn = {
+    id: string;
+    title: string;
+    cardIds: string[];
+};
+type KanbanBoardProps = {
+    cards: Record<string, KanbanCard>;
+    columns: KanbanColumn[];
+    onChange?: (columns: KanbanColumn[]) => void;
+};
+declare function KanbanBoard({ cards, columns, onChange }: KanbanBoardProps): react.JSX.Element;
+
+type CalendarEvent = {
+    date: string;
+    id: string;
+    title: string;
+    tone?: "accent" | "success" | "warning" | "danger";
+};
+type CalendarProps = {
+    events?: CalendarEvent[];
+    month?: number;
+    onSelectDate?: (date: string) => void;
+    selectedDate?: string;
+    year?: number;
+};
+declare function Calendar({ events, month: controlledMonth, onSelectDate, selectedDate, year: controlledYear, }: CalendarProps): react.JSX.Element;
+
+type ResourcePlannerItem = {
+    end: number;
+    id: string;
+    label: string;
+    resourceId: string;
+    start: number;
+    tone?: "accent" | "success" | "warning" | "danger";
+};
+type ResourcePlannerResource = {
+    id: string;
+    label: string;
+};
+type ResourcePlannerProps = {
+    endHour?: number;
+    items: ResourcePlannerItem[];
+    resources: ResourcePlannerResource[];
+    startHour?: number;
+};
+declare function ResourcePlanner({ endHour, items, resources, startHour, }: ResourcePlannerProps): react.JSX.Element;
+
+type ContentTimelineItem = {
+    description?: string;
+    status?: ContentTimelineStatus;
+    time?: string;
+    title: string;
+};
+type ContentTimelineProps = {
+    items: ContentTimelineItem[];
+};
+declare function ContentTimeline({ items }: ContentTimelineProps): react.JSX.Element;
+
+type TreeViewNode = {
+    children?: TreeViewNode[];
+    id: string;
+    label: string;
+};
+type TreeViewProps = {
+    defaultExpandedIds?: string[];
+    nodes: TreeViewNode[];
+};
+declare function TreeView({ defaultExpandedIds, nodes }: TreeViewProps): react.JSX.Element;
+
+type MasonryGridItem = {
+    body?: string;
+    height?: number;
+    title: string;
+};
+type MasonryGridProps = {
+    columns?: number;
+    gap?: number;
+    items: MasonryGridItem[];
+};
+declare function MasonryGrid({ columns, gap, items }: MasonryGridProps): react.JSX.Element;
+
+type JsonViewerProps = {
+    collapsedDepth?: number;
+    value: unknown;
+};
+declare function JsonViewer({ collapsedDepth, value }: JsonViewerProps): react.JSX.Element;
+
+type IconSize = "sm" | "md" | "lg";
+type IconTone = "default" | "muted" | "accent" | "success" | "warning" | "danger";
+type IconProps = {
+    label?: string;
+    name: string;
+    size?: IconSize;
+    tone?: IconTone;
+};
+declare function Icon({ label, name, size, tone }: IconProps): react.JSX.Element;
+
+type SpinnerSize = "sm" | "md" | "lg";
+type SpinnerTone = "accent" | "muted" | "inverse";
+type SpinnerProps = {
+    label?: string;
+    size?: SpinnerSize;
+    tone?: SpinnerTone;
+};
+declare function Spinner({ label, size, tone }: SpinnerProps): react.JSX.Element;
+
+type PortalHostContextValue = {
+    container: HTMLElement | null;
+};
+declare function usePortalHost(): PortalHostContextValue;
+type PortalHostProps = {
+    children: ReactNode;
+    id?: string;
+};
+declare function PortalHost({ children, id }: PortalHostProps): react.JSX.Element;
+type PortalProps = {
+    children: ReactNode;
+    container?: HTMLElement | null;
+    disabled?: boolean;
+};
+declare function Portal({ children, container, disabled }: PortalProps): react.JSX.Element | null;
+
+type VisuallyHiddenProps = {
+    as?: "span" | "div";
+    children: ReactNode;
+};
+declare function VisuallyHidden({ as, children }: VisuallyHiddenProps): react.JSX.Element;
+
+type FocusTrapProps = {
+    active?: boolean;
+    children: ReactNode;
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    restoreFocus?: boolean;
+};
+declare function FocusTrap({ active, children, initialFocusRef, restoreFocus, }: FocusTrapProps): react.JSX.Element;
+
+type KeyboardShortcutSize = "sm" | "md";
+type KeyboardShortcutProps = {
+    keys: string[];
+    size?: KeyboardShortcutSize;
+};
+declare function KeyboardShortcut({ keys, size }: KeyboardShortcutProps): react.JSX.Element;
+
+type HotkeyCombo = {
+    alt?: boolean;
+    ctrl?: boolean;
+    description?: string;
+    enabled?: boolean;
+    id: string;
+    key: string;
+    meta?: boolean;
+    shift?: boolean;
+};
+type HotkeyHandler = () => void;
+type HotkeyManagerContextValue = {
+    register: (combo: HotkeyCombo, handler: HotkeyHandler) => () => void;
+    shortcuts: HotkeyCombo[];
+};
+type HotkeyManagerProps = {
+    children: ReactNode;
+    enabled?: boolean;
+};
+declare function HotkeyManager({ children, enabled }: HotkeyManagerProps): react.JSX.Element;
+declare function useHotkey(combo: HotkeyCombo, handler: HotkeyHandler): void;
+declare function useHotkeyManager(): HotkeyManagerContextValue;
+
+type CopyButtonProps = {
+    children?: ReactNode;
+    copiedLabel?: string;
+    label?: string;
+    resetMs?: number;
+    value: string;
+    variant?: ButtonVariant;
+    onCopied?: () => void;
+};
+declare function CopyButton({ children, copiedLabel, label, resetMs, value, variant, onCopied, }: CopyButtonProps): react.JSX.Element;
+
+type ClipboardContextValue = {
+    lastCopied: string | null;
+    readText: () => Promise<string>;
+    writeText: (value: string) => Promise<void>;
+};
+type ClipboardProviderProps = {
+    children: ReactNode;
+};
+declare function ClipboardProvider({ children }: ClipboardProviderProps): react.JSX.Element;
+declare function useClipboard(): ClipboardContextValue;
+/** Catalog-facing alias — same as ClipboardProvider. */
+declare function Clipboard({ children }: ClipboardProviderProps): react.JSX.Element;
+
+type ThemeSwitcherProps = {
+    id?: string;
+    label?: string;
+    value: Theme;
+    onChange: (theme: Theme) => void;
+};
+/** Compact docs-friendly theme switcher built on ThemeToggleField. */
+declare function ThemeSwitcher({ id, label, value, onChange, }: ThemeSwitcherProps): react.JSX.Element;
+
+type ElementSize = {
+    height: number;
+    width: number;
+};
+type ResizeObserverProps = {
+    children: (size: ElementSize) => ReactNode;
+    className?: string;
+    onResize?: (size: ElementSize) => void;
+};
+declare function ResizeObserver({ children, className, onResize }: ResizeObserverProps): react.JSX.Element;
+declare function useResizeObserver(targetRef: RefObject<HTMLElement | null>): ElementSize;
+
+type IntersectionObserverProps = {
+    children: (isIntersecting: boolean) => ReactNode;
+    className?: string;
+    rootMargin?: string;
+    threshold?: number | number[];
+    onChange?: (isIntersecting: boolean) => void;
+};
+declare function IntersectionObserver({ children, className, rootMargin, threshold, onChange, }: IntersectionObserverProps): react.JSX.Element;
+declare function useIntersectionObserver(targetRef: RefObject<HTMLElement | null>, options?: {
+    rootMargin?: string;
+    threshold?: number | number[];
+}): boolean;
+
 type SidebarProps = {
     children: ReactNode;
     collapsed?: boolean;
@@ -1374,4 +2207,4 @@ type SankeyLinkDef = {
 };
 declare const demoSankeyLinks: SankeyLinkDef[];
 
-export { type AccentColor, AccentColorPicker, Accordion, AccordionGroup, type AccordionGroupType, Alert, type AlertStatus, Button, type ButtonVariant, Card, Carousel, CascaderField, type CascaderOption, 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, CountryPickerField, 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, FilterSelectField, type FilterSelectGroup, 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, MultiSelectField, NumberField, OpusThemeProvider, Panel, type PasswordRequirement, PasswordStrengthField, type PhoneCountry, PhoneNumberField, Popover, type PopoverPlacement, ProgressBar, ProgressRing, Radio, RadioGroup, RangeField, RatingField, type RatingVariant, RichTextField, Section, type SectionAlign, type SectionColumns, type SectionGap, type SectionJustify, type SectionLayoutPreset, type SectionSidebar, type SectionSidebarRatio, type SectionSpan, type SectionStackBelow, type SectionTemplate, type SectionWidth, SegmentedControlField, SelectField, ShowMore, type ShowToastOptions, Sidebar, SidebarGroup, SidebarHeader, SidebarLayout, SidebarLink, SidebarNav, type SidebarSide, Skeleton, type SkeletonAnimation, type SkeletonVariant, SliderRangeField, 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, TransferListField, TreeSelectField, type TreeSelectNode, TrendBadge, type TrendBadgeDirection, accentColors, cartesianSpecializedVariants, countryCodeToFlag, createAccentStyle, defaultMegaMenuFeatured, defaultMegaMenuMenus, defaultMegaMenuSections, defaultTopNavigationBarMenus, defaultTopNavigationMegaMenus, defaultTopNavigationMenus, demoSankeyLinks, fieldInputAriaProps, countries as phoneCountries, useAccentPreference, useContextMenu, useFieldShellAria, useOpusTheme, useToast, useTopNavigation, worldMapRegionIds };
+export { type AccentColor, AccentColorPicker, Accordion, AccordionGroup, type AccordionGroupType, Alert, type AlertStatus, AspectRatio, type AspectRatioProps, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarShape, type AvatarSize, Badge, type BadgeSize, type BadgeTone, type BadgeVariant, BottomNavigation, type BottomNavigationItem, type BottomNavigationProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonVariant, Calendar, type CalendarEvent, type CalendarProps, Card, Carousel, CascaderField, type CascaderOption, CatalogIcon, Chart, type ChartDatum, type ChartPalette, type ChartSeries, type ChartVariant, CheckboxField, ChipInput, ChipInputField, type ChipInputPreset, type ChipInputVariant, type ChoiceControlSize, type ChoiceOption, type ChoiceShape, Clipboard, ClipboardProvider, ColorField, Columns, type ColumnsDirection, type ColumnsProps, CommandPalette, type CommandPaletteItem, Container, type ContainerProps, type ContainerSize, ContentTimeline, type ContentTimelineItem, type ContentTimelineStatus, ContextMenuProvider, ContextMenuTarget, CopyButton, CountryPickerField, DEFAULT_TOAST_DURATION_MS, DashboardContentContainer, type DashboardContentContainerProps, type DashboardContentContainerWidth, DataGrid, type DataGridColumn, type DataGridLayout, type DataGridPivotConfig, type DataGridRow, type DataGridRowHeaderColumn, DateField, type DateInputType, DealsOverTime, type DealsOverTimePoint, type DealsOverTimeProps, DescriptionList, type DescriptionListItem, type DescriptionListLayout, Dialog, type DialogActionSet, type DialogResult, Divider, type DividerOrientation, type DividerTone, DockLayout, type DockLayoutProps, Drawer, DrawerDefaultActions, type DrawerSide, DropdownMenu, DropdownMenuItem, type DropdownMenuItemData, type DropdownMenuPlacement, DualListBuilder, type DualListBuilderProps, type DualListItem, type ElementSize, EmptyState, type EmptyStateIcon, type FieldMode, FieldShell, FileField, FilterBuilder, type FilterBuilderProps, type FilterCondition, type FilterOperator, FilterSelectField, type FilterSelectGroup, FloatingActionButton, type FloatingActionButtonPosition, type FloatingActionButtonProps, type FloatingActionButtonSize, FocusTrap, type GalleryImage, Gauge, type GaugeFooterItem, type GaugeTrend, type GaugeVariant, Grid, type GridProps, HiddenField, type HotkeyCombo, HotkeyManager, Icon, IconPicker, type IconSize, type IconTone, ImageGallery, ImageThumbnail, type ImageThumbnailSize, IntersectionObserver, JsonViewer, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, KeyboardShortcut, type KeyboardShortcutSize, type LabelPosition, Lightbox, List, type ListItem, MasonryGrid, type MasonryGridItem, MegaMenu, type MegaMenuConfig, type MegaMenuFeatured, type MegaMenuItem, type MegaMenuSection, MetricTile, Modal, ModalDefaultActions, type ModalSize, type ModelAsset, ModelGallery, ModelLightbox, ModelThumbnail, type ModelThumbnailSize, ModelViewer, MultiSelectField, NavigationRail, type NavigationRailItem, type NavigationRailProps, NumberField, OpusThemeProvider, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Panel, type PasswordRequirement, PasswordStrengthField, type PermissionLevel, PermissionsMatrix, type PermissionsMatrixProps, type PhoneCountry, PhoneNumberField, PipelineOverview, type PipelineOverviewProps, type PipelineStage, Popover, type PopoverPlacement, Portal, PortalHost, ProgressBar, ProgressRing, PropertyGrid, type PropertyGridItem, PropertyInspector, type PropertyInspectorItem, type PropertyInspectorValue, QueryBuilder, type QueryBuilderProps, type QueryCombinator, type QueryGroup, type QueryOperator, type QueryRule, Radio, RadioGroup, RangeField, RatingField, type RatingVariant, RecentActivity, type RecentActivityItem, type RecentActivityProps, ResizablePanel, type ResizablePanelProps, ResizeObserver, ResourcePlanner, type ResourcePlannerItem, type ResourcePlannerProps, type ResourcePlannerResource, RichTextField, RuleBuilder, type RuleBuilderProps, type RuleDefinition, type RuleEffect, Scheduler, type SchedulerEvent, type SchedulerProps, ScrollArea, type ScrollAreaProps, Section, type SectionAlign, type SectionColumns, type SectionGap, type SectionJustify, type SectionLayoutPreset, type SectionSidebar, type SectionSidebarRatio, type SectionSpan, type SectionStackBelow, type SectionTemplate, type SectionWidth, SegmentedControlField, SelectField, ShowMore, type ShowToastOptions, Sidebar, SidebarGroup, SidebarHeader, SidebarLayout, SidebarLink, SidebarNav, type SidebarSide, Skeleton, type SkeletonAnimation, type SkeletonVariant, SliderRangeField, Spacer, type SpacerProps, Sparkline, Speedometer, Spinner, type SpinnerSize, type SpinnerTone, SplitButton, type SplitButtonAction, type SplitButtonProps, Splitter, type SplitterOrientation, type SplitterProps, Stack, type StackAlign, type StackDirection, type StackJustify, type StackProps, StatCard, type StatCardTrend, StatTile, type StatTileItem, type StatTileProps, type StatTileTone, type StatTileTrend, StatTiles, type StatTilesProps, Statistic, type StatisticTrend, 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, OpusThemeProvider as ThemeProvider, ThemeSwitcher, ThemeToggleField, Tile, type TileItem, type TileProps, type TileTone, Tiles, type TilesLayout, type TilesProps, Toast, type ToastHorizontalPosition, ToastProvider, type ToastVerticalPosition, type ToastViewportPosition, Toolbar, type ToolbarProps, Tooltip, TopNavigation, type TopNavigationBarMenu, type TopNavigationDropdownMenu, type TopNavigationMegaMenu, TopNavigationMenu, type TopNavigationMenuConfig, type TopNavigationSelectItem, type TopPerformingUserItem, TopPerformingUsers, type TopPerformingUsersProps, TransferListField, TreeSelectField, type TreeSelectNode, TreeView, type TreeViewNode, TrendBadge, type TrendBadgeDirection, type UpcomingTaskItem, UpcomingTasks, type UpcomingTasksProps, VisuallyHidden, accentColors, cartesianSpecializedVariants, countryCodeToFlag, createAccentStyle, defaultMegaMenuFeatured, defaultMegaMenuMenus, defaultMegaMenuSections, defaultTopNavigationBarMenus, defaultTopNavigationMegaMenus, defaultTopNavigationMenus, demoSankeyLinks, fieldInputAriaProps, countries as phoneCountries, useAccentPreference, useClipboard, useContextMenu, useFieldShellAria, useHotkey, useHotkeyManager, useIntersectionObserver, useOpusTheme, usePortalHost, useResizeObserver, useToast, useTopNavigation, worldMapRegionIds };