@coderabbitai/carrot-ui 0.1.21 → 0.1.22

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 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';
@@ -150,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;
 }
 
@@ -239,6 +229,60 @@ 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.
  *
@@ -415,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;
@@ -450,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.
@@ -666,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> {
@@ -689,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;
@@ -956,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;
 
@@ -969,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;
@@ -990,7 +1064,6 @@ export declare interface HoverProps {
     disabled?: boolean;
     /** Stretch to full width */
     fullWidth?: boolean;
-    className?: string;
 }
 
 declare type LinkComponent = ComponentType<{
@@ -1000,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.
  */
@@ -1059,23 +1139,9 @@ export declare interface NavLinksProps {
  * Full-page layout shell with a sidebar and content area.
  *
  * 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>> & {
-    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>>;
 };
@@ -1087,7 +1153,7 @@ export declare interface PageLayoutHeaderProps extends ComponentProps<"div"> {
 }
 
 export declare interface PageLayoutProps {
-    /** Sidebar content (typically PageLayout.Sidebar) */
+    /** Sidebar content */
     readonly sidebar?: ReactNode;
     readonly className?: string;
     readonly children: ReactNode;
@@ -1501,95 +1567,146 @@ export declare interface SettingsRowProps {
 }
 
 export declare const Sidebar: typeof SidebarRoot & {
-    Header: ForwardRefExoticComponent<Omit<SidebarHeaderProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Section: typeof SidebarSection;
+    Header: typeof SidebarHeader;
+    Label: ForwardRefExoticComponent<Omit<SidebarLabelProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Link: typeof SidebarLink;
+    BackLink: typeof SidebarBackLink;
     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>>;
+    Layers: typeof SidebarLayers;
 };
 
-/**
- * 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;
+declare function SidebarBackLink({ name, onClick, className }: SidebarBackLinkProps): JSX.Element;
 
-export declare interface SidebarBackButtonProps {
-    /** Click handler — typically navigates back to the parent route */
+export declare interface SidebarBackLinkProps {
+    /** Display name */
+    readonly name: string;
+    /** Click handler */
     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;
+declare function SidebarCollapseButton({ className }: SidebarCollapseButtonProps): JSX.Element;
 
 export declare interface SidebarCollapseButtonProps {
     readonly className?: string;
 }
 
-export declare interface SidebarContextValue {
+declare interface SidebarContextValue {
     readonly collapsed: boolean;
     readonly toggle: () => void;
 }
 
-export declare interface SidebarFooterProps extends ComponentProps<"div"> {
-}
+/**
+ * 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;
 
-export declare interface SidebarHeaderProps extends ComponentProps<"div"> {
+declare interface SidebarHeaderProps {
+    readonly className?: string;
+    readonly children: ReactNode;
 }
 
-export declare interface SidebarLabelProps extends ComponentProps<"span"> {
+export declare interface SidebarLabelProps extends ComponentProps<"div"> {
 }
 
-declare function SidebarNav({ className, children }: SidebarNavProps): JSX.Element;
-
-declare function SidebarNavItem({ active, nested, icon, href, onClick, className, children, }: SidebarNavItemProps): JSX.Element;
+/**
+ * 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 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;
+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;
 }
 
-export declare interface SidebarNavProps {
+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;
-    readonly children: ReactNode;
 }
 
 /**
- * Sidebar panel with collapsible state.
- * Provides collapsed/toggle context to all sub-components.
+ * 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, className, children, }: SidebarRootProps): JSX.Element;
+declare function SidebarRoot({ defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange, className, children, }: SidebarRootProps): JSX.Element;
 
 export declare interface SidebarRootProps {
-    /** Start in collapsed state */
+    /** 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 SidebarSearch({ label, icon, onClick, className, }: SidebarSearchProps): JSX.Element;
+declare function SidebarSection({ className, children }: SidebarSectionProps): JSX.Element;
 
-export declare interface SidebarSearchProps {
-    readonly label?: string;
-    readonly icon?: ReactNode;
-    readonly onClick?: () => void;
+export declare interface SidebarSectionProps {
     readonly className?: string;
+    readonly children: ReactNode;
 }
 
 declare const sizeStyles: {