@cere/cere-design-system 0.0.45 → 0.2.0

package/dist/layout.d.mts

@@ -0,0 +1,681 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default, { PropsWithChildren, ReactElement, ReactNode } from 'react';
+import { DialogProps as DialogProps$1 } from '@mui/material/Dialog';
+import { DrawerProps as DrawerProps$1 } from '@mui/material/Drawer';
+import { BoxProps } from '@mui/material/Box';
+export { default as Box, BoxProps } from '@mui/material/Box';
+import { Theme, SxProps } from '@mui/material/styles';
+import { CardProps as CardProps$1 } from '@mui/material/Card';
+import { CardContentProps } from '@mui/material/CardContent';
+import { CardHeaderProps } from '@mui/material/CardHeader';
+import { CardActionsProps } from '@mui/material/CardActions';
+import { CardMediaProps as CardMediaProps$1 } from '@mui/material/CardMedia';
+import { ListProps as ListProps$1 } from '@mui/material/List';
+import { ListItemProps as ListItemProps$1 } from '@mui/material/ListItem';
+import { AvatarProps as AvatarProps$1 } from '@mui/material/Avatar';
+import { TableProps as TableProps$1 } from '@mui/material/Table';
+export { default as Grid, Grid2Props as GridProps } from '@mui/material/Grid2';
+import { BreadcrumbsProps as BreadcrumbsProps$1 } from '@mui/material/Breadcrumbs';
+import { AccordionProps as AccordionProps$1 } from '@mui/material/Accordion';
+import { PaperProps as PaperProps$1 } from '@mui/material/Paper';
+import { DividerProps as DividerProps$1 } from '@mui/material/Divider';
+export { default as Stack, StackProps } from '@mui/material/Stack';
+export { default as Typography, TypographyProps } from '@mui/material/Typography';
+import { LinkProps as LinkProps$1 } from '@mui/material/Link';
+export { default as Container, ContainerProps } from '@mui/material/Container';
+import { AppBarProps as AppBarProps$1 } from '@mui/material/AppBar';
+import { CollapseProps as CollapseProps$1 } from '@mui/material/Collapse';
+export { default as ListItemIcon } from '@mui/material/ListItemIcon';
+export { default as ListItemSecondaryAction } from '@mui/material/ListItemSecondaryAction';
+export { default as ListItemText } from '@mui/material/ListItemText';
+export { default as Toolbar, ToolbarProps } from '@mui/material/Toolbar';
+
+type LogoSize = 'large' | 'medium' | 'small';
+type LogoProps = PropsWithChildren<{
+    icon?: ReactElement;
+    size?: LogoSize;
+}>;
+declare const Logo: ({ children, size, icon }: LogoProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * **PaperProps merge order.**
+ *
+ * The component pre-sets `PaperProps.sx = { minHeight: ... }` and then
+ * spreads consumer-supplied `PaperProps` over it:
+ * ```
+ * PaperProps={{ sx: { minHeight: ... }, ...dialogProps.PaperProps }}
+ * ```
+ * Consumer `PaperProps.sx` will override the component's `minHeight`.
+ * Consumer `PaperProps` keys other than `sx` are passed through unchanged.
+ * To extend the `sx` rather than replace it, pass an array:
+ * ```
+ * PaperProps={{ sx: [{ minHeight: '400px' }, { borderRadius: 2 }] }}
+ * ```
+ */
+interface DialogProps extends Omit<DialogProps$1, 'title'> {
+    open: boolean;
+    title: ReactNode;
+    onClose: () => void;
+    onSubmit?: () => void;
+    submitLabel?: string;
+    cancelLabel?: string;
+    isLoading?: boolean;
+    disableSubmit?: boolean;
+    showActions?: boolean;
+    headerAction?: ReactNode;
+    fullWidth?: boolean;
+    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    children: ReactNode;
+    dividers?: boolean;
+    confirmBeforeClose?: boolean;
+    /**
+     * Custom actions to render instead of default actions
+     * If provided, showActions is ignored and custom actions are used
+     */
+    customActions?: ReactNode;
+}
+declare const Dialog: React__default.FC<DialogProps>;
+
+type KpiTone = 'violet' | 'blue' | 'green' | 'orange' | 'pink' | 'neutral';
+interface KpiCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Optional leading glyph rendered before the label row. */
+    icon?: React.ReactNode;
+    /** Short caption rendered in the eyebrow style above the value. */
+    label: string;
+    /** The headline KPI value. Can be a string, number, or composed node. */
+    value: React.ReactNode;
+    /** Optional sub line rendered under the value. */
+    sub?: string;
+    /**
+     * Accent color applied to the left stripe.
+     * @default 'neutral'
+     */
+    tone?: KpiTone;
+}
+/**
+ * KpiCard — a single metric tile for dashboards.
+ *
+ * Lays out an optional icon + uppercase label on top, a large value beneath,
+ * and an optional sub line. A vertical stripe on the left uses `tone` for the
+ * accent color. All typography pulls from the DS-augmented variants.
+ *
+ * Lives in `layout/` per the constitution: KpiCard is a data-display tile,
+ * not a feedback signal.
+ */
+declare const KpiCard: React.ForwardRefExoticComponent<KpiCardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface AgentAvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Stable string keyed to the agent identity; same seed always picks the same palette. */
+    seed: string;
+    /** Used as the source of the initial glyph (first letter, upper-cased). */
+    name: string;
+    /** Pixel size. Accepts the three preset sizes or any number. @default 40 */
+    size?: 32 | 40 | 56 | number;
+    /** Adds an outer drop shadow for use over plain surfaces. */
+    shadow?: boolean;
+    /** When set, renders an `<img>` in place of the initial. */
+    iconUrl?: string;
+    /** Optional override for the accessible label; defaults to `name`. */
+    ariaLabel?: string;
+}
+/**
+ * Brand-coloured avatar tile that auto-derives a palette shade from `seed`.
+ *
+ * Renders the first letter of `name` by default; if `iconUrl` is provided,
+ * renders the image full-bleed instead. White glyph; optional outer
+ * shadow pulled from the MUI theme elevation scale.
+ */
+declare const AgentAvatar: React.ForwardRefExoticComponent<AgentAvatarProps & React.RefAttributes<HTMLDivElement>>;
+
+type NumberedListTone = 'violet' | 'blue' | 'green' | 'orange' | 'pink' | 'neutral';
+interface NumberedListItem {
+    /** Row title rendered next to the badge. */
+    title: string;
+    /** Optional secondary line under the title. */
+    detail?: React.ReactNode;
+    /** Optional trailing action (button, link, chip) aligned to the right. */
+    cta?: React.ReactNode;
+}
+interface NumberedListProps extends Omit<React.OlHTMLAttributes<HTMLOListElement>, 'children'> {
+    /** Rows to render in order. */
+    items: NumberedListItem[];
+    /** Accent color for the numbered badges. @default 'violet' */
+    tone?: NumberedListTone;
+    /** First badge number. @default 1 */
+    startAt?: number;
+}
+/**
+ * NumberedList — ordered list with numbered tinted badges.
+ *
+ * Use for onboarding checklists, sequence walkthroughs, and other ordered
+ * step lists. Badges pull their tint from the design system palette via
+ * `tone`. `startAt` lets you chain lists across pages without resetting.
+ */
+declare const NumberedList: React.ForwardRefExoticComponent<NumberedListProps & React.RefAttributes<HTMLOListElement>>;
+
+type DrawerWidthValue = number | string;
+/**
+ * Per-breakpoint drawer widths. `xs` sets the base width (mobile-first);
+ * `sm`/`md`/`lg`/`xl` override at and above the named MUI breakpoint.
+ */
+interface ResponsiveDrawerWidth {
+    xs?: DrawerWidthValue;
+    sm?: DrawerWidthValue;
+    md?: DrawerWidthValue;
+    lg?: DrawerWidthValue;
+    xl?: DrawerWidthValue;
+}
+type DrawerWidth = DrawerWidthValue | ResponsiveDrawerWidth;
+/**
+ * Resolve a `width` prop into a style object usable by `styled()`.
+ *
+ * - Number/string input returns a single `{ width }` rule.
+ * - Object input produces a mobile-first base width (from `xs`, or
+ *   `defaultWidth` if `xs` is missing) plus breakpoint-scoped overrides
+ *   for each of sm/md/lg/xl that was provided.
+ */
+declare function resolveDrawerWidth(width: DrawerWidth | undefined, theme: Theme, defaultWidth?: DrawerWidthValue): Record<string, unknown> & {
+    width?: DrawerWidthValue;
+};
+
+interface DrawerProps extends Omit<DrawerProps$1, 'title'> {
+    /**
+     * Width of the drawer when open. Accepts a single value (number or CSS
+     * string like `"100vw"`) or a responsive object keyed by MUI breakpoint
+     * (`{ xs, sm, md, lg, xl }`). Responsive widths are mobile-first: `xs`
+     * is the base, each named breakpoint overrides at that breakpoint and up.
+     * @default 400 for temporary/persistent, 240 for permanent
+     */
+    width?: DrawerWidth;
+    /**
+     * Width of the drawer when collapsed (mini variant)
+     * @default 72
+     */
+    miniWidth?: number;
+    /**
+     * Whether the drawer is in collapsed/mini state
+     * @default false
+     */
+    collapsed?: boolean;
+    /**
+     * Title to display in the drawer header
+     */
+    title?: ReactNode;
+    /**
+     * Custom header content (replaces title if provided)
+     */
+    header?: ReactNode;
+    /**
+     * Show close button in header
+     * @default true for temporary variant, false for permanent
+     */
+    showCloseButton?: boolean;
+    /**
+     * Tab labels for tabbed drawer content
+     */
+    tabs?: string[];
+    /**
+     * Active tab index
+     */
+    activeTab?: number;
+    /**
+     * Callback when tab changes
+     */
+    onTabChange?: (index: number) => void;
+    /**
+     * Footer content (actions, buttons, etc.)
+     */
+    footer?: ReactNode;
+    /**
+     * Props for drawer content container
+     */
+    contentProps?: BoxProps;
+    /**
+     * Anchor position
+     * @default 'right'
+     */
+    anchor?: 'left' | 'right' | 'top' | 'bottom';
+    /**
+     * Top offset in pixels (e.g., for header + breadcrumbs)
+     * @default 0
+     */
+    topOffset?: number;
+}
+/**
+ * Drawer component for navigation drawers and side panels
+ * Can be used as a replacement for Dialog for better UX
+ *
+ * @example
+ * ```tsx
+ * // Simple drawer
+ * <Drawer open={true} variant="temporary" width={400} title="Settings" onClose={handleClose}>
+ *   <Box p={2}>Content here</Box>
+ * </Drawer>
+ *
+ * // Drawer with tabs
+ * <Drawer
+ *   open={true}
+ *   variant="temporary"
+ *   width={600}
+ *   title="Edit Stream"
+ *   tabs={['General', 'Rules', 'Settings']}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ *   onClose={handleClose}
+ * >
+ *   <Box p={2}>{tabContent}</Box>
+ * </Drawer>
+ * ```
+ */
+declare const Drawer: React__default.ForwardRefExoticComponent<Omit<DrawerProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+interface MetaFieldProps {
+    /** Uppercase eyebrow label displayed above the value. */
+    label: string;
+    /** Value to display. String values get a `title` attribute for overflow tooltips. */
+    value: ReactNode;
+    /** Render the value in a monospace font (for IDs, durations, paths). */
+    mono?: boolean;
+    /**
+     * Override the auto-generated `title` attribute. Useful when the value is a
+     * ReactNode but you still want a hover tooltip, or to customize the string
+     * shown on hover.
+     */
+    title?: string;
+}
+/**
+ * MetaField — a compact label-over-value column for metadata lists.
+ *
+ * Wraps its content in a min-width-0 flex column so it collapses cleanly
+ * inside responsive grids. The value truncates with an ellipsis and shows
+ * the full text on hover (for string values by default).
+ *
+ * @example
+ * ```tsx
+ * <MetaField label="Run ID" value="run_abc123" mono />
+ * <MetaField label="Status" value={<StatusBadge status="ok" />} />
+ * ```
+ */
+declare const MetaField: React__default.ForwardRefExoticComponent<MetaFieldProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface ScrollableRowProps {
+    /** Row content. Rendered in a horizontally-scrolling flex container. */
+    children: ReactNode;
+    /** Accessible label for the left chevron. @default 'Scroll left' */
+    leftLabel?: string;
+    /** Accessible label for the right chevron. @default 'Scroll right' */
+    rightLabel?: string;
+    /**
+     * Minimum nudge distance (px) when a chevron is clicked. The component
+     * scrolls by max(minNudge, clientWidth * nudgeFraction). @default 160
+     */
+    minNudge?: number;
+    /** Fraction of the viewport scrolled per chevron click. @default 0.6 */
+    nudgeFraction?: number;
+}
+/**
+ * ScrollableRow — a horizontally-scrolling container that reveals chevron
+ * buttons at the left and right edges only when content actually overflows.
+ *
+ * Works with any children (chips, cards, pills). Uses a `ResizeObserver` on
+ * both the scroller and its children plus a `MutationObserver` to catch
+ * children being added/removed, so the chevrons stay in sync with real
+ * layout.
+ */
+declare const ScrollableRow: React__default.FC<ScrollableRowProps>;
+
+interface SectionRowProps {
+    /** Section title (e.g. "Published by alice"). Rendered as an h2-equivalent. */
+    title: ReactNode;
+    /** Optional sublabel below the title (e.g. "3 agents"). */
+    subtitle?: ReactNode;
+    /** Optional right-aligned slot in the header (e.g. a "See all →" link). */
+    action?: ReactNode;
+    /** Accessible labels for the scroll chevrons. */
+    leftLabel?: string;
+    rightLabel?: string;
+    /** Tiles / cards rendered inside the horizontally-scrolling track. */
+    children: ReactNode;
+}
+/**
+ * SectionRow — header (title + subtitle + right-side action) on top of a
+ * ScrollableRow track. Use for "category row" or "publisher row" layouts in
+ * marketplace / library / dashboard contexts. The scroll mechanics and edge
+ * chevrons come from ScrollableRow.
+ */
+declare const SectionRow: React__default.ForwardRefExoticComponent<SectionRowProps & React__default.RefAttributes<HTMLElement>>;
+
+/** Number of distinct gradient palettes. Useful for sizing slide cycles deterministically. */
+declare const GRADIENT_PALETTE_COUNT: 6;
+interface GradientSurfaceProps {
+    /**
+     * Which palette to use. Any integer (positive or negative) — the value is
+     * wrapped modulo the palette count, so callers can pass their own counter
+     * (`rowIndex + tileIndex`, slide index, etc.) without worrying about range.
+     */
+    index: number;
+    /** Optional body rendered over the gradient + blobs. */
+    children?: ReactNode;
+    /** Style overrides on the surface. */
+    sx?: SxProps<Theme>;
+}
+/**
+ * GradientSurface — a positioned, gradient-painted surface with two soft blob
+ * accents. Owns the brand palette cycle so consumers don't redeclare gradient
+ * colors per route. Pair with absolute-positioned children for hero artwork.
+ */
+declare const GradientSurface: React__default.ForwardRefExoticComponent<GradientSurfaceProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface DefinitionRowProps {
+    /** Optional leading icon (e.g. a scope or category glyph). */
+    icon?: ReactNode;
+    /** Primary label rendered on the left side. */
+    label: ReactNode;
+    /** Optional secondary line under the label (e.g. type, scope path). */
+    sublabel?: ReactNode;
+    /** Primary right-side content (e.g. `read`, `optional`). */
+    value?: ReactNode;
+    /** Secondary right-side line under the value (e.g. constraint, default). */
+    hint?: ReactNode;
+    /** Reduce vertical padding for compact lists. */
+    dense?: boolean;
+    /** Draw a bottom divider. The last row in a list never draws. @default true */
+    divider?: boolean;
+}
+/**
+ * DefinitionRow — `icon · label / sublabel  …  value / hint` row primitive
+ * for description-list style content (scope tables, settings, key/value
+ * panels).
+ */
+declare const DefinitionRow: React__default.ForwardRefExoticComponent<DefinitionRowProps & React__default.RefAttributes<HTMLDivElement>>;
+
+type PanelDialogWidth = 'sm' | 'md' | 'lg' | 'xl';
+type PanelDialogSide = 'right' | 'center';
+type PanelDialogTransition = 'fade' | 'slide-up' | 'slide-left';
+interface PanelDialogProps {
+    /** Controls visibility. */
+    open: boolean;
+    /** Fires when the user closes (close button, backdrop click, ESC). */
+    onClose: () => void;
+    /** Optional title rendered in the header. Used as the dialog accessible name when a string. */
+    title?: ReactNode;
+    /** Optional right-aligned slot in the header (e.g. install + share buttons). */
+    headerActions?: ReactNode;
+    /** Panel width. @default 'md' */
+    width?: PanelDialogWidth;
+    /** Where the panel docks. `right` slides in from the right edge; `center` is a regular centered panel. @default 'right' */
+    side?: PanelDialogSide;
+    /** Override the accessible name when `title` is not a string. */
+    ariaLabel?: string;
+    /**
+     * Drop the header bar entirely (no title row, no border). The close button
+     * still renders but floats absolute over the top-right of the body. Use when
+     * the body content has its own hero / chrome.
+     */
+    hideHeader?: boolean;
+    /** Style overrides on the dialog paper (border-radius, shadow, width tweaks). */
+    paperSx?: SxProps<Theme>;
+    /** Style overrides on the modal backdrop (e.g. tint, blur). */
+    backdropSx?: SxProps<Theme>;
+    /**
+     * Entry transition. Defaults to `slide-left` for `side='right'` and `fade`
+     * for `side='center'`.
+     */
+    transition?: PanelDialogTransition;
+    /** Body content. */
+    children: ReactNode;
+}
+/**
+ * PanelDialog — a right-anchored (or centered) slide-in panel for detail
+ * views, inspectors, and side sheets. Built on MUI Dialog; focus trap and
+ * ESC-to-close come from MUI. Use Dialog for centered modal-with-Save/Cancel.
+ */
+declare function PanelDialog({ open, onClose, title, headerActions, width, side, ariaLabel, hideHeader, paperSx, backdropSx, transition, children, }: PanelDialogProps): react_jsx_runtime.JSX.Element;
+
+interface SplitDialogContentProps {
+    left: React__default.ReactNode;
+    right: React__default.ReactNode;
+    /** Width of the right (aside) column in px. @default 320 */
+    rightWidth?: number;
+    /** Viewport breakpoint (px) below which the layout collapses to one column. @default 860 */
+    collapseBelow?: number;
+    sx?: SxProps<Theme>;
+}
+/**
+ * Two-column dialog body used by detail / info modals: primary content on
+ * the left, sticky meta panel on the right. Collapses to a single column on
+ * narrow viewports.
+ *
+ * Compose inside a `<PanelDialog>`:
+ *   <PanelDialog ...>
+ *     <SplitDialogContent left={...} right={...} />
+ *   </PanelDialog>
+ */
+declare const SplitDialogContent: React__default.ForwardRefExoticComponent<SplitDialogContentProps & React__default.RefAttributes<HTMLDivElement>>;
+
+type CardMediaProps = CardMediaProps$1;
+declare const CardMedia: React__default.ForwardRefExoticComponent<Omit<CardMediaProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+type CardVariant = 'standard' | 'tinted' | 'outlined';
+interface CardProps extends Omit<CardProps$1, 'variant'> {
+    /** Visual treatment. @default 'standard' */
+    variant?: CardVariant;
+    hoverable?: boolean;
+    /**
+     * Opt the card into being a real interactive element. When combined with
+     * `onClick`, the root renders via MUI ButtonBase — focusable button,
+     * Enter/Space activation, `:focus-visible` ring. When `clickable` is set
+     * without `onClick`, only the pointer cursor changes (back-compat).
+     *
+     * `<Card onClick={...}>` WITHOUT `clickable` keeps a `<div>` root and just
+     * forwards the click handler, so consumers using onClick for analytics or
+     * non-clickable side effects are not silently turned into buttons.
+     */
+    clickable?: boolean;
+}
+declare const Card: React__default.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React__default.RefAttributes<HTMLButtonElement | HTMLDivElement>>;
+declare const CardContent: React__default.ForwardRefExoticComponent<Omit<CardContentProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React__default.ForwardRefExoticComponent<Omit<CardHeaderProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const CardActions: React__default.ForwardRefExoticComponent<Omit<CardActionsProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+type ListProps = ListProps$1;
+declare const List: React__default.ForwardRefExoticComponent<Omit<ListProps, "ref"> & React__default.RefAttributes<HTMLUListElement>>;
+interface ListItemProps extends ListItemProps$1 {
+    primary?: React__default.ReactNode;
+    secondary?: React__default.ReactNode;
+    icon?: React__default.ReactNode;
+    action?: React__default.ReactNode;
+    hoverable?: boolean;
+}
+declare const ListItem: React__default.ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & React__default.RefAttributes<HTMLLIElement>>;
+
+interface AvatarProps extends AvatarProps$1 {
+    size?: 'small' | 'medium' | 'large' | number;
+}
+declare const Avatar: React__default.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+interface TableProps extends TableProps$1 {
+    stickyHeader?: boolean;
+}
+declare const Table: React__default.ForwardRefExoticComponent<Omit<TableProps, "ref"> & React__default.RefAttributes<HTMLTableElement>>;
+interface TableHeaderProps {
+    columns: Array<{
+        id: string;
+        label: string;
+        sortable?: boolean;
+        align?: 'left' | 'center' | 'right';
+    }>;
+    orderBy?: string;
+    order?: 'asc' | 'desc';
+    onSort?: (columnId: string) => void;
+}
+declare const TableHeader: React__default.ForwardRefExoticComponent<TableHeaderProps & React__default.RefAttributes<HTMLTableSectionElement>>;
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+interface BreadcrumbsProps extends Omit<BreadcrumbsProps$1, 'children'> {
+    items: BreadcrumbItem[];
+}
+declare const Breadcrumbs: React__default.ForwardRefExoticComponent<Omit<BreadcrumbsProps, "ref"> & React__default.RefAttributes<HTMLElement>>;
+
+interface AccordionProps extends Omit<AccordionProps$1, 'children'> {
+    title: string;
+    children: NonNullable<React__default.ReactNode>;
+    defaultExpanded?: boolean;
+}
+declare const Accordion: React__default.ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+interface PaperProps extends PaperProps$1 {
+    variant?: 'elevation' | 'outlined';
+}
+declare const Paper: React__default.ForwardRefExoticComponent<Omit<PaperProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+interface DividerProps extends DividerProps$1 {
+    variant?: 'fullWidth' | 'inset' | 'middle';
+}
+declare const Divider: React__default.ForwardRefExoticComponent<Omit<DividerProps, "ref"> & React__default.RefAttributes<HTMLHRElement>>;
+
+interface LinkProps extends LinkProps$1 {
+    underline?: 'none' | 'hover' | 'always';
+}
+declare const Link: React__default.FC<LinkProps>;
+
+interface AppBarProps extends AppBarProps$1 {
+    height?: number;
+}
+declare const AppBar: React__default.FC<AppBarProps>;
+
+interface CollapseProps extends CollapseProps$1 {
+    /**
+     * If `true`, the component will transition in
+     */
+    in?: boolean;
+    /**
+     * The content to collapse
+     */
+    children?: React__default.ReactNode;
+}
+/**
+ * Collapse component - provides a collapse animation
+ *
+ * @example
+ * ```tsx
+ * <Collapse in={open}>
+ *   <Box>Collapsible content</Box>
+ * </Collapse>
+ * ```
+ */
+declare const Collapse: React__default.ForwardRefExoticComponent<Omit<CollapseProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+/**
+ * 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;
+    /**
+     * Additional content rendered before the primary action button.
+     * Accepts any ReactNode (buttons, dropdowns, etc.).
+     */
+    startActions?: React__default.ReactNode;
+    /**
+     * Additional content rendered after the primary action button
+     * but before the more-options icon button.
+     * Accepts any ReactNode (buttons, dropdowns, etc.).
+     */
+    endActions?: React__default.ReactNode;
+    /**
+     * 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
+ */
+declare const EntityHeader: React__default.ForwardRefExoticComponent<EntityHeaderProps & React__default.RefAttributes<HTMLDivElement>>;
+
+export { Accordion, type AccordionProps, AgentAvatar, type AgentAvatarProps, AppBar, type AppBarProps, Avatar, type AvatarProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Card, CardActions, CardContent, CardHeader, CardMedia, type CardMediaProps, type CardProps, type CardVariant, Collapse, type CollapseProps, DefinitionRow, type DefinitionRowProps, Dialog, type DialogProps, Divider, type DividerProps, Drawer, type DrawerProps, type DrawerWidth, type DrawerWidthValue, EntityHeader, type EntityHeaderProps, GRADIENT_PALETTE_COUNT, GradientSurface, type GradientSurfaceProps, KpiCard, type KpiCardProps, type KpiTone, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Logo, type LogoProps, MetaField, type MetaFieldProps, NumberedList, type NumberedListItem, type NumberedListProps, type NumberedListTone, PanelDialog, type PanelDialogProps, type PanelDialogSide, type PanelDialogWidth, Paper, type PaperProps, type PrimaryAction, type ResponsiveDrawerWidth, ScrollableRow, type ScrollableRowProps, SectionRow, type SectionRowProps, SplitDialogContent, type SplitDialogContentProps, Table, TableHeader, type TableHeaderProps, type TableProps, resolveDrawerWidth };