@tempots/beatui 0.82.1 → 0.83.0

package/dist/types/components/navigation/flyout.d.ts

@@ -1,46 +1,148 @@
 import { Renderable, TNode, Value } from '@tempots/dom';
 import { Placement } from '@tempots/ui';
+/**
+ * Built-in trigger modes that control how the {@link Flyout} is shown.
+ *
+ * - `'hover'` - Shows on mouse enter, hides on mouse leave.
+ * - `'focus'` - Shows on focus, hides on blur.
+ * - `'hover-focus'` - Combines both hover and focus triggers.
+ * - `'click'` - Shows on click, hides on clicking outside.
+ * - `'never'` - Never shows automatically; must be controlled programmatically via a custom trigger function.
+ */
 export type FlyoutTrigger = 'hover' | 'focus' | 'hover-focus' | 'click' | 'never';
+/**
+ * Custom trigger function for the {@link Flyout} component.
+ * Receives `show` and `hide` callbacks and returns trigger content that controls
+ * when the flyout appears and disappears.
+ *
+ * @param show - Call to show the flyout
+ * @param hide - Call to hide the flyout
+ * @returns A renderable node containing the trigger logic
+ */
 export type FlyoutTriggerFunction = (show: () => void, hide: () => void) => TNode;
+/**
+ * Positioning data for a popover arrow element, provided by the PopOver positioning engine.
+ */
 export interface PopOverArrowOptions {
+    /** The computed placement of the popover (e.g., `'top'`, `'bottom-start'`). */
     placement: string;
+    /** Horizontal offset of the arrow in pixels relative to the popover container. */
     x?: number;
+    /** Vertical offset of the arrow in pixels relative to the popover container. */
     y?: number;
+    /** Offset from the center of the reference element, used for arrow alignment. */
     centerOffset: number;
+    /** Width of the popover container in pixels. */
     containerWidth: number;
+    /** Height of the popover container in pixels. */
     containerHeight: number;
 }
+/**
+ * Configuration options for the {@link Flyout} component.
+ */
 export interface FlyoutOptions {
-    /** The flyout content to display */
+    /**
+     * Factory function that returns the flyout content to display.
+     * Called lazily when the flyout opens.
+     */
     content: () => TNode;
-    /** Placement of the flyout relative to the trigger element */
+    /**
+     * Placement of the flyout relative to the trigger element.
+     * Uses the Floating UI placement model (e.g., `'top'`, `'bottom-start'`, `'right-end'`).
+     * @default 'top'
+     */
     placement?: Value<Placement>;
-    /** Delay in milliseconds before showing the flyout on hover */
+    /**
+     * Delay in milliseconds before showing the flyout after trigger activation.
+     * @default 250
+     */
     showDelay?: Value<number>;
-    /** Delay in milliseconds before hiding the flyout after mouse leave */
+    /**
+     * Delay in milliseconds before hiding the flyout after trigger deactivation.
+     * @default 500
+     */
     hideDelay?: Value<number>;
-    /** Offset in pixels from the main axis (vertical for top/bottom, horizontal for left/right) */
+    /**
+     * Offset in pixels from the main axis (vertical for top/bottom placements,
+     * horizontal for left/right placements).
+     * @default 8
+     */
     mainAxisOffset?: Value<number>;
-    /** Offset in pixels from the cross axis (horizontal for top/bottom, vertical for left/right) */
+    /**
+     * Offset in pixels from the cross axis (horizontal for top/bottom placements,
+     * vertical for left/right placements).
+     * @default 0
+     */
     crossAxisOffset?: Value<number>;
-    /** How to show the flyout */
+    /**
+     * How the flyout is triggered to show and hide. Accepts a built-in {@link FlyoutTrigger}
+     * string or a custom {@link FlyoutTriggerFunction} for programmatic control.
+     * @default 'hover-focus'
+     */
     showOn?: Value<FlyoutTrigger> | FlyoutTriggerFunction;
-    /** Whether the flyout can be closed with Escape key or clicking outside */
+    /**
+     * Whether the flyout can be closed with the Escape key or by clicking outside.
+     * @default true
+     */
     closable?: Value<boolean>;
-    /** Optional arrow configuration - receives a signal with PopOver positioning data */
+    /**
+     * Optional arrow renderer. Receives a signal with {@link PopOverArrowOptions} positioning
+     * data and returns a TNode to render as the arrow element.
+     */
     arrow?: (signal: any) => TNode;
-    /** Additional role attribute for accessibility */
+    /**
+     * ARIA role attribute applied to the flyout container.
+     * @default 'dialog'
+     */
     role?: Value<string>;
-    /** Optional aria-haspopup value for the trigger element */
+    /**
+     * Value for the `aria-haspopup` attribute on the trigger element.
+     * Indicates the type of popup that the trigger controls.
+     * @default 'dialog'
+     */
     hasPopup?: Value<boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid'>;
 }
 /**
- * Flyout component that provides a flexible popover with various trigger options.
- * This is the base component that powers Tooltip and other overlay components.
+ * Flexible popover component with configurable trigger modes, animated transitions,
+ * and accessibility support.
+ *
+ * Unlike wrapper-based flyout libraries, this component is designed to be rendered as a
+ * **child** of the trigger element. It attaches event listeners to the parent element
+ * and manages the popover lifecycle (show/hide with delays, animation, keyboard dismissal).
+ *
+ * This is the base component that powers {@link Tooltip}, {@link Menu}, and other
+ * positioned overlay components.
+ *
+ * Uses `@tempots/ui` PopOver for Floating UI-based positioning.
+ *
+ * @param options - Configuration options controlling content, placement, triggers, delays, and accessibility
+ * @returns A renderable node to be placed inside the trigger element
  *
- * Unlike other flyout libraries, this component is designed to be a child of the element
- * it provides a flyout for, rather than wrapping it.
+ * @example
+ * ```typescript
+ * // Hover-triggered flyout
+ * html.button(
+ *   'Hover me',
+ *   Flyout({
+ *     content: () => html.div('Flyout content'),
+ *     placement: 'bottom',
+ *     showOn: 'hover',
+ *     showDelay: 200,
+ *     hideDelay: 300,
+ *   })
+ * )
+ * ```
  *
- * Uses @tempo-ts/ui PopOver for positioning.
+ * @example
+ * ```typescript
+ * // Click-triggered flyout with custom trigger function
+ * html.button(
+ *   'Click me',
+ *   Flyout({
+ *     content: () => html.div('Custom content'),
+ *     showOn: (show, hide) => on.click(() => show()),
+ *   })
+ * )
+ * ```
  */
 export declare function Flyout(options: FlyoutOptions): Renderable;

package/dist/types/components/navigation/index.d.ts

@@ -1,6 +1,9 @@
+export * from './breadcrumbs';
 export * from './flyout';
 export * from './link';
 export * from './menu';
+export * from './pagination';
 export * from './sidebar/index';
 export * from './tabs';
 export * from './toolbar';
+export * from './tree-view';

package/dist/types/components/navigation/link/link.d.ts

@@ -1,20 +1,120 @@
 import { TNode, Value } from '@tempots/dom';
 import type { NavigationOptions } from '@tempots/ui';
 import { ThemeColorName } from '../../../tokens';
+/**
+ * Visual style variant for the {@link Link} component.
+ *
+ * - `'default'` - Standard underlined link appearance.
+ * - `'plain'` - No underline; inherits text color.
+ * - `'hover'` - Underline appears only on hover.
+ */
 export type LinkVariant = 'default' | 'plain' | 'hover';
+/**
+ * Configuration options for the {@link Link} component.
+ */
 export interface LinkOptions {
+    /**
+     * The URL or path that the link navigates to.
+     */
     href: Value<string>;
+    /**
+     * Visual style variant controlling underline behavior.
+     * @default 'default'
+     */
     variant?: Value<LinkVariant>;
+    /**
+     * Theme color applied to the link text and hover state.
+     * @default 'primary'
+     */
     color?: Value<ThemeColorName>;
+    /**
+     * Theme color applied to the link text when disabled.
+     * @default 'base'
+     */
     colorDisabled?: Value<ThemeColorName>;
+    /**
+     * Whether the link is disabled. When `true`, the link renders as a non-interactive
+     * `<span>` element instead of an anchor.
+     * @default false
+     */
     disabled?: Value<boolean>;
+    /**
+     * Whether to use the View Transitions API for navigation animations.
+     * @default true
+     */
     viewTransition?: boolean;
+    /**
+     * Optional state object to pass to the navigation history entry.
+     */
     state?: NavigationOptions['state'];
+    /**
+     * Scroll behavior after navigation (e.g., scroll to top or preserve position).
+     */
     scroll?: NavigationOptions['scroll'];
+    /**
+     * Whether to replace the current history entry instead of pushing a new one.
+     */
     replace?: NavigationOptions['replace'];
+    /**
+     * Target attribute for the anchor element (e.g., `'_blank'` for new tab).
+     */
     target?: Value<string>;
+    /**
+     * Relationship attribute for the anchor element (e.g., `'noopener noreferrer'`).
+     */
     rel?: Value<string>;
 }
+/**
+ * Generates the CSS class string for the link based on its variant and disabled state.
+ *
+ * @param variant - The visual style variant
+ * @param disabled - Whether the link is disabled
+ * @returns A space-separated CSS class string
+ */
 export declare function generateLinkClasses(variant: LinkVariant, disabled: boolean): string;
+/**
+ * Generates the inline CSS custom properties for link color theming in both light and dark modes.
+ *
+ * @param color - The theme color name to use for link text
+ * @returns A semicolon-separated CSS custom property string
+ */
 export declare function generateLinkStyles(color: ThemeColorName): string;
+/**
+ * Themed navigation link component with support for client-side routing, view transitions,
+ * and disabled state.
+ *
+ * When enabled, renders as an `Anchor` element from `@tempots/ui` with client-side navigation.
+ * When disabled, renders as a `<span>` element with disabled styling to prevent interaction.
+ *
+ * @param options - Configuration options controlling appearance, navigation behavior, and accessibility
+ * @param children - Child content displayed inside the link
+ * @returns A renderable node
+ *
+ * @example
+ * ```typescript
+ * Link(
+ *   { href: '/about', color: 'primary', variant: 'default' },
+ *   'About Us'
+ * )
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // External link opening in a new tab
+ * Link(
+ *   { href: 'https://example.com', target: '_blank', rel: 'noopener noreferrer' },
+ *   'Visit Example'
+ * )
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Disabled link
+ * const isDisabled = prop(true)
+ * Link(
+ *   { href: '/dashboard', disabled: isDisabled, colorDisabled: 'base' },
+ *   'Dashboard'
+ * )
+ * ```
+ */
 export declare function Link({ href, variant, color, colorDisabled, disabled, viewTransition, state, scroll, replace, target, rel, }: LinkOptions, ...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/navigation/menu.d.ts

@@ -1,95 +1,209 @@
 import { TNode, Value, Renderable } from '@tempots/dom';
 import { Placement } from '@tempots/ui';
 import { FlyoutTrigger, FlyoutTriggerFunction } from './flyout';
+/**
+ * Trigger mode for the {@link Menu} component.
+ * Alias for {@link FlyoutTrigger} -- controls how the menu is shown (e.g., `'click'`, `'hover'`).
+ */
 export type MenuTrigger = FlyoutTrigger;
+/**
+ * Configuration options for the {@link Menu} component.
+ */
 export interface MenuOptions {
-    /** The menu items to display */
+    /**
+     * Factory function returning the array of menu items (created via {@link MenuItem},
+     * {@link MenuSeparator}, or custom nodes with `role="menuitem"`).
+     */
     items: () => TNode[];
-    /** Placement of the menu relative to the trigger element */
+    /**
+     * Placement of the menu relative to the trigger element.
+     * @default 'bottom-start'
+     */
     placement?: Value<Placement>;
-    /** Delay in milliseconds before showing the menu on hover */
+    /**
+     * Delay in milliseconds before showing the menu after trigger activation.
+     * @default 0
+     */
     showDelay?: Value<number>;
-    /** Delay in milliseconds before hiding the menu after mouse leave */
+    /**
+     * Delay in milliseconds before hiding the menu after trigger deactivation.
+     * @default 100
+     */
     hideDelay?: Value<number>;
-    /** Offset in pixels from the main axis */
+    /**
+     * Offset in pixels from the main axis.
+     * @default 4
+     */
     mainAxisOffset?: Value<number>;
-    /** Offset in pixels from the cross axis */
+    /**
+     * Offset in pixels from the cross axis.
+     * @default 0
+     */
     crossAxisOffset?: Value<number>;
-    /** How to show the menu (accepts Flyout trigger or a custom trigger function) */
+    /**
+     * How the menu is triggered to show and hide.
+     * Accepts a built-in {@link MenuTrigger} string or a custom {@link FlyoutTriggerFunction}.
+     * @default 'click'
+     */
     showOn?: Value<MenuTrigger> | FlyoutTriggerFunction;
-    /** Whether the menu can be closed with Escape key */
+    /**
+     * Whether the menu can be closed with the Escape key or by clicking outside.
+     * @default true
+     */
     closable?: Value<boolean>;
-    /** Callback when menu is closed */
+    /**
+     * Callback invoked when the menu is closed (via Escape, click outside, or after item activation).
+     */
     onClose?: () => void;
-    /** Callback when a menu item is selected */
+    /**
+     * Callback invoked when a menu item with a `key` is activated (via click or keyboard).
+     * Receives the menu item's `key` as an argument.
+     */
     onAction?: (key: string) => void;
-    /** Accessible label for the menu */
+    /**
+     * Accessible label for the menu container (`aria-label`).
+     */
     ariaLabel?: Value<string>;
-    /** ID of element that labels the menu */
+    /**
+     * ID of the element that labels the menu (`aria-labelledby`).
+     */
     ariaLabelledBy?: Value<string>;
 }
+/**
+ * Configuration options for the {@link MenuItem} component.
+ */
 export interface MenuItemOptions {
-    /** Unique identifier for the menu item */
+    /**
+     * Unique identifier for the menu item. Used by the `onAction` callback in {@link MenuOptions}.
+     * When not provided, a unique session ID is generated automatically.
+     */
     key?: Value<string>;
-    /** The text content of the menu item */
+    /**
+     * Primary text or node content displayed as the menu item label.
+     */
     content: TNode;
-    /** Content to display at the start of the menu item (icons, indicators) */
+    /**
+     * Optional content displayed at the start (left side) of the menu item,
+     * typically used for icons or selection indicators.
+     */
     startContent?: TNode;
-    /** Content to display at the end of the menu item (shortcuts, badges) */
+    /**
+     * Optional content displayed at the end (right side) of the menu item,
+     * typically used for keyboard shortcuts or badges.
+     */
     endContent?: TNode;
-    /** Whether the menu item is disabled */
+    /**
+     * Whether the menu item is disabled. Disabled items are skipped by keyboard
+     * navigation and cannot be activated.
+     * @default false
+     */
     disabled?: Value<boolean>;
-    /** Callback when the menu item is clicked */
+    /**
+     * Callback invoked when the menu item is clicked or activated via keyboard.
+     */
     onClick?: () => void;
-    /** ARIA label for accessibility */
+    /**
+     * Accessible label for the menu item (`aria-label`).
+     */
     ariaLabel?: Value<string>;
-    /** Submenu items for nested menus */
+    /**
+     * Factory function returning submenu items for nested menus.
+     * When provided, the menu item gains a hover-triggered submenu.
+     */
     submenu?: () => TNode[];
-    /** Placement of submenu relative to parent item */
+    /**
+     * Placement of the submenu relative to the parent menu item.
+     * @default 'right-start'
+     */
     submenuPlacement?: Value<Placement>;
 }
+/**
+ * Configuration options for the {@link MenuSeparator} component.
+ */
 export interface MenuSeparatorOptions {
-    /** Optional label for the separator */
+    /**
+     * Optional label displayed alongside the separator line,
+     * useful for grouping related menu items under a heading.
+     */
     label?: TNode;
 }
 /**
- * Menu component that provides a list of actions or options.
- * Built on top of the Flyout component for positioning and overlay behavior.
+ * Dropdown menu component that provides a list of actions or options.
+ *
+ * Built on top of the {@link Flyout} component for positioning and overlay behavior.
+ * Follows the WAI-ARIA menu pattern with full keyboard navigation support:
+ * - Arrow Up/Down to navigate items
+ * - Home/End to jump to first/last item
+ * - Enter/Space to activate the focused item
+ * - Escape to close
+ * - Arrow Right to open submenus, Arrow Left to close them
  *
- * Follows WAI-ARIA menu pattern with proper keyboard navigation and accessibility.
+ * Focus is restored to the trigger element when the menu closes.
+ *
+ * @param options - Configuration options for menu behavior, positioning, and accessibility
+ * @returns A renderable node to be placed inside the trigger element
  *
  * @example
  * ```typescript
  * Button(
- *   { onClick: () => {} },
+ *   { variant: 'outline' },
  *   'Actions',
  *   Menu({
  *     items: () => [
- *       MenuItem({ content: 'Edit', onClick: () => console.log('edit') }),
- *       MenuItem({ content: 'Delete', onClick: () => console.log('delete') }),
- *     ]
+ *       MenuItem({ content: 'Edit', key: 'edit', onClick: () => console.log('edit') }),
+ *       MenuItem({ content: 'Duplicate', key: 'dup' }),
+ *       MenuSeparator(),
+ *       MenuItem({ content: 'Delete', key: 'delete', disabled: true }),
+ *     ],
+ *     onAction: (key) => console.log('Selected:', key),
+ *     placement: 'bottom-start',
  *   })
  * )
  * ```
  */
 export declare function Menu(options: MenuOptions): Renderable;
 /**
- * MenuItem component for individual menu items.
+ * Individual menu item component with optional start/end content and submenu support.
+ *
+ * Renders a `role="menuitem"` element with proper ARIA attributes for disabled state,
+ * selection state, and submenu expansion. Disabled items prevent click propagation
+ * and are skipped by keyboard navigation.
+ *
+ * @param options - Configuration options for the menu item's content, behavior, and accessibility
+ * @returns A renderable node
  *
  * @example
  * ```typescript
  * MenuItem({
+ *   key: 'edit',
  *   content: 'Edit',
- *   startContent: Icon({ icon: 'edit' }),
- *   endContent: html.span('⌘E'),
- *   onClick: () => console.log('edit clicked')
+ *   startContent: Icon({ icon: 'edit', size: 'sm' }),
+ *   endContent: html.span(attr.class('shortcut'), 'Ctrl+E'),
+ *   onClick: () => console.log('edit clicked'),
+ * })
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Menu item with a submenu
+ * MenuItem({
+ *   content: 'Export as...',
+ *   submenu: () => [
+ *     MenuItem({ content: 'PDF', onClick: () => exportAs('pdf') }),
+ *     MenuItem({ content: 'CSV', onClick: () => exportAs('csv') }),
+ *   ],
  * })
  * ```
  */
 export declare function MenuItem(options: MenuItemOptions): Renderable;
 /**
- * MenuSeparator component for visual grouping of menu items.
- * Creates a visual divider between groups of menu items.
+ * Visual separator for grouping related menu items within a {@link Menu}.
+ *
+ * Renders a `role="separator"` element with horizontal orientation. An optional label
+ * can be provided to act as a section heading for the items below.
+ *
+ * @param options - Optional configuration with a label for the separator
+ * @returns A renderable node
  *
  * @example
  * ```typescript
@@ -102,5 +216,11 @@ export declare function MenuItem(options: MenuItemOptions): Renderable;
  *   ]
  * })
  * ```
+ *
+ * @example
+ * ```typescript
+ * // With a labeled section
+ * MenuSeparator({ label: 'Advanced' })
+ * ```
  */
 export declare function MenuSeparator(options?: MenuSeparatorOptions): Renderable;

package/dist/types/components/navigation/pagination.d.ts

@@ -0,0 +1,82 @@
+import { Value } from '@tempots/dom';
+import { ControlSize } from '../theme';
+/**
+ * Configuration options for the {@link Pagination} component.
+ */
+export interface PaginationOptions {
+    /** Current page number (1-indexed). */
+    currentPage: Value<number>;
+    /** Total number of pages available. */
+    totalPages: Value<number>;
+    /** Callback invoked when a page is selected. */
+    onPageChange: (page: number) => void;
+    /** Number of page siblings to show around the current page. @default 1 */
+    siblings?: Value<number>;
+    /** Whether to show Previous/Next navigation buttons. @default true */
+    showPrevNext?: Value<boolean>;
+    /** Whether to show First/Last page buttons. @default false */
+    showFirstLast?: Value<boolean>;
+    /** Size affecting button dimensions and font size. @default 'md' */
+    size?: Value<ControlSize>;
+    /** Whether to distribute items across the full available width. @default false */
+    justify?: Value<boolean>;
+    /** Whether to dynamically adjust the number of visible page numbers to fit available space. @default false */
+    responsive?: Value<boolean>;
+}
+/**
+ * Generates an array of page numbers and ellipsis markers for pagination display.
+ *
+ * The algorithm shows:
+ * - The first page (if not in range)
+ * - An ellipsis if there's a gap after first page
+ * - Page numbers around the current page (siblings)
+ * - An ellipsis if there's a gap before last page
+ * - The last page (if not in range)
+ *
+ * @param current - The current page number (1-indexed)
+ * @param total - The total number of pages
+ * @param siblings - Number of page numbers to show on each side of current
+ * @returns Array of page numbers and 'dots' markers for ellipsis
+ *
+ * @example
+ * ```typescript
+ * generatePaginationRange(5, 10, 1) // [1, 'dots', 4, 5, 6, 'dots', 10]
+ * generatePaginationRange(1, 10, 1) // [1, 2, 'dots', 10]
+ * generatePaginationRange(10, 10, 1) // [1, 'dots', 9, 10]
+ * ```
+ */
+export declare function generatePaginationRange(current: number, total: number, siblings: number): (number | 'dots')[];
+/**
+ * A pagination component for navigating through multiple pages of content.
+ *
+ * Features:
+ * - Configurable number of sibling pages shown around current page
+ * - Optional First/Last page navigation buttons
+ * - Optional Previous/Next navigation buttons
+ * - Ellipsis indicators for collapsed page ranges
+ * - Responsive sizing with theme support
+ * - Full keyboard navigation and ARIA support
+ *
+ * @param options - Configuration for appearance and behavior
+ * @returns A navigation element with pagination controls
+ *
+ * @example
+ * ```typescript
+ * const currentPage = prop(1)
+ * const totalPages = prop(10)
+ *
+ * Pagination({
+ *   currentPage,
+ *   totalPages,
+ *   onPageChange: (page) => {
+ *     currentPage.set(page)
+ *     // Load page data...
+ *   },
+ *   siblings: 1,
+ *   showPrevNext: true,
+ *   showFirstLast: false,
+ *   size: 'md'
+ * })
+ * ```
+ */
+export declare function Pagination({ currentPage, totalPages, onPageChange, siblings, showPrevNext, showFirstLast, size, justify, responsive, }: PaginationOptions): import("@tempots/dom").Renderable;

package/dist/types/components/navigation/sidebar/sidebar-group.d.ts

@@ -1,6 +1,48 @@
 import { TNode, Value } from '@tempots/dom';
+/**
+ * Configuration options for the {@link SidebarGroup} component.
+ */
 export type SidebarGroupOptions = {
+    /**
+     * Whether to render the group in compact "rail" mode, typically used for
+     * icon-only sidebar layouts.
+     * @default false
+     */
     rail?: Value<boolean>;
+    /**
+     * Optional header content displayed above the group of sidebar links.
+     * Typically a section title or label.
+     */
     header?: TNode;
 };
+/**
+ * Groups related sidebar links under an optional header within a {@link Sidebar}.
+ *
+ * Renders as a vertical stack with an optional header section and a container
+ * for child links. Supports a compact "rail" mode for icon-only sidebars.
+ *
+ * @param options - Configuration options for the sidebar group
+ * @param children - Child content, typically {@link SidebarLink} components
+ * @returns A renderable node
+ *
+ * @example
+ * ```typescript
+ * SidebarGroup(
+ *   { header: html.span('Main Navigation') },
+ *   SidebarLink({ content: 'Home', icon: 'home', href: '/' }),
+ *   SidebarLink({ content: 'About', icon: 'info', href: '/about' }),
+ *   SidebarLink({ content: 'Contact', icon: 'mail', href: '/contact' }),
+ * )
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Rail mode (icon-only)
+ * SidebarGroup(
+ *   { rail: true },
+ *   SidebarLink({ content: '', icon: 'home', href: '/' }),
+ *   SidebarLink({ content: '', icon: 'settings', href: '/settings' }),
+ * )
+ * ```
+ */
 export declare function SidebarGroup({ rail, header }: SidebarGroupOptions, ...children: TNode[]): import("@tempots/dom").Renderable;