@coderabbitai/carrot-ui 0.1.23 → 0.2.1

package/dist/index.d.ts

@@ -1590,6 +1590,7 @@ export declare interface SettingsRowProps {
 }
 
 export declare const Sidebar: typeof SidebarRoot & {
+    Provider: typeof SidebarProvider;
     Section: typeof SidebarSection;
     Header: typeof SidebarHeader;
     Label: ForwardRefExoticComponent<Omit<SidebarLabelProps, "ref"> & RefAttributes<HTMLDivElement>>;
@@ -1618,6 +1619,10 @@ export declare interface SidebarCollapseButtonProps {
 declare interface SidebarContextValue {
     readonly collapsed: boolean;
     readonly toggle: () => void;
+    readonly linkComponent?: SidebarLinkComponent;
+    readonly mobile: boolean;
+    readonly mobileOpen: boolean;
+    readonly setMobileOpen: (open: boolean) => void;
 }
 
 /**
@@ -1640,7 +1645,7 @@ declare interface SidebarContextValue {
  */
 declare function SidebarHeader({ className, children }: SidebarHeaderProps): JSX.Element;
 
-declare interface SidebarHeaderProps {
+export declare interface SidebarHeaderProps {
     readonly className?: string;
     readonly children: ReactNode;
 }
@@ -1673,14 +1678,21 @@ export declare interface SidebarLayersProps {
     readonly children: ReactNode;
 }
 
-declare function SidebarLink({ name, href, as, active, icon, nested, external, showIndicator, onClick, className, }: SidebarLinkProps): JSX.Element;
+declare function SidebarLink({ name, href, as, active, icon, nested, external, showIndicator, trailing, disabled, loading, onClick, className, ...rest }: SidebarLinkProps): JSX.Element;
 
-export declare interface SidebarLinkProps {
+export declare type SidebarLinkComponent = ComponentType<{
+    readonly to?: string;
+    readonly href?: string;
+    readonly className?: string;
+    readonly children?: ReactNode;
+}>;
+
+export declare interface SidebarLinkProps extends Omit<ComponentProps<"div">, "children"> {
     /** Display name */
     readonly name: string;
-    /** Link URL (renders as <a>) or omit for button */
+    /** Link URL — renders via `linkComponent` (or native `<a>` if none provided) */
     readonly href?: string;
-    /** Render as "div" when nested inside an interactive container (e.g. DropdownMenu.Trigger) to avoid nested <button> */
+    /** 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;
@@ -1692,35 +1704,69 @@ export declare interface SidebarLinkProps {
     readonly external?: boolean;
     /** Show a pulsing activity indicator dot */
     readonly showIndicator?: boolean;
+    /** Arbitrary trailing content rendered after the name (e.g. badges, lock icons) */
+    readonly trailing?: ReactNode;
+    /** Disable the link — reduces opacity and prevents clicks */
+    readonly disabled?: boolean;
+    /** Show a skeleton placeholder instead of the link content */
+    readonly loading?: boolean;
     /** Click handler */
     readonly onClick?: () => void;
-    readonly className?: string;
 }
 
 /**
- * Sidebar with collapsible state and directional layer transitions.
+ * Context-only provider for sidebar state — no visual output.
  *
- * Supports both uncontrolled (`defaultCollapsed`) and controlled
- * (`collapsed` + `onCollapsedChange`) modes. Use controlled mode
- * to persist state across route changes or sync with external storage.
+ * Wrap your entire page layout with this when you need `useSidebar()`
+ * outside the visual `<Sidebar>` container (e.g. in the page header
+ * or in portaled components).
  *
- * 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
+ * When `<Sidebar>` is rendered inside a `<Sidebar.Provider>`, it
+ * skips creating its own context and uses the provider's state.
+ *
+ * ```tsx
+ * <Sidebar.Provider collapsed={collapsed} onCollapsedChange={setCollapsed}>
+ *   <PageLayout sidebar={<Sidebar>...</Sidebar>}>
+ *     <MyHeader />
+ *   </PageLayout>
+ * </Sidebar.Provider>
+ * ```
  */
-declare function SidebarRoot({ defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange, className, children, }: SidebarRootProps): JSX.Element;
+declare function SidebarProvider({ defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange, linkComponent, children, }: SidebarProviderProps): JSX.Element;
 
-export declare interface SidebarRootProps {
+export declare interface SidebarProviderProps {
     /** 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;
+    /** Custom link component for client-side navigation */
+    readonly linkComponent?: SidebarLinkComponent;
+    readonly children: ReactNode;
+}
+
+/**
+ * Responsive sidebar with collapsible state and directional layer transitions.
+ *
+ * When rendered inside a `<Sidebar.Provider>`, uses the provider's context
+ * and only renders the visual shell. Otherwise, creates its own context.
+ *
+ * **Desktop** (`md:` and up): renders inline with collapse/expand animation.
+ * **Mobile** (below `md:`): shows collapsed icons inline. Tapping an icon
+ * or the collapse button opens the full sidebar in a left-side Drawer.
+ */
+declare function SidebarRoot({ defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange, linkComponent, className, children, }: SidebarRootProps): JSX.Element;
+
+export declare interface SidebarRootProps {
+    /** Start in collapsed state (uncontrolled). Ignored when inside a Sidebar.Provider. */
+    readonly defaultCollapsed?: boolean;
+    /** Controlled collapsed state. Ignored when inside a Sidebar.Provider. */
+    readonly collapsed?: boolean;
+    /** Callback when collapsed state changes. Ignored when inside a Sidebar.Provider. */
+    readonly onCollapsedChange?: (collapsed: boolean) => void;
+    /** Custom link component for client-side navigation. Ignored when inside a Sidebar.Provider. */
+    readonly linkComponent?: SidebarLinkComponent;
     readonly className?: string;
     readonly children: ReactNode;
 }