@neynar/ui 0.4.0 → 0.5.0

package/dist/components/ui/sidebar.d.ts

@@ -1,9 +1,10 @@
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+import { Button } from './button';
+import { Input } from './input';
+import { Separator } from './separator';
+import { TooltipContent } from './tooltip';
 import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
-import { TooltipContent } from "@/components/ui/tooltip";
 type SidebarContextProps = {
     state: "expanded" | "collapsed";
     open: boolean;
@@ -14,1598 +15,160 @@ type SidebarContextProps = {
     toggleSidebar: () => void;
 };
 /**
- * Hook to access sidebar state and control functions
- *
- * Provides access to the sidebar's state management including expanded/collapsed states,
- * mobile-specific behavior, and toggle functions. This hook must be used within a
- * SidebarProvider component tree to function properly.
- *
- * @returns {SidebarContextProps} Object containing sidebar state and control functions:
- *   - `state`: "expanded" | "collapsed" - Current sidebar state
- *   - `open`: boolean - Whether sidebar is open (desktop)
- *   - `setOpen`: (open: boolean) => void - Function to control sidebar open state
- *   - `openMobile`: boolean - Whether sidebar is open on mobile
- *   - `setOpenMobile`: (open: boolean) => void - Function to control mobile sidebar state
- *   - `isMobile`: boolean - Whether current viewport is considered mobile
- *   - `toggleSidebar`: () => void - Function to toggle sidebar state
- *
- * @throws {Error} When used outside of SidebarProvider context
- *
- * @example
- * ```tsx
- * // Basic usage for toggle button
- * function ToggleButton() {
- *   const { state, toggleSidebar } = useSidebar()
- *   return (
- *     <button onClick={toggleSidebar}>
- *       {state === "expanded" ? "Collapse" : "Expand"}
- *     </button>
- *   )
- * }
- * ```
- *
- * @example
- * ```tsx
- * // Conditional rendering based on state
- * function ConditionalContent() {
- *   const { state, isMobile } = useSidebar()
- *   if (isMobile) return <MobileOnlyContent />
- *   return state === "expanded" ? <FullContent /> : <CompactContent />
- * }
- * ```
- *
- * @see {@link SidebarProvider} - Required context provider
- * @since 1.0.0
+ * Hook to access sidebar context including state, mobile state, and toggle functions.
+ * Must be used within SidebarProvider.
  */
 declare function useSidebar(): SidebarContextProps;
-/**
- * Context provider for comprehensive sidebar state management
- *
- * The SidebarProvider is the foundational component that manages all sidebar behavior
- * including state persistence, responsive design, keyboard shortcuts, and mobile handling.
- * It provides context to all sidebar-related components and should wrap your entire
- * application or the section containing the sidebar.
- *
- * @component
- *
- * @param {boolean} [defaultOpen=true] - Initial open state when uncontrolled
- * @param {boolean} [open] - Controlled open state (makes component controlled)
- * @param {(open: boolean) => void} [onOpenChange] - Callback for open state changes
- * @param {string} [className] - Additional CSS classes for wrapper
- * @param {React.CSSProperties} [style] - Inline styles including CSS variables
- * @param {React.ReactNode} children - Child components
- *
- * @example
- * ```tsx
- * // Basic uncontrolled usage
- * <SidebarProvider>
- *   <Sidebar />
- *   <SidebarInset>
- *     <main>Your content</main>
- *   </SidebarInset>
- * </SidebarProvider>
- * ```
- *
- * @example
- * ```tsx
- * // Controlled usage with custom state
- * function App() {
- *   const [sidebarOpen, setSidebarOpen] = useState(false)
- *   return (
- *     <SidebarProvider open={sidebarOpen} onOpenChange={setSidebarOpen}>
- *       <Sidebar />
- *       <SidebarInset>Content</SidebarInset>
- *     </SidebarProvider>
- *   )
- * }
- * ```
- *
- * @example
- * ```tsx
- * // Custom width with CSS variables
- * <SidebarProvider
- *   style={{
- *     "--sidebar-width": "20rem",
- *     "--sidebar-width-mobile": "18rem"
- *   }}
- * >
- *   <Sidebar />
- * </SidebarProvider>
- * ```
- *
- * @features
- * - State persistence via cookies
- * - Keyboard shortcut (Cmd/Ctrl+B) support
- * - Responsive mobile behavior
- * - CSS variable-based theming
- * - Tooltip provider integration
- *
- * @accessibility
- * - Keyboard shortcuts for power users
- * - Mobile-optimized touch interactions
- * - Focus management for modal-like mobile behavior
- *
- * @see {@link useSidebar} - Hook to access provided context
- * @see {@link Sidebar} - Main sidebar component
- * @since 1.0.0
- */
-declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: {
+type SidebarProviderProps = React.ComponentProps<"div"> & {
+    /** Initial open state on desktop. @default true */
     defaultOpen?: boolean;
+    /** Controlled open state for desktop. */
     open?: boolean;
+    /** Callback when open state changes. Persists state in cookie. */
     onOpenChange?: (open: boolean) => void;
-    children?: React.ReactNode;
-} & React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+};
 /**
- * Flexible and responsive navigation sidebar component
- *
- * The Sidebar component is the main container for navigation content, supporting multiple
- * visual variants, collapsible behaviors, and responsive design patterns. It automatically
- * adapts between desktop layouts and mobile sheet overlays based on viewport size.
- *
- * @component
- *
- * @param {"left" | "right"} [side="left"] - Which side of the screen the sidebar appears on
- * @param {"sidebar" | "floating" | "inset"} [variant="sidebar"] - Visual variant:
- *   - `sidebar`: Standard full-height sidebar
- *   - `floating`: Sidebar with padding, rounded corners, and shadow
- *   - `inset`: Sidebar with margin that affects main content layout
- * @param {"offcanvas" | "icon" | "none"} [collapsible="offcanvas"] - Collapse behavior:
- *   - `offcanvas`: Slides completely off-screen when collapsed
- *   - `icon`: Collapses to icon-only width, hiding text labels
- *   - `none`: Cannot be collapsed, always visible
- * @param {string} [className] - Additional CSS classes
- * @param {React.ReactNode} children - Sidebar content (Header, Content, Footer)
- *
- * @example
- * ```tsx
- * // Standard navigation sidebar
- * <SidebarProvider>
- *   <Sidebar>
- *     <SidebarHeader>
- *       <h2>My Application</h2>
- *     </SidebarHeader>
- *     <SidebarContent>
- *       <SidebarGroup>
- *         <SidebarGroupLabel>Main</SidebarGroupLabel>
- *         <SidebarGroupContent>
- *           <SidebarMenu>
- *             <SidebarMenuItem>
- *               <SidebarMenuButton asChild>
- *                 <Link href="/dashboard">
- *                   <Home />
- *                   <span>Dashboard</span>
- *                 </Link>
- *               </SidebarMenuButton>
- *             </SidebarMenuItem>
- *           </SidebarMenu>
- *         </SidebarGroupContent>
- *       </SidebarGroup>
- *     </SidebarContent>
- *     <SidebarFooter>
- *       <SidebarMenu>
- *         <SidebarMenuItem>
- *           <SidebarMenuButton>
- *             <Settings />
- *             <span>Settings</span>
- *           </SidebarMenuButton>
- *         </SidebarMenuItem>
- *       </SidebarMenu>
- *     </SidebarFooter>
- *   </Sidebar>
- *   <SidebarInset>
- *     <main>Main content area</main>
- *   </SidebarInset>
- * </SidebarProvider>
- * ```
- *
- * @example
- * ```tsx
- * // Icon-collapsible sidebar with tooltips
- * <SidebarProvider>
- *   <Sidebar collapsible="icon">
- *     <SidebarContent>
- *       <SidebarGroup>
- *         <SidebarGroupLabel>Navigation</SidebarGroupLabel>
- *         <SidebarGroupContent>
- *           <SidebarMenu>
- *             <SidebarMenuItem>
- *               <SidebarMenuButton tooltip="Go to Dashboard">
- *                 <Home />
- *                 <span>Dashboard</span>
- *               </SidebarMenuButton>
- *             </SidebarMenuItem>
- *           </SidebarMenu>
- *         </SidebarGroupContent>
- *       </SidebarGroup>
- *     </SidebarContent>
- *   </Sidebar>
- * </SidebarProvider>
- * ```
- *
- * @example
- * ```tsx
- * // Floating variant with custom styling
- * <SidebarProvider>
- *   <Sidebar variant="floating">
- *     <SidebarHeader>
- *       <SidebarTrigger />
- *       <h2>Floating Sidebar</h2>
- *     </SidebarHeader>
- *     <SidebarContent>
- *       // Navigation content
- *     </SidebarContent>
- *   </Sidebar>
- * </SidebarProvider>
- * ```
- *
- * @accessibility
- * - Keyboard shortcut: Cmd/Ctrl+B to toggle visibility
- * - Full keyboard navigation support within sidebar
- * - ARIA attributes indicate current state (expanded/collapsed)
- * - Screen reader announcements for state changes
- * - Mobile: Sheet overlay with proper focus management
- * - Desktop: Seamless keyboard navigation between sidebar and main content
- *
- * @responsive
- * - **Desktop**: Fixed-position sidebar with smooth width transitions
- * - **Mobile**: Sheet overlay that slides in from the side
- * - **Tablet**: Responsive breakpoints adapt behavior automatically
- *
- * @see {@link SidebarProvider} - Required context provider
- * @see {@link SidebarHeader} - Header section component
- * @see {@link SidebarContent} - Scrollable content area
- * @see {@link SidebarFooter} - Footer section component
- * @see {@link SidebarTrigger} - Toggle button component
- * @see {@link SidebarRail} - Interactive resize handle
- * @see {@link https://ui.shadcn.com/docs/components/sidebar} - shadcn/ui Sidebar documentation
- * @since 1.0.0
+ * Root provider for sidebar with state management, keyboard shortcuts (⌘B), and mobile detection.
+ * Manages collapsed/expanded state and persists preference in cookie.
  */
-declare function Sidebar({ side, variant, collapsible, className, children, ...props }: {
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: SidebarProviderProps): import("react/jsx-runtime").JSX.Element;
+type SidebarProps = React.ComponentProps<"div"> & {
+    /** Which side to display sidebar. @default "left" */
     side?: "left" | "right";
+    /** Visual variant. @default "sidebar" */
     variant?: "sidebar" | "floating" | "inset";
+    /** Collapse behavior. @default "offcanvas" */
     collapsible?: "offcanvas" | "icon" | "none";
-    className?: string;
-    children?: React.ReactNode;
-} & React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+};
 /**
- * Interactive button component for toggling sidebar visibility
- *
- * A pre-styled button that toggles the sidebar between expanded and collapsed states
- * on desktop, or opens/closes the mobile sheet overlay on smaller screens. Features
- * a panel icon and proper accessibility attributes.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {(event: React.MouseEvent) => void} [onClick] - Additional click handler
- * @param {...React.ComponentProps<typeof Button>} props - All Button component props
- *
- * @example
- * ```tsx
- * // Basic usage in header
- * <header className="flex items-center gap-2 p-4">
- *   <SidebarTrigger />
- *   <h1>My Application</h1>
- * </header>
- * ```
- *
- * @example
- * ```tsx
- * // With custom click handler
- * <SidebarTrigger
- *   onClick={(e) => {
- *     console.log('Sidebar toggled')
- *     // Additional logic here
- *   }}
- * />
- * ```
- *
- * @accessibility
- * - Screen reader label: "Toggle Sidebar"
- * - Keyboard accessible (Enter and Space keys)
- * - Focus visible indicator for keyboard navigation
- * - ARIA attributes for assistive technology
- *
- * @see {@link useSidebar} - Hook for custom toggle implementations
- * @see {@link SidebarProvider} - Required context provider
- * @since 1.0.0
+ * Sidebar container with responsive behavior. Renders as Sheet on mobile.
+ * Use with SidebarProvider for state management.
  */
-declare function SidebarTrigger({ className, onClick, ...props }: {
-    className?: string;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-} & Omit<React.ComponentProps<typeof Button>, "onClick">): import("react/jsx-runtime").JSX.Element;
+declare function Sidebar({ side, variant, collapsible, className, children, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+type SidebarTriggerProps = React.ComponentProps<typeof Button>;
 /**
- * Interactive rail component for sidebar edge interaction
- *
- * Provides a subtle interactive area along the sidebar edge that users can click
- * to toggle the sidebar state. The rail is positioned at the sidebar boundary and
- * includes hover states for discoverability. Only visible on desktop viewports.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {...React.ComponentProps<"button">} props - All button element props
- *
- * @example
- * ```tsx
- * // Basic usage (typically placed at end of Sidebar)
- * <Sidebar>
- *   <SidebarHeader>Header content</SidebarHeader>
- *   <SidebarContent>Navigation content</SidebarContent>
- *   <SidebarFooter>Footer content</SidebarFooter>
- *   <SidebarRail />
- * </Sidebar>
- * ```
- *
- * @accessibility
- * - ARIA label: "Toggle Sidebar"
- * - Keyboard accessible but with tabIndex={-1} to avoid tab trap
- * - Hover and focus states for discoverability
- * - Cursor changes based on sidebar state and side
- *
- * @see {@link SidebarTrigger} - Alternative toggle button
- * @since 1.0.0
+ * Button to toggle sidebar open/closed. Shows hamburger icon.
  */
-declare function SidebarRail({ className, ...props }: {
-    className?: string;
-} & React.ComponentProps<"button">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarTrigger({ className, onClick, ...props }: SidebarTriggerProps): import("react/jsx-runtime").JSX.Element;
+type SidebarRailProps = React.ComponentProps<"button">;
 /**
- * Main content container that adapts to sidebar layout
- *
- * The SidebarInset component serves as the primary content area that automatically
- * adjusts its layout and spacing based on the sidebar's state and variant. It provides
- * proper margins, responsive behavior, and styling coordination with the sidebar.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {...React.ComponentProps<"main">} props - All main element props
- *
- * @example
- * ```tsx
- * // Standard layout with header and content
- * <SidebarProvider>
- *   <Sidebar>Sidebar content</Sidebar>
- *   <SidebarInset>
- *     <header className="flex h-16 items-center gap-2 px-4">
- *       <SidebarTrigger />
- *       <h1>Page Title</h1>
- *     </header>
- *     <main className="flex-1 p-4">
- *       <p>Your main content goes here</p>
- *     </main>
- *   </SidebarInset>
- * </SidebarProvider>
- * ```
- *
- * @example
- * ```tsx
- * // With inset variant coordination
- * <SidebarProvider>
- *   <Sidebar variant="inset">Sidebar</Sidebar>
- *   <SidebarInset>
- *     // Content automatically gets proper spacing
- *     <div>Content with proper inset margins</div>
- *   </SidebarInset>
- * </SidebarProvider>
- * ```
- *
- * @features
- * - Automatic layout adjustment based on sidebar state
- * - Responsive margin and padding coordination
- * - Proper spacing for different sidebar variants
- * - Smooth transitions when sidebar state changes
- *
- * @see {@link Sidebar} - Main sidebar component
- * @see {@link SidebarProvider} - Required context provider
- * @since 1.0.0
+ * Invisible rail element on sidebar edge for drag-to-resize interaction.
  */
-declare function SidebarInset({ className, ...props }: {
-    className?: string;
-} & React.ComponentProps<"main">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarRail({ className, ...props }: SidebarRailProps): import("react/jsx-runtime").JSX.Element;
+type SidebarInsetProps = React.ComponentProps<"main">;
 /**
- * Input component optimized for sidebar usage
- *
- * A pre-styled input field designed to integrate seamlessly within sidebar layouts.
- * Commonly used for search functionality, filters, or other input needs within
- * the sidebar context. Features appropriate sizing and styling for sidebar use.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {...React.ComponentProps<typeof Input>} props - All Input component props
- *
- * @example
- * ```tsx
- * // Search input in sidebar header
- * <SidebarHeader>
- *   <h2>Navigation</h2>
- *   <SidebarInput
- *     placeholder="Search..."
- *     onChange={(e) => handleSearch(e.target.value)}
- *   />
- * </SidebarHeader>
- * ```
- *
- * @example
- * ```tsx
- * // Filter input with icon
- * <SidebarGroup>
- *   <SidebarGroupLabel>Filter Options</SidebarGroupLabel>
- *   <SidebarGroupContent>
- *     <SidebarInput
- *       type="search"
- *       placeholder="Filter items"
- *       className="mb-2"
- *     />
- *   </SidebarGroupContent>
- * </SidebarGroup>
- * ```
- *
- * @see {@link Input} - Base input component
- * @since 1.0.0
+ * Main content area that sits beside the sidebar. Automatically adjusts margins based on sidebar state.
  */
-declare function SidebarInput({ className, ...props }: {
-    className?: string;
-} & React.ComponentProps<typeof Input>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarInset({ className, ...props }: SidebarInsetProps): import("react/jsx-runtime").JSX.Element;
+type SidebarInputProps = React.ComponentProps<typeof Input>;
 /**
- * Header section container for sidebar content
- *
- * A flexible container for sidebar header content such as logos, application titles,
- * user information, or action buttons. The header remains visible even when the sidebar
- * is collapsed to icon mode, making it ideal for persistent branding or key actions.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {...React.ComponentProps<"div">} props - All div element props
- *
- * @example
- * ```tsx
- * // Simple header with title
- * <SidebarHeader>
- *   <h2 className="text-lg font-semibold">My Application</h2>
- * </SidebarHeader>
- * ```
- *
- * @example
- * ```tsx
- * // Header with trigger and search
- * <SidebarHeader>
- *   <div className="flex items-center justify-between">
- *     <h2>Navigation</h2>
- *     <SidebarTrigger />
- *   </div>
- *   <SidebarInput placeholder="Search..." className="mt-2" />
- * </SidebarHeader>
- * ```
- *
- * @example
- * ```tsx
- * // Header with user menu
- * <SidebarHeader>
- *   <SidebarMenu>
- *     <SidebarMenuItem>
- *       <DropdownMenu>
- *         <DropdownMenuTrigger asChild>
- *           <SidebarMenuButton>
- *             <Avatar />
- *             <span>John Doe</span>
- *             <ChevronDown className="ml-auto" />
- *           </SidebarMenuButton>
- *         </DropdownMenuTrigger>
- *         <DropdownMenuContent>
- *           <DropdownMenuItem>Profile</DropdownMenuItem>
- *           <DropdownMenuItem>Settings</DropdownMenuItem>
- *           <DropdownMenuItem>Logout</DropdownMenuItem>
- *         </DropdownMenuContent>
- *       </DropdownMenu>
- *     </SidebarMenuItem>
- *   </SidebarMenu>
- * </SidebarHeader>
- * ```
- *
- * @see {@link SidebarFooter} - Footer section component
- * @see {@link SidebarContent} - Main scrollable content area
- * @since 1.0.0
+ * Styled input for sidebar search/filter functionality.
  */
-declare function SidebarHeader({ className, ...props }: {
-    className?: string;
-} & React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarInput({ className, ...props }: SidebarInputProps): import("react/jsx-runtime").JSX.Element;
+type SidebarHeaderProps = React.ComponentProps<"div">;
 /**
- * Footer section container for sidebar content
- *
- * A container positioned at the bottom of the sidebar for footer content such as
- * user profiles, settings links, logout buttons, or help resources. The footer
- * remains anchored to the bottom regardless of content height.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {...React.ComponentProps<"div">} props - All div element props
- *
- * @example
- * ```tsx
- * // Simple footer with settings link
- * <SidebarFooter>
- *   <SidebarMenu>
- *     <SidebarMenuItem>
- *       <SidebarMenuButton>
- *         <Settings />
- *         <span>Settings</span>
- *       </SidebarMenuButton>
- *     </SidebarMenuItem>
- *   </SidebarMenu>
- * </SidebarFooter>
- * ```
- *
- * @example
- * ```tsx
- * // Footer with user profile and actions
- * <SidebarFooter>
- *   <SidebarMenu>
- *     <SidebarMenuItem>
- *       <SidebarMenuButton>
- *         <Avatar className="h-6 w-6" />
- *         <div className="flex flex-col text-left">
- *           <span className="text-sm">John Doe</span>
- *           <span className="text-xs text-muted-foreground">john@example.com</span>
- *         </div>
- *       </SidebarMenuButton>
- *       <SidebarMenuAction>
- *         <LogOut />
- *       </SidebarMenuAction>
- *     </SidebarMenuItem>
- *   </SidebarMenu>
- * </SidebarFooter>
- * ```
- *
- * @see {@link SidebarHeader} - Header section component
- * @see {@link SidebarContent} - Main content area
- * @since 1.0.0
+ * Top section of sidebar for branding, app switcher, or global actions.
  */
-declare function SidebarFooter({ className, ...props }: {
-    className?: string;
-} & React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarHeader({ className, ...props }: SidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
+type SidebarFooterProps = React.ComponentProps<"div">;
 /**
- * Visual separator for organizing sidebar sections
- *
- * A horizontal divider component used to visually separate different sections
- * within the sidebar content. Helps organize navigation groups and improve
- * visual hierarchy and readability.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {...React.ComponentProps<typeof Separator>} props - All Separator component props
- *
- * @example
- * ```tsx
- * // Separating navigation groups
- * <SidebarContent>
- *   <SidebarGroup>
- *     <SidebarGroupLabel>Main Navigation</SidebarGroupLabel>
- *     <SidebarGroupContent>
- *       // Main nav items
- *     </SidebarGroupContent>
- *   </SidebarGroup>
- *
- *   <SidebarSeparator />
- *
- *   <SidebarGroup>
- *     <SidebarGroupLabel>Settings</SidebarGroupLabel>
- *     <SidebarGroupContent>
- *       // Settings items
- *     </SidebarGroupContent>
- *   </SidebarGroup>
- * </SidebarContent>
- * ```
- *
- * @example
- * ```tsx
- * // Between header and content
- * <Sidebar>
- *   <SidebarHeader>
- *     <h2>Application</h2>
- *   </SidebarHeader>
- *   <SidebarSeparator />
- *   <SidebarContent>
- *     // Navigation content
- *   </SidebarContent>
- * </Sidebar>
- * ```
- *
- * @see {@link Separator} - Base separator component
- * @since 1.0.0
+ * Bottom section of sidebar for user profile, settings, or secondary actions.
  */
-declare function SidebarSeparator({ className, ...props }: {
-    className?: string;
-} & React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarFooter({ className, ...props }: SidebarFooterProps): import("react/jsx-runtime").JSX.Element;
+type SidebarSeparatorProps = React.ComponentProps<typeof Separator>;
 /**
- * Scrollable main content area of the sidebar
- *
- * The primary content container that houses navigation groups, menus, and other
- * sidebar content. Provides automatic scrolling when content exceeds available
- * height and handles overflow behavior when the sidebar is collapsed.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {...React.ComponentProps<"div">} props - All div element props
- *
- * @example
- * ```tsx
- * // Basic content with navigation groups
- * <SidebarContent>
- *   <SidebarGroup>
- *     <SidebarGroupLabel>Main</SidebarGroupLabel>
- *     <SidebarGroupContent>
- *       <SidebarMenu>
- *         <SidebarMenuItem>
- *           <SidebarMenuButton>
- *             <Home />
- *             <span>Dashboard</span>
- *           </SidebarMenuButton>
- *         </SidebarMenuItem>
- *       </SidebarMenu>
- *     </SidebarGroupContent>
- *   </SidebarGroup>
- * </SidebarContent>
- * ```
- *
- * @example
- * ```tsx
- * // Multiple groups with separators
- * <SidebarContent>
- *   <SidebarGroup>
- *     <SidebarGroupLabel>Navigation</SidebarGroupLabel>
- *     <SidebarGroupContent>
- *       // Navigation items
- *     </SidebarGroupContent>
- *   </SidebarGroup>
- *
- *   <SidebarSeparator />
- *
- *   <SidebarGroup>
- *     <SidebarGroupLabel>Projects</SidebarGroupLabel>
- *     <SidebarGroupContent>
- *       // Project items
- *     </SidebarGroupContent>
- *   </SidebarGroup>
- * </SidebarContent>
- * ```
- *
- * @features
- * - Automatic scrolling for overflow content
- * - Responsive to sidebar collapse states
- * - Flexible gap spacing between child elements
- * - Overflow hidden when collapsed to icon mode
- *
- * @see {@link SidebarGroup} - Content organization component
- * @see {@link SidebarMenu} - Menu container component
- * @since 1.0.0
+ * Horizontal divider between sidebar sections.
  */
-declare function SidebarContent({ className, ...props }: {
-    className?: string;
-} & React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarSeparator({ className, ...props }: SidebarSeparatorProps): import("react/jsx-runtime").JSX.Element;
+type SidebarContentProps = React.ComponentProps<"div">;
 /**
- * Container for organizing related sidebar navigation items
- *
- * Groups related navigation items together with optional labels and actions,
- * providing visual organization and hierarchy for complex navigation structures.
- * Groups can include labels, action buttons, and any combination of menu items.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {...React.ComponentProps<"div">} props - All div element props
- *
- * @example
- * ```tsx
- * // Basic group with label and menu
- * <SidebarGroup>
- *   <SidebarGroupLabel>Navigation</SidebarGroupLabel>
- *   <SidebarGroupContent>
- *     <SidebarMenu>
- *       <SidebarMenuItem>
- *         <SidebarMenuButton>
- *           <Home />
- *           <span>Dashboard</span>
- *         </SidebarMenuButton>
- *       </SidebarMenuItem>
- *     </SidebarMenu>
- *   </SidebarGroupContent>
- * </SidebarGroup>
- * ```
- *
- * @example
- * ```tsx
- * // Group with action button
- * <SidebarGroup>
- *   <SidebarGroupLabel>Projects</SidebarGroupLabel>
- *   <SidebarGroupAction>
- *     <Plus className="h-4 w-4" />
- *     <span className="sr-only">Add Project</span>
- *   </SidebarGroupAction>
- *   <SidebarGroupContent>
- *     // Project items
- *   </SidebarGroupContent>
- * </SidebarGroup>
- * ```
- *
- * @see {@link SidebarGroupLabel} - Group label component
- * @see {@link SidebarGroupAction} - Group action button
- * @see {@link SidebarGroupContent} - Group content container
- * @since 1.0.0
+ * Scrollable main content area of sidebar. Contains SidebarGroup components.
  */
-declare function SidebarGroup({ className, ...props }: {
-    className?: string;
-} & React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarContent({ className, ...props }: SidebarContentProps): import("react/jsx-runtime").JSX.Element;
+type SidebarGroupProps = React.ComponentProps<"div">;
 /**
- * Label component for sidebar groups
- *
- * Displays a descriptive label for a group of sidebar items, providing clear
- * categorization and hierarchy. The label automatically hides when the sidebar
- * is collapsed to icon mode to maintain clean visual presentation.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {boolean} [asChild=false] - Render as child element (using Slot)
- * @param {...React.ComponentProps<"div">} props - All div element props
- *
- * @example
- * ```tsx
- * // Standard text label
- * <SidebarGroup>
- *   <SidebarGroupLabel>Main Navigation</SidebarGroupLabel>
- *   <SidebarGroupContent>
- *     // Menu items
- *   </SidebarGroupContent>
- * </SidebarGroup>
- * ```
- *
- * @example
- * ```tsx
- * // Custom element using asChild
- * <SidebarGroup>
- *   <SidebarGroupLabel asChild>
- *     <h3 className="custom-heading">Projects</h3>
- *   </SidebarGroupLabel>
- *   <SidebarGroupContent>
- *     // Project items
- *   </SidebarGroupContent>
- * </SidebarGroup>
- * ```
- *
- * @features
- * - Automatic hide/show based on sidebar collapse state
- * - Smooth opacity and margin transitions
- * - Focus management for keyboard navigation
- * - Support for custom elements via asChild prop
- *
- * @see {@link SidebarGroup} - Parent group container
- * @see {@link SidebarGroupAction} - Associated action button
- * @since 1.0.0
+ * Container for grouped menu items with optional label.
  */
-declare function SidebarGroupLabel({ className, asChild, ...props }: {
-    className?: string;
-    asChild?: boolean;
-} & React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroup({ className, ...props }: SidebarGroupProps): import("react/jsx-runtime").JSX.Element;
+type SidebarGroupLabelProps = useRender.ComponentProps<"div"> & React.ComponentProps<"div">;
 /**
- * Action button positioned within sidebar groups
- *
- * A compact action button positioned at the top-right of a sidebar group,
- * typically used for group-specific actions such as adding new items, editing
- * group settings, or accessing group options. Automatically hidden when collapsed.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {boolean} [asChild=false] - Render as child element (using Slot)
- * @param {...React.ComponentProps<"button">} props - All button element props
- *
- * @example
- * ```tsx
- * // Add button for projects group
- * <SidebarGroup>
- *   <SidebarGroupLabel>Projects</SidebarGroupLabel>
- *   <SidebarGroupAction>
- *     <Plus className="h-4 w-4" />
- *     <span className="sr-only">Add Project</span>
- *   </SidebarGroupAction>
- *   <SidebarGroupContent>
- *     // Project items
- *   </SidebarGroupContent>
- * </SidebarGroup>
- * ```
- *
- * @example
- * ```tsx
- * // Custom action with asChild
- * <SidebarGroup>
- *   <SidebarGroupLabel>Settings</SidebarGroupLabel>
- *   <SidebarGroupAction asChild>
- *     <Button variant="ghost" size="sm">
- *       <MoreHorizontal className="h-4 w-4" />
- *     </Button>
- *   </SidebarGroupAction>
- *   <SidebarGroupContent>
- *     // Settings items
- *   </SidebarGroupContent>
- * </SidebarGroup>
- * ```
- *
- * @accessibility
- * - Increased touch target on mobile devices
- * - Keyboard accessible with focus management
- * - Screen reader support with descriptive labels
- *
- * @see {@link SidebarGroup} - Parent group container
- * @see {@link SidebarGroupLabel} - Associated group label
- * @since 1.0.0
+ * Label heading for a sidebar group. Fades out when sidebar collapses to icon mode.
  */
-declare function SidebarGroupAction({ className, asChild, ...props }: {
-    className?: string;
-    asChild?: boolean;
-} & React.ComponentProps<"button">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroupLabel({ className, render, ...props }: SidebarGroupLabelProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+type SidebarGroupActionProps = useRender.ComponentProps<"button"> & React.ComponentProps<"button">;
 /**
- * Content container for sidebar group items
- *
- * Houses the actual navigation items, menus, and content within a sidebar group.
- * Provides consistent spacing and organization for group content while maintaining
- * proper typography and layout coordination.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {...React.ComponentProps<"div">} props - All div element props
- *
- * @example
- * ```tsx
- * // Basic content with menu items
- * <SidebarGroup>
- *   <SidebarGroupLabel>Navigation</SidebarGroupLabel>
- *   <SidebarGroupContent>
- *     <SidebarMenu>
- *       <SidebarMenuItem>
- *         <SidebarMenuButton>
- *           <Home />
- *           <span>Dashboard</span>
- *         </SidebarMenuButton>
- *       </SidebarMenuItem>
- *       <SidebarMenuItem>
- *         <SidebarMenuButton>
- *           <Settings />
- *           <span>Settings</span>
- *         </SidebarMenuButton>
- *       </SidebarMenuItem>
- *     </SidebarMenu>
- *   </SidebarGroupContent>
- * </SidebarGroup>
- * ```
- *
- * @example
- * ```tsx
- * // Multiple menus in group content
- * <SidebarGroup>
- *   <SidebarGroupLabel>Projects</SidebarGroupLabel>
- *   <SidebarGroupContent>
- *     <SidebarMenu>
- *       // Recent projects
- *     </SidebarMenu>
- *     <SidebarSeparator />
- *     <SidebarMenu>
- *       // Archived projects
- *     </SidebarMenu>
- *   </SidebarGroupContent>
- * </SidebarGroup>
- * ```
- *
- * @see {@link SidebarGroup} - Parent group container
- * @see {@link SidebarMenu} - Menu container component
- * @since 1.0.0
+ * Action button displayed in top-right of group (e.g., add, expand all).
  */
-declare function SidebarGroupContent({ className, ...props }: {
-    className?: string;
-} & React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroupAction({ className, render, ...props }: SidebarGroupActionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+type SidebarGroupContentProps = React.ComponentProps<"div">;
 /**
- * Navigation menu container for organizing sidebar items
- *
- * An unordered list container that holds and organizes SidebarMenuItem components.
- * Provides consistent spacing, layout, and semantic structure for navigation items
- * within sidebar groups or sections.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {...React.ComponentProps<"ul">} props - All ul element props
- *
- * @example
- * ```tsx
- * // Basic navigation menu
- * <SidebarMenu>
- *   <SidebarMenuItem>
- *     <SidebarMenuButton>
- *       <Home />
- *       <span>Dashboard</span>
- *     </SidebarMenuButton>
- *   </SidebarMenuItem>
- *   <SidebarMenuItem>
- *     <SidebarMenuButton>
- *       <Settings />
- *       <span>Settings</span>
- *     </SidebarMenuButton>
- *   </SidebarMenuItem>
- * </SidebarMenu>
- * ```
- *
- * @example
- * ```tsx
- * // Menu with badges and actions
- * <SidebarMenu>
- *   <SidebarMenuItem>
- *     <SidebarMenuButton>
- *       <Inbox />
- *       <span>Messages</span>
- *     </SidebarMenuButton>
- *     <SidebarMenuBadge>3</SidebarMenuBadge>
- *   </SidebarMenuItem>
- *   <SidebarMenuItem>
- *     <SidebarMenuButton>
- *       <Archive />
- *       <span>Archive</span>
- *     </SidebarMenuButton>
- *     <SidebarMenuAction>
- *       <MoreHorizontal />
- *     </SidebarMenuAction>
- *   </SidebarMenuItem>
- * </SidebarMenu>
- * ```
- *
- * @accessibility
- * - Semantic ul/li structure for screen readers
- * - Proper navigation landmarks
- * - Keyboard navigation support
- *
- * @see {@link SidebarMenuItem} - Individual menu item component
- * @see {@link SidebarMenuButton} - Interactive menu button
- * @since 1.0.0
+ * Container for menu items within a group.
  */
-declare function SidebarMenu({ className, ...props }: {
-    className?: string;
-} & React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroupContent({ className, ...props }: SidebarGroupContentProps): import("react/jsx-runtime").JSX.Element;
+type SidebarMenuProps = React.ComponentProps<"ul">;
 /**
- * Individual menu item container for sidebar navigation
- *
- * A list item container that wraps a single navigation item, typically containing
- * a SidebarMenuButton along with optional components like SidebarMenuAction,
- * SidebarMenuBadge, or SidebarMenuSub for hierarchical navigation.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {...React.ComponentProps<"li">} props - All li element props
- *
- * @example
- * ```tsx
- * // Simple menu item with button
- * <SidebarMenuItem>
- *   <SidebarMenuButton>
- *     <Home />
- *     <span>Dashboard</span>
- *   </SidebarMenuButton>
- * </SidebarMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // Menu item with badge
- * <SidebarMenuItem>
- *   <SidebarMenuButton>
- *     <Inbox />
- *     <span>Messages</span>
- *   </SidebarMenuButton>
- *   <SidebarMenuBadge>5</SidebarMenuBadge>
- * </SidebarMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // Menu item with action button
- * <SidebarMenuItem>
- *   <SidebarMenuButton>
- *     <Folder />
- *     <span>Projects</span>
- *   </SidebarMenuButton>
- *   <SidebarMenuAction showOnHover>
- *     <Plus />
- *   </SidebarMenuAction>
- * </SidebarMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // Menu item with submenu
- * <SidebarMenuItem>
- *   <SidebarMenuButton>
- *     <Folder />
- *     <span>Projects</span>
- *     <ChevronRight className="ml-auto" />
- *   </SidebarMenuButton>
- *   <SidebarMenuSub>
- *     <SidebarMenuSubItem>
- *       <SidebarMenuSubButton>Web App</SidebarMenuSubButton>
- *     </SidebarMenuSubItem>
- *   </SidebarMenuSub>
- * </SidebarMenuItem>
- * ```
- *
- * @see {@link SidebarMenu} - Parent menu container
- * @see {@link SidebarMenuButton} - Interactive button component
- * @see {@link SidebarMenuAction} - Action button component
- * @see {@link SidebarMenuBadge} - Badge indicator component
- * @since 1.0.0
+ * Unordered list container for sidebar menu items.
  */
-declare function SidebarMenuItem({ className, ...props }: {
-    className?: string;
-} & React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenu({ className, ...props }: SidebarMenuProps): import("react/jsx-runtime").JSX.Element;
+type SidebarMenuItemProps = React.ComponentProps<"li">;
 /**
- * SidebarMenuButton variant configuration for visual appearances and sizes
- *
- * @variant default - Standard menu button with subtle hover states
- * @variant outline - Button with border background that highlights on interaction
- *
- * @size default - Standard button height (h-8) with text-sm
- * @size sm - Compact button height (h-7) with text-xs for dense layouts
- * @size lg - Large button height (h-12) with text-sm, collapses to icon padding when sidebar is collapsed
+ * List item wrapper for a single menu entry.
  */
+declare function SidebarMenuItem({ className, ...props }: SidebarMenuItemProps): import("react/jsx-runtime").JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-/**
- * Interactive navigation button for sidebar menu items
- *
- * The primary interactive element for sidebar navigation, offering a flexible button
- * component that supports active states, multiple visual variants, tooltip integration
- * for collapsed modes, and composition patterns through the asChild prop. Automatically
- * adapts its appearance based on sidebar state and provides smooth hover/focus transitions.
- *
- * @component
- *
- * @param {boolean} [asChild=false] - Render as child element using Slot composition
- * @param {boolean} [isActive=false] - Whether this menu item is currently active
- * @param {"default" | "outline"} [variant="default"] - Visual variant:
- *   - `default`: Standard button appearance with hover states
- *   - `outline`: Button with border and background on hover
- * @param {"default" | "sm" | "lg"} [size="default"] - Button size variant:
- *   - `default`: Standard height (h-8)
- *   - `sm`: Small height (h-7)
- *   - `lg`: Large height (h-12)
- * @param {string | React.ComponentProps<typeof TooltipContent>} [tooltip] - Tooltip content shown when sidebar is collapsed
- * @param {string} [className] - Additional CSS classes
- * @param {...React.ComponentProps<"button">} props - All button element props
- *
- * @example
- * ```tsx
- * // Basic navigation button
- * <SidebarMenuButton>
- *   <Home className="h-4 w-4" />
- *   <span>Dashboard</span>
- * </SidebarMenuButton>
- * ```
- *
- * @example
- * ```tsx
- * // Active state with Link composition
- * <SidebarMenuButton asChild isActive={pathname === '/dashboard'}>
- *   <Link href="/dashboard">
- *     <Home className="h-4 w-4" />
- *     <span>Dashboard</span>
- *   </Link>
- * </SidebarMenuButton>
- * ```
- *
- * @example
- * ```tsx
- * // With tooltip for collapsed mode
- * <SidebarMenuButton tooltip="Go to Dashboard">
- *   <Home className="h-4 w-4" />
- *   <span>Dashboard</span>
- * </SidebarMenuButton>
- * ```
- *
- * @example
- * ```tsx
- * // Different variants and sizes
- * <SidebarMenuButton variant="outline" size="lg">
- *   <Settings className="h-4 w-4" />
- *   <span>Settings</span>
- * </SidebarMenuButton>
- * ```
- *
- * @example
- * ```tsx
- * // Custom tooltip with props
- * <SidebarMenuButton
- *   tooltip={{
- *     children: "Dashboard Overview",
- *     side: "right",
- *     sideOffset: 10
- *   }}
- * >
- *   <Home className="h-4 w-4" />
- *   <span>Dashboard</span>
- * </SidebarMenuButton>
- * ```
- *
- * @accessibility
- * - Full keyboard navigation support (Enter, Space)
- * - Focus visible ring for keyboard users
- * - Active state indication for screen readers
- * - Tooltip automatically shown/hidden based on sidebar state
- * - Proper contrast ratios for all states
- * - Support for screen reader announcements
- *
- * @responsive
- * - Automatically adapts to collapsed sidebar (icon-only mode)
- * - Tooltip integration for collapsed state
- * - Touch-friendly sizing on mobile devices
- * - Smooth transitions between states
- *
- * @see {@link SidebarMenuItem} - Parent menu item container
- * @see {@link SidebarMenuAction} - Secondary action button
- * @see {@link SidebarMenuBadge} - Badge component for notifications
- * @see {@link useSidebar} - Hook for sidebar state
- * @since 1.0.0
- */
-declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: {
-    asChild?: boolean;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type SidebarMenuButtonProps = useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
+    /** Mark as active/current page. */
     isActive?: boolean;
+    /** Tooltip content shown when sidebar is collapsed. */
     tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-    className?: string;
-} & VariantProps<typeof sidebarMenuButtonVariants> & React.ComponentProps<"button">): import("react/jsx-runtime").JSX.Element;
+} & VariantProps<typeof sidebarMenuButtonVariants>;
 /**
- * Secondary action button for sidebar menu items
- *
- * A compact action button positioned on the right side of menu items, providing
- * secondary actions like edit, delete, or more options. Can be configured to show
- * only on hover for cleaner interfaces or remain always visible for important actions.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {boolean} [asChild=false] - Render as child element using Slot composition
- * @param {boolean} [showOnHover=false] - Only show button on menu item hover
- * @param {...React.ComponentProps<"button">} props - All button element props
- *
- * @example
- * ```tsx
- * // Always visible action button
- * <SidebarMenuItem>
- *   <SidebarMenuButton>
- *     <Folder />
- *     <span>Projects</span>
- *   </SidebarMenuButton>
- *   <SidebarMenuAction>
- *     <MoreHorizontal className="h-4 w-4" />
- *   </SidebarMenuAction>
- * </SidebarMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // Show only on hover
- * <SidebarMenuItem>
- *   <SidebarMenuButton>
- *     <File />
- *     <span>Document</span>
- *   </SidebarMenuButton>
- *   <SidebarMenuAction showOnHover>
- *     <Trash2 className="h-4 w-4" />
- *   </SidebarMenuAction>
- * </SidebarMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // Custom action with asChild
- * <SidebarMenuItem>
- *   <SidebarMenuButton>
- *     <Star />
- *     <span>Favorites</span>
- *   </SidebarMenuButton>
- *   <SidebarMenuAction asChild>
- *     <DropdownMenu>
- *       <DropdownMenuTrigger>
- *         <MoreVertical className="h-4 w-4" />
- *       </DropdownMenuTrigger>
- *       <DropdownMenuContent>
- *         <DropdownMenuItem>Edit</DropdownMenuItem>
- *         <DropdownMenuItem>Delete</DropdownMenuItem>
- *       </DropdownMenuContent>
- *     </DropdownMenu>
- *   </SidebarMenuAction>
- * </SidebarMenuItem>
- * ```
- *
- * @accessibility
- * - Increased touch target area on mobile devices
- * - Keyboard accessible with proper focus management
- * - Hidden from screen readers when showOnHover and not focused
- * - Proper contrast ratios for visibility
- *
- * @see {@link SidebarMenuItem} - Parent menu item
- * @see {@link SidebarMenuButton} - Primary menu button
- * @since 1.0.0
+ * Clickable button for sidebar menu item. Supports variants, sizes, active state, and tooltips.
  */
-declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: {
-    className?: string;
-    asChild?: boolean;
+declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, ...props }: SidebarMenuButtonProps): import("react/jsx-runtime").JSX.Element;
+type SidebarMenuActionProps = useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
+    /** Only show on hover/focus. @default false */
     showOnHover?: boolean;
-} & React.ComponentProps<"button">): import("react/jsx-runtime").JSX.Element;
+};
 /**
- * Badge indicator component for menu items
- *
- * Displays count indicators, status badges, or notification markers on menu items.
- * Positioned on the right side of menu items and automatically coordinates with
- * menu button states and sidebar collapse behavior.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {...React.ComponentProps<"div">} props - All div element props
- *
- * @example
- * ```tsx
- * // Unread count badge
- * <SidebarMenuItem>
- *   <SidebarMenuButton>
- *     <Inbox />
- *     <span>Messages</span>
- *   </SidebarMenuButton>
- *   <SidebarMenuBadge>12</SidebarMenuBadge>
- * </SidebarMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // Status indicator
- * <SidebarMenuItem>
- *   <SidebarMenuButton>
- *     <Activity />
- *     <span>System Status</span>
- *   </SidebarMenuButton>
- *   <SidebarMenuBadge className="bg-green-500">●</SidebarMenuBadge>
- * </SidebarMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // Dynamic badge with state
- * <SidebarMenuItem>
- *   <SidebarMenuButton>
- *     <Bell />
- *     <span>Notifications</span>
- *   </SidebarMenuButton>
- *   {notificationCount > 0 && (
- *     <SidebarMenuBadge>{notificationCount}</SidebarMenuBadge>
- *   )}
- * </SidebarMenuItem>
- * ```
- *
- * @features
- * - Automatic positioning relative to menu button size
- * - Hidden when sidebar is collapsed to icon mode
- * - Tabular numbers for consistent numeric display
- * - Pointer events disabled to prevent interference
- *
- * @accessibility
- * - Non-interactive (pointer-events-none)
- * - Proper color contrast for readability
- * - Screen reader friendly with appropriate text
- *
- * @see {@link SidebarMenuItem} - Parent menu item
- * @see {@link SidebarMenuButton} - Associated menu button
- * @since 1.0.0
+ * Secondary action button for menu item (e.g., delete, edit). Positioned on right side.
  */
-declare function SidebarMenuBadge({ className, ...props }: {
-    className?: string;
-} & React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuAction({ className, render, showOnHover, ...props }: SidebarMenuActionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+type SidebarMenuBadgeProps = React.ComponentProps<"div">;
 /**
- * Loading skeleton placeholder for menu items
- *
- * Displays an animated loading placeholder while menu items are being fetched
- * or loaded. Features random width variation to simulate realistic content
- * and optional icon placeholder for more accurate representation.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {boolean} [showIcon=false] - Whether to show icon placeholder
- * @param {...React.ComponentProps<"div">} props - All div element props
- *
- * @example
- * ```tsx
- * // Basic skeleton without icon
- * <SidebarMenu>
- *   <SidebarMenuItem>
- *     <SidebarMenuSkeleton />
- *   </SidebarMenuItem>
- *   <SidebarMenuItem>
- *     <SidebarMenuSkeleton />
- *   </SidebarMenuItem>
- * </SidebarMenu>
- * ```
- *
- * @example
- * ```tsx
- * // Skeleton with icon placeholder
- * <SidebarMenu>
- *   {Array.from({ length: 5 }).map((_, index) => (
- *     <SidebarMenuItem key={index}>
- *       <SidebarMenuSkeleton showIcon />
- *     </SidebarMenuItem>
- *   ))}
- * </SidebarMenu>
- * ```
- *
- * @example
- * ```tsx
- * // Loading state with React Suspense
- * <SidebarGroup>
- *   <SidebarGroupLabel>Projects</SidebarGroupLabel>
- *   <SidebarGroupContent>
- *     <SidebarMenu>
- *       <React.Suspense
- *         fallback={
- *           <>
- *             <SidebarMenuItem><SidebarMenuSkeleton showIcon /></SidebarMenuItem>
- *             <SidebarMenuItem><SidebarMenuSkeleton showIcon /></SidebarMenuItem>
- *             <SidebarMenuItem><SidebarMenuSkeleton showIcon /></SidebarMenuItem>
- *           </>
- *         }
- *       >
- *         <ProjectsList />
- *       </React.Suspense>
- *     </SidebarMenu>
- *   </SidebarGroupContent>
- * </SidebarGroup>
- * ```
- *
- * @features
- * - Random width variation (50-90%) for realistic appearance
- * - Optional icon skeleton placeholder
- * - Smooth loading animation
- * - Proper sizing to match actual menu items
- *
- * @see {@link SidebarMenuItem} - Container for skeleton
- * @see {@link SidebarMenu} - Parent menu container
- * @see {@link Skeleton} - Base skeleton component
- * @since 1.0.0
+ * Badge/counter displayed on right side of menu item (e.g., notification count).
  */
-declare function SidebarMenuSkeleton({ className, showIcon, ...props }: {
-    className?: string;
+declare function SidebarMenuBadge({ className, ...props }: SidebarMenuBadgeProps): import("react/jsx-runtime").JSX.Element;
+type SidebarMenuSkeletonProps = React.ComponentProps<"div"> & {
+    /** Show icon skeleton. @default false */
     showIcon?: boolean;
-} & React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+};
 /**
- * Submenu container for hierarchical navigation
- *
- * A specialized container for nested navigation items that provides visual hierarchy
- * through indentation and connecting border lines. Perfect for organizing complex
- * navigation structures with parent-child relationships.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {...React.ComponentProps<"ul">} props - All ul element props
- *
- * @example
- * ```tsx
- * // Collapsible submenu with parent item
- * <SidebarMenuItem>
- *   <Collapsible>
- *     <CollapsibleTrigger asChild>
- *       <SidebarMenuButton>
- *         <Folder />
- *         <span>Projects</span>
- *         <ChevronRight className="ml-auto transition-transform group-data-[state=open]:rotate-90" />
- *       </SidebarMenuButton>
- *     </CollapsibleTrigger>
- *     <CollapsibleContent>
- *       <SidebarMenuSub>
- *         <SidebarMenuSubItem>
- *           <SidebarMenuSubButton>Web Application</SidebarMenuSubButton>
- *         </SidebarMenuSubItem>
- *         <SidebarMenuSubItem>
- *           <SidebarMenuSubButton>Mobile App</SidebarMenuSubButton>
- *         </SidebarMenuSubItem>
- *         <SidebarMenuSubItem>
- *           <SidebarMenuSubButton>Documentation</SidebarMenuSubButton>
- *         </SidebarMenuSubItem>
- *       </SidebarMenuSub>
- *     </CollapsibleContent>
- *   </Collapsible>
- * </SidebarMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // Always expanded submenu
- * <SidebarMenuItem>
- *   <SidebarMenuButton>
- *     <Settings />
- *     <span>Settings</span>
- *   </SidebarMenuButton>
- *   <SidebarMenuSub>
- *     <SidebarMenuSubItem>
- *       <SidebarMenuSubButton>General</SidebarMenuSubButton>
- *     </SidebarMenuSubItem>
- *     <SidebarMenuSubItem>
- *       <SidebarMenuSubButton>Privacy</SidebarMenuSubButton>
- *     </SidebarMenuSubItem>
- *     <SidebarMenuSubItem>
- *       <SidebarMenuSubButton>Security</SidebarMenuSubButton>
- *     </SidebarMenuSubItem>
- *   </SidebarMenuSub>
- * </SidebarMenuItem>
- * ```
- *
- * @features
- * - Visual hierarchy with left border and indentation
- * - Automatic hiding when sidebar is collapsed
- * - Proper spacing and alignment with parent items
- * - Seamless integration with collapsible components
- *
- * @accessibility
- * - Semantic ul/li structure for screen readers
- * - Proper nesting hierarchy for navigation
- * - Keyboard navigation support
- *
- * @see {@link SidebarMenuSubItem} - Individual submenu item
- * @see {@link SidebarMenuSubButton} - Submenu button component
- * @see {@link SidebarMenuItem} - Parent menu item
- * @since 1.0.0
+ * Loading skeleton placeholder for menu item with randomized width.
  */
-declare function SidebarMenuSub({ className, ...props }: {
-    className?: string;
-} & React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: SidebarMenuSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type SidebarMenuSubProps = React.ComponentProps<"ul">;
 /**
- * Individual item container within submenu navigation
- *
- * A list item container for single nested navigation items within a submenu,
- * providing the structural foundation for hierarchical navigation elements.
- *
- * @component
- *
- * @param {string} [className] - Additional CSS classes
- * @param {...React.ComponentProps<"li">} props - All li element props
- *
- * @example
- * ```tsx
- * // Basic submenu item
- * <SidebarMenuSub>
- *   <SidebarMenuSubItem>
- *     <SidebarMenuSubButton asChild>
- *       <Link href="/projects/web-app">
- *         <span>Web Application</span>
- *       </Link>
- *     </SidebarMenuSubButton>
- *   </SidebarMenuSubItem>
- * </SidebarMenuSub>
- * ```
- *
- * @example
- * ```tsx
- * // Submenu item with active state
- * <SidebarMenuSub>
- *   <SidebarMenuSubItem>
- *     <SidebarMenuSubButton
- *       isActive={pathname === '/settings/general'}
- *       asChild
- *     >
- *       <Link href="/settings/general">
- *         <span>General Settings</span>
- *       </Link>
- *     </SidebarMenuSubButton>
- *   </SidebarMenuSubItem>
- * </SidebarMenuSub>
- * ```
- *
- * @see {@link SidebarMenuSub} - Parent submenu container
- * @see {@link SidebarMenuSubButton} - Interactive button component
- * @since 1.0.0
+ * Nested submenu list with indented border. Place inside SidebarMenuItem.
  */
-declare function SidebarMenuSubItem({ className, ...props }: {
-    className?: string;
-} & React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: SidebarMenuSubProps): import("react/jsx-runtime").JSX.Element;
+type SidebarMenuSubItemProps = React.ComponentProps<"li">;
 /**
- * Interactive button component for submenu navigation
- *
- * The primary interactive element for nested navigation items within submenus,
- * featuring support for active states, different sizes, and composition patterns.
- * Designed specifically for hierarchical navigation with appropriate styling and spacing.
- *
- * @component
- *
- * @param {boolean} [asChild=false] - Render as child element using Slot composition
- * @param {"sm" | "md"} [size="md"] - Button size variant:
- *   - `sm`: Small size with text-xs
- *   - `md`: Medium size with text-sm
- * @param {boolean} [isActive=false] - Whether this submenu item is currently active
- * @param {string} [className] - Additional CSS classes
- * @param {...React.ComponentProps<"a">} props - All anchor element props
- *
- * @example
- * ```tsx
- * // Basic submenu button
- * <SidebarMenuSubItem>
- *   <SidebarMenuSubButton>
- *     <span>Documentation</span>
- *   </SidebarMenuSubButton>
- * </SidebarMenuSubItem>
- * ```
- *
- * @example
- * ```tsx
- * // Link composition with active state
- * <SidebarMenuSubItem>
- *   <SidebarMenuSubButton
- *     asChild
- *     isActive={pathname === '/projects/mobile'}
- *   >
- *     <Link href="/projects/mobile">
- *       <span>Mobile Application</span>
- *     </Link>
- *   </SidebarMenuSubButton>
- * </SidebarMenuSubItem>
- * ```
- *
- * @example
- * ```tsx
- * // Small size variant
- * <SidebarMenuSubItem>
- *   <SidebarMenuSubButton size="sm">
- *     <span>API Reference</span>
- *   </SidebarMenuSubButton>
- * </SidebarMenuSubItem>
- * ```
- *
- * @example
- * ```tsx
- * // With icon and custom styling
- * <SidebarMenuSubItem>
- *   <SidebarMenuSubButton className="gap-3">
- *     <File className="h-3 w-3" />
- *     <span>README.md</span>
- *   </SidebarMenuSubButton>
- * </SidebarMenuSubItem>
- * ```
- *
- * @accessibility
- * - Full keyboard navigation support
- * - Focus visible indicators
- * - Active state indication for screen readers
- * - Proper contrast ratios for all states
- * - Support for assistive technology navigation
- *
- * @features
- * - Automatic hiding when parent sidebar is collapsed
- * - Smooth hover and focus transitions
- * - Consistent spacing with parent menu items
- * - Overflow text truncation for long labels
- *
- * @see {@link SidebarMenuSubItem} - Parent submenu item container
- * @see {@link SidebarMenuSub} - Submenu container
- * @see {@link SidebarMenuButton} - Parent menu button
- * @since 1.0.0
+ * List item wrapper for submenu entry.
  */
-declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: {
-    asChild?: boolean;
+declare function SidebarMenuSubItem({ className, ...props }: SidebarMenuSubItemProps): import("react/jsx-runtime").JSX.Element;
+type SidebarMenuSubButtonProps = useRender.ComponentProps<"a"> & React.ComponentProps<"a"> & {
+    /** Size variant. @default "md" */
     size?: "sm" | "md";
+    /** Mark as active/current page. */
     isActive?: boolean;
-    className?: string;
-} & React.ComponentProps<"a">): import("react/jsx-runtime").JSX.Element;
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };
+};
+/**
+ * Link button for submenu item. Defaults to anchor tag.
+ */
+declare function SidebarMenuSubButton({ render, size, isActive, className, ...props }: SidebarMenuSubButtonProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, type SidebarProps, type SidebarContentProps, type SidebarFooterProps, type SidebarGroupProps, type SidebarGroupActionProps, type SidebarGroupContentProps, type SidebarGroupLabelProps, type SidebarHeaderProps, type SidebarInputProps, type SidebarInsetProps, type SidebarMenuProps, type SidebarMenuActionProps, type SidebarMenuBadgeProps, type SidebarMenuButtonProps, type SidebarMenuItemProps, type SidebarMenuSkeletonProps, type SidebarMenuSubProps, type SidebarMenuSubButtonProps, type SidebarMenuSubItemProps, type SidebarProviderProps, type SidebarRailProps, type SidebarSeparatorProps, type SidebarTriggerProps, };
 //# sourceMappingURL=sidebar.d.ts.map