@coderabbitai/carrot-ui 0.1.20 → 0.1.21

package/dist/index.d.ts

@@ -1,13 +1,16 @@
 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 { 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 +19,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 +29,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 +58,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 +114,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;
@@ -174,9 +189,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,12 +228,15 @@ 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;
 
 /**
@@ -230,6 +248,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 +346,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 +386,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;
 }
 
@@ -597,7 +618,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 +651,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. */
@@ -686,7 +707,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 +759,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;
 }
 
@@ -1002,7 +1023,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 +1034,8 @@ export declare interface NavLinkProps {
     href?: string;
     /** Click handler */
     onClick?: () => void;
+    /** Size of the nav link */
+    size?: NavLinkSize;
     className?: string;
     children: ReactNode;
 }
@@ -1025,26 +1048,49 @@ 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).
  */
-export declare const PageLayout: ForwardRefExoticComponent<PageLayoutProps & RefAttributes<HTMLDivElement>>;
+export declare const PageLayout: ForwardRefExoticComponent<PageLayoutProps & RefAttributes<HTMLDivElement>> & {
+    Sidebar: (({ defaultCollapsed, className, children, }: SidebarRootProps) => JSX.Element) & {
+        Header: ForwardRefExoticComponent<Omit<SidebarHeaderProps, "ref"> & RefAttributes<HTMLDivElement>>;
+        CollapseButton: ({ className }: SidebarCollapseButtonProps) => JSX.Element | null;
+        BackButton: ({ onClick, className, children, }: SidebarBackButtonProps) => JSX.Element;
+        Label: ForwardRefExoticComponent<Omit<SidebarLabelProps, "ref"> & RefAttributes<HTMLSpanElement>>;
+        Search: ({ label, icon, onClick, className, }: SidebarSearchProps) => JSX.Element;
+        Nav: ({ className, children }: SidebarNavProps) => JSX.Element;
+        NavItem: ({ active, nested, icon, href, onClick, className, children, }: SidebarNavItemProps) => JSX.Element;
+        Footer: ForwardRefExoticComponent<Omit<SidebarFooterProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    };
+    SidebarHeader: ForwardRefExoticComponent<Omit<SidebarHeaderProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    SidebarSearch: ({ label, icon, onClick, className, }: SidebarSearchProps) => JSX.Element;
+    SidebarNav: ({ className, children }: SidebarNavProps) => JSX.Element;
+    SidebarNavItem: ({ active, nested, icon, href, onClick, className, children, }: SidebarNavItemProps) => JSX.Element;
+    SidebarFooter: ForwardRefExoticComponent<Omit<SidebarFooterProps, "ref"> & 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 (typically PageLayout.Sidebar) */
+    readonly sidebar?: ReactNode;
+    readonly className?: string;
+    readonly children: ReactNode;
 }
 
 /**
@@ -1054,7 +1100,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 +1109,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 +1119,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 +1216,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 +1272,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 +1295,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 +1320,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 +1500,98 @@ export declare interface SettingsRowProps {
     className?: string;
 }
 
+export declare const Sidebar: typeof SidebarRoot & {
+    Header: ForwardRefExoticComponent<Omit<SidebarHeaderProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    CollapseButton: typeof SidebarCollapseButton;
+    BackButton: typeof SidebarBackButton;
+    Label: ForwardRefExoticComponent<Omit<SidebarLabelProps, "ref"> & RefAttributes<HTMLSpanElement>>;
+    Search: typeof SidebarSearch;
+    Nav: typeof SidebarNav;
+    NavItem: typeof SidebarNavItem;
+    Footer: ForwardRefExoticComponent<Omit<SidebarFooterProps, "ref"> & RefAttributes<HTMLDivElement>>;
+};
+
+/**
+ * Back navigation row for nested sidebar contexts.
+ * Replaces the org switcher header when drilling into a sub-section.
+ * Shows ArrowLeftIcon + section title when expanded, just the arrow when collapsed.
+ */
+declare function SidebarBackButton({ onClick, className, children, }: SidebarBackButtonProps): JSX.Element;
+
+export declare interface SidebarBackButtonProps {
+    /** Click handler — typically navigates back to the parent route */
+    readonly onClick?: () => void;
+    readonly className?: string;
+    /** Section title displayed next to the back arrow */
+    readonly children: ReactNode;
+}
+
+/**
+ * Toggle button for collapsing/expanding the sidebar.
+ * Chevron direction flips based on collapsed state.
+ */
+declare function SidebarCollapseButton({ className }: SidebarCollapseButtonProps): JSX.Element | null;
+
+export declare interface SidebarCollapseButtonProps {
+    readonly className?: string;
+}
+
+export declare interface SidebarContextValue {
+    readonly collapsed: boolean;
+    readonly toggle: () => void;
+}
+
+export declare interface SidebarFooterProps extends ComponentProps<"div"> {
+}
+
+export declare interface SidebarHeaderProps extends ComponentProps<"div"> {
+}
+
+export declare interface SidebarLabelProps extends ComponentProps<"span"> {
+}
+
+declare function SidebarNav({ className, children }: SidebarNavProps): JSX.Element;
+
+declare function SidebarNavItem({ active, nested, icon, href, onClick, className, children, }: SidebarNavItemProps): JSX.Element;
+
+export declare interface SidebarNavItemProps {
+    readonly active?: boolean;
+    /** Show a trailing chevron indicating this item navigates to a nested section */
+    readonly nested?: boolean;
+    readonly icon?: ReactNode;
+    readonly href?: string;
+    readonly onClick?: () => void;
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+
+export declare interface SidebarNavProps {
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+
+/**
+ * Sidebar panel with collapsible state.
+ * Provides collapsed/toggle context to all sub-components.
+ */
+declare function SidebarRoot({ defaultCollapsed, className, children, }: SidebarRootProps): JSX.Element;
+
+export declare interface SidebarRootProps {
+    /** Start in collapsed state */
+    readonly defaultCollapsed?: boolean;
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+
+declare function SidebarSearch({ label, icon, onClick, className, }: SidebarSearchProps): JSX.Element;
+
+export declare interface SidebarSearchProps {
+    readonly label?: string;
+    readonly icon?: ReactNode;
+    readonly onClick?: () => void;
+    readonly className?: string;
+}
+
 declare const sizeStyles: {
     readonly xs: {
         readonly height: "h-6";
@@ -1448,6 +1613,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 +1641,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 +1815,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 +1836,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 +1849,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 +1961,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 +1983,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 +2003,8 @@ export declare interface UserMenuUser {
     initials?: string;
 }
 
+export declare function useSidebar(): SidebarContextValue;
+
 declare const variantConfig: {
     readonly primary: {
         readonly active: true;
@@ -1763,7 +2045,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 +2065,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 +2096,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";
 };