@nurix/ui-component-library 1.1.4-stage.126 → 1.1.4-stage.128

package/dist/index.d.mts

@@ -3418,4 +3418,149 @@ interface MultiSelectProps<T extends string = string> {
  */
 declare function MultiSelect<T extends string = string>({ value, onValueChange, items, placeholder, label, showSearch, searchPlaceholder, showSelectAll, size, bg, disabled, maxHeight, id, className, "data-testid": dataTestId, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
 
-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, MultiSelect, type MultiSelectItem, type MultiSelectProps, 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, SidePanel, type SidePanelProps, type SidePanelSize, Slider, type SliderProps, 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, Toggle, ToggleItem, type ToggleItemProps, type ToggleProps, type ToggleType, 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 };
+interface RuleBuilderProps {
+    /**
+     * Badge label shown in the header (e.g. "Rule 1").
+     */
+    title: string;
+    /**
+     * Controlled open state. When provided, `defaultOpen` is ignored and
+     * the consumer is responsible for toggling via `onOpenChange`.
+     */
+    open?: boolean;
+    /**
+     * Initial open state for the uncontrolled mode. Defaults to `true`.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Called when the user toggles the chevron in the header.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Called when the user clicks the trash icon in the header. Omit to
+     * hide the delete button entirely.
+     */
+    onDelete?: () => void;
+    /**
+     * Optional icon shown in the title badge before the label. Defaults to
+     * a `Workflow` glyph matching the Figma reference.
+     */
+    titleIcon?: React$1.ReactNode;
+    /**
+     * Bottom strip rendered in the grey wrapper area below the white card.
+     * Pass an `<Input />` (or similar) — the label, icon, and layout are
+     * provided by RuleBuilder. Omit to hide the strip entirely (e.g. for
+     * rules that don't set a field value).
+     */
+    thenContent?: React$1.ReactNode;
+    /**
+     * Override the default "Then set field value to" label.
+     */
+    thenLabel?: React$1.ReactNode;
+    /**
+     * Override the default leading icon in the Then strip (`FileOutput`).
+     */
+    thenIcon?: React$1.ReactNode;
+    /**
+     * Body content — typically `<RuleBuilderClause />` with conditions and
+     * connectors composed inside. Rendered only when the card is open.
+     */
+    children?: React$1.ReactNode;
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"rule-builder"`.
+     */
+    "data-testid"?: string;
+}
+interface RuleBuilderClauseProps {
+    /**
+     * Clause label shown above the conditions (e.g. "IF", "WHEN"). Pass a
+     * string or any node for full custom control.
+     */
+    label?: React$1.ReactNode;
+    /**
+     * Conditions, connectors, and the `<RuleBuilderAddCondition />` button.
+     */
+    children?: React$1.ReactNode;
+    className?: string;
+}
+interface RuleBuilderConditionProps {
+    /**
+     * The cells of the condition row — typically 3 `<Select />` triggers
+     * (field, operator, value). Rendered with `gap-2` between them.
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Called when the trash icon at the end of the row is clicked. Omit to
+     * hide the icon entirely (e.g. for the only / first condition).
+     */
+    onDelete?: () => void;
+    className?: string;
+}
+interface RuleBuilderConnectorProps {
+    /**
+     * Connector control — usually a `<Select />` showing "AND" / "OR".
+     * Rendered between two condition rows with vertical lines above and
+     * below for visual continuity.
+     */
+    children?: React$1.ReactNode;
+    className?: string;
+}
+interface RuleBuilderAddConditionProps {
+    /**
+     * Button label — defaults to "Add Condition".
+     */
+    label?: React$1.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+    "data-testid"?: string;
+}
+
+/**
+ * RuleBuilder — composable card for defining a single rule.
+ *
+ * Figma reference: 6587:462
+ *
+ * Layout: a grey-wrapped card with a header (badge + delete + collapse
+ * toggle), a collapsible body that hosts the IF clause(s), and an
+ * optional bottom strip ("Then set field value to ...") in the grey
+ * wrapper area below the white card.
+ *
+ * Children compose the body using the sibling exports:
+ *   - `<RuleBuilderClause label="IF">` — wraps a group of conditions
+ *   - `<RuleBuilderCondition>` — a single row, typically 3 Selects
+ *   - `<RuleBuilderConnector>` — AND/OR pill between two conditions
+ *   - `<RuleBuilderAddCondition onClick={...} />` — outline pill button
+ *
+ * Open state is controlled (`open` + `onOpenChange`) or uncontrolled
+ * (`defaultOpen`), mirroring the pattern used by `<Accordion />`.
+ */
+declare const RuleBuilder: React$1.ForwardRefExoticComponent<RuleBuilderProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Group of conditions under a labelled clause (e.g. "IF"). Typically
+ * holds `<RuleBuilderCondition />` rows separated by
+ * `<RuleBuilderConnector />`, terminated by `<RuleBuilderAddCondition />`.
+ */
+declare const RuleBuilderClause: React$1.ForwardRefExoticComponent<RuleBuilderClauseProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * A single condition row. Children are usually 3 Selects (field,
+ * operator, value); the row appends a trailing trash icon when
+ * `onDelete` is provided. Use `className="w-[144px]"` on the
+ * `<SelectTrigger />` for the wide cells to match the Figma layout.
+ */
+declare const RuleBuilderCondition: React$1.ForwardRefExoticComponent<RuleBuilderConditionProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * AND/OR connector pill rendered between two conditions. Wraps the
+ * connector control with vertical lines above and below to mirror the
+ * Figma reference. Pass a `<Select />` (or any node) as children.
+ */
+declare const RuleBuilderConnector: React$1.ForwardRefExoticComponent<RuleBuilderConnectorProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * "+ Add Condition" outline-pill button. Forwards all native button
+ * props (`onClick`, `disabled`, etc.) — `label` overrides the text.
+ */
+declare const RuleBuilderAddCondition: React$1.ForwardRefExoticComponent<RuleBuilderAddConditionProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+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, MultiSelect, type MultiSelectItem, type MultiSelectProps, 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, RuleBuilder, RuleBuilderAddCondition, type RuleBuilderAddConditionProps, RuleBuilderClause, type RuleBuilderClauseProps, RuleBuilderCondition, type RuleBuilderConditionProps, RuleBuilderConnector, type RuleBuilderConnectorProps, type RuleBuilderProps, Select, SelectContent, type SelectContentItem, SelectFormLabel, SelectGroup, type SelectGroupProps, SelectItem, SelectLabel, type SelectLabelProps, type SelectMenuItemProps, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShadowDOMWrapper, type ShowToastOptions, SidePanel, type SidePanelProps, type SidePanelSize, Slider, type SliderProps, 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, Toggle, ToggleItem, type ToggleItemProps, type ToggleProps, type ToggleType, 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

@@ -3418,4 +3418,149 @@ interface MultiSelectProps<T extends string = string> {
  */
 declare function MultiSelect<T extends string = string>({ value, onValueChange, items, placeholder, label, showSearch, searchPlaceholder, showSelectAll, size, bg, disabled, maxHeight, id, className, "data-testid": dataTestId, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
 
-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, MultiSelect, type MultiSelectItem, type MultiSelectProps, 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, SidePanel, type SidePanelProps, type SidePanelSize, Slider, type SliderProps, 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, Toggle, ToggleItem, type ToggleItemProps, type ToggleProps, type ToggleType, 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 };
+interface RuleBuilderProps {
+    /**
+     * Badge label shown in the header (e.g. "Rule 1").
+     */
+    title: string;
+    /**
+     * Controlled open state. When provided, `defaultOpen` is ignored and
+     * the consumer is responsible for toggling via `onOpenChange`.
+     */
+    open?: boolean;
+    /**
+     * Initial open state for the uncontrolled mode. Defaults to `true`.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Called when the user toggles the chevron in the header.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Called when the user clicks the trash icon in the header. Omit to
+     * hide the delete button entirely.
+     */
+    onDelete?: () => void;
+    /**
+     * Optional icon shown in the title badge before the label. Defaults to
+     * a `Workflow` glyph matching the Figma reference.
+     */
+    titleIcon?: React$1.ReactNode;
+    /**
+     * Bottom strip rendered in the grey wrapper area below the white card.
+     * Pass an `<Input />` (or similar) — the label, icon, and layout are
+     * provided by RuleBuilder. Omit to hide the strip entirely (e.g. for
+     * rules that don't set a field value).
+     */
+    thenContent?: React$1.ReactNode;
+    /**
+     * Override the default "Then set field value to" label.
+     */
+    thenLabel?: React$1.ReactNode;
+    /**
+     * Override the default leading icon in the Then strip (`FileOutput`).
+     */
+    thenIcon?: React$1.ReactNode;
+    /**
+     * Body content — typically `<RuleBuilderClause />` with conditions and
+     * connectors composed inside. Rendered only when the card is open.
+     */
+    children?: React$1.ReactNode;
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"rule-builder"`.
+     */
+    "data-testid"?: string;
+}
+interface RuleBuilderClauseProps {
+    /**
+     * Clause label shown above the conditions (e.g. "IF", "WHEN"). Pass a
+     * string or any node for full custom control.
+     */
+    label?: React$1.ReactNode;
+    /**
+     * Conditions, connectors, and the `<RuleBuilderAddCondition />` button.
+     */
+    children?: React$1.ReactNode;
+    className?: string;
+}
+interface RuleBuilderConditionProps {
+    /**
+     * The cells of the condition row — typically 3 `<Select />` triggers
+     * (field, operator, value). Rendered with `gap-2` between them.
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Called when the trash icon at the end of the row is clicked. Omit to
+     * hide the icon entirely (e.g. for the only / first condition).
+     */
+    onDelete?: () => void;
+    className?: string;
+}
+interface RuleBuilderConnectorProps {
+    /**
+     * Connector control — usually a `<Select />` showing "AND" / "OR".
+     * Rendered between two condition rows with vertical lines above and
+     * below for visual continuity.
+     */
+    children?: React$1.ReactNode;
+    className?: string;
+}
+interface RuleBuilderAddConditionProps {
+    /**
+     * Button label — defaults to "Add Condition".
+     */
+    label?: React$1.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+    "data-testid"?: string;
+}
+
+/**
+ * RuleBuilder — composable card for defining a single rule.
+ *
+ * Figma reference: 6587:462
+ *
+ * Layout: a grey-wrapped card with a header (badge + delete + collapse
+ * toggle), a collapsible body that hosts the IF clause(s), and an
+ * optional bottom strip ("Then set field value to ...") in the grey
+ * wrapper area below the white card.
+ *
+ * Children compose the body using the sibling exports:
+ *   - `<RuleBuilderClause label="IF">` — wraps a group of conditions
+ *   - `<RuleBuilderCondition>` — a single row, typically 3 Selects
+ *   - `<RuleBuilderConnector>` — AND/OR pill between two conditions
+ *   - `<RuleBuilderAddCondition onClick={...} />` — outline pill button
+ *
+ * Open state is controlled (`open` + `onOpenChange`) or uncontrolled
+ * (`defaultOpen`), mirroring the pattern used by `<Accordion />`.
+ */
+declare const RuleBuilder: React$1.ForwardRefExoticComponent<RuleBuilderProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Group of conditions under a labelled clause (e.g. "IF"). Typically
+ * holds `<RuleBuilderCondition />` rows separated by
+ * `<RuleBuilderConnector />`, terminated by `<RuleBuilderAddCondition />`.
+ */
+declare const RuleBuilderClause: React$1.ForwardRefExoticComponent<RuleBuilderClauseProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * A single condition row. Children are usually 3 Selects (field,
+ * operator, value); the row appends a trailing trash icon when
+ * `onDelete` is provided. Use `className="w-[144px]"` on the
+ * `<SelectTrigger />` for the wide cells to match the Figma layout.
+ */
+declare const RuleBuilderCondition: React$1.ForwardRefExoticComponent<RuleBuilderConditionProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * AND/OR connector pill rendered between two conditions. Wraps the
+ * connector control with vertical lines above and below to mirror the
+ * Figma reference. Pass a `<Select />` (or any node) as children.
+ */
+declare const RuleBuilderConnector: React$1.ForwardRefExoticComponent<RuleBuilderConnectorProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * "+ Add Condition" outline-pill button. Forwards all native button
+ * props (`onClick`, `disabled`, etc.) — `label` overrides the text.
+ */
+declare const RuleBuilderAddCondition: React$1.ForwardRefExoticComponent<RuleBuilderAddConditionProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+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, MultiSelect, type MultiSelectItem, type MultiSelectProps, 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, RuleBuilder, RuleBuilderAddCondition, type RuleBuilderAddConditionProps, RuleBuilderClause, type RuleBuilderClauseProps, RuleBuilderCondition, type RuleBuilderConditionProps, RuleBuilderConnector, type RuleBuilderConnectorProps, type RuleBuilderProps, Select, SelectContent, type SelectContentItem, SelectFormLabel, SelectGroup, type SelectGroupProps, SelectItem, SelectLabel, type SelectLabelProps, type SelectMenuItemProps, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShadowDOMWrapper, type ShowToastOptions, SidePanel, type SidePanelProps, type SidePanelSize, Slider, type SliderProps, 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, Toggle, ToggleItem, type ToggleItemProps, type ToggleProps, type ToggleType, 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

@@ -6537,6 +6537,11 @@ __export(index_exports, {
   ProgressBar: () => ProgressBar,
   RadioGroup: () => RadioGroup,
   RadioGroupItem: () => RadioGroupItem,
+  RuleBuilder: () => RuleBuilder,
+  RuleBuilderAddCondition: () => RuleBuilderAddCondition,
+  RuleBuilderClause: () => RuleBuilderClause,
+  RuleBuilderCondition: () => RuleBuilderCondition,
+  RuleBuilderConnector: () => RuleBuilderConnector,
   Select: () => Select,
   SelectContent: () => SelectContent,
   SelectFormLabel: () => SelectFormLabel,
@@ -10180,15 +10185,25 @@ var SelectContent = React21.forwardRef(
     const handleSearchBlur = React21.useCallback(
       (e) => {
         const next = e.relatedTarget;
-        if ((next == null ? void 0 : next.getAttribute("role")) === "option") {
-          requestAnimationFrame(() => {
-            var _a5;
-            (_a5 = searchInputRef.current) == null ? void 0 : _a5.focus({ preventScroll: true });
-          });
-        }
+        const isSelectItem = (next == null ? void 0 : next.getAttribute("role")) === "option";
+        if (!isSelectItem && next !== null) return;
+        requestAnimationFrame(() => {
+          var _a5;
+          (_a5 = searchInputRef.current) == null ? void 0 : _a5.focus({ preventScroll: true });
+        });
       },
       []
     );
+    React21.useEffect(() => {
+      if (!searchInputRef.current) return;
+      const id = requestAnimationFrame(() => {
+        var _a5;
+        if (document.activeElement !== searchInputRef.current) {
+          (_a5 = searchInputRef.current) == null ? void 0 : _a5.focus({ preventScroll: true });
+        }
+      });
+      return () => cancelAnimationFrame(id);
+    }, [searchQuery]);
     const content = items ? isSectionArray(items) ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: filteredItems.map(
       (section, sectionIdx) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(SelectGroup, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SelectLabel, { children: section.sectionLabel }),
@@ -17343,6 +17358,183 @@ function MultiSelectRow({
     }
   );
 }
+
+// src/rule-builder/rule-builder.tsx
+var React48 = __toESM(require("react"));
+var import_lucide_react25 = require("lucide-react");
+
+// src/rule-builder/variables.ts
+var RULE_BUILDER_TOKENS = {
+  // Outer grey wrapper — Figma: bg-grey, rounded-[16px], p-1, gap-1
+  root: "flex flex-col gap-1 p-1 rounded-2xl bg-token-grey w-full",
+  // White card — Figma: bg-white, rounded-[12px], overflow-clip
+  card: "flex flex-col gap-2 overflow-clip pb-2 rounded-xl bg-token-white w-full",
+  cardCollapsed: "flex flex-col overflow-clip rounded-xl bg-token-white w-full",
+  // Header row — Figma: p-2, justify-between, items-center
+  header: "flex items-center justify-between p-2 w-full bg-token-white",
+  headerActions: "flex items-center gap-3 shrink-0",
+  // Body — Figma: flex-col, gap-2, px-2
+  body: "flex flex-col gap-2 px-2 w-full",
+  // IF / clause label row — Figma: pl-3, pr-1 around the label
+  clauseLabel: "flex items-center pl-3 pr-1 text-sm font-semibold leading-5 text-fg-grey-secondary",
+  // Conditions group — connects rows with vertical line tokens
+  conditionsGroup: "flex flex-col w-full",
+  // Single condition row — Figma: gap-2, items-start
+  conditionRow: "flex items-start gap-2 w-full",
+  // Vertical connector line — Figma: 16px tall, 1px wide line at px-7
+  connectorLine: "flex items-center px-7 w-full",
+  connectorLineInner: "w-px h-4 bg-token-input",
+  // AND/OR connector row — same layout as conditionRow so the connector
+  // dropdown aligns with the first select in the row above/below.
+  connectorRow: "flex items-start gap-2 w-full",
+  // Add Condition button slot — Figma: pt-3
+  addConditionRow: "flex items-start w-full pt-3",
+  // "Then" strip in the grey wrapper area — Figma: px-2 py-3, items-center, gap-2
+  thenStrip: "flex items-center gap-2 px-2 py-3 w-full",
+  thenLabel: "flex items-center gap-2 px-1 text-sm font-semibold leading-5 text-fg-black shrink-0 [&>svg]:size-4 [&>svg]:shrink-0",
+  thenContent: "flex flex-1 min-w-0",
+  // Phantom slot — invisible placeholder used to keep the AND row aligned
+  // with the 3-column condition rows above and below (matches the
+  // `opacity-0` Selects in the Figma).
+  phantomSlot: "invisible shrink-0"
+};
+
+// src/rule-builder/rule-builder.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var RuleBuilder = React48.forwardRef(
+  ({
+    title,
+    open: openProp,
+    defaultOpen = true,
+    onOpenChange,
+    onDelete,
+    titleIcon,
+    thenContent,
+    thenLabel = "Then set field value to",
+    thenIcon,
+    children,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [openState, setOpenState] = React48.useState(defaultOpen);
+    const isControlled = openProp !== void 0;
+    const open = isControlled ? openProp : openState;
+    const handleToggle = React48.useCallback(() => {
+      const next = !open;
+      if (!isControlled) setOpenState(next);
+      onOpenChange == null ? void 0 : onOpenChange(next);
+    }, [open, isControlled, onOpenChange]);
+    const titleIconNode = titleIcon != null ? titleIcon : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Workflow, {});
+    const thenIconNode = thenIcon != null ? thenIcon : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.FileOutput, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(RULE_BUILDER_TOKENS.root, className),
+        style,
+        "data-testid": dataTestId != null ? dataTestId : "rule-builder",
+        "data-state": open ? "open" : "closed",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+            "div",
+            {
+              className: open ? RULE_BUILDER_TOKENS.card : RULE_BUILDER_TOKENS.cardCollapsed,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: RULE_BUILDER_TOKENS.header, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Badge, { variant: "default", interactive: false, leadingIcon: titleIconNode, children: title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: RULE_BUILDER_TOKENS.headerActions, children: [
+                    onDelete ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                      Button,
+                      {
+                        variant: "iconLink",
+                        size: "iconXs",
+                        leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Trash2, {}),
+                        onClick: onDelete,
+                        "aria-label": "Delete rule",
+                        "data-testid": "rule-builder-delete"
+                      }
+                    ) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                      Button,
+                      {
+                        variant: "iconLink",
+                        size: "iconXs",
+                        leadingIcon: open ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.ChevronDown, {}),
+                        onClick: handleToggle,
+                        "aria-expanded": open,
+                        "aria-label": open ? "Collapse rule" : "Expand rule",
+                        "data-testid": "rule-builder-toggle"
+                      }
+                    )
+                  ] })
+                ] }),
+                open ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: RULE_BUILDER_TOKENS.body, children }) : null
+              ]
+            }
+          ),
+          open && thenContent ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: RULE_BUILDER_TOKENS.thenStrip, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: RULE_BUILDER_TOKENS.thenLabel, children: [
+              thenIconNode,
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: thenLabel })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: RULE_BUILDER_TOKENS.thenContent, children: thenContent })
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+RuleBuilder.displayName = "RuleBuilder";
+var RuleBuilderClause = React48.forwardRef(({ label = "IF", children, className }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ref, className: cn("flex flex-col gap-2 w-full", className), children: [
+  label !== null && label !== void 0 && label !== "" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: RULE_BUILDER_TOKENS.clauseLabel, children: label }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: RULE_BUILDER_TOKENS.conditionsGroup, children })
+] }));
+RuleBuilderClause.displayName = "RuleBuilderClause";
+var RuleBuilderCondition = React48.forwardRef(({ children, onDelete, className }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ref, className: cn(RULE_BUILDER_TOKENS.conditionRow, className), children: [
+  children,
+  onDelete ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    Button,
+    {
+      variant: "iconLink",
+      size: "iconXs",
+      leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Trash2, {}),
+      onClick: onDelete,
+      "aria-label": "Delete condition",
+      "data-testid": "rule-builder-condition-delete"
+    }
+  ) : null
+] }));
+RuleBuilderCondition.displayName = "RuleBuilderCondition";
+var RuleBuilderConnector = React48.forwardRef(({ children, className }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ref, className: cn("flex flex-col w-full", className), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: RULE_BUILDER_TOKENS.connectorLine, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: RULE_BUILDER_TOKENS.connectorLineInner }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: RULE_BUILDER_TOKENS.connectorRow, children }),
+  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: RULE_BUILDER_TOKENS.connectorLine, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: RULE_BUILDER_TOKENS.connectorLineInner }) })
+] }));
+RuleBuilderConnector.displayName = "RuleBuilderConnector";
+var RuleBuilderAddCondition = React48.forwardRef(
+  ({
+    label = "Add Condition",
+    onClick,
+    disabled,
+    className,
+    "data-testid": dataTestId
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: RULE_BUILDER_TOKENS.addConditionRow, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    Button,
+    {
+      ref,
+      variant: "outline",
+      size: "xs",
+      leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Plus, {}),
+      onClick,
+      disabled,
+      className,
+      "data-testid": dataTestId != null ? dataTestId : "rule-builder-add-condition",
+      children: label
+    }
+  ) })
+);
+RuleBuilderAddCondition.displayName = "RuleBuilderAddCondition";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -17397,6 +17589,11 @@ function MultiSelectRow({
   ProgressBar,
   RadioGroup,
   RadioGroupItem,
+  RuleBuilder,
+  RuleBuilderAddCondition,
+  RuleBuilderClause,
+  RuleBuilderCondition,
+  RuleBuilderConnector,
   Select,
   SelectContent,
   SelectFormLabel,

package/dist/index.mjs

@@ -10072,15 +10072,25 @@ var SelectContent = React21.forwardRef(
     const handleSearchBlur = React21.useCallback(
       (e) => {
         const next = e.relatedTarget;
-        if ((next == null ? void 0 : next.getAttribute("role")) === "option") {
-          requestAnimationFrame(() => {
-            var _a5;
-            (_a5 = searchInputRef.current) == null ? void 0 : _a5.focus({ preventScroll: true });
-          });
-        }
+        const isSelectItem = (next == null ? void 0 : next.getAttribute("role")) === "option";
+        if (!isSelectItem && next !== null) return;
+        requestAnimationFrame(() => {
+          var _a5;
+          (_a5 = searchInputRef.current) == null ? void 0 : _a5.focus({ preventScroll: true });
+        });
       },
       []
     );
+    React21.useEffect(() => {
+      if (!searchInputRef.current) return;
+      const id = requestAnimationFrame(() => {
+        var _a5;
+        if (document.activeElement !== searchInputRef.current) {
+          (_a5 = searchInputRef.current) == null ? void 0 : _a5.focus({ preventScroll: true });
+        }
+      });
+      return () => cancelAnimationFrame(id);
+    }, [searchQuery]);
     const content = items ? isSectionArray(items) ? /* @__PURE__ */ jsx19(Fragment5, { children: filteredItems.map(
       (section, sectionIdx) => /* @__PURE__ */ jsxs14(SelectGroup, { children: [
         /* @__PURE__ */ jsx19(SelectLabel, { children: section.sectionLabel }),
@@ -17251,6 +17261,190 @@ function MultiSelectRow({
     }
   );
 }
+
+// src/rule-builder/rule-builder.tsx
+import * as React48 from "react";
+import {
+  ChevronDown as ChevronDown9,
+  ChevronUp as ChevronUp2,
+  FileOutput,
+  Plus,
+  Trash2 as Trash23,
+  Workflow
+} from "lucide-react";
+
+// src/rule-builder/variables.ts
+var RULE_BUILDER_TOKENS = {
+  // Outer grey wrapper — Figma: bg-grey, rounded-[16px], p-1, gap-1
+  root: "flex flex-col gap-1 p-1 rounded-2xl bg-token-grey w-full",
+  // White card — Figma: bg-white, rounded-[12px], overflow-clip
+  card: "flex flex-col gap-2 overflow-clip pb-2 rounded-xl bg-token-white w-full",
+  cardCollapsed: "flex flex-col overflow-clip rounded-xl bg-token-white w-full",
+  // Header row — Figma: p-2, justify-between, items-center
+  header: "flex items-center justify-between p-2 w-full bg-token-white",
+  headerActions: "flex items-center gap-3 shrink-0",
+  // Body — Figma: flex-col, gap-2, px-2
+  body: "flex flex-col gap-2 px-2 w-full",
+  // IF / clause label row — Figma: pl-3, pr-1 around the label
+  clauseLabel: "flex items-center pl-3 pr-1 text-sm font-semibold leading-5 text-fg-grey-secondary",
+  // Conditions group — connects rows with vertical line tokens
+  conditionsGroup: "flex flex-col w-full",
+  // Single condition row — Figma: gap-2, items-start
+  conditionRow: "flex items-start gap-2 w-full",
+  // Vertical connector line — Figma: 16px tall, 1px wide line at px-7
+  connectorLine: "flex items-center px-7 w-full",
+  connectorLineInner: "w-px h-4 bg-token-input",
+  // AND/OR connector row — same layout as conditionRow so the connector
+  // dropdown aligns with the first select in the row above/below.
+  connectorRow: "flex items-start gap-2 w-full",
+  // Add Condition button slot — Figma: pt-3
+  addConditionRow: "flex items-start w-full pt-3",
+  // "Then" strip in the grey wrapper area — Figma: px-2 py-3, items-center, gap-2
+  thenStrip: "flex items-center gap-2 px-2 py-3 w-full",
+  thenLabel: "flex items-center gap-2 px-1 text-sm font-semibold leading-5 text-fg-black shrink-0 [&>svg]:size-4 [&>svg]:shrink-0",
+  thenContent: "flex flex-1 min-w-0",
+  // Phantom slot — invisible placeholder used to keep the AND row aligned
+  // with the 3-column condition rows above and below (matches the
+  // `opacity-0` Selects in the Figma).
+  phantomSlot: "invisible shrink-0"
+};
+
+// src/rule-builder/rule-builder.tsx
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+var RuleBuilder = React48.forwardRef(
+  ({
+    title,
+    open: openProp,
+    defaultOpen = true,
+    onOpenChange,
+    onDelete,
+    titleIcon,
+    thenContent,
+    thenLabel = "Then set field value to",
+    thenIcon,
+    children,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [openState, setOpenState] = React48.useState(defaultOpen);
+    const isControlled = openProp !== void 0;
+    const open = isControlled ? openProp : openState;
+    const handleToggle = React48.useCallback(() => {
+      const next = !open;
+      if (!isControlled) setOpenState(next);
+      onOpenChange == null ? void 0 : onOpenChange(next);
+    }, [open, isControlled, onOpenChange]);
+    const titleIconNode = titleIcon != null ? titleIcon : /* @__PURE__ */ jsx44(Workflow, {});
+    const thenIconNode = thenIcon != null ? thenIcon : /* @__PURE__ */ jsx44(FileOutput, {});
+    return /* @__PURE__ */ jsxs34(
+      "div",
+      {
+        ref,
+        className: cn(RULE_BUILDER_TOKENS.root, className),
+        style,
+        "data-testid": dataTestId != null ? dataTestId : "rule-builder",
+        "data-state": open ? "open" : "closed",
+        children: [
+          /* @__PURE__ */ jsxs34(
+            "div",
+            {
+              className: open ? RULE_BUILDER_TOKENS.card : RULE_BUILDER_TOKENS.cardCollapsed,
+              children: [
+                /* @__PURE__ */ jsxs34("div", { className: RULE_BUILDER_TOKENS.header, children: [
+                  /* @__PURE__ */ jsx44(Badge, { variant: "default", interactive: false, leadingIcon: titleIconNode, children: title }),
+                  /* @__PURE__ */ jsxs34("div", { className: RULE_BUILDER_TOKENS.headerActions, children: [
+                    onDelete ? /* @__PURE__ */ jsx44(
+                      Button,
+                      {
+                        variant: "iconLink",
+                        size: "iconXs",
+                        leadingIcon: /* @__PURE__ */ jsx44(Trash23, {}),
+                        onClick: onDelete,
+                        "aria-label": "Delete rule",
+                        "data-testid": "rule-builder-delete"
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx44(
+                      Button,
+                      {
+                        variant: "iconLink",
+                        size: "iconXs",
+                        leadingIcon: open ? /* @__PURE__ */ jsx44(ChevronUp2, {}) : /* @__PURE__ */ jsx44(ChevronDown9, {}),
+                        onClick: handleToggle,
+                        "aria-expanded": open,
+                        "aria-label": open ? "Collapse rule" : "Expand rule",
+                        "data-testid": "rule-builder-toggle"
+                      }
+                    )
+                  ] })
+                ] }),
+                open ? /* @__PURE__ */ jsx44("div", { className: RULE_BUILDER_TOKENS.body, children }) : null
+              ]
+            }
+          ),
+          open && thenContent ? /* @__PURE__ */ jsxs34("div", { className: RULE_BUILDER_TOKENS.thenStrip, children: [
+            /* @__PURE__ */ jsxs34("div", { className: RULE_BUILDER_TOKENS.thenLabel, children: [
+              thenIconNode,
+              /* @__PURE__ */ jsx44("span", { children: thenLabel })
+            ] }),
+            /* @__PURE__ */ jsx44("div", { className: RULE_BUILDER_TOKENS.thenContent, children: thenContent })
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+RuleBuilder.displayName = "RuleBuilder";
+var RuleBuilderClause = React48.forwardRef(({ label = "IF", children, className }, ref) => /* @__PURE__ */ jsxs34("div", { ref, className: cn("flex flex-col gap-2 w-full", className), children: [
+  label !== null && label !== void 0 && label !== "" ? /* @__PURE__ */ jsx44("div", { className: RULE_BUILDER_TOKENS.clauseLabel, children: label }) : null,
+  /* @__PURE__ */ jsx44("div", { className: RULE_BUILDER_TOKENS.conditionsGroup, children })
+] }));
+RuleBuilderClause.displayName = "RuleBuilderClause";
+var RuleBuilderCondition = React48.forwardRef(({ children, onDelete, className }, ref) => /* @__PURE__ */ jsxs34("div", { ref, className: cn(RULE_BUILDER_TOKENS.conditionRow, className), children: [
+  children,
+  onDelete ? /* @__PURE__ */ jsx44(
+    Button,
+    {
+      variant: "iconLink",
+      size: "iconXs",
+      leadingIcon: /* @__PURE__ */ jsx44(Trash23, {}),
+      onClick: onDelete,
+      "aria-label": "Delete condition",
+      "data-testid": "rule-builder-condition-delete"
+    }
+  ) : null
+] }));
+RuleBuilderCondition.displayName = "RuleBuilderCondition";
+var RuleBuilderConnector = React48.forwardRef(({ children, className }, ref) => /* @__PURE__ */ jsxs34("div", { ref, className: cn("flex flex-col w-full", className), children: [
+  /* @__PURE__ */ jsx44("div", { className: RULE_BUILDER_TOKENS.connectorLine, "aria-hidden": "true", children: /* @__PURE__ */ jsx44("div", { className: RULE_BUILDER_TOKENS.connectorLineInner }) }),
+  /* @__PURE__ */ jsx44("div", { className: RULE_BUILDER_TOKENS.connectorRow, children }),
+  /* @__PURE__ */ jsx44("div", { className: RULE_BUILDER_TOKENS.connectorLine, "aria-hidden": "true", children: /* @__PURE__ */ jsx44("div", { className: RULE_BUILDER_TOKENS.connectorLineInner }) })
+] }));
+RuleBuilderConnector.displayName = "RuleBuilderConnector";
+var RuleBuilderAddCondition = React48.forwardRef(
+  ({
+    label = "Add Condition",
+    onClick,
+    disabled,
+    className,
+    "data-testid": dataTestId
+  }, ref) => /* @__PURE__ */ jsx44("div", { className: RULE_BUILDER_TOKENS.addConditionRow, children: /* @__PURE__ */ jsx44(
+    Button,
+    {
+      ref,
+      variant: "outline",
+      size: "xs",
+      leadingIcon: /* @__PURE__ */ jsx44(Plus, {}),
+      onClick,
+      disabled,
+      className,
+      "data-testid": dataTestId != null ? dataTestId : "rule-builder-add-condition",
+      children: label
+    }
+  ) })
+);
+RuleBuilderAddCondition.displayName = "RuleBuilderAddCondition";
 export {
   Accordion,
   AccordionContent,
@@ -17304,6 +17498,11 @@ export {
   ProgressBar,
   RadioGroup,
   RadioGroupItem,
+  RuleBuilder,
+  RuleBuilderAddCondition,
+  RuleBuilderClause,
+  RuleBuilderCondition,
+  RuleBuilderConnector,
   Select,
   SelectContent,
   SelectFormLabel,

package/dist/styles.css

@@ -225,6 +225,9 @@
   .lego-land .collapse {
     visibility: collapse;
   }
+  .lego-land .invisible {
+    visibility: hidden;
+  }
   .lego-land .visible {
     visibility: visible;
   }
@@ -725,6 +728,9 @@
   .lego-land .w-\[120px\] {
     width: 120px;
   }
+  .lego-land .w-\[144px\] {
+    width: 144px;
+  }
   .lego-land .w-\[196px\] {
     width: 196px;
   }
@@ -746,6 +752,9 @@
   .lego-land .w-\[336px\] {
     width: 336px;
   }
+  .lego-land .w-\[380px\] {
+    width: 380px;
+  }
   .lego-land .w-\[390px\] {
     width: 390px;
   }
@@ -1381,6 +1390,9 @@
       background-color: color-mix(in oklab, hsl(var(--bg-grey)) 50%, transparent);
     }
   }
+  .lego-land .bg-token-input {
+    background-color: hsl(var(--border-input));
+  }
   .lego-land .bg-token-light {
     background-color: hsl(var(--border-light));
   }
@@ -1512,6 +1524,9 @@
   .lego-land .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .lego-land .px-7 {
+    padding-inline: calc(var(--spacing) * 7);
+  }
   .lego-land .px-8 {
     padding-inline: calc(var(--spacing) * 8);
   }
@@ -1593,12 +1608,18 @@
   .lego-land .pt-1 {
     padding-top: calc(var(--spacing) * 1);
   }
+  .lego-land .pt-3 {
+    padding-top: calc(var(--spacing) * 3);
+  }
   .lego-land .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
   .lego-land .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
+  .lego-land .pr-1 {
+    padding-right: calc(var(--spacing) * 1);
+  }
   .lego-land .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -1623,6 +1644,9 @@
   .lego-land .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
+  .lego-land .pl-3 {
+    padding-left: calc(var(--spacing) * 3);
+  }
   .lego-land .pl-5 {
     padding-left: calc(var(--spacing) * 5);
   }
@@ -3073,6 +3097,11 @@
       width: 100%;
     }
   }
+  .lego-land .\[\&\>svg\]\:shrink-0 {
+    .lego-land &>svg {
+      flex-shrink: 0;
+    }
+  }
   .lego-land .\[\&\>svg\]\:fill-current {
     .lego-land &>svg {
       fill: currentcolor;

package/package.json

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