@cere/cere-design-system 0.0.18 → 0.0.20

package/dist/index.d.mts

@@ -125,6 +125,45 @@ declare const deploymentStatusColors: {
     disabled: string;
     disabledDim: string;
 };
+/**
+ * ROB primary brand color palette (Figma node 11-1393)
+ * Four main brand colors for the ROB design system
+ */
+declare const robPrimaryPalette: {
+    /** Primary magenta/pink - Figma node 11-1394 */
+    readonly fandango: "#BD32A7";
+    /** Vivid purple - Figma node 11-1407 */
+    readonly electricViolet: "#8B00EC";
+    /** Mid-tone purple - Figma node 11-1420 */
+    readonly ultraViolet: "#6750A4";
+    /** Light lavender - Figma node 11-1433 */
+    readonly periwinkle: "#D0BCFF";
+};
+/**
+ * ROB extended palette with additional swatches (Figma node 11-1447)
+ * Gradient shades and secondary accents from the ROB color grid
+ */
+declare const robPaletteExtended: {
+    readonly dark1: "#280e61";
+    readonly dark2: "#531584";
+    readonly dark3: "#710c7a";
+    readonly dark4: "#920269";
+    readonly dark5: "#c71454";
+    readonly dark6: "#ff6341";
+    readonly bright1: "#5311e3";
+    readonly bright2: "#eb03ff";
+    readonly bright3: "#ff17ab";
+    readonly bright4: "#ff6a85";
+    readonly light1: "#baa0f4";
+    readonly light2: "#d399fc";
+    readonly light3: "#f79aff";
+    readonly light4: "#faabde";
+    readonly light5: "#ffc4ce";
+    readonly nearBlack1: "#0b0f18";
+    readonly nearBlack2: "#0d0627";
+    readonly nearBlack3: "#161d30";
+    readonly nearBlack4: "#23194b";
+};
 declare const theme: Theme;
 
 declare const CheckMarkAnimation: () => react_jsx_runtime.JSX.Element;
@@ -152,9 +191,24 @@ declare const useIsMobile: () => boolean;
 
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 interface ButtonProps extends Omit<ButtonProps$1, 'variant' | 'color'> {
+    /**
+     * The visual style variant of the button
+     * - primary: Filled button with primary color background
+     * - secondary: Outlined button with transparent background and border
+     * - tertiary: Text button with no background or border
+     */
     variant?: ButtonVariant;
+    /**
+     * The size of the button
+     */
     size?: 'small' | 'medium' | 'large';
+    /**
+     * Icon element to display before the button text
+     */
     startIcon?: React__default.ReactNode;
+    /**
+     * Icon element to display after the button text
+     */
     endIcon?: React__default.ReactNode;
 }
 declare const Button: React__default.FC<ButtonProps>;
@@ -925,6 +979,108 @@ interface ChipProps extends Omit<ChipProps$1, 'color' | 'variant'> {
 }
 declare const Chip: React__default.FC<ChipProps>;
 
+/**
+ * Color variants for the RoleBadge component
+ */
+type RoleBadgeColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning';
+/**
+ * Size variants for the RoleBadge component
+ */
+type RoleBadgeSize = 'small' | 'medium';
+/**
+ * RoleBadge component props
+ */
+interface RoleBadgeProps extends Omit<ChipProps$1, 'label' | 'variant' | 'color' | 'size'> {
+    /**
+     * The text content to display in the badge
+     */
+    label: string;
+    /**
+     * The color theme of the badge
+     * @default 'primary'
+     */
+    color?: RoleBadgeColor;
+    /**
+     * The size of the badge
+     * @default 'small'
+     */
+    size?: RoleBadgeSize;
+}
+/**
+ * RoleBadge - Pill-shaped badge component for displaying roles or status labels
+ *
+ * A reusable badge component that extends MUI Chip with a pill-shaped outline style.
+ * Designed for displaying user roles, status indicators, or categorization labels.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <RoleBadge label="Manager" />
+ *
+ * // With color variants
+ * <RoleBadge label="Admin" color="error" />
+ * <RoleBadge label="Active" color="success" />
+ *
+ * // With size variants
+ * <RoleBadge label="Owner" size="medium" />
+ * ```
+ *
+ * @see Figma node 17-3595 for design specifications
+ */
+declare const RoleBadge: React__default.FC<RoleBadgeProps>;
+
+/**
+ * IDBlock component props
+ */
+interface IDBlockProps {
+    /**
+     * The identifier value to display and copy
+     */
+    id: string;
+    /**
+     * Label prefix text
+     * @default 'ID'
+     */
+    label?: string;
+    /**
+     * Entity type for accessibility (used in aria-label)
+     * @default 'entity'
+     */
+    entityType?: string;
+    /**
+     * Additional callback to execute after successful copy
+     */
+    onCopy?: () => void;
+}
+/**
+ * IDBlock - Read-only identifier display with integrated copy-to-clipboard button
+ *
+ * A component that displays an identifier (ID, account number, etc.) with a copy button.
+ * Provides user feedback via Snackbar messages when copy succeeds or fails.
+ * Requires MessagesProvider to be present in the component tree.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <IDBlock id="W1234567890" />
+ *
+ * // With custom label
+ * <IDBlock id="ACC-9876543" label="Account ID" entityType="account" />
+ *
+ * // With callback
+ * <IDBlock
+ *   id="DEPLOY-12345"
+ *   label="Deployment ID"
+ *   entityType="deployment"
+ *   onCopy={() => console.log('ID copied')}
+ * />
+ * ```
+ *
+ * @see Figma node 17-3596 for design specifications
+ * @requires MessagesProvider - Must be wrapped in MessagesProvider context
+ */
+declare const IDBlock: React__default.FC<IDBlockProps>;
+
 type TooltipProps = TooltipProps$1;
 declare const Tooltip: React__default.FC<TooltipProps>;
 
@@ -991,6 +1147,104 @@ type LogoProps = PropsWithChildren<{
 }>;
 declare const Logo: ({ children, size, icon }: LogoProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Primary action configuration for EntityHeader
+ */
+interface PrimaryAction {
+    /**
+     * Button label text
+     */
+    label: string;
+    /**
+     * Optional count to display as "Label (N)"
+     */
+    count?: number;
+    /**
+     * Optional leading icon
+     */
+    icon?: React__default.ReactNode;
+    /**
+     * Click handler for the button
+     */
+    onClick?: () => void;
+}
+/**
+ * EntityHeader component props
+ */
+interface EntityHeaderProps {
+    /**
+     * Primary title text (e.g., entity name)
+     * @required
+     */
+    title: string;
+    /**
+     * Secondary descriptive text below title
+     */
+    subtitle?: string;
+    /**
+     * Role or status label - displays as RoleBadge pill
+     */
+    role?: string;
+    /**
+     * Entity identifier - displays as IDBlock with copy action
+     */
+    id?: string;
+    /**
+     * Main action button configuration
+     */
+    primaryAction?: PrimaryAction;
+    /**
+     * Callback when ID is copied (internal copy + this callback)
+     */
+    onCopyId?: () => void;
+    /**
+     * Callback when more options button clicked (receives event for anchor positioning)
+     */
+    onMoreOptions?: (event: React__default.MouseEvent<HTMLElement>) => void;
+    /**
+     * HTML heading level for the title element
+     * @default 'h2'
+     */
+    headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Show bottom divider line
+     * @default true
+     */
+    divider?: boolean;
+}
+/**
+ * EntityHeader - Composite UI component for entity (workspace, account, etc.) headers
+ *
+ * Displays an entity with title, optional subtitle, role badge, ID with copy action,
+ * primary action button, and more options control. Matches Figma node 15-1258 specifications.
+ *
+ * @example
+ * ```tsx
+ * // Full example with all props
+ * <EntityHeader
+ *   title="Game Co. WF 1769936170928"
+ *   subtitle="Gaming Demo Account"
+ *   role="Manager"
+ *   id="W1234567890"
+ *   primaryAction={{
+ *     label: 'Members',
+ *     count: 5,
+ *     icon: <AddCircleIcon />,
+ *     onClick: () => console.log('Open members')
+ *   }}
+ *   onCopyId={() => console.log('ID copied')}
+ *   onMoreOptions={(e) => setAnchorEl(e.currentTarget)}
+ * />
+ *
+ * // Minimal example
+ * <EntityHeader title="Simple Entity" />
+ * ```
+ *
+ * @see Figma node 15-1258 for design specifications
+ * @requires MessagesProvider - Must be wrapped in MessagesProvider context for ID copy feedback
+ */
+declare const EntityHeader: React__default.FC<EntityHeaderProps>;
+
 interface DialogProps extends Omit<DialogProps$1, 'title'> {
     open: boolean;
     title: ReactNode;
@@ -1131,6 +1385,7 @@ interface DeploymentCardAction {
     icon?: React__default.ReactNode;
     onClick?: () => void;
     highlight?: boolean;
+    outlined?: boolean;
 }
 interface DeploymentDashboardCardProps {
     /** Entity type: drives chip color and icon (Figma 15-1725, 15-1276) */
@@ -1157,8 +1412,6 @@ interface DeploymentDashboardCardProps {
     onExpandToggle?: () => void;
     /** When copy ID is clicked */
     onCopyId?: () => void;
-    /** Open context menu (three-dots) */
-    onContextMenu?: (e: React__default.MouseEvent) => void;
     /** Optional className */
     className?: string;
     /** Child content rendered inside the card border (used by tree to nest children) */
@@ -1166,41 +1419,86 @@ interface DeploymentDashboardCardProps {
 }
 declare const DeploymentDashboardCard: React__default.FC<DeploymentDashboardCardProps>;
 
+/**
+ * Describes a single item inside {@link DeploymentEntityContextMenu}.
+ *
+ * Items can be action rows (icon + label), toggle rows (switch + label),
+ * or visual dividers. Use the pre-built `contextMenuItems` factories
+ * for standard deployment-entity actions.
+ *
+ * @see Figma 11-1102
+ */
 interface ContextMenuItem {
+    /** Unique key used for React reconciliation */
     id: string;
+    /** Display label shown next to the icon */
     label: string;
+    /** Optional leading icon (24 × 24) */
     icon?: React__default.ReactNode;
+    /** Click handler — called when an action item is selected */
     onClick?: () => void;
-    type?: 'action' | 'toggle';
+    /**
+     * Item variant:
+     * - `'action'` (default) — clickable row with icon + label
+     * - `'toggle'` — switch on left + label, controlled by `enableChecked` / `onEnableChange`
+     * - `'divider'` — horizontal separator (label is ignored)
+     */
+    type?: 'action' | 'toggle' | 'divider';
+    /**
+     * When `true` the item renders with a blue highlight background
+     * (Figma blue-50 / blue-100 tokens). Used for the "Agent Flow Visualization" row.
+     * @default false
+     */
+    highlighted?: boolean;
 }
 /** Pre-built item factories for common deployment entity actions (Figma 11-1102) */
 declare const contextMenuItems: {
+    /** Add Engagement action (Add Circle icon) */
     readonly addEngagement: (onClick: () => void) => ContextMenuItem;
+    /** Add Agent action (Add Circle icon) */
     readonly addAgent: (onClick: () => void) => ContextMenuItem;
+    /** Add Stream action (Add Circle icon) */
     readonly addStream: (onClick: () => void) => ContextMenuItem;
+    /** Edit action (Pen / Edit icon) */
     readonly edit: (onClick: () => void) => ContextMenuItem;
+    /** Copy ID action (Copy icon) */
     readonly copyId: (onClick: () => void) => ContextMenuItem;
+    /** Agent Flow Visualization — highlighted action (SmartToy icon) */
     readonly agentFlowVisualization: (onClick: () => void) => ContextMenuItem;
+    /** View Logs action (Document / Description icon) */
     readonly viewLogs: (onClick: () => void) => ContextMenuItem;
+    /** Horizontal divider between sections */
+    readonly divider: () => ContextMenuItem;
+    /** Enable toggle row (switch on left + label) */
+    readonly enable: () => ContextMenuItem;
+    /** Settings action (Settings / Gear icon) */
     readonly settings: (onClick: () => void) => ContextMenuItem;
 };
 
 interface DeploymentEntityContextMenuProps {
     /** Controlled open state */
     open: boolean;
-    /** Anchor for menu position */
+    /** Anchor element for menu position */
     anchorEl: HTMLElement | null;
-    /** When menu closes */
+    /** Callback when the menu closes */
     onClose: () => void;
     /** Menu items to render (use contextMenuItems helpers to build) */
     items: ContextMenuItem[];
-    /** Whether to show "Enable" row with toggle */
+    /** Whether to show an "Enable" row with toggle at the bottom (legacy — prefer inline toggle item) */
     enableToggle?: boolean;
     /** Toggle checked state */
     enableChecked?: boolean;
     /** Toggle callback */
     onEnableChange?: (checked: boolean) => void;
 }
+/**
+ * Floating context menu for deployment entities.
+ *
+ * Use the `contextMenuItems` factory to compose your menu. Supports action items,
+ * dividers, toggle rows, and highlighted (active-state) items.
+ *
+ * @see {@link https://www.figma.com/design/xky11VbkkFcgZLwZE8BdCN/ROB?node-id=11-1102 Figma 11-1102}
+ */
 declare const DeploymentEntityContextMenu: React__default.FC<DeploymentEntityContextMenuProps>;
 
 interface DeploymentTreeNode {
@@ -1223,8 +1521,6 @@ interface DeploymentDashboardTreeProps {
     onExpandToggle?: (nodeId: string) => void;
     /** When a card's copy-ID button is clicked */
     onCopyId?: (nodeId: string) => void;
-    /** Open context menu for node */
-    onContextMenu?: (nodeId: string, e: React__default.MouseEvent) => void;
     /** Override row content; default: render DeploymentDashboardCard from node data */
     renderCard?: (node: DeploymentTreeNode) => React__default.ReactNode;
 }
@@ -1708,4 +2004,4 @@ interface CodeEditorProps {
  */
 declare const CodeEditor: React__default.FC<CodeEditorProps>;
 
-export { Accordion, type AccordionProps, AccountSection, type AccountSectionProps, ActivityAppIcon, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, AppLoading, type AppLoadingProps, Avatar, AvatarIcon, type AvatarProps, Badge, type BadgeProps, BarTrackingIcon, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, BytesSize, type BytesSizeProps, Card, CardActions, CardContent, CardHeader, type CardProps, CereIcon, ChartWidget, type ChartWidgetProps, CheckMarkAnimation, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, type CircularProgressProps, ClockIcon, CloudFlashIcon, CodeEditor, type CodeEditorLanguage, type CodeEditorProps, Collapse, type CollapseProps, ConnectionStatus, type ConnectionStatusProps, type ContextMenuItem, DecentralizedServerIcon, type DeploymentCardAction, DeploymentDashboardCard, type DeploymentDashboardCardProps, DeploymentDashboardPanel, type DeploymentDashboardPanelProps, DeploymentDashboardTree, type DeploymentDashboardTreeProps, DeploymentEntityContextMenu, type DeploymentEntityContextMenuProps, type DeploymentEntityType, type DeploymentStatusIndicator, type DeploymentTreeNode, Dialog, type DialogProps, DiscordIcon, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, Dropdown, DropdownAnchor, type DropdownAnchorProps, type DropdownProps, EmptyState, type EmptyStateProps, FilledFolderIcon, FlowEditor, type FlowEditorProps, FolderIcon, GithubLogoIcon, IconButton, type IconButtonProps, LeftArrowIcon, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Loading, LoadingAnimation, type LoadingAnimationProps, LoadingButton, type LoadingButtonProps, type LoadingProps, Logo, type LogoProps, Markdown, type MarkdownProps, Menu, MenuItem, type MenuItemProps, type MenuProps, type MessageOptions, MessagesProvider, MetricsChart, type MetricsChartProps, type MetricsPeriod, NavigationItem, type NavigationItemProps, NavigationList, type NavigationListProps, OnboardingProvider, Pagination, type PaginationProps, Paper, type PaperProps, PeriodSelect, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, type RadioProps, RightArrowIcon, SearchField, type SearchFieldProps, Selector, type SelectorOption, type SelectorProps, type Service, ServiceSelectorButton, type ServiceSelectorButtonProps, ShareIcon, SideNav, SideNavHeader, type SideNavHeaderProps, type SideNavProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, Snackbar, type SnackbarProps, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, StorageAppIcon, Switch, type SwitchProps, Tab, type TabProps, Table, TableHeader, type TableHeaderProps, type TableProps, TextField, type TextFieldProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, UploadFileIcon, UploadFolderIcon, type UserInfo, type Workspace, WorkspaceSelectorButton, type WorkspaceSelectorButtonProps, colors, contextMenuItems, theme, useIsDesktop, useIsMobile, useIsTablet, useMessages, useOnboarding };
+export { Accordion, type AccordionProps, AccountSection, type AccountSectionProps, ActivityAppIcon, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, AppLoading, type AppLoadingProps, Avatar, AvatarIcon, type AvatarProps, Badge, type BadgeProps, BarTrackingIcon, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, BytesSize, type BytesSizeProps, Card, CardActions, CardContent, CardHeader, type CardProps, CereIcon, ChartWidget, type ChartWidgetProps, CheckMarkAnimation, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, type CircularProgressProps, ClockIcon, CloudFlashIcon, CodeEditor, type CodeEditorLanguage, type CodeEditorProps, Collapse, type CollapseProps, ConnectionStatus, type ConnectionStatusProps, type ContextMenuItem, DecentralizedServerIcon, type DeploymentCardAction, DeploymentDashboardCard, type DeploymentDashboardCardProps, DeploymentDashboardPanel, type DeploymentDashboardPanelProps, DeploymentDashboardTree, type DeploymentDashboardTreeProps, DeploymentEntityContextMenu, type DeploymentEntityContextMenuProps, type DeploymentEntityType, type DeploymentStatusIndicator, type DeploymentTreeNode, Dialog, type DialogProps, DiscordIcon, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, Dropdown, DropdownAnchor, type DropdownAnchorProps, type DropdownProps, EmptyState, type EmptyStateProps, EntityHeader, type EntityHeaderProps, FilledFolderIcon, FlowEditor, type FlowEditorProps, FolderIcon, GithubLogoIcon, IDBlock, type IDBlockProps, IconButton, type IconButtonProps, LeftArrowIcon, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Loading, LoadingAnimation, type LoadingAnimationProps, LoadingButton, type LoadingButtonProps, type LoadingProps, Logo, type LogoProps, Markdown, type MarkdownProps, Menu, MenuItem, type MenuItemProps, type MenuProps, type MessageOptions, MessagesProvider, MetricsChart, type MetricsChartProps, type MetricsPeriod, NavigationItem, type NavigationItemProps, NavigationList, type NavigationListProps, OnboardingProvider, Pagination, type PaginationProps, Paper, type PaperProps, PeriodSelect, type PrimaryAction, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, type RadioProps, RightArrowIcon, RoleBadge, type RoleBadgeColor, type RoleBadgeProps, type RoleBadgeSize, SearchField, type SearchFieldProps, Selector, type SelectorOption, type SelectorProps, type Service, ServiceSelectorButton, type ServiceSelectorButtonProps, ShareIcon, SideNav, SideNavHeader, type SideNavHeaderProps, type SideNavProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, Snackbar, type SnackbarProps, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, StorageAppIcon, Switch, type SwitchProps, Tab, type TabProps, Table, TableHeader, type TableHeaderProps, type TableProps, TextField, type TextFieldProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, UploadFileIcon, UploadFolderIcon, type UserInfo, type Workspace, WorkspaceSelectorButton, type WorkspaceSelectorButtonProps, colors, contextMenuItems, robPaletteExtended, robPrimaryPalette, theme, useIsDesktop, useIsMobile, useIsTablet, useMessages, useOnboarding };