@birdycom/omniaui-react 0.0.0-stage → 0.11.0

package/dist/index.d.ts

@@ -0,0 +1,2640 @@
+import * as react from 'react';
+import { RefObject, SyntheticEvent, HTMLAttributes, DetailsHTMLAttributes, ReactNode, InputHTMLAttributes, DialogHTMLAttributes, AnchorHTMLAttributes, ButtonHTMLAttributes, FormHTMLAttributes, LiHTMLAttributes, FieldsetHTMLAttributes, SVGProps, SelectHTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, TextareaHTMLAttributes, ProgressHTMLAttributes, CSSProperties } from 'react';
+
+/** Merge several refs into one callback ref. */
+declare function useMergedRef<T>(...refs: Array<React.Ref<T> | undefined>): (node: T | null) => void;
+/** Controlled + uncontrolled value in one hook. */
+declare function useControllable<T>(value: T | undefined, defaultValue: T, onChange?: (v: T) => void): readonly [T, (next: T) => void];
+interface DialogState {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare const DialogContext: react.Context<{
+    close: () => void;
+} | null>;
+declare const useDialogContext: () => {
+    close: () => void;
+} | null;
+/**
+ * Keeps a native <dialog> in sync with an `open` prop: showModal() / close() in an effect,
+ * and reports native closes (Escape, backdrop, form method=dialog) through onOpenChange.
+ */
+declare function useDialog(ref: RefObject<HTMLDialogElement | null>, { open, defaultOpen, onOpenChange }: DialogState): {
+    open: boolean;
+    setOpen: (next: boolean) => void;
+    close: () => void;
+    onClose: (e: SyntheticEvent<HTMLDialogElement>) => void;
+};
+/** Focusable items that belong directly to a `[role=menu]` (sub-menu triggers included, sub-menu items excluded). */
+declare function menuItems(menu: Element): HTMLElement[];
+/**
+ * Roving focus inside an `.oc-dropdown-menu[role=menu]`: ArrowDown / ArrowUp (wrapping), Home, End,
+ * ArrowRight on a sub-menu trigger enters the sub-menu, ArrowLeft inside a sub-menu returns to its trigger.
+ * Returns `true` (and calls preventDefault) when the key was handled.
+ */
+declare function handleMenuKeyDown(e: React.KeyboardEvent<HTMLElement>): boolean;
+/** Closes the popover a menu item lives in. */
+declare function closeMenuOf(el: Element | null): void;
+/** Focuses the first menu item whenever the popover opens (the native `toggle` event). */
+declare function useMenuAutofocus(ref: RefObject<HTMLElement | null>): void;
+
+type ClassValue = string | false | null | undefined;
+/** Join class names, skipping falsy values. */
+declare function cx(...parts: ClassValue[]): string;
+/** `oc-btn` + `--secondary` -> `oc-btn oc-btn--secondary` (skips empty modifiers). */
+declare function mod(base: string, ...modifiers: ClassValue[]): string;
+/** Attributes React's types do not know yet (popover, invoker commands, closedby). */
+declare function attrs(record: Record<string, string | undefined>): object;
+/** Call a handler, then call another one. */
+declare function callAll<E>(...fns: Array<((e: E) => void) | undefined>): (e: E) => void;
+
+/** `<div class="oc-accordion">` */
+declare const Accordion: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+interface AccordionItemProps extends Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "title"> {
+    /** Trigger text (`summary.oc-accordion-trigger`). */
+    title: ReactNode;
+    /** Items with the same `name` open one at a time (native exclusive details). */
+    name?: string;
+}
+/** `<details class="oc-accordion-item" name>` */
+declare const AccordionItem: react.ForwardRefExoticComponent<AccordionItemProps & react.RefAttributes<HTMLDetailsElement>>;
+
+type AccordionAccentPreset = "blue" | "cyan" | "green" | "orange" | "red" | "violet" | "yellow";
+type AccordionAccentTone = "success" | "warning" | "danger";
+interface AccordionAccentProps extends HTMLAttributes<HTMLDivElement> {
+    /** Color preset for all items (an `.oc-accent--*` class). */
+    accent?: AccordionAccentPreset;
+    /** Semantic color for all items. */
+    tone?: AccordionAccentTone;
+    /** Only the accent edge, no card frame. */
+    flush?: boolean;
+}
+/** `.oc-accordion--accent`: accordion with separate cards and a colored start edge. */
+declare const AccordionAccent: react.ForwardRefExoticComponent<AccordionAccentProps & react.RefAttributes<HTMLDivElement>>;
+/** `.oc-accordion-accent-meta`: short accent-colored label inside an item title. */
+declare function AccordionAccentMeta({ className, ...rest }: HTMLAttributes<HTMLSpanElement>): react.JSX.Element;
+
+type AffixInputVariant = "currency" | "percent" | "email";
+interface AffixInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
+    /** Preset: symbol, input type, inputmode and alignment. */
+    variant?: AffixInputVariant;
+    /** Symbol before the value (overrides the preset). */
+    prefix?: ReactNode;
+    /** Symbol after the value (overrides the preset). */
+    suffix?: ReactNode;
+    /** Right-aligned tabular digits. Off by default: the value sits next to the symbol column. */
+    alignEnd?: boolean;
+    error?: boolean;
+    /** Class for the wrapper (`className` goes to the input). */
+    groupClassName?: string;
+}
+/** `.oc-input-group.oc-input-group--affix`: symbol (€, %, @) inside the field. */
+declare const AffixInput: react.ForwardRefExoticComponent<AffixInputProps & react.RefAttributes<HTMLInputElement>>;
+
+type AlertVariant = "info" | "success" | "warning" | "danger";
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    variant?: AlertVariant;
+    /** Heading (`oc-alert-title`). */
+    title?: ReactNode;
+}
+/** `<div class="oc-alert oc-alert--{variant}" role="status">`; children render inside `oc-alert-description`. */
+declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
+
+type AlertDialogType = "success" | "error" | "warning" | "info" | "question";
+interface AlertDialogProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "open" | "onClose">, DialogState {
+    /** Type modifier on the content box (sets the icon color). Default `warning`. */
+    type?: AlertDialogType;
+    /** Custom icon glyph or SVG (defaults to a glyph for the type). */
+    icon?: ReactNode;
+    title: ReactNode;
+    /** Message (`oc-modal-body`): pass as `message` or as children. */
+    message?: ReactNode;
+    /** Secondary + primary buttons (`oc-modal-footer`), e.g. `<ModalClose>`s. */
+    footer?: ReactNode;
+}
+/** Confirmation `<dialog class="oc-modal">` with a status icon. */
+declare const AlertDialog: react.ForwardRefExoticComponent<AlertDialogProps & react.RefAttributes<HTMLDialogElement>>;
+
+interface AlphaTabsProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+    /** Letters to show (default A-Z). */
+    letters?: string[];
+    /** Letters that have entries; the others are disabled. Default: all letters. */
+    available?: string[];
+    /** Current letter, or "all". */
+    value?: string;
+    defaultValue?: string;
+    onChange?: (letter: string) => void;
+    /** Build a link per letter, e.g. `(l) => "?letter=" + l`. */
+    href?: (letter: string) => string;
+    allLabel?: string;
+    wrap?: boolean;
+    size?: "sm";
+    plain?: boolean;
+}
+/** `nav.oc-alpha-tabs`: All + A-Z letter filter. */
+declare const AlphaTabs: react.ForwardRefExoticComponent<AlphaTabsProps & react.RefAttributes<HTMLElement>>;
+
+type AttachmentType = "pdf" | "doc" | "sheet" | "zip" | "image";
+interface AttachmentFile {
+    name: string;
+    /** "1.2 MB", or the error text when `state` is "error". */
+    size?: ReactNode;
+    /** Icon tint. Derived from the extension when empty. */
+    type?: AttachmentType;
+    /** Text in the icon tile (default: the extension, e.g. "PDF", "XLS"). */
+    ext?: string;
+    /** Download link (the chip becomes an `<a download>` unless it is removable). */
+    href?: string;
+    /** Small preview image in the icon tile. */
+    image?: string;
+    state?: "uploading" | "error";
+    /** Upload progress in % (shown while uploading). */
+    progress?: number;
+    /** Show the remove button (composer). */
+    removable?: boolean;
+    removeLabel?: string;
+}
+/** Icon text and tint of a file name (`Plan.xlsx` -> XLS, sheet). */
+declare const attachmentMeta: (f: AttachmentFile) => {
+    ext: string;
+    type: AttachmentType;
+};
+interface AttachmentProps extends Omit<HTMLAttributes<HTMLElement>, "type">, AttachmentFile {
+    onRemove?: () => void;
+}
+/** `.oc-attachment` file chip: icon tile, name, size and an optional remove button. */
+declare const Attachment: react.ForwardRefExoticComponent<AttachmentProps & react.RefAttributes<HTMLElement>>;
+interface AttachmentImageProps extends HTMLAttributes<HTMLAnchorElement> {
+    href?: string;
+    /** Image URL. Leave empty to show placeholder art. */
+    src?: string;
+    alt: string;
+    art?: number;
+    /** e.g. "worktop-sample.jpg · 2.1 MB". */
+    caption?: ReactNode;
+}
+/** `a.oc-attachment-image`: 4:3 image preview inside a message. */
+declare function AttachmentImage({ href, src, alt, art: n, caption, className, ...rest }: AttachmentImageProps): react.JSX.Element;
+interface AttachmentThumbProps extends HTMLAttributes<HTMLElement> {
+    src?: string;
+    alt: string;
+    art?: number;
+    /** Remove button label, e.g. "Remove screenshot.png". No label = no button. */
+    removeLabel?: string;
+    onRemove?: () => void;
+    as?: "div" | "span";
+}
+/** `.oc-attachment-thumb`: square thumbnail of a pasted screenshot. */
+declare function AttachmentThumb({ src, alt, art: n, removeLabel, onRemove, as: Tag, className, ...rest }: AttachmentThumbProps): react.JSX.Element;
+interface AttachmentListProps extends HTMLAttributes<HTMLElement> {
+    /** File chips; `children` replace them. */
+    items?: AttachmentFile[];
+    /** One per line, full width. */
+    stack?: boolean;
+    /** `ul` (default, items in `li`) or `div`. */
+    as?: "ul" | "div";
+    onRemove?: (file: AttachmentFile, index: number) => void;
+}
+/** `.oc-attachment-list`: wrapping row of chips. */
+declare function AttachmentList({ items, stack, as: Tag, onRemove, className, children, "aria-label": label, ...rest }: AttachmentListProps): react.JSX.Element;
+
+type AvatarSize = "sm" | "md" | "lg" | "xl";
+interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: AvatarSize;
+    /** Image URL; when set the avatar renders an <img>. Otherwise `children` (initials) are shown. */
+    src?: string;
+    alt?: string;
+}
+/** `<span class="oc-avatar oc-avatar--{size}">SC</span>` */
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
+/** `<div class="oc-avatar-group">` */
+declare const AvatarGroup: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+
+/** `<a class="oc-back-link">Back to Products</a>` */
+declare const BackLink: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
+
+type BadgeVariant = "default" | "secondary" | "outline" | "destructive" | "success" | "warning" | "info";
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+}
+/** `<span class="oc-badge oc-badge--{variant}">` */
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface BarcodeInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "children"> {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Visible label above the field. */
+    label?: ReactNode;
+    /** Text in the preview while the field is empty. */
+    emptyText?: string;
+    error?: boolean;
+    /** Your own barcode graphic; replaces the placeholder bars. */
+    children?: ReactNode;
+    /** Class for the wrapper (`className` goes to the input). */
+    wrapperClassName?: string;
+}
+/** `.oc-barcode-input`: code field + preview. Keeps digits only (hand scanners type like a keyboard). */
+declare const BarcodeInput: react.ForwardRefExoticComponent<BarcodeInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface BreadcrumbItemData {
+    label: ReactNode;
+    /** Omit (or put last) to mark the current page. */
+    href?: string;
+}
+interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    items?: BreadcrumbItemData[];
+}
+/** `<nav class="oc-breadcrumb">` with links and a final `aria-current="page"` item. */
+declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLElement>>;
+
+interface BrowserFrameProps extends HTMLAttributes<HTMLElement> {
+    /** Text in the address pill. Leave out (or use `minimal`) for dots only. */
+    url?: string;
+    /** Screenshot URL. `children` replace it (live content). */
+    src?: string;
+    alt?: string;
+    caption?: ReactNode;
+    /** Small glyphs on the right of the bar. */
+    actions?: ReactNode;
+    minimal?: boolean;
+    dark?: boolean;
+    tilt?: boolean;
+    /** View height follows the content instead of the ratio. */
+    auto?: boolean;
+    /** View ratio, e.g. "16 / 9". Default 16 / 10. */
+    ratio?: string;
+}
+/** `figure.oc-browser-frame`: fake browser chrome around a screenshot or any content. */
+declare const BrowserFrame: react.ForwardRefExoticComponent<BrowserFrameProps & react.RefAttributes<HTMLElement>>;
+
+interface BusyOverlayProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "open" | "onClose">, DialogState {
+    title?: ReactNode;
+    text?: ReactNode;
+    /** Known percentage: shows `.oc-progress` instead of the spinner. */
+    progress?: number;
+    /** aria-label of the spinner / progress bar (default "Busy"). */
+    label?: string;
+}
+/** `dialog.oc-busy-overlay[closedby=none]`. Controlled with `open` / `onOpenChange`, or uncontrolled. */
+declare const BusyOverlay: react.ForwardRefExoticComponent<BusyOverlayProps & react.RefAttributes<HTMLDialogElement>>;
+
+type ButtonVariant = "default" | "secondary" | "outline" | "ghost" | "link" | "destructive" | "success" | "gradient" | "glass";
+type ButtonSize = "xs" | "sm" | "md" | "lg";
+interface ButtonStyleProps {
+    /** Visual variant (`default` = primary). */
+    variant?: ButtonVariant;
+    /** `md` is the default size and adds no class. */
+    size?: ButtonSize;
+    /** Square icon-only button. */
+    icon?: boolean;
+    /** Fully rounded pill shape. */
+    pill?: boolean;
+}
+/** The class string of a button; reuse it on your own elements (router links etc.). */
+declare function buttonClass({ variant, size, icon, pill, className }: ButtonStyleProps & {
+    className?: string;
+}): string;
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonStyleProps {
+}
+/** `<button class="oc-btn oc-btn--{variant} oc-btn--{size}">` */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+interface ButtonLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, ButtonStyleProps {
+}
+/** An anchor styled as a button. */
+declare const ButtonLink: react.ForwardRefExoticComponent<ButtonLinkProps & react.RefAttributes<HTMLAnchorElement>>;
+
+/** `.oc-card` */
+declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+/** `.oc-card-header` */
+declare const CardHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+/** `h3.oc-card-title` */
+declare const CardTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & react.RefAttributes<HTMLHeadingElement>>;
+/** `p.oc-card-description` */
+declare const CardDescription: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
+/** `.oc-card-content` */
+declare const CardContent: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+/** `.oc-card-footer` */
+declare const CardFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+
+interface ChartLineSeries {
+    name: string;
+    values: number[];
+    dashed?: boolean;
+}
+interface ChartLineProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title?: ReactNode;
+    sub?: ReactNode;
+    /** Big number in the head (`oc-chart-line__value`). */
+    value?: ReactNode;
+    series?: ChartLineSeries[];
+    /** One label per point, used in the tooltips (e.g. "January"). */
+    labels?: string[];
+    /** Short x axis labels (default: labels; "Jan"… for the demo months). */
+    xLabels?: string[];
+    /** Top of the y axis (default: a round number above the highest value). */
+    max?: number;
+    /** Gridline rows (default 4). */
+    rows?: number;
+    /** "area" fills the series, "spark" hides axes and grid. */
+    variant?: "line" | "area" | "spark";
+    /** Dots always visible. */
+    dots?: boolean;
+    /** aria-label of the point columns. */
+    label?: string;
+    format?: (value: number) => string;
+}
+/** Round axis maximum: step = max / rows rounded up to 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8 or 10 x 10^k. */
+declare function niceMax(value: number, rows?: number): number;
+/** Smooth path through the points (x 0-100, y = 100 - value / max * 100); control points stay between their two ends. */
+declare function chartLinePath(values: number[], max: number): string;
+/** `figure.oc-chart-line`: line / area chart in inline SVG with axes, legend and tooltips. */
+declare const ChartLine: react.ForwardRefExoticComponent<ChartLineProps & react.RefAttributes<HTMLElement>>;
+
+interface ChatComposerProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "onChange"> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Called with the trimmed text on submit; the field is cleared afterwards. */
+    onSend?: (text: string) => void;
+    placeholder?: string;
+    /** Accessible label of the field (visually hidden). */
+    label?: string;
+    /** Tool buttons (`.oc-chat-composer__tool`), e.g. attach or an EmojiPicker. */
+    tools?: ReactNode;
+    hint?: ReactNode;
+    inline?: boolean;
+    /** Enter sends, Shift+Enter adds a new line. Default true. */
+    sendOnEnter?: boolean;
+    disabled?: boolean;
+}
+/** `form.oc-chat-composer`: growing textarea + toolbar + send button. */
+declare const ChatComposer: react.ForwardRefExoticComponent<ChatComposerProps & react.RefAttributes<HTMLFormElement>>;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** When set the input is wrapped in a <label> with this text. */
+    label?: ReactNode;
+}
+/** `<input class="oc-checkbox" type="checkbox">`, wrapped in a label when `label` is given. */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ChecklistProps extends HTMLAttributes<HTMLUListElement> {
+    /** Bordered rows with an action slot. */
+    card?: boolean;
+}
+/** `<ul class="oc-checklist">` */
+declare const Checklist: react.ForwardRefExoticComponent<ChecklistProps & react.RefAttributes<HTMLUListElement>>;
+interface ChecklistItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, "title"> {
+    /** Rule is met / step is done (`is-done`). */
+    done?: boolean;
+    /** Card variant: title + hint text column. Without it `children` are the row content. */
+    title?: ReactNode;
+    hint?: ReactNode;
+    /** Card variant: trailing action (usually a button or link). */
+    action?: ReactNode;
+}
+/** `<li class="oc-checklist-item is-done">` */
+declare const ChecklistItem: react.ForwardRefExoticComponent<ChecklistItemProps & react.RefAttributes<HTMLLIElement>>;
+
+interface ChipFilterOption {
+    value: string;
+    label: ReactNode;
+    count?: number;
+    disabled?: boolean;
+}
+interface ChipFilterProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    options: ChipFilterOption[];
+    /** Several chips at once (checkboxes). */
+    multiple?: boolean;
+    /** string for single choice, string[] with `multiple`. */
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    name?: string;
+    size?: "sm" | "md";
+    /** One line that scrolls sideways. */
+    scroll?: boolean;
+}
+/** `.oc-chip-filter`: rounded filter chips. */
+declare const ChipFilter: react.ForwardRefExoticComponent<ChipFilterProps & react.RefAttributes<HTMLDivElement>>;
+
+interface CollapsibleProps extends Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "title" | "open" | "onToggle"> {
+    /** Summary text (`oc-collapsible-title`). */
+    title: ReactNode;
+    /** Optional leading icon, e.g. an inline `<svg className="oc-collapsible-icon">`. */
+    icon?: ReactNode;
+    /** Compact paddings. */
+    dense?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/** `<details class="oc-collapsible">` card-style section. */
+declare const Collapsible: react.ForwardRefExoticComponent<CollapsibleProps & react.RefAttributes<HTMLDetailsElement>>;
+
+interface ColorFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** Hex value, e.g. `#3366cc` (controlled). */
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Id of the text input (so a <label for> can point at it). */
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+}
+/** Native color picker + monospaced hex text input, kept in sync. */
+declare const ColorField: react.ForwardRefExoticComponent<ColorFieldProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ColorSelectOption {
+    value: string;
+    label: string;
+    /** CSS color, use Omnia tokens: "var(--color-red-70)". */
+    color: string;
+    disabled?: boolean;
+}
+interface ColorSelectProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "defaultValue"> {
+    options: ColorSelectOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Radio group name (generated when omitted). */
+    name?: string;
+    /** Rows with visible names instead of a swatch grid. */
+    list?: boolean;
+    size?: "sm" | "md";
+}
+/** `.oc-color-select`: radio swatches; the color is passed through the --oc-swatch variable. */
+declare const ColorSelect: react.ForwardRefExoticComponent<ColorSelectProps & react.RefAttributes<HTMLFieldSetElement>>;
+
+interface ColumnMenuColumn {
+    label: ReactNode;
+    /** Visible at the start (default true). */
+    visible?: boolean;
+    /** Always visible; the checkbox is disabled. */
+    locked?: boolean;
+}
+interface ColumnMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** One entry per table column, in column order (max 10). */
+    columns: ColumnMenuColumn[];
+    /** The table (`.oc-table`) the menu controls. */
+    children: ReactNode;
+    triggerLabel?: ReactNode;
+    title?: ReactNode;
+    resetLabel?: ReactNode;
+    /** Called with the column number (1-based) and its new visibility. */
+    onColumnToggle?: (column: number, visible: boolean) => void;
+}
+/** `.oc-column-menu-scope` with a `.oc-column-menu[popover]` column checklist. */
+declare const ColumnMenu: react.ForwardRefExoticComponent<ColumnMenuProps & react.RefAttributes<HTMLDivElement>>;
+
+interface CommandItemData {
+    id: string;
+    label: string;
+    /** Right-aligned keyboard hint. */
+    shortcut?: string;
+    disabled?: boolean;
+    /** Extra search terms. */
+    keywords?: string[];
+}
+interface CommandGroupData {
+    label?: string;
+    items: CommandItemData[];
+}
+interface CommandProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    groups: CommandGroupData[];
+    placeholder?: string;
+    emptyText?: ReactNode;
+    /** Search value (controlled). */
+    query?: string;
+    onQueryChange?: (query: string) => void;
+    onSelect?: (item: CommandItemData) => void;
+}
+/**
+ * Command palette. The list is filtered by the search input (non-matching rows get `hidden`),
+ * the active row carries `aria-selected="true"`; arrow keys move it and Enter selects.
+ */
+declare const Command: react.ForwardRefExoticComponent<CommandProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ConfirmDialogProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "open" | "onClose">, DialogState {
+    /** Icon color; default `error` (destructive confirm). */
+    type?: AlertDialogType;
+    icon?: ReactNode;
+    title: ReactNode;
+    /** Message: pass as `message` or as children. */
+    message?: ReactNode;
+    confirmLabel?: ReactNode;
+    cancelLabel?: ReactNode;
+    /** Optional third action at the footer start ("Don't save"). */
+    discardLabel?: ReactNode;
+    /** The user must type this word before confirming, e.g. "DELETE". */
+    confirmWord?: string;
+    /** Label above the typed field; defaults to "Type WORD to confirm". */
+    confirmWordLabel?: ReactNode;
+    closeLabel?: string;
+    onConfirm?: () => void;
+    onDiscard?: () => void;
+}
+/** Confirm variant of the alert dialog (`.oc-alert-dialog--confirm`). */
+declare const ConfirmDialog: react.ForwardRefExoticComponent<ConfirmDialogProps & react.RefAttributes<HTMLDialogElement>>;
+
+interface CookieCategory {
+    /** Input name and key in the stored choice (e.g. "statistics"). */
+    name: string;
+    label: string;
+    text?: ReactNode;
+    /** Always on (checked + disabled), e.g. necessary cookies. */
+    required?: boolean;
+}
+/** Stored choice: `{ necessary: true, statistics, marketing, date }`. */
+type ConsentChoice = {
+    necessary: boolean;
+    date: string;
+} & Record<string, boolean | string>;
+interface CookieConsentProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    categories?: CookieCategory[];
+    title?: ReactNode;
+    /** Replaces the whole text paragraph (put your policy link in it). */
+    text?: ReactNode;
+    policyHref?: string;
+    customizeLabel?: ReactNode;
+    necessaryLabel?: ReactNode;
+    selectedLabel?: ReactNode;
+    allLabel?: ReactNode;
+    /** Text of the "Cookie settings" button that opens the banner again; null hides it. */
+    openLabel?: ReactNode;
+    /** Full-width bar at the bottom (`--bar`). */
+    bar?: boolean;
+    /** Never open by itself (`data-oc-consent-manual`). */
+    manual?: boolean;
+    storageKey?: string;
+    /** Called with the stored choice on load and after every choice. */
+    onConsent?: (choice: ConsentChoice) => void;
+}
+/** `aside.oc-cookie-consent[popover=manual]` plus an optional `[data-oc-consent-open]` button. */
+declare const CookieConsent: react.ForwardRefExoticComponent<CookieConsentProps & react.RefAttributes<HTMLElement>>;
+
+interface CopyFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCopy"> {
+    value: string;
+    /** Accessible name of the read-only input. */
+    label?: string;
+    buttonLabel?: string;
+    /** How long the `is-copied` feedback stays (ms). */
+    feedbackMs?: number;
+    onCopy?: (value: string) => void;
+}
+/** Read-only monospace value with a copy button (`is-copied` feedback for 2s). */
+declare const CopyField: react.ForwardRefExoticComponent<CopyFieldProps & react.RefAttributes<HTMLDivElement>>;
+
+interface CounterProps extends HTMLAttributes<HTMLElement> {
+    /** Target number (`--oc-counter-to`). */
+    to: number;
+    /** Text after the number, e.g. `+` or `%` (`--oc-counter-suffix`). */
+    suffix?: string;
+    /** Start animating when scrolled into view (default true). */
+    onView?: boolean;
+}
+/** `<strong class="oc-counter oc-counter--on-view">`: animated number, CSS only. */
+declare const Counter: react.ForwardRefExoticComponent<CounterProps & react.RefAttributes<HTMLElement>>;
+
+interface DataTableColumn {
+    key: string;
+    header: string;
+    /** Right aligned, sorted as a number (5,15 and 5.15). */
+    numeric?: boolean;
+    /** Click the header to sort. Default true. */
+    sortable?: boolean;
+    /** Show the column in the Columns menu. Default true. */
+    hideable?: boolean;
+    /** Start hidden until the user checks it in the Columns menu. */
+    defaultHidden?: boolean;
+}
+interface DataTableRow {
+    key: string;
+    status?: "active" | "deleted" | "archived";
+    cells: Record<string, string>;
+    /** Sort and export value when it differs from the visible text. */
+    values?: Record<string, string>;
+    href?: string;
+}
+interface DataTableProps {
+    id?: string;
+    title?: string;
+    columns: DataTableColumn[];
+    rows: DataTableRow[];
+    pageSize?: number;
+    searchPlaceholder?: string;
+    selectable?: boolean;
+    draggable?: boolean;
+    /** Trash and archive pills. Default true. */
+    filters?: boolean;
+    /** Demo mode: trash, restore, duplicate and delete change the rows in the page. */
+    live?: boolean;
+    /** Page actions on the right of the toolbar (New article, …). */
+    actions?: ReactNode;
+    onBulk?: (action: string, keys: string[]) => void;
+}
+/** Korrekt / OmniaDesk list table. The script in @birdycom/omniaui/data-table.js does the work. */
+declare function DataTable({ id, title, columns, rows, pageSize, searchPlaceholder, selectable, draggable, filters, live, actions, onBulk, }: DataTableProps): react.JSX.Element;
+
+interface DecimalInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "type"> {
+    /** The number; null = empty. */
+    value?: number | null;
+    defaultValue?: number | null;
+    onValueChange?: (value: number | null) => void;
+    /** BCP 47 locale for separators, e.g. "nl-BE" (1.234,56) or "en-US" (1,234.56). */
+    locale?: string;
+    /** Fixed number of decimals shown after blur. */
+    decimals?: number;
+    /** Unit text inside the frame (m², kg). */
+    unit?: string;
+    /** Left-aligned digits. */
+    alignStart?: boolean;
+    error?: boolean;
+}
+/** "1.234,56" (nl-BE) -> 1234.56. Returns null for empty or unreadable text. */
+declare function parseDecimal(text: string, locale?: string): number | null;
+/** 1234.56 -> "1.234,56" (nl-BE, 2 decimals). */
+declare function formatDecimal(n: number | null | undefined, locale?: string, decimals?: number): string;
+/** `.oc-decimal-input`: free typing, formatted on blur, value reported as a number. */
+declare const DecimalInput: react.ForwardRefExoticComponent<DecimalInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface DefinitionItem {
+    term: ReactNode;
+    detail: ReactNode;
+}
+interface DefinitionListProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    items: DefinitionItem[];
+    /** Optional footer (actions). */
+    footer?: ReactNode;
+}
+/** `<div class="oc-dl-panel" role="region">` with a `dl` of label / value rows. */
+declare const DefinitionList: react.ForwardRefExoticComponent<DefinitionListProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DocViewerItem {
+    /** Name in the bar and the dialog title; also used in the aria-labels. */
+    label: string;
+    /** Small text next to the label, e.g. "PDF · 2.4 MB" or "1:42". */
+    meta?: ReactNode;
+    /** File URL. Leave empty to show placeholder art (`.oc-media-art`). */
+    src?: string;
+    /** Default "pdf" (A4 frame). "video" = 16/9 dark frame, "image" = natural height. */
+    type?: "pdf" | "video" | "image";
+    /** Dialog id (generated when empty). */
+    id?: string;
+    /** Text for the inline preview (aria-label / alt / iframe title). Defaults to the label. */
+    alt?: string;
+    /** Placeholder art variant (`oc-media-art--N`) when there is no src. */
+    art?: number;
+    /** Download link in the dialog bar. */
+    download?: string;
+    /** Where the preview opens: "bar" (expand button) or "frame" (the whole preview). Default: "frame" for video. */
+    open?: "bar" | "frame";
+    /** Set false for a plain card without full-screen dialog. Default true. */
+    fullscreen?: boolean;
+}
+interface DocViewerProps extends HTMLAttributes<HTMLDivElement> {
+    items?: DocViewerItem[];
+    /** Text of the frame button (default "Click for full screen"). */
+    openText?: ReactNode;
+    downloadText?: ReactNode;
+    /** Prefix for generated dialog ids. */
+    idPrefix?: string;
+}
+/** `.oc-doc-viewer-grid` of `figure.oc-doc-viewer` cards, each with its `dialog.oc-doc-viewer-dialog`. */
+declare const DocViewer: react.ForwardRefExoticComponent<DocViewerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
+    /** Content of the trigger button. */
+    trigger: ReactNode;
+    /** Props for the trigger button (default variant `outline`). */
+    triggerProps?: ButtonProps;
+}
+/**
+ * Trigger button + `<div class="oc-dropdown-menu" popover>`, wired with `popovertarget`
+ * (native popover and anchor positioning, no state needed).
+ */
+declare const Dropdown: react.ForwardRefExoticComponent<DropdownProps & react.RefAttributes<HTMLDivElement>>;
+/** `.oc-dropdown-label` */
+declare function DropdownLabel({ className, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+/** `.oc-dropdown-separator` */
+declare function DropdownSeparator({ className, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+type ItemProps = (AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+}) | (ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: undefined;
+});
+/** `.oc-dropdown-item`: an anchor when `href` is set, otherwise a button. */
+declare function DropdownItem({ className, ...props }: ItemProps): react.JSX.Element;
+
+interface DropzoneProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "children"> {
+    /** Icon in `oc-dropzone-icon` (inline SVG or glyph). */
+    icon?: ReactNode;
+    /** Main text, e.g. `<strong>Drop invoices here</strong> or click to choose`. */
+    children?: ReactNode;
+    /** Small hint (`oc-dropzone-hint`), e.g. accepted types and size. */
+    hint?: ReactNode;
+    /** Called with the chosen or dropped files. */
+    onFiles?: (files: File[]) => void;
+}
+/** `<label class="oc-dropzone">` around a real file input; `is-dragover` while dragging. */
+declare const Dropzone: react.ForwardRefExoticComponent<DropzoneProps & react.RefAttributes<HTMLInputElement>>;
+
+interface EmojiGroup {
+    label?: string;
+    emojis: string[];
+}
+interface EmojiPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    groups?: EmojiGroup[];
+    /** Called with the picked emoji. */
+    onSelect?: (emoji: string) => void;
+    /** Always-visible panel without trigger / popover. */
+    inline?: boolean;
+    /** Trigger content (default 🙂) and its accessible name. */
+    trigger?: ReactNode;
+    triggerLabel?: string;
+}
+/** `.oc-emoji-picker`: popover grid of emoji buttons, anchored to its trigger. */
+declare const EmojiPicker: react.ForwardRefExoticComponent<EmojiPickerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    icon?: ReactNode;
+    title: ReactNode;
+    /** Explanation (`oc-empty-text`). */
+    description?: ReactNode;
+    /** Buttons row (`oc-empty-actions`). */
+    actions?: ReactNode;
+}
+/** `<div class="oc-empty">` for lists without data. */
+declare const EmptyState: react.ForwardRefExoticComponent<EmptyStateProps & react.RefAttributes<HTMLDivElement>>;
+
+interface EntityCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title: ReactNode;
+    eyebrow?: ReactNode;
+    description?: ReactNode;
+    /** Picture in the frame. */
+    src?: string;
+    alt?: string;
+    /** Large character or icon in the frame (when there is no `src`). */
+    glyph?: ReactNode;
+    /** Anything else for the frame (svg, placeholder art). Wins over src / glyph. */
+    media?: ReactNode;
+    /** Keep a margin around a logo / symbol picture (`__frame--contain`). */
+    contain?: boolean;
+    /** Key / value facts, rendered as a <dl>. */
+    facts?: Array<[ReactNode, ReactNode]>;
+    /** Tags or actions under a divider. */
+    footer?: ReactNode;
+    stacked?: boolean;
+    size?: "sm" | "md";
+}
+/** `article.oc-entity-card`: framed media cell + detail column. */
+declare const EntityCard: react.ForwardRefExoticComponent<EntityCardProps & react.RefAttributes<HTMLElement>>;
+
+interface FactListRow {
+    label: ReactNode;
+    value: ReactNode;
+}
+interface FactListProps extends HTMLAttributes<HTMLDListElement> {
+    items: FactListRow[];
+    plain?: boolean;
+    compact?: boolean;
+    stacked?: boolean;
+    /** Values in the accent color. */
+    accent?: boolean;
+}
+/** `<dl class="oc-fact-list">`: key / value product facts (variant of the definition list). */
+declare const FactList: react.ForwardRefExoticComponent<FactListProps & react.RefAttributes<HTMLDListElement>>;
+
+interface FilterCountsOption {
+    value: string;
+    label: ReactNode;
+    count: number | string;
+    hint?: ReactNode;
+    /** Accent color of the tile; default primary. */
+    tone?: "primary" | "success" | "destructive" | "muted";
+    disabled?: boolean;
+}
+interface FilterCountsProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "defaultValue"> {
+    options: FilterCountsOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    name?: string;
+    /** Small inline pills instead of tiles. */
+    compact?: boolean;
+}
+/** `.oc-filter-counts`: choose a view; every tile shows its item count. */
+declare const FilterCounts: react.ForwardRefExoticComponent<FilterCountsProps & react.RefAttributes<HTMLFieldSetElement>>;
+
+interface FlipCardProps extends HTMLAttributes<HTMLDivElement> {
+    front: ReactNode;
+    back: ReactNode;
+    /** How the card flips. Default "toggle" (click / Space). */
+    trigger?: "toggle" | "hover" | "manual";
+    flipped?: boolean;
+    defaultFlipped?: boolean;
+    onFlippedChange?: (flipped: boolean) => void;
+    /** Turn top over bottom instead of left over right. */
+    vertical?: boolean;
+    /** Text of the flip labels (toggle mode). */
+    frontLabel?: ReactNode;
+    backLabel?: ReactNode;
+}
+/** `.oc-flip-card`: front / back card that turns in 3D (cross-fades with reduced motion). */
+declare const FlipCard: react.ForwardRefExoticComponent<FlipCardProps & react.RefAttributes<HTMLDivElement>>;
+
+interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    label?: ReactNode;
+    description?: ReactNode;
+    /** Error message (`oc-field-error`); also sets `aria-invalid` on the control. */
+    error?: ReactNode;
+    /** Horizontal layout (`oc-field--horizontal`). */
+    horizontal?: boolean;
+    /** Id of the control; generated when omitted. */
+    htmlFor?: string;
+    /** A single control (Input, Select, Textarea...) gets id / aria-describedby / aria-invalid injected. */
+    children?: ReactNode;
+}
+/** `<div class="oc-field">` with label, control, description and error wired through ids. */
+declare const FormField: react.ForwardRefExoticComponent<FormFieldProps & react.RefAttributes<HTMLDivElement>>;
+/** `<div class="oc-field-group">`: stack (or `row`) of related controls. */
+declare const FieldGroup: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    row?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type GreetingTimeOfDay = "morning" | "afternoon" | "evening";
+/** Pick the time-of-day modifier for a date. */
+declare function greetingTimeOfDay(date?: Date): GreetingTimeOfDay;
+interface GreetingProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    name?: ReactNode;
+    /** The moment to greet for (default: now). Also shown as the date. */
+    date?: Date;
+    /** Force a time of day instead of computing it. */
+    timeOfDay?: GreetingTimeOfDay;
+    /** Translated greetings, e.g. `{ morning: "Goedemorgen", ... }`. */
+    words?: Partial<Record<GreetingTimeOfDay, string>>;
+    /** Locale for the date text (default: the browser locale). */
+    locale?: string;
+    /** Hide the date line. */
+    hideDate?: boolean;
+    eyebrow?: ReactNode;
+    icon?: ReactNode;
+    actions?: ReactNode;
+    size?: "lg";
+}
+/** `.oc-greeting`: dashboard greeting with date and actions. */
+declare const Greeting: react.ForwardRefExoticComponent<GreetingProps & react.RefAttributes<HTMLElement>>;
+
+interface HeadingProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Heading element level (default 2). */
+    level?: 1 | 2 | 3 | 4;
+    /** `sm` = section heading. */
+    size?: "md" | "sm";
+    titleId?: string;
+}
+/** `<div class="oc-heading">` title + muted description. */
+declare const Heading: react.ForwardRefExoticComponent<HeadingProps & react.RefAttributes<HTMLDivElement>>;
+
+interface IconProps extends Omit<SVGProps<SVGSVGElement>, "d"> {
+    /** SVG path data (24x24 viewBox, stroke icon). Use `children` for several shapes. */
+    d?: string;
+}
+/** Inline 24x24 stroke icon (`currentColor`), the shape used by the snippets. */
+declare function Icon({ d, children, className, ...rest }: IconProps): react.JSX.Element;
+
+interface ImageZoomProps extends HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    alt?: string;
+    /** Zoom levels for the toolbar. Empty array = no toolbar. Default [1, 1.5, 2, 3]. */
+    levels?: number[];
+    /** Starting level. Default 1. */
+    defaultZoom?: number;
+    /** Window ratio: "square", "photo" or a CSS ratio such as "21 / 9". Default 16 / 9. */
+    ratio?: "square" | "photo" | string;
+    /** Replaces the <img> inside the canvas (svg, video, placeholder art). */
+    media?: ReactNode;
+}
+/** `.oc-image-zoom`: zoom by making the canvas wider than the viewport; pan by scrolling. */
+declare const ImageZoom: react.ForwardRefExoticComponent<ImageZoomProps & react.RefAttributes<HTMLDivElement>>;
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Error state: adds `oc-input--error` and `aria-invalid`. */
+    error?: boolean;
+}
+/** `<input class="oc-input">` */
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface InputGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "prefix"> {
+    /** Addon before the input (currency sign...). */
+    prefix?: ReactNode;
+    /** Addon after the input (%, unit...). */
+    suffix?: ReactNode;
+}
+/** `<div class="oc-input-group">` with `oc-input-addon` spans around the child `<Input>`. */
+declare const InputGroup: react.ForwardRefExoticComponent<InputGroupProps & react.RefAttributes<HTMLDivElement>>;
+
+interface LanguageSelectOption {
+    value: string;
+    label: string;
+}
+interface LanguageSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "value" | "defaultValue" | "onChange"> {
+    options: LanguageSelectOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Currency look (symbol in primary color). */
+    currency?: boolean;
+    /** No frame until hover / focus. */
+    ghost?: boolean;
+    /** Replaces the globe icon (e.g. "€"). */
+    icon?: ReactNode;
+    /** Class for the wrapping label (`className` goes to the select). */
+    labelClassName?: string;
+}
+/** `.oc-language-select`: native select in a pill with a leading icon. */
+declare const LanguageSelect: react.ForwardRefExoticComponent<LanguageSelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+interface LauncherCardProps extends Omit<AnchorHTMLAttributes<HTMLElement>, "title"> {
+    /** Tinted icon tile content (inline SVG). */
+    icon?: ReactNode;
+    title: ReactNode;
+    /** Trailing badge inside the title. */
+    badge?: ReactNode;
+    description?: ReactNode;
+    /** Footer text, e.g. why the card is disabled. */
+    footer?: ReactNode;
+    /** Current card (`aria-current="true"`). */
+    active?: boolean;
+    /** Not clickable (`aria-disabled`); renders a <span>. */
+    disabled?: boolean;
+}
+/** `.oc-launcher`: an `<a>` (with `href`), a `<button>` (with `onClick`), or a `<span>` when disabled. */
+declare const LauncherCard: react.ForwardRefExoticComponent<LauncherCardProps & react.RefAttributes<HTMLElement>>;
+
+interface LightboxImage {
+    /** Image URL. Leave empty to show placeholder art (`.oc-media-art`). */
+    src?: string;
+    alt: string;
+    caption?: ReactNode;
+    /** Smaller image for the thumbnail (defaults to `src`). */
+    thumb?: string;
+}
+interface LightboxProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "open" | "onClose">, DialogState {
+    images: LightboxImage[];
+    /** Text in the top bar (`oc-lightbox__title`). */
+    title?: ReactNode;
+    /** Render the thumbnail grid that opens the viewer. Default true. */
+    thumbnails?: boolean;
+}
+/** `.oc-lightbox-thumbs` + `<dialog class="oc-lightbox">`. Controlled with `open` / `onOpenChange`, or uncontrolled. */
+declare const Lightbox: react.ForwardRefExoticComponent<LightboxProps & react.RefAttributes<HTMLDialogElement>>;
+
+type LinkArrowDirection = "forward" | "back" | "external";
+interface LinkArrowProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    direction?: LinkArrowDirection;
+    tone?: "default" | "accent" | "muted";
+    size?: "sm" | "default" | "lg";
+}
+/** `<a class="oc-link-arrow">`: text link with an arrow that moves on hover and focus. */
+declare const LinkArrow: react.ForwardRefExoticComponent<LinkArrowProps & react.RefAttributes<HTMLAnchorElement>>;
+
+interface ListToolbarView {
+    /** "cards", "table" or "list" (matches `.oc-list-toolbar-panel[data-view]`). */
+    value: string;
+    label: string;
+    icon: ReactNode;
+}
+interface ListToolbarProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Search area content, e.g. `<input class="oc-input" type="search">`. */
+    search?: ReactNode;
+    /** Result count text, e.g. "3 items". */
+    count?: ReactNode;
+    views?: ListToolbarView[];
+    view?: string;
+    defaultView?: string;
+    onViewChange?: (view: string) => void;
+    viewsLabel?: string;
+    actions?: ReactNode;
+    sticky?: boolean;
+    bordered?: boolean;
+}
+/** `.oc-list-toolbar`: search, count, view toggle and actions above a list. */
+declare const ListToolbar: react.ForwardRefExoticComponent<ListToolbarProps & react.RefAttributes<HTMLDivElement>>;
+
+interface MarqueeProps extends HTMLAttributes<HTMLDivElement> {
+    /** Items of the strip. They are rendered twice; the copy is aria-hidden. */
+    items: ReactNode[];
+    reverse?: boolean;
+    speed?: "default" | "slow" | "fast";
+    /** Text only, no pills. */
+    plain?: boolean;
+    /** No soft fade at the edges. */
+    noFade?: boolean;
+}
+/** `.oc-marquee`: endless strip that pauses on hover / focus and stands still with reduced motion. */
+declare const Marquee: react.ForwardRefExoticComponent<MarqueeProps & react.RefAttributes<HTMLDivElement>>;
+
+interface MediaThumbProps extends HTMLAttributes<HTMLElement> {
+    /** Picture URL. Empty = placeholder art (`.oc-media-art`, pick a variant with `art`). */
+    src?: string;
+    alt?: string;
+    /** Placeholder art variant 1-6 (only without `src`). */
+    art?: number;
+    /** Renders an <a> when set. */
+    href?: string;
+    /** "12:04" in the bottom-right corner. */
+    duration?: ReactNode;
+    /** Top-left label ("New", "LIVE"). */
+    badge?: ReactNode;
+    live?: boolean;
+    /** Watched part, 0-100. Shows the progress bar when set. */
+    progress?: number;
+    watched?: boolean;
+    ratio?: "video" | "square" | "portrait";
+}
+/** `.oc-media-thumb`: 16:9 video thumbnail. */
+declare const MediaThumb: react.ForwardRefExoticComponent<MediaThumbProps & react.RefAttributes<HTMLElement>>;
+
+interface MediaCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title: ReactNode;
+    /** Link of the title; it covers the whole card. */
+    href: string;
+    /** "Channel · 24K views · 3 days ago". */
+    meta?: ReactNode;
+    /** Initials, an <img>, or any node. Leave out for no avatar. */
+    avatar?: ReactNode;
+    /** Props for the MediaThumb on top (src, duration, progress, …). */
+    thumb?: MediaThumbProps;
+    /** Items of the ⋮ menu (`.oc-dropdown-item` elements). No menu button when empty. */
+    menu?: ReactNode;
+    compact?: boolean;
+}
+/** `article.oc-media-card`. */
+declare const MediaCard: react.ForwardRefExoticComponent<MediaCardProps & react.RefAttributes<HTMLElement>>;
+
+interface MediaRowListProps extends HTMLAttributes<HTMLElement> {
+    /** Numbered playlist: renders an <ol> with a counter column. */
+    numbered?: boolean;
+}
+/** `ul.oc-media-row-list` or `ol.oc-media-row-list--numbered`. */
+declare const MediaRowList: react.ForwardRefExoticComponent<MediaRowListProps & react.RefAttributes<HTMLElement>>;
+interface MediaRowProps extends Omit<HTMLAttributes<HTMLLIElement>, "title"> {
+    title: ReactNode;
+    href: string;
+    meta?: ReactNode;
+    thumb?: MediaThumbProps;
+    /** Now playing (`aria-current="true"`). */
+    current?: boolean;
+    /** Items of the ⋮ menu. No menu button when empty. */
+    menu?: ReactNode;
+}
+/** `li.oc-media-row`: thumb | title + meta | menu. */
+declare const MediaRow: react.ForwardRefExoticComponent<MediaRowProps & react.RefAttributes<HTMLLIElement>>;
+
+/** File chip (default), image preview or square thumbnail inside a message. */
+type MessageAttachment = (AttachmentFile & {
+    kind?: "file";
+}) | {
+    kind: "image";
+    href?: string;
+    src?: string;
+    alt: string;
+    art?: number;
+    caption?: ReactNode;
+} | {
+    kind: "thumb";
+    src?: string;
+    alt: string;
+    art?: number;
+};
+interface MessageAction {
+    /** Passed to onAction, e.g. "reply". */
+    name: string;
+    /** aria-label, e.g. "Reply to this message". */
+    label: string;
+    /** Built-in "reply" / "delete" icon, or your own svg. */
+    icon?: "reply" | "delete" | ReactNode;
+    destructive?: boolean;
+}
+interface MessageData {
+    direction?: "in" | "out";
+    sender?: ReactNode;
+    /** Initials in the avatar. */
+    avatar?: ReactNode;
+    time?: ReactNode;
+    datetime?: string;
+    status?: "sent" | "read" | "failed";
+    /** Default "Sent" / "Read" / "Failed". */
+    statusLabel?: ReactNode;
+    /** Double check icon before the status. */
+    statusIcon?: boolean;
+    /** Follows a message of the same sender (no name; avatar on the last one). */
+    continued?: boolean;
+    quote?: {
+        href?: string;
+        sender: ReactNode;
+        text: ReactNode;
+    };
+    /** A string becomes one paragraph; pass elements for lists, links and more paragraphs. */
+    text?: ReactNode;
+    attachments?: MessageAttachment[];
+    actions?: MessageAction[];
+    /** aria-label of the row, e.g. "Lisa Verbeke, 09:12". */
+    label?: string;
+    id?: string;
+}
+/** `.oc-message__attachments`: thumbnails share one `.oc-attachment-list`, files and images stand alone. */
+declare function MessageAttachments({ items }: {
+    items: MessageAttachment[];
+}): react.JSX.Element;
+interface MessageProps extends Omit<HTMLAttributes<HTMLElement>, "id">, MessageData {
+    onAction?: (name: string) => void;
+}
+/** `article.oc-message`: one chat bubble with avatar, meta and hover actions. */
+declare const Message: react.ForwardRefExoticComponent<MessageProps & react.RefAttributes<HTMLElement>>;
+interface MessageDividerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Centred notice without lines. */
+    system?: boolean;
+}
+/** `.oc-message-divider`: date divider, or a system notice. */
+declare function MessageDivider({ system, className, children, ...rest }: MessageDividerProps): react.JSX.Element;
+type MessageListItem = MessageData | {
+    divider: ReactNode;
+    system?: boolean;
+};
+interface MessageListProps extends HTMLAttributes<HTMLDivElement> {
+    /** Messages and dividers in order; `children` replace them. */
+    items?: MessageListItem[];
+    /** role="log" for a list that updates live (default true). */
+    log?: boolean;
+    onAction?: (name: string, message: MessageData, index: number) => void;
+}
+/** `.oc-message-list`: column of messages and dividers. */
+declare const MessageList: react.ForwardRefExoticComponent<MessageListProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ThreadParticipant {
+    initials: ReactNode;
+    name?: string;
+}
+type ThreadMenuItem = {
+    name: string;
+    label: ReactNode;
+    destructive?: boolean;
+} | {
+    separator: true;
+};
+interface MessageThreadProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title?: ReactNode;
+    /** Bold first part of the meta line, e.g. the project. */
+    project?: ReactNode;
+    meta?: ReactNode;
+    participants?: ThreadParticipant[];
+    /** Badge in the header, e.g. { label: "Urgent", variant: "destructive" }. */
+    status?: {
+        label: ReactNode;
+        variant?: string;
+    } | null;
+    /** Actions menu; null hides the button. */
+    menu?: ThreadMenuItem[] | null;
+    onMenu?: (name: string) => void;
+    messages?: MessageListItem[];
+    /** aria-label of the scroll area (default "Messages"). */
+    scrollLabel?: string;
+    /** aria-live="polite" on the scroll area (default true). */
+    live?: boolean;
+    /** Show the sending overlay (aria-busy). */
+    busy?: boolean;
+    /** Overlay title; null leaves the overlay out. */
+    busyTitle?: ReactNode;
+    busyText?: ReactNode;
+    /** Replaces the default composer form. */
+    composer?: ReactNode;
+    /** Text instead of a composer, e.g. for a closed conversation. */
+    note?: ReactNode;
+    placeholder?: string;
+    composerLabel?: string;
+    inline?: boolean;
+    tools?: Array<"attach" | "emoji">;
+    onTool?: (tool: "attach" | "emoji") => void;
+    hint?: ReactNode;
+    /** Called with the text; the bubble is appended when it resolves (not when it throws). */
+    onSend?: (text: string) => void | Promise<void>;
+    /** Append sent messages yourself through `messages` (default false = append here). */
+    manual?: boolean;
+    /** Avatar of new outgoing messages (default: the last outgoing avatar, else "Me"). */
+    me?: ReactNode;
+    /** Element at the start of the header, e.g. a back link. */
+    back?: ReactNode;
+    /** No wallpaper (`--plain`). */
+    plain?: boolean;
+}
+/** `section.oc-message-thread`: header, scrolling messages (newest at the bottom), composer and sending overlay. */
+declare const MessageThread: react.ForwardRefExoticComponent<MessageThreadProps & react.RefAttributes<HTMLElement>>;
+
+type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+interface ModalProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "open" | "onClose">, DialogState {
+    /** Heading (`oc-modal-title`). */
+    title?: ReactNode;
+    /** Muted text under the title (`oc-modal-description`). */
+    description?: ReactNode;
+    /** Button row (`oc-modal-footer`). Use `<ModalClose>` for buttons that close the dialog. */
+    footer?: ReactNode;
+    size?: ModalSize;
+    /** Close when the backdrop is clicked (native `closedby="any"`). Default true. */
+    closeOnBackdrop?: boolean;
+}
+/**
+ * `<dialog class="oc-modal">`. The `open` prop is synced to showModal() / close() in an effect;
+ * Escape and backdrop clicks are reported through `onOpenChange(false)`.
+ */
+declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<HTMLDialogElement>>;
+/** A button that closes the surrounding Modal / AlertDialog / Sheet. */
+declare const ModalClose: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface NavmenuProps extends HTMLAttributes<HTMLUListElement> {
+    /** `aria-label` of the wrapping <nav>. */
+    label?: string;
+    /** Class for the wrapping <nav> (e.g. `oc-block-appbar-nav`). */
+    navClassName?: string;
+}
+/** `<nav><ul class="oc-navmenu">`: horizontal navigation links. */
+declare const Navmenu: react.ForwardRefExoticComponent<NavmenuProps & react.RefAttributes<HTMLUListElement>>;
+/** `<li>` of a Navmenu. */
+declare function NavmenuItem(props: LiHTMLAttributes<HTMLLIElement>): react.JSX.Element;
+interface NavmenuLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Current page (`aria-current="page"`). */
+    current?: boolean;
+}
+/** `<a class="oc-navmenu-link">` */
+declare const NavmenuLink: react.ForwardRefExoticComponent<NavmenuLinkProps & react.RefAttributes<HTMLAnchorElement>>;
+interface NavmenuDropdownProps extends HTMLAttributes<HTMLDivElement> {
+    /** Trigger text (button with a chevron). */
+    label: ReactNode;
+}
+/** `<li>` with a caret trigger button and a `.oc-dropdown-menu[popover]` of children. */
+declare const NavmenuDropdown: react.ForwardRefExoticComponent<NavmenuDropdownProps & react.RefAttributes<HTMLDivElement>>;
+
+interface NextTeaserProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Small uppercase label (default "Next product"). */
+    label?: ReactNode;
+    name: ReactNode;
+    tagline?: ReactNode;
+    /** Element before the name, usually a <ProductMark size="sm" />. */
+    mark?: ReactNode;
+    /** "Previous" link: arrow left. */
+    prev?: boolean;
+}
+/** `<a class="oc-next-teaser">`: "Next product" teaser card. */
+declare const NextTeaser: react.ForwardRefExoticComponent<NextTeaserProps & react.RefAttributes<HTMLAnchorElement>>;
+
+interface NumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size" | "type" | "min" | "max" | "step"> {
+    /** Current number; null = empty field. */
+    value?: number | null;
+    defaultValue?: number | null;
+    onChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: "sm" | "md";
+    /** Full width. */
+    block?: boolean;
+    error?: boolean;
+    decrementLabel?: string;
+    incrementLabel?: string;
+}
+/** `.oc-number-input`: number field with - / + buttons. Buttons disable themselves at min / max. */
+declare const NumberInput: react.ForwardRefExoticComponent<NumberInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface OtpInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "maxLength"> {
+    /** Code length (default 6). */
+    length?: number;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Called once when `length` characters have been entered. */
+    onComplete?: (value: string) => void;
+    /** Error state (`aria-invalid`). */
+    invalid?: boolean;
+    /** Allow letters as well as digits. */
+    alphanumeric?: boolean;
+}
+/** `<input class="oc-otp">`: separate cells drawn on a single real input. */
+declare const OtpInput: react.ForwardRefExoticComponent<OtpInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Meta row items (owner, updated, ...). */
+    meta?: ReactNode;
+    /** Back link, e.g. `<BackLink href="/projects">Projects</BackLink>`. */
+    back?: ReactNode;
+    actions?: ReactNode;
+    /** Heading level of the title (default 1). */
+    level?: 1 | 2 | 3;
+    bordered?: boolean;
+    sticky?: boolean;
+    size?: "sm";
+}
+/** `.oc-page-header`: title row of an app page. */
+declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLElement>>;
+
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+    /** Current page (1-based). */
+    page: number;
+    pageCount: number;
+    /** Called with the new page; when set, link navigation is prevented. */
+    onPageChange?: (page: number) => void;
+    /** Builds the href of a page (default `?page=n`). */
+    hrefFor?: (page: number) => string;
+}
+/** `<nav class="oc-pagination">` with numbered links and `aria-current="page"`. */
+declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
+
+interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    showLabel?: string;
+    hideLabel?: string;
+    /** Accessible name of the toggle button. */
+    toggleLabel?: string;
+    error?: boolean;
+}
+/** Password field with a show / hide button (`aria-pressed`), inside `.oc-input-reveal`. */
+declare const PasswordInput: react.ForwardRefExoticComponent<PasswordInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface PasswordRule {
+    label: ReactNode;
+    /** True when the password meets the rule. */
+    test: (password: string) => boolean;
+}
+/** Common rules: length, uppercase, number, symbol. Pass your own list to change them. */
+declare const defaultPasswordRules: PasswordRule[];
+interface PasswordRequirementsProps extends HTMLAttributes<HTMLUListElement> {
+    password: string;
+    rules?: PasswordRule[];
+    /** Rules side by side. */
+    inline?: boolean;
+    /** Render nothing until the user types. */
+    hideWhenEmpty?: boolean;
+}
+/** `.oc-password-requirements`: each rule turns green (--met) as soon as it passes. */
+declare const PasswordRequirements: react.ForwardRefExoticComponent<PasswordRequirementsProps & react.RefAttributes<HTMLUListElement>>;
+
+interface PhoneCountry {
+    /** Dial code with plus sign, e.g. "+32". */
+    dial: string;
+    /** Text in the select, e.g. "BE +32". */
+    label: string;
+}
+interface PhoneInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size"> {
+    /** Full value without spaces, e.g. "+32470123456" (empty string = no number). */
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    countries?: PhoneCountry[];
+    /** Dial code used while the value is empty. */
+    defaultDial?: string;
+    size?: "sm" | "md";
+    error?: boolean;
+    /** Accessible name of the dial code select. */
+    dialLabel?: string;
+}
+/** "470123456" -> "470 12 34 56": a group of 3, then pairs (readable for most European numbers). */
+declare function formatPhoneNational(digits: string): string;
+/** `.oc-phone-input`: country dial code + national number. Emits one value: dial + digits. */
+declare const PhoneInput: react.ForwardRefExoticComponent<PhoneInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Content of the trigger button. */
+    trigger: ReactNode;
+    triggerProps?: ButtonProps;
+    size?: "sm" | "md" | "lg";
+    title?: ReactNode;
+    /** Short body text (`oc-popover-text`). */
+    text?: ReactNode;
+}
+/** Trigger + `<div class="oc-popover" popover>` floating panel. */
+declare const Popover: react.ForwardRefExoticComponent<PopoverProps & react.RefAttributes<HTMLDivElement>>;
+
+interface PriceCardFeature {
+    label: ReactNode;
+    /** Shown with a cross and muted text. */
+    excluded?: boolean;
+}
+interface PriceCardPrice {
+    amount: ReactNode;
+    period?: ReactNode;
+    /** Old price (struck through). */
+    was?: ReactNode;
+    note?: ReactNode;
+}
+interface PriceCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    name: ReactNode;
+    description?: ReactNode;
+    /** Badge such as "Save 20%". */
+    discount?: ReactNode;
+    monthly: PriceCardPrice;
+    /** Without a yearly price the toggle is not rendered. */
+    yearly?: PriceCardPrice;
+    /** Period that is selected first (uncontrolled radio). */
+    defaultPeriod?: "monthly" | "yearly";
+    features?: PriceCardFeature[];
+    /** Call to action, e.g. <a className="oc-btn oc-price-card__cta">. */
+    cta?: ReactNode;
+    featured?: boolean;
+    /** Labels of the toggle. */
+    monthlyLabel?: ReactNode;
+    yearlyLabel?: ReactNode;
+}
+/** `<article class="oc-price-card">`: plan card with a CSS-only monthly / yearly switch. */
+declare const PriceCard: react.ForwardRefExoticComponent<PriceCardProps & react.RefAttributes<HTMLElement>>;
+
+type ProductMarkSize = "sm" | "default" | "lg" | "xl";
+type ProductMarkAccent = "blue" | "cyan" | "green" | "orange" | "red" | "violet" | "yellow";
+interface ProductMarkProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: ProductMarkSize;
+    /** Accent preset (adds .oc-accent--{accent}). */
+    accent?: ProductMarkAccent;
+    /** Tinted background with an accent glyph. */
+    soft?: boolean;
+    glow?: boolean;
+    /** Full-bleed image inside. */
+    cover?: boolean;
+}
+/** `<span class="oc-product-mark">`: squircle app-icon tile. Decorative by default (aria-hidden). */
+declare const ProductMark: react.ForwardRefExoticComponent<ProductMarkProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+    value: number;
+    /** Maximum (default 100). */
+    max?: number;
+    /** Bar color. */
+    variant?: "default" | "success" | "warning" | "danger";
+}
+/** `<div class="oc-progress" role="progressbar">` with an `oc-progress-bar` sized in percent. */
+declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ProjectCardProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type"> {
+    name: ReactNode;
+    /** Badge text ("Website"). */
+    type?: ReactNode;
+    /** Sector / location line. */
+    meta?: ReactNode;
+    /** Text of the arrow link (default "View project"). */
+    more?: ReactNode;
+    /** Screenshot URL; without it the preview is an accent gradient. */
+    image?: string;
+    /** Accessible description of the screenshot. */
+    imageAlt?: string;
+    /** Edge-to-edge preview. */
+    flat?: boolean;
+}
+/** `<a class="oc-project-card">`: portfolio card with a browser-like preview. */
+declare const ProjectCard: react.ForwardRefExoticComponent<ProjectCardProps & react.RefAttributes<HTMLAnchorElement>>;
+
+interface ProseProps extends HTMLAttributes<HTMLElement> {
+    /** All spacing scales along. */
+    size?: "sm" | "md" | "lg";
+    /** No max width (default 68ch). */
+    full?: boolean;
+    as?: "article" | "div" | "section";
+    /** The text; the snippet's demo article when empty. */
+    children?: ReactNode;
+}
+/** `p.oc-prose-lead`: larger intro paragraph. */
+declare function ProseLead({ className, ...rest }: HTMLAttributes<HTMLParagraphElement>): react.JSX.Element;
+/** `.oc-prose`: typography for long-form text written without classes. */
+declare const Prose: react.ForwardRefExoticComponent<ProseProps & react.RefAttributes<HTMLElement>>;
+
+interface RecoveryCodesProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onCopy"> {
+    codes: string[];
+    title?: ReactNode;
+    warning?: ReactNode;
+    copyLabel?: string;
+    downloadLabel?: string;
+    /** File name of the download (default `recovery-codes.txt`). */
+    fileName?: string;
+    onCopy?: (codes: string[]) => void;
+    onDownload?: (codes: string[]) => void;
+}
+/** `.oc-recovery-codes`: warning panel with a code grid, "Copy all" and "Download .txt". */
+declare const RecoveryCodes: react.ForwardRefExoticComponent<RecoveryCodesProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SegmentedOption {
+    value: string;
+    label: ReactNode;
+}
+interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    options: SegmentedOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Radio group name (generated when omitted). */
+    name?: string;
+    /** Full width. */
+    block?: boolean;
+    size?: "sm" | "md";
+}
+/** `.oc-segmented` radio group as a pill switcher. */
+declare const Segmented: react.ForwardRefExoticComponent<SegmentedProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SelectOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    /** Shortcut for `<option>` children. */
+    options?: Array<SelectOption | string>;
+}
+/** `<select class="oc-select">` */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+type SeverityLevel = "low" | "medium" | "high" | "critical";
+interface SeverityCardProps extends Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "title"> {
+    level: SeverityLevel;
+    title: ReactNode;
+    /** Small tags under the title, e.g. ["email", "password"]. */
+    tags?: ReactNode[];
+    /** Badge text; default the level name ("High"). */
+    levelLabel?: ReactNode;
+    icon?: ReactNode;
+    /** Neutral colors (the finding is handled). */
+    resolved?: boolean;
+    actions?: ReactNode;
+    /** Exclusive group: cards with the same name open one at a time. */
+    name?: string;
+}
+/** `details.oc-severity-card`: expandable card colored by risk level. */
+declare const SeverityCard: react.ForwardRefExoticComponent<SeverityCardProps & react.RefAttributes<HTMLDetailsElement>>;
+
+type SheetSide = "right" | "left" | "top" | "bottom";
+interface SheetProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "open" | "onClose">, DialogState {
+    /** Edge the panel slides from (default `right`). */
+    side?: SheetSide;
+    /** Wider panel (`oc-sheet-content--wide`). */
+    wide?: boolean;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Action row (`oc-sheet-footer`). */
+    footer?: ReactNode;
+    /** Accessible name of the close button. */
+    closeLabel?: string;
+}
+/** Side panel on `<dialog class="oc-sheet">`. */
+declare const Sheet: react.ForwardRefExoticComponent<SheetProps & react.RefAttributes<HTMLDialogElement>>;
+
+interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Icon-only mode. */
+    collapsed?: boolean;
+    /** Dock on the right. */
+    right?: boolean;
+    /** Floating card look. */
+    floating?: boolean;
+    /** Dark panel that stays dark in the light theme (`--dark`). */
+    dark?: boolean;
+    /** Fixed top area (logo, workspace switcher). */
+    header?: ReactNode;
+    /** Fixed bottom area (user). */
+    footer?: ReactNode;
+}
+/** `<aside class="oc-sidebar">`: children go in the scrolling `oc-sidebar-content`. */
+declare const Sidebar: react.ForwardRefExoticComponent<SidebarProps & react.RefAttributes<HTMLElement>>;
+interface SidebarGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Group heading (`oc-sidebar-group-label`). */
+    label?: ReactNode;
+}
+/** `.oc-sidebar-group` with an optional label. */
+declare const SidebarGroup: react.ForwardRefExoticComponent<SidebarGroupProps & react.RefAttributes<HTMLDivElement>>;
+/** `.oc-sidebar-separator` */
+declare function SidebarSeparator({ className, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+/** `ul.oc-sidebar-menu` */
+declare const SidebarMenu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & react.RefAttributes<HTMLUListElement>>;
+/** `<li>` of a sidebar menu. */
+declare function SidebarMenuItem(props: LiHTMLAttributes<HTMLLIElement>): react.JSX.Element;
+interface SidebarMenuButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Inline SVG icon (`oc-sidebar-menu-icon`). */
+    icon?: ReactNode;
+    /** Count pill on the right. */
+    badge?: ReactNode;
+    /** Current page (`aria-current="page"`). */
+    current?: boolean;
+    disabled?: boolean;
+    size?: "md" | "lg";
+    /** Wrap the children in `oc-sidebar-menu-label` (hidden when collapsed). Default true. */
+    label?: boolean;
+}
+/** `.oc-sidebar-menu-button`: a link (or button when no `href`). */
+declare const SidebarMenuButton: react.ForwardRefExoticComponent<SidebarMenuButtonProps & react.RefAttributes<HTMLAnchorElement>>;
+interface SidebarCollapsibleProps extends Omit<HTMLAttributes<HTMLDetailsElement>, "title" | "onToggle"> {
+    icon?: ReactNode;
+    /** Summary label. */
+    label: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/** `details.oc-sidebar-collapsible`: children are the `<li>` items of the nested `oc-sidebar-menu-sub`. */
+declare const SidebarCollapsible: react.ForwardRefExoticComponent<SidebarCollapsibleProps & react.RefAttributes<HTMLDetailsElement>>;
+
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: "circle" | "title" | "text" | "rect";
+}
+/** `<div class="oc-skeleton oc-skeleton--{variant}">` */
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SortableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /** Accessible name of the grip, e.g. "Move Install". */
+    gripLabel: string;
+    /** This row is being moved (`.is-dragging`). */
+    dragging?: boolean;
+    /** Show the drop line above or below this row. */
+    drop?: "before" | "after" | null;
+    /** Locked row: no dragging, grip disabled. */
+    locked?: boolean;
+    /** Picked up with the keyboard (grip `aria-pressed`). */
+    grabbed?: boolean;
+    /** Keyboard handler for the grip (e.g. ArrowUp / ArrowDown to move). */
+    onGripKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+    children: ReactNode;
+}
+/** `tr.oc-sortable-row[draggable]` with a `button.oc-sortable-row-grip` in the first cell. */
+declare const SortableRow: react.ForwardRefExoticComponent<SortableRowProps & react.RefAttributes<HTMLTableRowElement>>;
+
+interface StackCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title: ReactNode;
+    /** Link of the title; it covers the whole card. */
+    href: string;
+    meta?: ReactNode;
+    /** Badge text, e.g. "12 videos". */
+    count?: ReactNode;
+    /** Show the count as a side panel (`--panel`). */
+    panel?: boolean;
+    /** Props for the cover (MediaThumb). */
+    thumb?: MediaThumbProps;
+}
+/** `article.oc-stack-card`: cover with two layers behind it and a count badge. */
+declare const StackCard: react.ForwardRefExoticComponent<StackCardProps & react.RefAttributes<HTMLElement>>;
+
+interface StackListItem {
+    label: ReactNode;
+    /** Optional glyph or SVG before the label (decorative). */
+    icon?: ReactNode;
+}
+interface StackListProps extends HTMLAttributes<HTMLUListElement> {
+    /** Strings, or objects with an icon. */
+    items: Array<ReactNode | StackListItem>;
+    neutral?: boolean;
+    size?: "default" | "sm";
+}
+/** `<ul class="oc-stack-list">`: technology pills. Set an accent with `className="oc-accent--violet"`. */
+declare const StackList: react.ForwardRefExoticComponent<StackListProps & react.RefAttributes<HTMLUListElement>>;
+
+/** `.oc-stat-card-grid`: responsive grid for a row of stat cards. */
+declare const StatCardGrid: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+interface StatCardProps extends Omit<HTMLAttributes<HTMLElement>, "onClick"> {
+    value: ReactNode;
+    label: ReactNode;
+    icon?: ReactNode;
+    /** Trend chip text after the value, e.g. "+12%". */
+    trend?: ReactNode;
+    trendDirection?: "up" | "down";
+    tone?: "default" | "accent" | "success" | "warning";
+    /** Colored start edge. */
+    stripe?: boolean;
+    href?: string;
+    onClick?: () => void;
+}
+/** `.oc-stat-card`: compact KPI tile. */
+declare function StatCard({ value, label, icon, trend, trendDirection, tone, stripe, href, onClick, className, ...rest }: StatCardProps): react.JSX.Element;
+
+interface StepperStep {
+    label: ReactNode;
+    /** Small text under the label, e.g. `2/4`. */
+    meta?: ReactNode;
+}
+interface StepperProps extends Omit<HTMLAttributes<HTMLOListElement>, "onChange"> {
+    steps: StepperStep[];
+    /** Index of the active step (0-based). Earlier steps are done, later ones disabled. */
+    current: number;
+    horizontal?: boolean;
+    /** Called when a done step is clicked. */
+    onStepChange?: (index: number) => void;
+}
+/** `<ol class="oc-stepper">`: done, active and upcoming steps. */
+declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefAttributes<HTMLOListElement>>;
+
+interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "role"> {
+    /** Class for the wrapping label (`className` goes to the input). */
+    labelClassName?: string;
+}
+/** `<label class="oc-switch"><input type="checkbox" role="switch">`. Works controlled (`checked`) or uncontrolled. */
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
+
+interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    striped?: boolean;
+    compact?: boolean;
+    borderless?: boolean;
+    sticky?: boolean;
+    /** `<caption>` text. */
+    caption?: ReactNode;
+    /** Class for the `oc-table-wrap` scroll container. */
+    wrapClassName?: string;
+}
+/** `div.oc-table-wrap > table.oc-table` */
+declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;
+interface TableSortProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+}
+/** `a.oc-table-sort` inside a `<th aria-sort="ascending|descending">`. */
+declare const TableSort: react.ForwardRefExoticComponent<TableSortProps & react.RefAttributes<HTMLAnchorElement>>;
+/** `td.oc-table-actions` */
+declare function TableActions({ className, ...rest }: TdHTMLAttributes<HTMLTableCellElement>): react.JSX.Element;
+type RowActionProps = {
+    tone?: "default" | "destructive" | "primary" | "success";
+} & ((AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+}) | (ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: undefined;
+}));
+/** `.oc-table-row-action`: link (with `href`) or button. */
+declare function TableRowAction({ tone, className, ...props }: RowActionProps): react.JSX.Element;
+/** Empty-state row: `<tr class="oc-table-empty"><td colspan>`; put an `<EmptyState>` inside. */
+declare function TableEmpty({ colSpan, children, ...rest }: HTMLAttributes<HTMLTableRowElement> & {
+    colSpan: number;
+}): react.JSX.Element;
+
+type TableActionTone = "default" | "primary" | "success" | "destructive";
+type IconActionProps = {
+    /** Accessible name; also used as the hover title. */
+    label: string;
+    tone?: TableActionTone;
+    children: ReactNode;
+} & ((Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children"> & {
+    href: string;
+}) | (Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    href?: undefined;
+}));
+/** `.oc-table-actions-icon`: a link (with `href`) or a button showing only an icon. */
+declare function TableActionIcon({ label, tone, className, children, ...props }: IconActionProps): react.JSX.Element;
+interface TableActionsMenuProps extends HTMLAttributes<HTMLDivElement> {
+    /** Accessible name of the three dots trigger, e.g. "Actions for Ada". */
+    label: string;
+    /** Menu items: `<a class="oc-dropdown-item">`, `<button class="oc-dropdown-item">`, separators. */
+    children: ReactNode;
+}
+/** `.oc-table-actions-more` trigger + `.oc-dropdown-menu[popover]`; the browser opens and closes it. */
+declare const TableActionsMenu: react.ForwardRefExoticComponent<TableActionsMenuProps & react.RefAttributes<HTMLDivElement>>;
+
+interface TableCompactColumn {
+    key: string;
+    label: ReactNode;
+    /** Right aligned, tabular figures (`data-numeric`). */
+    numeric?: boolean;
+    /** The cell may wrap (`data-wrap`). */
+    wrap?: boolean;
+}
+interface TableCompactProps extends HTMLAttributes<HTMLDivElement> {
+    columns?: TableCompactColumn[];
+    rows?: Array<Record<string, ReactNode>>;
+    /** Total row: one value per column key (missing keys stay empty). */
+    footer?: Record<string, ReactNode>;
+    bordered?: boolean;
+    plain?: boolean;
+}
+/** `.oc-table-compact`: small striped table for inside cards. */
+declare const TableCompact: react.ForwardRefExoticComponent<TableCompactProps & react.RefAttributes<HTMLDivElement>>;
+
+interface TabItem {
+    value: string;
+    label: ReactNode;
+    content: ReactNode;
+}
+interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    tabs: TabItem[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Radio group name (generated when omitted). */
+    name?: string;
+}
+/** `.oc-tabset`: radio triggers + panels; CSS (`:has()`) shows the selected panel. */
+declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
+
+interface TagInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (tags: string[]) => void;
+    /** Suggestion buttons below the control (already used tags are hidden). */
+    suggestions?: string[];
+    placeholder?: string;
+    /** Accessible name of the text input. */
+    label?: string;
+    disabled?: boolean;
+}
+/** `.oc-tag-input`: chips with remove buttons and a free-text input (Enter or comma adds, Backspace removes). */
+declare const TagInput: react.ForwardRefExoticComponent<TagInputProps & react.RefAttributes<HTMLDivElement>>;
+
+type TerminalLogLevel = "info" | "success" | "warn" | "error" | "debug";
+interface TerminalLogLine {
+    level: TerminalLogLevel;
+    message: ReactNode;
+    /** "09:41:02". Leave out for a two-column line. */
+    time?: string;
+    /** Text in the level column (defaults to the level name; "ok" for success). */
+    label?: string;
+}
+interface TerminalLogProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    lines: TerminalLogLine[];
+    title?: ReactNode;
+    /** Text next to the pulsing dot ("Live"). No dot when empty. */
+    status?: ReactNode;
+    /** Prompt line with a blinking cursor. `true` = empty prompt. */
+    prompt?: ReactNode | true;
+    /** Max height of the body, e.g. "12rem". */
+    height?: string;
+    /** Keep the newest line in view. Default true. */
+    autoScroll?: boolean;
+}
+/** `.oc-terminal-log`: dark console window. */
+declare const TerminalLog: react.ForwardRefExoticComponent<TerminalLogProps & react.RefAttributes<HTMLDivElement>>;
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    error?: boolean;
+}
+/** `<textarea class="oc-input">` */
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+type ThemeMode = "system" | "light" | "dark";
+interface ThemeSwitchProps extends Omit<HTMLAttributes<HTMLElement>, "onChange" | "defaultValue"> {
+    value?: ThemeMode;
+    defaultValue?: ThemeMode;
+    onChange?: (mode: ThemeMode) => void;
+    /** Which modes to offer (default all three). */
+    modes?: ThemeMode[];
+    /** Radio group name (generated when omitted). */
+    name?: string;
+    /** Render a `div role="radiogroup"` (compact app bars) instead of a `fieldset`. */
+    as?: "fieldset" | "div";
+}
+/**
+ * `.oc-theme-switch` radio group. The CSS applies `color-scheme` through `:has()`,
+ * so no state is needed; `onChange` lets you persist the choice.
+ */
+declare const ThemeSwitch: react.ForwardRefExoticComponent<ThemeSwitchProps & react.RefAttributes<HTMLElement>>;
+
+interface TimeInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "list"> {
+    /** "HH:mm" or "" (empty). */
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Suggested times shown by the browser while typing (datalist). */
+    slots?: string[];
+    error?: boolean;
+}
+/** Keep up to 4 digits and put a colon after the first two: "0930" -> "09:30". Short input is completed on blur. */
+declare function formatTime24h(raw: string): string;
+/** `.oc-time-input`: 24h text field (pattern HH:mm) with optional datalist suggestions. */
+declare const TimeInput: react.ForwardRefExoticComponent<TimeInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface TimelineEntry {
+    /** Year or date label. */
+    date: ReactNode;
+    /** Machine-readable date; renders a <time> when set. */
+    dateTime?: string;
+    title?: ReactNode;
+    text?: ReactNode;
+    /** Marks the latest entry (filled dot). */
+    current?: boolean;
+}
+interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
+    items: TimelineEntry[];
+    /** More space between entries. */
+    size?: "default" | "lg";
+    /** Line in the accent color. */
+    accent?: boolean;
+}
+/** `<ol class="oc-timeline">` with dated entries. Use `className="oc-accent--green"` for another accent. */
+declare const Timeline: react.ForwardRefExoticComponent<TimelineProps & react.RefAttributes<HTMLOListElement>>;
+
+type ToastVariant = "success" | "error" | "warning" | "info";
+interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    variant?: ToastVariant;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Custom status glyph (defaults per variant). */
+    icon?: ReactNode;
+    /** Shows the dismiss button. */
+    onDismiss?: () => void;
+    dismissLabel?: string;
+}
+/** One `.oc-toast` notification (`role="alert"` for errors, `status` otherwise). */
+declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLDivElement>>;
+/** `.oc-toast-container` (fixed bottom right; `top` or `static` for in-flow). */
+declare const ToastContainer: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    top?: boolean;
+    static?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+interface ToastOptions {
+    variant?: ToastVariant;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Auto-dismiss after ms (default 5000). Use 0 to keep the toast until dismissed. */
+    duration?: number;
+}
+interface ToastApi {
+    /** Queue a toast; returns its id. */
+    toast: (options: ToastOptions) => number;
+    dismiss: (id?: number) => void;
+}
+interface ToastProviderProps {
+    children?: ReactNode;
+    /** Stack at the top instead of the bottom. */
+    top?: boolean;
+    /** Default auto-dismiss in ms (default 5000). */
+    duration?: number;
+    /** Maximum toasts shown at once (oldest are dropped; default 5). */
+    limit?: number;
+}
+/** Holds the toast queue and renders the fixed `.oc-toast-container`. Use `useToast()` below it. */
+declare function ToastProvider({ children, top, duration, limit }: ToastProviderProps): react.JSX.Element;
+/** `const { toast, dismiss } = useToast()`: needs a surrounding `<ToastProvider>`. */
+declare function useToast(): ToastApi;
+
+interface ToggleFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "role"> {
+    label: ReactNode;
+    description?: ReactNode;
+    /** Bordered box. */
+    card?: boolean;
+    /** Switch first, text after it. */
+    reverse?: boolean;
+    /** Class for the row (`className` goes to the input). */
+    fieldClassName?: string;
+}
+/** `.oc-toggle-field`: the whole row is the label, so clicking the text flips the switch. */
+declare const ToggleField: react.ForwardRefExoticComponent<ToggleFieldProps & react.RefAttributes<HTMLInputElement>>;
+
+interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, "content"> {
+    /** Tooltip text (`data-tooltip`). */
+    content: string;
+    children: ReactNode;
+}
+/** `<span class="oc-tooltip" data-tooltip>`: CSS-only tooltip around its children. */
+declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLSpanElement>>;
+
+type TopProgressTone = "default" | "success" | "warning" | "danger" | "brand";
+interface TopProgressProps extends ProgressHTMLAttributes<HTMLProgressElement> {
+    /** Show the bar (a request or page load is running). Default true. */
+    active?: boolean;
+    tone?: TopProgressTone;
+    /** 4px instead of 2px. */
+    large?: boolean;
+    /** In the normal flow (e.g. inside a card) instead of fixed at the top. */
+    static?: boolean;
+    /** Fade-out time in ms before the bar is hidden. */
+    fadeMs?: number;
+}
+/** `progress.oc-top-progress`: thin loading bar at the top of the page. */
+declare const TopProgress: react.ForwardRefExoticComponent<TopProgressProps & react.RefAttributes<HTMLProgressElement>>;
+
+interface TreeItem {
+    label: ReactNode;
+    /** Leaf link target (renders the label as `a.oc-tree-label`). */
+    href?: string;
+    icon?: ReactNode;
+    count?: ReactNode;
+    actions?: ReactNode;
+    /** Child items: makes this item a folder. */
+    children?: TreeItem[];
+    /** Folder starts open. */
+    open?: boolean;
+    /** Current / selected item. */
+    current?: boolean;
+    muted?: boolean;
+}
+interface TreeProps extends HTMLAttributes<HTMLDivElement> {
+    items: TreeItem[];
+    /** Sticky root row content (label), with optional `headActions`. */
+    head?: ReactNode;
+    headActions?: ReactNode;
+    /** Actions only show on hover / focus. */
+    quiet?: boolean;
+    /** No card frame. */
+    flush?: boolean;
+}
+/** `.oc-tree`: nested tree list with a sticky action column. */
+declare const Tree: react.ForwardRefExoticComponent<TreeProps & react.RefAttributes<HTMLDivElement>>;
+
+interface UpgradeBannerUsage {
+    label: ReactNode;
+    value: number;
+    max: number;
+}
+interface UpgradeBannerProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title: ReactNode;
+    /** Plan pill next to the title, e.g. "Free". */
+    plan?: ReactNode;
+    /** Explanation; also accepted as children. */
+    text?: ReactNode;
+    usage?: UpgradeBannerUsage;
+    icon?: ReactNode;
+    actions?: ReactNode;
+    premium?: boolean;
+    compact?: boolean;
+    onDismiss?: () => void;
+    dismissLabel?: string;
+}
+/** `.oc-upgrade-banner`: free-plan limits callout with an upgrade action. */
+declare const UpgradeBanner: react.ForwardRefExoticComponent<UpgradeBannerProps & react.RefAttributes<HTMLElement>>;
+
+interface UserProps extends HTMLAttributes<HTMLDivElement> {
+    name: ReactNode;
+    email?: ReactNode;
+    /** Initials shown in the avatar. */
+    initials?: string;
+    /** Avatar image URL (wins over initials). */
+    avatarSrc?: string;
+    avatarSize?: AvatarSize;
+}
+/** `.oc-user`: avatar with name and e-mail. */
+declare const User: react.ForwardRefExoticComponent<UserProps & react.RefAttributes<HTMLDivElement>>;
+
+interface VersionBannerProps extends HTMLAttributes<HTMLDivElement> {
+    /** The new version, e.g. "v0.6.0". Empty = no banner. */
+    version?: string | null;
+    /** Long text; default "New version (vX) available - reload the page". */
+    text?: ReactNode;
+    /** Short text below 40rem; default "New version". */
+    short?: ReactNode;
+    actionLabel?: ReactNode;
+    /** Custom reload; without it the action is a plain link to the current page. */
+    onReload?: () => void;
+    tone?: "warning" | "info" | "success";
+    floating?: boolean;
+}
+/** `.oc-version-banner`: "new version available - reload" chip. */
+declare const VersionBanner: react.ForwardRefExoticComponent<VersionBannerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface BlockAboutTimelineProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    eyebrow?: ReactNode;
+    /** Heading; wrap a part in `<span className="oc-text-gradient">`. */
+    title: ReactNode;
+    /** Paragraphs (or any content) below the title. */
+    children?: ReactNode;
+    timeline?: TimelineEntry[];
+    /** Picture URL; without it the media is an accent gradient. */
+    image?: string;
+    imageAlt?: string;
+    /** Badge on the picture (e.g. <><strong>12+</strong>years</>). */
+    badge?: ReactNode;
+    /** Picture on the right. */
+    reverse?: boolean;
+}
+/** `.oc-block-about`: picture next to the company story with a year timeline. */
+declare const BlockAboutTimeline: react.ForwardRefExoticComponent<BlockAboutTimelineProps & react.RefAttributes<HTMLElement>>;
+
+interface AppHeaderNavItem {
+    label: ReactNode;
+    href: string;
+    current?: boolean;
+}
+interface BlockAppHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Id of the sidebar toggle checkbox (see BlockAppShell). Omit to hide the toggle button. */
+    toggleFor?: string;
+    toggleLabel?: string;
+    /** Module navigation links. */
+    nav?: AppHeaderNavItem[];
+    navLabel?: string;
+    /** Right-aligned actions: theme switch, switchers, user menu. */
+    actions?: ReactNode;
+    /** Optional page title (`oc-block-appbar-title`). */
+    title?: ReactNode;
+}
+/** `.oc-block-appbar`: top bar with sidebar toggle, module navigation and actions. */
+declare const BlockAppHeader: react.ForwardRefExoticComponent<BlockAppHeaderProps & react.RefAttributes<HTMLElement>>;
+
+interface BlockAppShellProps extends HTMLAttributes<HTMLDivElement> {
+    /** A `<Sidebar>`; rendered as the first grid child. */
+    sidebar: ReactNode;
+    /** A `<BlockAppHeader toggleFor={toggleId}>`. */
+    header?: ReactNode;
+    /** Breadcrumb strip under the header bar. */
+    breadcrumbs?: BreadcrumbItemData[];
+    /** Id of the collapse checkbox; pass the same value to `BlockAppHeader`'s `toggleFor`. */
+    toggleId?: string;
+    /** Shell height (`--oc-block-shell-height`, default 100dvh). */
+    height?: string;
+}
+/** `.oc-block-shell`: sidebar, header bar, breadcrumb strip and the scrolling content. */
+declare const BlockAppShell: react.ForwardRefExoticComponent<BlockAppShellProps & react.RefAttributes<HTMLDivElement>>;
+
+interface BlockAuthProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onSubmit"> {
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    submitLabel?: ReactNode;
+    /** Label of the secondary (social) button; omit to hide it together with the divider. */
+    socialLabel?: ReactNode;
+    dividerLabel?: ReactNode;
+    /** Text under the card, e.g. `Don't have an account? <a href="#">Sign up</a>`. */
+    footer?: ReactNode;
+    onSubmit?: (values: {
+        email: string;
+        password: string;
+    }) => void;
+    onSocial?: () => void;
+}
+/** `.oc-block-auth`: sign-in card with e-mail, password and an optional social button. */
+declare const BlockAuth: react.ForwardRefExoticComponent<BlockAuthProps & react.RefAttributes<HTMLDivElement>>;
+
+interface BlockAuthSplitProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onSubmit"> {
+    /** Brand link content (icon + name). */
+    logo?: ReactNode;
+    logoHref?: string;
+    quote?: ReactNode;
+    quoteAuthor?: ReactNode;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    submitLabel?: ReactNode;
+    forgotHref?: string;
+    forgotLabel?: ReactNode;
+    rememberLabel?: ReactNode;
+    onSubmit?: (values: {
+        email: string;
+        password: string;
+        remember: boolean;
+    }) => void;
+}
+/** `.oc-block-authsplit`: brand panel (logo, quote) next to the sign-in form. */
+declare const BlockAuthSplit: react.ForwardRefExoticComponent<BlockAuthSplitProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ContactGridLine {
+    text: ReactNode;
+    /** Makes the line a link (mailto:, tel:, https:). */
+    href?: string;
+}
+interface ContactGridCard {
+    title: ReactNode;
+    lines: ContactGridLine[];
+    /** Glyph in a soft product mark. */
+    icon?: ReactNode;
+    /** Accent preset of the mark (green, violet, ...). */
+    accent?: string;
+    /** Renders the card as <address>. */
+    address?: boolean;
+}
+interface BlockContactGridProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    eyebrow?: ReactNode;
+    title?: ReactNode;
+    lead?: ReactNode;
+    cards: ContactGridCard[];
+    /** No card frames. */
+    plain?: boolean;
+}
+/** `.oc-block-contact`: contact info cards (e-mail, phone, address, hours). */
+declare const BlockContactGrid: react.ForwardRefExoticComponent<BlockContactGridProps & react.RefAttributes<HTMLElement>>;
+
+interface BlockCtaProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+}
+/** `.oc-block-cta`: call to action banner. */
+declare const BlockCta: react.ForwardRefExoticComponent<BlockCtaProps & react.RefAttributes<HTMLDivElement>>;
+
+interface BlockDataTableProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Header buttons (export, new...). */
+    actions?: ReactNode;
+    /** Search + filters row (`oc-table-toolbar`). Use `BlockDataTableSpacer` to push items right. */
+    toolbar?: ReactNode;
+    /** Selection bar, shown by you when rows are selected (`oc-block-datatable-bulk`). */
+    bulk?: ReactNode;
+    /** Entries text, page-size select and pagination (`oc-table-footer`). */
+    footer?: ReactNode;
+    /** The `<Table>`. */
+    children?: ReactNode;
+}
+/** `.oc-card.oc-block-datatable`: card with header, toolbar, table, bulk bar and footer. */
+declare const BlockDataTable: react.ForwardRefExoticComponent<BlockDataTableProps & react.RefAttributes<HTMLElement>>;
+/** `.oc-table-toolbar-spacer`: pushes the following toolbar items to the right. */
+declare function BlockDataTableSpacer(): react.JSX.Element;
+/** `.oc-filter-pills` group. */
+declare function FilterPills({ className, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+/** `a.oc-filter-pill` (set `current` for the active filter). */
+declare function FilterPill({ current, className, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement> & {
+    current?: boolean;
+}): react.JSX.Element;
+
+interface FaqItem {
+    question: ReactNode;
+    answer: ReactNode;
+}
+interface BlockFaqProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    lead?: ReactNode;
+    items: FaqItem[];
+    /** Index of the item that starts open (default 0, -1 = none). */
+    openIndex?: number;
+    /** Closing line, e.g. "Still have questions?" + a link. */
+    more?: ReactNode;
+    /** Head left, questions right. */
+    split?: boolean;
+    /** Name of the details group (one open at a time). Generated when empty. */
+    name?: string;
+}
+/** `.oc-block-faq`: title + exclusive accordion on native <details name>. */
+declare const BlockFaq: react.ForwardRefExoticComponent<BlockFaqProps & react.RefAttributes<HTMLElement>>;
+
+interface Feature {
+    /** Glyph, emoji or inline SVG. */
+    icon?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+}
+interface BlockFeaturesProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    features: Feature[];
+}
+/** `.oc-block-features`: heading plus a grid of feature cards. */
+declare const BlockFeatures: react.ForwardRefExoticComponent<BlockFeaturesProps & react.RefAttributes<HTMLDivElement>>;
+
+interface FooterLink {
+    label: ReactNode;
+    href: string;
+}
+interface FooterColumn {
+    title: ReactNode;
+    links: FooterLink[];
+}
+interface BlockFooterProps extends HTMLAttributes<HTMLDivElement> {
+    columns: FooterColumn[];
+    /** Left text of the bottom bar. */
+    copyright?: ReactNode;
+    /** Right text of the bottom bar. */
+    credit?: ReactNode;
+}
+/** `.oc-block-footer`: multi-column site footer. */
+declare const BlockFooter: react.ForwardRefExoticComponent<BlockFooterProps & react.RefAttributes<HTMLDivElement>>;
+
+interface BlockFormPageProps extends FormHTMLAttributes<HTMLFormElement> {
+    /** Sticky action bar content (cancel + save buttons). */
+    actions?: ReactNode;
+}
+/** `form.oc-block-formpage`: collapsible sections (children) with a sticky action bar. */
+declare const BlockFormPage: react.ForwardRefExoticComponent<BlockFormPageProps & react.RefAttributes<HTMLFormElement>>;
+/** `.oc-block-formpage-grid`: two-column field grid from 40rem. */
+declare function BlockFormPageGrid({ className, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+
+interface BlockHeroProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Small badge above the headline. */
+    badge?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Buttons row (`oc-block-hero-actions`). */
+    actions?: ReactNode;
+}
+/** `.oc-block-hero`: centered hero with badge, headline, text and actions. */
+declare const BlockHero: react.ForwardRefExoticComponent<BlockHeroProps & react.RefAttributes<HTMLDivElement>>;
+
+interface HeroTile {
+    glyph: ReactNode;
+    accent: string;
+    style: CSSProperties;
+}
+interface BlockHeroCodeProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    eyebrow?: ReactNode;
+    /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
+    title: ReactNode;
+    lead?: ReactNode;
+    /** Buttons (usually two `oc-btn--gradient` / `oc-btn--glass` links). */
+    actions?: ReactNode;
+    /** File name in the code window bar. */
+    codeTitle?: ReactNode;
+    /** Code shown in the window. */
+    code: string;
+    /** Floating icon tiles (accent name from the accent palette + position style). */
+    tiles?: HeroTile[];
+}
+/** Landing hero: eyebrow, display title, lead, buttons and a code window with floating icon tiles. */
+declare const BlockHeroCode: react.ForwardRefExoticComponent<BlockHeroCodeProps & react.RefAttributes<HTMLElement>>;
+
+interface HeroOrbitMark {
+    glyph: ReactNode;
+    /** Accent preset (green, violet, orange, cyan, red, yellow, blue). */
+    accent: string;
+}
+interface BlockHeroOrbitProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    eyebrow?: ReactNode;
+    /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
+    title: ReactNode;
+    lead?: ReactNode;
+    actions?: ReactNode;
+    /** Marks on the ring; they are spread evenly. */
+    marks?: HeroOrbitMark[];
+    codeTitle?: ReactNode;
+    code?: string;
+    /** Replaces the code window in the center. Give it className="oc-block-orbit-center". */
+    center?: ReactNode;
+    /** One turn, e.g. "30s" (default 60s). */
+    duration?: string;
+}
+/** Hero with a code window and product marks that orbit around it. */
+declare const BlockHeroOrbit: react.ForwardRefExoticComponent<BlockHeroOrbitProps & react.RefAttributes<HTMLElement>>;
+
+interface BlockHeroSplitProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    /** Right column (image, screenshot, placeholder). */
+    visual?: ReactNode;
+}
+/** `.oc-block-hero-split`: text on the left, visual on the right. */
+declare const BlockHeroSplit: react.ForwardRefExoticComponent<BlockHeroSplitProps & react.RefAttributes<HTMLDivElement>>;
+
+interface BlockModuleHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Inline SVG in the icon tile. */
+    icon?: ReactNode;
+    title: ReactNode;
+    intro?: ReactNode;
+    /** Badges under the title. */
+    meta?: ReactNode;
+    /** Buttons below the band (back link, primary action). */
+    actions?: ReactNode;
+}
+/** `.oc-block-modulehead`: page header with icon tile, title, intro, meta badges and actions. */
+declare const BlockModuleHeader: react.ForwardRefExoticComponent<BlockModuleHeaderProps & react.RefAttributes<HTMLElement>>;
+
+interface BlockPageHeroProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+}
+/** `.oc-hero`: page header with eyebrow, title, text and actions. */
+declare const BlockPageHero: react.ForwardRefExoticComponent<BlockPageHeroProps & react.RefAttributes<HTMLElement>>;
+
+type PortfolioGridProject = ProjectCardProps & {
+    /** Accent preset for the card (green, violet, ...). */
+    accent?: string;
+};
+interface BlockPortfolioGridProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    eyebrow?: ReactNode;
+    /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
+    title: ReactNode;
+    lead?: ReactNode;
+    /** Link at the right of the head, e.g. <LinkArrow href="/work">All projects</LinkArrow>. */
+    link?: ReactNode;
+    projects: PortfolioGridProject[];
+    /** Wider cards. */
+    two?: boolean;
+}
+/** `.oc-block-portfolio`: heading plus a grid of project cards. */
+declare const BlockPortfolioGrid: react.ForwardRefExoticComponent<BlockPortfolioGridProps & react.RefAttributes<HTMLElement>>;
+
+interface PricingPlan {
+    name: ReactNode;
+    description?: ReactNode;
+    price: ReactNode;
+    /** e.g. `/month` */
+    period?: ReactNode;
+    features: ReactNode[];
+    /** Highlighted plan (`oc-block-pricing-card--featured`, primary button). */
+    featured?: boolean;
+    /** Button label. */
+    action: ReactNode;
+    /** Renders the action as a link when set. */
+    href?: string;
+    onAction?: () => void;
+}
+interface BlockPricingProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    plans: PricingPlan[];
+}
+/** `.oc-block-pricing`: pricing cards with a featured plan. */
+declare const BlockPricing: react.ForwardRefExoticComponent<BlockPricingProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ProcessStep {
+    title: ReactNode;
+    text?: ReactNode;
+}
+interface BlockProcessProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    eyebrow?: ReactNode;
+    /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
+    title: ReactNode;
+    steps: ProcessStep[];
+    /** Items of the endless marquee (strings). The list is repeated once for the seamless loop. */
+    marquee?: string[];
+    marqueeLabel?: string;
+}
+/** Numbered steps (CSS counter) plus an optional marquee of technologies. */
+declare const BlockProcess: react.ForwardRefExoticComponent<BlockProcessProps & react.RefAttributes<HTMLElement>>;
+
+interface Product {
+    href: string;
+    /** Accent name (`green`, `orange`, `violet`, `cyan`, ...), applied as `oc-accent--{accent}`. */
+    accent?: string;
+    /** Glyph or inline SVG in the icon tile. */
+    icon?: ReactNode;
+    /** Pill label (`Own product`, `Tool`...). */
+    pill?: ReactNode;
+    name: ReactNode;
+    tagline?: ReactNode;
+    summary?: ReactNode;
+    /** "Discover ..." link text. */
+    more?: ReactNode;
+}
+interface BlockProductGridProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    eyebrow?: ReactNode;
+    /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
+    title: ReactNode;
+    products: Product[];
+}
+/** Section title plus a grid of accent-colored product cards. */
+declare const BlockProductGrid: react.ForwardRefExoticComponent<BlockProductGridProps & react.RefAttributes<HTMLElement>>;
+
+interface ProfileHeaderTab {
+    label: ReactNode;
+    href: string;
+    current?: boolean;
+}
+interface BlockProfileHeaderProps extends HTMLAttributes<HTMLElement> {
+    name: ReactNode;
+    meta?: ReactNode;
+    bio?: ReactNode;
+    /** Initials, or an <img> for the avatar. */
+    avatar: ReactNode;
+    /** Banner image URL; without it the banner is an accent gradient. */
+    banner?: string;
+    actions?: ReactNode;
+    tabs?: ProfileHeaderTab[];
+    tabsLabel?: string;
+    compact?: boolean;
+    /** Heading level of the name (h1 on a profile page, h2 inside a page). */
+    headingLevel?: 1 | 2;
+}
+/** `.oc-block-profile`: banner, overhanging avatar, name, meta, actions and link tabs. */
+declare const BlockProfileHeader: react.ForwardRefExoticComponent<BlockProfileHeaderProps & react.RefAttributes<HTMLElement>>;
+
+interface ShowcaseProject {
+    href: string;
+    accent?: string;
+    /** CSS `background` of the browser frame body (e.g. a gradient of palette variables) or an image URL via `image`. */
+    background?: string;
+    image?: string;
+    imageAlt?: string;
+    pill?: ReactNode;
+    name: ReactNode;
+    summary?: ReactNode;
+    more?: ReactNode;
+}
+interface BlockShowcaseProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    eyebrow?: ReactNode;
+    /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
+    title: ReactNode;
+    projects: ShowcaseProject[];
+    /** Minimum card width (`--oc-card-min`, default 26rem). */
+    cardMin?: string;
+}
+/** Portfolio grid: project cards with a browser frame around the screenshot. */
+declare const BlockShowcase: react.ForwardRefExoticComponent<BlockShowcaseProps & react.RefAttributes<HTMLElement>>;
+
+interface SiteFooterColumn {
+    title: ReactNode;
+    /** Link list column. */
+    links?: FooterLink[];
+    /** Address column: children are rendered in an `<address class="oc-site-footer__list">`. */
+    address?: ReactNode;
+}
+interface BlockSiteFooterProps extends Omit<HTMLAttributes<HTMLElement>, "about"> {
+    /** Brand link content, e.g. icon tile + name (rendered in `oc-site-header__brand`). */
+    brand: ReactNode;
+    brandHref?: string;
+    about?: ReactNode;
+    columns: SiteFooterColumn[];
+    copyright?: ReactNode;
+    credit?: ReactNode;
+}
+/** `.oc-site-footer`: brand column, link columns and a bottom bar. */
+declare const BlockSiteFooter: react.ForwardRefExoticComponent<BlockSiteFooterProps & react.RefAttributes<HTMLElement>>;
+
+interface SiteHeaderLink {
+    label: ReactNode;
+    href: string;
+    current?: boolean;
+}
+interface BlockSiteHeaderProps extends HTMLAttributes<HTMLElement> {
+    /** Brand link content, e.g. icon tile + name. */
+    brand: ReactNode;
+    brandHref?: string;
+    links: SiteHeaderLink[];
+    /** Trailing call to action inside the nav (e.g. a `ButtonLink` with `variant="gradient"`). */
+    cta?: ReactNode;
+    /** Accessible name of the mobile menu button. */
+    menuLabel?: string;
+}
+/** `.oc-site-header`: sticky header, mobile menu on a native popover (no JavaScript). */
+declare const BlockSiteHeader: react.ForwardRefExoticComponent<BlockSiteHeaderProps & react.RefAttributes<HTMLElement>>;
+
+interface SpotlightModule {
+    icon?: ReactNode;
+    label: ReactNode;
+}
+interface BlockSpotlightProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Accent name (`green`, `violet`...), applied as `oc-accent--{accent}`. */
+    accent?: string;
+    /** Pill text (with a status dot). */
+    badge?: ReactNode;
+    /** Glyph or SVG in the big icon tile. */
+    icon?: ReactNode;
+    title: ReactNode;
+    tagline?: ReactNode;
+    lead?: ReactNode;
+    /** Call to action (e.g. a `ButtonLink` with `variant="gradient" size="lg"`). */
+    action?: ReactNode;
+    modules?: SpotlightModule[];
+}
+/** `.oc-spotlight`: highlighted flagship product with a module list. */
+declare const BlockSpotlight: react.ForwardRefExoticComponent<BlockSpotlightProps & react.RefAttributes<HTMLElement>>;
+
+interface Stat {
+    value: ReactNode;
+    label: ReactNode;
+}
+interface BlockStatsProps extends HTMLAttributes<HTMLDivElement> {
+    stats: Stat[];
+}
+/** `.oc-block-stats`: key figures row. */
+declare const BlockStats: react.ForwardRefExoticComponent<BlockStatsProps & react.RefAttributes<HTMLDivElement>>;
+
+interface CounterStat {
+    to: number;
+    suffix?: string;
+    label: ReactNode;
+}
+interface BlockStatsCounterProps extends HTMLAttributes<HTMLDivElement> {
+    stats: CounterStat[];
+}
+/** `.oc-block-stats` whose values count up when scrolled into view (CSS only). */
+declare const BlockStatsCounter: react.ForwardRefExoticComponent<BlockStatsCounterProps & react.RefAttributes<HTMLDivElement>>;
+
+interface TeamMember {
+    name: ReactNode;
+    email?: ReactNode;
+    initials?: string;
+    avatarSrc?: string;
+    /** Role / status badge text. */
+    role?: ReactNode;
+    roleVariant?: BadgeVariant;
+    /** Row action menu content (`DropdownItem`s). Adds a "..." trigger when set. */
+    menu?: ReactNode;
+    menuLabel?: string;
+}
+interface BlockTeamListProps extends HTMLAttributes<HTMLDivElement> {
+    members: TeamMember[];
+}
+/** `.oc-block-team`: member rows with avatar, role badge and a row action menu. */
+declare const BlockTeamList: react.ForwardRefExoticComponent<BlockTeamListProps & react.RefAttributes<HTMLDivElement>>;
+
+interface BlockTwoFactorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSubmit"> {
+    /** QR code image / svg; a labelled placeholder box is rendered when omitted. */
+    qr?: ReactNode;
+    setupKey: string;
+    recoveryCodes?: string[];
+    codeLength?: number;
+    /** Called with the entered code when the form is submitted. */
+    onSubmit?: (code: string) => void;
+    submitLabel?: ReactNode;
+}
+/** `.oc-block-twofactor`: authenticator setup with QR, copyable key, OTP input and recovery codes. */
+declare const BlockTwoFactor: react.ForwardRefExoticComponent<BlockTwoFactorProps & react.RefAttributes<HTMLDivElement>>;
+
+interface WizardStep {
+    label: ReactNode;
+    /** Step content (only the active step is rendered). */
+    content: ReactNode;
+}
+interface BlockWizardDialogProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "open" | "onClose" | "title">, DialogState {
+    steps: WizardStep[];
+    /** Active step (0-based, controlled). */
+    step?: number;
+    defaultStep?: number;
+    onStepChange?: (step: number) => void;
+    /** Called when "Finish" is pressed on the last step. */
+    onFinish?: () => void;
+    backLabel?: ReactNode;
+    nextLabel?: ReactNode;
+    finishLabel?: ReactNode;
+    /** Text under the title; defaults to `Step {n} of {total}`. */
+    description?: ReactNode;
+    stepperLabel?: string;
+}
+/** `dialog.oc-modal` wizard: stepper rail on the left, step content and Back / Next footer. */
+declare const BlockWizardDialog: react.ForwardRefExoticComponent<BlockWizardDialogProps & react.RefAttributes<HTMLDialogElement>>;
+
+export { Accordion, AccordionAccent, AccordionAccentMeta, type AccordionAccentPreset, type AccordionAccentProps, type AccordionAccentTone, AccordionItem, type AccordionItemProps, AffixInput, type AffixInputProps, type AffixInputVariant, Alert, AlertDialog, type AlertDialogProps, type AlertDialogType, type AlertProps, type AlertVariant, AlphaTabs, type AlphaTabsProps, type AppHeaderNavItem, Attachment, type AttachmentFile, AttachmentImage, type AttachmentImageProps, AttachmentList, type AttachmentListProps, type AttachmentProps, AttachmentThumb, type AttachmentThumbProps, type AttachmentType, Avatar, AvatarGroup, type AvatarProps, type AvatarSize, BackLink, Badge, type BadgeProps, type BadgeVariant, BarcodeInput, type BarcodeInputProps, BlockAboutTimeline, type BlockAboutTimelineProps, BlockAppHeader, type BlockAppHeaderProps, BlockAppShell, type BlockAppShellProps, BlockAuth, type BlockAuthProps, BlockAuthSplit, type BlockAuthSplitProps, BlockContactGrid, type BlockContactGridProps, BlockCta, type BlockCtaProps, BlockDataTable, type BlockDataTableProps, BlockDataTableSpacer, BlockFaq, type BlockFaqProps, BlockFeatures, type BlockFeaturesProps, BlockFooter, type BlockFooterProps, BlockFormPage, BlockFormPageGrid, type BlockFormPageProps, BlockHero, BlockHeroCode, type BlockHeroCodeProps, BlockHeroOrbit, type BlockHeroOrbitProps, type BlockHeroProps, BlockHeroSplit, type BlockHeroSplitProps, BlockModuleHeader, type BlockModuleHeaderProps, BlockPageHero, type BlockPageHeroProps, BlockPortfolioGrid, type BlockPortfolioGridProps, BlockPricing, type BlockPricingProps, BlockProcess, type BlockProcessProps, BlockProductGrid, type BlockProductGridProps, BlockProfileHeader, type BlockProfileHeaderProps, BlockShowcase, type BlockShowcaseProps, BlockSiteFooter, type BlockSiteFooterProps, BlockSiteHeader, type BlockSiteHeaderProps, BlockSpotlight, type BlockSpotlightProps, BlockStats, BlockStatsCounter, type BlockStatsCounterProps, type BlockStatsProps, BlockTeamList, type BlockTeamListProps, BlockTwoFactor, type BlockTwoFactorProps, BlockWizardDialog, type BlockWizardDialogProps, Breadcrumb, type BreadcrumbItemData, type BreadcrumbProps, BrowserFrame, type BrowserFrameProps, BusyOverlay, type BusyOverlayProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartLine, type ChartLineProps, type ChartLineSeries, ChatComposer, type ChatComposerProps, Checkbox, type CheckboxProps, Checklist, ChecklistItem, type ChecklistItemProps, type ChecklistProps, ChipFilter, type ChipFilterOption, type ChipFilterProps, Collapsible, type CollapsibleProps, ColorField, type ColorFieldProps, ColorSelect, type ColorSelectOption, type ColorSelectProps, ColumnMenu, type ColumnMenuColumn, type ColumnMenuProps, Command, type CommandGroupData, type CommandItemData, type CommandProps, ConfirmDialog, type ConfirmDialogProps, type ConsentChoice, type ContactGridCard, type ContactGridLine, type CookieCategory, CookieConsent, type CookieConsentProps, CopyField, type CopyFieldProps, Counter, type CounterProps, type CounterStat, DataTable, type DataTableColumn, type DataTableProps, type DataTableRow, DecimalInput, type DecimalInputProps, type DefinitionItem, DefinitionList, type DefinitionListProps, DialogContext, type DialogState, DocViewer, type DocViewerItem, type DocViewerProps, Dropdown, DropdownItem, DropdownLabel, type DropdownProps, DropdownSeparator, Dropzone, type DropzoneProps, type EmojiGroup, EmojiPicker, type EmojiPickerProps, EmptyState, type EmptyStateProps, EntityCard, type EntityCardProps, FactList, type FactListProps, type FactListRow, type FaqItem, type Feature, FieldGroup, FilterCounts, type FilterCountsOption, type FilterCountsProps, FilterPill, FilterPills, FlipCard, type FlipCardProps, type FooterColumn, type FooterLink, FormField, type FormFieldProps, Greeting, type GreetingProps, type GreetingTimeOfDay, Heading, type HeadingProps, type HeroOrbitMark, type HeroTile, Icon, type IconProps, ImageZoom, type ImageZoomProps, Input, InputGroup, type InputGroupProps, type InputProps, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, LauncherCard, type LauncherCardProps, Lightbox, type LightboxImage, type LightboxProps, LinkArrow, type LinkArrowDirection, type LinkArrowProps, ListToolbar, type ListToolbarProps, type ListToolbarView, Marquee, type MarqueeProps, MediaCard, type MediaCardProps, MediaRow, MediaRowList, type MediaRowListProps, type MediaRowProps, MediaThumb, type MediaThumbProps, Message, type MessageAction, type MessageAttachment, MessageAttachments, type MessageData, MessageDivider, type MessageDividerProps, MessageList, type MessageListItem, type MessageListProps, type MessageProps, MessageThread, type MessageThreadProps, Modal, ModalClose, type ModalProps, type ModalSize, Navmenu, NavmenuDropdown, type NavmenuDropdownProps, NavmenuItem, NavmenuLink, type NavmenuLinkProps, type NavmenuProps, NextTeaser, type NextTeaserProps, NumberInput, type NumberInputProps, OtpInput, type OtpInputProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PasswordRequirements, type PasswordRequirementsProps, type PasswordRule, type PhoneCountry, PhoneInput, type PhoneInputProps, Popover, type PopoverProps, type PortfolioGridProject, PriceCard, type PriceCardFeature, type PriceCardPrice, type PriceCardProps, type PricingPlan, type ProcessStep, type Product, ProductMark, type ProductMarkAccent, type ProductMarkProps, type ProductMarkSize, type ProfileHeaderTab, Progress, type ProgressProps, ProjectCard, type ProjectCardProps, Prose, ProseLead, type ProseProps, RecoveryCodes, type RecoveryCodesProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectOption, type SelectProps, SeverityCard, type SeverityCardProps, type SeverityLevel, Sheet, type SheetProps, type SheetSide, type ShowcaseProject, Sidebar, SidebarCollapsible, type SidebarCollapsibleProps, SidebarGroup, type SidebarGroupProps, SidebarMenu, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuItem, type SidebarProps, SidebarSeparator, type SiteFooterColumn, type SiteHeaderLink, Skeleton, type SkeletonProps, SortableRow, type SortableRowProps, type SpotlightModule, StackCard, type StackCardProps, StackList, type StackListItem, type StackListProps, type Stat, StatCard, StatCardGrid, type StatCardProps, Stepper, type StepperProps, type StepperStep, Switch, type SwitchProps, type TabItem, Table, TableActionIcon, type TableActionTone, TableActions, TableActionsMenu, type TableActionsMenuProps, TableCompact, type TableCompactColumn, type TableCompactProps, TableEmpty, type TableProps, TableRowAction, TableSort, type TableSortProps, Tabs, type TabsProps, TagInput, type TagInputProps, type TeamMember, TerminalLog, type TerminalLogLevel, type TerminalLogLine, type TerminalLogProps, Textarea, type TextareaProps, type ThemeMode, ThemeSwitch, type ThemeSwitchProps, type ThreadMenuItem, type ThreadParticipant, TimeInput, type TimeInputProps, Timeline, type TimelineEntry, type TimelineProps, Toast, ToastContainer, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleField, type ToggleFieldProps, Tooltip, type TooltipProps, TopProgress, type TopProgressProps, type TopProgressTone, Tree, type TreeItem, type TreeProps, UpgradeBanner, type UpgradeBannerProps, type UpgradeBannerUsage, User, type UserProps, VersionBanner, type VersionBannerProps, type WizardStep, attachmentMeta, attrs, buttonClass, callAll, chartLinePath, closeMenuOf, cx, defaultPasswordRules, formatDecimal, formatPhoneNational, formatTime24h, greetingTimeOfDay, handleMenuKeyDown, menuItems, mod, niceMax, parseDecimal, useControllable, useDialog, useDialogContext, useMenuAutofocus, useMergedRef, useToast };