opus-react 0.2.20 → 0.2.22

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 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";
@@ -51,7 +51,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 +59,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> & {
@@ -1001,6 +1011,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 +1034,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 +1072,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 +1086,8 @@ type ChartDatum = {
     q1?: number;
     q3?: number;
     start?: number;
+    /** Target value for bullet charts. */
+    target?: number;
     value: number;
     values?: number[];
     x?: number;
@@ -1148,11 +1186,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 +1210,261 @@ 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 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 +1668,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, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarShape, type AvatarSize, Badge, type BadgeSize, type BadgeTone, type BadgeVariant, 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, Clipboard, ClipboardProvider, ColorField, CommandPalette, type CommandPaletteItem, ContentTimeline, type ContentTimelineItem, type ContentTimelineStatus, ContextMenuProvider, ContextMenuTarget, CopyButton, CountryPickerField, DEFAULT_TOAST_DURATION_MS, DataGrid, type DataGridColumn, type DataGridLayout, type DataGridPivotConfig, type DataGridRow, type DataGridRowHeaderColumn, DateField, type DateInputType, DescriptionList, type DescriptionListItem, type DescriptionListLayout, Dialog, type DialogActionSet, type DialogResult, Divider, type DividerOrientation, type DividerTone, Drawer, DrawerDefaultActions, type DrawerSide, DropdownMenu, DropdownMenuItem, type DropdownMenuItemData, type DropdownMenuPlacement, type ElementSize, EmptyState, type EmptyStateIcon, type FieldMode, FieldShell, FileField, FilterSelectField, type FilterSelectGroup, FocusTrap, type GalleryImage, Gauge, type GaugeFooterItem, type GaugeTrend, type GaugeVariant, HiddenField, type HotkeyCombo, HotkeyManager, Icon, IconPicker, type IconSize, type IconTone, ImageGallery, ImageThumbnail, type ImageThumbnailSize, IntersectionObserver, JsonViewer, 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, NumberField, OpusThemeProvider, Panel, type PasswordRequirement, PasswordStrengthField, type PhoneCountry, PhoneNumberField, Popover, type PopoverPlacement, Portal, PortalHost, ProgressBar, ProgressRing, PropertyGrid, type PropertyGridItem, Radio, RadioGroup, RangeField, RatingField, type RatingVariant, ResizeObserver, 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, Spinner, type SpinnerSize, type SpinnerTone, StatCard, type StatCardTrend, 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, 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, TreeView, type TreeViewNode, TrendBadge, type TrendBadgeDirection, 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 };