@coderabbitai/carrot-ui 0.1.20 → 0.1.22

package/dist/index.d.ts

@@ -1,13 +1,17 @@
 import { Accordion as Accordion_2 } from '@base-ui/react/accordion';
 import { AlertDialog as AlertDialog_2 } from '@base-ui/react/alert-dialog';
+import { AlertDialogDescriptionProps as AlertDialogDescriptionProps_2 } from '@base-ui/react';
 import { Button as Button_2 } from '@base-ui/react/button';
+import { Checkbox as Checkbox_2 } from '@base-ui/react/checkbox';
 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 { ComponentPropsWithoutRef } from 'react';
 import { ComponentType } from 'react';
+import { default as default_2 } 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';
@@ -16,6 +20,8 @@ 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 { Radio } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroup_2 } from '@base-ui/react/radio-group';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
@@ -24,8 +30,11 @@ 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 { Switch } from '@base-ui/react/switch';
 import { TableOptions } from '@tanstack/react-table';
 import { Tabs as Tabs_2 } from '@base-ui/react/tabs';
+import { Toggle as Toggle_2 } from '@base-ui/react/toggle';
+import { ToggleGroup } from '@base-ui/react/toggle-group';
 import { Tooltip as Tooltip_2 } from '@base-ui/react/tooltip';
 
 export declare const Accordion: {
@@ -50,14 +59,13 @@ export declare interface AccordionTriggerProps extends ComponentProps<typeof Acc
 }
 
 /**
- * Horizontal banner alert for important messages.
+ * Alert component 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.
+ * Two layouts:
+ * - `inline` — horizontal bar with icon, text, and optional action. Features
+ *   a flickering pixel grid on the right side.
+ * - `banner` — full-width centered layout for page-level announcements.
+ *   Content is centered with the icon above the text.
  */
 export declare const Alert: ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>>;
 
@@ -107,14 +115,22 @@ export declare interface AlertDialogTitleProps extends ComponentProps<typeof Ale
 export declare interface AlertDialogTriggerProps extends ComponentProps<typeof AlertDialog_2.Trigger> {
 }
 
+export declare type AlertLayout = "inline" | "banner";
+
 export declare interface AlertProps {
     /** Visual style variant */
     variant?: AlertVariant;
+    /**
+     * Layout mode:
+     * - `inline` (default) — horizontal bar with icon left, text center, action right
+     * - `banner` — full-width centered layout for page-level announcements
+     */
+    layout?: AlertLayout;
     /** Override the default icon */
     icon?: ReactNode;
-    /** Action element rendered at the far right (e.g. a Button) */
+    /** Action element rendered beside the text (e.g. a Button) */
     action?: ReactNode;
-    /** Called when the dismiss button is clicked. When provided, a close button appears on the right. */
+    /** Called when the dismiss button is clicked. When provided, a close button appears. */
     onDismiss?: () => void;
     className?: string;
     children: ReactNode;
@@ -135,29 +151,18 @@ export declare interface AppHeaderActionsProps {
     className?: string;
 }
 
+/**
+ * AppHeader breadcrumb — renders a Logo link followed by breadcrumb segments.
+ *
+ * Delegates to the standalone Breadcrumb component for the segment rendering.
+ * The Logo + first separator is AppHeader-specific.
+ */
 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[];
+    items: BreadcrumbItem[];
     /** Custom link component (e.g. TanStack Router's Link, Next.js Link, etc.). Defaults to <a>. */
-    linkComponent?: LinkComponent;
+    linkComponent?: LinkComponent_2;
     className?: string;
 }
 
@@ -174,9 +179,9 @@ export declare interface AppHeaderProps {
  * - `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;
+export declare const Avatar: ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLElement>>;
 
-declare type AvatarColor = "neutral" | "accent" | "danger" | "warning" | "success";
+declare type AvatarColor = "neutral" | "accent" | "danger" | "warn" | "success";
 
 declare type AvatarGenerativePattern = "grid" | "symmetric" | "dense" | "quad" | "quad-dense" | "diagonal" | "sierpinski";
 
@@ -213,14 +218,71 @@ export declare type AvatarVariant = "circle" | "square";
 
 export declare const Badge: ForwardRefExoticComponent<BadgeProps & RefAttributes<HTMLSpanElement>>;
 
-export declare interface BadgeProps {
+export declare interface BadgeProps extends ComponentPropsWithoutRef<"span"> {
+    /** Visual style variant */
     variant?: BadgeVariant;
-    className?: string;
-    children: ReactNode;
+    /** Size of the badge */
+    size?: BadgeSize;
 }
 
+export declare type BadgeSize = keyof typeof sizeStyles_5;
+
 export declare type BadgeVariant = keyof typeof variantStyles_2;
 
+/**
+ * Breadcrumb navigation with support for links, selectors, and icons.
+ *
+ * Each segment can be:
+ * - **Static text** — plain label (last segment, current page)
+ * - **Link** — clickable label that navigates to a parent page
+ * - **Selector** — label + chevron dropdown to switch between siblings
+ *   (e.g. switch repos). The label can also be a link independently.
+ *
+ * Usage:
+ * ```tsx
+ * <Breadcrumb
+ *   items={[
+ *     { label: "Repositories", href: "/repositories" },
+ *     { label: "landing", href: "/repos/landing", selector: true, options: repos, value: "landing" },
+ *     { label: "Settings" },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function Breadcrumb({ items, linkComponent: LinkEl, className, }: BreadcrumbProps): JSX.Element;
+
+export declare interface BreadcrumbItem {
+    /** Display label for this segment */
+    readonly label: string;
+    /** Optional icon rendered before the label */
+    readonly icon?: ReactNode;
+    /** Link URL — makes the label a clickable link */
+    readonly href?: string;
+    /** Enable a dropdown selector (ChevronUpDown trigger) */
+    readonly selector?: boolean;
+    /** Options for the selector dropdown */
+    readonly options?: BreadcrumbOption[];
+    /** Callback when a selector option is chosen */
+    readonly onSelect?: (value: string) => void;
+    /** Currently selected value for the selector */
+    readonly value?: string;
+}
+
+export declare interface BreadcrumbOption {
+    readonly value: string;
+    readonly label: string;
+    readonly icon?: ReactNode;
+    readonly [key: string]: unknown;
+}
+
+export declare interface BreadcrumbProps {
+    /** Breadcrumb segments */
+    readonly items: BreadcrumbItem[];
+    /** Custom link component (e.g. TanStack Router's Link, Next.js Link). Defaults to <a>. */
+    readonly linkComponent?: LinkComponent;
+    readonly className?: string;
+}
+
 /**
  * Button component built on Base UI with Tailwind CSS styling.
  *
@@ -230,6 +292,23 @@ export declare type BadgeVariant = keyof typeof variantStyles_2;
  */
 export declare const Button: ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & RefAttributes<HTMLElement>>;
 
+/**
+ * Groups buttons together visually by merging their borders.
+ *
+ * Use for static button groups (e.g. a split button with a dropdown trigger).
+ * For toggle button groups with selection state, use `ToggleButtonGroup`.
+ *
+ * Children should be `Button` or `ToggleButton` components. The group
+ * removes inner border radii and collapses adjacent borders so the buttons
+ * read as a single connected surface.
+ */
+export declare const ButtonGroup: ForwardRefExoticComponent<ButtonGroupProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface ButtonGroupProps extends ComponentPropsWithoutRef<"div"> {
+    /** Orientation of the group */
+    orientation?: "horizontal" | "vertical";
+}
+
 export declare interface ButtonProps extends ComponentProps<typeof Button_2> {
     /** Visual style variant */
     variant?: ButtonVariant;
@@ -311,29 +390,13 @@ declare type CardVariant = keyof typeof variantStyles;
  * 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;
+export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface CheckboxProps extends ComponentPropsWithoutRef<typeof Checkbox_2.Root> {
     /** 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;
@@ -367,6 +430,8 @@ export declare const ComboboxButton: ForwardRefExoticComponent<ComboboxButtonPro
 export declare interface ComboboxButtonProps {
     /** Placeholder text shown when no value is selected */
     placeholder?: string;
+    /** Size of the button */
+    size?: ButtonSize;
     className?: string;
 }
 
@@ -394,6 +459,28 @@ export declare interface ComboboxContentProps {
     className?: string;
 }
 
+/**
+ * Groups related combobox items with an optional label.
+ * Wraps Base UI's Combobox.Group.
+ */
+export declare const ComboboxGroup: ForwardRefExoticComponent<ComboboxGroupProps & RefAttributes<HTMLDivElement>>;
+
+/**
+ * Accessible label automatically associated with its parent group.
+ * Renders via Menu.GroupLabel for consistent styling.
+ */
+export declare const ComboboxGroupLabel: ForwardRefExoticComponent<ComboboxGroupLabelProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface ComboboxGroupLabelProps {
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+
+export declare interface ComboboxGroupProps {
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+
 export declare interface ComboboxItem {
     readonly value: string;
     readonly label: string;
@@ -429,6 +516,16 @@ export declare interface ComboboxProps {
     readonly className?: string;
 }
 
+/**
+ * Visual separator between combobox groups.
+ * Renders via Menu.Separator for consistent styling.
+ */
+export declare const ComboboxSeparator: ForwardRefExoticComponent<ComboboxSeparatorProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface ComboboxSeparatorProps {
+    readonly className?: string;
+}
+
 /**
  * Fully composable trigger. Renders whatever children you give it as the
  * element that opens the combobox popup.
@@ -597,7 +694,7 @@ export declare interface DataTableProps<TData> {
  * />
  * ```
  */
-export declare function DataTableSearch({ value, onChange, placeholder, className, }: DataTableSearchProps): JSX.Element;
+export declare const DataTableSearch: ForwardRefExoticComponent<DataTableSearchProps & RefAttributes<HTMLDivElement>>;
 
 export declare interface DataTableSearchProps {
     /** Current search value */
@@ -630,7 +727,7 @@ export declare interface DataTableSearchProps {
  * </DataTableToolbar>
  * ```
  */
-export declare function DataTableToolbar({ children, className, }: DataTableToolbarProps): JSX.Element;
+export declare const DataTableToolbar: ForwardRefExoticComponent<DataTableToolbarProps & RefAttributes<HTMLDivElement>>;
 
 export declare interface DataTableToolbarProps {
     /** Toolbar contents -- typically DataTableSearch, Select, Combobox, Button, etc. */
@@ -645,10 +742,11 @@ export declare const Dialog: {
     Content: typeof DialogContent;
     Panel: ForwardRefExoticComponent<DialogPanelProps & RefAttributes<HTMLDivElement>>;
     Title: ForwardRefExoticComponent<Omit<DialogTitleProps, "ref"> & RefAttributes<HTMLHeadingElement>>;
+    /** @deprecated Use a plain `<p>` inside Dialog.Body instead. */
+    Description: ForwardRefExoticComponent<Omit<AlertDialogDescriptionProps_2, "ref"> & RefAttributes<HTMLParagraphElement>>;
     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> {
@@ -668,9 +766,6 @@ export declare interface DialogContentProps extends ComponentProps<typeof Dialog
     size?: DialogSize;
 }
 
-export declare interface DialogDescriptionProps extends ComponentProps<typeof Dialog_2.Description> {
-}
-
 export declare interface DialogFooterProps {
     className?: string;
     children: ReactNode;
@@ -686,7 +781,7 @@ 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 type DialogSize = keyof typeof sizeStyles_6;
 
 export declare interface DialogTitleProps extends ComponentProps<typeof Dialog_2.Title> {
 }
@@ -738,7 +833,7 @@ export declare interface DrawerBodyProps {
 }
 
 export declare interface DrawerCloseProps extends ComponentProps<typeof Drawer_2.Close> {
-    /** Show default X icon. Default: true when no children. */
+    /** Show default XMarkIcon icon. Default: true when no children. */
     asIcon?: boolean;
 }
 
@@ -935,7 +1030,7 @@ export declare interface FormTextareaProps extends ComponentProps<typeof Field.C
  * 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 Hover({ children, active, background, backgroundClassName, borderRadius, focus, interactive, instantHover, disabled, fullWidth, className, ...rest }: HoverProps): JSX.Element;
 
 export declare function HoverGroup({ children, background, borderRadius, className, }: HoverGroupProps): JSX.Element;
 
@@ -948,7 +1043,7 @@ export declare interface HoverGroupProps {
     className?: string;
 }
 
-export declare interface HoverProps {
+export declare interface HoverProps extends Omit<ComponentProps<"div">, "children"> {
     children: ReactNode;
     /** Force the hover background visible (e.g. active/selected state) */
     active?: boolean;
@@ -969,7 +1064,6 @@ export declare interface HoverProps {
     disabled?: boolean;
     /** Stretch to full width */
     fullWidth?: boolean;
-    className?: string;
 }
 
 declare type LinkComponent = ComponentType<{
@@ -979,6 +1073,13 @@ declare type LinkComponent = ComponentType<{
     children?: ReactNode;
 }>;
 
+declare type LinkComponent_2 = ComponentType<{
+    to?: string;
+    href?: string;
+    className?: string;
+    children?: ReactNode;
+}>;
+
 /**
  * CodeRabbit logo mark.
  */
@@ -1002,7 +1103,7 @@ declare type LogoVariant = "mark" | "circle";
  * 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 function NavLink({ active, icon, href, onClick, size, className, children, }: NavLinkProps): JSX.Element;
 
 export declare interface NavLinkProps {
     /** Whether this link is the currently active/selected item */
@@ -1013,6 +1114,8 @@ export declare interface NavLinkProps {
     href?: string;
     /** Click handler */
     onClick?: () => void;
+    /** Size of the nav link */
+    size?: NavLinkSize;
     className?: string;
     children: ReactNode;
 }
@@ -1025,26 +1128,35 @@ export declare interface NavLinkProps {
  */
 export declare function NavLinks({ className, children }: NavLinksProps): JSX.Element;
 
+export declare type NavLinkSize = keyof typeof sizeStyles_4;
+
 export declare interface NavLinksProps {
     className?: string;
     children: ReactNode;
 }
 
 /**
- * Full-page layout shell.
+ * Full-page layout shell with a sidebar and content area.
  *
- * Provides the standard page structure:
- * base background → header → content panel with nav.
+ * Structure: sidebar (fixed width) + content panel (flex-1).
+ * The content panel renders as a rounded card on bg-cui-base-0.
  */
-export declare const PageLayout: ForwardRefExoticComponent<PageLayoutProps & RefAttributes<HTMLDivElement>>;
+export declare const PageLayout: ForwardRefExoticComponent<PageLayoutProps & RefAttributes<HTMLDivElement>> & {
+    Header: ForwardRefExoticComponent<Omit<PageLayoutHeaderProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Body: ForwardRefExoticComponent<Omit<PageLayoutBodyProps, "ref"> & RefAttributes<HTMLDivElement>>;
+};
+
+export declare interface PageLayoutBodyProps extends ComponentProps<"div"> {
+}
+
+export declare interface PageLayoutHeaderProps extends ComponentProps<"div"> {
+}
 
 export declare interface PageLayoutProps {
-    /** Header content (typically AppHeader) */
-    header?: ReactNode;
-    /** Navigation content (typically NavLinks) */
-    nav?: ReactNode;
-    className?: string;
-    children: ReactNode;
+    /** Sidebar content */
+    readonly sidebar?: ReactNode;
+    readonly className?: string;
+    readonly children: ReactNode;
 }
 
 /**
@@ -1054,7 +1166,7 @@ export declare interface PageLayoutProps {
  * 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 const Pagination: ForwardRefExoticComponent<PaginationProps & RefAttributes<HTMLElement>>;
 
 export declare interface PaginationProps {
     /** Current page (1-indexed) */
@@ -1063,7 +1175,7 @@ export declare interface PaginationProps {
     pageCount: number;
     /** Called when the page changes */
     onPageChange?: (page: number) => void;
-    /** Total item count - shows "1–10 of X" when provided */
+    /** Total item count - shows "1–10 of XMarkIcon" when provided */
     totalItems?: number;
     /** Rows per page - shows selector when provided with onRowsPerPageChange */
     rowsPerPage?: number;
@@ -1073,9 +1185,13 @@ export declare interface PaginationProps {
     rowOptions?: number[];
     /** Number of sibling pages to show around active page. Default 1 */
     siblingCount?: number;
+    /** Size of the pagination controls */
+    size?: PaginationSize;
     className?: string;
 }
 
+export declare type PaginationSize = keyof typeof sizeStyles_7;
+
 /**
  * A 3x3 pixel-grid spinner with configurable animation variants.
  *
@@ -1166,6 +1282,23 @@ export declare interface PopoverTitleProps {
 export declare interface PopoverTriggerProps extends ComponentProps<typeof Popover_2.Trigger> {
 }
 
+export declare const RadioGroup: {
+    Root: ForwardRefExoticComponent<Omit<RadioGroupRootProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Item: ForwardRefExoticComponent<Omit<RadioGroupItemProps, "ref"> & RefAttributes<HTMLSpanElement>>;
+};
+
+export declare interface RadioGroupItemProps extends ComponentProps<typeof Radio.Root> {
+    /** Size of the radio indicator */
+    size?: RadioGroupItemSize;
+    /** Label text rendered beside the radio */
+    label?: string;
+}
+
+export declare type RadioGroupItemSize = keyof typeof sizeStyles_10;
+
+export declare interface RadioGroupRootProps extends ComponentProps<typeof RadioGroup_2> {
+}
+
 export { Row }
 
 export { RowSelectionState }
@@ -1205,7 +1338,7 @@ export declare interface SaveBarProps {
  * - `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 const SegmentedControl: <T extends string = string>(props: SegmentedControlProps<T> & default_2.RefAttributes<HTMLDivElement>) => default_2.ReactElement | null;
 
 export declare interface SegmentedControlOption<T extends string = string> {
     value: T;
@@ -1228,9 +1361,13 @@ export declare interface SegmentedControlProps<T extends string = string> {
      * - `fit` - segments hug their content
      */
     layout?: "fill" | "fit";
+    /** Size of the segmented control items */
+    size?: SegmentedControlSize;
     className?: string;
 }
 
+export declare type SegmentedControlSize = keyof typeof sizeStyles_8;
+
 /**
  * Select component for choosing from a list of predefined options.
  *
@@ -1249,6 +1386,8 @@ export declare const SelectButton: ForwardRefExoticComponent<SelectButtonProps &
 export declare interface SelectButtonProps {
     /** Placeholder text shown when no value is selected */
     placeholder?: string;
+    /** Size of the button */
+    size?: ButtonSize;
     className?: string;
 }
 
@@ -1427,6 +1566,149 @@ export declare interface SettingsRowProps {
     className?: string;
 }
 
+export declare const Sidebar: typeof SidebarRoot & {
+    Section: typeof SidebarSection;
+    Header: typeof SidebarHeader;
+    Label: ForwardRefExoticComponent<Omit<SidebarLabelProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Link: typeof SidebarLink;
+    BackLink: typeof SidebarBackLink;
+    CollapseButton: typeof SidebarCollapseButton;
+    Layers: typeof SidebarLayers;
+};
+
+declare function SidebarBackLink({ name, onClick, className }: SidebarBackLinkProps): JSX.Element;
+
+export declare interface SidebarBackLinkProps {
+    /** Display name */
+    readonly name: string;
+    /** Click handler */
+    readonly onClick?: () => void;
+    readonly className?: string;
+}
+
+declare function SidebarCollapseButton({ className }: SidebarCollapseButtonProps): JSX.Element;
+
+export declare interface SidebarCollapseButtonProps {
+    readonly className?: string;
+}
+
+declare interface SidebarContextValue {
+    readonly collapsed: boolean;
+    readonly toggle: () => void;
+}
+
+/**
+ * Header row that smoothly hides its children when the sidebar collapses.
+ *
+ * Matches the Vue DSidebar header pattern:
+ * - `AnimatePresence mode="popLayout"` keeps CollapseButton stable in layout
+ * - Children slide out with `x: -320, scale: 0.5` spring animation
+ * - Row uses `justify-center` so CollapseButton centers when collapsed
+ * - Padding `px-2` only applied when expanded
+ *
+ * Usage:
+ * ```tsx
+ * <Sidebar.Header>
+ *   <Logo />
+ *   <span>CodeRabbit</span>
+ * </Sidebar.Header>
+ * ```
+ * The `CollapseButton` is rendered automatically at the end of the row.
+ */
+declare function SidebarHeader({ className, children }: SidebarHeaderProps): JSX.Element;
+
+declare interface SidebarHeaderProps {
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+
+export declare interface SidebarLabelProps extends ComponentProps<"div"> {
+}
+
+/**
+ * Wraps sidebar content in directional slide animations.
+ *
+ * When `activeKey` changes, the old content slides out and new content
+ * slides in. `direction="forward"` slides left (drilling in),
+ * `direction="back"` slides right (going up).
+ *
+ * Usage:
+ * ```tsx
+ * <Sidebar.Layers activeKey={currentSection} direction={navDirection}>
+ *   {currentSection === "main" ? <MainNav /> : <SettingsNav />}
+ * </Sidebar.Layers>
+ * ```
+ */
+declare function SidebarLayers({ activeKey, direction, className, children, }: SidebarLayersProps): JSX.Element;
+
+export declare interface SidebarLayersProps {
+    /** Unique key for the current layer — changes trigger the animation */
+    readonly activeKey: string;
+    /** Direction of the transition: forward drills in, back goes up */
+    readonly direction?: "forward" | "back";
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+
+declare function SidebarLink({ name, href, as, active, icon, nested, external, showIndicator, onClick, className, }: SidebarLinkProps): JSX.Element;
+
+export declare interface SidebarLinkProps {
+    /** Display name */
+    readonly name: string;
+    /** Link URL (renders as <a>) or omit for button */
+    readonly href?: string;
+    /** Render as "div" when nested inside an interactive container (e.g. DropdownMenu.Trigger) to avoid nested <button> */
+    readonly as?: "div";
+    /** Whether this link is currently active */
+    readonly active?: boolean;
+    /** Icon component rendered before the name */
+    readonly icon?: ReactNode;
+    /** Show a trailing chevron indicating navigation to a nested layer */
+    readonly nested?: boolean;
+    /** Show an external link arrow and open in new tab */
+    readonly external?: boolean;
+    /** Show a pulsing activity indicator dot */
+    readonly showIndicator?: boolean;
+    /** Click handler */
+    readonly onClick?: () => void;
+    readonly className?: string;
+}
+
+/**
+ * Sidebar with collapsible state and directional layer transitions.
+ *
+ * Supports both uncontrolled (`defaultCollapsed`) and controlled
+ * (`collapsed` + `onCollapsedChange`) modes. Use controlled mode
+ * to persist state across route changes or sync with external storage.
+ *
+ * Sub-components:
+ * - `Sidebar.Section` — groups related links
+ * - `Sidebar.Label` — section label that collapses smoothly
+ * - `Sidebar.Link` — nav link with Hover + Tooltip
+ * - `Sidebar.BackLink` — back navigation with directional slide
+ * - `Sidebar.CollapseButton` — toggle sidebar width
+ * - `Sidebar.Layers` — directional animation container for nested sidebars
+ */
+declare function SidebarRoot({ defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange, className, children, }: SidebarRootProps): JSX.Element;
+
+export declare interface SidebarRootProps {
+    /** Start in collapsed state (uncontrolled) */
+    readonly defaultCollapsed?: boolean;
+    /** Controlled collapsed state */
+    readonly collapsed?: boolean;
+    /** Callback when collapsed state changes (controlled mode) */
+    readonly onCollapsedChange?: (collapsed: boolean) => void;
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+
+declare function SidebarSection({ className, children }: SidebarSectionProps): JSX.Element;
+
+export declare interface SidebarSectionProps {
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+
 declare const sizeStyles: {
     readonly xs: {
         readonly height: "h-6";
@@ -1448,6 +1730,19 @@ declare const sizeStyles: {
     };
 };
 
+declare const sizeStyles_10: {
+    readonly sm: {
+        readonly radio: "size-4";
+        readonly indicator: "size-1.5";
+        readonly label: "text-cui-sm";
+    };
+    readonly md: {
+        readonly radio: "size-[18px]";
+        readonly indicator: "size-2";
+        readonly label: "text-cui-base";
+    };
+};
+
 declare const sizeStyles_2: {
     readonly sm: {
         readonly track: "w-9 h-5";
@@ -1463,20 +1758,69 @@ declare const sizeStyles_3: {
     readonly sm: {
         readonly root: "size-4 rounded-[4px]";
         readonly icon: "size-3";
-        readonly label: "text-xs";
+        readonly label: "text-cui-sm";
     };
     readonly md: {
         readonly root: "size-[18px] rounded-[5px]";
         readonly icon: "size-3.5";
-        readonly label: "text-sm";
+        readonly label: "text-cui-base";
     };
 };
 
 declare const sizeStyles_4: {
+    readonly sm: "h-7 px-1.5";
+    readonly md: "h-8 px-1.5";
+};
+
+declare const sizeStyles_5: {
+    readonly sm: "px-1.5 py-0.5 text-cui-sm";
+    readonly md: "px-2 py-0.5 text-cui-base";
+};
+
+declare const sizeStyles_6: {
     readonly md: "max-w-[450px]";
     readonly lg: "max-w-[550px]";
 };
 
+declare const sizeStyles_7: {
+    readonly sm: {
+        readonly button: "size-7";
+        readonly icon: "size-4";
+        readonly strip: "h-9";
+    };
+    readonly md: {
+        readonly button: "size-8";
+        readonly icon: "size-4";
+        readonly strip: "h-10";
+    };
+};
+
+declare const sizeStyles_8: {
+    readonly sm: "h-7 px-2.5";
+    readonly md: "h-8 px-3";
+};
+
+declare const sizeStyles_9: {
+    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";
+    };
+};
+
 /**
  * Skeleton loading placeholder with a sweeping pixel wave.
  *
@@ -1588,6 +1932,11 @@ export declare const Tabs: {
     Panel: ForwardRefExoticComponent<Omit<TabsPanelProps, "ref"> & RefAttributes<HTMLDivElement>>;
 };
 
+declare const tabSizeStyles: {
+    readonly sm: "h-7 px-2.5";
+    readonly md: "h-8 px-3";
+};
+
 export declare interface TabsListProps extends ComponentProps<typeof Tabs_2.List> {
     /**
      * Layout mode:
@@ -1604,8 +1953,12 @@ export declare interface TabsRootProps extends ComponentProps<typeof Tabs_2.Root
 }
 
 export declare interface TabsTabProps extends ComponentProps<typeof Tabs_2.Tab> {
+    /** Size of the tab */
+    size?: TabsTabSize;
 }
 
+export declare type TabsTabSize = keyof typeof tabSizeStyles;
+
 export declare type ThemeMode = "light" | "dark" | "system";
 
 /**
@@ -1613,19 +1966,57 @@ export declare type ThemeMode = "light" | "dark" | "system";
  */
 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;
+/**
+ * A two-state button that can be pressed or unpressed.
+ *
+ * Built on Base UI Toggle. Visually matches the Button component but
+ * toggles between pressed/unpressed states. Uses `data-[pressed]` for
+ * the active visual.
+ *
+ * Use standalone for single toggles (like a bold button in a toolbar).
+ * Use inside a `ToggleButtonGroup` for mutually exclusive or multi-select
+ * button groups.
+ */
+export declare const ToggleButton: ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Groups toggle buttons with shared selection state.
+ *
+ * Built on Base UI ToggleGroup. When `multiple` is false (default),
+ * pressing one button unpresses the others. When true, any combination
+ * of buttons can be pressed.
+ *
+ * Children should be `ToggleButton` components with `value` props.
+ */
+export declare const ToggleButtonGroup: ForwardRefExoticComponent<ToggleButtonGroupProps<string> & RefAttributes<HTMLDivElement>>;
+
+export declare interface ToggleButtonGroupProps<Value extends string = string> extends Omit<ComponentPropsWithoutRef<typeof ToggleGroup>, "value" | "defaultValue" | "onValueChange"> {
+    /** Controlled pressed values */
+    value?: readonly Value[];
+    /** Uncontrolled default pressed values */
+    defaultValue?: readonly Value[];
+    /** Called when the pressed states change */
+    onValueChange?: (value: Value[]) => void;
+    /** When false, only one toggle can be pressed at a time */
+    multiple?: boolean;
+    /** Orientation of the group */
+    orientation?: "horizontal" | "vertical";
+}
+
+export declare interface ToggleButtonProps extends ComponentProps<typeof Toggle_2> {
+    /** Size of the toggle button */
+    size?: ToggleButtonSize;
+    /** Icon element rendered before the label */
+    iconLeft?: ReactNode;
+    /** Icon element rendered after the label */
+    iconRight?: ReactNode;
+}
+
+export declare type ToggleButtonSize = keyof typeof sizeStyles_9;
+
+export declare interface ToggleProps extends ComponentPropsWithoutRef<typeof Switch.Root> {
     /** Size of the toggle. */
     size?: ToggleSize;
-    /** Additional class name for the root element. */
-    className?: string;
 }
 
 declare type ToggleSize = keyof typeof sizeStyles_2;
@@ -1687,10 +2078,10 @@ export declare function useDirtyState<T extends object>(initial: T): DirtyState<
  * 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.
+ * 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 function UserMenu({ user, theme, onThemeChange, items, onLogout, children, side, align, className, }: UserMenuProps): JSX.Element;
 
 export declare interface UserMenuItem {
     label: string;
@@ -1709,6 +2100,12 @@ export declare interface UserMenuProps {
     items?: UserMenuItem[];
     /** Called when "Log out" is clicked */
     onLogout?: () => void;
+    /** Custom trigger content. Defaults to a bare Avatar. */
+    children?: ReactNode;
+    /** Which side the dropdown opens on */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Alignment of the dropdown relative to the trigger */
+    align?: "start" | "center" | "end";
     className?: string;
 }
 
@@ -1723,6 +2120,8 @@ export declare interface UserMenuUser {
     initials?: string;
 }
 
+export declare function useSidebar(): SidebarContextValue;
+
 declare const variantConfig: {
     readonly primary: {
         readonly active: true;
@@ -1763,7 +2162,7 @@ declare const variantConfig: {
 };
 
 declare const variantConfig_2: {
-    readonly info: {
+    readonly accent: {
         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";
@@ -1783,7 +2182,7 @@ declare const variantConfig_2: {
         titleId?: string;
         } & RefAttributes<SVGSVGElement>>;
     };
-    readonly warning: {
+    readonly warn: {
         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";
@@ -1814,7 +2213,7 @@ 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 warn: "bg-cui-warn-subtle text-cui-warn";
     readonly success: "bg-cui-success-subtle text-cui-success";
 };