@loke/design-system/dist/components/sidebar/sidebar.d.mts

A design system with individually importable components

import { Button } from "@loke/design-system/button";
import { Separator } from "@loke/design-system/separator";
import { TooltipContent } from "@loke/design-system/tooltip";
import { type VariantProps } from "class-variance-authority";
import { type ComponentProps } from "react";
/** Default width of the sidebar when expanded */
declare const SIDEBAR_WIDTH = "16rem";
/**
 * Context properties for managing sidebar state and behavior
 */
type SidebarContextProps = {
    state: "expanded" | "collapsed";
    open: boolean;
    setOpen: (open: boolean) => void;
    openMobile: boolean;
    setOpenMobile: (open: boolean) => void;
    isMobile: boolean;
    toggleSidebar: () => void;
};
/**
 * Hook to access sidebar context and state
 * @throws Error if used outside of SidebarProvider
 */
declare function useSidebar(): SidebarContextProps;
/**
 * Provider component that manages sidebar state and provides context to child components.
 * Handles desktop/mobile states, keyboard shortcuts, and state persistence via cookies.
 */
declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: ComponentProps<"div"> & {
    defaultOpen?: boolean;
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
}): import("react/jsx-runtime").JSX.Element;
/**
 * Main sidebar component that renders differently based on mobile/desktop state.
 * On mobile, renders as a sheet overlay. On desktop, renders as a fixed sidebar with collapsible behavior.
 */
declare function Sidebar({ side, variant, collapsible, className, children, ...props }: ComponentProps<"div"> & {
    side?: "left" | "right";
    variant?: "sidebar" | "floating" | "inset";
    collapsible?: "offcanvas" | "icon" | "none";
}): import("react/jsx-runtime").JSX.Element;
/**
 * Button component that triggers the sidebar toggle functionality.
 * Displays a hamburger menu icon and handles the toggle action.
 */
declare function SidebarTrigger({ className, onClick, ...props }: ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
/**
 * Invisible clickable rail area that allows users to toggle the sidebar by clicking on the edge.
 * Provides visual feedback with a border line on hover.
 */
declare function SidebarRail({ className, ...props }: ComponentProps<"button">): import("react/jsx-runtime").JSX.Element;
/**
 * Main content area that adjusts its layout based on sidebar state.
 * Provides proper spacing and responsive behavior when sidebar is expanded/collapsed.
 */
declare function SidebarInset({ className, ...props }: ComponentProps<"main">): import("react/jsx-runtime").JSX.Element;
/**
 * Header section of the sidebar, typically containing logo, title, or primary navigation.
 * Provides consistent spacing and layout for the top section of the sidebar.
 */
declare function SidebarHeader({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
interface SidebarFooterProps extends Omit<ComponentProps<"div">, "children"> {
    currentUser: {
        name: string;
        email: string;
        avatar?: string;
    };
}
/**
 * Footer section of the sidebar that displays current user information.
 * Shows user avatar, name, and email. Adapts layout based on sidebar collapsed/expanded state.
 */
declare function SidebarFooter({ className, currentUser, ...props }: SidebarFooterProps): import("react/jsx-runtime").JSX.Element;
/**
 * Visual separator component for dividing sections within the sidebar.
 * Provides consistent styling and spacing for section boundaries.
 */
declare function SidebarSeparator({ className, ...props }: ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
/**
 * Scrollable content area of the sidebar where navigation items and other content are placed.
 * Handles overflow and adjusts padding based on sidebar state.
 */
declare function SidebarContent({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
/**
 * Container for sidebar navigation menu items.
 * Provides proper layout and alignment for menu item lists.
 */
declare function SidebarMenu({ className, ...props }: ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
/**
 * Individual menu item wrapper component.
 * Provides consistent spacing and grouping for menu items.
 */
declare function SidebarMenuItem({ className, ...props }: ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
/** Class variant authority configuration for sidebar menu button styling */
declare const sidebarMenuButtonVariants: (props?: ({
    size?: "default" | "lg" | "sm" | null | undefined;
    variant?: "default" | "outline" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/**
 * Clickable button component for sidebar menu items.
 * Supports active states, tooltips, and different visual variants.
 * Can render as a button or delegate to child component via asChild prop.
 */
declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: ComponentProps<"button"> & {
    asChild?: boolean;
    isActive?: boolean;
    tooltip?: string | ComponentProps<typeof TooltipContent>;
} & VariantProps<typeof sidebarMenuButtonVariants>): import("react/jsx-runtime").JSX.Element;
/**
 * Skeleton loading component for menu items during data fetching.
 * Provides consistent placeholder appearance with optional icon placeholder.
 */
declare function SidebarMenuSkeleton({ className, showIcon, ...props }: ComponentProps<"div"> & {
    showIcon?: boolean;
}): import("react/jsx-runtime").JSX.Element;
export { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, SIDEBAR_WIDTH, };