@coderabbitai/carrot-ui 0.1.19

package/dist/index.d.ts

@@ -0,0 +1,1821 @@
+import { Accordion as Accordion_2 } from '@base-ui/react/accordion';
+import { AlertDialog as AlertDialog_2 } from '@base-ui/react/alert-dialog';
+import { Button as Button_2 } from '@base-ui/react/button';
+import { ClassValue } from 'clsx';
+import { Column } from '@tanstack/react-table';
+import { ColumnDef } from '@tanstack/react-table';
+import { ColumnFiltersState } from '@tanstack/react-table';
+import { Command as Command_2 } from 'cmdk';
+import { ComponentProps } from 'react';
+import { ComponentType } from 'react';
+import { Dialog as Dialog_2 } from '@base-ui/react/dialog';
+import { Drawer as Drawer_2 } from '@base-ui/react/drawer';
+import { Field } from '@base-ui/react/field';
+import { forwardRef } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { Menu } from '@base-ui/react/menu';
+import { Popover as Popover_2 } from '@base-ui/react/popover';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { Row } from '@tanstack/react-table';
+import { RowSelectionState } from '@tanstack/react-table';
+import { Separator as Separator_2 } from '@base-ui/react/separator';
+import { SortingState } from '@tanstack/react-table';
+import { SVGProps } from 'react';
+import { TableOptions } from '@tanstack/react-table';
+import { Tabs as Tabs_2 } from '@base-ui/react/tabs';
+import { Tooltip as Tooltip_2 } from '@base-ui/react/tooltip';
+
+export declare const Accordion: {
+    Root: ForwardRefExoticComponent<Omit<AccordionRootProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Item: ForwardRefExoticComponent<Omit<AccordionItemProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Trigger: ForwardRefExoticComponent<Omit<AccordionTriggerProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+    Content: ForwardRefExoticComponent<Omit<AccordionContentProps, "ref"> & RefAttributes<HTMLDivElement>>;
+};
+
+export declare interface AccordionContentProps extends ComponentProps<typeof Accordion_2.Panel> {
+}
+
+export declare interface AccordionItemProps extends ComponentProps<typeof Accordion_2.Item> {
+}
+
+export declare interface AccordionRootProps extends ComponentProps<typeof Accordion_2.Root> {
+}
+
+export declare interface AccordionTriggerProps extends ComponentProps<typeof Accordion_2.Trigger> {
+    /** Icon element rendered before the label */
+    icon?: ReactNode;
+}
+
+/**
+ * Horizontal banner alert for important messages.
+ *
+ * Features a flickering pixel grid pattern on the right side that
+ * uses the intent color for brand expression. Single-line layout:
+ * icon on the left, text in the middle, optional action on the right.
+ *
+ * Links inside the text are automatically styled with an underline
+ * in the intent color.
+ */
+export declare const Alert: ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>>;
+
+export declare const AlertDialog: {
+    Root: typeof AlertDialogRoot;
+    Trigger: ForwardRefExoticComponent<Omit<AlertDialogTriggerProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+    Content: typeof AlertDialogContent;
+    Panel: ForwardRefExoticComponent<AlertDialogPanelProps & RefAttributes<HTMLDivElement>>;
+    Title: ForwardRefExoticComponent<Omit<AlertDialogTitleProps, "ref"> & RefAttributes<HTMLHeadingElement>>;
+    Description: ForwardRefExoticComponent<Omit<AlertDialogDescriptionProps, "ref"> & RefAttributes<HTMLParagraphElement>>;
+    Actions: ForwardRefExoticComponent<AlertDialogActionsProps & RefAttributes<HTMLDivElement>>;
+    Close: ForwardRefExoticComponent<Omit<AlertDialogCloseProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+};
+
+export declare interface AlertDialogActionsProps {
+    className?: string;
+    children: ReactNode;
+}
+
+export declare interface AlertDialogBackdropProps extends ComponentProps<typeof AlertDialog_2.Backdrop> {
+}
+
+export declare interface AlertDialogCloseProps extends ComponentProps<typeof AlertDialog_2.Close> {
+}
+
+declare function AlertDialogContent({ className, children, ...props }: AlertDialogContentProps): JSX.Element;
+
+export declare interface AlertDialogContentProps extends ComponentProps<typeof AlertDialog_2.Popup> {
+}
+
+export declare interface AlertDialogDescriptionProps extends ComponentProps<typeof AlertDialog_2.Description> {
+}
+
+export declare interface AlertDialogPanelProps {
+    className?: string;
+    children: ReactNode;
+}
+
+declare function AlertDialogRoot(props: AlertDialogRootProps): JSX.Element;
+
+export declare interface AlertDialogRootProps extends ComponentProps<typeof AlertDialog_2.Root> {
+}
+
+export declare interface AlertDialogTitleProps extends ComponentProps<typeof AlertDialog_2.Title> {
+}
+
+export declare interface AlertDialogTriggerProps extends ComponentProps<typeof AlertDialog_2.Trigger> {
+}
+
+export declare interface AlertProps {
+    /** Visual style variant */
+    variant?: AlertVariant;
+    /** Override the default icon */
+    icon?: ReactNode;
+    /** Action element rendered at the far right (e.g. a Button) */
+    action?: ReactNode;
+    /** Called when the dismiss button is clicked. When provided, a close button appears on the right. */
+    onDismiss?: () => void;
+    className?: string;
+    children: ReactNode;
+}
+
+export declare type AlertVariant = keyof typeof variantConfig_2;
+
+export declare const AppHeader: ReturnType<typeof forwardRef<HTMLElement, AppHeaderProps>> & {
+    Breadcrumb: typeof AppHeaderBreadcrumb;
+    Actions: typeof AppHeaderActions;
+    Avatar: typeof Avatar;
+};
+
+declare const AppHeaderActions: ForwardRefExoticComponent<AppHeaderActionsProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface AppHeaderActionsProps {
+    children: ReactNode;
+    className?: string;
+}
+
+declare function AppHeaderBreadcrumb({ items, linkComponent: LinkEl, className, }: AppHeaderBreadcrumbProps): JSX.Element;
+
+declare interface AppHeaderBreadcrumbItem {
+    label: string;
+    icon?: ReactNode;
+    href?: string;
+    selector?: boolean;
+    options?: AppHeaderBreadcrumbOption[];
+    onSelect?: (value: string) => void;
+    value?: string;
+}
+
+declare interface AppHeaderBreadcrumbOption {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+    [key: string]: unknown;
+}
+
+export declare interface AppHeaderBreadcrumbProps {
+    items: AppHeaderBreadcrumbItem[];
+    /** Custom link component (e.g. TanStack Router's Link, Next.js Link, etc.). Defaults to <a>. */
+    linkComponent?: LinkComponent;
+    className?: string;
+}
+
+export declare interface AppHeaderProps {
+    children: ReactNode;
+    className?: string;
+}
+
+/**
+ * Avatar component with image, initials, or generative pixel-grid fallback.
+ *
+ * Fallback priority: `src` > `initials` > `seed` (generative) > empty
+ *
+ * - `circle` variant for users (fully rounded)
+ * - `square` variant for organizations/workspaces (rounded corners)
+ */
+export declare function Avatar({ src, initials, seed, generativePattern, alt, variant, size, color, className, }: AvatarProps): JSX.Element;
+
+declare type AvatarColor = "neutral" | "accent" | "danger" | "warning" | "success";
+
+declare type AvatarGenerativePattern = "grid" | "symmetric" | "dense" | "quad" | "quad-dense" | "diagonal" | "sierpinski";
+
+export declare interface AvatarProps {
+    /** Image URL */
+    src?: string;
+    /** Fallback initials (1-2 characters) */
+    initials?: string;
+    /**
+     * Seed string for generative pixel-grid fallback.
+     * Used when no `src` or `initials` are provided.
+     * Each seed produces a unique deterministic pattern and color.
+     */
+    seed?: string;
+    /**
+     * Pattern variant for the generative fallback.
+     * Only used when rendering from `seed`.
+     */
+    generativePattern?: AvatarGenerativePattern;
+    /** Alt text for the image */
+    alt?: string;
+    /** Shape variant */
+    variant?: AvatarVariant;
+    /** Size */
+    size?: AvatarSize;
+    /** Color preset — automatically sets matching background and text color */
+    color?: AvatarColor;
+    className?: string;
+}
+
+export declare type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+export declare type AvatarVariant = "circle" | "square";
+
+export declare const Badge: ForwardRefExoticComponent<BadgeProps & RefAttributes<HTMLSpanElement>>;
+
+export declare interface BadgeProps {
+    variant?: BadgeVariant;
+    className?: string;
+    children: ReactNode;
+}
+
+export declare type BadgeVariant = keyof typeof variantStyles_2;
+
+/**
+ * Button component built on Base UI with Tailwind CSS styling.
+ *
+ * All variants use an animated hover layer for consistent press/hover
+ * feedback. The layer handles bg, border, and shadow - the outer button
+ * is just a layout shell.
+ */
+export declare const Button: ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & RefAttributes<HTMLElement>>;
+
+export declare interface ButtonProps extends ComponentProps<typeof Button_2> {
+    /** Visual style variant */
+    variant?: ButtonVariant;
+    /** Size of the button */
+    size?: ButtonSize;
+    /** Icon element rendered before the label */
+    iconLeft?: ReactNode;
+    /** Icon element rendered after the label */
+    iconRight?: ReactNode;
+    /** Show a loading spinner overlay */
+    loading?: boolean;
+}
+
+export declare type ButtonSize = keyof typeof sizeStyles;
+
+export declare type ButtonVariant = keyof typeof variantConfig;
+
+/**
+ * Card compound component.
+ *
+ * Use Card.Content as the first child to get consistent inner padding,
+ * then place Card.Header, Card.Body, Card.Section, or nested Cards inside it.
+ */
+export declare const Card: ReturnType<typeof forwardRef<HTMLDivElement, CardProps>> & {
+    Content: typeof CardContent;
+    Header: typeof CardHeader;
+    Body: typeof CardBody;
+    Section: typeof CardSection;
+};
+
+declare const CardBody: ForwardRefExoticComponent<CardBodyProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardBodyProps {
+    className?: string;
+    children: ReactNode;
+}
+
+/**
+ * Inner wrapper that provides consistent padding inside a Card.
+ * Put Card.Header, Card.Body, nested Cards, etc. inside this.
+ */
+declare const CardContent: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardContentProps {
+    className?: string;
+    children: ReactNode;
+}
+
+declare const CardHeader: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardHeaderProps {
+    className?: string;
+    children: ReactNode;
+}
+
+export declare interface CardProps {
+    /** Visual style variant */
+    variant?: CardVariant;
+    className?: string;
+    children: ReactNode;
+}
+
+declare const CardSection: ForwardRefExoticComponent<CardSectionProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardSectionProps {
+    className?: string;
+    children: ReactNode;
+}
+
+declare type CardVariant = keyof typeof variantStyles;
+
+/**
+ * Checkbox component built on Base UI Checkbox with Tailwind CSS styling.
+ *
+ * Supports controlled/uncontrolled usage, indeterminate state, disabled
+ * state, and an optional label. The label is clickable and toggles the
+ * checkbox. An expanded hit area (32px) makes the checkbox easier to click.
+ *
+ * Checked state uses accent color. Indeterminate state uses neutral gray
+ * to visually distinguish it from a deliberate selection.
+ */
+export declare function Checkbox({ checked, defaultChecked, onCheckedChange, indeterminate, disabled, required, size, label, name, className, }: CheckboxProps): JSX.Element;
+
+export declare interface CheckboxProps {
+    /** Whether the checkbox is ticked. Use for controlled mode. */
+    checked?: boolean;
+    /** Whether the checkbox is initially ticked. Use for uncontrolled mode. */
+    defaultChecked?: boolean;
+    /** Called when the checked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Whether the checkbox is in an indeterminate (mixed) state. */
+    indeterminate?: boolean;
+    /** Whether the checkbox is disabled. */
+    disabled?: boolean;
+    /** Whether the checkbox is required. */
+    required?: boolean;
+    /** Size of the checkbox. */
+    size?: CheckboxSize;
+    /** Optional label rendered beside the checkbox. */
+    label?: ReactNode;
+    /** Name attribute for form submission. */
+    name?: string;
+    /** Additional class name for the root element. */
+    className?: string;
+}
+
+declare type CheckboxSize = keyof typeof sizeStyles_3;
+
+export declare function cn(...inputs: ClassValue[]): string;
+
+export { Column }
+
+export { ColumnDef }
+
+export { ColumnFiltersState }
+
+/**
+ * Searchable combobox with filtering.
+ *
+ * Wraps Base UI Combobox.Root with shared Menu visual primitives.
+ * For non-searchable dropdowns, use Select instead.
+ *
+ * Supports both controlled (`value` + `onValueChange`)
+ * and uncontrolled (`defaultValue`) usage.
+ */
+export declare function Combobox({ value, defaultValue, onValueChange, items, children, className, }: ComboboxProps): ReactElement;
+
+/**
+ * Pre-styled trigger for form contexts.
+ * Renders as a Button with the selected value + chevron icon.
+ * For fully custom triggers, use ComboboxTrigger instead.
+ */
+export declare const ComboboxButton: ForwardRefExoticComponent<ComboboxButtonProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface ComboboxButtonProps {
+    /** Placeholder text shown when no value is selected */
+    placeholder?: string;
+    className?: string;
+}
+
+/**
+ * Popup with search input and a scrollable list of filtered options.
+ * Uses Base UI's render function pattern for automatic filtering.
+ */
+export declare function ComboboxContent({ align, searchPlaceholder, emptyMessage, minWidth, children, className, }: ComboboxContentProps): ReactElement;
+
+export declare interface ComboboxContentProps {
+    /** Alignment relative to trigger */
+    align?: "start" | "center" | "end";
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Minimum width of the popup */
+    minWidth?: string;
+    /**
+     * Render function for each item. Receives a ComboboxItem and should return
+     * a ComboboxOption element. When not provided, renders a default option
+     * with optional icon + label + checkmark.
+     */
+    children?: (item: ComboboxItem) => ReactNode;
+    className?: string;
+}
+
+export declare interface ComboboxItem {
+    readonly value: string;
+    readonly label: string;
+    readonly icon?: ReactNode;
+    readonly [key: string]: unknown;
+}
+
+/**
+ * Individual option in the combobox popup.
+ * Automatically includes a checkmark indicator when selected.
+ */
+export declare const ComboboxOption: ForwardRefExoticComponent<ComboboxOptionProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface ComboboxOptionProps {
+    /** Value for this option */
+    readonly value: string;
+    /** Icon element rendered before the label */
+    readonly icon?: ReactNode;
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+
+export declare interface ComboboxProps {
+    /** Controlled value */
+    readonly value?: string;
+    /** Uncontrolled default value */
+    readonly defaultValue?: string;
+    /** Called when a value is selected */
+    readonly onValueChange?: (value: string) => void;
+    /** Item data for filtering and rendering */
+    readonly items: ComboboxItem[];
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+
+/**
+ * Fully composable trigger. Renders whatever children you give it as the
+ * element that opens the combobox popup.
+ *
+ * Use ComboboxButton for button-based triggers so BaseCombobox.Trigger does
+ * not wrap a Button in another native button.
+ */
+export declare const ComboboxTrigger: ForwardRefExoticComponent<ComboboxTriggerProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface ComboboxTriggerProps {
+    children: ReactNode;
+    className?: string;
+}
+
+export declare const Command: {
+    Root: ForwardRefExoticComponent<Omit<CommandRootProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Input: ForwardRefExoticComponent<Omit<CommandInputProps, "ref"> & RefAttributes<HTMLInputElement>>;
+    List: ForwardRefExoticComponent<Omit<CommandListProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Empty: ForwardRefExoticComponent<Omit<CommandEmptyProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Group: ForwardRefExoticComponent<Omit<CommandGroupProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Item: ForwardRefExoticComponent<Omit<CommandItemProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Separator: ForwardRefExoticComponent<Omit<CommandSeparatorProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Dialog: typeof CommandDialog;
+};
+
+declare function CommandDialog({ open, onOpenChange, children, className, }: CommandDialogProps): JSX.Element;
+
+export declare interface CommandDialogProps {
+    /** Controlled open state */
+    open?: boolean;
+    /** Called when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Content for the command palette */
+    children: ReactNode;
+    className?: string;
+}
+
+export declare interface CommandEmptyProps extends ComponentProps<typeof Command_2.Empty> {
+}
+
+export declare interface CommandGroupProps extends ComponentProps<typeof Command_2.Group> {
+}
+
+export declare interface CommandInputProps extends ComponentProps<typeof Command_2.Input> {
+}
+
+export declare interface CommandItemProps extends ComponentProps<typeof Command_2.Item> {
+    /** Icon element rendered before the label */
+    icon?: ReactNode;
+    /** Keyboard shortcut hint rendered on the right */
+    shortcut?: string;
+}
+
+export declare interface CommandListProps extends ComponentProps<typeof Command_2.List> {
+}
+
+export declare interface CommandRootProps extends ComponentProps<typeof Command_2> {
+}
+
+export declare interface CommandSeparatorProps extends ComponentProps<typeof Command_2.Separator> {
+}
+
+export declare const createTooltipHandle: typeof Tooltip_2.createHandle;
+
+/**
+ * Data table powered by TanStack Table.
+ *
+ * Renders using the existing `Table` primitives (Table.Header, Table.Body,
+ * Table.Row, Table.Cell) for visual consistency. TanStack Table provides the
+ * headless logic for sorting, filtering, pagination, and row selection.
+ *
+ * Filtering is handled externally -- use `<DataTableToolbar />` with
+ * `<DataTableSearch />`, `<Select />`, or `<Combobox />` above the table.
+ * Pass filter state via `tableOptions` or pre-filtered `data`.
+ *
+ * For simple static tables, use `Table` directly. Use `DataTable` when you
+ * need interactive features.
+ */
+export declare function DataTable<TData>({ columns, data, sortable, paginated, pageSize, pageSizeOptions, selectable, rowSelection: controlledRowSelection, onRowSelectionChange, onRowClick, emptyMessage, className, tableOptions, }: DataTableProps<TData>): JSX.Element;
+
+/**
+ * A faceted filter button for DataTable, inspired by shadcn's Tasks example.
+ *
+ * Renders a labeled button (e.g. "+ Status"). When clicked, opens a
+ * searchable popover with checkbox options styled to match the Combobox.
+ * Selected values show as badges on the trigger button.
+ *
+ * Supports two modes:
+ * - **Controlled** (`value` + `onValueChange`) for composing with your own state
+ * - **Column** (`column` prop) for direct TanStack Table integration
+ *
+ * Uses the shared Menu primitives for visual consistency with Combobox/Select.
+ */
+export declare function DataTableFacetedFilter<TData, TValue>({ column, title, options, value: controlledValue, onValueChange, }: DataTableFacetedFilterProps<TData, TValue>): JSX.Element;
+
+export declare interface DataTableFacetedFilterOption {
+    /** Display label */
+    readonly label: string;
+    /** Internal value for filtering */
+    readonly value: string;
+    /** Optional icon rendered before the label */
+    readonly icon?: ReactNode;
+}
+
+export declare interface DataTableFacetedFilterProps<TData = unknown, TValue = unknown> {
+    /** TanStack Table column instance (for direct TanStack integration) */
+    column?: Column<TData, TValue>;
+    /** Label shown on the trigger button */
+    title?: string;
+    /** Available filter options */
+    options: readonly DataTableFacetedFilterOption[];
+    /** Controlled selected values (alternative to column) */
+    value?: string[];
+    /** Called when selection changes (alternative to column) */
+    onValueChange?: (values: string[]) => void;
+}
+
+export declare interface DataTableProps<TData> {
+    /** Column definitions - see @tanstack/react-table ColumnDef */
+    columns: ColumnDef<TData, unknown>[];
+    /** Data array */
+    data: TData[];
+    /** Enable column sorting. Default false. */
+    sortable?: boolean;
+    /** Enable pagination. Default false. */
+    paginated?: boolean;
+    /** Rows per page when paginated. Default 10. */
+    pageSize?: number;
+    /** Available page size options. Default [10, 25, 50]. */
+    pageSizeOptions?: number[];
+    /** Enable row selection with checkboxes. Default false. */
+    selectable?: boolean;
+    /** Controlled row selection state */
+    rowSelection?: RowSelectionState;
+    /** Called when row selection changes */
+    onRowSelectionChange?: (selection: RowSelectionState) => void;
+    /** Called when a row is clicked */
+    onRowClick?: (row: Row<TData>) => void;
+    /** Message shown when data is empty. Default "No results." */
+    emptyMessage?: string | ReactNode;
+    /** Additional class on the outer wrapper */
+    className?: string;
+    /** Additional TanStack Table options for advanced use cases */
+    tableOptions?: Partial<TableOptions<TData>>;
+}
+
+/**
+ * A standalone search input for DataTable.
+ *
+ * Controlled component -- wire `value` and `onChange` to your own state.
+ * For server-side search, use `onChange` to trigger an API call (with
+ * debounce if needed). For client-side, pass the value to TanStack Table's
+ * `globalFilter` or a column-specific filter.
+ *
+ * ```tsx
+ * const [search, setSearch] = useState("")
+ *
+ * <DataTableSearch value={search} onChange={setSearch} placeholder="Search repositories..." />
+ * <DataTable
+ *   columns={columns}
+ *   data={data}
+ *   tableOptions={{
+ *     state: { globalFilter: search },
+ *     onGlobalFilterChange: setSearch,
+ *   }}
+ * />
+ * ```
+ */
+export declare function DataTableSearch({ value, onChange, placeholder, className, }: DataTableSearchProps): JSX.Element;
+
+export declare interface DataTableSearchProps {
+    /** Current search value */
+    value: string;
+    /** Called when the search value changes */
+    onChange: (value: string) => void;
+    /** Placeholder text. Default "Search..." */
+    placeholder?: string;
+    /** Additional class on the outer wrapper */
+    className?: string;
+}
+
+/**
+ * Layout container for controls above a DataTable.
+ *
+ * Renders a horizontal flex row that wraps on small screens. Compose with
+ * any combination of `DataTableSearch`, `Select`, `Combobox`, `Button`,
+ * or custom elements.
+ *
+ * ```tsx
+ * <DataTableToolbar>
+ *   <DataTableSearch value={search} onChange={setSearch} />
+ *   <Select value={status} onValueChange={setStatus} items={statusOptions}>
+ *     <SelectButton placeholder="Status" />
+ *     <SelectContent>
+ *       <SelectOption value="all">All</SelectOption>
+ *       <SelectOption value="active">Active</SelectOption>
+ *     </SelectContent>
+ *   </Select>
+ * </DataTableToolbar>
+ * ```
+ */
+export declare function DataTableToolbar({ children, className, }: DataTableToolbarProps): JSX.Element;
+
+export declare interface DataTableToolbarProps {
+    /** Toolbar contents -- typically DataTableSearch, Select, Combobox, Button, etc. */
+    children: ReactNode;
+    /** Additional class on the outer wrapper */
+    className?: string;
+}
+
+export declare const Dialog: {
+    Root: typeof DialogRoot;
+    Trigger: ForwardRefExoticComponent<Omit<DialogTriggerProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+    Content: typeof DialogContent;
+    Panel: ForwardRefExoticComponent<DialogPanelProps & RefAttributes<HTMLDivElement>>;
+    Title: ForwardRefExoticComponent<Omit<DialogTitleProps, "ref"> & RefAttributes<HTMLHeadingElement>>;
+    Body: ForwardRefExoticComponent<DialogBodyProps & RefAttributes<HTMLDivElement>>;
+    Footer: ForwardRefExoticComponent<DialogFooterProps & RefAttributes<HTMLDivElement>>;
+    Close: ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+    Description: ForwardRefExoticComponent<Omit<DialogDescriptionProps, "ref"> & RefAttributes<HTMLParagraphElement>>;
+};
+
+export declare interface DialogBackdropProps extends ComponentProps<typeof Dialog_2.Backdrop> {
+}
+
+export declare interface DialogBodyProps {
+    className?: string;
+    children: ReactNode;
+}
+
+export declare interface DialogCloseProps extends ComponentProps<typeof Dialog_2.Close> {
+}
+
+declare function DialogContent({ size, className, children, ...props }: DialogContentProps): JSX.Element;
+
+export declare interface DialogContentProps extends ComponentProps<typeof Dialog_2.Popup> {
+    size?: DialogSize;
+}
+
+export declare interface DialogDescriptionProps extends ComponentProps<typeof Dialog_2.Description> {
+}
+
+export declare interface DialogFooterProps {
+    className?: string;
+    children: ReactNode;
+}
+
+export declare interface DialogPanelProps {
+    className?: string;
+    children: ReactNode;
+}
+
+declare function DialogRoot({ ...props }: DialogRootProps): JSX.Element;
+
+export declare interface DialogRootProps extends ComponentProps<typeof Dialog_2.Root> {
+}
+
+export declare type DialogSize = keyof typeof sizeStyles_4;
+
+export declare interface DialogTitleProps extends ComponentProps<typeof Dialog_2.Title> {
+}
+
+export declare interface DialogTriggerProps extends ComponentProps<typeof Dialog_2.Trigger> {
+}
+
+/**
+ * Return type for `useDirtyState`.
+ *
+ * Provides a draft/saved state pair with helpers for detecting changes,
+ * updating individual fields, discarding edits, and persisting them.
+ */
+export declare interface DirtyState<T extends object> {
+    /** The current in-flight draft (may differ from saved). */
+    readonly draft: T;
+    /** The last-saved snapshot. */
+    readonly saved: T;
+    /** `true` when draft differs from saved. */
+    readonly dirty: boolean;
+    /** Replace the entire draft. */
+    readonly setDraft: React.Dispatch<React.SetStateAction<T>>;
+    /** Update a single field on the draft. */
+    readonly update: <K extends keyof T>(key: K, value: T[K]) => void;
+    /** Reset draft back to the saved snapshot. */
+    readonly discard: () => void;
+    /** Promote the current draft to saved (optimistic save). */
+    readonly save: () => void;
+}
+
+export declare const Drawer: {
+    Root: typeof DrawerRoot;
+    Trigger: ForwardRefExoticComponent<Omit<DrawerTriggerProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+    Content: typeof DrawerContent;
+    Header: ForwardRefExoticComponent<DrawerHeaderProps & RefAttributes<HTMLDivElement>>;
+    Title: ForwardRefExoticComponent<Omit<DrawerTitleProps, "ref"> & RefAttributes<HTMLHeadingElement>>;
+    Description: ForwardRefExoticComponent<Omit<DrawerDescriptionProps, "ref"> & RefAttributes<HTMLParagraphElement>>;
+    Body: ForwardRefExoticComponent<DrawerBodyProps & RefAttributes<HTMLDivElement>>;
+    Footer: ForwardRefExoticComponent<DrawerFooterProps & RefAttributes<HTMLDivElement>>;
+    Close: ForwardRefExoticComponent<Omit<DrawerCloseProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+};
+
+export declare interface DrawerBackdropProps extends ComponentProps<typeof Drawer_2.Backdrop> {
+}
+
+export declare interface DrawerBodyProps {
+    className?: string;
+    children: ReactNode;
+}
+
+export declare interface DrawerCloseProps extends ComponentProps<typeof Drawer_2.Close> {
+    /** Show default X icon. Default: true when no children. */
+    asIcon?: boolean;
+}
+
+declare function DrawerContent({ side, responsive, className, children, ...props }: DrawerContentProps): JSX.Element;
+
+export declare interface DrawerContentProps extends ComponentProps<typeof Drawer_2.Popup> {
+    /** Which edge. Must match the Root side. Default: "right". */
+    side?: DrawerSide;
+    /** When true, switches to bottom on mobile. Default: true. */
+    responsive?: boolean;
+}
+
+export declare interface DrawerDescriptionProps extends ComponentProps<typeof Drawer_2.Description> {
+}
+
+export declare interface DrawerFooterProps {
+    className?: string;
+    children: ReactNode;
+}
+
+export declare interface DrawerHeaderProps {
+    className?: string;
+    children: ReactNode;
+}
+
+declare function DrawerRoot({ side, responsive: _responsive, children, ...props }: DrawerRootProps): JSX.Element;
+
+export declare interface DrawerRootProps extends Omit<ComponentProps<typeof Drawer_2.Root>, "swipeDirection"> {
+    /** Which edge the drawer slides in from. Default: "right". */
+    side?: DrawerSide;
+    /**
+     * When true (default), automatically switches to "bottom" on small viewports.
+     * The CSS handles this via media queries on the Popup element.
+     */
+    responsive?: boolean;
+    children: ReactNode;
+}
+
+declare type DrawerSide = "right" | "left" | "bottom" | "top";
+
+export declare interface DrawerTitleProps extends ComponentProps<typeof Drawer_2.Title> {
+}
+
+export declare interface DrawerTriggerProps extends ComponentProps<typeof Drawer_2.Trigger> {
+}
+
+export declare const DropdownMenu: {
+    Root: typeof DropdownMenuRoot;
+    Trigger: ForwardRefExoticComponent<Omit<DropdownMenuTriggerProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+    Content: typeof DropdownMenuContent;
+    Item: ForwardRefExoticComponent<DropdownMenuItemProps & RefAttributes<HTMLDivElement>>;
+    Separator: ForwardRefExoticComponent<DropdownMenuSeparatorProps & RefAttributes<HTMLDivElement>>;
+    Label: ForwardRefExoticComponent<DropdownMenuLabelProps & RefAttributes<HTMLDivElement>>;
+    Group: ForwardRefExoticComponent<DropdownMenuGroupProps & RefAttributes<HTMLDivElement>>;
+};
+
+declare function DropdownMenuContent({ side, align, sideOffset, minWidth, className, children, }: DropdownMenuContentProps): JSX.Element;
+
+export declare interface DropdownMenuContentProps {
+    /** Side relative to the trigger */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Alignment relative to the trigger */
+    align?: "start" | "center" | "end";
+    /** Offset from the trigger in px */
+    sideOffset?: number;
+    /** Minimum width */
+    minWidth?: string;
+    className?: string;
+    children: ReactNode;
+}
+
+export declare interface DropdownMenuGroupProps {
+    className?: string;
+    children: ReactNode;
+}
+
+export declare interface DropdownMenuItemProps {
+    /** Danger styling (red text) */
+    variant?: "default" | "danger";
+    /** Icon element rendered before the label */
+    icon?: ReactNode;
+    /** Called when the item is clicked */
+    onClick?: () => void;
+    /** Close menu on click. Default true. */
+    closeOnClick?: boolean;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+
+export declare interface DropdownMenuLabelProps {
+    className?: string;
+    children: ReactNode;
+}
+
+declare function DropdownMenuRoot({ open, defaultOpen, onOpenChange, modal, children, }: DropdownMenuRootProps): JSX.Element;
+
+export declare interface DropdownMenuRootProps {
+    /** Controlled open state */
+    open?: boolean;
+    /** Uncontrolled default open state */
+    defaultOpen?: boolean;
+    /** Called when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether the menu is modal (locks scroll + traps focus). Default true. */
+    modal?: boolean;
+    children: ReactNode;
+}
+
+export declare interface DropdownMenuSeparatorProps {
+    className?: string;
+}
+
+export declare interface DropdownMenuTriggerProps extends ComponentProps<typeof Menu.Trigger> {
+}
+
+export declare function FlickeringGrid({ squareSize, gridGap, flickerChance, color, maxOpacity, sweep, sweepDirection, sweepDuration, sweepWidth, sweepOnly, sweepNoise, className, }: FlickeringGridProps): JSX.Element;
+
+export declare interface FlickeringGridProps {
+    /** Size of each square pixel in px */
+    squareSize?: number;
+    /** Gap between squares in px */
+    gridGap?: number;
+    /** Probability per second that a pixel changes opacity (0-1) */
+    flickerChance?: number;
+    /** Pixel color — CSS color string. Use `currentColor` to inherit from text */
+    color?: string;
+    /** Max opacity for any pixel (0-1) */
+    maxOpacity?: number;
+    /**
+     * Enable a sweeping wave of brightness across the grid.
+     * When enabled, pixels near the wave front appear brighter.
+     */
+    sweep?: boolean;
+    /** Sweep direction */
+    sweepDirection?: "left" | "right";
+    /** Duration of one sweep cycle in seconds */
+    sweepDuration?: number;
+    /** Width of the sweep band as a fraction of total width (0-1) */
+    sweepWidth?: number;
+    /**
+     * When true, disables random flicker and drives pixel opacity purely
+     * from the sweep wave. Each pixel gets a fixed noise offset so the
+     * wave front has a fuzzy, fringing edge instead of a clean line.
+     */
+    sweepOnly?: boolean;
+    /**
+     * Magnitude of the per-pixel noise offset (0-1) when `sweepOnly` is true.
+     * Higher values produce fuzzier, more chaotic edges.
+     */
+    sweepNoise?: number;
+    className?: string;
+}
+
+export declare const Form: {
+    Field: ForwardRefExoticComponent<Omit<FormFieldProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Label: ForwardRefExoticComponent<Omit<FormLabelProps, "ref"> & RefAttributes<HTMLLabelElement>>;
+    Input: ForwardRefExoticComponent<Omit<FormInputProps, "ref"> & RefAttributes<HTMLInputElement>>;
+    Textarea: ForwardRefExoticComponent<Omit<FormTextareaProps, "ref"> & RefAttributes<HTMLTextAreaElement>>;
+    Hint: ForwardRefExoticComponent<Omit<FormHintProps, "ref"> & RefAttributes<HTMLParagraphElement>>;
+};
+
+export declare interface FormFieldProps extends ComponentProps<typeof Field.Root> {
+}
+
+export declare interface FormHintProps extends ComponentProps<typeof Field.Description> {
+}
+
+export declare interface FormInputProps extends ComponentProps<typeof Field.Control> {
+    /** Icon element rendered before the input */
+    iconLeft?: ReactNode;
+    /** Icon element rendered after the input */
+    iconRight?: ReactNode;
+    /** Additional classes on the outer wrapper (only when icons are present) */
+    wrapperClassName?: string;
+}
+
+export declare interface FormLabelProps extends ComponentProps<typeof Field.Label> {
+    required?: boolean;
+}
+
+export declare interface FormTextareaProps extends ComponentProps<typeof Field.Control> {
+}
+
+/**
+ * Animated hover/focus wrapper.
+ *
+ * **Standalone**: renders an absolutely-positioned background layer behind its
+ * children that transitions in on hover/focus. On press, the background shrinks
+ * by 1px on all sides.
+ *
+ * **Inside Hover.Group**: registers for the shared sliding hover pill.
+ * When `active`, renders its own static background with the press inset
+ * effect (same as standalone active state). The group pill handles hover.
+ */
+export declare function Hover({ children, active, background, backgroundClassName, borderRadius, focus, interactive, instantHover, disabled, fullWidth, className, }: HoverProps): JSX.Element;
+
+export declare function HoverGroup({ children, background, borderRadius, className, }: HoverGroupProps): JSX.Element;
+
+export declare interface HoverGroupProps {
+    children: ReactNode;
+    /** Background class for the sliding pill */
+    background?: string;
+    /** Border radius class for the sliding pill */
+    borderRadius?: string;
+    className?: string;
+}
+
+export declare interface HoverProps {
+    children: ReactNode;
+    /** Force the hover background visible (e.g. active/selected state) */
+    active?: boolean;
+    /** Background class applied to the hover layer */
+    background?: string;
+    /** Additional classes on the animated background layer (border, shadow, hover color shifts, etc.) */
+    backgroundClassName?: string;
+    /** Border radius class */
+    borderRadius?: string;
+    /** Enable focus ring */
+    focus?: boolean;
+    /** Enable active/press shrink effect */
+    interactive?: boolean;
+    /** When true, hover bg appears instantly (no opacity/inset transition).
+     *  Only the press effect (inset shrink) animates. Useful for menus. */
+    instantHover?: boolean;
+    /** Disable all hover/focus effects */
+    disabled?: boolean;
+    /** Stretch to full width */
+    fullWidth?: boolean;
+    className?: string;
+}
+
+declare type LinkComponent = ComponentType<{
+    to?: string;
+    href?: string;
+    className?: string;
+    children?: ReactNode;
+}>;
+
+/**
+ * CodeRabbit logo mark.
+ */
+export declare const Logo: ForwardRefExoticComponent<LogoProps & RefAttributes<SVGSVGElement>>;
+
+export declare interface LogoProps {
+    /** Visual variant: 'mark' (rabbit only) or 'circle' (rabbit in a filled circle) */
+    variant?: LogoVariant;
+    /** Size of the logo SVG */
+    size?: number;
+    className?: string;
+}
+
+declare type LogoVariant = "mark" | "circle";
+
+/**
+ * Individual navigation link item.
+ *
+ * Inside a NavLinks (HoverGroup), automatically gets the shared sliding
+ * indicator on hover and a press shrink effect on click.
+ * Renders a `<button>` by default - when `href` is provided,
+ * renders an `<a>` tag instead.
+ */
+export declare function NavLink({ active, icon, href, onClick, className, children, }: NavLinkProps): JSX.Element;
+
+export declare interface NavLinkProps {
+    /** Whether this link is the currently active/selected item */
+    active?: boolean;
+    /** Optional icon rendered before the label */
+    icon?: ReactNode;
+    /** When provided, renders an <a> tag instead of <button> */
+    href?: string;
+    /** Click handler */
+    onClick?: () => void;
+    className?: string;
+    children: ReactNode;
+}
+
+/**
+ * Container for a horizontal group of navigation links.
+ *
+ * Wraps children in a HoverGroup so the sliding indicator
+ * is shared across all NavLink items.
+ */
+export declare function NavLinks({ className, children }: NavLinksProps): JSX.Element;
+
+export declare interface NavLinksProps {
+    className?: string;
+    children: ReactNode;
+}
+
+/**
+ * Full-page layout shell.
+ *
+ * Provides the standard page structure:
+ * base background → header → content panel with nav.
+ */
+export declare const PageLayout: ForwardRefExoticComponent<PageLayoutProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface PageLayoutProps {
+    /** Header content (typically AppHeader) */
+    header?: ReactNode;
+    /** Navigation content (typically NavLinks) */
+    nav?: ReactNode;
+    className?: string;
+    children: ReactNode;
+}
+
+/**
+ * Pagination toolbar with clickable page numbers, optional rows-per-page
+ * selector, and optional result count.
+ *
+ * Renders as a cohesive strip - pass `rowsPerPage` + `onRowsPerPageChange`
+ * to show the rows-per-page selector, and `totalItems` to show the result count.
+ */
+export declare function Pagination({ page, pageCount, onPageChange, totalItems, rowsPerPage, onRowsPerPageChange, rowOptions, siblingCount, className, }: PaginationProps): JSX.Element | null;
+
+export declare interface PaginationProps {
+    /** Current page (1-indexed) */
+    page: number;
+    /** Total number of pages */
+    pageCount: number;
+    /** Called when the page changes */
+    onPageChange?: (page: number) => void;
+    /** Total item count - shows "1–10 of X" when provided */
+    totalItems?: number;
+    /** Rows per page - shows selector when provided with onRowsPerPageChange */
+    rowsPerPage?: number;
+    /** Called when rows per page changes */
+    onRowsPerPageChange?: (rows: number) => void;
+    /** Available row count options. Default [10, 25, 50] */
+    rowOptions?: number[];
+    /** Number of sibling pages to show around active page. Default 1 */
+    siblingCount?: number;
+    className?: string;
+}
+
+/**
+ * A 3x3 pixel-grid spinner with configurable animation variants.
+ *
+ * All 9 cells render; the `variant` controls how they animate:
+ *
+ * - `hole`     One dim cell rotates around a bright ring (center bright)
+ * - `trail`    A fading 5-cell trail chases around the ring
+ * - `wave`     Anti-diagonal wave sweeps top-left to bottom-right
+ * - `radiate`  Rings expand outward: center to edges to corners
+ * - `pulse`    All cells breathe together with a subtle ripple
+ * - `static`   Cells flicker independently (TV static)
+ */
+export declare function PixelSpinner({ variant, size, gap, duration, className, }: PixelSpinnerProps): JSX.Element;
+
+export declare interface PixelSpinnerProps {
+    /** Animation variant */
+    variant?: PixelSpinnerVariant;
+    /**
+     * Size preset or raw px value.
+     * Presets: `xs` = 10px, `sm` = 14px, `md` = 20px, `lg` = 32px.
+     * Default is `xs`.
+     */
+    size?: PixelSpinnerSize | number;
+    /** Gap between pixels as a fraction of pixel size (0-1). Default 0.25. */
+    gap?: number;
+    /** Cycle duration in seconds. Default 1.2. */
+    duration?: number;
+    className?: string;
+}
+
+declare type PixelSpinnerSize = "xs" | "sm" | "md" | "lg";
+
+export declare type PixelSpinnerVariant = 
+/** One dim cell rotates around a bright ring; center bright */
+"hole"
+/** Trail of 5 fading cells chases around the ring; center dim */
+| "trail"
+/** Diagonal wave sweeps from top-left to bottom-right */
+| "wave"
+/** Rings expand outward: center to middle to corners, repeating */
+| "radiate"
+/** All cells pulse together */
+| "pulse"
+/** All cells flicker independently (TV static) */
+| "static";
+
+export declare const Popover: {
+    Root: typeof PopoverRoot;
+    Trigger: ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+    Content: typeof PopoverContent;
+    Arrow: ForwardRefExoticComponent<Omit<PopoverArrowProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Close: ForwardRefExoticComponent<Omit<PopoverCloseProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+    Title: ForwardRefExoticComponent<PopoverTitleProps & RefAttributes<HTMLParagraphElement>>;
+    Description: ForwardRefExoticComponent<Omit<PopoverDescriptionProps, "ref"> & RefAttributes<HTMLParagraphElement>>;
+};
+
+export declare interface PopoverArrowProps extends ComponentProps<typeof Popover_2.Arrow> {
+}
+
+export declare interface PopoverCloseProps extends ComponentProps<typeof Popover_2.Close> {
+}
+
+declare function PopoverContent({ side, align, sideOffset, className, children, ...props }: PopoverContentProps): JSX.Element;
+
+export declare interface PopoverContentProps extends ComponentProps<typeof Popover_2.Popup> {
+    /** Side relative to the trigger */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Alignment relative to the trigger */
+    align?: "start" | "center" | "end";
+    /** Offset from the trigger in px */
+    sideOffset?: number;
+    children: ReactNode;
+}
+
+export declare interface PopoverDescriptionProps extends ComponentProps<typeof Popover_2.Description> {
+}
+
+declare function PopoverRoot(props: PopoverRootProps): JSX.Element;
+
+export declare interface PopoverRootProps extends ComponentProps<typeof Popover_2.Root> {
+}
+
+export declare interface PopoverTitleProps {
+    className?: string;
+    children: ReactNode;
+}
+
+export declare interface PopoverTriggerProps extends ComponentProps<typeof Popover_2.Trigger> {
+}
+
+export { Row }
+
+export { RowSelectionState }
+
+/**
+ * Floating pill pinned to the bottom of the viewport.
+ * Slides up when a form has unsaved changes.
+ */
+export declare const SaveBar: ForwardRefExoticComponent<SaveBarProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface SaveBarProps {
+    /** Whether the bar is visible (typically bound to a dirty flag). */
+    show: boolean;
+    /** Message shown inside the pill. Defaults to "You have unsaved changes". */
+    message?: ReactNode;
+    /** Label for the discard button. Defaults to "Reset". */
+    discardLabel?: string;
+    /** Label for the save button. Defaults to "Save changes". */
+    saveLabel?: string;
+    /** Called when the user clicks discard. */
+    onDiscard: () => void;
+    /** Called when the user clicks save. */
+    onSave: () => void;
+    /** Show a loading spinner on the save button. */
+    saving?: boolean;
+    /** Disable the save button (e.g. validation failure). */
+    saveDisabled?: boolean;
+    /** Trigger a shake animation to draw attention (e.g. when navigation is blocked). */
+    shake?: boolean;
+    className?: string;
+}
+
+/**
+ * Segmented control with a sliding indicator that animates between options.
+ *
+ * Two layout modes:
+ * - `fill` (default) - equal-width segments via CSS grid, indicator positioned with translateX
+ * - `fit` - segments size to content, indicator position/width measured from DOM
+ */
+export declare function SegmentedControl<T extends string = string>({ options, value: controlledValue, defaultValue, onValueChange, layout, className, }: SegmentedControlProps<T>): JSX.Element;
+
+export declare interface SegmentedControlOption<T extends string = string> {
+    value: T;
+    label?: string;
+    icon?: ReactNode;
+}
+
+export declare interface SegmentedControlProps<T extends string = string> {
+    /** Options to display as segments */
+    options: SegmentedControlOption<T>[];
+    /** Controlled value */
+    value?: T;
+    /** Uncontrolled default value */
+    defaultValue?: T;
+    /** Called when the selected segment changes */
+    onValueChange?: (value: T) => void;
+    /**
+     * Layout mode:
+     * - `fill` - segments divide space equally (default)
+     * - `fit` - segments hug their content
+     */
+    layout?: "fill" | "fit";
+    className?: string;
+}
+
+/**
+ * Select component for choosing from a list of predefined options.
+ *
+ * For searchable/filterable lists, use Combobox instead.
+ *
+ * Wraps Base UI Select.Root with shared Menu visual primitives.
+ */
+export declare function Select({ value, defaultValue, onValueChange, items, disabled, children, className, }: SelectProps): ReactElement;
+
+/**
+ * Pre-styled trigger for form contexts.
+ * Renders as a Button with the selected value + chevron icon.
+ */
+export declare const SelectButton: ForwardRefExoticComponent<SelectButtonProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface SelectButtonProps {
+    /** Placeholder text shown when no value is selected */
+    placeholder?: string;
+    className?: string;
+}
+
+/**
+ * Popup with a scrollable list of options.
+ * Uses Base UI Select primitives with shared Menu visuals.
+ */
+export declare function SelectContent({ align, side, sideOffset, minWidth, children, className, }: SelectContentProps): ReactElement;
+
+export declare interface SelectContentProps {
+    /** Alignment relative to trigger */
+    align?: "start" | "center" | "end";
+    /** Side relative to the trigger */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Offset from the trigger in px */
+    sideOffset?: number;
+    /** Minimum width */
+    minWidth?: string;
+    /** SelectOption elements */
+    children?: ReactNode;
+    className?: string;
+}
+
+export declare const SelectGroup: ForwardRefExoticComponent<SelectGroupProps & RefAttributes<HTMLDivElement>>;
+
+export declare const SelectGroupLabel: ForwardRefExoticComponent<SelectGroupLabelProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface SelectGroupLabelProps {
+    className?: string;
+    children: ReactNode;
+}
+
+export declare interface SelectGroupProps {
+    className?: string;
+    children: ReactNode;
+}
+
+export declare interface SelectItem {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+    [key: string]: unknown;
+}
+
+/**
+ * Individual option in the select popup.
+ * Automatically includes a checkmark indicator when selected.
+ */
+export declare const SelectOption: ForwardRefExoticComponent<SelectOptionProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface SelectOptionProps {
+    /** Value for this option */
+    value: string;
+    /** Icon element rendered before the label */
+    icon?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+
+export declare interface SelectProps {
+    /** Controlled value */
+    value?: string;
+    /** Uncontrolled default value */
+    defaultValue?: string;
+    /** Called when a value is selected */
+    onValueChange?: (value: string) => void;
+    /** Item data for rendering and value display */
+    items: SelectItem[];
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+
+export declare const SelectSeparator: ForwardRefExoticComponent<SelectSeparatorProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface SelectSeparatorProps {
+    className?: string;
+}
+
+/**
+ * Fully composable trigger. Renders whatever children you give it as the
+ * element that opens the select popup.
+ */
+export declare const SelectTrigger: ForwardRefExoticComponent<SelectTriggerProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface SelectTriggerProps {
+    children: ReactNode;
+    className?: string;
+}
+
+export declare const Separator: ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & RefAttributes<HTMLHRElement>>;
+
+export declare interface SeparatorProps extends ComponentProps<typeof Separator_2> {
+    orientation?: "horizontal" | "vertical";
+}
+
+/**
+ * A specialized card for settings pages. Uses the Card component internally
+ * with an optional header and a nested card for the settings rows.
+ *
+ * Pass `toggle` to show a toggle in the header. When toggled on, the child
+ * rows are visually disabled (muted + non-interactive).
+ */
+export declare const SettingsCard: ForwardRefExoticComponent<SettingsCardProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface SettingsCardProps {
+    /** Title displayed in the card header */
+    title?: string;
+    /** Description displayed below the title */
+    description?: string;
+    /**
+     * When true, renders a Toggle in the header. Toggling it on disables (mutes)
+     * the card's rows - useful for "Use Organization Settings" patterns.
+     */
+    toggle?: boolean;
+    /** Controlled toggle state */
+    toggled?: boolean;
+    /** Callback when toggle state changes */
+    onToggleChange?: (toggled: boolean) => void;
+    /** Initial toggle state for uncontrolled usage */
+    defaultToggled?: boolean;
+    /** Settings rows or other content */
+    children: ReactNode;
+    className?: string;
+}
+
+/**
+ * Content shell for settings pages.
+ *
+ * Centers content with a max-width constraint, provides consistent
+ * vertical spacing, and renders an optional page title. Designed
+ * to sit inside a `PageLayout` content area.
+ *
+ * ```tsx
+ * <SettingsPage title="General">
+ *   <SettingsCard title="Basic settings">
+ *     ...
+ *   </SettingsCard>
+ * </SettingsPage>
+ * ```
+ */
+export declare const SettingsPage: ForwardRefExoticComponent<SettingsPageProps & RefAttributes<HTMLDivElement>>;
+
+export declare type SettingsPageMaxWidth = "narrow" | "wide";
+
+export declare interface SettingsPageProps {
+    /** Page title displayed at the top. */
+    title?: ReactNode;
+    /**
+     * Maximum content width.
+     * - `"narrow"` (default): 800px — for settings forms
+     * - `"wide"`: 1100px — for tables, permissions, dashboards
+     */
+    maxWidth?: SettingsPageMaxWidth;
+    /** Optional leading content rendered above the title (e.g. a back button). */
+    leading?: ReactNode;
+    /** Main page content (cards, forms, tables, etc.). */
+    children: ReactNode;
+    className?: string;
+}
+
+/**
+ * A row inside a SettingsCard with a label/description on the left
+ * and a control slot on the right.
+ */
+export declare const SettingsRow: ForwardRefExoticComponent<SettingsRowProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface SettingsRowProps {
+    /** Label for the setting */
+    label: string;
+    /** Description of what the setting controls */
+    description?: string;
+    /** Control element (Toggle, Select, etc.) */
+    children?: ReactNode;
+    className?: string;
+}
+
+declare const sizeStyles: {
+    readonly xs: {
+        readonly height: "h-6";
+        readonly padding: "px-1.5";
+        readonly textPadding: "px-1";
+        readonly icon: "w-6";
+    };
+    readonly sm: {
+        readonly height: "h-7";
+        readonly padding: "px-1.5";
+        readonly textPadding: "px-1";
+        readonly icon: "w-7";
+    };
+    readonly md: {
+        readonly height: "h-8";
+        readonly padding: "px-2";
+        readonly textPadding: "px-1";
+        readonly icon: "w-8";
+    };
+};
+
+declare const sizeStyles_2: {
+    readonly sm: {
+        readonly track: "w-9 h-5";
+        readonly thumb: "h-4 w-4 group-active/toggle:w-5";
+    };
+    readonly md: {
+        readonly track: "w-11 h-6";
+        readonly thumb: "h-5 w-5 group-active/toggle:w-6";
+    };
+};
+
+declare const sizeStyles_3: {
+    readonly sm: {
+        readonly root: "size-4 rounded-[4px]";
+        readonly icon: "size-3";
+        readonly label: "text-xs";
+    };
+    readonly md: {
+        readonly root: "size-[18px] rounded-[5px]";
+        readonly icon: "size-3.5";
+        readonly label: "text-sm";
+    };
+};
+
+declare const sizeStyles_4: {
+    readonly md: "max-w-[450px]";
+    readonly lg: "max-w-[550px]";
+};
+
+/**
+ * Skeleton loading placeholder with a sweeping pixel wave.
+ *
+ * Uses the `sweepOnly` mode of FlickeringGrid: pixels light up purely
+ * based on the sweep wave position, with a per-pixel noise offset
+ * creating a fuzzy, fringing edge on the wave front. No random flicker,
+ * so the effect reads as a single directional motion rather than noise.
+ */
+export declare const Skeleton: ForwardRefExoticComponent<SkeletonProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface SkeletonProps {
+    /** Use rounded-full instead of rounded-md (for avatar placeholders) */
+    circular?: boolean;
+    className?: string;
+}
+
+export { SortingState }
+
+/**
+ * Text loading indicator with a 3x3 pixel spinner and animated dots.
+ *
+ * Uses `PixelSpinner` for the animated glyph and a CSS animation to cycle
+ * an animated dots suffix on the label text.
+ */
+export declare const Spinner: ForwardRefExoticComponent<SpinnerProps & RefAttributes<HTMLSpanElement>>;
+
+export declare interface SpinnerProps {
+    /** Text label shown next to the spinner. */
+    label?: string;
+    /** Show the animated dots after the label. */
+    showDots?: boolean;
+    /** Show the pixel spinner glyph. */
+    showSpinner?: boolean;
+    /** Size variant. */
+    size?: "sm" | "md";
+    /** Animation variant for the pixel spinner. Defaults to `wave`. */
+    variant?: PixelSpinnerVariant;
+    className?: string;
+}
+
+/**
+ * Lightweight list-table container.
+ *
+ * Wraps a semantic `<table>` in a rounded, bordered container.
+ * Designed for simple list-style data displays - not a full data-table.
+ */
+export declare const Table: ReturnType<typeof forwardRef<HTMLDivElement, TableProps>> & {
+    Header: typeof TableHeader;
+    Body: typeof TableBody;
+    Row: typeof TableRow;
+    HeaderCell: typeof TableHeaderCell;
+    Cell: typeof TableCell;
+};
+
+declare const TableBody: ForwardRefExoticComponent<TableBodyProps & RefAttributes<HTMLTableSectionElement>>;
+
+export declare interface TableBodyProps {
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+
+declare const TableCell: ForwardRefExoticComponent<TableCellProps & RefAttributes<HTMLTableCellElement>>;
+
+export declare interface TableCellProps {
+    /** Fixed width in pixels or CSS value */
+    width?: number | string;
+    /** Column span */
+    colSpan?: number;
+    className?: string;
+    children?: ReactNode;
+}
+
+declare const TableHeader: ForwardRefExoticComponent<TableHeaderProps & RefAttributes<HTMLTableSectionElement>>;
+
+declare const TableHeaderCell: ForwardRefExoticComponent<TableHeaderCellProps & RefAttributes<HTMLTableCellElement>>;
+
+export declare interface TableHeaderCellProps {
+    /** Fixed width in pixels or CSS value */
+    width?: number | string;
+    /** Column span */
+    colSpan?: number;
+    className?: string;
+    children?: ReactNode;
+}
+
+export declare interface TableHeaderProps {
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+
+export { TableOptions }
+
+export declare interface TableProps {
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+
+declare const TableRow: ForwardRefExoticComponent<Omit<TableRowProps, "ref"> & RefAttributes<HTMLTableRowElement>>;
+
+export declare interface TableRowProps extends Omit<ComponentProps<"tr">, "children"> {
+    className?: string;
+    children: ReactNode;
+}
+
+export declare const Tabs: {
+    Root: ForwardRefExoticComponent<Omit<TabsRootProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    List: ForwardRefExoticComponent<Omit<TabsListProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Tab: ForwardRefExoticComponent<Omit<TabsTabProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+    Panel: ForwardRefExoticComponent<Omit<TabsPanelProps, "ref"> & RefAttributes<HTMLDivElement>>;
+};
+
+export declare interface TabsListProps extends ComponentProps<typeof Tabs_2.List> {
+    /**
+     * Layout mode:
+     * - `fit` — tabs hug their content (default)
+     * - `fill` — tabs divide space equally via CSS grid
+     */
+    layout?: "fill" | "fit";
+}
+
+export declare interface TabsPanelProps extends ComponentProps<typeof Tabs_2.Panel> {
+}
+
+export declare interface TabsRootProps extends ComponentProps<typeof Tabs_2.Root> {
+}
+
+export declare interface TabsTabProps extends ComponentProps<typeof Tabs_2.Tab> {
+}
+
+export declare type ThemeMode = "light" | "dark" | "system";
+
+/**
+ * Toggle switch component built on Base UI Switch with Tailwind CSS styling.
+ */
+export declare const Toggle: ForwardRefExoticComponent<ToggleProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface ToggleProps {
+    /** Whether the toggle is on. Use for controlled mode. */
+    checked?: boolean;
+    /** Whether the toggle is initially on. Use for uncontrolled mode. */
+    defaultChecked?: boolean;
+    /** Called when the checked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Whether the toggle is disabled. */
+    disabled?: boolean;
+    /** Size of the toggle. */
+    size?: ToggleSize;
+    /** Additional class name for the root element. */
+    className?: string;
+}
+
+declare type ToggleSize = keyof typeof sizeStyles_2;
+
+export declare const Tooltip: {
+    Provider: typeof TooltipProvider;
+    Root: typeof TooltipRoot;
+    Trigger: ForwardRefExoticComponent<Omit<TooltipTriggerProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+    Content: typeof TooltipContent;
+    Viewport: ForwardRefExoticComponent<Omit<TooltipViewportProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    createHandle: typeof Tooltip_2.createHandle;
+};
+
+declare function TooltipContent({ side, align, sideOffset, className, children, ...props }: TooltipContentProps): JSX.Element;
+
+export declare interface TooltipContentProps extends ComponentProps<typeof Tooltip_2.Popup> {
+    /** Side relative to the trigger */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Alignment relative to the trigger */
+    align?: "start" | "center" | "end";
+    /** Offset from the trigger in px */
+    sideOffset?: number;
+    /** Content to display */
+    children: ReactNode;
+}
+
+declare function TooltipProvider(props: TooltipProviderProps): JSX.Element;
+
+export declare interface TooltipProviderProps extends ComponentProps<typeof Tooltip_2.Provider> {
+}
+
+declare function TooltipRoot(props: TooltipRootProps): JSX.Element;
+
+export declare interface TooltipRootProps extends ComponentProps<typeof Tooltip_2.Root> {
+}
+
+export declare interface TooltipTriggerProps extends ComponentProps<typeof Tooltip_2.Trigger> {
+}
+
+export declare interface TooltipViewportProps extends ComponentProps<typeof Tooltip_2.Viewport> {
+}
+
+/**
+ * Manages a draft / saved state pair with built-in dirty detection.
+ *
+ * Replaces the repeated pattern across settings pages of:
+ * ```ts
+ * const [saved, setSaved] = useState(initial)
+ * const [draft, setDraft] = useState(initial)
+ * const dirty = JSON.stringify(draft) !== JSON.stringify(saved)
+ * const update = (key, value) => setDraft(prev => ({ ...prev, [key]: value }))
+ * ```
+ *
+ * @param initial – The starting state for both draft and saved.
+ */
+export declare function useDirtyState<T extends object>(initial: T): DirtyState<T>;
+
+/**
+ * User menu dropdown - shows user info, theme toggle, navigation items,
+ * and a log out action.
+ *
+ * Designed to be placed inside `<AppHeader.Actions>`. Theme state is passed
+ * as props so the component stays decoupled from any specific theme hook.
+ */
+export declare function UserMenu({ user, theme, onThemeChange, items, onLogout, className, }: UserMenuProps): JSX.Element;
+
+export declare interface UserMenuItem {
+    label: string;
+    icon?: ReactNode;
+    onClick?: () => void;
+}
+
+export declare interface UserMenuProps {
+    /** User information displayed in the header */
+    user: UserMenuUser;
+    /** Current theme mode */
+    theme?: ThemeMode;
+    /** Called when the theme is changed */
+    onThemeChange?: (theme: ThemeMode) => void;
+    /** Menu items rendered between the theme toggle and log out */
+    items?: UserMenuItem[];
+    /** Called when "Log out" is clicked */
+    onLogout?: () => void;
+    className?: string;
+}
+
+export declare interface UserMenuUser {
+    /** Display name */
+    name: string;
+    /** Organization or team name */
+    org?: string;
+    /** Avatar image URL */
+    avatarUrl?: string;
+    /** Fallback initials when no image (e.g. "AM") */
+    initials?: string;
+}
+
+declare const variantConfig: {
+    readonly primary: {
+        readonly active: true;
+        readonly bg: "bg-cui-inverse";
+        readonly bgClassName: "shadow-xs inset-shadow-cui-primary group-hover/btn:bg-cui-inverse/90";
+        readonly text: "text-cui-inverse";
+    };
+    readonly outline: {
+        readonly active: true;
+        readonly bg: "bg-cui-base-2";
+        readonly bgClassName: "border border-cui-neutral shadow-xs group-hover/btn:bg-cui-subtle group-active/btn:bg-cui-subtle";
+        readonly text: "text-cui-primary";
+    };
+    readonly secondary: {
+        readonly active: true;
+        readonly bg: "bg-cui-subtle";
+        readonly bgClassName: "group-hover/btn:bg-cui-subtle/70";
+        readonly text: "text-cui-primary";
+    };
+    readonly transparent: {
+        readonly active: false;
+        readonly bg: "";
+        readonly bgClassName: "group-hover/btn:bg-cui-subtle group-active/btn:bg-cui-subtle";
+        readonly text: "text-cui-secondary";
+    };
+    readonly danger: {
+        readonly active: true;
+        readonly bg: "bg-cui-danger";
+        readonly bgClassName: "border border-cui-danger shadow-xs group-hover/btn:bg-cui-danger-strong group-active/btn:bg-cui-danger-strong";
+        readonly text: "text-cui-danger-on";
+    };
+    readonly "danger-light": {
+        readonly active: true;
+        readonly bg: "bg-cui-danger-subtle";
+        readonly bgClassName: "group-hover/btn:bg-cui-danger/30 group-active/btn:bg-cui-danger/50";
+        readonly text: "text-cui-danger";
+    };
+};
+
+declare const variantConfig_2: {
+    readonly info: {
+        readonly container: "bg-cui-accent-subtle";
+        readonly icon: "text-cui-accent";
+        readonly text: "text-cui-accent [&_a]:underline [&_a]:underline-offset-2 [&_a]:hover:opacity-80";
+        readonly pattern: "text-cui-accent";
+        readonly defaultIcon: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
+        title?: string;
+        titleId?: string;
+        } & RefAttributes<SVGSVGElement>>;
+    };
+    readonly success: {
+        readonly container: "bg-cui-success-subtle";
+        readonly icon: "text-cui-success";
+        readonly text: "text-cui-success [&_a]:underline [&_a]:underline-offset-2 [&_a]:hover:opacity-80";
+        readonly pattern: "text-cui-success";
+        readonly defaultIcon: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
+        title?: string;
+        titleId?: string;
+        } & RefAttributes<SVGSVGElement>>;
+    };
+    readonly warning: {
+        readonly container: "bg-cui-warn-subtle";
+        readonly icon: "text-cui-warn";
+        readonly text: "text-cui-warn [&_a]:underline [&_a]:underline-offset-2 [&_a]:hover:opacity-80";
+        readonly pattern: "text-cui-warn";
+        readonly defaultIcon: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
+        title?: string;
+        titleId?: string;
+        } & RefAttributes<SVGSVGElement>>;
+    };
+    readonly danger: {
+        readonly container: "bg-cui-danger-subtle";
+        readonly icon: "text-cui-danger";
+        readonly text: "text-cui-danger [&_a]:underline [&_a]:underline-offset-2 [&_a]:hover:opacity-80";
+        readonly pattern: "text-cui-danger";
+        readonly defaultIcon: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
+        title?: string;
+        titleId?: string;
+        } & RefAttributes<SVGSVGElement>>;
+    };
+};
+
+declare const variantStyles: {
+    readonly default: "bg-cui-base-1 rounded-lg shadow-xs ring-1 ring-cui-neutral";
+    readonly nested: "bg-cui-base-2 rounded-sm shadow-sm ring-1 ring-cui-neutral";
+};
+
+declare const variantStyles_2: {
+    readonly neutral: "bg-cui-subtle text-cui-secondary";
+    readonly accent: "bg-cui-accent-subtle text-cui-accent";
+    readonly danger: "bg-cui-danger-subtle text-cui-danger";
+    readonly warning: "bg-cui-warn-subtle text-cui-warn";
+    readonly success: "bg-cui-success-subtle text-cui-success";
+};
+
+export { }