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

package/dist/index.d.mts

@@ -388,10 +388,23 @@ interface AccordionTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonE
 }
 interface AccordionContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
+interface AccordionSectionTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Label shown inside the pill (Figma: "Summary"). Children override.
+     */
+    label?: React$1.ReactNode;
+}
 
 declare function Accordion<TType extends AccordionType = "single">({ className, type, collapsible, value, defaultValue, onValueChange, disabled, ...props }: AccordionProps<TType>): react_jsx_runtime.JSX.Element;
 declare const AccordionItem: React$1.ForwardRefExoticComponent<AccordionItemProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const AccordionTrigger: React$1.ForwardRefExoticComponent<AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * Section-separator trigger (Figma 6128:5627). A compact pill that separates
+ * sections within a card or page. Use in place of `AccordionTrigger` inside
+ * an `AccordionItem` — it wires into the same Radix state and flips the
+ * chevron when `data-state=open`.
+ */
+declare const AccordionSectionTrigger: React$1.ForwardRefExoticComponent<AccordionSectionTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const AccordionContent: React$1.ForwardRefExoticComponent<AccordionContentProps & React$1.RefAttributes<HTMLDivElement>>;
 declare function AccordionContentPlaceholder({ className, children, }: {
     className?: string;
@@ -2590,6 +2603,10 @@ interface ChatBubbleAgentProps extends ChatBubbleBaseProps {
     focused?: boolean;
 }
 interface ChatBubbleUserProps extends ChatBubbleBaseProps {
+    /** Shown below the message (e.g. a "Tool Call" tag). */
+    trailing?: React$1.ReactNode;
+    /** In-Focus state — draws the brand ring around the row. */
+    focused?: boolean;
 }
 
 /**
@@ -2701,4 +2718,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, 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 };
+export { Accordion, AccordionContent, AccordionContentPlaceholder, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionSectionTrigger, type AccordionSectionTriggerProps, 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 };

package/dist/index.d.ts

@@ -388,10 +388,23 @@ interface AccordionTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonE
 }
 interface AccordionContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
+interface AccordionSectionTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Label shown inside the pill (Figma: "Summary"). Children override.
+     */
+    label?: React$1.ReactNode;
+}
 
 declare function Accordion<TType extends AccordionType = "single">({ className, type, collapsible, value, defaultValue, onValueChange, disabled, ...props }: AccordionProps<TType>): react_jsx_runtime.JSX.Element;
 declare const AccordionItem: React$1.ForwardRefExoticComponent<AccordionItemProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const AccordionTrigger: React$1.ForwardRefExoticComponent<AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * Section-separator trigger (Figma 6128:5627). A compact pill that separates
+ * sections within a card or page. Use in place of `AccordionTrigger` inside
+ * an `AccordionItem` — it wires into the same Radix state and flips the
+ * chevron when `data-state=open`.
+ */
+declare const AccordionSectionTrigger: React$1.ForwardRefExoticComponent<AccordionSectionTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const AccordionContent: React$1.ForwardRefExoticComponent<AccordionContentProps & React$1.RefAttributes<HTMLDivElement>>;
 declare function AccordionContentPlaceholder({ className, children, }: {
     className?: string;
@@ -2590,6 +2603,10 @@ interface ChatBubbleAgentProps extends ChatBubbleBaseProps {
     focused?: boolean;
 }
 interface ChatBubbleUserProps extends ChatBubbleBaseProps {
+    /** Shown below the message (e.g. a "Tool Call" tag). */
+    trailing?: React$1.ReactNode;
+    /** In-Focus state — draws the brand ring around the row. */
+    focused?: boolean;
 }
 
 /**
@@ -2701,4 +2718,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, 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 };
+export { Accordion, AccordionContent, AccordionContentPlaceholder, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionSectionTrigger, type AccordionSectionTriggerProps, 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 };

package/dist/index.js

@@ -6489,6 +6489,7 @@ __export(index_exports, {
   AccordionContent: () => AccordionContent,
   AccordionContentPlaceholder: () => AccordionContentPlaceholder,
   AccordionItem: () => AccordionItem,
+  AccordionSectionTrigger: () => AccordionSectionTrigger,
   AccordionTrigger: () => AccordionTrigger,
   AudioPlayer: () => AudioPlayer,
   Avatar: () => Avatar,
@@ -8338,7 +8339,14 @@ var ACCORDION_TOKENS = {
   contentWrap: "overflow-hidden data-[state=closed]:hidden",
   contentInner: "pb-4 pt-0",
   contentCard: "bg-token-dark-grey rounded-3xl h-[172px] w-full flex items-center justify-center",
-  contentCardText: "text-sm font-normal leading-5 text-fg-black"
+  contentCardText: "text-sm font-normal leading-5 text-fg-black",
+  // --- Section Separator (Figma 6128:5627) ---
+  // Pill-shaped trigger used to separate sections within a card/page.
+  // Heading/H5: text-sm / semibold / leading-5. px-2 py-1.5, gap-2, rounded-full.
+  // Hover: interaction/hov-solid-primary (#fafafa).
+  // Pressed: interaction/pressed-opacity-secondary (rgba(10,10,10,0.1)).
+  sectionTrigger: "inline-flex items-center gap-2 px-2 py-1.5 rounded-full overflow-hidden bg-transparent text-sm font-semibold leading-5 text-fg-black transition-colors cursor-pointer hover:bg-interaction-hov-solid-primary active:bg-interaction-pressed-opacity-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-token-brand focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+  sectionTriggerChevron: "shrink-0 size-4 text-fg-black transition-transform duration-200"
 };
 
 // src/accordion/useAccordion.ts
@@ -8387,7 +8395,7 @@ function useAccordion({
   const radixValue = React13.useMemo(() => {
     var _a5;
     if (type === "multiple") return openValues;
-    return (_a5 = openValues[0]) != null ? _a5 : void 0;
+    return (_a5 = openValues[0]) != null ? _a5 : "";
   }, [openValues, type]);
   const onRadixValueChange = React13.useCallback(
     (next) => {
@@ -8490,6 +8498,25 @@ var AccordionTrigger = React14.forwardRef(({ className, children, description, a
   }
 ) }));
 AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionSectionTrigger = React14.forwardRef(({ className, children, label, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  AccordionPrimitive.Trigger,
+  {
+    ref,
+    className: cn(ACCORDION_TOKENS.sectionTrigger, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "whitespace-nowrap", children: children != null ? children : label }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_lucide_react4.ChevronDown,
+        {
+          className: ACCORDION_TOKENS.sectionTriggerChevron,
+          "aria-hidden": "true"
+        }
+      )
+    ]
+  }
+) }));
+AccordionSectionTrigger.displayName = "AccordionSectionTrigger";
 var AccordionContent = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   AccordionPrimitive.Content,
   {
@@ -10355,7 +10382,13 @@ var TooltipContent = React27.forwardRef(({ className, sideOffset = 6, shortcut,
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipPrimitive.Arrow, { className: TOOLTIP_TOKENS.arrow })
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          TooltipPrimitive.Arrow,
+          {
+            className: TOOLTIP_TOKENS.arrow,
+            style: { fill: "hsl(var(--bg-brand-primary))" }
+          }
+        )
       ]
     }
   );
@@ -11327,8 +11360,12 @@ var TABLE_TOKENS = {
   // Sticky cells paint bg-token-white by default, but the selected state must
   // win so the rounded highlight spans pinned + non-pinned cells seamlessly.
   stickyCell: "sticky z-20 bg-token-white group-data-[selected=true]:bg-interaction-in-focus-solid",
-  /** Right border on last pinned column */
-  pinnedLastBorder: "border-r border-token-xlight",
+  /** Right divider on last pinned column.
+   *  Drawn via box-shadow (not border-r): `border-collapse: collapse` on the
+   *  table causes the collapsed border on sticky cells to drop out while
+   *  unpinned columns scroll underneath. An inset shadow paints with the
+   *  element itself and stays visible through the scroll. */
+  pinnedLastBorder: "shadow-[inset_-1px_0_0_0_hsl(var(--border-xlight))]",
   // ── Checkbox column — Figma: w-40, px-12 py-8
   checkboxCell: "w-10 px-3 py-2",
   // ── Actions column ──
@@ -15037,9 +15074,9 @@ var AUDIO_PLAYER_TOKENS = {
   waveform: {
     wrapper: "relative flex-1 min-w-0 h-8 mx-3 cursor-pointer select-none overflow-hidden",
     bars: "absolute inset-0 flex items-center gap-[2px]",
-    bar: "flex-1 min-w-px rounded-full bg-border-token-light",
+    bar: "flex-1 min-w-px rounded-full bg-token-light",
     barActive: "bg-token-brand-primary",
-    baseline: "absolute left-0 right-0 top-1/2 h-px -translate-y-1/2 bg-border-token-light"
+    baseline: "absolute left-0 right-0 top-1/2 h-px -translate-y-1/2 bg-token-light"
   }
 };
 
@@ -15272,6 +15309,8 @@ var ChatBubbleUser = React42.forwardRef(
     timestamp,
     alwaysShowTimestamp = false,
     avatar,
+    trailing,
+    focused = false,
     className,
     ...props
   }, ref) => {
@@ -15279,23 +15318,32 @@ var ChatBubbleUser = React42.forwardRef(
       "div",
       {
         ref,
-        className: cn(CHAT_BUBBLE_TOKENS.group, "items-start", className),
+        className: cn(
+          CHAT_BUBBLE_TOKENS.group,
+          "items-start",
+          focused && CHAT_BUBBLE_TOKENS.groupFocused,
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: CHAT_BUBBLE_TOKENS.user.row, children: [
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cn(CHAT_BUBBLE_TOKENS.user.avatar, "mb-0.5"), children: avatar != null ? avatar : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react22.User, {}) }),
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: CHAT_BUBBLE_TOKENS.user.text, children: message })
           ] }),
-          timestamp && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: CHAT_BUBBLE_TOKENS.user.timestampRow, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-            "span",
-            {
-              className: cn(
-                CHAT_BUBBLE_TOKENS.timestamp,
-                !alwaysShowTimestamp && CHAT_BUBBLE_TOKENS.timestampHidden
-              ),
-              children: timestamp
-            }
-          ) })
+          (timestamp || trailing) && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: CHAT_BUBBLE_TOKENS.user.timestampRow, children: [
+            trailing,
+            timestamp && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              "span",
+              {
+                className: cn(
+                  CHAT_BUBBLE_TOKENS.timestamp,
+                  trailing && "ml-2",
+                  !alwaysShowTimestamp && !focused && CHAT_BUBBLE_TOKENS.timestampHidden
+                ),
+                children: timestamp
+              }
+            )
+          ] })
         ]
       }
     );
@@ -15567,6 +15615,7 @@ Popover.displayName = "Popover";
   AccordionContent,
   AccordionContentPlaceholder,
   AccordionItem,
+  AccordionSectionTrigger,
   AccordionTrigger,
   AudioPlayer,
   Avatar,

package/dist/index.mjs

@@ -8236,7 +8236,14 @@ var ACCORDION_TOKENS = {
   contentWrap: "overflow-hidden data-[state=closed]:hidden",
   contentInner: "pb-4 pt-0",
   contentCard: "bg-token-dark-grey rounded-3xl h-[172px] w-full flex items-center justify-center",
-  contentCardText: "text-sm font-normal leading-5 text-fg-black"
+  contentCardText: "text-sm font-normal leading-5 text-fg-black",
+  // --- Section Separator (Figma 6128:5627) ---
+  // Pill-shaped trigger used to separate sections within a card/page.
+  // Heading/H5: text-sm / semibold / leading-5. px-2 py-1.5, gap-2, rounded-full.
+  // Hover: interaction/hov-solid-primary (#fafafa).
+  // Pressed: interaction/pressed-opacity-secondary (rgba(10,10,10,0.1)).
+  sectionTrigger: "inline-flex items-center gap-2 px-2 py-1.5 rounded-full overflow-hidden bg-transparent text-sm font-semibold leading-5 text-fg-black transition-colors cursor-pointer hover:bg-interaction-hov-solid-primary active:bg-interaction-pressed-opacity-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-token-brand focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+  sectionTriggerChevron: "shrink-0 size-4 text-fg-black transition-transform duration-200"
 };
 
 // src/accordion/useAccordion.ts
@@ -8285,7 +8292,7 @@ function useAccordion({
   const radixValue = React13.useMemo(() => {
     var _a5;
     if (type === "multiple") return openValues;
-    return (_a5 = openValues[0]) != null ? _a5 : void 0;
+    return (_a5 = openValues[0]) != null ? _a5 : "";
   }, [openValues, type]);
   const onRadixValueChange = React13.useCallback(
     (next) => {
@@ -8388,6 +8395,25 @@ var AccordionTrigger = React14.forwardRef(({ className, children, description, a
   }
 ) }));
 AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionSectionTrigger = React14.forwardRef(({ className, children, label, ...props }, ref) => /* @__PURE__ */ jsx11(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs9(
+  AccordionPrimitive.Trigger,
+  {
+    ref,
+    className: cn(ACCORDION_TOKENS.sectionTrigger, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx11("span", { className: "whitespace-nowrap", children: children != null ? children : label }),
+      /* @__PURE__ */ jsx11(
+        ChevronDown,
+        {
+          className: ACCORDION_TOKENS.sectionTriggerChevron,
+          "aria-hidden": "true"
+        }
+      )
+    ]
+  }
+) }));
+AccordionSectionTrigger.displayName = "AccordionSectionTrigger";
 var AccordionContent = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx11(
   AccordionPrimitive.Content,
   {
@@ -10253,7 +10279,13 @@ var TooltipContent = React27.forwardRef(({ className, sideOffset = 6, shortcut,
             }
           )
         ] }),
-        /* @__PURE__ */ jsx23(TooltipPrimitive.Arrow, { className: TOOLTIP_TOKENS.arrow })
+        /* @__PURE__ */ jsx23(
+          TooltipPrimitive.Arrow,
+          {
+            className: TOOLTIP_TOKENS.arrow,
+            style: { fill: "hsl(var(--bg-brand-primary))" }
+          }
+        )
       ]
     }
   );
@@ -11233,8 +11265,12 @@ var TABLE_TOKENS = {
   // Sticky cells paint bg-token-white by default, but the selected state must
   // win so the rounded highlight spans pinned + non-pinned cells seamlessly.
   stickyCell: "sticky z-20 bg-token-white group-data-[selected=true]:bg-interaction-in-focus-solid",
-  /** Right border on last pinned column */
-  pinnedLastBorder: "border-r border-token-xlight",
+  /** Right divider on last pinned column.
+   *  Drawn via box-shadow (not border-r): `border-collapse: collapse` on the
+   *  table causes the collapsed border on sticky cells to drop out while
+   *  unpinned columns scroll underneath. An inset shadow paints with the
+   *  element itself and stays visible through the scroll. */
+  pinnedLastBorder: "shadow-[inset_-1px_0_0_0_hsl(var(--border-xlight))]",
   // ── Checkbox column — Figma: w-40, px-12 py-8
   checkboxCell: "w-10 px-3 py-2",
   // ── Actions column ──
@@ -14943,9 +14979,9 @@ var AUDIO_PLAYER_TOKENS = {
   waveform: {
     wrapper: "relative flex-1 min-w-0 h-8 mx-3 cursor-pointer select-none overflow-hidden",
     bars: "absolute inset-0 flex items-center gap-[2px]",
-    bar: "flex-1 min-w-px rounded-full bg-border-token-light",
+    bar: "flex-1 min-w-px rounded-full bg-token-light",
     barActive: "bg-token-brand-primary",
-    baseline: "absolute left-0 right-0 top-1/2 h-px -translate-y-1/2 bg-border-token-light"
+    baseline: "absolute left-0 right-0 top-1/2 h-px -translate-y-1/2 bg-token-light"
   }
 };
 
@@ -15178,6 +15214,8 @@ var ChatBubbleUser = React42.forwardRef(
     timestamp,
     alwaysShowTimestamp = false,
     avatar,
+    trailing,
+    focused = false,
     className,
     ...props
   }, ref) => {
@@ -15185,23 +15223,32 @@ var ChatBubbleUser = React42.forwardRef(
       "div",
       {
         ref,
-        className: cn(CHAT_BUBBLE_TOKENS.group, "items-start", className),
+        className: cn(
+          CHAT_BUBBLE_TOKENS.group,
+          "items-start",
+          focused && CHAT_BUBBLE_TOKENS.groupFocused,
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ jsxs29("div", { className: CHAT_BUBBLE_TOKENS.user.row, children: [
             /* @__PURE__ */ jsx38("div", { className: cn(CHAT_BUBBLE_TOKENS.user.avatar, "mb-0.5"), children: avatar != null ? avatar : /* @__PURE__ */ jsx38(User, {}) }),
             /* @__PURE__ */ jsx38("div", { className: CHAT_BUBBLE_TOKENS.user.text, children: message })
           ] }),
-          timestamp && /* @__PURE__ */ jsx38("div", { className: CHAT_BUBBLE_TOKENS.user.timestampRow, children: /* @__PURE__ */ jsx38(
-            "span",
-            {
-              className: cn(
-                CHAT_BUBBLE_TOKENS.timestamp,
-                !alwaysShowTimestamp && CHAT_BUBBLE_TOKENS.timestampHidden
-              ),
-              children: timestamp
-            }
-          ) })
+          (timestamp || trailing) && /* @__PURE__ */ jsxs29("div", { className: CHAT_BUBBLE_TOKENS.user.timestampRow, children: [
+            trailing,
+            timestamp && /* @__PURE__ */ jsx38(
+              "span",
+              {
+                className: cn(
+                  CHAT_BUBBLE_TOKENS.timestamp,
+                  trailing && "ml-2",
+                  !alwaysShowTimestamp && !focused && CHAT_BUBBLE_TOKENS.timestampHidden
+                ),
+                children: timestamp
+              }
+            )
+          ] })
         ]
       }
     );
@@ -15472,6 +15519,7 @@ export {
   AccordionContent,
   AccordionContentPlaceholder,
   AccordionItem,
+  AccordionSectionTrigger,
   AccordionTrigger,
   AudioPlayer,
   Avatar,

package/dist/styles.css

@@ -66,7 +66,7 @@
     -moz-tab-size: 4;
       -o-tab-size: 4;
          tab-size: 4;
-    font-family: Nunito, ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--font-nunito, Nunito), ui-sans-serif, system-ui, sans-serif;
     font-feature-settings: normal;
     font-variation-settings: normal;
     -webkit-tap-highlight-color: transparent;
@@ -218,6 +218,9 @@
   .lego-land .pointer-events-none {
     pointer-events: none;
   }
+  .lego-land .collapse {
+    visibility: collapse;
+  }
   .lego-land .visible {
     visibility: visible;
   }
@@ -1506,10 +1509,10 @@
     vertical-align: middle;
   }
   .lego-land .font-nunito {
-    font-family: Nunito, ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--font-nunito, Nunito), ui-sans-serif, system-ui, sans-serif;
   }
   .lego-land .font-sans {
-    font-family: Nunito, ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--font-nunito, Nunito), ui-sans-serif, system-ui, sans-serif;
   }
   .lego-land .text-2xl {
     font-size: 24px;
@@ -1836,6 +1839,10 @@
     --tw-shadow: 0px 4px 6px 0px var(--tw-shadow-color, rgba(0,0,0,0.1)), 0px 10px 15px 0px var(--tw-shadow-color, rgba(0,0,0,0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .lego-land .shadow-\[inset_-1px_0_0_0_hsl\(var\(--border-xlight\)\)\] {
+    --tw-shadow: inset -1px 0 0 0 var(--tw-shadow-color, hsl(var(--border-xlight)));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .lego-land .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2726,6 +2733,11 @@
       rotate: 180deg;
     }
   }
+  .lego-land .\[\&\[data-state\=open\]\>svg\]\:rotate-180 {
+    .lego-land &[data-state=open]>svg {
+      rotate: 180deg;
+    }
+  }
 }
 .lego-land .rdp-root {
   --rdp-accent-color: blue;
@@ -3087,7 +3099,7 @@
 }
 @import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&display=swap");
 .lego-land {
-  --font-sans: "Nunito", ui-sans-serif, system-ui, sans-serif;
+  --font-sans: var(--font-nunito, "Nunito"), ui-sans-serif, system-ui, sans-serif;
   font-family: var(--font-sans);
   --bg-white: 0 0% 100%;
   --bg-light-grey: 0 0% 98%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nurix/ui-component-library",
-  "version": "1.1.3-stage.110",
+  "version": "1.1.3-stage.112",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",