@nurix/ui-component-library 1.1.3-stage.109 → 1.1.3-stage.110

package/dist/index.d.mts

@@ -45,9 +45,15 @@ interface NestedButtonGroupProps extends React$1.HTMLAttributes<HTMLDivElement>
 declare const NestedButtonGroup: React$1.ForwardRefExoticComponent<NestedButtonGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 
 type InputBorderRadius = "none" | "soft" | "rounded" | "pill";
-type InputVariant = "grey" | "white";
+type InputVariant = "grey" | "white" | "borderless";
 type SupportingTextType = "help" | "error" | "success";
 type InputForceState = "active" | "focussed" | "disabled";
+/**
+ * Input size variant.
+ * - `md` (default): 40px height — standard forms.
+ * - `sm`: 32px height — compact use (filter dropdowns, toolbars).
+ */
+type InputSize = "md" | "sm";
 interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /**
      * Optional label shown above the field.
@@ -88,6 +94,13 @@ interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>,
      * @default "grey"
      */
     inputVariant?: InputVariant;
+    /**
+     * Size variant of the input field.
+     * - `md` (default): 40px height. Standard forms.
+     * - `sm`: 32px height, compact vertical padding. Used in filter dropdowns / toolbars.
+     * @default "md"
+     */
+    inputSize?: InputSize;
     /**
      * Design-system controlled border radius.
      */
@@ -497,6 +510,12 @@ interface BadgeProps {
      * Click handler. When provided, badge renders as a button.
      */
     onClick?: (e: React$1.MouseEvent) => void;
+    /**
+     * When false, disables hover/pressed/focus affordances and cursor-pointer.
+     * Useful for read-only / view-only badges that should not appear clickable.
+     * @default true
+     */
+    interactive?: boolean;
     className?: string;
     style?: React$1.CSSProperties;
 }
@@ -792,6 +811,59 @@ interface ListProps extends React$1.HTMLAttributes<HTMLDivElement> {
  */
 declare const List: React$1.ForwardRefExoticComponent<ListProps & React$1.RefAttributes<HTMLDivElement>>;
 
+type SurfaceBackground = "white" | "grey";
+interface SurfaceProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Surface fill style.
+     * - white: `bg-token-white`
+     * - grey: `bg-token-light-grey`
+     * @default "white"
+     */
+    background?: SurfaceBackground;
+    /**
+     * When true the surface reserves padding so that content can sit
+     * directly inside without a secondary wrapper. Disable when the
+     * children handle their own padding (for example when composing
+     * full-bleed headers or images).
+     * @default true
+     */
+    padded?: boolean;
+    children?: React$1.ReactNode;
+}
+interface SurfaceHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    children?: React$1.ReactNode;
+}
+interface SurfaceBodyProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    children?: React$1.ReactNode;
+}
+interface SurfaceFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    children?: React$1.ReactNode;
+}
+
+/**
+ * Surface - neutral elevated surface used to group related content.
+ *
+ * Matches the Figma "Card - Surface" primitive:
+ *   - 16px radius, 1.5px xlight border, xs drop shadow
+ *   - white / light-grey background variants
+ *   - overflow hidden so nested media clip to the radius
+ *
+ * Figma: 6100:42420 (surface), 6100:42423 (white bg), 6100:42428 (grey bg)
+ */
+declare const Surface: React$1.ForwardRefExoticComponent<SurfaceProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Optional header slot — intended for a short title row.
+ */
+declare const SurfaceHeader: React$1.ForwardRefExoticComponent<SurfaceHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Optional body slot — vertical content area with a default 8px gap.
+ */
+declare const SurfaceBody: React$1.ForwardRefExoticComponent<SurfaceBodyProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Optional footer slot — right-aligned action row.
+ */
+declare const SurfaceFooter: React$1.ForwardRefExoticComponent<SurfaceFooterProps & React$1.RefAttributes<HTMLDivElement>>;
+
 /**
  * Tooltip provider. Wrap your app (or a subtree) with this to enable tooltips.
  * Based on shadcn/ui + Radix Tooltip.
@@ -1249,30 +1321,12 @@ declare const DEFAULT_THEME: {
     };
     readonly uIColors: {
         readonly lightMode: {
-            readonly background: "#f5f5f5";
-            readonly foreground: "#0a0a0a";
-            readonly border: "#e5e5e5";
-            readonly destructive: "#ef4444";
-            readonly secondary: "#e5e5e5";
-            readonly mutedForeground: "#737373";
-            readonly muted: "#f5f5f5";
             readonly backgroundColor: "#0000004d";
-            readonly primary: "#1d4885";
-            readonly secondaryForeground: "#0a0a0a";
-            readonly accentForeground: "#171717";
-            readonly accent: "#f5f5f5";
-            readonly ring: "#0090ff";
             readonly chart3: "#0588f0";
             readonly chart2: "#0090ff";
             readonly chart4: "#0d74ce";
             readonly chart1: "#5eb1ef";
             readonly chart5: "#113264";
-            readonly card: "#ffffff";
-            readonly cardForeground: "#0a0a0a";
-            readonly popover: "#ffffff";
-            readonly popoverForeground: "#0a0a0a";
-            readonly primaryForeground: "#fafafa";
-            readonly input: "#eee";
             readonly sidebar: "#fafafa";
             readonly sidebarForeground: "#0a0a0a";
             readonly sidebarPrimary: "#171717";
@@ -1284,17 +1338,10 @@ declare const DEFAULT_THEME: {
             readonly semanticBackground: "#696867";
             readonly semanticBorder: "#898887";
             readonly semanticForeground: "#ffffff";
-            readonly disabled: "#d4d4d4";
             readonly primary10: "#1d488519";
             readonly datePickerCircle: "#3d6aa8";
-            readonly success: "#10b981";
-            readonly warning: "#fef3c7";
-            readonly warningForeground: "#78350f";
-            readonly switchTrack: "#e5e5e5";
-            readonly hover: "#0a0a0a1a";
             readonly filterInput: "#fff";
             readonly primarySelected: "#fff";
-            readonly hoverSolid: "#efefef";
             readonly bgWhite: "#ffffff";
             readonly bgLightGrey: "#fafafa";
             readonly bgGrey: "#f5f5f5";
@@ -1315,9 +1362,14 @@ declare const DEFAULT_THEME: {
             readonly borderBrand: "#1d4885";
             readonly borderDestructive: "#b91c1c";
             readonly borderInput: "#e5e5e5";
+            readonly hovOpacityPrimary: "#0a0a0a0d";
+            readonly hovOpacitySecondary: "#0a0a0a0d";
             readonly hovSolidPrimary: "#fafafa";
             readonly hovSolidSecondary: "#f5f5f5";
+            readonly pressedOpacityPrimary: "#0a0a0a1a";
+            readonly pressedOpacitySecondary: "#0a0a0a1a";
             readonly pressedSolid: "#e5e5e5";
+            readonly inFocusOpacity: "#0a0a0a26";
             readonly inFocusSolid: "#f5f5f5";
             readonly interactionSelected: "#eff8ff";
             readonly iconWhite: "#fafafa";
@@ -1356,30 +1408,12 @@ declare const DEFAULT_THEME: {
             readonly badgeDestructiveFg: "#b91c1c";
         };
         readonly darkMode: {
-            readonly background: "#1e1e1e";
-            readonly foreground: "#fafafa";
-            readonly border: "#404040";
-            readonly destructive: "#f87171";
-            readonly secondary: "#262626";
-            readonly mutedForeground: "#a3a3a3";
-            readonly muted: "#262626";
             readonly backgroundColor: "#0000004d";
-            readonly primary: "#b5d5fd";
-            readonly secondaryForeground: "#fafafa";
-            readonly accentForeground: "#fafafa";
-            readonly accent: "#262626";
-            readonly ring: "#acd8fc";
             readonly chart3: "#0588f0";
             readonly chart2: "#0090ff";
             readonly chart4: "#0d74ce";
             readonly chart1: "#5eb1ef";
             readonly chart5: "#113264";
-            readonly card: "#262626";
-            readonly cardForeground: "#fafafa";
-            readonly popover: "#262626";
-            readonly popoverForeground: "#fafafa";
-            readonly primaryForeground: "#171717";
-            readonly input: "#171717";
             readonly sidebar: "#171717";
             readonly sidebarForeground: "#fafafa";
             readonly sidebarPrimary: "#0588f0";
@@ -1391,12 +1425,8 @@ declare const DEFAULT_THEME: {
             readonly semanticBackground: "#272625";
             readonly semanticBorder: "#535151";
             readonly semanticForeground: "#ffffff";
-            readonly disabled: "#404040";
             readonly primary10: "#e6f1ff1a";
             readonly datePickerCircle: "#7aa5e8";
-            readonly success: "#a7f3d0";
-            readonly warning: "#fde68a";
-            readonly warningForeground: "#78350f";
             readonly filterInput: "#171717";
             readonly bgWhite: "#0a0a0a";
             readonly bgLightGrey: "#171717";
@@ -1418,9 +1448,14 @@ declare const DEFAULT_THEME: {
             readonly borderBrand: "#bfdbfe";
             readonly borderDestructive: "#f87171";
             readonly borderInput: "#262626";
+            readonly hovOpacityPrimary: "#ffffff0d";
+            readonly hovOpacitySecondary: "#ffffff1a";
             readonly hovSolidPrimary: "#262626";
             readonly hovSolidSecondary: "#262626";
+            readonly pressedOpacityPrimary: "#ffffff26";
+            readonly pressedOpacitySecondary: "#ffffff26";
             readonly pressedSolid: "#171717";
+            readonly inFocusOpacity: "#ffffff40";
             readonly inFocusSolid: "#262626";
             readonly interactionSelected: "#262626";
             readonly iconWhite: "#171717";
@@ -1457,10 +1492,7 @@ declare const DEFAULT_THEME: {
             readonly badgeNeutralFg: "#d4d4d4";
             readonly badgeDestructiveBg: "#7f1d1d";
             readonly badgeDestructiveFg: "#fecaca";
-            readonly switchTrack: "#ffffff";
-            readonly hover: "#ffffff1a";
             readonly primarySelected: "#1A273A";
-            readonly hoverSolid: "#171717";
         };
     };
     readonly components: {
@@ -1737,13 +1769,13 @@ declare const ICON_TOKENS: {
         readonly xl: "size-8";
     };
     readonly picker: {
-        readonly trigger: "inline-flex items-center justify-center border border-border-token-light rounded-xl p-2 cursor-pointer hover:bg-foreground/5 transition-colors";
-        readonly dropdown: "bg-card rounded-xl p-3 shadow-sm border border-border-token-xlight w-[320px] max-h-[400px] flex flex-col gap-2";
-        readonly search: "bg-bg-token-light-grey rounded-xl px-3 py-2 text-xs text-text-black placeholder:text-text-placeholder outline-none border border-border-token-xlight focus:border-border-token-brand w-full";
+        readonly trigger: "inline-flex items-center justify-center border border-token-light rounded-xl p-2 cursor-pointer hover:bg-token-dark/5 transition-colors";
+        readonly dropdown: "bg-token-white rounded-xl p-3 shadow-sm border border-token-xlight w-[320px] max-h-[400px] flex flex-col gap-2";
+        readonly search: "bg-token-light-grey rounded-xl px-3 py-2 text-xs text-fg-black placeholder:text-fg-placeholder outline-none border border-token-xlight focus:border-token-brand w-full";
         readonly grid: "grid grid-cols-8 gap-1 overflow-y-auto max-h-[280px] p-1";
         readonly gridItem: "flex items-center justify-center p-2 rounded-xl cursor-pointer hover:bg-interaction-hov-solid-primary transition-colors";
-        readonly gridItemSelected: "bg-bg-token-brand-secondary";
-        readonly emptyText: "text-xs text-text-grey-secondary text-center py-4";
+        readonly gridItemSelected: "bg-token-brand-secondary";
+        readonly emptyText: "text-xs text-fg-grey-secondary text-center py-4";
     };
 };
 type IconColor = keyof typeof ICON_TOKENS.color;
@@ -2042,20 +2074,34 @@ declare namespace DataTable {
 interface FilterItem<T = string> {
     value: T;
     label: string;
-    /** Optional icon for this item (per-item icon support - feature 5) */
+    /** Optional secondary line shown under the label (two-line option support) */
+    subtext?: string;
+    /** Optional icon for this item (per-item icon support) */
     icon?: LucideIcon | React$1.ReactNode;
-    /** Show loading state for this item (per-item loading - feature 6) */
+    /** Show loading state for this item (per-item loading) */
     loading?: boolean;
-    /** Optional custom display node to render instead of plain label (e.g. ratings with star + color pill) */
+    /** Optional custom display node to render instead of plain label */
     labelNode?: React$1.ReactNode;
 }
 /**
- * Filter item with section grouping (feature 4)
+ * Filter item with section grouping
  */
 interface FilterItemWithSection<T = string> {
     sectionLabel: string;
     items: FilterItem<T>[];
 }
+/**
+ * Filter types.
+ *  - "list"                  : multi-select list (with optional search, sections, drag)
+ *  - "text"                  : textarea
+ *  - "text_with_operands"    : operand dropdown + textarea
+ *  - "numeric"               : single numeric input
+ *  - "numeric_with_operands" : operand dropdown + numeric input (+ optional range mode for "is between")
+ *  - "in_between"            : two numeric inputs (min / max) — no operand dropdown
+ *  - "duration"              : numeric input + unit dropdown (sec / min / hours)
+ *  - "date"                  : date range picker with optional presets
+ */
+type FilterSelectType = "list" | "text" | "text_with_operands" | "numeric" | "numeric_with_operands" | "in_between" | "duration" | "date";
 /**
  * Props for FilterSelect component
  */
@@ -2066,7 +2112,7 @@ interface FilterSelectProps<T = string> extends Omit<React$1.HTMLAttributes<HTML
     icon?: LucideIcon;
     /** Array of selected item values */
     selectedItems?: T[];
-    /** Available items for selection (flat or sectioned) - feature 4: section grouping */
+    /** Available items for selection (flat or sectioned) */
     items: (FilterItem<T> | FilterItemWithSection<T>)[];
     /** Enable drag-and-drop reordering (default: false) */
     draggable?: boolean;
@@ -2076,7 +2122,7 @@ interface FilterSelectProps<T = string> extends Omit<React$1.HTMLAttributes<HTML
     onSelectionChange?: (values: T[]) => void;
     /** Callback when order changes (draggable mode) */
     onOrderChange?: (values: T[]) => void;
-    /** Max width for selected items display (default: "35ch") */
+    /** Max width for selected items display */
     selectedItemsMaxWidth?: string;
     /** Override classes for selected items display area */
     selectedItemsClassName?: string;
@@ -2086,66 +2132,84 @@ interface FilterSelectProps<T = string> extends Omit<React$1.HTMLAttributes<HTML
     open?: boolean;
     /** Callback when open state changes */
     onOpenChange?: (open: boolean) => void;
-    /** Max height for dropdown content (default: "20vh") */
+    /** Max height for dropdown content */
     dropdownMaxHeight?: string;
     /** Show loading spinner in dropdown */
     loading?: boolean;
     onRemoveAll?: () => void;
-    /** Type of filter select: "list" (default), "text", "text_with_operands", "numeric", "numeric_with_operands", or "date" */
-    type?: "list" | "text" | "text_with_operands" | "numeric" | "numeric_with_operands" | "date";
-    /** Controlled text value for textarea/input (for "text", "text_with_operands", and "numeric" types) */
+    /** Type of filter select */
+    type?: FilterSelectType;
+    /** Controlled text value */
     text?: string;
-    /** Callback when text changes (for "text", "text_with_operands", and "numeric" types) */
+    /** Callback when text changes */
     onTextChange?: (text: string) => void;
-    /** Selected operand value (for "text_with_operands" type) - feature 2: operands as prop */
+    /** Selected operand value */
     operand?: string;
-    /** Callback when operand changes (for "text_with_operands" type) */
+    /** Callback when operand changes */
     onOperandChange?: (operand: string) => void;
-    /** Available operands with label and value - feature 2: operands support for conversation logs */
+    /** Available operands with label and value */
     operands?: {
         value: string;
         label: string;
     }[];
-    /** Placeholder text for textarea/input (for "text", "text_with_operands", and "numeric" types) */
+    /** Placeholder text for textarea/input */
     textPlaceholder?: string;
-    /** Placeholder for operand select (for "text_with_operands"/"numeric_with_operands" type, default: "") */
+    /** Placeholder for operand select (default: "") */
     operandPlaceholder?: string;
     /** Unit label suffix shown inside numeric input (e.g. "sec", "min") */
     unitLabel?: string;
     /** Enable range mode for "numeric_with_operands" - shows min/max inputs */
     isRangeMode?: boolean;
-    /** Range min value (for numeric_with_operands in range mode) */
+    /** Range min value */
     rangeMin?: string;
-    /** Range max value (for numeric_with_operands in range mode) */
+    /** Range max value */
     rangeMax?: string;
     /** Callback when range min changes */
     onRangeMinChange?: (value: string) => void;
     /** Callback when range max changes */
     onRangeMaxChange?: (value: string) => void;
-    /** Feature 1: Search functionality - show search input to filter list items */
+    /**
+     * Duration filter options — when type="duration" this defines the unit dropdown choices.
+     * Defaults to [{ value: "sec", label: "sec" }, { value: "min", label: "min" }, { value: "hours", label: "hours" }].
+     */
+    durationUnits?: {
+        value: string;
+        label: string;
+    }[];
+    /** Currently selected duration unit value */
+    durationUnit?: string;
+    /** Callback when duration unit changes */
+    onDurationUnitChange?: (unit: string) => void;
+    /** Show search input to filter list items */
     showSearch?: boolean;
-    /** Feature 1: Search placeholder text (default: "Search...") */
+    /** Search placeholder text (default: "Search...") */
     searchPlaceholder?: string;
-    /** Date range value (for "date" type): { start, end } */
+    /** Date range value (for "date" type) */
     date?: {
         start?: Date;
         end?: Date;
     };
-    /** Callback when date range changes (for "date" type) */
+    /** Callback when date range changes */
     onDateChange?: (date: {
         start?: Date;
         end?: Date;
     }) => void;
-    /** Date presets to show (default: true = built-in presets). Set false to hide, or pass custom array */
+    /** Date presets to show (default: true) */
     datePresets?: boolean | DatePreset[];
     /** Show time picker in date filter (default: true) */
     showTime?: boolean;
-    /** Feature 7: Empty state label when no items available */
+    /** Empty state label when no items available */
     emptyStateLabel?: string;
     /** Additional className for the trigger button */
     triggerClassName?: string;
     /** Additional className for the dropdown content */
     dropdownClassName?: string;
+    /**
+     * Override className for the `label` span inside the trigger. Useful when embedding
+     * FilterSelect as the right pill of `<CompoundFilterSelect>`, where the Figma spec
+     * paints the label in `text-fg-brand` (Subtext/xs) — see Figma 5427:32334.
+     */
+    labelClassName?: string;
 }
 /** Date preset: label and function to compute the range */
 interface DatePreset {
@@ -2164,17 +2228,19 @@ interface FilterListItemProps<T = string> {
     value: T;
     /** Display text */
     label: string;
+    /** Optional subtext displayed below the label (two-line option) */
+    subtext?: string;
     /** Selection state */
     selected?: boolean;
     /** Show drag handle */
     draggable?: boolean;
     /** Selection handler */
     onSelect?: (value: T) => void;
-    /** Feature 5: Optional icon for this item */
+    /** Optional icon for this item */
     icon?: React$1.ComponentType<any> | React$1.ReactNode;
-    /** Feature 6: Show loading spinner on this item */
+    /** Show loading spinner on this item */
     loading?: boolean;
-    /** Optional custom display node replacing the plain label (e.g. rating pill) */
+    /** Optional custom display node replacing the plain label */
     labelNode?: React$1.ReactNode;
     /** Hover state (for stories) */
     hover?: boolean;
@@ -2184,6 +2250,18 @@ interface FilterListItemProps<T = string> {
 
 declare const FilterSelect: React$1.ForwardRefExoticComponent<FilterSelectProps<string> & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * FilterListItem — single row in a FilterSelect dropdown list.
+ *
+ * Figma spec (4085:5872, 4085:5885):
+ *   [drag handle?] [leading icon?] [label / optional subtext] [trailing tick when selected]
+ *
+ * Key fix: only the SELECTED option renders a tick — NOT every option.
+ * We do not render a Checkbox; the design uses trailing check + bg-brand-secondary for selection.
+ *
+ * Layout-shift: the trailing tick slot is always reserved (same width) so selection does not
+ * jitter item width. Hover / selected use background swaps only — no padding or border changes.
+ */
 declare const FilterListItem: React$1.ForwardRefExoticComponent<FilterListItemProps<string> & {
     onDragStart?: (e: React$1.DragEvent) => void;
     onDragOver?: (e: React$1.DragEvent) => void;
@@ -2393,6 +2471,16 @@ declare const MONACO_OPTIONS_DIALOG: {
 interface KeyValuePair {
     key: string;
     value: string;
+    /**
+     * Optional per-row error for the key field. When set, the key Input is
+     * rendered with `invalid` + this message as supporting-text.
+     */
+    keyError?: string;
+    /**
+     * Optional per-row error for the value field. When set, the value Input is
+     * rendered with `invalid` + this message as supporting-text.
+     */
+    valueError?: string;
 }
 interface KeyValueEditorProps {
     /**
@@ -2425,6 +2513,12 @@ interface KeyValueEditorProps {
      * @default true
      */
     allowDeleteRow?: boolean;
+    /**
+     * Optional leading icon rendered inside the value field (e.g. a type
+     * indicator like `<Brackets />`). Defaults to the git-compare glyph that
+     * matches the Figma reference.
+     */
+    valueLeadingIcon?: React$1.ReactNode;
     className?: string;
     style?: React$1.CSSProperties;
 }
@@ -2432,10 +2526,84 @@ interface KeyValueEditorProps {
 /**
  * KeyValueEditor - Table-style key-value pair editor.
  * Renders header (Key, Value) and editable rows with delete on hover.
+ *
+ * Each row's key and value fields use the shared <Input> component
+ * (inputSize="sm"), so focus/hover/pressed/invalid states and typography
+ * are inherited from the design system — no ad-hoc input styling lives
+ * here.
+ *
  * Figma reference: 5905:39527
  */
 declare const KeyValueEditor: React$1.ForwardRefExoticComponent<KeyValueEditorProps & React$1.RefAttributes<HTMLDivElement>>;
 
+interface AudioPlayerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onSeek" | "onRateChange"> {
+    /** Whether audio is currently playing. Controls the play/pause icon. */
+    isPlaying: boolean;
+    /** Current playback position, in seconds. */
+    currentTime: number;
+    /** Total duration, in seconds. */
+    duration: number;
+    /**
+     * Normalized bar heights for the waveform, each between 0 and 1.
+     * If omitted, a flat baseline line is rendered.
+     */
+    waveform?: number[];
+    /** Current playback speed (e.g. 1, 1.5, 2). Shown in a trailing pill. */
+    playbackRate?: number;
+    /** Available playback speeds to cycle through on pill click. */
+    playbackRateOptions?: number[];
+    /** Called when the play/pause button is clicked. */
+    onPlayPause?: () => void;
+    /** Called when the user clicks a position on the waveform. */
+    onSeek?: (seconds: number) => void;
+    /** Called when the user clicks the speed pill. */
+    onRateChange?: (rate: number) => void;
+    /** Custom formatter for times. Defaults to `m:ss`. */
+    formatTime?: (seconds: number) => string;
+}
+
+/**
+ * AudioPlayer — presentational waveform audio player.
+ *
+ * Pure / controlled: all state (playing, time, rate) is driven by props.
+ * Clicks on the waveform emit `onSeek(seconds)`; clicking the speed pill
+ * cycles through `playbackRateOptions` (default `[1, 1.5, 2]`).
+ *
+ * Figma: 3576:2351
+ */
+declare const AudioPlayer: React$1.ForwardRefExoticComponent<AudioPlayerProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface ChatBubbleBaseProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Message body (string or rich node). */
+    message: React$1.ReactNode;
+    /** Timestamp text (e.g. "04:47 PM"). Revealed on hover by default. */
+    timestamp?: string;
+    /** When true, timestamp is always visible. */
+    alwaysShowTimestamp?: boolean;
+    /** Override for the 16px avatar slot. */
+    avatar?: React$1.ReactNode;
+}
+interface ChatBubbleAgentProps extends ChatBubbleBaseProps {
+    /** Shown below the bubble (e.g. a "Tool Call" tag). */
+    trailing?: React$1.ReactNode;
+    /** In-Focus state — draws the brand ring around the bubble. */
+    focused?: boolean;
+}
+interface ChatBubbleUserProps extends ChatBubbleBaseProps {
+}
+
+/**
+ * ChatBubbleAgent — right-aligned agent message with an avatar dot.
+ * Figma: 3575:10095 / 3575:10154 (hover) / 5494:33659 (in-focus).
+ */
+declare const ChatBubbleAgent: React$1.ForwardRefExoticComponent<ChatBubbleAgentProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * ChatBubbleUser — left-aligned user message with a grey avatar icon.
+ * No bubble background; just inline icon + grey text.
+ * Figma: 3575:10815 / 3575:10829 (hover).
+ */
+declare const ChatBubbleUser: React$1.ForwardRefExoticComponent<ChatBubbleUserProps & React$1.RefAttributes<HTMLDivElement>>;
+
 type PopoverSide = "top" | "right" | "bottom" | "left";
 type PopoverAlign = "start" | "center" | "end";
 type PopoverShadow = "none" | "xs" | "sm" | "md" | "lg";
@@ -2533,4 +2701,4 @@ interface PopoverProps {
  */
 declare const Popover: React$1.ForwardRefExoticComponent<PopoverProps & React$1.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, AccordionContent, AccordionContentPlaceholder, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, type AccordionValue, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type BackButtonPosition, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonBorderRadius, ButtonList, type ButtonListItem, type ButtonListProps, type ButtonProps, type ButtonSize, type ButtonVariant, type CellContent, type CellTextContent, Checkbox, type CheckboxProps, type ColumnDef, ColumnWidth, CompoundFilterSelect, type CompoundFilterSelectProps, type CompoundFilterToggleOption, DEFAULT_THEME, DataTable, type DataTableProps, type DatePreset, Dialog, DialogBody, type DialogBodyProps, DialogFooter, type DialogFooterProps, DialogHeader, DialogHeaderNavigation, type DialogHeaderNavigationProps, type DialogHeaderNavigationVariant, type DialogHeaderProps, DialogIcon, type DialogIconProps, type DialogProps, type DialogSize, type DialogType, EmptyState, type EmptyStateIllustrationPosition, type EmptyStateIllustrationSize, type EmptyStateProps, FileInput, type FileInputProps, type FilterItem, type FilterItemWithSection, FilterListItem, type FilterListItemProps, FilterSelect, type FilterSelectProps, type IconColor, IconPicker, type IconPickerProps, type IconSize, IconWrapper, type IconWrapperProps, Input, type InputBorderRadius, type InputForceState, InputGroup, type InputGroupBorderRadius, type InputGroupForceState, type InputGroupProps, type InputProps, type InputVariant, JSON_EDITOR_LANGUAGE_OPTIONS, JsonEditor, type JsonEditorLanguage, type JsonEditorProps, KeyValueEditor, type KeyValueEditorProps, type KeyValuePair, LegoLandWrapper, type LegoLandWrapperProps, List, type ListBorderRadius, type ListNavItemProps, ListNavigation, type ListNavigationProps, type ListProps, type ListType, type ListVariant, MONACO_OPTIONS, MONACO_OPTIONS_DIALOG, NestedButtonGroup, type NestedButtonGroupProps, NumberBadge, type NumberBadgeProps, type NumberBadgeVariant, NurixThemeProvider, Pagination, type PaginationProps, PlaySelect, type PlaySelectAudioItem, type PlaySelectProps, PlaybackControl, type PlaybackControlProps, type PlaybackState, Popover, type PopoverAlign, type PopoverProps, type PopoverShadow, type PopoverSide, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Select, SelectContent, type SelectContentItem, SelectFormLabel, SelectGroup, type SelectGroupProps, SelectItem, SelectLabel, type SelectLabelProps, type SelectMenuItemProps, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShadowDOMWrapper, type ShowToastOptions, type SortDirection, type SortState, Spinner, type SpinnerProps, type SpinnerSize, type StepItem, type StepState, Stepper, StepperBar, type StepperBarProps, type StepperProps, type SupportingTextType, Switch, type SwitchProps, type SwitchSize, type TabVariant, type TableAction, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TagBadge, type TagBadgeProps, type TagOption, Textarea, type TextareaBorderRadius, type TextareaForceState, type TextareaProps, ThemeProvider, Toast, type ToastProps, type ToastVariant, Toaster, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, type TypographySize, type TypographyTone, type TypographyVariant, type TypographyWeight, type UsePlaySelectProps, type UseSelectProps, enhanceJsonError, showToast, useJsonEditor, usePlaySelect, useSelect, useTheme };
+export { Accordion, AccordionContent, AccordionContentPlaceholder, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, type AccordionValue, AudioPlayer, type AudioPlayerProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type BackButtonPosition, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonBorderRadius, ButtonList, type ButtonListItem, type ButtonListProps, type ButtonProps, type ButtonSize, type ButtonVariant, type CellContent, type CellTextContent, ChatBubbleAgent, type ChatBubbleAgentProps, ChatBubbleUser, type ChatBubbleUserProps, Checkbox, type CheckboxProps, type ColumnDef, ColumnWidth, CompoundFilterSelect, type CompoundFilterSelectProps, type CompoundFilterToggleOption, DEFAULT_THEME, DataTable, type DataTableProps, type DatePreset, Dialog, DialogBody, type DialogBodyProps, DialogFooter, type DialogFooterProps, DialogHeader, DialogHeaderNavigation, type DialogHeaderNavigationProps, type DialogHeaderNavigationVariant, type DialogHeaderProps, DialogIcon, type DialogIconProps, type DialogProps, type DialogSize, type DialogType, EmptyState, type EmptyStateIllustrationPosition, type EmptyStateIllustrationSize, type EmptyStateProps, FileInput, type FileInputProps, type FilterItem, type FilterItemWithSection, FilterListItem, type FilterListItemProps, FilterSelect, type FilterSelectProps, type IconColor, IconPicker, type IconPickerProps, type IconSize, IconWrapper, type IconWrapperProps, Input, type InputBorderRadius, type InputForceState, InputGroup, type InputGroupBorderRadius, type InputGroupForceState, type InputGroupProps, type InputProps, type InputVariant, JSON_EDITOR_LANGUAGE_OPTIONS, JsonEditor, type JsonEditorLanguage, type JsonEditorProps, KeyValueEditor, type KeyValueEditorProps, type KeyValuePair, LegoLandWrapper, type LegoLandWrapperProps, List, type ListBorderRadius, type ListNavItemProps, ListNavigation, type ListNavigationProps, type ListProps, type ListType, type ListVariant, MONACO_OPTIONS, MONACO_OPTIONS_DIALOG, NestedButtonGroup, type NestedButtonGroupProps, NumberBadge, type NumberBadgeProps, type NumberBadgeVariant, NurixThemeProvider, Pagination, type PaginationProps, PlaySelect, type PlaySelectAudioItem, type PlaySelectProps, PlaybackControl, type PlaybackControlProps, type PlaybackState, Popover, type PopoverAlign, type PopoverProps, type PopoverShadow, type PopoverSide, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Select, SelectContent, type SelectContentItem, SelectFormLabel, SelectGroup, type SelectGroupProps, SelectItem, SelectLabel, type SelectLabelProps, type SelectMenuItemProps, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShadowDOMWrapper, type ShowToastOptions, type SortDirection, type SortState, Spinner, type SpinnerProps, type SpinnerSize, type StepItem, type StepState, Stepper, StepperBar, type StepperBarProps, type StepperProps, type SupportingTextType, Surface, type SurfaceBackground, SurfaceBody, type SurfaceBodyProps, SurfaceFooter, type SurfaceFooterProps, SurfaceHeader, type SurfaceHeaderProps, type SurfaceProps, Switch, type SwitchProps, type SwitchSize, type TabVariant, type TableAction, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TagBadge, type TagBadgeProps, type TagOption, Textarea, type TextareaBorderRadius, type TextareaForceState, type TextareaProps, ThemeProvider, Toast, type ToastProps, type ToastVariant, Toaster, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, type TypographySize, type TypographyTone, type TypographyVariant, type TypographyWeight, type UsePlaySelectProps, type UseSelectProps, enhanceJsonError, showToast, useJsonEditor, usePlaySelect, useSelect, useTheme };