@nurix/ui-component-library 1.1.3-stage.89 → 1.1.3-stage.91

package/dist/index.d.mts

@@ -1,12 +1,15 @@
-import * as React from 'react';
+import * as React$1 from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { Toaster as Toaster$1 } from 'sonner';
 
 type ButtonBorderRadius = "none" | "soft" | "rounded";
 type ButtonVariant = "primary" | "secondary" | "destructive" | "outline" | "link" | "iconPrimary" | "iconSecondary" | "iconOutline";
-type ButtonSize = "default" | "sm" | "lg" | "icon" | "iconSm";
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+type ButtonSize = "default" | "sm" | "lg" | "link" | "icon" | "iconSm";
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ButtonSize;
     onClick?: () => void;
@@ -15,8 +18,8 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
      * Optional leading/trailing icons (e.g. lucide-react). If `asChild` is true,
      * children layout is controlled by the consumer, so these are not injected.
      */
-    leadingIcon?: React.ReactNode;
-    trailingIcon?: React.ReactNode;
+    leadingIcon?: React$1.ReactNode;
+    trailingIcon?: React$1.ReactNode;
     showLeadingIcon?: boolean;
     showTrailingIcon?: boolean;
     /**
@@ -26,12 +29,12 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     asChild?: boolean;
 }
 
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 type InputBorderRadius = "none" | "soft" | "rounded" | "pill";
 type SupportingTextType = "help" | "error";
 type InputForceState = "active" | "focussed" | "disabled";
-interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /**
      * Optional label shown above the field.
      */
@@ -69,7 +72,7 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
      */
     invalid?: boolean;
 }
-interface FileInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {
+interface FileInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {
     label?: string;
     mandatory?: boolean;
     buttonLabel?: string;
@@ -79,13 +82,13 @@ interface FileInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
     onFileChange?: (file: File | null) => void;
 }
 
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
 
-declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
+declare const FileInput: React$1.ForwardRefExoticComponent<FileInputProps & React$1.RefAttributes<HTMLInputElement>>;
 
 type InputGroupBorderRadius = "none" | "soft" | "rounded" | "pill";
 type InputGroupForceState = "active" | "focussed" | "disabled";
-interface InputGroupProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+interface InputGroupProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /**
      * Optional label shown above the field.
      */
@@ -109,22 +112,22 @@ interface InputGroupProps extends Omit<React.InputHTMLAttributes<HTMLInputElemen
     /**
      * Optional content shown on the left of the input (icon/text/button).
      */
-    startAdornment?: React.ReactNode;
+    startAdornment?: React$1.ReactNode;
     /**
      * Optional content shown on the right of the input (icon/text/button).
      */
-    endAdornment?: React.ReactNode;
+    endAdornment?: React$1.ReactNode;
     /**
      * Optional content separated by a divider on the far left (e.g. "https://").
      */
-    startSegment?: React.ReactNode;
+    startSegment?: React$1.ReactNode;
     /**
      * Optional content separated by a divider on the far right (e.g. ".com").
      */
-    endSegment?: React.ReactNode;
+    endSegment?: React$1.ReactNode;
     input_border_radius?: InputGroupBorderRadius;
 }
-interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement> {
     label?: string;
     mandatory?: boolean;
     supportingText?: string;
@@ -133,8 +136,8 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
     input_border_radius?: InputGroupBorderRadius;
 }
 
-declare const InputGroup: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<HTMLInputElement>>;
-declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+declare const InputGroup: React$1.ForwardRefExoticComponent<InputGroupProps & React$1.RefAttributes<HTMLInputElement>>;
+declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
 
 type SwitchSize = "default" | "small";
 interface SwitchProps {
@@ -170,28 +173,28 @@ interface SwitchProps {
      */
     id?: string;
     className?: string;
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
 }
 
-declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 /**
  * shadcn-style Checkbox props (Radix primitive props).
  * Note: Radix supports `checked: boolean | "indeterminate"`. Figma uses boolean.
  */
-type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
+type CheckboxProps = React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
 
-declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
-type RadioGroupProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>;
-type RadioGroupItemProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>;
+type RadioGroupProps = React$1.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>;
+type RadioGroupItemProps = React$1.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>;
 
 type DialogHeaderNavigationVariant = "primary" | "inner";
 type BackButtonPosition = "left" | "right";
-interface DialogHeaderNavigationProps extends React.HTMLAttributes<HTMLDivElement> {
+interface DialogHeaderNavigationProps extends React$1.HTMLAttributes<HTMLDivElement> {
     title: string;
     subtitle?: string;
     /**
@@ -205,36 +208,36 @@ interface DialogHeaderNavigationProps extends React.HTMLAttributes<HTMLDivElemen
     disabled?: boolean;
 }
 type TabVariant = "top" | "side";
-interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+interface TabsProps extends React$1.HTMLAttributes<HTMLDivElement> {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     variant?: TabVariant;
 }
-interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
+interface TabsListProps extends React$1.HTMLAttributes<HTMLDivElement> {
     variant?: TabVariant;
 }
-interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface TabsTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
     value: string;
     variant?: TabVariant;
-    iconLeft?: React.ReactNode;
+    iconLeft?: React$1.ReactNode;
 }
-interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+interface TabsContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
     value: string;
     forceMount?: boolean;
 }
 
-declare const DialogHeaderNavigation: React.ForwardRefExoticComponent<DialogHeaderNavigationProps & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeaderNavigation: React$1.ForwardRefExoticComponent<DialogHeaderNavigationProps & React$1.RefAttributes<HTMLDivElement>>;
 
 declare function Tabs({ className, value, defaultValue, onValueChange, variant, ...props }: TabsProps): react_jsx_runtime.JSX.Element;
-declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
-declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsList: React$1.ForwardRefExoticComponent<TabsListProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React$1.ForwardRefExoticComponent<TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare function TabsContent({ value, forceMount, className, children, ...props }: TabsContentProps): react_jsx_runtime.JSX.Element | null;
 
 type AccordionType = "single" | "multiple";
 type AccordionValue<TType extends AccordionType> = TType extends "multiple" ? string[] : string | null;
 type AccordionOnValueChange<TType extends AccordionType> = (value: AccordionValue<TType>) => void;
-interface AccordionProps<TType extends AccordionType = "single"> extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+interface AccordionProps<TType extends AccordionType = "single"> extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
     type?: TType;
     /**
      * When `type="single"`, allows collapsing the open item.
@@ -245,31 +248,31 @@ interface AccordionProps<TType extends AccordionType = "single"> extends Omit<Re
     onValueChange?: AccordionOnValueChange<TType>;
     disabled?: boolean;
 }
-interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+interface AccordionItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
     value: string;
     disabled?: boolean;
 }
-interface AccordionTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface AccordionTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Optional description under the label (matches Figma).
      */
-    description?: React.ReactNode;
+    description?: React$1.ReactNode;
     /**
      * Optional right-side action (e.g. "Add" button).
      * Note: click events are stopped from toggling the accordion.
      */
-    action?: React.ReactNode;
+    action?: React$1.ReactNode;
 }
-interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+interface AccordionContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 
 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.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React$1.ForwardRefExoticComponent<AccordionItemProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React$1.ForwardRefExoticComponent<AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React$1.ForwardRefExoticComponent<AccordionContentProps & React$1.RefAttributes<HTMLDivElement>>;
 declare function AccordionContentPlaceholder({ className, children, }: {
     className?: string;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
 type AvatarSize = "sm" | "default" | "lg";
@@ -298,7 +301,7 @@ interface AvatarProps {
      */
     shape?: AvatarShape;
     className?: string;
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
 }
 interface AvatarGroupProps {
     /**
@@ -319,22 +322,22 @@ interface AvatarGroupProps {
     /**
      * The avatar items to display.
      */
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     className?: string;
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
 }
 
 /**
  * Avatar component - An image element with a fallback for representing the user.
  * Based on Figma design node: 3316:3490
  */
-declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLSpanElement>>;
 /**
  * AvatarGroup component - Displays multiple avatars in a stacked layout
  */
-declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const AvatarGroup: React$1.ForwardRefExoticComponent<AvatarGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 
-type BadgeVariant = "default" | "secondary" | "destructive" | "outline" | "success";
+type BadgeVariant = "default" | "secondary" | "destructive" | "outline" | "success" | "warning";
 interface BadgeProps {
     /**
      * The badge variant style.
@@ -348,11 +351,11 @@ interface BadgeProps {
     /**
      * Optional leading icon (renders before the label).
      */
-    leadingIcon?: React.ReactNode;
+    leadingIcon?: React$1.ReactNode;
     /**
      * Optional trailing icon (renders after the label).
      */
-    trailingIcon?: React.ReactNode;
+    trailingIcon?: React$1.ReactNode;
     /**
      * Whether to show the leading icon.
      * @default true
@@ -366,9 +369,9 @@ interface BadgeProps {
     /**
      * Badge content (alternative to label prop).
      */
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     className?: string;
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
 }
 type NumberBadgeVariant = "default" | "destructive" | "secondary";
 interface NumberBadgeProps {
@@ -392,42 +395,311 @@ interface NumberBadgeProps {
      */
     showZero?: boolean;
     className?: string;
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
 }
 
 /**
  * Badge component - Displays a badge with options for leading and trailing icons
  * Based on Figma design node: 3333:1629
  */
-declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLDivElement>>;
 /**
  * NumberBadge component - Displays a circular badge with a count
  * Based on Figma design node: 3333:1629
  */
-declare const NumberBadge: React.ForwardRefExoticComponent<NumberBadgeProps & React.RefAttributes<HTMLDivElement>>;
+declare const NumberBadge: React$1.ForwardRefExoticComponent<NumberBadgeProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type SelectType = "Single Line Regular" | "Single Line Large" | "Double Line";
+type SelectState = "Default" | "Open";
+interface SelectProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    type?: SelectType;
+    state?: SelectState;
+    showLead?: boolean;
+    showSearch?: boolean;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    placeholderSubtext?: string;
+}
+interface SelectLabelProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    mandatory?: boolean;
+}
+interface SelectMenuItemProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string;
+    hover?: boolean;
+    menuItem?: string;
+    menuItemSubtext?: string;
+    showPlaybackControl?: boolean;
+    selected?: boolean;
+}
+interface SelectGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    showLabel?: boolean;
+}
+/** Item shape when using SelectContent `items` prop. Search filters by label and subtext. */
+interface SelectContentItem {
+    value: string;
+    label: string;
+    subtext?: string;
+    leadIcon?: React$1.ReactNode;
+    leadIconSize?: "xs" | "sm" | "md";
+}
+
+declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Select value text (placeholder/value) using Typography tokens.
+ * We style placeholder color via `group-data-[placeholder]` on the trigger.
+ */
+declare const SelectValue: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
+    showLead?: boolean;
+    leadIcon?: React$1.ReactNode;
+    /** Size of lead icon. "xs" = 16px, "sm" = 24px (default) */
+    leadIconSize?: "xs" | "sm";
+    size?: "regular" | "large";
+} & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    /** Dropdown list items. When provided, search filters them by default. */
+    items?: SelectContentItem[];
+    /** Section label when using items (e.g. "Section", "Audio") */
+    sectionLabel?: string;
+    showSearch?: boolean;
+    searchPlaceholder?: string;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    subtext?: string;
+    type?: "single" | "double";
+    leadIcon?: React$1.ReactNode;
+    /** Size of leadIcon area. "xs" = 16px, "sm" = 24px, "md" = 36px (for playback controls) */
+    leadIconSize?: "xs" | "sm" | "md";
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare function SelectFormLabel({ className, label, mandatory }: SelectLabelProps): react_jsx_runtime.JSX.Element;
+
+interface PlaySelectAudioItem {
+    value: string;
+    label: string;
+    subtext?: string;
+    url: string;
+}
+interface PlaySelectProps {
+    /** List of audio items to display. Each has value, label, subtext, and playable url. */
+    dropdownListItems: PlaySelectAudioItem[];
+    /** Trigger label (e.g. "Title") */
+    label?: string;
+    /** Placeholder when nothing selected */
+    placeholder?: string;
+    /** Show search input in dropdown */
+    showSearch?: boolean;
+    /** Search placeholder text */
+    searchPlaceholder?: string;
+    /** Controlled value */
+    value?: string;
+    /** Default value when uncontrolled */
+    defaultValue?: string;
+    /** Called when value changes (alias for onValueChange) */
+    onValueChange?: (value: string) => void;
+    /** Called when user clicks play/pause button. Receives url and item. */
+    onPlayClick?: (url: string, item: PlaySelectAudioItem) => void;
+    /** Called when user selects a value (clicks item text to select) */
+    onSelectValue?: (value: string) => void;
+    /** Called when dropdown closes (select, click outside, escape, etc.) */
+    onCloseDropdown?: () => void;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Trigger size */
+    size?: "regular" | "large";
+    /** Optional lead icon for the trigger */
+    triggerLeadIcon?: React$1.ReactNode;
+    /** Optional wrapper className (e.g. to control width) */
+    className?: string;
+    /** Minimum width (e.g. "196px"). Override via className if needed. */
+    minWidth?: string;
+}
+declare const PlaySelect: React$1.ForwardRefExoticComponent<PlaySelectProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+type PlaybackState = "play" | "pause";
+interface PlaybackControlProps extends Omit<React$1.ComponentProps<typeof Button>, "children"> {
+    /**
+     * Which icon to show. `play` = play icon (triangle), `pause` = pause icon (two bars).
+     */
+    state?: PlaybackState;
+    /**
+     * Alias for `state`. When true, show pause icon; when false, show play icon.
+     */
+    playing?: boolean;
+}
+declare const PlaybackControl: React$1.ForwardRefExoticComponent<Omit<PlaybackControlProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface UseSelectProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+declare function useSelect({ value, defaultValue, onValueChange }: UseSelectProps): {
+    value: string | undefined;
+    setValue: React$1.Dispatch<React$1.SetStateAction<string | undefined>>;
+    handleValueChange: (newValue: string) => void;
+};
+
+interface UsePlaySelectProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Called when user clicks play/pause button */
+    onPlayClick?: (url: string, item: PlaySelectAudioItem) => void;
+    /** Called when user selects a value (clicks item text) */
+    onSelectValue?: (value: string) => void;
+    /** Called when dropdown closes (select, click outside, escape, etc.) */
+    onCloseDropdown?: () => void;
+}
+declare function usePlaySelect({ value, defaultValue, onValueChange, onPlayClick, onSelectValue, onCloseDropdown, }: UsePlaySelectProps): {
+    value: string | undefined;
+    playingUrl: string | null;
+    audioRef: React$1.MutableRefObject<HTMLAudioElement | null>;
+    handleValueChange: (newValue: string) => void;
+    handleOpenChange: (open: boolean) => void;
+    handlePlay: (url: string, item: PlaySelectAudioItem) => void;
+    stopEvent: (e: React$1.PointerEvent | React$1.MouseEvent) => void;
+    createPlayHandler: (item: PlaySelectAudioItem) => (e: React$1.PointerEvent | React$1.MouseEvent) => void;
+    pauseAudio: () => void;
+};
+
+interface EmptyStateProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Illustration element (e.g. image, icon, or SVG) displayed above the text. */
+    illustration?: React$1.ReactNode;
+    /** Primary title text. */
+    title: string;
+    /** Secondary description text. */
+    description?: string;
+    /** Action element (e.g. a Button) displayed below the text. */
+    action?: React$1.ReactNode;
+}
+
+/**
+ * Empty state placeholder.
+ * Figma reference node: 3696:2825
+ */
+declare const EmptyState: React$1.ForwardRefExoticComponent<EmptyStateProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type ListVariant = "default" | "outline" | "muted";
+type ListType = "card" | "list";
+type ListBorderRadius = "none" | "soft" | "rounded";
+interface ListProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Layout type.
+     * - card: vertical card layout
+     * - list: horizontal row layout
+     * @default "card"
+     */
+    type?: ListType;
+    /**
+     * Visual style variant.
+     * - default: card bg only (card) / no border, no bg (list)
+     * - outline: border with horizontal padding
+     * - muted: subtle background fill
+     * @default "default"
+     */
+    variant?: ListVariant;
+    /**
+     * Design-system controlled border radius.
+     * @default "rounded"
+     */
+    list_border_radius?: ListBorderRadius;
+    children?: React$1.ReactNode;
+}
+
+/**
+ * List component - A composable card/list container with layout type,
+ * variant styles, hover overlay, and design-system border radius.
+ * Based on Figma design node: 3316:3511
+ */
+declare const List: React$1.ForwardRefExoticComponent<ListProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Tooltip provider. Wrap your app (or a subtree) with this to enable tooltips.
+ * Based on shadcn/ui + Radix Tooltip.
+ */
+declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
+/**
+ * Tooltip root. Groups trigger and content.
+ */
+declare const Tooltip: React$1.FC<TooltipPrimitive.TooltipProps>;
+/**
+ * Tooltip trigger. The element that shows the tooltip on hover.
+ */
+declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * Tooltip content. Renders the tooltip popover with optional arrow and shortcut badge.
+ * Figma design: primary background, rounded, optional keyboard shortcut on the right.
+ * Portals into .lego-land when present for correct theming.
+ */
+declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    shortcut?: string;
+} & React$1.RefAttributes<HTMLDivElement>>;
+
+type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    /** Optional keyboard shortcut to display (e.g. "U", "⌘S") */
+    shortcut?: string;
+};
+
+type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p1" | "p2" | "p3";
+type TypographyTone = "default" | "muted" | "inherit";
+interface TypographyProps extends React$1.HTMLAttributes<HTMLElement> {
+    /**
+     * Typography variant (maps to Figma text styles).
+     * @default "p2"
+     */
+    variant?: TypographyVariant;
+    /**
+     * Text color tone.
+     * @default "default"
+     */
+    tone?: TypographyTone;
+    /**
+     * Render as the child element (Radix Slot).
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Override the default HTML tag for the selected variant.
+     * Ignored when `asChild` is true.
+     */
+    as?: React$1.ElementType;
+}
+
+/**
+ * Typography component
+ * Figma reference: 3732-2079 (Text aliases / use cases)
+ */
+declare const Typography: React$1.ForwardRefExoticComponent<TypographyProps & React$1.RefAttributes<HTMLElement>>;
 
 type Theme = "light" | "dark";
 interface ThemeContextType {
     theme: Theme;
     setTheme: (theme: Theme) => void;
 }
-declare const ThemeProvider: React.FC<{
-    children: React.ReactNode;
+declare const ThemeProvider: React$1.FC<{
+    children: React$1.ReactNode;
     defaultTheme?: Theme;
 }>;
-declare const NurixThemeProvider: React.FC<{
-    children: React.ReactNode;
+declare const NurixThemeProvider: React$1.FC<{
+    children: React$1.ReactNode;
     defaultTheme?: Theme;
 }>;
 declare const useTheme: () => ThemeContextType;
 
 interface LegoLandWrapperProps {
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     theme: "light" | "dark";
     className?: string;
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
 }
-declare const LegoLandWrapper: React.FC<LegoLandWrapperProps>;
+declare const LegoLandWrapper: React$1.FC<LegoLandWrapperProps>;
 
 /**
  * Hardcoded theme JSON (as requested).
@@ -783,7 +1055,7 @@ declare const DEFAULT_THEME: {
             readonly background: "#f5f5f5";
             readonly foreground: "#0a0a0a";
             readonly border: "#e5e5e5";
-            readonly destructive: "#dc2626";
+            readonly destructive: "#ef4444";
             readonly secondary: "#e5e5e5";
             readonly mutedForeground: "#737373";
             readonly muted: "#f5f5f5";
@@ -817,7 +1089,9 @@ declare const DEFAULT_THEME: {
             readonly semanticForeground: "#ffffff";
             readonly disabled: "#d4d4d4";
             readonly primary10: "#1d488519";
-            readonly success: "#047857";
+            readonly success: "#10b981";
+            readonly warning: "#fef3c7";
+            readonly warningForeground: "#78350f";
             readonly switchTrack: "#e5e5e5";
         };
         readonly darkMode: {
@@ -839,7 +1113,7 @@ declare const DEFAULT_THEME: {
             readonly chart4: "#0d74ce";
             readonly chart1: "#5eb1ef";
             readonly chart5: "#113264";
-            readonly card: "#171717";
+            readonly card: "#262626";
             readonly cardForeground: "#fafafa";
             readonly popover: "#262626";
             readonly popoverForeground: "#fafafa";
@@ -859,6 +1133,8 @@ declare const DEFAULT_THEME: {
             readonly disabled: "#404040";
             readonly primary10: "#e6f1ff1a";
             readonly success: "#a7f3d0";
+            readonly warning: "#fde68a";
+            readonly warningForeground: "#78350f";
             readonly switchTrack: "#ffffff";
         };
     };
@@ -878,8 +1154,222 @@ declare const DEFAULT_THEME: {
     };
 };
 
+type DialogSize = "sm" | "default" | "wide";
+/**
+ * Controls the dialog layout preset:
+ * - `"default"` — header with × close, plain body, footer
+ * - `"icon"` — large icon circle at top, no × close, body, footer
+ * - `"scrollable"` — header with × close, scrollable body, footer
+ * - `"scrollable-fixed"` — same as scrollable but header and footer have dividers (sticky feel)
+ */
+type DialogType = "default" | "icon" | "scrollable" | "scrollable-fixed";
+interface DialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** @default "default" */
+    type?: DialogType;
+    /** @default "default" */
+    size?: DialogSize;
+    title?: string;
+    /** Icon element for the blue circle (only used when `type="icon"`). */
+    icon?: React$1.ReactNode;
+    children?: React$1.ReactNode;
+    /** @default "Cancel" */
+    cancelLabel?: string;
+    /** @default "Continue" */
+    confirmLabel?: string;
+    /**
+     * Show the Cancel button in the footer.
+     * @default true
+     */
+    showCancel?: boolean;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    className?: string;
+}
+interface DialogIconProps {
+    children: React$1.ReactNode;
+    className?: string;
+}
+interface DialogHeaderProps {
+    title: string;
+    showClose?: boolean;
+    showDivider?: boolean;
+    className?: string;
+}
+interface DialogBodyProps {
+    children?: React$1.ReactNode;
+    scrollable?: boolean;
+    className?: string;
+}
+interface DialogFooterProps {
+    cancelLabel?: string;
+    confirmLabel?: string;
+    /**
+     * Show the Cancel button.
+     * @default true
+     */
+    showCancel?: boolean;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    showDivider?: boolean;
+    className?: string;
+}
+
+/**
+ * Modal dialog. Rendered inline (no portal) so CSS variables from the
+ * `.lego-land` ancestor always apply. Uses `fixed inset-0` so it still covers
+ * the full viewport regardless of its position in the tree.
+ *
+ * Use the `type` prop to select a layout preset:
+ * - `"default"` — header + × close + plain body + footer
+ * - `"icon"` — icon circle at top + header (no ×) + body + footer
+ * - `"scrollable"` — header + × close + scrollable body + footer
+ * - `"scrollable-fixed"` — scrollable + dividers between header/body/footer
+ *
+ * Figma reference: 3316:3400 (Dialogs & Toasts)
+ */
+declare const Dialog: React$1.ForwardRefExoticComponent<DialogProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Blue tinted icon circle for the top of a dialog.
+ * Figma reference: 3364:1516
+ */
+declare const DialogIcon: React$1.ForwardRefExoticComponent<DialogIconProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Header row with title and optional × close button / bottom divider.
+ * Figma reference: 3364:1437
+ */
+declare const DialogHeader: React$1.ForwardRefExoticComponent<DialogHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Content area. Pass `scrollable` to constrain height and enable vertical scroll.
+ * Figma reference: 3364:1541
+ */
+declare const DialogBody: React$1.ForwardRefExoticComponent<DialogBodyProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Footer with Cancel + Confirm buttons and an optional top divider.
+ * Figma reference: 3364:1397
+ */
+declare const DialogFooter: React$1.ForwardRefExoticComponent<DialogFooterProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type ToastVariant = "success" | "error" | "default";
+interface ToastProps {
+    /**
+     * Determines the leading icon and title colour.
+     * @default "default"
+     */
+    variant?: ToastVariant;
+    /** Primary message text. */
+    title: string;
+    /** Optional secondary line shown below the title. */
+    subtext?: string;
+    /**
+     * Show the icon-only Cancel action button on the right.
+     * When used with `showToast()`, automatically dismisses the toast.
+     * @default false
+     */
+    showCancel?: boolean;
+    /** Called when the Cancel button is clicked. */
+    onCancel?: () => void;
+    /**
+     * Show the thin progress bar pinned to the bottom of the toast.
+     * @default false
+     */
+    showProgress?: boolean;
+    /**
+     * Progress percentage 0–100. Only used when `showProgress` is true.
+     * @default 0
+     */
+    progress?: number;
+    className?: string;
+    style?: React$1.CSSProperties;
+}
+/** Options passed to `showToast()`. */
+interface ShowToastOptions extends Omit<ToastProps, "onCancel"> {
+    /** Duration in ms before auto-dismiss. Defaults to Sonner's default (4000ms). */
+    duration?: number;
+}
+
+/**
+ * Place `<Toaster />` once near the root of your app (inside `LegoLandWrapper`).
+ * It is a thin wrapper around Sonner's Toaster with sensible defaults for this
+ * design system.
+ *
+ * @example
+ * // In your app root:
+ * <LegoLandWrapper>
+ *   <Toaster />
+ *   <App />
+ * </LegoLandWrapper>
+ */
+declare const Toaster: {
+    ({ position, ...props }: React$1.ComponentProps<typeof Toaster$1>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * Visual Toast component. Can be used standalone or via `showToast()` for
+ * Sonner-powered positioning and auto-dismiss.
+ *
+ * Figma reference: 3364:1614 (success), 3728:2422 (default), 3728:2438 (error)
+ */
+declare const Toast: React$1.ForwardRefExoticComponent<ToastProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Trigger a toast notification. Requires `<Toaster />` to be mounted in the app.
+ *
+ * @example
+ * showToast({ variant: "success", title: "Saved!", subtext: "All changes saved." });
+ * showToast({ variant: "error",   title: "Something went wrong", showCancel: true });
+ * showToast({ variant: "default", title: "Thanks for the feedback!", showProgress: true, progress: 40 });
+ */
+declare const showToast: ({ duration, ...props }: ShowToastOptions) => string | number;
+
+type StepState = "incomplete" | "active" | "complete";
+interface StepItem {
+    /**
+     * The label text shown next to the step indicator.
+     */
+    label: string;
+    /**
+     * The state of this step.
+     * @default "incomplete"
+     */
+    state?: StepState;
+}
+interface StepperProps {
+    /**
+     * Array of step items to display.
+     */
+    steps: StepItem[];
+    className?: string;
+    style?: React$1.CSSProperties;
+}
+interface StepperBarProps {
+    /**
+     * Total number of steps (segments).
+     * @default 4
+     */
+    totalSteps?: number;
+    /**
+     * Current active step (1-indexed). Segments up to this index are filled.
+     */
+    currentStep: number;
+    className?: string;
+    style?: React$1.CSSProperties;
+}
+
+/**
+ * StepperBar — Segmented progress bar indicating how many steps are complete.
+ * Based on Figma design node: 3706:2092
+ */
+declare const StepperBar: React$1.ForwardRefExoticComponent<StepperBarProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Stepper — Horizontal stepper with labeled steps and state indicators.
+ * Each step can be "incomplete", "active", or "complete".
+ * Based on Figma design node: 3729:2600
+ */
+declare const Stepper: React$1.ForwardRefExoticComponent<StepperProps & React$1.RefAttributes<HTMLDivElement>>;
+
 interface ShadowDOMWrapperProps {
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     /**
      * CSS styles to inject into the shadow root.
      * If not provided, styles will be extracted from the document's stylesheets.
@@ -906,6 +1396,6 @@ interface ShadowDOMWrapperProps {
  * ShadowDOMWrapper component that wraps children in a Shadow DOM.
  * This isolates component styles and DOM structure from the parent document.
  */
-declare const ShadowDOMWrapper: React.FC<ShadowDOMWrapperProps>;
+declare const ShadowDOMWrapper: React$1.FC<ShadowDOMWrapperProps>;
 
-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, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, DEFAULT_THEME, DialogHeaderNavigation, type DialogHeaderNavigationProps, type DialogHeaderNavigationVariant, FileInput, type FileInputProps, Input, type InputBorderRadius, type InputForceState, InputGroup, type InputGroupBorderRadius, type InputGroupForceState, type InputGroupProps, type InputProps, LegoLandWrapper, type LegoLandWrapperProps, NumberBadge, type NumberBadgeProps, type NumberBadgeVariant, NurixThemeProvider, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ShadowDOMWrapper, type SupportingTextType, Switch, type SwitchProps, type SwitchSize, type TabVariant, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, ThemeProvider, useTheme };
+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, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, DEFAULT_THEME, 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 EmptyStateProps, FileInput, type FileInputProps, Input, type InputBorderRadius, type InputForceState, InputGroup, type InputGroupBorderRadius, type InputGroupForceState, type InputGroupProps, type InputProps, LegoLandWrapper, type LegoLandWrapperProps, List, type ListBorderRadius, type ListProps, type ListType, type ListVariant, NumberBadge, type NumberBadgeProps, type NumberBadgeVariant, NurixThemeProvider, PlaySelect, type PlaySelectAudioItem, type PlaySelectProps, PlaybackControl, type PlaybackControlProps, type PlaybackState, 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 StepItem, type StepState, Stepper, StepperBar, type StepperBarProps, type StepperProps, type SupportingTextType, Switch, type SwitchProps, type SwitchSize, type TabVariant, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, ThemeProvider, Toast, type ToastProps, type ToastVariant, Toaster, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, type TypographyTone, type TypographyVariant, type UsePlaySelectProps, type UseSelectProps, showToast, usePlaySelect, useSelect, useTheme };