@borisj74/bv-ds 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,2715 @@
+import * as react from 'react';
+import { ReactNode, ButtonHTMLAttributes, MouseEventHandler, HTMLAttributes, CSSProperties, InputHTMLAttributes, ElementType, TextareaHTMLAttributes, SVGProps } from 'react';
+
+type ActivityFeedDivider = "line" | "connector" | "divider" | "none";
+interface ActivityFeedProps {
+    /**
+     * How feed items are separated (Figma `Divider` variant):
+     * - `connector` — items butt together; each child `FeedItemBase` should set
+     *   `connector` so the avatar lines join into a continuous thread.
+     * - `line` — a hairline rule between items.
+     * - `divider` — no rule added by the feed; interleave your own labelled date
+     *   dividers between children.
+     * - `none` — plain spacing only.
+     */
+    divider?: ActivityFeedDivider;
+    /** Feed rows — typically `FeedItemBase` instances. */
+    children: ReactNode;
+    className?: string;
+}
+declare function ActivityFeed({ divider, children, className, }: ActivityFeedProps): react.JSX.Element;
+
+type ActivityGaugeSize = "xs" | "sm" | "md" | "lg";
+type ActivityGaugeLegend = "none" | "bottom" | "right";
+interface ActivityGaugeSeries {
+    /** Series name shown in the legend. */
+    label: string;
+    /** Fill amount for this ring, 0–100. */
+    value: number;
+    /** Ring/legend color. Defaults to the brand ramp (see DEFAULT_SERIES_COLORS). */
+    color?: string;
+}
+interface ActivityGaugeProps {
+    /** Big centered numeral, e.g. "1,000". Pre-formatted by the caller. */
+    value: string;
+    /** Small centered label above/below the value, e.g. "Active users". */
+    label?: string;
+    /** One concentric ring per series, outermost first. */
+    series: ActivityGaugeSeries[];
+    size?: ActivityGaugeSize;
+    legend?: ActivityGaugeLegend;
+    className?: string;
+}
+declare function ActivityGauge({ value, label, series, size, legend, className, }: ActivityGaugeProps): react.JSX.Element;
+
+interface AdvancedFilterBarProps {
+    /**
+     * `false` → collapsed filter trigger only. `true` → trigger plus the active
+     * filter rows and a Clear all action.
+     */
+    active?: boolean;
+    /** Active filter rows (compose Select/Select/Input + a close button each). */
+    rows?: ReactNode;
+    /** Trigger click handler. */
+    onToggle?: () => void;
+    /** Clear-all handler (active state). */
+    onClearAll?: () => void;
+    clearLabel?: ReactNode;
+    className?: string;
+}
+/**
+ * The advanced (query-builder style) filter pattern. Collapsed it shows just a
+ * filter trigger; active it shows the filter rows plus Clear all. The rows are
+ * a slot — compose `Select` + `Select` + `Input` + a close button per row.
+ */
+declare function AdvancedFilterBar({ active, rows, onToggle, onClearAll, clearLabel, className, }: AdvancedFilterBarProps): react.JSX.Element;
+
+type AlertColor = "Default" | "Brand" | "Gray" | "Error" | "Warning" | "Success";
+type AlertSize = "Floating" | "FullWidth";
+interface AlertAction {
+    label: string;
+    onClick?: () => void;
+}
+interface AlertProps {
+    /** Bold heading line. */
+    title: string;
+    /** Supporting text under the title. */
+    description?: ReactNode;
+    color?: AlertColor;
+    /** Floating = padded card with link actions; FullWidth = banner with buttons. */
+    size?: AlertSize;
+    /** Glyph rendered inside the leading icon ring. Defaults to an info circle. */
+    icon?: ReactNode;
+    /** Primary action — "View changes" / "Learn more". */
+    primaryAction?: AlertAction;
+    /** Secondary action — typically "Dismiss". */
+    secondaryAction?: AlertAction;
+    /** Renders the top-right close button when provided. */
+    onClose?: () => void;
+    className?: string;
+}
+declare function Alert({ title, description, color, size, icon, primaryAction, secondaryAction, onClose, className, }: AlertProps): react.JSX.Element;
+
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+interface AvatarProps {
+    size?: AvatarSize;
+    /** Image URL. Takes precedence over initials and the placeholder icon. */
+    src?: string;
+    alt?: string;
+    /** Placeholder text (initials, e.g. "OR") shown when no image is supplied. */
+    initials?: string;
+    /** Render the outer border ring (Figma `Border=True`). */
+    hasBorder?: boolean;
+    /** Show the online status dot (bottom-right). */
+    hasStatus?: boolean;
+    className?: string;
+}
+declare function Avatar({ size, src, alt, initials, hasBorder, hasStatus, className, }: AvatarProps): react.JSX.Element;
+
+type AvatarAddButtonSize = "xs" | "sm" | "md";
+interface AvatarAddButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> {
+    size?: AvatarAddButtonSize;
+    /** Tooltip text + accessible label (Figma hover shows "Add user"). */
+    label?: string;
+}
+declare function AvatarAddButton({ size, label, className, ...rest }: AvatarAddButtonProps): react.JSX.Element;
+
+type AvatarGroupSize = "xs" | "sm" | "md";
+interface AvatarGroupItem {
+    src?: string;
+    alt?: string;
+    initials?: string;
+}
+interface AvatarGroupProps {
+    size?: AvatarGroupSize;
+    avatars: AvatarGroupItem[];
+    /** Max avatars shown before collapsing the rest into a "+N" chip. */
+    max?: number;
+    /** Renders a trailing dashed add button when provided. */
+    onAdd?: () => void;
+    /** Tooltip/label for the add button. */
+    addLabel?: string;
+    className?: string;
+}
+declare function AvatarGroup({ size, avatars, max, onAdd, addLabel, className, }: AvatarGroupProps): react.JSX.Element;
+
+type AvatarLabelGroupSize = "sm" | "md" | "lg";
+interface AvatarLabelGroupProps {
+    size?: AvatarLabelGroupSize;
+    /** Primary line (name). */
+    name: string;
+    /** Secondary line (email / handle / role). */
+    subtitle?: string;
+    src?: string;
+    alt?: string;
+    initials?: string;
+    hasStatus?: boolean;
+    className?: string;
+}
+declare function AvatarLabelGroup({ size, name, subtitle, src, alt, initials, hasStatus, className, }: AvatarLabelGroupProps): react.JSX.Element;
+
+type AvatarProfilePhotoSize = "sm" | "md" | "lg";
+interface AvatarProfilePhotoProps {
+    size?: AvatarProfilePhotoSize;
+    src?: string;
+    alt?: string;
+    /** Placeholder initials when no image is supplied. */
+    initials?: string;
+    /** Show the verified (blue tick) badge bottom-right. */
+    verified?: boolean;
+    className?: string;
+}
+declare function AvatarProfilePhoto({ size, src, alt, initials, verified, className, }: AvatarProfilePhotoProps): react.JSX.Element;
+
+type BadgeColor = "brand" | "gray" | "red" | "yellow" | "green" | "slate" | "sky" | "blue" | "indigo" | "purple" | "pink" | "orange";
+type BadgeSize = "sm" | "md" | "lg";
+/** Props shared by all three Badge types. */
+interface BadgeCommonProps {
+    children: ReactNode;
+    color?: BadgeColor;
+    size?: BadgeSize;
+    /** Leading coloured dot. */
+    dot?: boolean;
+    iconLeading?: ReactNode;
+    iconTrailing?: ReactNode;
+    /** Renders a trailing X-close button when provided. */
+    onClose?: () => void;
+    className?: string;
+}
+
+type PillBadgeProps = BadgeCommonProps;
+/** Fully-rounded coloured badge (Figma Badge `Type=Pill color`). */
+declare function PillBadge({ color, size, dot, children, iconLeading, iconTrailing, onClose, className, }: PillBadgeProps): react.JSX.Element;
+
+type ColorBadgeProps = BadgeCommonProps;
+/** Rounded-rectangle coloured badge (Figma Badge `Type=Badge color`). */
+declare function ColorBadge({ color, size, dot, children, iconLeading, iconTrailing, onClose, className, }: ColorBadgeProps): react.JSX.Element;
+
+type ModernBadgeProps = BadgeCommonProps;
+/**
+ * Neutral white badge with a coloured leading dot (Figma Badge
+ * `Type=Badge modern`). Here `color` drives only the dot — the chrome stays
+ * neutral. The dot defaults on (it's the defining trait of this style).
+ */
+declare function ModernBadge({ color, size, dot, children, iconLeading, iconTrailing, onClose, className, }: ModernBadgeProps): react.JSX.Element;
+
+type BadgeCloseXShape = "square" | "rounded";
+interface BadgeCloseXProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
+    /**
+     * Tint for the X. Omit to inherit the parent badge's text colour
+     * (currentColor) — the usual case when composed inside a Badge.
+     */
+    color?: BadgeColor;
+    shape?: BadgeCloseXShape;
+}
+declare function BadgeCloseX({ color, shape, className, ...rest }: BadgeCloseXProps): react.JSX.Element;
+
+type BadgeGroupSize = "md" | "lg";
+type BadgeGroupType = "pill" | "modern";
+type BadgeGroupBadgePosition = "leading" | "trailing";
+interface BadgeGroupProps {
+    /** Text inside the inner coloured badge (e.g. "New feature"). */
+    badgeLabel: string;
+    /** The main label alongside the badge. */
+    children: ReactNode;
+    color?: BadgeColor;
+    size?: BadgeGroupSize;
+    /** Inner badge style. */
+    type?: BadgeGroupType;
+    /** Whether the badge sits before or after the label. */
+    badgePosition?: BadgeGroupBadgePosition;
+    className?: string;
+}
+declare function BadgeGroup({ badgeLabel, children, color, size, type, badgePosition, className, }: BadgeGroupProps): react.JSX.Element;
+
+type BreadcrumbButtonType = "text" | "button";
+interface BreadcrumbButtonBaseProps {
+    /** Crumb label. Optional for an icon-only (home) crumb. */
+    children?: ReactNode;
+    /** Leading icon (e.g. a home glyph for the root crumb). */
+    icon?: ReactNode;
+    type?: BreadcrumbButtonType;
+    /** Marks the active/last crumb (brand colour, aria-current). */
+    current?: boolean;
+    /** Renders as an anchor when set, otherwise a button. */
+    href?: string;
+    onClick?: MouseEventHandler<HTMLElement>;
+    className?: string;
+}
+declare function BreadcrumbButtonBase({ children, icon, type, current, href, onClick, className, }: BreadcrumbButtonBaseProps): react.JSX.Element;
+
+type BreadcrumbsDivider = "slash" | "chevron";
+interface BreadcrumbsProps {
+    /** Separator between crumbs. */
+    divider?: BreadcrumbsDivider;
+    /** Crumb items — typically `BreadcrumbButtonBase` instances. */
+    children: ReactNode;
+    className?: string;
+}
+declare function Breadcrumbs({ divider, children, className, }: BreadcrumbsProps): react.JSX.Element;
+
+type ButtonHierarchy = "Primary" | "Secondary" | "Tertiary" | "Link color" | "Link gray";
+type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    hierarchy?: ButtonHierarchy;
+    size?: ButtonSize;
+    loading?: boolean;
+}
+declare function Button({ hierarchy, size, loading, disabled, className, children, ...rest }: ButtonProps): react.JSX.Element;
+
+type ButtonCloseXSize = "sm" | "md" | "lg";
+interface ButtonCloseXProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> {
+    size?: ButtonCloseXSize;
+    /** Use the light-on-dark treatment (Figma `Dark background=True`). */
+    onDark?: boolean;
+    /** Accessible label (defaults to "Close"). */
+    label?: string;
+}
+declare function ButtonCloseX({ size, onDark, label, className, ...rest }: ButtonCloseXProps): react.JSX.Element;
+
+type ButtonDestructiveHierarchy = "Primary" | "Secondary" | "Tertiary" | "Link";
+type ButtonDestructiveSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface ButtonDestructiveProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    hierarchy?: ButtonDestructiveHierarchy;
+    size?: ButtonDestructiveSize;
+    loading?: boolean;
+}
+declare function ButtonDestructive({ hierarchy, size, loading, disabled, className, children, ...rest }: ButtonDestructiveProps): react.JSX.Element;
+
+interface ButtonGroupProps {
+    /** Segments — typically `ButtonGroupSegment` instances. */
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Segmented-control wrapper. Supplies the shared outer border, rounded ends,
+ * and the dividers between segments — segments themselves render borderless.
+ */
+declare function ButtonGroup({ children, className }: ButtonGroupProps): react.JSX.Element;
+
+type ButtonGroupSegmentSize = "sm" | "md";
+interface ButtonGroupSegmentProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> {
+    size?: ButtonGroupSegmentSize;
+    /** Active/pressed segment. */
+    current?: boolean;
+    /** Leading icon (or the only content for an icon-only segment). */
+    icon?: ReactNode;
+    /** Leading success dot. */
+    dot?: boolean;
+}
+declare function ButtonGroupSegment({ size, current, icon, dot, children, className, ...rest }: ButtonGroupSegmentProps): react.JSX.Element;
+
+type ButtonUtilitySize = "xs" | "sm";
+type ButtonUtilityVariant = "outline" | "ghost";
+interface ButtonUtilityProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> {
+    /** Required icon glyph. */
+    icon: ReactNode;
+    /** Accessible label (also used as the tooltip when `tooltip` is true). */
+    label: string;
+    size?: ButtonUtilitySize;
+    variant?: ButtonUtilityVariant;
+    /** Show the hover/focus tooltip bubble. */
+    tooltip?: boolean;
+}
+declare function ButtonUtility({ icon, label, size, variant, tooltip, className, ...rest }: ButtonUtilityProps): react.JSX.Element;
+
+interface CalendarCellProps {
+    /** Day-of-month number. */
+    date: string | number;
+    /** Event chips for this day — typically `CalendarEvent` instances. */
+    children?: ReactNode;
+    /** "+N more" overflow count shown beneath the events. */
+    moreCount?: number;
+    /** Other-month / disabled styling. */
+    muted?: boolean;
+    /** Marks today (date number in brand). */
+    current?: boolean;
+    /** Renders a hover "+" add button bottom-right. */
+    onAdd?: () => void;
+    className?: string;
+}
+/** A single day cell in the month grid. Composes CalendarEvent chips. */
+declare function CalendarCell({ date, children, moreCount, muted, current, onAdd, className, }: CalendarCellProps): react.JSX.Element;
+
+interface CalendarCellDayWeekViewProps {
+    /** Event block(s) occupying the slot — typically CalendarEventDayWeekView. */
+    children?: ReactNode;
+    /** Renders a hover "+" add button bottom-right. */
+    onAdd?: () => void;
+    /** Disabled / outside-hours styling. */
+    muted?: boolean;
+    className?: string;
+}
+/** A time-slot cell in day/week view. Holds CalendarEventDayWeekView blocks. */
+declare function CalendarCellDayWeekView({ children, onAdd, muted, className, }: CalendarCellDayWeekViewProps): react.JSX.Element;
+
+type CalendarColumnHeaderOrientation = "horizontal" | "vertical";
+interface CalendarColumnHeaderProps {
+    /** Weekday label (e.g. "Mon"). */
+    weekday: string;
+    /** Date number. */
+    date: string | number;
+    /** Active day — renders the date in a brand-solid circle. */
+    current?: boolean;
+    orientation?: CalendarColumnHeaderOrientation;
+    className?: string;
+}
+declare function CalendarColumnHeader({ weekday, date, current, orientation, className, }: CalendarColumnHeaderProps): react.JSX.Element;
+
+interface CalendarDateIconProps {
+    /** Short month label (e.g. "JAN"). Rendered uppercase. */
+    month: string;
+    /** Day number. */
+    day: string | number;
+    className?: string;
+}
+declare function CalendarDateIcon({ month, day, className }: CalendarDateIconProps): react.JSX.Element;
+
+type CalendarEventColor = "neutral" | "brand" | "emerald" | "blue" | "indigo" | "purple" | "pink" | "orange" | "amber";
+interface CalendarEventProps {
+    /** Event title. */
+    title: string;
+    /** Optional time label (e.g. "9:00 AM"). */
+    time?: string;
+    color?: CalendarEventColor;
+    /** Filled colour-fill style vs the subtle white style. */
+    filled?: boolean;
+    className?: string;
+}
+declare function CalendarEvent({ title, time, color, filled, className, }: CalendarEventProps): react.JSX.Element;
+
+interface CalendarEventDayWeekViewProps {
+    title: string;
+    time?: string;
+    color?: CalendarEventColor;
+    /** Filled colour-fill style vs the subtle tint. */
+    filled?: boolean;
+    className?: string;
+}
+declare function CalendarEventDayWeekView({ title, time, color, filled, className, }: CalendarEventDayWeekViewProps): react.JSX.Element;
+
+interface CalendarHeaderProps {
+    /** Period title, e.g. "January 2027". */
+    title: string;
+    /** Date range subtitle, e.g. "Jan 1, 2027 – Jan 31, 2027". */
+    range?: string;
+    /** Badge beside the title (e.g. a PillBadge "Week 1"). */
+    badge?: ReactNode;
+    /** Leading date chip — typically a CalendarDateIcon. */
+    dateIcon?: ReactNode;
+    /** Trailing controls slot — nav arrows, CalendarViewDropdown, Add event, etc. */
+    actions?: ReactNode;
+    className?: string;
+}
+/** Top bar of the calendar composite. A layout shell — drop controls into `actions`. */
+declare function CalendarHeader({ title, range, badge, dateIcon, actions, className, }: CalendarHeaderProps): react.JSX.Element;
+
+interface CalendarRowLabelProps {
+    /** Time label for the row gutter (e.g. "9 AM"). */
+    label: string;
+    className?: string;
+}
+/** Left-gutter time label aligned to the top of a day/week-view row. */
+declare function CalendarRowLabel({ label, className }: CalendarRowLabelProps): react.JSX.Element;
+
+type CalendarTimemarkerAlign = "left" | "center";
+interface CalendarTimemarkerProps {
+    /** Time label (e.g. "2:20 PM"). */
+    time: string;
+    /** Label position: leading, or centered between two line halves. */
+    align?: CalendarTimemarkerAlign;
+    className?: string;
+}
+declare function CalendarTimemarker({ time, align, className, }: CalendarTimemarkerProps): react.JSX.Element;
+
+type CalendarView = "day" | "week" | "month";
+interface CalendarViewOption {
+    value: CalendarView;
+    label: string;
+    shortcut?: string;
+}
+interface CalendarViewDropdownProps {
+    value: CalendarView;
+    onChange?: (value: CalendarView) => void;
+    options?: CalendarViewOption[];
+    className?: string;
+}
+declare function CalendarViewDropdown({ value, onChange, options, className, }: CalendarViewDropdownProps): react.JSX.Element;
+
+interface CardHeaderProps {
+    /** Card section title. */
+    title: string;
+    /** Supporting description under the title. */
+    description?: string;
+    /** Badge beside the title (e.g. a count "10/20 seats"). */
+    badge?: ReactNode;
+    /** Leading avatar (Figma `Avatar=True`). */
+    avatar?: ReactNode;
+    /** Trailing actions slot — buttons, overflow menu, etc. */
+    actions?: ReactNode;
+    /** Bottom divider rule (default true). */
+    divider?: boolean;
+    className?: string;
+}
+declare function CardHeader({ title, description, badge, avatar, actions, divider, className, }: CardHeaderProps): react.JSX.Element;
+
+type CarouselArrowDirection = "left" | "right";
+type CarouselArrowSize = "md" | "lg";
+interface CarouselArrowProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    direction?: CarouselArrowDirection;
+    size?: CarouselArrowSize;
+}
+/**
+ * Round carousel nav button on a translucent blurred background
+ * (`alpha-white-90` + `backdrop-blur-sm`). md = 36px / lg = 44px.
+ */
+declare function CarouselArrow({ direction, size, className, type, ...rest }: CarouselArrowProps): react.JSX.Element;
+
+interface CarouselImageProps extends HTMLAttributes<HTMLDivElement> {
+    imageUrl: string;
+    size?: CarouselArrowSize;
+    /** Total slides (drives the dot pager). */
+    count?: number;
+    /** Active slide index. */
+    current?: number;
+    onPrev?: () => void;
+    onNext?: () => void;
+}
+/**
+ * Carousel slide — a full-bleed image with overlaid prev/next `CarouselArrow`s
+ * and a bottom-centre `PaginationDotGroup` (framed). Aspect 8:5. Composition
+ * over the arrow + dot-group primitives.
+ */
+declare function CarouselImage({ imageUrl, size, count, current, onPrev, onNext, className, ...rest }: CarouselImageProps): react.JSX.Element;
+
+type ChangeType = "01" | "02" | "03";
+type ChangeTrend = "positive" | "negative";
+interface ChangeProps extends HTMLAttributes<HTMLDivElement> {
+    /** 01 = plain arrow · 02 = trend line · 03 = bordered pill (neutral text). */
+    type?: ChangeType;
+    trend?: ChangeTrend;
+    /** The delta value, e.g. "100%". */
+    children: ReactNode;
+}
+/**
+ * Trend delta chip used by `MetricItem` (and standalone). Three shapes:
+ * - **01** arrow + value, success/error tinted.
+ * - **02** trend-line + value, success/error tinted.
+ * - **03** bordered pill, diagonal arrow, **neutral** text regardless of trend.
+ */
+declare function Change({ type, trend, children, className, ...rest }: ChangeProps): react.JSX.Element;
+
+interface ChartLegendItem {
+    label: ReactNode;
+    color: string;
+}
+interface ChartLegendProps {
+    items: ChartLegendItem[];
+    /** Layout direction — `horizontal` (top) or `vertical` (right). */
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+}
+/**
+ * Chart legend — a row (or column) of colored-dot + label entries. Use standalone
+ * or feed Recharts' `<Legend content={...} />`. `color` is a real CSS color (the
+ * series color), matching the `CHART_COLORS` palette.
+ */
+declare function ChartLegend({ items, orientation, className }: ChartLegendProps): react.JSX.Element;
+
+type ChartMarkerLine = "solid" | "dashed" | "none";
+interface ChartMarkerProps {
+    /** Primary value shown in the bubble (e.g. "1,218"). */
+    value: string;
+    /** Optional secondary line (e.g. "Jan 10, 2027"). */
+    date?: string;
+    /** The drop line beneath the marker. */
+    line?: ChartMarkerLine;
+    /** Drop-line height. Defaults to h-32 (128px). */
+    lineHeightClass?: string;
+    className?: string;
+}
+declare function ChartMarker({ value, date, line, lineHeightClass, className, }: ChartMarkerProps): react.JSX.Element;
+
+interface ChartMiniDatum {
+    value: number;
+}
+type ChartMiniTrend = "positive" | "negative" | "neutral";
+interface ChartMiniProps {
+    /** Series points — only `value` is read. */
+    data: ChartMiniDatum[];
+    /**
+     * Stroke colour. A design-token name (e.g. `"utility-brand-500"`,
+     * `"utility-success-500"`) resolved to its hex, or a raw `#hex`. Defaults to
+     * the `trend` colour (`utility-brand-500` for neutral).
+     */
+    color?: string;
+    /** Drives the default stroke colour when `color` is omitted. */
+    trend?: ChartMiniTrend;
+    /** Container size (px). Figma sparkline is 112×56. */
+    width?: number | string;
+    height?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Sparkline — a thin Recharts `LineChart` wrapper. No axes, legend, tooltip or
+ * dots: line only. Consumed by `MetricItem`'s `chart` slot. Recharts is an
+ * optional peer dependency — install it in the consuming app to use this.
+ */
+declare function ChartMini({ data, color, trend, width, height, className, style, }: ChartMiniProps): react.JSX.Element;
+
+interface ChartTooltipPayloadItem {
+    name?: string;
+    value?: number | string;
+    color?: string;
+    dataKey?: string | number;
+}
+interface ChartTooltipProps {
+    /** Recharts passes this when the tooltip is shown. */
+    active?: boolean;
+    /** Series entries at the hovered point (Recharts shape). */
+    payload?: ChartTooltipPayloadItem[];
+    /** The category/x label at the hovered point. */
+    label?: ReactNode;
+    /** Format a value for display. */
+    formatValue?: (value: number | string | undefined) => ReactNode;
+}
+/**
+ * Themed tooltip card for the Recharts chart wrappers — pass as the chart's
+ * `<Tooltip content={<ChartTooltip />} />`. Renders a `bg-primary` card with the
+ * point label and one colored-dot row per series. Returns null when inactive.
+ */
+declare function ChartTooltip({ active, payload, label, formatValue }: ChartTooltipProps): react.JSX.Element | null;
+
+type CheckControlSize = "sm" | "md";
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    size?: CheckControlSize;
+    /** Indeterminate (mixed) visual state. */
+    indeterminate?: boolean;
+    label?: string;
+    supportingText?: string;
+}
+declare function Checkbox({ size, indeterminate, checked, disabled, label, supportingText, className, ...rest }: CheckboxProps): react.JSX.Element;
+
+interface CodeSnippetProps {
+    /** Raw code string. Rendered verbatim — see the highlighting note below. */
+    code: string;
+    /** Optional language label (shown in the toolbar). */
+    language?: string;
+    /** Show the line-number gutter. */
+    showLineNumbers?: boolean;
+    /** Override the copy handler (defaults to navigator.clipboard). */
+    onCopy?: (code: string) => void;
+    className?: string;
+}
+declare function CodeSnippet({ code, language, showLineNumbers, onCopy, className, }: CodeSnippetProps): react.JSX.Element;
+
+interface CodeSnippetTabsProps {
+    /** Tab labels (e.g. ["npm", "yarn", "bun"]). */
+    tabs: string[];
+    /** Currently-selected tab. */
+    value: string;
+    onChange?: (tab: string) => void;
+    className?: string;
+}
+/** Tab strip for CodeSnippet's "Vertical with tabs" type. */
+declare function CodeSnippetTabs({ tabs, value, onChange, className, }: CodeSnippetTabsProps): react.JSX.Element;
+
+interface CommandBarFooterHint {
+    /** Key cap(s) for this hint — one or more CommandBarNavigationIcon elements. */
+    keys: ReactNode;
+    /** Description shown after the keys, e.g. "to navigate". */
+    label: string;
+}
+interface CommandBarFooterProps {
+    /**
+     * Hint groups shown left-to-right. Defaults to the standard
+     * navigate / select / close / return-to-parent set.
+     */
+    hints?: CommandBarFooterHint[];
+    /** When provided, renders the trailing settings button. */
+    onSettings?: () => void;
+    className?: string;
+}
+/**
+ * Footer bar for a command menu — keyboard-navigation hints plus an optional
+ * settings button. Composes CommandBarNavigationIcon.
+ */
+declare function CommandBarFooter({ hints, onSettings, className, }: CommandBarFooterProps): react.JSX.Element;
+
+interface CommandBarProps {
+    open?: boolean;
+    onClose?: () => void;
+    /** Search value (controlled). */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    /** Trailing shortcut hint in the input (e.g. a `CommandShortcut`). */
+    shortcut?: ReactNode;
+    onHelp?: () => void;
+    /** Body — typically `CommandBarMenuSection` children. */
+    children?: ReactNode;
+    /** Footer hints; omit to use the default set. `false` hides the footer. */
+    footerHints?: CommandBarFooterHint[] | false;
+    onSettings?: () => void;
+    /** Render a dimmed backdrop behind the panel (click closes). */
+    withBackdrop?: boolean;
+    className?: string;
+}
+/**
+ * Command palette — thin assembly of the `Command*` primitives: `CommandInput`
+ * (search) + a scrollable body of `CommandBarMenuSection`s (`children`) +
+ * `CommandBarFooter`. Controlled via `open`; renders nothing when closed. Pass an
+ * optional `withBackdrop` for the dimmed overlay.
+ */
+declare function CommandBar({ open, onClose, value, onValueChange, placeholder, shortcut, onHelp, children, footerHints, onSettings, withBackdrop, className, }: CommandBarProps): react.JSX.Element | null;
+
+interface CommandBarMenuSectionProps {
+    /** Section heading (e.g. "Recent"). */
+    label?: string;
+    /** Section rows — typically CommandDropdownMenuItem instances. */
+    children: ReactNode;
+    className?: string;
+}
+/** A labelled group of command-bar results. */
+declare function CommandBarMenuSection({ label, children, className, }: CommandBarMenuSectionProps): react.JSX.Element;
+
+interface CommandBarNavigationIconProps {
+    /**
+     * `"icon"` renders a 16px icon slot (pass the glyph as `children`);
+     * `"text"` renders a short key label such as "esc" (pass it as `label`).
+     */
+    type?: "icon" | "text";
+    /** Icon glyph for `type="icon"`. */
+    children?: ReactNode;
+    /** Short key label for `type="text"`. */
+    label?: string;
+    className?: string;
+}
+/**
+ * A single key cap in a command-bar footer — either a 16px navigation icon
+ * (arrows, enter) or a short text key like "esc". Used by CommandBarFooter.
+ */
+declare function CommandBarNavigationIcon({ type, children, label, className, }: CommandBarNavigationIconProps): react.JSX.Element;
+
+interface CommandDropdownMenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "title"> {
+    /** Primary label. */
+    title: string;
+    /** Secondary text shown next to the title (e.g. a @handle). */
+    subtitle?: string;
+    /** Leading slot — avatar, icon, or dot. */
+    icon?: ReactNode;
+    /** Trailing slot — typically a CommandShortcut. */
+    shortcut?: ReactNode;
+    /** Highlighted/active row. */
+    selected?: boolean;
+}
+/** A single result row inside a command bar menu. */
+declare function CommandDropdownMenuItem({ title, subtitle, icon, shortcut, selected, className, ...rest }: CommandDropdownMenuItemProps): react.JSX.Element;
+
+interface CommandInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Trailing shortcut hint (e.g. a CommandShortcut for "⌘/"). */
+    shortcut?: ReactNode;
+    /** Renders a help (?) button before the shortcut. */
+    onHelp?: () => void;
+}
+/** Search/command input row — the trigger field of a command bar. */
+declare function CommandInput({ shortcut, onHelp, className, ...rest }: CommandInputProps): react.JSX.Element;
+
+interface CommandShortcutProps {
+    /** Keys rendered as individual kbd badges, e.g. ["⌘", "C"] or ["⌘C"]. */
+    keys: string[];
+    className?: string;
+}
+/**
+ * Keyboard-shortcut hint (kbd badges). For multi-step sequences like
+ * "⌘K then → C", render two CommandShortcut with connector text between them.
+ */
+declare function CommandShortcut({ keys, className }: CommandShortcutProps): react.JSX.Element;
+
+type ContentDividerType = "heading" | "text" | "button" | "button-icon" | "button-group" | "button-group-icon";
+type ContentDividerStyle = "single-line" | "dual-line" | "background-fill";
+interface ContentDividerProps {
+    /** What sits in the centre of the divider. */
+    type?: ContentDividerType;
+    /** How the divider rules/background are drawn. */
+    style?: ContentDividerStyle;
+    /** Text shown for `type="heading"` / `type="text"`. */
+    label?: string;
+    /**
+     * Centre content for the button variants (`button`, `button-icon`,
+     * `button-group`, `button-group-icon`) — pass a Button / ButtonGroup etc.
+     */
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * A horizontal section divider with a centred label, button, or button group.
+ * `style` controls whether the rules sit on the sides (single line), top &
+ * bottom (dual line), or are replaced by a filled background.
+ */
+declare function ContentDivider({ type, style, label, children, className, }: ContentDividerProps): react.JSX.Element;
+
+type ContentFeatureTextSize = "sm" | "md";
+interface ContentFeatureTextProps {
+    /** Heading shown above the body. */
+    heading?: ReactNode;
+    /** Body content — typically one or more `<p>` elements. */
+    children: ReactNode;
+    /** Type / padding scale. */
+    size?: ContentFeatureTextSize;
+    className?: string;
+}
+/**
+ * A highlighted block of feature copy (heading + body) on a filled
+ * background — used inside long-form content.
+ */
+declare function ContentFeatureText({ heading, children, size, className, }: ContentFeatureTextProps): react.JSX.Element;
+
+type ContentHeadingSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface ContentHeadingProps {
+    /** Type scale. xs/sm use the body font; md/lg/xl use the display font. */
+    size?: ContentHeadingSize;
+    /** Rendered element. Defaults to `h2`. */
+    as?: ElementType;
+    children: ReactNode;
+    className?: string;
+}
+/** Long-form content heading (article/marketing body copy). */
+declare function ContentHeading({ size, as: Tag, children, className, }: ContentHeadingProps): react.JSX.Element;
+
+type ContentParagraphSize = "sm" | "md" | "lg" | "xl";
+interface ContentParagraphProps {
+    /** Type scale. */
+    size?: ContentParagraphSize;
+    children: ReactNode;
+    className?: string;
+}
+/** Long-form content paragraph (article/marketing body copy). */
+declare function ContentParagraph({ size, children, className, }: ContentParagraphProps): react.JSX.Element;
+
+type ContentQuoteAlign = "left" | "center";
+type ContentQuoteSize = "sm" | "md" | "lg" | "xl" | "2xl";
+interface ContentQuoteProps {
+    /** The quotation text. */
+    quote: ReactNode;
+    /** Left-bordered (default) or centred layout. */
+    align?: ContentQuoteAlign;
+    /** Quote type scale. */
+    size?: ContentQuoteSize;
+    /** Author avatar — compose an Avatar. */
+    avatar?: ReactNode;
+    /** Author name. */
+    authorName?: ReactNode;
+    /** Author role / supporting line. */
+    authorRole?: ReactNode;
+    className?: string;
+}
+/** Long-form pull quote with optional author attribution. */
+declare function ContentQuote({ quote, align, size, avatar, authorName, authorRole, className, }: ContentQuoteProps): react.JSX.Element;
+
+type ContentRuleSize = "sm" | "md" | "lg" | "xl" | "2xl";
+interface ContentRuleProps {
+    /** Controls the vertical breathing room around the rule. */
+    size?: ContentRuleSize;
+    className?: string;
+}
+/**
+ * A plain full-width horizontal rule for separating blocks of long-form
+ * content. Distinct from `ContentDivider`, which carries a centred
+ * label/button. `size` sets the surrounding vertical spacing.
+ */
+declare function ContentRule({ size, className }: ContentRuleProps): react.JSX.Element;
+
+interface ContextMenuProps {
+    /** Whether the menu is visible. */
+    open: boolean;
+    /** Viewport x of the right-click (from useContextMenu). */
+    x: number;
+    /** Viewport y of the right-click (from useContextMenu). */
+    y: number;
+    /** Called on outside-click or Escape. */
+    onClose: () => void;
+    /** Menu rows — typically DropdownMenuListItem elements. */
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * A thin positioned panel for right-click menus. Reuses the dropdown panel
+ * tokens (shadow-lg, border-secondary-alt, radius-md) and renders whatever
+ * rows you pass — compose DropdownMenuListItem children; it does NOT
+ * reimplement list items. Pair with `useContextMenu`.
+ */
+declare function ContextMenu({ open, x, y, onClose, children, className, }: ContextMenuProps): react.JSX.Element | null;
+
+interface ContextMenuState {
+    open: boolean;
+    x: number;
+    y: number;
+}
+interface UseContextMenuReturn extends ContextMenuState {
+    /** Attach to the element that should open the menu on right-click. */
+    onContextMenu: (e: {
+        preventDefault: () => void;
+        clientX: number;
+        clientY: number;
+    }) => void;
+    /** Close the menu. */
+    close: () => void;
+}
+/**
+ * Captures right-click position and manages open state for a ContextMenu.
+ *
+ * ```tsx
+ * const menu = useContextMenu();
+ * <div onContextMenu={menu.onContextMenu}>…</div>
+ * <ContextMenu open={menu.open} x={menu.x} y={menu.y} onClose={menu.close}>
+ *   <DropdownMenuListItem>Cut</DropdownMenuListItem>
+ * </ContextMenu>
+ * ```
+ */
+declare function useContextMenu(): UseContextMenuReturn;
+
+type DatePickerCellType = "default" | "active" | "selected" | "today";
+interface DatePickerCellProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    /** Day number (or any short label). */
+    date: ReactNode;
+    /** Visual role of the cell within the calendar grid. */
+    cellType?: DatePickerCellType;
+    /** Shows the small "has events" dot under the date. */
+    hasDot?: boolean;
+    /** Range-fill connector on the left edge (cell is mid/end of a range). */
+    leftConnector?: boolean;
+    /** Range-fill connector on the right edge (cell is start/mid of a range). */
+    rightConnector?: boolean;
+}
+/**
+ * A single day cell in the date-picker calendar grid. Distinct from the
+ * Calendar page's own `CalendarCell` — this one is round, supports range
+ * connectors, and a selected (brand-filled) state.
+ */
+declare function DatePickerCell({ date, cellType, hasDot, leftConnector, rightConnector, disabled, className, ...rest }: DatePickerCellProps): react.JSX.Element;
+
+interface DatePickerListItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Marks the item as the current selection (filled background). */
+    selected?: boolean;
+    children: ReactNode;
+}
+/**
+ * A selectable row in a date-picker preset list (e.g. "Today", "Last 7 days").
+ * Hover and focus are handled natively; pass `selected` for the active row.
+ */
+declare function DatePickerListItem({ selected, children, className, ...rest }: DatePickerListItemProps): react.JSX.Element;
+
+interface DatePickerMenuProps {
+    /** Current month label, e.g. "January 2027". */
+    monthLabel: ReactNode;
+    /** Previous-month handler. */
+    onPrevMonth?: () => void;
+    /** Next-month handler. */
+    onNextMonth?: () => void;
+    /** Weekday column headers. Defaults to Mo–Su. */
+    weekdays?: string[];
+    /**
+     * Optional row above the grid (e.g. a date input + "Today" button).
+     * Compose your own controls here.
+     */
+    toolbar?: ReactNode;
+    /** The day grid — typically 35–42 DatePickerCell elements. */
+    children: ReactNode;
+    /** Cancel handler (renders the footer when set with onApply). */
+    onCancel?: () => void;
+    /** Apply handler (renders the footer when set with onCancel). */
+    onApply?: () => void;
+    cancelLabel?: ReactNode;
+    applyLabel?: ReactNode;
+    className?: string;
+}
+/**
+ * The calendar panel of a date picker — month navigation, weekday header,
+ * a day grid (compose DatePickerCell children), and optional toolbar/footer.
+ * Date math is the consumer's responsibility; this renders the chrome.
+ */
+declare function DatePickerMenu({ monthLabel, onPrevMonth, onNextMonth, weekdays, toolbar, children, onCancel, onApply, cancelLabel, applyLabel, className, }: DatePickerMenuProps): react.JSX.Element;
+
+interface DropdownAccountListItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "name"> {
+    /** Square avatar (compose an avatar/image). */
+    avatar?: ReactNode;
+    /** Account name. */
+    name: ReactNode;
+    /** Account email / supporting line. */
+    email?: ReactNode;
+    /** Whether this account is the active selection (filled radio). */
+    selected?: boolean;
+}
+/**
+ * An account-switcher row for a dropdown menu — square avatar, name + email,
+ * and a trailing radio indicator. Hover handled natively.
+ */
+declare function DropdownAccountListItem({ avatar, name, email, selected, className, ...rest }: DropdownAccountListItemProps): react.JSX.Element;
+
+type DropdownMenuFooterType = "text" | "button";
+interface DropdownMenuFooterProps {
+    /** `text` shows a left/right caption pair; `button` hosts an action. */
+    type?: DropdownMenuFooterType;
+    /** Left caption for `type="text"`. */
+    left?: ReactNode;
+    /** Right caption for `type="text"`. */
+    right?: ReactNode;
+    /** Action content for `type="button"` — compose a Button. */
+    children?: ReactNode;
+    className?: string;
+}
+/** The bottom section of a dropdown menu panel. */
+declare function DropdownMenuFooter({ type, left, right, children, className, }: DropdownMenuFooterProps): react.JSX.Element;
+
+type DropdownMenuHeaderType = "avatar-group" | "header" | "subheading" | "search";
+interface DropdownMenuHeaderProps {
+    /** Header layout. */
+    type?: DropdownMenuHeaderType;
+    /** Primary text (name / heading / subheading label). */
+    title?: ReactNode;
+    /** Secondary line (email / supporting text). */
+    supportingText?: ReactNode;
+    /** Avatar node for `avatar-group`. */
+    avatar?: ReactNode;
+    /** Search control for `search` (compose your own input). */
+    search?: ReactNode;
+    className?: string;
+}
+/** The top section of a dropdown menu panel. */
+declare function DropdownMenuHeader({ type, title, supportingText, avatar, search, className, }: DropdownMenuHeaderProps): react.JSX.Element;
+
+type DropdownMenuItemInsetIconType = "spacer" | "icon" | "check" | "checkbox" | "dot" | "avatar" | "integration-icon";
+interface DropdownMenuItemInsetIconProps {
+    /** Which leading visual to render in the 16px slot. */
+    type?: DropdownMenuItemInsetIconType;
+    /** Glyph/avatar/integration content for `icon`/`avatar`/`integration-icon`. */
+    children?: ReactNode;
+    /** Checked state for `checkbox`. */
+    checked?: boolean;
+    className?: string;
+}
+/**
+ * The 16px leading-icon slot used inside a dropdown menu row. Renders one of
+ * several visuals (icon, check, checkbox, radio dot, avatar, integration icon)
+ * or an empty spacer to keep labels aligned.
+ */
+declare function DropdownMenuItemInsetIcon({ type, children, checked, className, }: DropdownMenuItemInsetIconProps): react.JSX.Element;
+
+interface DropdownMenuListItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    /** Leading visual — typically a DropdownMenuItemInsetIcon. */
+    leadingIcon?: ReactNode;
+    /** Trailing keyboard-shortcut hint. */
+    shortcut?: ReactNode;
+    /** Shows the trailing chevron (submenu affordance). */
+    chevron?: boolean;
+    /** Renders a divider rule instead of an interactive row. */
+    divider?: boolean;
+    /** Highlights the row as currently active/open. */
+    selected?: boolean;
+    children?: ReactNode;
+}
+/**
+ * A single row in a dropdown menu — leading icon, label, optional shortcut and
+ * submenu chevron. Pass `divider` to render a separator rule instead.
+ */
+declare function DropdownMenuListItem({ leadingIcon, shortcut, chevron, divider, selected, children, className, disabled, ...rest }: DropdownMenuListItemProps): react.JSX.Element;
+
+type EmptyStateSize = "sm" | "md" | "lg";
+interface EmptyStateProps {
+    /**
+     * The icon/illustration area. Pass any of the 8 Figma options (featured
+     * icon, folder, file-type, illustration, users, integrations) as a node —
+     * EmptyState doesn't prescribe which.
+     */
+    icon?: ReactNode;
+    /** Headline. */
+    title: ReactNode;
+    /** Supporting copy under the title. */
+    description?: ReactNode;
+    /** Action buttons row — compose Button(s). */
+    actions?: ReactNode;
+    /** Size scale (affects title size + max text width). */
+    size?: EmptyStateSize;
+    className?: string;
+}
+/**
+ * Centred empty/zero state — icon, title, supporting text, and actions.
+ * The icon area is a single slot (`icon`) per the resolved structural
+ * decision (one component, icon slot — not split per icon type).
+ */
+declare function EmptyState({ icon, title, description, actions, size, className, }: EmptyStateProps): react.JSX.Element;
+
+type FeedItemSize = "sm" | "md";
+interface FeedItemBaseProps {
+    /** Display name of the actor (e.g. "Olivia Rhye"). */
+    name: string;
+    /** Relative timestamp shown next to the name (e.g. "2 mins ago"). */
+    timestamp: string;
+    /**
+     * The activity line beneath the name — e.g. "Invited Lana Steiner to the
+     * team". Pass a ReactNode so embedded links can use
+     * `text-text-brand-secondary font-medium`.
+     */
+    action?: ReactNode;
+    /**
+     * Optional supporting content rendered below the action line. In Figma this
+     * is the `Supporting item` variant (File / Labels / Text). It's modelled as a
+     * slot rather than a `type` prop so consumers compose the actual content —
+     * which keeps the File sample's `Colors/Red/600` and the Labels sample's
+     * `utility-*` color families (both flagged in figma-map.md, neither in
+     * tailwind-preset.js) out of this base component.
+     */
+    supporting?: ReactNode;
+    /** Avatar image URL. Falls back to a neutral placeholder when omitted. */
+    avatarSrc?: string;
+    /** Alt text for the avatar image. */
+    avatarAlt?: string;
+    /** Show the online status dot on the avatar. */
+    hasStatus?: boolean;
+    /** Render the vertical connector line below the avatar (for stacked feeds). */
+    connector?: boolean;
+    /** Show the unread "new" dot in the top-right corner. */
+    isNew?: boolean;
+    size?: FeedItemSize;
+    className?: string;
+}
+declare function FeedItemBase({ name, timestamp, action, supporting, avatarSrc, avatarAlt, hasStatus, connector, isNew, size, className, }: FeedItemBaseProps): react.JSX.Element;
+
+interface FileUploadProps {
+    /** Selected files (controlled). */
+    files?: File[];
+    onFilesChange?: (files: File[]) => void;
+    /** Max number of files kept; extra picks are dropped. */
+    maxFiles?: number;
+    /** Accepted MIME types / extensions for the native picker. */
+    accept?: string;
+    disabled?: boolean;
+    actionText?: ReactNode;
+    promptText?: ReactNode;
+    hint?: ReactNode;
+    className?: string;
+}
+/**
+ * File upload — composes the `FileUploadBase` dropzone (click + drag/drop, via a
+ * hidden native input) with a `FileUploadItemBase` list. Controlled through
+ * `files`/`onFilesChange`; respects `maxFiles` and `accept`. The item rows here
+ * are simple "complete" entries — wire `progress`/`status` per item if you need
+ * live upload state.
+ */
+declare function FileUpload({ files, onFilesChange, maxFiles, accept, disabled, actionText, promptText, hint, className, }: FileUploadProps): react.JSX.Element;
+
+interface FileUploadBaseProps extends HTMLAttributes<HTMLDivElement> {
+    /** Emphasised action text. */
+    actionText?: ReactNode;
+    /** Trailing prompt after the action text. */
+    promptText?: ReactNode;
+    /** Constraints hint (e.g. "SVG, PNG, JPG or GIF (max. 800x400px)"). */
+    hint?: ReactNode;
+    /** Active drag-over styling (brand border). */
+    dragActive?: boolean;
+    /** Disabled styling + interaction. */
+    disabled?: boolean;
+}
+/**
+ * The drop-zone region of a file upload — featured upload icon, click/drag
+ * prompt, and a constraints hint. Wire up the actual file input / drag events
+ * on the consumer side (pass handlers via the standard div props).
+ */
+declare function FileUploadBase({ actionText, promptText, hint, dragActive, disabled, className, ...rest }: FileUploadBaseProps): react.JSX.Element;
+
+type FileUploadItemStatus = "in-progress" | "complete" | "error";
+type FileUploadItemType = "bar" | "fill";
+type FileUploadItemIconType = "file-type" | "simple";
+interface FileUploadItemBaseProps {
+    /** File name. */
+    fileName: ReactNode;
+    /** Size / supporting line (e.g. "20 KB of 200 KB"). */
+    meta?: ReactNode;
+    /** Upload status. */
+    status?: FileUploadItemStatus;
+    /** Progress 0–100 (used when `type="bar"` and not errored). */
+    progress?: number;
+    /** "bar" shows a progress bar row; "fill" fills the row background. */
+    type?: FileUploadItemType;
+    /** File-type badge icon vs a simple file glyph. */
+    iconType?: FileUploadItemIconType;
+    /** Short extension label for the file-type icon (e.g. "PDF"). */
+    fileExt?: string;
+    /** Error message (status="error"). */
+    errorText?: ReactNode;
+    onDelete?: () => void;
+    onRetry?: () => void;
+    className?: string;
+}
+/**
+ * A single file row in an upload list — file icon, name, status line, progress,
+ * and delete/retry actions. Covers the Figma matrix (bar/fill × file-type/simple
+ * × in-progress/complete/error) via props. The `fill` type renders progress as
+ * a background fill (simplified vs the exact Figma overlay).
+ */
+declare function FileUploadItemBase({ fileName, meta, status, progress, type, iconType, fileExt, errorText, onDelete, onRetry, className, }: FileUploadItemBaseProps): react.JSX.Element;
+
+interface FilterBarProps {
+    /**
+     * Filter controls on the left (compose Select / MultiSelect / etc.).
+     * Covers the Dropdowns and Date filters types.
+     */
+    filters?: ReactNode;
+    /** Show the date-picker slot in the trailing actions. */
+    withDatePicker?: boolean;
+    /** Date-picker trigger node, rendered when `withDatePicker`. */
+    datePicker?: ReactNode;
+    /** Extra trailing actions (e.g. a "More filters" button, search icon). */
+    actions?: ReactNode;
+    /** When set, renders the "Clear all" button. */
+    onClearAll?: () => void;
+    clearLabel?: ReactNode;
+    className?: string;
+}
+/**
+ * Dropdown-driven filter bar — a row of filter controls with optional trailing
+ * date picker and actions. A layout shell: compose the actual Select/MultiSelect
+ * controls as `filters` and any trigger buttons as `datePicker`/`actions`.
+ * Covers the Figma "Dropdowns", "Dropdowns and date picker" and "Date filters"
+ * types. (The "Simple" type is just a SearchInput — use that directly.)
+ */
+declare function FilterBar({ filters, withDatePicker, datePicker, actions, onClearAll, clearLabel, className, }: FilterBarProps): react.JSX.Element;
+
+interface FilterTabsProps {
+    /** Tab strip on the left (compose your tab buttons / segmented control). */
+    tabs?: ReactNode;
+    /** Search input slot (the "Tabs and search" type). */
+    search?: ReactNode;
+    /** Date-picker trigger slot (the "Tabs and date picker" type). */
+    datePicker?: ReactNode;
+    /** When true, show `datePicker` in the trailing area instead of `search`. */
+    withDatePicker?: boolean;
+    /** Extra trailing actions (e.g. a Filters button). */
+    actions?: ReactNode;
+    className?: string;
+}
+/**
+ * Tab-based filter navigation — a tab strip on the left with a trailing search
+ * (or date picker) and optional actions. Layout shell: compose the tab control,
+ * search input, and date picker as slots. Covers the Figma "Tabs and search"
+ * and "Tabs and date picker" types.
+ */
+declare function FilterTabs({ tabs, search, datePicker, withDatePicker, actions, className, }: FilterTabsProps): react.JSX.Element;
+
+interface FiltersDropdownMenuProps {
+    /** Trigger label. */
+    label?: ReactNode;
+    /** Active-filter count — when > 0 the trigger gets the active styling + badge. */
+    count?: number;
+    /** Show the trailing chevron. */
+    chevron?: boolean;
+    disabled?: boolean;
+    /** Whether the panel is open. */
+    open?: boolean;
+    onToggle?: () => void;
+    /** Panel alignment relative to the trigger. */
+    align?: "left" | "right";
+    /** Panel content (the filter list) — compose your own rows. */
+    children?: ReactNode;
+    /** Panel footer (e.g. Reset / Apply). */
+    footer?: ReactNode;
+    className?: string;
+}
+/**
+ * A "Filters" dropdown trigger button plus its panel. The trigger covers the
+ * default/hover/focus/disabled/active states (active when `count > 0`); the
+ * open panel content is a slot — compose the filter rows yourself.
+ */
+declare function FiltersDropdownMenu({ label, count, chevron, disabled, open, onToggle, align, children, footer, className, }: FiltersDropdownMenuProps): react.JSX.Element;
+
+interface FiltersSlideoutMenuProps {
+    /** Panel title. */
+    title?: ReactNode;
+    /** Supporting text under the title. */
+    supportingText?: ReactNode;
+    /** Close handler → renders the header close button. */
+    onClose?: () => void;
+    /** Filter body — compose the filter groups (Empty/Inactive/Active states). */
+    children?: ReactNode;
+    /** Footer actions (e.g. Reset / Apply). */
+    footer?: ReactNode;
+    className?: string;
+}
+/**
+ * A slide-out filter drawer — header (title + close), a scrollable filter body,
+ * and a footer for actions. The body is a slot: compose the empty / inactive /
+ * active filter content yourself. Structural shell (mobile/desktop differ only
+ * in width on the consumer side).
+ */
+declare function FiltersSlideoutMenu({ title, supportingText, onClose, children, footer, className, }: FiltersSlideoutMenuProps): react.JSX.Element;
+
+type HeaderNavigationType = "Simple" | "DualTier" | "Centered" | "Tabs";
+interface HeaderNavItem {
+    label: ReactNode;
+    href?: string;
+    active?: boolean;
+    onClick?: () => void;
+}
+interface HeaderNavigationProps {
+    /** Layout variant. */
+    type?: HeaderNavigationType;
+    /** Brand mark (logo). Defaults to a text wordmark. */
+    logo?: ReactNode;
+    /** Primary navigation items. */
+    items?: HeaderNavItem[];
+    /** Right-aligned actions on desktop (search/settings/notifications/account). */
+    actions?: ReactNode;
+    /** Content shown at the bottom of the open mobile drawer (e.g. an account card). */
+    mobileFooter?: ReactNode;
+    className?: string;
+}
+/**
+ * Application header navigation. One component with a `type` prop covering the
+ * Simple / DualTier / Centered / Tabs layouts. Below `md` it collapses to a
+ * logo + hamburger that opens a real (stateful) drawer.
+ */
+declare function HeaderNavigation({ type, logo, items, actions, mobileFooter, className, }: HeaderNavigationProps): react.JSX.Element;
+
+type TooltipArrow = "none" | "topCenter" | "bottomCenter" | "bottomLeft" | "bottomRight" | "left" | "right";
+interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+    /** Tooltip heading text. */
+    text?: ReactNode;
+    children?: ReactNode;
+    /** Secondary line below the heading. */
+    supportingText?: ReactNode;
+    /** Arrow position relative to the bubble. */
+    arrow?: TooltipArrow;
+}
+/**
+ * Presentational tooltip bubble (dark `bg-primary-solid`, white text). `text` is
+ * the heading; `supportingText` adds a second `utility-neutral-300` line (max
+ * 296px). `arrow` positions a small pointer on the bubble edge (rendered as a
+ * rotated square). Positioning relative to a trigger is the caller's job.
+ */
+declare function Tooltip({ text, children, supportingText, arrow, className, ...rest }: TooltipProps): react.JSX.Element;
+
+interface HelpIconProps {
+    /** Tooltip heading text. */
+    text?: ReactNode;
+    /** Optional second tooltip line. */
+    supportingText?: ReactNode;
+    /** Tooltip arrow position (default bottomCenter — tooltip sits above). */
+    arrow?: TooltipArrow;
+    /** Icon box size in px (default 16). */
+    size?: number;
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * Help "?" icon that reveals a `Tooltip` on hover/focus. A composition (icon
+ * button + `Tooltip`), not a new primitive — the tooltip shows via CSS on
+ * `group-hover`/`focus-within`, positioned above the icon.
+ */
+declare function HelpIcon({ text, supportingText, arrow, size, className, "aria-label": ariaLabel, }: HelpIconProps): react.JSX.Element;
+
+type InputFieldSize = "sm" | "md" | "lg";
+
+type InputFieldType = "default" | "password" | "date-time" | "payment";
+interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /** Field variant — drives the native input type and default affordances. */
+    type?: InputFieldType;
+    size?: InputFieldSize;
+    label?: ReactNode;
+    hint?: ReactNode;
+    required?: boolean;
+    destructive?: boolean;
+    /** Leading icon (overrides the per-type default, e.g. payment card). */
+    leadingIcon?: ReactNode;
+    /** Trailing icon (overrides the per-type default). */
+    trailingIcon?: ReactNode;
+}
+/**
+ * Standard text input. `type` covers Default / Password / Date-time / Payment —
+ * same structural markup, differing only in the native input type and default
+ * leading/trailing affordance (password eye toggle, date-time calendar, payment
+ * card). Leading/trailing icons can be overridden via slots.
+ */
+declare function InputField({ type, size, label, hint, required, destructive, leadingIcon, trailingIcon, className, ...rest }: InputFieldProps): react.JSX.Element;
+
+interface LeadingInputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
+    /**
+     * Left add-on — a text prefix (e.g. "https://") or a leading dropdown.
+     * Covers the Leading text / Leading dropdown types.
+     */
+    prefix?: ReactNode;
+    size?: InputFieldSize;
+    label?: ReactNode;
+    hint?: ReactNode;
+    required?: boolean;
+    destructive?: boolean;
+}
+/** Input with a left add-on (text prefix or dropdown). */
+declare function LeadingInputField({ prefix, size, label, hint, required, destructive, className, ...rest }: LeadingInputFieldProps): react.JSX.Element;
+
+type ChartStyle = "line" | "bar";
+type ChartLegendPosition = "none" | "top" | "right";
+interface ChartSeries {
+    /** Key into each data row. */
+    dataKey: string;
+    /** Display name (legend/tooltip). Defaults to `dataKey`. */
+    name?: string;
+    /** Override color; defaults to the palette by index. */
+    color?: string;
+}
+interface LineAndBarChartProps {
+    data: Record<string, number | string>[];
+    series: ChartSeries[];
+    /** Key for the x-axis category. */
+    xKey: string;
+    type?: ChartStyle;
+    legend?: ChartLegendPosition;
+    axisLabels?: boolean;
+    height?: number;
+    className?: string;
+    /** Tooltip value formatter. */
+    formatValue?: (value: number | string | undefined) => ReactNode;
+}
+/**
+ * Line or bar chart — a themed Recharts wrapper (not a from-scratch renderer).
+ * `series` map to `<Line>`/`<Bar>` colored from the shared palette; `legend`
+ * positions a `ChartLegend` top/right; `axisLabels` toggles the X/Y ticks.
+ * Recharts is an optional peer dependency.
+ */
+declare function LineAndBarChart({ data, series, xKey, type, legend, axisLabels, height, className, formatValue, }: LineAndBarChartProps): react.JSX.Element;
+
+type LinkMessageType = "minimal" | "preview";
+interface LinkMessageProps {
+    /** `minimal` = link only; `preview` = open-graph image + link. */
+    type?: LinkMessageType;
+    /** The URL (rendered as an underlined link). */
+    url?: string;
+    /** Open-graph image source (preview). */
+    image?: string;
+    /** Optional body text shown above the link. */
+    children?: ReactNode;
+    author?: ReactNode;
+    time?: ReactNode;
+    avatar?: ReactNode;
+    sent?: boolean;
+    reactions?: ReactNode;
+    className?: string;
+}
+/** A chat message that unfurls a URL — minimal (link only) or preview (with OG image). */
+declare function LinkMessage({ type, url, image, children, author, time, avatar, sent, reactions, className, }: LinkMessageProps): react.JSX.Element;
+
+type LoadingIndicatorStyle = "line-simple" | "line-spinner" | "dot-circle";
+type LoadingIndicatorSize = "sm" | "md" | "lg" | "xl";
+interface LoadingIndicatorProps {
+    /** Spinner style. */
+    variant?: LoadingIndicatorStyle;
+    /** Size scale. md = 48px (verified); sm/lg/xl inferred. */
+    size?: LoadingIndicatorSize;
+    /** Optional supporting text below the spinner (e.g. "Loading..."). */
+    label?: ReactNode;
+    className?: string;
+}
+/**
+ * Spinner / loading indicator. `line-simple` and `line-spinner` are stroked
+ * rings (spinner uses a round cap); `dot-circle` is a ring of fading dots.
+ * Rendered with CSS animation rather than the Figma image asset.
+ */
+declare function LoadingIndicator({ variant, size, label, className, }: LoadingIndicatorProps): react.JSX.Element;
+
+type MediaMessageType = "file" | "audio" | "video" | "image";
+interface MediaMessageProps {
+    /** Attachment kind. */
+    type?: MediaMessageType;
+    /** File name (file/audio/video). */
+    fileName?: ReactNode;
+    /** Supporting line — size / duration. */
+    meta?: ReactNode;
+    /** Short extension label for the file-type icon (file type). */
+    fileExt?: string;
+    /** Image/video poster source. */
+    src?: string;
+    author?: ReactNode;
+    time?: ReactNode;
+    avatar?: ReactNode;
+    sent?: boolean;
+    reactions?: ReactNode;
+    className?: string;
+}
+/** A chat message carrying an attachment — file, audio, video, or image. */
+declare function MediaMessage({ type, fileName, meta, fileExt, src, author, time, avatar, sent, reactions, className, }: MediaMessageProps): react.JSX.Element;
+
+type MegaInputFieldBaseSize = "sm" | "md" | "lg";
+interface MegaInputFieldBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    size?: MegaInputFieldBaseSize;
+    /** Error styling. */
+    destructive?: boolean;
+}
+/**
+ * A single large character/code-entry cell (one digit per box) used to compose
+ * OTP / verification inputs. `Size` (sm/md/lg) × states (placeholder/focused/
+ * filled/disabled/error) — focus & fill are native; pass `destructive` for error.
+ */
+declare function MegaInputFieldBase({ size, destructive, disabled, className, ...rest }: MegaInputFieldBaseProps): react.JSX.Element;
+
+type MessageType = "message" | "reply" | "writing";
+interface MessageProps {
+    /** Bubble variant. */
+    type?: MessageType;
+    /** Message body text. */
+    children?: ReactNode;
+    /** Quoted text shown above the body for `type="reply"`. */
+    replyTo?: ReactNode;
+    author?: ReactNode;
+    time?: ReactNode;
+    avatar?: ReactNode;
+    sent?: boolean;
+    /** Reaction chips (compose MessageReaction). */
+    reactions?: ReactNode;
+    className?: string;
+}
+/**
+ * A text chat bubble. `type` covers a plain message, a reply (with a quoted
+ * line), and the writing/typing indicator. Use `sent` for own messages
+ * (right-aligned, brand bubble).
+ */
+declare function Message({ type, children, replyTo, author, time, avatar, sent, reactions, className, }: MessageProps): react.JSX.Element;
+
+type MessageBubbleTone = "secondary" | "white" | "brand";
+
+type MessageActionType = "minimal" | "textarea" | "advanced";
+interface MessageActionProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** minimal = single-line + send · textarea = multiline composer · advanced = AI prompt box */
+    type?: MessageActionType;
+    /** Controlled value of the input/textarea. */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Fired when the send affordance is activated. */
+    onSend?: () => void;
+    placeholder?: string;
+    /** Advanced only — left-side author chip (avatar + name). */
+    author?: ReactNode;
+    textareaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;
+}
+/**
+ * Message composer. Three layouts off `type`:
+ * - **minimal**  — single-line field + square send button (row).
+ * - **textarea** — multiline box, attach/emoji + brand Send pinned bottom-right,
+ *   record button top-right.
+ * - **advanced** — AI prompt box on `bg-secondary`; author chip + Shortcuts/Attach
+ *   footer, mic top-right, resize handle.
+ *
+ * Renders real `<input>`/`<textarea>` (controlled via `value`/`onValueChange`);
+ * icons are inline SVG so the package ships no remote asset deps.
+ */
+declare function MessageAction({ type, value, onValueChange, onSend, placeholder, author, textareaProps, className, ...rest }: MessageActionProps): react.JSX.Element;
+
+interface MessageActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Icon glyph (16px). Use `currentColor` so the button can tint it. */
+    icon: ReactNode;
+}
+/**
+ * Single icon button used inside `MessageActionPanel` (the hover toolbar over a
+ * message). Sits on the dark panel surface — icon is light, hover lifts it to
+ * full white with a translucent backdrop. `rounded-xs` / `p-xxs` per Figma.
+ */
+declare function MessageActionButton({ icon, className, type, ...rest }: MessageActionButtonProps): react.JSX.Element;
+
+interface MessageActionPanelProps extends HTMLAttributes<HTMLDivElement> {
+    /** Action buttons — compose `MessageActionButton` elements here. */
+    children: ReactNode;
+}
+/**
+ * Floating dark toolbar that appears over a message on hover. Holds a row of
+ * `MessageActionButton`s (react / reply / regenerate / copy …). Composition
+ * shell only — the buttons are supplied as children, not reimplemented here.
+ *
+ * Surface uses `bg-bg-primary-solid` (#0a0a0a) for the dark floating panel;
+ * Figma's `bg-primary_alt` dark value is #171717 (token gap — see figma-map
+ * Pending token verification). `shadow-xl` is the Tailwind-default approximation
+ * of Figma's 3-layer xl stack.
+ */
+declare function MessageActionPanel({ children, className, ...rest }: MessageActionPanelProps): react.JSX.Element;
+
+interface MessageReactionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Emoji glyph (defaults to a heart). */
+    emoji?: ReactNode;
+    /** Reaction count — hidden when undefined. */
+    count?: number;
+}
+/** A pill reaction chip shown under a chat message. */
+declare function MessageReaction({ emoji, count, className, ...rest }: MessageReactionProps): react.JSX.Element;
+
+type MessageStatus = "unread" | "read" | "failed";
+interface MessageStatusIconProps {
+    /** Delivery status. */
+    status?: MessageStatus;
+    /** Tooltip shown on hover (e.g. "Read 2:20 PM"). */
+    tooltip?: ReactNode;
+    className?: string;
+}
+/**
+ * Delivery status glyph for a sent message — single check (unread), double
+ * check (read, brand), or an error circle (failed). Optional hover tooltip.
+ */
+declare function MessageStatusIcon({ status, tooltip, className, }: MessageStatusIconProps): react.JSX.Element;
+
+interface MetricItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Metric title, e.g. "Views 24 hours". */
+    label: ReactNode;
+    /** Big number, e.g. "2,000". Rendered in display-sm. */
+    value: ReactNode;
+    /** Trend chip — compose a `Change` element here. */
+    change?: ReactNode;
+    /** Caption beside the change, e.g. "vs last month" (chart layout only). */
+    changeText?: ReactNode;
+    /** Featured-icon slot, rendered top-left (consumer supplies the badge). */
+    icon?: ReactNode;
+    /** Sparkline slot, rendered right of the number (e.g. a Recharts chart). */
+    chart?: ReactNode;
+    /** Footer action, e.g. a "View report" button — renders a divided footer. */
+    action?: ReactNode;
+    /** Top-right options (dots) button — rendered only when handler is given. */
+    onMenuClick?: () => void;
+}
+/**
+ * Metric / stat card. One component covering the Figma Simple / Icon / Chart
+ * types via optional slots:
+ * - bare        → Simple (label + value + inline `change`).
+ * - `icon`      → Icon (featured-icon badge on top).
+ * - `chart`     → Chart (value + change/`changeText` left, sparkline right).
+ * - `action`    → divided footer with the action node.
+ * - `onMenuClick` → dots-vertical button top-right.
+ *
+ * `icon` and `chart` are ReactNode slots, so the missing Figma "Featured icons"
+ * family and the deferred `_ChartMini` (Recharts) are non-blocking — consumers
+ * fill them. Note: Figma's Chart variant uses a text-md/semibold label; this
+ * component standardises on text-sm/medium for all types (see figma-map).
+ */
+declare function MetricItem({ label, value, change, changeText, icon, chart, action, onMenuClick, className, ...rest }: MetricItemProps): react.JSX.Element;
+
+type ModalActionsType = "horizontal-fill" | "vertical-fill" | "right-aligned";
+interface ModalActionsProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * - `horizontal-fill` — buttons share the row, each flex-1.
+     * - `vertical-fill` — buttons stacked full-width.
+     * - `right-aligned` — `leading` on the left, buttons pushed right.
+     */
+    type?: ModalActionsType;
+    /** Top divider separating actions from the modal body. */
+    divider?: boolean;
+    /** Left-side content for `right-aligned` (e.g. a checkbox / tertiary button). */
+    leading?: ReactNode;
+    /** The action buttons — compose `Button` / `ButtonDestructive` here. */
+    children: ReactNode;
+}
+/**
+ * Modal footer button row. Layout shell only — buttons are supplied as children
+ * (composed from the library's Button components), laid out per `type`. Fill
+ * variants stretch their children; `right-aligned` pairs a `leading` slot with
+ * the right-pushed actions.
+ */
+declare function ModalActions({ type, divider, leading, children, className, ...rest }: ModalActionsProps): react.JSX.Element;
+
+type ModalHeaderType = "left" | "center" | "horizontal";
+interface ModalHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Featured-icon glyph, rendered inside a 40px boxed badge. */
+    icon?: ReactNode;
+    /**
+     * - `left` — icon on top, text left-aligned.
+     * - `center` — icon on top, text centred.
+     * - `horizontal` — icon to the left of the text.
+     */
+    type?: ModalHeaderType;
+    /** Bottom divider separating the header from the modal body. */
+    divider?: boolean;
+    /** Renders an x-close button top-right when provided. */
+    onClose?: () => void;
+}
+/**
+ * Modal header — featured-icon badge + title + supporting text, with an optional
+ * x-close button and bottom divider. `type` controls alignment (left / centred /
+ * icon-beside-text). The `icon` is a slot; consumer supplies the glyph.
+ */
+declare function ModalHeader({ title, description, icon, type, divider, onClose, className, ...rest }: ModalHeaderProps): react.JSX.Element;
+
+interface MultiSelectOption {
+    value: string;
+    label: string;
+    supportingText?: ReactNode;
+}
+interface MultiSelectProps {
+    options: MultiSelectOption[];
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    open?: boolean;
+    onToggle?: () => void;
+    label?: ReactNode;
+    hint?: ReactNode;
+    placeholder?: string;
+    /** Show the in-trigger search input (default true). */
+    searchable?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    className?: string;
+}
+/**
+ * Multi-select — trigger with selected-item `Tag` chips + a search input, over a
+ * shared dropdown of `SelectMenuItem` (`multi`) options with a search empty
+ * state. Composes the Select-family primitives rather than reimplementing a
+ * dropdown. Controlled: `value`/`onChange` (selection) and `open`/`onToggle`.
+ */
+declare function MultiSelect({ options, value, onChange, open, onToggle, label, hint, placeholder, searchable, disabled, invalid, className, }: MultiSelectProps): react.JSX.Element;
+
+type NavAccountCardVariant = "simple" | "card";
+interface NavAccountCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** `simple` = inline row + sign-out button · `card` = boxed trigger that opens a menu. */
+    variant?: NavAccountCardVariant;
+    /** card only — whether the dropdown menu is shown. */
+    open?: boolean;
+    avatar?: ReactNode;
+    name?: ReactNode;
+    email?: ReactNode;
+    /** card only — toggles the dropdown (fires on trigger click). */
+    onToggle?: () => void;
+    /** simple only — sign-out button handler. */
+    onSignOut?: () => void;
+    /**
+     * card + open — dropdown content. Compose `NavAccountCardMenuItem` rows,
+     * dividers and an add-account / sign-out footer here.
+     */
+    menu?: ReactNode;
+}
+/**
+ * Account switcher for the bottom of a sidebar. `simple` renders an inline row
+ * with a sign-out button; `card` renders a boxed trigger that, when `open`,
+ * reveals a dropdown (the `menu` slot — compose `NavAccountCardMenuItem` rows).
+ *
+ * The active account is marked with `bg-brand-solid` (the radio inside the
+ * account menu items). Note: Figma opens the desktop menu as a right-side
+ * flyout; this opens it above the trigger (`bottom-full`) — a layout
+ * simplification (see figma-map). Width defaults to 280px; override via
+ * `className` for mobile (256px).
+ */
+declare function NavAccountCard({ variant, open, avatar, name, email, onToggle, onSignOut, menu, className, ...rest }: NavAccountCardProps): react.JSX.Element;
+
+type NavAccountCardMenuItemType = "menu-item" | "account";
+interface NavAccountCardMenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "name" | "type"> {
+    /** `menu-item` = icon + label (+ shortcut) · `account` = avatar + name/email + radio. */
+    type?: NavAccountCardMenuItemType;
+    /** Marks the row as the active account / current item (radio filled, hover bg). */
+    current?: boolean;
+    /** menu-item: leading icon (20px). */
+    icon?: ReactNode;
+    /** menu-item: row label. */
+    label?: ReactNode;
+    /** menu-item: trailing keyboard-shortcut chip. */
+    shortcut?: ReactNode;
+    /** account: avatar slot (40px). */
+    avatar?: ReactNode;
+    /** account: display name. */
+    name?: ReactNode;
+    /** account: secondary line (email). */
+    email?: ReactNode;
+}
+/**
+ * A single row inside `NavAccountCard`'s dropdown. Two shapes:
+ * - `menu-item` — icon + label + optional shortcut chip (View profile, Settings…).
+ * - `account` — avatar + name/email with a radio indicator; `current` fills the
+ *   radio with `bg-brand-solid` (the active-account marker).
+ */
+declare function NavAccountCardMenuItem({ type, current, icon, label, shortcut, avatar, name, email, className, ...rest }: NavAccountCardMenuItemProps): react.JSX.Element;
+
+interface NavButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Active route — applies the selected (`bg-secondary`) background. */
+    current?: boolean;
+    /** Render only the leading icon (square button). */
+    iconOnly?: boolean;
+    /** Leading icon (20px). */
+    icon?: ReactNode;
+    /** Label text (hidden when `iconOnly`). */
+    children?: ReactNode;
+}
+/**
+ * Header-nav button (the horizontal top-bar variant, distinct from the sidebar
+ * `NavItemBase`). Pill shape; `current` marks the active route. Focus ring uses
+ * the brand focus colour.
+ */
+declare function NavButton({ current, iconOnly, icon, children, className, type, ...rest }: NavButtonProps): react.JSX.Element;
+
+interface NavFeaturedCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Featured-icon / media slot rendered at the top. */
+    icon?: ReactNode;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    /** Body content — progress bar, list, QR code, input, etc. */
+    children?: ReactNode;
+    /** CTA row — compose Button(s) / link buttons. */
+    action?: ReactNode;
+    /** Bordered surface (`bg-primary` + border) vs subtle (`bg-secondary`). */
+    bordered?: boolean;
+    /** Renders an x-close button top-right. */
+    onClose?: () => void;
+}
+/**
+ * Featured card for the bottom of a sidebar — a generic shell, not 13 variants.
+ * The Figma `Type` set (Progress bar, Upgrade CTA, Message, Current projects,
+ * QR code, …) is expressed by filling the slots: `icon` / `title` / `subtitle`
+ * for the header, `children` for the body (progress bar, list, QR, input…), and
+ * `action` for the CTA row. See the stories for the 12 type recipes.
+ */
+declare function NavFeaturedCard({ icon, title, subtitle, children, action, bordered, onClose, className, ...rest }: NavFeaturedCardProps): react.JSX.Element;
+
+interface NavItemBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Active route — selected (`bg-secondary`) background. */
+    current?: boolean;
+    /** Leading icon (20px). */
+    icon?: ReactNode;
+    label?: ReactNode;
+    /** Leading status dot (8px, success green). */
+    dot?: boolean;
+    /** Trailing count badge — pass a number/string. */
+    badge?: ReactNode;
+    /** Trailing chevron (for expandable groups). */
+    trailingChevron?: boolean;
+}
+/**
+ * Base sidebar nav link (272px). `current` selects it; optional leading `dot`,
+ * leading `icon`, trailing count `badge`, and `trailingChevron`. Brand focus ring.
+ */
+declare function NavItemBase({ current, icon, label, dot, badge, trailingChevron, className, type, ...rest }: NavItemBaseProps): react.JSX.Element;
+
+interface NavItemDropdownBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Active group — selected (`bg-secondary`) background on the trigger. */
+    current?: boolean;
+    /** Expanded state — reveals the submenu. */
+    open?: boolean;
+    /** Trigger icon (20px). */
+    icon?: ReactNode;
+    label?: ReactNode;
+    /** Toggles open/closed. */
+    onToggle?: () => void;
+    /** Submenu rows (rendered when `open`) — compose indented `NavItemBase`s. */
+    children?: ReactNode;
+}
+/**
+ * Expandable sidebar nav group (272px). The trigger mirrors `NavItemBase`; when
+ * `open`, `children` (indented submenu rows) render below with a chevron flip.
+ */
+declare function NavItemDropdownBase({ current, open, icon, label, onToggle, children, className, type, ...rest }: NavItemDropdownBaseProps): react.JSX.Element;
+
+interface NavMenuButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Open state — swaps the hamburger for an x-close icon. */
+    opened?: boolean;
+}
+/**
+ * Hamburger / collapse toggle for the mobile header & sidebar. Shows the
+ * hamburger when closed, an x-close (dimmed) when `opened`. Brand focus ring.
+ */
+declare function NavMenuButton({ opened, className, type, ...rest }: NavMenuButtonProps): react.JSX.Element;
+
+type NotificationVariant = "default" | "success" | "warning" | "error" | "gray";
+interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Colours the default featured-icon ring (ignored if `leadingMedia` set). */
+    variant?: NotificationVariant;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Left media slot (icon / avatar / progress). Overrides the default ring icon. */
+    leadingMedia?: ReactNode;
+    /** Full-bleed image (the "Image" type) rendered below the text. */
+    imageUrl?: string;
+    /** Action row — compose link/text buttons. */
+    actions?: ReactNode;
+    /** Renders an x-close button top-right. */
+    onDismiss?: () => void;
+}
+/**
+ * Toast / inline notification. One component: `variant` colours the default
+ * featured-icon ring; `leadingMedia` overrides it with any node (avatar, custom
+ * icon, progress). `imageUrl` adds the full-bleed image type, `actions` the CTA
+ * row, `onDismiss` the x-close. `shadow-lg` approximates Figma's 3-layer lg.
+ */
+declare function Notification({ variant, title, description, leadingMedia, imageUrl, actions, onDismiss, className, ...rest }: NotificationProps): react.JSX.Element;
+
+type NumberInputLayout = "horizontal" | "vertical";
+interface NumberInputProps {
+    layout?: NumberInputLayout;
+    value?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: ReactNode;
+    hint?: ReactNode;
+    required?: boolean;
+    destructive?: boolean;
+    disabled?: boolean;
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * Standalone numeric counter (NOT an `InputField` type). `horizontal` flanks the
+ * value with −/+ buttons; `vertical` stacks up/down chevrons on the right. Reuses
+ * the input family's `FieldWrapper` + `boxClasses`. Controlled via
+ * `value`/`onChange`, clamped to `min`/`max` by `step`.
+ */
+declare function NumberInput({ layout, value, onChange, min, max, step, label, hint, required, destructive, disabled, className, "aria-label": ariaLabel, }: NumberInputProps): react.JSX.Element;
+
+type PageHeaderStyle = "simple" | "avatar" | "bannerAvatar" | "bannerAvatarCentered" | "bannerSimpleCentered" | "bannerSimple";
+interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "style"> {
+    style?: PageHeaderStyle;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Avatar / featured visual (avatar styles). */
+    avatar?: ReactNode;
+    /** Trailing actions row (buttons). */
+    actions?: ReactNode;
+    /** Optional breadcrumbs slot above the title. */
+    breadcrumbs?: ReactNode;
+    /** Banner background image (banner styles); falls back to `bg-tertiary`. */
+    bannerUrl?: string;
+}
+/**
+ * Page header — one component over the 6 Figma `Style`s. `banner*` styles render
+ * a banner strip the content overlaps; `*Centered` styles centre the text;
+ * `avatar` styles show the `avatar` slot. Breakpoint handled with Tailwind
+ * responsive prefixes. Constrained to `container-max-width-desktop` (1280) with
+ * container padding.
+ */
+declare function PageHeader({ style, title, description, avatar, actions, breadcrumbs, bannerUrl, className, ...rest }: PageHeaderProps): react.JSX.Element;
+
+type PaginationNumberShape = "square" | "circle";
+interface PaginationNumberBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    shape?: PaginationNumberShape;
+    /** Active/current page — applies the selected background + text colour. */
+    active?: boolean;
+    children: ReactNode;
+}
+/**
+ * Single 36px page-number cell. `shape` square (rounded-md) or circle (full);
+ * `active` (current page) uses the hover bg + darker text. Brand focus ring.
+ */
+declare function PaginationNumberBase({ shape, active, children, className, type, ...rest }: PaginationNumberBaseProps): react.JSX.Element;
+
+type PaginationType = "default" | "minimal" | "buttonGroup";
+interface PaginationProps extends HTMLAttributes<HTMLDivElement> {
+    /** 1-based current page. */
+    page: number;
+    /** Total page count. */
+    total: number;
+    onPageChange?: (page: number) => void;
+    /** default = Prev / numbers / Next · minimal = Prev / "Page x of y" / Next · buttonGroup = bordered group. */
+    type?: PaginationType;
+    /** Number-cell shape (default/minimal). */
+    shape?: PaginationNumberShape;
+    /** Max page cells before collapsing the middle with ellipsis. Default 7. */
+    maxVisible?: number;
+}
+/**
+ * Number/button-based pagination. `default` = Previous · number cells · Next;
+ * `minimal` = Previous · "Page x of y" · Next; `buttonGroup` = a bordered
+ * connected group. Composes `PaginationNumberBase` + `PaginationButtonGroupBase`.
+ * Collapses the middle with ellipsis past `maxVisible` (always shows first/last
+ * + current±2).
+ */
+declare function Pagination({ page, total, onPageChange, type, shape, maxVisible, className, ...rest }: PaginationProps): react.JSX.Element;
+
+type PaginationButtonGroupType = "number" | "leadingIcon" | "trailingIcon" | "iconOnly";
+interface PaginationButtonGroupBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> {
+    /** number cell · leading/trailing icon+label · icon-only arrow. */
+    cellType?: PaginationButtonGroupType;
+    /** Active/current cell — applies the hover background + darker text. */
+    active?: boolean;
+    /** Number or label text. */
+    children?: ReactNode;
+    /** Override the default arrow glyph. */
+    icon?: ReactNode;
+}
+/**
+ * One cell of a button-group pagination bar (the bordered Page/Card-button-group
+ * style). `cellType` picks number / leading-icon (Previous) / trailing-icon
+ * (Next) / icon-only. Carries a right divider; `active` highlights it.
+ */
+declare function PaginationButtonGroupBase({ cellType, active, children, icon, className, ...rest }: PaginationButtonGroupBaseProps): react.JSX.Element;
+
+type PaginationCardsVariant = "default" | "minimal" | "advanced";
+interface PaginationCardsProps extends HTMLAttributes<HTMLDivElement> {
+    page: number;
+    total: number;
+    onPageChange?: (page: number) => void;
+    /** default = arrows + dots · minimal = dots + "Page x of y" · advanced = bordered card. */
+    variant?: PaginationCardsVariant;
+}
+/**
+ * Card/dot-based pagination. `default` = arrow buttons flanking a dot pager;
+ * `minimal` = dots + "Page x of y"; `advanced` = the same in a bordered card.
+ * Composes `PaginationDotGroup`.
+ */
+declare function PaginationCards({ page, total, onPageChange, variant, className, ...rest }: PaginationCardsProps): react.JSX.Element;
+
+type PaginationDotSize = "md" | "lg";
+type PaginationDotVariant = "dot" | "line";
+interface PaginationDotIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    current?: boolean;
+    size?: PaginationDotSize;
+    variant?: PaginationDotVariant;
+}
+/**
+ * Single pagination indicator — a dot or a line. `current` fills it with the
+ * brand colour, otherwise `bg-quaternary`. Dimensions per size/variant match
+ * Figma (dot md 8 / lg 10; line md h6 / lg h8, both 40 wide).
+ */
+declare function PaginationDotIndicator({ current, size, variant, className, ...rest }: PaginationDotIndicatorProps): react.JSX.Element;
+
+interface PaginationDotGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Total indicators. */
+    count?: number;
+    /** Active index. */
+    current?: number;
+    size?: PaginationDotSize;
+    variant?: PaginationDotVariant;
+    /** Floating pill on a translucent blurred background (carousel overlay). */
+    framed?: boolean;
+}
+/**
+ * Row of `PaginationDotIndicator`s (carousel pager). `count`/`current` drive the
+ * dots; `framed` wraps them in a blurred translucent pill for image overlays.
+ * Line variant stretches indicators to fill. framed uses the
+ * `alpha-white-90` token.
+ */
+declare function PaginationDotGroup({ count, current, size, variant, framed, className, ...rest }: PaginationDotGroupProps): react.JSX.Element;
+
+type PieChartSize = "xxs" | "xs" | "sm" | "md" | "lg";
+interface PieSlice {
+    name: string;
+    value: number;
+    color?: string;
+}
+interface PieChartProps {
+    data: PieSlice[];
+    size?: PieChartSize;
+    legend?: boolean;
+    /** Donut hole (0 = full pie, 0–1 fraction of radius). */
+    innerRadiusRatio?: number;
+    className?: string;
+    formatValue?: (value: number | string | undefined) => ReactNode;
+}
+/**
+ * Donut/pie chart — a themed Recharts `PieChart` wrapper. Slices take colors from
+ * the shared palette (override per-slice via `color`); `size` sets the diameter,
+ * `legend` renders a `ChartLegend` beside it. Recharts is an optional peer dep.
+ */
+declare function PieChart({ data, size, legend, innerRadiusRatio, className, formatValue, }: PieChartProps): react.JSX.Element;
+
+type ProgressBarLabel = "none" | "right" | "bottom" | "topFloating" | "bottomFloating";
+interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** 0–100. Clamped. */
+    value: number;
+    /** Label placement. `*Floating` shows a tooltip bubble tracking the fill. */
+    label?: ProgressBarLabel;
+}
+/**
+ * Progress bar — pure CSS, no chart lib. `value` (0–100) drives an animated fill
+ * (`fg-brand-primary` on a `bg-quaternary` track). `label`: none / right (inline
+ * %) / bottom (% under) / top|bottom-floating (tooltip bubble tracking the fill).
+ */
+declare function ProgressBar({ value, label, className, ...rest }: ProgressBarProps): react.JSX.Element;
+
+type ProgressCircleSize = "xxs" | "xs" | "sm" | "md" | "lg";
+type ProgressCircleShape = "circle" | "half";
+interface ProgressCircleProps {
+    /** 0–100. Clamped. */
+    value: number;
+    /** Centre label above the value (e.g. "Active users"). */
+    label?: ReactNode;
+    /** Override the centre value text (default `${value}%`). */
+    valueText?: ReactNode;
+    shape?: ProgressCircleShape;
+    size?: ProgressCircleSize;
+    className?: string;
+}
+/**
+ * Circular / half-circle progress gauge. Pure SVG + CSS (no chart lib) — the ring
+ * geometry comes from the shared `ringGeometry`/`RingPair` helper (also used by
+ * `ActivityGauge`). `shape="half"` renders a top-semicircle gauge.
+ *
+ * NOTE: the half-circle is an approximation — it crops a full ring to the top
+ * semicircle (rotate 180 + arcFraction 0.5); the centre content is positioned
+ * for the cropped box.
+ */
+declare function ProgressCircle({ value, label, valueText, shape, size, className, }: ProgressCircleProps): react.JSX.Element;
+
+type RadarLegendPosition = "none" | "right" | "bottom";
+interface RadarChartProps {
+    data: Record<string, number | string>[];
+    series: ChartSeries[];
+    /** Key for the polar-angle axis category. */
+    axisKey: string;
+    legend?: RadarLegendPosition;
+    size?: number;
+    className?: string;
+}
+/**
+ * Radar chart — a themed Recharts `RadarChart` wrapper. Each `series` becomes a
+ * filled `<Radar>` colored from the shared palette; `legend` positions a
+ * `ChartLegend` to the right or bottom. Recharts is an optional peer dependency.
+ */
+declare function RadarChart({ data, series, axisKey, legend, size, className, }: RadarChartProps): react.JSX.Element;
+
+type TagsInputVariant = "inner" | "outer";
+interface TagsInputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Current tags. */
+    tags?: string[];
+    /** Remove handler (receives the tag index). Renders a close button per chip. */
+    onRemoveTag?: (index: number) => void;
+    /** `inner` keeps chips inside the field; `outer` shows them below it. */
+    variant?: TagsInputVariant;
+    size?: InputFieldSize;
+    label?: ReactNode;
+    hint?: ReactNode;
+    required?: boolean;
+    destructive?: boolean;
+}
+/**
+ * Tag/chip input. `inner` renders the chips inside the field (wrapping with the
+ * text input); `outer` renders the field on top with the chips below it.
+ * Tag state is controlled by the consumer (`tags` + `onRemoveTag`).
+ */
+declare function TagsInputField({ tags, onRemoveTag, variant, size, label, hint, required, destructive, className, placeholder, ...rest }: TagsInputFieldProps): react.JSX.Element;
+
+interface TrailingInputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /**
+     * Right add-on — a trailing button or dropdown. Covers the Trailing button /
+     * Trailing dropdown types.
+     */
+    suffix?: ReactNode;
+    size?: InputFieldSize;
+    label?: ReactNode;
+    hint?: ReactNode;
+    required?: boolean;
+    destructive?: boolean;
+}
+/** Input with a right add-on (trailing button or dropdown). */
+declare function TrailingInputField({ suffix, size, label, hint, required, destructive, className, ...rest }: TrailingInputFieldProps): react.JSX.Element;
+
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    size?: CheckControlSize;
+    label?: string;
+    supportingText?: string;
+}
+declare function Radio({ size, checked, disabled, label, supportingText, className, ...rest }: RadioProps): react.JSX.Element;
+
+interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Selected item value (controlled). */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** `RadioGroupItem` elements, each with a `value` prop. */
+    children: ReactNode;
+}
+/**
+ * Single-select container for `RadioGroupItem`s. Clones each child to inject
+ * `selected` (matching `value`) and an `onClick` that fires `onValueChange` with
+ * the child's `value`. Children control their own `type`/content.
+ */
+declare function RadioGroup({ value, onValueChange, children, className, ...rest }: RadioGroupProps): react.JSX.Element;
+
+type RadioGroupItemType = "radioButton" | "checkbox" | "iconSimple" | "iconCard" | "avatar" | "paymentIcon";
+type RadioGroupItemSize = "sm" | "md";
+interface RadioGroupItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "title"> {
+    type?: RadioGroupItemType;
+    selected?: boolean;
+    size?: RadioGroupItemSize;
+    title?: ReactNode;
+    /** Inline secondary text beside the title (e.g. "$10/month"). */
+    subtext?: ReactNode;
+    description?: ReactNode;
+    /** Leading visual — featured icon / avatar / payment-method icon. */
+    leading?: ReactNode;
+    /** iconCard badge (top-right). */
+    badge?: ReactNode;
+    /** Trailing actions row (paymentIcon). */
+    actions?: ReactNode;
+}
+/**
+ * Selectable radio/checkbox card. One component over the 6 Figma `type`s — the
+ * shared shell (border, padding, `radius-xl`, selected `border-brand`) is
+ * constant; only the leading element and control placement change. `radioButton`
+ * uses a radio (leading); `checkbox` a checkbox (leading); `iconSimple`/`avatar`/
+ * `paymentIcon` put a `leading` visual on the left and the checkbox trailing;
+ * `iconCard` is a vertical card (header + body + `badge`).
+ */
+declare function RadioGroupItem({ type, selected, size, title, subtext, description, leading, badge, actions, className, ...rest }: RadioGroupItemProps): react.JSX.Element;
+
+type SectionFooterType = "section" | "card";
+interface SectionFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /** `section` = flush footer; `card` = inset with horizontal + bottom padding. */
+    type?: SectionFooterType;
+    /** Top divider line. */
+    divider?: boolean;
+    /** Left-aligned slot — button group, "Learn more" link, etc. */
+    leading?: ReactNode;
+    /** Right-aligned action buttons. */
+    actions?: ReactNode;
+}
+/**
+ * Footer row for a section or card: optional top `divider`, a left `leading`
+ * slot (button group / link) and right-aligned `actions`. Layout shell only —
+ * compose `Button`, `ButtonGroup`, etc. as slots, don't reimplement them.
+ */
+declare function SectionFooter({ type, divider, leading, actions, className, ...rest }: SectionFooterProps): react.JSX.Element;
+
+interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: ReactNode;
+    supportingText?: ReactNode;
+    /** Right-aligned slot — buttons, button group, or a search input. */
+    actions?: ReactNode;
+    /** Tabs row rendered below the title/actions, above the divider. */
+    tabs?: ReactNode;
+    /** Bottom divider line. */
+    divider?: boolean;
+}
+/**
+ * Section heading: title + supporting text on the left, an `actions` slot on the
+ * right (buttons / button group / search), an optional `tabs` row, and a bottom
+ * `divider`. Layout shell — pass controls as slots.
+ */
+declare function SectionHeader({ title, supportingText, actions, tabs, divider, className, ...rest }: SectionHeaderProps): react.JSX.Element;
+
+type SectionLabelSize = "sm" | "md";
+interface SectionLabelProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    size?: SectionLabelSize;
+    title?: ReactNode;
+    /** Append a brand-colored `*` after the title. */
+    required?: boolean;
+    /** Trailing help-icon slot (e.g. a help-circle with tooltip). */
+    helpIcon?: ReactNode;
+    supportingText?: ReactNode;
+    /** Action buttons rendered below (used in wide form layouts). */
+    actions?: ReactNode;
+}
+/**
+ * Left-column label for a form section: title (+ optional `required` asterisk and
+ * `helpIcon`), supporting text, and optional `actions`. `md` bumps the title to
+ * `text-md`.
+ */
+declare function SectionLabel({ size, title, required, helpIcon, supportingText, actions, className, ...rest }: SectionLabelProps): react.JSX.Element;
+
+type SelectType = "default" | "iconLeading" | "search" | "tags" | "avatarLeading" | "dotLeading";
+type SelectSize = "sm" | "md" | "lg";
+interface SelectProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Cosmetic — documents the leading-slot intent; the leading element itself is the `leading` slot. */
+    type?: SelectType;
+    size?: SelectSize;
+    label?: ReactNode;
+    /** Append a brand `*` after the label. */
+    required?: boolean;
+    /** Trailing label help-icon slot. */
+    helpIcon?: ReactNode;
+    hintText?: ReactNode;
+    /** Leading visual inside the trigger — icon / avatar / dot / search icon. */
+    leading?: ReactNode;
+    /** Selected display value. Falls back to `placeholder` when empty. */
+    value?: ReactNode;
+    placeholder?: ReactNode;
+    open?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    onToggle?: () => void;
+    /** Dropdown panel content — a list of `SelectMenuItem`. */
+    children?: ReactNode;
+}
+/**
+ * Select trigger + shared dropdown panel. The leading element is a `leading`
+ * slot (the `type` prop only documents intent); the panel is the same across all
+ * types — pass `SelectMenuItem`s as `children`. Controlled via `open`/`onToggle`;
+ * the panel renders only when `open`.
+ */
+declare function Select({ type, size, label, required, helpIcon, hintText, leading, value, placeholder, open, disabled, invalid, onToggle, children, className, ...rest }: SelectProps): react.JSX.Element;
+
+type SelectMenuItemSize = "sm" | "md" | "lg";
+interface SelectMenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "title"> {
+    label?: ReactNode;
+    /** Inline secondary text beside the label (e.g. "@olivia", "10 users"). */
+    supportingText?: ReactNode;
+    selected?: boolean;
+    size?: SelectMenuItemSize;
+    /** Leading visual — icon / avatar / dot. Ignored when `multi`. */
+    leading?: ReactNode;
+    /**
+     * Multi-select variant: render a leading checkbox (bound to `selected`)
+     * instead of the trailing selected-check.
+     */
+    multi?: boolean;
+}
+/**
+ * List-item primitive for `Select` and Multi-select dropdowns. One component over
+ * both: `multi` swaps the trailing selected-check for a leading checkbox. The
+ * shared shell is a full-width row with hover `bg-primary-hover`; `label` is
+ * `text-primary`, `supportingText` sits inline in `text-tertiary`.
+ */
+declare function SelectMenuItem({ label, supportingText, selected, size, leading, multi, disabled, className, ...rest }: SelectMenuItemProps): react.JSX.Element;
+
+type SidebarNavigationType = "simple" | "dualTier" | "sectionsDividers" | "sectionsSubheadings" | "slim";
+interface SidebarNavigationProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    type?: SidebarNavigationType;
+    /** Brand logo / wordmark slot (top of the rail). */
+    logo?: ReactNode;
+    /** Optional header content under the logo (e.g. a search input). */
+    header?: ReactNode;
+    /** Nav items — compose `NavItemBase` / `NavItemDropdownBase` children. */
+    children?: ReactNode;
+    /** Footer slot — typically `NavFeaturedCard` + `NavAccountCard`. */
+    footer?: ReactNode;
+    /** Controlled mobile-drawer open state. Omit to use internal state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Application sidebar shell. Lays out logo → header → scrollable nav → footer in
+ * a fixed-width rail (`slim` collapses to 68px). Composes existing `Nav*`
+ * components via slots/children — it does not reimplement nav items. On mobile
+ * the rail is hidden behind a hamburger (`NavMenuButton`); opening it shows a
+ * `bg-overlay` + `backdrop-blur-md` scrim and slides the rail in as a drawer.
+ *
+ * NOTE: `dualTier`'s icon-rail + expanding-panel split is simplified to a single
+ * 280px column here — compose the icon rail separately if you need the two-tier
+ * layout. (flagged)
+ */
+declare function SidebarNavigation({ type, logo, header, children, footer, open, onOpenChange, className, ...rest }: SidebarNavigationProps): react.JSX.Element;
+
+interface SlideOutMenuHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Featured-icon slot (left of the heading). */
+    icon?: ReactNode;
+    title?: ReactNode;
+    supportingText?: ReactNode;
+    /** Tabs row rendered below the heading (adds a bottom divider). */
+    tabs?: ReactNode;
+    /** Close button callback — renders an X in the top-right when set. */
+    onClose?: () => void;
+}
+/**
+ * Header for a slide-out / drawer panel: optional featured `icon` + `title` +
+ * `supportingText`, a top-right close X, and an optional `tabs` row (which adds a
+ * bottom divider). Padding follows the Figma `p-3xl` desktop spec.
+ */
+declare function SlideOutMenuHeader({ icon, title, supportingText, tabs, onClose, className, ...rest }: SlideOutMenuHeaderProps): react.JSX.Element;
+
+type SliderLabel = "none" | "bottom" | "topFloating";
+interface SliderProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Single-handle value. Ignored when `values` is set. */
+    value?: number;
+    onChange?: (value: number) => void;
+    /** Dual-handle range `[low, high]`. Takes precedence over `value`. */
+    values?: [number, number];
+    onRangeChange?: (values: [number, number]) => void;
+    /** Value-label placement. */
+    label?: SliderLabel;
+    /** Format the value shown in labels (default `${v}%`). */
+    formatLabel?: (v: number) => string;
+    disabled?: boolean;
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * Range slider — track + draggable thumb(s), pure pointer math (no library).
+ * Single-handle via `value`/`onChange`; dual-handle range via
+ * `values`/`onRangeChange`. The thumb is implemented inline (not a separate
+ * exported component). `label` shows the value below the thumb or in a floating
+ * tooltip above it.
+ */
+declare function Slider({ min, max, step, value, onChange, values, onRangeChange, label, formatLabel, disabled, className, "aria-label": ariaLabel, }: SliderProps): react.JSX.Element;
+
+type SocialBrand = "google" | "facebook" | "apple" | "twitter" | "figma" | "dribbble";
+type SocialButtonTheme = "color" | "gray" | "brand";
+type SocialButtonSize = "md" | "lg";
+interface SocialButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    social: SocialBrand;
+    /** `color`/`brand` = full-color logo; `gray` = monochrome. */
+    theme?: SocialButtonTheme;
+    size?: SocialButtonSize;
+    /** Icon-only (no label) — renders a square button. */
+    iconOnly?: boolean;
+    /** Label override; defaults to "Sign in with <Brand>". */
+    children?: ReactNode;
+}
+/**
+ * Social-login button. All themes share the neutral white shell (border-primary,
+ * shadow-xs, `text-secondary` label) — `theme` only controls the brand glyph:
+ * `color`/`brand` = full color, `gray` = monochrome (CSS grayscale, flagged
+ * approximation of UntitledUI's true single-color gray logos). `iconOnly` drops
+ * the label for a square button.
+ */
+declare function SocialButton({ social, theme, size, iconOnly, children, className, ...rest }: SocialButtonProps): react.JSX.Element;
+
+type StatusIconType = "online" | "offline" | "count" | "avatar" | "verified";
+interface StatusIconProps extends HTMLAttributes<HTMLSpanElement> {
+    type?: StatusIconType;
+    /** Number shown for `type="count"`. */
+    count?: number;
+    /** Image src for `type="avatar"`. */
+    imageUrl?: string;
+    /** Outer box size in px (default 16). */
+    size?: number;
+}
+/**
+ * Small overlay status badge — meant to sit on the corner of an avatar/icon.
+ * `online`/`offline` = colored dot; `count` = error-colored numeric bubble;
+ * `avatar` = ringed mini image; `verified` = brand verified tick (approximated
+ * as a brand disc + check, no burst star).
+ */
+declare function StatusIcon({ type, count, imageUrl, size, className, style, ...rest }: StatusIconProps): react.JSX.Element;
+
+type StepIconType = "check" | "number";
+type StepStatus = "incomplete" | "current" | "complete";
+type StepIconSize = "sm" | "md";
+interface StepIconBaseProps extends HTMLAttributes<HTMLDivElement> {
+    type?: StepIconType;
+    status?: StepStatus;
+    size?: StepIconSize;
+    /** Number to show when `type="number"`. */
+    step?: ReactNode;
+}
+/**
+ * Step indicator dot for `ProgressSteps`. `type` check (dot / brand fill / check)
+ * or number; `status` incomplete / current (brand ring) / complete (filled +
+ * check). Composed by `StepBase`.
+ */
+declare function StepIconBase({ type, status, size, step, className, ...rest }: StepIconBaseProps): react.JSX.Element;
+
+type StepOrientation = "left" | "top";
+interface StepBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    status?: StepStatus;
+    size?: StepIconSize;
+    /** Icon column position: `left` (vertical list) or `top` (horizontal list). */
+    orientation?: StepOrientation;
+    /** Indicator style. Ignored when `icon` (featured) is supplied. */
+    iconType?: StepIconType;
+    /** Step number (number indicator). */
+    step?: ReactNode;
+    /** Featured-icon slot — replaces the StepIconBase indicator. */
+    icon?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Render a connecting line toward the next step. */
+    connector?: boolean;
+}
+/**
+ * One step row/column for `ProgressSteps`. Composes `StepIconBase` (or a featured
+ * `icon` slot) + title/description, with an optional `connector` line (vertical
+ * below for `left`, horizontal to the right for `top`). The 5 assembled Figma
+ * layout frames are reference-only — build step lists by laying these out.
+ *
+ * NOTE: the connector renders on one side only (toward the next step); the last
+ * step should set `connector={false}`.
+ */
+declare function StepBase({ status, size, orientation, iconType, step, icon, title, description, connector, className, ...rest }: StepBaseProps): react.JSX.Element;
+
+type TabButtonType = "buttonBrand" | "buttonGray" | "buttonWhite" | "buttonMinimal" | "underline" | "line";
+type TabButtonSize = "sm" | "md";
+interface TabButtonBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    /** Visual style. Maps to the Figma `Type` axis. */
+    variant?: TabButtonType;
+    current?: boolean;
+    size?: TabButtonSize;
+    /** Leading icon slot. */
+    icon?: ReactNode;
+    /** Trailing badge/count slot. */
+    badge?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * Single tab control consumed by `Tabs`. Six `variant`s: pill styles
+ * (`buttonBrand`/`buttonGray`/`buttonWhite`/`buttonMinimal`), `underline`
+ * (horizontal bottom border) and `line` (vertical left border). `current` is the
+ * active state. The native `type` attribute is Omitted (taken over by `variant`).
+ */
+declare function TabButtonBase({ variant, current, size, icon, badge, children, className, ...rest }: TabButtonBaseProps): react.JSX.Element;
+
+type TableCellSize = "sm" | "md";
+interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
+    size?: TableCellSize;
+    /** Leading checkbox slot (first column). */
+    checkbox?: ReactNode;
+    /** Hover/selected row background. */
+    selected?: boolean;
+    /** Cell content — any of the 14 Figma `Type` layouts (see stories). */
+    children?: ReactNode;
+}
+/**
+ * Generic `<td>` shell — border-bottom row cell. One component over the 14 Figma
+ * `Type`s (Text, Avatar, Badge, Trend, Progress bar, Action icons, Star ratings,
+ * …): the differing content goes in `children`; the shell (height, padding,
+ * border, hover bg) is constant. Same one-shell-many-examples pattern as
+ * `NavFeaturedCard`. `sm` = 64px row, `md` = 72px.
+ *
+ * NOTE: the Figma `Star ratings` cell references a raw `Colors/Yellow/400` var —
+ * do NOT use it; substitute the `warning-primary`/`utility-yellow` token if a
+ * star fill colour is needed.
+ */
+declare function TableCell({ size, checkbox, selected, children, className, ...rest }: TableCellProps): react.JSX.Element;
+
+type TableHeaderCellSize = "sm" | "md";
+interface TableHeaderCellProps extends HTMLAttributes<HTMLTableCellElement> {
+    size?: TableHeaderCellSize;
+    /** Leading checkbox slot (first column). */
+    checkbox?: ReactNode;
+    /** Label content — typically a `TableHeaderLabel`. */
+    children?: ReactNode;
+}
+/**
+ * `<th>` wrapper — white cell with a bottom border; composes a leading `checkbox`
+ * slot + a `TableHeaderLabel` (`children`). `sm` = 40px row, `md` = 44px row.
+ */
+declare function TableHeaderCell({ size, checkbox, children, className, ...rest }: TableHeaderCellProps): react.JSX.Element;
+
+type TableHeaderLabelArrow = "none" | "down" | "up" | "chevronSelector";
+interface TableHeaderLabelProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    /** Sort indicator. */
+    arrow?: TableHeaderLabelArrow;
+    /** Trailing help-icon slot. */
+    helpIcon?: ReactNode;
+}
+/**
+ * Column-header label — `text-xs` semibold in `text-quaternary` (→ `text-tertiary`
+ * on hover), with an optional sort `arrow` and trailing `helpIcon` slot. Consumed
+ * by `TableHeaderCell`.
+ */
+declare function TableHeaderLabel({ children, arrow, helpIcon, className, ...rest }: TableHeaderLabelProps): react.JSX.Element;
+
+type TabsOrientation = "horizontal" | "vertical";
+interface TabItem {
+    value: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    badge?: ReactNode;
+    disabled?: boolean;
+}
+interface TabsProps {
+    items: TabItem[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: TabsOrientation;
+    /** Tab style — passed to `TabButtonBase`. Defaults: horizontal→buttonBrand, vertical→line. */
+    variant?: TabButtonType;
+    size?: TabButtonSize;
+    /** Stretch tabs to fill the row (horizontal only). */
+    fullWidth?: boolean;
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * Tab bar composing `TabButtonBase`. `orientation="horizontal"` lays tabs in a
+ * row (underline variant gets a shared bottom border); `vertical` stacks them
+ * (defaults to the `line` variant). Controlled via `value`/`onValueChange`.
+ */
+declare function Tabs({ items, value, onValueChange, orientation, variant, size, fullWidth, className, "aria-label": ariaLabel, }: TabsProps): react.JSX.Element;
+
+type TagSize = "sm" | "md" | "lg";
+interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: TagSize;
+    children?: ReactNode;
+    /** Leading visual — dot / country flag / avatar (ReactNode slot). */
+    icon?: ReactNode;
+    /** Render a leading checkbox (bare bordered box, distinct from `Checkbox`). */
+    checkbox?: boolean;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /** Trailing count value (renders a divider + number). */
+    count?: ReactNode;
+    /** Trailing X-close button callback. */
+    onClose?: () => void;
+}
+/**
+ * Compact tag/chip. One component over the Figma matrix: `icon` (dot/country/
+ * avatar) slot, optional leading `checkbox`, trailing `count`, and an `onClose`
+ * X button. The checkbox/count/close sub-parts are inline (not separate exported
+ * components); `checkbox` is a bare bordered box, intentionally distinct from the
+ * full `Checkbox`/`Radio` controls.
+ */
+declare function Tag({ size, children, icon, checkbox, checked, onCheckedChange, count, onClose, className, ...rest }: TagProps): react.JSX.Element;
+
+interface TextEditorToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Toolbar controls — typically `ButtonUtility` groups. */
+    children?: ReactNode;
+}
+/**
+ * Formatting-toolbar **chrome shell** for a rich-text editor (layout + tokens
+ * only, no editing logic). Horizontal bar; drop your formatting buttons in as
+ * `children` (use `TextEditorToolbarDivider` between groups). Pair with a real
+ * editor engine (TipTap/Quill) — the deferred `Text editor` row.
+ */
+declare function TextEditorToolbar({ children, className, ...rest }: TextEditorToolbarProps): react.JSX.Element;
+/** Vertical divider between toolbar groups. */
+declare function TextEditorToolbarDivider({ className }: {
+    className?: string;
+}): react.JSX.Element;
+
+interface TextEditorTooltipProps extends HTMLAttributes<HTMLDivElement> {
+    /** Inline formatting controls shown for the current selection. */
+    children?: ReactNode;
+}
+/**
+ * Floating selection-toolbar **chrome shell** for a rich-text editor (layout +
+ * tokens only, no editing logic). A small elevated card meant to be positioned
+ * over a text selection; drop inline-format buttons in as `children`. Pair with a
+ * real editor engine — the deferred `Text editor` row.
+ */
+declare function TextEditorTooltip({ children, className, ...rest }: TextEditorTooltipProps): react.JSX.Element;
+
+interface TextareaInputFieldProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> {
+    size?: InputFieldSize;
+    label?: ReactNode;
+    hint?: ReactNode;
+    required?: boolean;
+    destructive?: boolean;
+}
+/**
+ * Multiline text input. Reuses the Input field family's shared `FieldWrapper`
+ * (label/required/hint/destructive) and `boxClasses`/`inputSizeClasses` — the
+ * wrapper is NOT reimplemented. `rows` controls height (default 4).
+ */
+declare function TextareaInputField({ size, label, hint, required, destructive, rows, className, ...rest }: TextareaInputFieldProps): react.JSX.Element;
+
+type ToggleType = "default" | "slim";
+type ToggleSize = "sm" | "md";
+interface ToggleProps {
+    type?: ToggleType;
+    size?: ToggleSize;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: ReactNode;
+    supportingText?: ReactNode;
+    className?: string;
+    id?: string;
+    "aria-label"?: string;
+}
+/**
+ * Switch toggle. `default` = filled track (`bg-brand-solid` when on); `slim` = a
+ * thinner track with a bordered knob (uses the `toggle-slim-border-pressed`
+ * tokens when on). The `_Toggle base` control is inline (not a separate export).
+ * Controlled via `checked`/`onCheckedChange`; optional `label`/`supportingText`.
+ */
+declare function Toggle({ type, size, checked, onCheckedChange, disabled, label, supportingText, className, id, "aria-label": ariaLabel, }: ToggleProps): react.JSX.Element;
+
+type TreeViewConnectorType = "default" | "endConnector" | "none";
+type TreeViewConnectorSize = "sm" | "md";
+interface TreeViewConnectorProps extends HTMLAttributes<HTMLSpanElement> {
+    type?: TreeViewConnectorType;
+    size?: TreeViewConnectorSize;
+}
+/**
+ * Indent guide for `TreeViewItem`/`TreeView`. `default` = a full-height vertical
+ * line (a passing-through branch); `endConnector` = an L-shape (vertical down to
+ * centre, then a stub to the right) for the last child; `none` = empty spacer.
+ * Drawn with borders rather than the Figma image asset.
+ */
+declare function TreeViewConnector({ type, size, className, ...rest }: TreeViewConnectorProps): react.JSX.Element;
+
+type TreeViewItemSize = TreeViewConnectorSize;
+interface TreeViewItemProps extends Omit<HTMLAttributes<HTMLDivElement>, "onToggle"> {
+    size?: TreeViewItemSize;
+    /** Nesting depth — renders this many leading connector guides. */
+    level?: number;
+    selected?: boolean;
+    /** Has children → renders an expand/collapse chevron. */
+    expandable?: boolean;
+    open?: boolean;
+    onToggle?: () => void;
+    /** Leading checkbox. */
+    checkbox?: boolean;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /** Leading icon slot (e.g. a folder). */
+    icon?: ReactNode;
+    /** Show a drag handle on hover. */
+    dragHandle?: boolean;
+    children?: ReactNode;
+}
+/**
+ * One row of a `TreeView`. Composes `TreeViewConnector` for the `level` indent
+ * guides, plus an optional expand chevron, `checkbox`, `icon` and label. Selected
+ * → `bg-secondary`; hover → `bg-primary-hover`. Width is fluid (parent controls).
+ */
+declare function TreeViewItem({ size, level, selected, expandable, open, onToggle, checkbox, checked, onCheckedChange, icon, dragHandle, children, className, ...rest }: TreeViewItemProps): react.JSX.Element;
+
+interface TreeNode {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    children?: TreeNode[];
+}
+interface TreeViewProps {
+    data: TreeNode[];
+    size?: TreeViewItemSize;
+    /** Currently selected node id (controlled). */
+    selectedId?: string;
+    onSelect?: (id: string) => void;
+    /** Node ids expanded by default (uncontrolled expand state). */
+    defaultExpandedIds?: string[];
+    /** Show a checkbox on every row. */
+    checkboxes?: boolean;
+    /** Max nesting depth rendered — guards against runaway/cyclic data. */
+    maxDepth?: number;
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * Tree view composite — renders nested `TreeNode` data recursively as
+ * `TreeViewItem`s (which compose `TreeViewConnector` for indent guides). Expand
+ * state is internal (seeded by `defaultExpandedIds`); selection is controlled via
+ * `selectedId`/`onSelect`.
+ */
+declare function TreeView({ data, size, selectedId, onSelect, defaultExpandedIds, checkboxes, maxDepth, className, "aria-label": ariaLabel, }: TreeViewProps): react.JSX.Element;
+
+type VerificationCodeDigits = 4 | 6;
+type VerificationCodeSize = "sm" | "md" | "lg";
+interface VerificationCodeInputProps {
+    digits?: VerificationCodeDigits;
+    value?: string;
+    onChange?: (value: string) => void;
+    size?: VerificationCodeSize;
+    label?: ReactNode;
+    hint?: ReactNode;
+    destructive?: boolean;
+    disabled?: boolean;
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * OTP-style verification code input. `digits` 4 or 6 separate single-character
+ * cells (6 shows a centre "-" separator); large display typography
+ * (`display-lg`/`display-xl`). Controlled via `value`/`onChange`; auto-advances
+ * focus on entry and steps back on backspace. Cell borders use `border-primary`
+ * (= `utility-neutral-300` #d4d4d4, same value).
+ */
+declare function VerificationCodeInput({ digits, value, onChange, size, label, hint, destructive, disabled, className, "aria-label": ariaLabel, }: VerificationCodeInputProps): react.JSX.Element;
+
+/** Line-art cloud illustration (empty-state / upload). Color via `currentColor`. */
+declare function CloudIllustration({ className, ...props }: SVGProps<SVGSVGElement>): react.JSX.Element;
+
+/** Line-art credit-card illustration (billing / payment empty states). */
+declare function CreditCardIllustration({ className, ...props }: SVGProps<SVGSVGElement>): react.JSX.Element;
+
+/** Line-art stacked-documents illustration (no files / empty list states). */
+declare function DocumentsIllustration({ className, ...props }: SVGProps<SVGSVGElement>): react.JSX.Element;
+
+/** Line-art open-box illustration (empty / archived states). */
+declare function BoxIllustration({ className, ...props }: SVGProps<SVGSVGElement>): react.JSX.Element;
+
+declare const index_BoxIllustration: typeof BoxIllustration;
+declare const index_CloudIllustration: typeof CloudIllustration;
+declare const index_CreditCardIllustration: typeof CreditCardIllustration;
+declare const index_DocumentsIllustration: typeof DocumentsIllustration;
+declare namespace index {
+  export { index_BoxIllustration as BoxIllustration, index_CloudIllustration as CloudIllustration, index_CreditCardIllustration as CreditCardIllustration, index_DocumentsIllustration as DocumentsIllustration };
+}
+
+export { ActivityFeed, type ActivityFeedDivider, type ActivityFeedProps, ActivityGauge, type ActivityGaugeLegend, type ActivityGaugeProps, type ActivityGaugeSeries, type ActivityGaugeSize, AdvancedFilterBar, type AdvancedFilterBarProps, Alert, type AlertAction, type AlertColor, type AlertProps, type AlertSize, Avatar, AvatarAddButton, type AvatarAddButtonProps, type AvatarAddButtonSize, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarGroupSize, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarLabelGroupSize, AvatarProfilePhoto, type AvatarProfilePhotoProps, type AvatarProfilePhotoSize, type AvatarProps, type AvatarSize, BadgeCloseX, type BadgeCloseXProps, type BadgeCloseXShape, type BadgeColor, type BadgeCommonProps, BadgeGroup, type BadgeGroupBadgePosition, type BadgeGroupProps, type BadgeGroupSize, type BadgeGroupType, type BadgeSize, BreadcrumbButtonBase, type BreadcrumbButtonBaseProps, type BreadcrumbButtonType, Breadcrumbs, type BreadcrumbsDivider, type BreadcrumbsProps, Button, ButtonCloseX, type ButtonCloseXProps, type ButtonCloseXSize, ButtonDestructive, type ButtonDestructiveHierarchy, type ButtonDestructiveProps, type ButtonDestructiveSize, ButtonGroup, type ButtonGroupProps, ButtonGroupSegment, type ButtonGroupSegmentProps, type ButtonGroupSegmentSize, type ButtonProps, ButtonUtility, type ButtonUtilityProps, type ButtonUtilitySize, type ButtonUtilityVariant, CalendarCell, CalendarCellDayWeekView, type CalendarCellDayWeekViewProps, type CalendarCellProps, CalendarColumnHeader, type CalendarColumnHeaderOrientation, type CalendarColumnHeaderProps, CalendarDateIcon, type CalendarDateIconProps, CalendarEvent, type CalendarEventColor, CalendarEventDayWeekView, type CalendarEventDayWeekViewProps, type CalendarEventProps, CalendarHeader, type CalendarHeaderProps, CalendarRowLabel, type CalendarRowLabelProps, CalendarTimemarker, type CalendarTimemarkerAlign, type CalendarTimemarkerProps, type CalendarView, CalendarViewDropdown, type CalendarViewDropdownProps, type CalendarViewOption, CardHeader, type CardHeaderProps, CarouselArrow, type CarouselArrowDirection, type CarouselArrowProps, type CarouselArrowSize, CarouselImage, type CarouselImageProps, Change, type ChangeProps, type ChangeTrend, type ChangeType, ChartLegend, type ChartLegendItem, type ChartLegendPosition, type ChartLegendProps, ChartMarker, type ChartMarkerLine, type ChartMarkerProps, ChartMini, type ChartMiniDatum, type ChartMiniProps, type ChartMiniTrend, type ChartSeries, type ChartStyle, ChartTooltip, type ChartTooltipPayloadItem, type ChartTooltipProps, type CheckControlSize, Checkbox, type CheckboxProps, CodeSnippet, type CodeSnippetProps, CodeSnippetTabs, type CodeSnippetTabsProps, ColorBadge, type ColorBadgeProps, CommandBar, CommandBarFooter, type CommandBarFooterHint, type CommandBarFooterProps, CommandBarMenuSection, type CommandBarMenuSectionProps, CommandBarNavigationIcon, type CommandBarNavigationIconProps, type CommandBarProps, CommandDropdownMenuItem, type CommandDropdownMenuItemProps, CommandInput, type CommandInputProps, CommandShortcut, type CommandShortcutProps, ContentDivider, type ContentDividerProps, type ContentDividerStyle, type ContentDividerType, ContentFeatureText, type ContentFeatureTextProps, type ContentFeatureTextSize, ContentHeading, type ContentHeadingProps, type ContentHeadingSize, ContentParagraph, type ContentParagraphProps, type ContentParagraphSize, ContentQuote, type ContentQuoteAlign, type ContentQuoteProps, type ContentQuoteSize, ContentRule, type ContentRuleProps, type ContentRuleSize, ContextMenu, type ContextMenuProps, type ContextMenuState, DatePickerCell, type DatePickerCellProps, type DatePickerCellType, DatePickerListItem, type DatePickerListItemProps, DatePickerMenu, type DatePickerMenuProps, DropdownAccountListItem, type DropdownAccountListItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, type DropdownMenuFooterType, DropdownMenuHeader, type DropdownMenuHeaderProps, type DropdownMenuHeaderType, DropdownMenuItemInsetIcon, type DropdownMenuItemInsetIconProps, type DropdownMenuItemInsetIconType, DropdownMenuListItem, type DropdownMenuListItemProps, EmptyState, type EmptyStateProps, type EmptyStateSize, FeedItemBase, type FeedItemBaseProps, type FeedItemSize, FileUpload, FileUploadBase, type FileUploadBaseProps, FileUploadItemBase, type FileUploadItemBaseProps, type FileUploadItemIconType, type FileUploadItemStatus, type FileUploadItemType, type FileUploadProps, FilterBar, type FilterBarProps, FilterTabs, type FilterTabsProps, FiltersDropdownMenu, type FiltersDropdownMenuProps, FiltersSlideoutMenu, type FiltersSlideoutMenuProps, type HeaderNavItem, HeaderNavigation, type HeaderNavigationProps, type HeaderNavigationType, HelpIcon, type HelpIconProps, InputField, type InputFieldProps, type InputFieldSize, type InputFieldType, LeadingInputField, type LeadingInputFieldProps, LineAndBarChart, type LineAndBarChartProps, LinkMessage, type LinkMessageProps, type LinkMessageType, LoadingIndicator, type LoadingIndicatorProps, type LoadingIndicatorSize, type LoadingIndicatorStyle, MediaMessage, type MediaMessageProps, type MediaMessageType, MegaInputFieldBase, type MegaInputFieldBaseProps, type MegaInputFieldBaseSize, Message, MessageAction, MessageActionButton, type MessageActionButtonProps, MessageActionPanel, type MessageActionPanelProps, type MessageActionProps, type MessageActionType, type MessageBubbleTone, type MessageProps, MessageReaction, type MessageReactionProps, type MessageStatus, MessageStatusIcon, type MessageStatusIconProps, type MessageType, MetricItem, type MetricItemProps, ModalActions, type ModalActionsProps, type ModalActionsType, ModalHeader, type ModalHeaderProps, type ModalHeaderType, ModernBadge, type ModernBadgeProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NavAccountCard, NavAccountCardMenuItem, type NavAccountCardMenuItemProps, type NavAccountCardMenuItemType, type NavAccountCardProps, type NavAccountCardVariant, NavButton, type NavButtonProps, NavFeaturedCard, type NavFeaturedCardProps, NavItemBase, type NavItemBaseProps, NavItemDropdownBase, type NavItemDropdownBaseProps, NavMenuButton, type NavMenuButtonProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputLayout, type NumberInputProps, PageHeader, type PageHeaderProps, type PageHeaderStyle, Pagination, PaginationButtonGroupBase, type PaginationButtonGroupBaseProps, type PaginationButtonGroupType, PaginationCards, type PaginationCardsProps, type PaginationCardsVariant, PaginationDotGroup, type PaginationDotGroupProps, PaginationDotIndicator, type PaginationDotIndicatorProps, type PaginationDotSize, type PaginationDotVariant, PaginationNumberBase, type PaginationNumberBaseProps, type PaginationNumberShape, type PaginationProps, type PaginationType, PieChart, type PieChartProps, type PieChartSize, type PieSlice, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarLabel, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, type ProgressCircleShape, type ProgressCircleSize, RadarChart, type RadarChartProps, type RadarLegendPosition, Radio, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupItemSize, type RadioGroupItemType, type RadioGroupProps, type RadioProps, SectionFooter, type SectionFooterProps, type SectionFooterType, SectionHeader, type SectionHeaderProps, SectionLabel, type SectionLabelProps, type SectionLabelSize, Select, SelectMenuItem, type SelectMenuItemProps, type SelectMenuItemSize, type SelectProps, type SelectSize, type SelectType, SidebarNavigation, type SidebarNavigationProps, type SidebarNavigationType, SlideOutMenuHeader, type SlideOutMenuHeaderProps, Slider, type SliderLabel, type SliderProps, type SocialBrand, SocialButton, type SocialButtonProps, type SocialButtonSize, type SocialButtonTheme, StatusIcon, type StatusIconProps, type StatusIconType, StepBase, type StepBaseProps, StepIconBase, type StepIconBaseProps, type StepIconSize, type StepIconType, type StepOrientation, type StepStatus, TabButtonBase, type TabButtonBaseProps, type TabButtonSize, type TabButtonType, type TabItem, TableCell, type TableCellProps, type TableCellSize, TableHeaderCell, type TableHeaderCellProps, type TableHeaderCellSize, TableHeaderLabel, type TableHeaderLabelArrow, type TableHeaderLabelProps, Tabs, type TabsOrientation, type TabsProps, Tag, type TagProps, type TagSize, TagsInputField, type TagsInputFieldProps, type TagsInputVariant, TextEditorToolbar, TextEditorToolbarDivider, type TextEditorToolbarProps, TextEditorTooltip, type TextEditorTooltipProps, TextareaInputField, type TextareaInputFieldProps, Toggle, type ToggleProps, type ToggleSize, type ToggleType, Tooltip, type TooltipArrow, type TooltipProps, TrailingInputField, type TrailingInputFieldProps, type TreeNode, TreeView, TreeViewConnector, type TreeViewConnectorProps, type TreeViewConnectorSize, type TreeViewConnectorType, TreeViewItem, type TreeViewItemProps, type TreeViewItemSize, type TreeViewProps, type UseContextMenuReturn, type VerificationCodeDigits, VerificationCodeInput, type VerificationCodeInputProps, type VerificationCodeSize, index as illustrations, useContextMenu };