@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
534 lines • 17.5 kB
TypeScript
import * as React from "react";
import { TooltipContent } from "./tooltip";
type SidebarContextProps = {
state: "expanded" | "collapsed";
open: boolean;
setOpen: (open: boolean) => void;
openMobile: boolean;
setOpenMobile: (open: boolean) => void;
isMobile: boolean;
toggleSidebar: () => void;
};
/**
* Returns the active sidebar context and enforces provider usage.
*
* @remarks
* Must be called from within {@link SidebarProvider}. Exposes desktop and mobile
* open state along with the shared toggle helper used by sidebar primitives.
*
* @example
* ```tsx
* const {open, toggleSidebar} = useSidebar();
* ```
*
* @see {@link https://react.dev/reference/react/useContext | React useContext Docs}
*/
declare function useSidebar(): SidebarContextProps;
/**
* Props for the sidebar provider.
*/
interface SidebarProviderProps extends React.ComponentProps<"div"> {
/**
* Initial uncontrolled open state for desktop layouts.
* @default true
*/
defaultOpen?: boolean;
/**
* Controlled open state for desktop layouts.
* @default undefined
*/
open?: boolean;
/**
* Callback invoked when the desktop open state changes.
* @default undefined
*/
onOpenChange?: (open: boolean) => void;
}
/**
* Provides shared sidebar state, keyboard shortcuts, and responsive behavior.
*
* @remarks
* - Renders a `<div>` element
* - Built on shared React context and tooltip primitives
* - Persists desktop collapse state to a cookie for cross-page continuity
*
* @example
* ```tsx
* <SidebarProvider>
* <Sidebar />
* </SidebarProvider>
* ```
*
* @see {@link https://react.dev/reference/react/useContext | React Context Docs}
*/
declare const SidebarProvider: React.ForwardRefExoticComponent<Omit<SidebarProviderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Props for the root sidebar panel.
*/
type SidebarProps = React.ComponentProps<"div"> & {
/**
* Edge of the screen where the sidebar is rendered.
* @default "left"
*/
side?: "left" | "right";
/**
* Visual presentation style used for desktop rendering.
* @default "sidebar"
*/
variant?: "sidebar" | "floating" | "inset";
/**
* Desktop collapse behavior for the sidebar.
* @default "offcanvas"
*/
collapsible?: "offcanvas" | "icon" | "none";
};
/**
* Renders the responsive sidebar panel for desktop and mobile layouts.
*
* @remarks
* - Renders a `<div>` element on desktop and a dialog portal on mobile
* - Built on the shared sidebar context
*
* @example
* ```tsx
* <Sidebar>
* <SidebarContent />
* </Sidebar>
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/dialog_role | ARIA Dialog Role}
*/
declare const Sidebar: React.ForwardRefExoticComponent<Omit<SidebarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Renders the primary button used to toggle the sidebar.
*
* @remarks
* - Renders the shared `Button` component
* - Built on the shared sidebar context
*
* @example
* ```tsx
* <SidebarTrigger />
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/button | HTML button element}
*/
declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("./button").ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
/**
* Renders a slim rail button used to toggle the sidebar collapsed state.
*
* @remarks
* - Renders a `<button>` element
* - Built on the shared sidebar context
*
* @example
* ```tsx
* <SidebarRail />
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/button | HTML button element}
*/
declare const SidebarRail: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
/**
* Renders the inset main content region adjacent to the sidebar.
*
* @remarks
* - Renders a `<main>` element
* - Built as a layout helper for inset sidebar variants
*
* @example
* ```tsx
* <SidebarInset>Main content</SidebarInset>
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/main | HTML main element}
*/
declare const SidebarInset: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Renders a styled input inside sidebar layouts.
*
* @remarks
* - Renders the shared `Input` component
* - Built for sidebar search and filtering affordances
*
* @example
* ```tsx
* <SidebarInput placeholder='Search...' />
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/input | HTML input element}
*/
declare const SidebarInput: React.ForwardRefExoticComponent<Omit<Omit<import("./input").InputProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
/**
* Renders the header region of the sidebar.
*
* @remarks
* - Renders a `<div>` element
* - Built as a layout helper for branding or primary controls
*
* @example
* ```tsx
* <SidebarHeader>Workspace</SidebarHeader>
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/div | HTML div element}
*/
declare const SidebarHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Renders the footer region of the sidebar.
*
* @remarks
* - Renders a `<div>` element
* - Built as a layout helper for actions or account controls
*
* @example
* ```tsx
* <SidebarFooter>Footer content</SidebarFooter>
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/div | HTML div element}
*/
declare const SidebarFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Renders a separator between sidebar regions or menu groups.
*
* @remarks
* - Renders the shared `Separator` component
* - Built as a lightweight structural divider
*
* @example
* ```tsx
* <SidebarSeparator />
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/hr | HTML thematic break}
*/
declare const SidebarSeparator: React.ForwardRefExoticComponent<Omit<Omit<import("./separator").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Renders the scrollable content region of the sidebar.
*
* @remarks
* - Renders a `<div>` element
* - Built as a layout helper for menu groups and custom content
*
* @example
* ```tsx
* <SidebarContent>
* <SidebarMenu />
* </SidebarContent>
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/div | HTML div element}
*/
declare const SidebarContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Renders a logical grouping container inside the sidebar.
*
* @remarks
* - Renders a `<div>` element
* - Built as a layout helper for related navigation sections
*
* @example
* ```tsx
* <SidebarGroup>
* <SidebarGroupLabel>Projects</SidebarGroupLabel>
* </SidebarGroup>
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/div | HTML div element}
*/
declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Props for the sidebar group label.
*/
interface SidebarGroupLabelProps extends React.ComponentProps<"div"> {
/**
* Whether to merge props into the single child element instead of rendering a wrapper `<div>`.
* @default false
*/
asChild?: boolean;
}
/**
* Renders the heading label for a sidebar group.
*
* @remarks
* - Renders a `<div>` element by default
* - Supports `asChild` composition for custom markup
*
* @example
* ```tsx
* <SidebarGroupLabel>Projects</SidebarGroupLabel>
* ```
*
* @see {@link https://react.dev/reference/react/cloneElement | React cloneElement Docs}
*/
declare const SidebarGroupLabel: React.ForwardRefExoticComponent<Omit<SidebarGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Props for the sidebar group action button.
*/
interface SidebarGroupActionProps extends React.ComponentProps<"button"> {
/**
* Whether to merge props into the single child element instead of rendering a wrapper `<button>`.
* @default false
*/
asChild?: boolean;
}
/**
* Renders a secondary action aligned with a sidebar group heading.
*
* @remarks
* - Renders a `<button>` element by default
* - Supports `asChild` composition for custom controls
*
* @example
* ```tsx
* <SidebarGroupAction aria-label='Add project'>+</SidebarGroupAction>
* ```
*
* @see {@link https://react.dev/reference/react/cloneElement | React cloneElement Docs}
*/
declare const SidebarGroupAction: React.ForwardRefExoticComponent<Omit<SidebarGroupActionProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
/**
* Renders the content container for a sidebar group.
*
* @remarks
* - Renders a `<div>` element
* - Built as a structural wrapper for nested menu items or custom content
*
* @example
* ```tsx
* <SidebarGroupContent>
* <SidebarMenu />
* </SidebarGroupContent>
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/div | HTML div element}
*/
declare const SidebarGroupContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Renders the root sidebar navigation list.
*
* @remarks
* - Renders a `<ul>` element
* - Built as the primary menu container for sidebar navigation
*
* @example
* ```tsx
* <SidebarMenu>
* <SidebarMenuItem />
* </SidebarMenu>
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/ul | HTML ul element}
*/
declare const SidebarMenu: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
/**
* Renders a single list item within the sidebar menu.
*
* @remarks
* - Renders an `<li>` element
* - Built as a structural wrapper for menu buttons and actions
*
* @example
* ```tsx
* <SidebarMenuItem>
* <SidebarMenuButton>Dashboard</SidebarMenuButton>
* </SidebarMenuItem>
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/li | HTML li element}
*/
declare const SidebarMenuItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
declare const sidebarMenuButtonVariantStyles: {
readonly default: string;
readonly outline: string;
};
declare const sidebarMenuButtonSizeStyles: {
readonly default: string;
readonly sm: string;
readonly lg: string;
};
/**
* Props for the sidebar menu button.
*/
interface SidebarMenuButtonProps extends React.ComponentProps<"button"> {
/**
* Whether to merge props into the single child element instead of rendering a wrapper `<button>`.
* @default false
*/
asChild?: boolean;
/**
* Whether the menu item should be styled as active.
* @default false
*/
isActive?: boolean;
/**
* Tooltip content displayed when the sidebar is collapsed on desktop.
* @default undefined
*/
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
/**
* Visual style variant for the menu button.
* @default "default"
*/
variant?: keyof typeof sidebarMenuButtonVariantStyles;
/**
* Size preset for the menu button.
* @default "default"
*/
size?: keyof typeof sidebarMenuButtonSizeStyles;
}
/**
* Renders the primary interactive element for a sidebar menu item.
*
* @remarks
* - Renders a `<button>` element by default
* - Supports `asChild` composition and contextual tooltips when collapsed
*
* @example
* ```tsx
* <SidebarMenuButton isActive>Dashboard</SidebarMenuButton>
* ```
*
* @see {@link https://react.dev/reference/react/cloneElement | React cloneElement Docs}
*/
declare const SidebarMenuButton: React.ForwardRefExoticComponent<Omit<SidebarMenuButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
/**
* Props for the sidebar menu action button.
*/
interface SidebarMenuActionProps extends React.ComponentProps<"button"> {
/**
* Whether to merge props into the single child element instead of rendering a wrapper `<button>`.
* @default false
*/
asChild?: boolean;
/**
* Whether the action should remain hidden until its parent item is hovered.
* @default false
*/
showOnHover?: boolean;
}
/**
* Renders a secondary action button aligned within a sidebar menu item.
*
* @remarks
* - Renders a `<button>` element by default
* - Supports `asChild` composition for custom controls
*
* @example
* ```tsx
* <SidebarMenuAction showOnHover>⋯</SidebarMenuAction>
* ```
*
* @see {@link https://react.dev/reference/react/cloneElement | React cloneElement Docs}
*/
declare const SidebarMenuAction: React.ForwardRefExoticComponent<Omit<SidebarMenuActionProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
/**
* Renders a badge alongside a sidebar menu item.
*
* @remarks
* - Renders a `<div>` element
* - Built as a lightweight presentational helper for counts and statuses
*
* @example
* ```tsx
* <SidebarMenuBadge>3</SidebarMenuBadge>
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/div | HTML div element}
*/
declare const SidebarMenuBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Props for the sidebar menu skeleton.
*/
interface SidebarMenuSkeletonProps extends React.ComponentProps<"div"> {
/**
* Whether to render a leading skeleton icon placeholder.
* @default false
*/
showIcon?: boolean;
}
/**
* Renders a loading placeholder for sidebar menu items.
*
* @remarks
* - Renders a `<div>` element
* - Built from shared `Skeleton` primitives
*
* @example
* ```tsx
* <SidebarMenuSkeleton showIcon />
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/div | HTML div element}
*/
declare const SidebarMenuSkeleton: React.ForwardRefExoticComponent<Omit<SidebarMenuSkeletonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Renders a nested menu list within the sidebar.
*
* @remarks
* - Renders a `<ul>` element
* - Built for multi-level navigation structures
*
* @example
* ```tsx
* <SidebarMenuSub>
* <SidebarMenuSubItem />
* </SidebarMenuSub>
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/ul | HTML ul element}
*/
declare const SidebarMenuSub: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
/**
* Renders a single nested sidebar menu list item.
*
* @remarks
* - Renders an `<li>` element
* - Built as a structural wrapper for nested menu links
*
* @example
* ```tsx
* <SidebarMenuSubItem />
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/li | HTML li element}
*/
declare const SidebarMenuSubItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
/**
* Props for the sidebar nested menu button.
*/
interface SidebarMenuSubButtonProps extends React.ComponentProps<"a"> {
/**
* Whether to merge props into the single child element instead of rendering a wrapper `<a>`.
* @default false
*/
asChild?: boolean;
/**
* Size preset for the nested menu link.
* @default "md"
*/
size?: "sm" | "md";
/**
* Whether the nested menu item should be styled as active.
* @default undefined
*/
isActive?: boolean;
}
/**
* Renders a nested sidebar menu link.
*
* @remarks
* - Renders an `<a>` element by default
* - Supports `asChild` composition for custom link components
*
* @example
* ```tsx
* <SidebarMenuSubButton href='/settings/profile'>Profile</SidebarMenuSubButton>
* ```
*
* @see {@link https://react.dev/reference/react/cloneElement | React cloneElement Docs}
*/
declare const SidebarMenuSubButton: React.ForwardRefExoticComponent<Omit<SidebarMenuSubButtonProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
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, };
//# sourceMappingURL=sidebar.d.ts.map