@cloudraker/reki 2.6.1

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

@@ -0,0 +1,581 @@
+import { default as React, ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
+/** Sidebar variant definitions mapping layout, collapse, and side options. */
+export declare const REKI_SIDEBAR_VARIANTS: {
+    readonly variant: {
+        readonly sidebar: {
+            readonly classes: "";
+            readonly description: "Standard sidebar with border separator";
+        };
+        readonly floating: {
+            readonly classes: "";
+            readonly description: "Floating sidebar with shadow and rounded corners";
+        };
+        readonly inset: {
+            readonly classes: "";
+            readonly description: "Inset sidebar within the content area";
+        };
+    };
+    readonly collapsible: {
+        readonly icon: {
+            readonly classes: "";
+            readonly description: "Collapses to show icons only";
+        };
+        readonly offcanvas: {
+            readonly classes: "";
+            readonly description: "Slides off screen when collapsed";
+        };
+        readonly none: {
+            readonly classes: "";
+            readonly description: "Cannot be collapsed";
+        };
+    };
+    readonly side: {
+        readonly left: {
+            readonly classes: "";
+            readonly description: "Left-aligned sidebar";
+        };
+        readonly right: {
+            readonly classes: "";
+            readonly description: "Right-aligned sidebar";
+        };
+    };
+};
+export declare const REKI_SIDEBAR_DEFAULT_VARIANTS: {
+    readonly variant: "sidebar";
+    readonly collapsible: "icon";
+    readonly side: "left";
+};
+export declare const REKI_SIDEBAR_STYLING: {
+    readonly width: {
+        readonly expanded: "16.25rem";
+        readonly icon: "57px";
+    };
+    readonly mobile: {
+        readonly breakpoint: 768;
+    };
+};
+export type SidebarSide = "left" | "right";
+export type SidebarVariant = "sidebar" | "floating" | "inset";
+export type SidebarCollapsible = "icon" | "offcanvas" | "none";
+export type SidebarState = "expanded" | "collapsed" | "peeking";
+export interface SidebarContextValue {
+    state: SidebarState;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+    variant: "sidebar" | "floating" | "inset";
+    side: "left" | "right";
+    collapsible: "icon" | "offcanvas" | "none";
+    width: number;
+    resizable: boolean;
+    minWidth: number;
+    maxWidth: number;
+    isResizing: boolean;
+    setIsResizing: (resizing: boolean) => void;
+    setWidth: (width: number) => void;
+    isPeeking: boolean;
+    peekable: boolean;
+    startPeek: () => void;
+    stopPeek: () => void;
+    contained: boolean;
+    animationDuration: number;
+}
+/**
+ * Hook to access sidebar state and actions from any descendant component.
+ *
+ * @example
+ * ```tsx
+ * const { state, open, toggleSidebar, isMobile } = useSidebar();
+ * ```
+ *
+ * @throws Error if used outside a `Sidebar.Provider`.
+ */
+export declare function useSidebar(): SidebarContextValue;
+export interface SidebarProviderProps {
+    /** Initial open state when uncontrolled. @default true */
+    defaultOpen?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Callback when open state changes (controlled mode). */
+    onOpenChange?: (open: boolean) => void;
+    /** Sidebar layout variant. @default "sidebar" */
+    variant?: SidebarVariant;
+    /** Which side the sidebar is on. @default "left" */
+    side?: SidebarSide;
+    collapsible?: "icon" | "offcanvas" | "none";
+    /** Enable drag-to-resize on the sidebar edge. @default false */
+    resizable?: boolean;
+    /** Initial width in pixels when resizable. @default 256 */
+    defaultWidth?: number;
+    /** Minimum width in pixels when resizing. @default 200 */
+    minWidth?: number;
+    /** Maximum width in pixels when resizing. @default 480 */
+    maxWidth?: number;
+    /** Callback when width changes during resize. */
+    onWidthChange?: (width: number) => void;
+    /**
+     * When true, the collapsed sidebar uses absolute positioning instead of fixed,
+     * keeping it scoped inside a bounded parent. Useful for demos and embedded sidebars.
+     * @default false
+     */
+    contained?: boolean;
+    /**
+     * When true, hovering or focusing the collapsed sidebar temporarily expands it.
+     * The `state` will be `"peeking"` during the peek. Moving away collapses it back.
+     * @default false
+     */
+    peekable?: boolean;
+    /**
+     * Duration of sidebar expand/collapse animation in milliseconds.
+     * @default 250
+     */
+    animationDuration?: number;
+    /**
+     * Viewport width (in px) below which the sidebar renders as a mobile dialog
+     * sheet instead of the desktop aside rail.
+     * @default 768
+     */
+    mobileBreakpoint?: number;
+    /** Content — typically `<Sidebar>` + main content. */
+    children: ReactNode;
+    /** Additional CSS classes for the wrapper div. */
+    className?: string;
+    /** Inline styles for the wrapper div. */
+    style?: CSSProperties;
+}
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, variant, side, collapsible, resizable, defaultWidth, minWidth, maxWidth, onWidthChange, contained, peekable, animationDuration, mobileBreakpoint, children, className, style, }: SidebarProviderProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarProvider {
+    var displayName: string;
+}
+export interface SidebarRootProps extends ComponentPropsWithoutRef<"aside"> {
+    /** Additional CSS classes for the sidebar element. */
+    className?: string;
+    /** Additional CSS classes for the inner content container. */
+    contentClassName?: string;
+    /** Sidebar content — Header, Content, Footer, etc. */
+    children: ReactNode;
+}
+/**
+ * Main sidebar container. Renders as `<aside>` on desktop, modal sidebar sheet on mobile.
+ * Must be used inside `Sidebar.Provider`.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Provider>
+ *   <Sidebar>
+ *     <Sidebar.Header>...</Sidebar.Header>
+ *     <Sidebar.Content>...</Sidebar.Content>
+ *     <Sidebar.Footer>...</Sidebar.Footer>
+ *   </Sidebar>
+ * </Sidebar.Provider>
+ * ```
+ */
+declare const SidebarRoot: React.ForwardRefExoticComponent<SidebarRootProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Top section of the sidebar. Typically contains a logo, title, and action button.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Header>
+ *   <CloudflareLogo />
+ *   <span>Design Engineering</span>
+ *   <Button shape="square" icon={CaretUpDownIcon} aria-label="Switch" />
+ * </Sidebar.Header>
+ * ```
+ */
+declare const SidebarHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Scrollable middle section of the sidebar. Contains nav groups and menus.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Content>
+ *   <Sidebar.Group>...</Sidebar.Group>
+ * </Sidebar.Content>
+ * ```
+ */
+declare const SidebarContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Bottom-pinned section of the sidebar. Rendered outside the peek zone
+ * so hovering the footer doesn't trigger a peek. Tracks sidebar width
+ * to stay aligned with the content container.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Footer>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Footer>
+ * ```
+ */
+declare const SidebarFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Groups related menu items with an optional label.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Group>
+ *   <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>
+ *   <Sidebar.Menu>...</Sidebar.Menu>
+ * </Sidebar.Group>
+ * ```
+ */
+declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Section label for a sidebar group (e.g., "Build", "Protect & Connect").
+ * When the sidebar is collapsed, renders as a thin horizontal divider.
+ * When it's the first group, the divider is hidden (nothing above to separate from).
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>
+ * ```
+ */
+declare const SidebarGroupLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Navigation menu list. Renders as `<ul>`.
+ *
+ * `MenuButton` auto-wraps in `<li>` so `MenuItem` is optional for simple items.
+ *
+ * @example Simple usage
+ * ```tsx
+ * <Sidebar.Menu>
+ *   <Sidebar.MenuButton icon={HouseIcon} active>Account home</Sidebar.MenuButton>
+ *   <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>
+ * </Sidebar.Menu>
+ * ```
+ *
+ * @example With explicit MenuItem (needed for Collapsible wrapper)
+ * ```tsx
+ * <Sidebar.Menu>
+ *   <Sidebar.MenuItem>
+ *     <Sidebar.Collapsible>...</Sidebar.Collapsible>
+ *   </Sidebar.MenuItem>
+ * </Sidebar.Menu>
+ * ```
+ */
+declare const SidebarMenu: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+/**
+ * Individual menu list item. Renders as `<li>`.
+ *
+ * **Optional when using `MenuButton` directly** — `MenuButton` auto-wraps
+ * itself in a `<li>` when not already inside a `MenuItem`. Use `MenuItem`
+ * explicitly when wrapping a `Collapsible`.
+ *
+ * @example Explicit usage (wrapping a Collapsible)
+ * ```tsx
+ * <Sidebar.MenuItem>
+ *   <Sidebar.Collapsible>...</Sidebar.Collapsible>
+ * </Sidebar.MenuItem>
+ * ```
+ */
+declare const SidebarMenuItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export type SidebarMenuButtonSize = "base" | "sm";
+export interface SidebarMenuButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "children"> {
+    icon?: React.ComponentType<{
+        className?: string;
+    }> | React.ReactNode;
+    active?: boolean;
+    /**
+     * Button size.
+     * - `"base"` — Standard nav item
+     * - `"sm"` — Compact nav item
+     * @default "base"
+     */
+    size?: SidebarMenuButtonSize;
+    href?: string;
+    /** Link target — only meaningful when `href` is provided. */
+    target?: React.HTMLAttributeAnchorTarget;
+    tooltip?: string;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * Primary interactive element inside a menu item. Renders as a `<button>` or link.
+ * Supports icons, active state, and auto-tooltip when the sidebar is collapsed.
+ *
+ * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuItem`.
+ * Use `MenuItem` explicitly only when wrapping a `Collapsible`.
+ *
+ * @example Simple usage (auto-wrapped in `<li>`)
+ * ```tsx
+ * <Sidebar.Menu>
+ *   <Sidebar.MenuButton icon={GlobeIcon} active>Domains</Sidebar.MenuButton>
+ *   <Sidebar.MenuButton icon={ClockIcon} href="/recents">Recents</Sidebar.MenuButton>
+ * </Sidebar.Menu>
+ * ```
+ *
+ * @example With Collapsible (explicit MenuItem needed)
+ * ```tsx
+ * <Sidebar.MenuItem>
+ *   <Sidebar.Collapsible>
+ *     <Sidebar.CollapsibleTrigger render={<Sidebar.MenuButton icon={CodeIcon}>Compute<Sidebar.MenuChevron /></Sidebar.MenuButton>} />
+ *     <Sidebar.CollapsibleContent>...</Sidebar.CollapsibleContent>
+ *   </Sidebar.Collapsible>
+ * </Sidebar.MenuItem>
+ * ```
+ */
+declare const SidebarMenuButton: React.ForwardRefExoticComponent<SidebarMenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Badge pill displayed inside a menu button (e.g., "Beta", "New").
+ * Uses dashed border styling matching the Cloudflare design system.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.MenuSubButton>
+ *   Containers
+ *   <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>
+ * </Sidebar.MenuSubButton>
+ * ```
+ */
+declare const SidebarMenuBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * Indented sub-menu container for child navigation items. Renders as `<ul>` with
+ * a left border accent for visual hierarchy.
+ *
+ * `MenuSubButton` auto-wraps in `<li>` so `MenuSubItem` is optional.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.MenuSub>
+ *   <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>
+ *   <Sidebar.MenuSubButton>Durable Objects</Sidebar.MenuSubButton>
+ * </Sidebar.MenuSub>
+ * ```
+ */
+declare const SidebarMenuSub: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+/**
+ * Individual item inside a sub-menu. Renders as `<li>`.
+ *
+ * **Optional when using `MenuSubButton` directly** — `MenuSubButton` auto-wraps
+ * itself in a `<li>` when not already inside a `MenuSubItem`.
+ */
+declare const SidebarMenuSubItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export interface SidebarMenuSubButtonProps extends ComponentPropsWithoutRef<"button"> {
+    /** Marks this sub-item as currently active/selected. @default false */
+    active?: boolean;
+    /** Navigation URL. When set, renders as a link via LinkProvider. */
+    href?: string;
+}
+/**
+ * Button inside a sub-menu item. Does not render an icon (sub-items are
+ * indented instead). Supports active state and link rendering.
+ *
+ * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuSubItem`.
+ *
+ * @example Simple usage (auto-wrapped in `<li>`)
+ * ```tsx
+ * <Sidebar.MenuSub>
+ *   <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>
+ *   <Sidebar.MenuSubButton href="/observability">Observability</Sidebar.MenuSubButton>
+ * </Sidebar.MenuSub>
+ * ```
+ */
+declare const SidebarMenuSubButton: React.ForwardRefExoticComponent<SidebarMenuSubButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Horizontal divider line between sidebar sections.
+ */
+declare const SidebarSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Button that toggles the sidebar open/collapsed. Uses `toggleSidebar()` from context.
+ * Defaults to an animated `SidebarPanelIcon`.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Trigger />
+ * ```
+ */
+declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Invisible interaction strip at the sidebar edge for click-to-toggle.
+ * Renders a thin hover-sensitive area between the sidebar and main content.
+ */
+declare const SidebarRail: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Drag handle for resizing the sidebar. Renders when `resizable` is true in
+ * both expanded and collapsed states.
+ *
+ * - **Expanded → drag inward past `minWidth`**: auto-collapses to icon-only.
+ * - **Collapsed → drag outward past `minWidth`**: auto-expands and begins
+ *   tracking width from `minWidth`.
+ */
+declare const SidebarResizeHandle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface SidebarCollapsibleProps extends ComponentPropsWithoutRef<"div"> {
+    /** Initial open state (uncontrolled). @default false */
+    defaultOpen?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Callback when open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Scroll the expanded content into view after opening. @default false */
+    autoScrollOnOpen?: boolean;
+}
+/**
+ * Collapsible wrapper for sidebar sub-menu expand/collapse.
+ * Manages open/close state and provides context to Trigger and Content children.
+ *
+ * Keyboard behaviour: when a child receives keyboard focus (`focus-visible`)
+ * while collapsed, the section auto-expands. It collapses again on blur
+ * unless it was explicitly opened via click or a child has `data-active`.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.MenuItem>
+ *   <Sidebar.Collapsible defaultOpen>
+ *     <Sidebar.CollapsibleTrigger
+ *       render={<Sidebar.MenuButton icon={CodeIcon}>Compute<Sidebar.MenuChevron /></Sidebar.MenuButton>}
+ *     />
+ *     <Sidebar.CollapsibleContent>
+ *       <Sidebar.MenuSub>...</Sidebar.MenuSub>
+ *     </Sidebar.CollapsibleContent>
+ *   </Sidebar.Collapsible>
+ * </Sidebar.MenuItem>
+ * ```
+ */
+declare const SidebarCollapsible: React.ForwardRefExoticComponent<SidebarCollapsibleProps & React.RefAttributes<HTMLDivElement>>;
+export interface SidebarCollapsibleTriggerProps {
+    /** Element to render as the trigger. Gets aria-expanded, aria-controls, and onClick merged. */
+    render: React.ReactElement;
+}
+/**
+ * Trigger for a sidebar collapsible section. Uses `render` prop to compose
+ * with `Sidebar.MenuButton` or `Sidebar.MenuSubButton`.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.CollapsibleTrigger
+ *   render={
+ *     <Sidebar.MenuButton icon={CodeIcon}>
+ *       Compute
+ *       <Sidebar.MenuChevron />
+ *     </Sidebar.MenuButton>
+ *   }
+ * />
+ * ```
+ */
+declare function SidebarCollapsibleTrigger({ render }: SidebarCollapsibleTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare namespace SidebarCollapsibleTrigger {
+    var displayName: string;
+}
+/**
+ * Animated collapsible content panel. Uses CSS grid-rows for smooth
+ * height transitions without measuring DOM height.
+ *
+ * Always mounted (no unmount on close) so exit animations play.
+ */
+declare const SidebarCollapsibleContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Auto-rotating chevron for collapsible menu items. Reads open state from
+ * the nearest `SidebarCollapseContext` and rotates accordingly.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.CollapsibleTrigger
+ *   render={<Sidebar.MenuButton icon={CodeIcon}>Compute<Sidebar.MenuChevron /></Sidebar.MenuButton>}
+ * />
+ * ```
+ */
+declare function SidebarMenuChevron({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarMenuChevron {
+    var displayName: string;
+}
+export interface SidebarSlidingViewsProps extends ComponentPropsWithoutRef<"div"> {
+    /** Key of the currently active view. Must match a child `SlidingView` value. */
+    activeKey: string;
+    /**
+     * Slide direction for the transition.
+     * - `"left"`: new view slides in from the right
+     * - `"right"`: new view slides in from the left
+     * @default "left"
+     */
+    direction?: "left" | "right";
+}
+/**
+ * Container for animated horizontal transitions between navigation surfaces
+ * (e.g., account ↔ zone). Inactive views are marked `aria-hidden` and `inert`.
+ *
+ * Animation respects `prefers-reduced-motion`.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.SlidingViews activeKey={surface} direction="left">
+ *   <Sidebar.SlidingView value="account">
+ *     <Sidebar.Content>...account nav...</Sidebar.Content>
+ *   </Sidebar.SlidingView>
+ *   <Sidebar.SlidingView value="zone">
+ *     <Sidebar.Content>...zone nav...</Sidebar.Content>
+ *   </Sidebar.SlidingView>
+ * </Sidebar.SlidingViews>
+ * ```
+ */
+declare const SidebarSlidingViews: React.ForwardRefExoticComponent<SidebarSlidingViewsProps & React.RefAttributes<HTMLDivElement>>;
+export interface SidebarSlidingViewProps extends ComponentPropsWithoutRef<"div"> {
+    /** Unique key matching this view. Must correspond to `activeKey` on `SlidingViews`. */
+    value: string;
+}
+/**
+ * Individual panel inside `SlidingViews`. Inactive views are automatically
+ * marked `aria-hidden` and `inert` so they're unreachable by keyboard/screen readers.
+ */
+declare const SidebarSlidingView: React.ForwardRefExoticComponent<SidebarSlidingViewProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Sidebar — responsive navigation panel with expand/collapse support.
+ *
+ * Compound component: `Sidebar` (root `<aside>`), `.Provider`, `.Header`,
+ * `.Content`, `.Footer`, `.Group`, `.GroupLabel`,
+ * `.Menu`, `.MenuItem`, `.MenuButton`, `.MenuBadge`,
+ * `.MenuSub`, `.MenuSubItem`, `.MenuSubButton`, `.Separator`,
+ * `.Trigger`, `.Rail`, `.MenuChevron`,
+ * `.Collapsible`, `.CollapsibleTrigger`, `.CollapsibleContent`.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Provider defaultOpen>
+ *   <Sidebar>
+ *     <Sidebar.Content>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>
+ *         <Sidebar.Menu>
+ *           <Sidebar.MenuButton icon={HouseIcon} active>Home</Sidebar.MenuButton>
+ *           <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>
+ *         </Sidebar.Menu>
+ *       </Sidebar.Group>
+ *     </Sidebar.Content>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Trigger />
+ *     </Sidebar.Footer>
+ *   </Sidebar>
+ * </Sidebar.Provider>
+ * ```
+ */
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarRootProps & React.RefAttributes<HTMLElement>> & {
+    Provider: typeof SidebarProvider;
+    Header: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    GroupLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Menu: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+    MenuItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    MenuButton: React.ForwardRefExoticComponent<SidebarMenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    MenuBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    MenuSub: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+    MenuSubItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    MenuSubButton: React.ForwardRefExoticComponent<SidebarMenuSubButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    Separator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Rail: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    ResizeHandle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    MenuChevron: typeof SidebarMenuChevron;
+    Collapsible: React.ForwardRefExoticComponent<SidebarCollapsibleProps & React.RefAttributes<HTMLDivElement>>;
+    CollapsibleTrigger: typeof SidebarCollapsibleTrigger;
+    CollapsibleContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    SlidingViews: React.ForwardRefExoticComponent<SidebarSlidingViewsProps & React.RefAttributes<HTMLDivElement>>;
+    SlidingView: React.ForwardRefExoticComponent<SidebarSlidingViewProps & React.RefAttributes<HTMLDivElement>>;
+};
+export { SidebarProvider, SidebarRoot, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuBadge, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarSeparator, SidebarTrigger, SidebarRail, SidebarResizeHandle, SidebarMenuChevron, SidebarCollapsible, SidebarCollapsibleTrigger, SidebarCollapsibleContent, SidebarSlidingViews, SidebarSlidingView, };
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/src/components/sidebar/sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/sidebar.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/surface/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @deprecated Use {@link LayerCard} instead.
+ */
+export { Surface } from './surface';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/surface/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/surface/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/src/components/surface/surface.d.ts

@@ -0,0 +1,64 @@
+import { ElementType } from 'react';
+import { LayerCardProps } from '../layer-card/layer-card';
+/** Surface color variant definitions. */
+export declare const REKI_SURFACE_VARIANTS: {
+    readonly color: {
+        readonly primary: {
+            readonly classes: "";
+            readonly description: "Primary surface color";
+        };
+        readonly secondary: {
+            readonly classes: "";
+            readonly description: "Secondary surface color";
+        };
+    };
+};
+export declare const REKI_SURFACE_DEFAULT_VARIANTS: {
+    readonly color: "primary";
+};
+export type RekiSurfaceColor = keyof typeof REKI_SURFACE_VARIANTS.color;
+export interface RekiSurfaceVariantsProps {
+    /**
+     * Surface color variant.
+     * - `"primary"` — Primary surface color
+     * - `"secondary"` — Secondary surface color
+     * @default "primary"
+     */
+    color?: RekiSurfaceColor;
+}
+export declare function surfaceVariants({ color, }?: RekiSurfaceVariantsProps): "";
+/**
+ * Surface component props.
+ *
+ * @deprecated Use `LayerCard` instead. `Surface` is now a compatibility wrapper
+ * around `LayerCard` for simple one-layer card containers.
+ *
+ * @example
+ * ```tsx
+ * <Surface className="rounded-lg p-4">Card content</Surface>
+ * <Surface render={<section />} className="rounded-lg p-6">Section content</Surface>
+ * ```
+ */
+export type SurfaceProps = LayerCardProps & RekiSurfaceVariantsProps & {
+    /**
+     * @deprecated Use the `render` prop instead.
+     * @example `<Surface render={<section />}>` instead of `<Surface as="section">`
+     */
+    as?: ElementType;
+};
+/**
+ * @deprecated Use `LayerCard` instead.
+ *
+ * Polymorphic compatibility wrapper that preserves the `Surface` API while
+ * delegating rendering and styling to `LayerCard`.
+ *
+ * @example
+ * ```tsx
+ * <LayerCard className="rounded-lg p-4">Card content</LayerCard>
+ * ```
+ */
+export declare const Surface: {
+    ({ color, className, render, as, ...props }: SurfaceProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=surface.d.ts.map

package/dist/src/components/surface/surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../../src/components/surface/surface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1E,yCAAyC;AACzC,eAAO,MAAM,qBAAqB;;;;;;;;;;;CAWxB,CAAC;AAEX,eAAO,MAAM,6BAA6B;;CAEhC,CAAC;AAGX,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,qBAAqB,CAAC,KAAK,CAAC;AAExE,MAAM,WAAW,wBAAwB;IACvC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAA2C,GAC5C,GAAE,wBAA6B,MAE/B;AAED;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,YAAY,GAAG,cAAc,GACvC,wBAAwB,GAAG;IACzB;;;OAGG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB,CAAC;AAEJ;;;;;;;;;;GAUG;AACH,eAAO,MAAM,OAAO;iDAMjB,YAAY;;CAWd,CAAC"}

package/dist/src/components/switch/index.d.ts

@@ -0,0 +1,2 @@
+export { Switch, REKI_SWITCH_VARIANTS, REKI_SWITCH_DEFAULT_VARIANTS, type SwitchProps, type SwitchLegendProps, type SwitchGroupProps, type SwitchItemProps, type RekiSwitchSize, type RekiSwitchVariant, type SwitchSize, type SwitchVariant, } from './switch';
+//# sourceMappingURL=index.d.ts.map