@ngrok/mantle 0.81.1 → 0.82.0

package/dist/sidebar.d.ts

@@ -0,0 +1,2084 @@
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { n as IconButtonProps } from "./button-C7vAl6lS.js";
+import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
+import { n as Separator } from "./separator-B5UmkVRL.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/sidebar/sidebar.d.ts
+/**
+ * The breakpoints below which `Sidebar.Nav` swaps from the inline desktop
+ * panel to the mobile `Sheet` presentation. Kept to a closed set because the
+ * pre-hydration visibility classes are static strings (Tailwind cannot see
+ * interpolated class names).
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root mobileBreakpoint="md">…</Sidebar.Root>
+ * ```
+ */
+type SidebarMobileBreakpoint = "sm" | "md" | "lg";
+/**
+ * The state and actions shared by every part under a `Sidebar.Root`, returned
+ * by {@link useSidebar}. Use it to build custom triggers, keyboard shortcuts,
+ * or close-on-navigate behavior.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * function CollapseSidebarButton() {
+ *   const { open, toggle } = useSidebar();
+ *   return (
+ *     <button type="button" onClick={toggle}>
+ *       {open ? "Collapse" : "Expand"} sidebar
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+type SidebarState = {
+  /**
+   * Whether the desktop sidebar is expanded. Mirrored as
+   * `data-state="expanded" | "collapsed"` on `Sidebar.Nav`.
+   */
+  open: boolean;
+  /**
+   * Set the desktop expanded state. Calls `onOpenChange` and, when
+   * uncontrolled, updates the internal state.
+   */
+  setOpen: (open: boolean) => void;
+  /**
+   * Whether the mobile sheet is open. Only meaningful when `isMobile`.
+   */
+  openMobile: boolean;
+  /**
+   * Set the mobile sheet open state. Calls `onOpenMobileChange` and, when
+   * uncontrolled, updates the internal state. Use it to close the sheet on
+   * navigation.
+   */
+  setOpenMobile: (open: boolean) => void;
+  /**
+   * `true` when the viewport is below `mobileBreakpoint`. `false` during SSR
+   * and the hydration render (desktop-first).
+   */
+  isMobile: boolean;
+  /**
+   * The breakpoint below which the sidebar renders as a mobile sheet.
+   */
+  mobileBreakpoint: SidebarMobileBreakpoint;
+  /**
+   * Toggle the sidebar: the mobile sheet when `isMobile`, the desktop
+   * expanded state otherwise. This is what `Sidebar.Trigger` calls.
+   */
+  toggle: () => void;
+  /**
+   * The generated id of the sidebar's `<nav>` landmark. `Sidebar.Trigger`
+   * references it via `aria-controls`; reuse it when building custom
+   * triggers.
+   */
+  navId: string;
+};
+/**
+ * Read the nearest `Sidebar.Root` state. Throws when called outside a
+ * `Sidebar.Root` so misuse fails loudly. Use it to build custom triggers,
+ * a keyboard shortcut, or close-on-navigate behavior.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * function CloseSidebarOnNavigate() {
+ *   const { setOpenMobile } = useSidebar();
+ *   const location = useLocation();
+ *   useEffect(() => {
+ *     setOpenMobile(false);
+ *   }, [location.pathname, setOpenMobile]);
+ *   return null;
+ * }
+ * ```
+ */
+declare function useSidebar(): SidebarState;
+type SidebarRootProps = {
+  children?: ReactNode;
+  /**
+   * The initial desktop expanded state for the uncontrolled case.
+   *
+   * @default true
+   */
+  defaultOpen?: boolean;
+  /**
+   * Controlled desktop expanded state. Pair with `onOpenChange`.
+   */
+  open?: boolean;
+  /**
+   * Called with the next desktop expanded state whenever it changes.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Controlled mobile sheet open state. Pair with `onOpenMobileChange`.
+   */
+  openMobile?: boolean;
+  /**
+   * Called with the next mobile sheet open state whenever it changes.
+   */
+  onOpenMobileChange?: (open: boolean) => void;
+  /**
+   * The breakpoint below which `Sidebar.Nav` renders as a mobile `Sheet`
+   * instead of the inline desktop panel.
+   *
+   * @default "lg"
+   */
+  mobileBreakpoint?: SidebarMobileBreakpoint;
+  /**
+   * Toggle the sidebar with `⌘B` (macOS) / `Ctrl+B` (Windows/Linux). The
+   * shortcut requires exactly the platform modifier + `b` — combinations with
+   * `Shift`/`Alt` (e.g. the browser's own `⌘⇧B`) are left alone. Set `false`
+   * to opt out, e.g. when the app embeds a rich-text editor where `⌘B` means
+   * bold.
+   *
+   * The shortcut has exactly one owner per window: the first mounted root
+   * with the shortcut enabled. Additional roots (nested or siblings) queue
+   * and take ownership only when the owner unmounts, so composing a second
+   * sidebar never makes one keypress toggle both.
+   *
+   * @default true
+   */
+  keyboardShortcut?: boolean;
+};
+/**
+ * The state owner for a sidebar. Renders no DOM of its own (like
+ * `Tooltip.Root`) — it provides the expanded/collapsed and mobile-sheet state
+ * to every part below it, so `Sidebar.Trigger` can live anywhere in the tree
+ * (for example inside an `AppLayout.Header`) without coupling the app shell
+ * to the sidebar.
+ *
+ * Render exactly one `Sidebar.Nav` per `Sidebar.Root`. Nested roots shadow
+ * the outer sidebar for everything below them.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>…</Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>…</Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <main>
+ *     <Sidebar.Trigger />
+ *   </main>
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Root: ({ children, defaultOpen, keyboardShortcut, mobileBreakpoint, onOpenChange, onOpenMobileChange, open: openProp, openMobile: openMobileProp }: SidebarRootProps) => import("react").JSX.Element;
+type SidebarNavProps = ComponentProps<"div"> & WithDataSlot;
+/**
+ * The sidebar panel. On viewports at or above the root's `mobileBreakpoint`
+ * it renders inline (in normal flow, so it composes under an
+ * `AppLayout.Notice` banner) and collapses by animating its width down to a
+ * skinny icon rail (`--sidebar-width-icon`): group labels fade out in place
+ * and each row becomes a square chip around its leading icon, but everything
+ * keeps its expanded position and stays in the tab order and the
+ * accessibility tree. Below the breakpoint it renders inside a mantle
+ * `Sheet` on the left.
+ *
+ * `className`, `style`, `ref`, and rest props land on the panel surface in
+ * both presentations (the desktop animator / the mobile `Sheet.Content`), so
+ * the width variables work anywhere:
+ * `className="[--sidebar-width:20rem] [--sidebar-width-mobile:20rem]"`.
+ * `aria-label` (default `"Main"`) is forwarded to the inner `<nav>` landmark.
+ *
+ * **CSS variables (public API):**
+ *
+ * | CSS Variable | Default | Description |
+ * | --- | --- | --- |
+ * | `--sidebar-width` | `16rem` | Expanded desktop panel width (256px). |
+ * | `--sidebar-width-mobile` | `18rem` | Mobile sheet width (288px). |
+ * | `--sidebar-width-icon` | `3.25rem` | Collapsed icon rail width (52px). |
+ * | `--sidebar-row-width` | `15rem` | Derived, not set: one row's width in the expanded panel (240px), for sizing surfaces that render *outside* it. See below and `Sidebar.SwitcherTrigger`. |
+ *
+ * `--sidebar-row-width` is `calc(var(--sidebar-width,16rem) - 1rem)`, declared
+ * at `:root` by `mantle.css` — the panel width minus the row gutter this
+ * component's regions apply.
+ *
+ * Each of the three widths is read with its default as the fallback, and
+ * custom properties inherit, so set one on `Sidebar.Nav` to resize a single
+ * sidebar or on any ancestor (`:root` in your global stylesheet) to resize
+ * every sidebar in the app. `--sidebar-row-width` resolves at `:root`, so a
+ * `--sidebar-width` override scoped to one `Sidebar.Nav` does not reach it in
+ * either direction — a narrower panel leaves the floor *wider* than the row it
+ * opens from. Override `--sidebar-width` at `:root` to move both together, or
+ * set `--sidebar-row-width` on the outside surface itself.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>…</Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>…</Sidebar.Footer>
+ *   </Sidebar.Nav>
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Nav: ({ "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, children, className, "data-slot": dataSlot, ...props }: SidebarNavProps) => import("react").JSX.Element;
+/**
+ * The props for `Sidebar.Trigger`. `IconButton`'s props, except the parts the
+ * trigger owns: `asChild` and `children` are removed (the trigger renders
+ * only its icon and sr-only label — build custom triggers with `useSidebar`
+ * instead), and `appearance`, `icon`, `intent`, and `label` become optional
+ * with sidebar defaults.
+ */
+type SidebarTriggerProps = Omit<IconButtonProps, "appearance" | "asChild" | "children" | "icon" | "intent" | "label"> & WithDataSlot & {
+  /**
+   * The visual style of the trigger `IconButton`.
+   *
+   * @default "ghost"
+   */
+  appearance?: IconButtonProps["appearance"];
+  /**
+   * The icon rendered inside the trigger.
+   *
+   * @default <SidebarSimpleIcon />
+   */
+  icon?: ReactNode;
+  /**
+   * The color intent of the trigger `IconButton`.
+   *
+   * @default "neutral"
+   */
+  intent?: IconButtonProps["intent"];
+  /**
+   * The accessible name for the trigger. Visually hidden but announced to
+   * assistive technology. Override it for localization.
+   *
+   * @default "Toggle Sidebar"
+   */
+  label?: string;
+};
+/**
+ * The button that toggles the sidebar: the mobile sheet below the root's
+ * `mobileBreakpoint`, the desktop expanded state otherwise. Renders a ghost
+ * neutral `IconButton` with `aria-expanded` and `aria-controls` wired to the
+ * sidebar's `<nav>`. Place it in your app shell's header (for example
+ * `AppLayout.Header`) — it must stay visible at every breakpoint where the
+ * sidebar can collapse, or users have no way to reopen it.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ *
+ * @example
+ * Placement within an `AppLayout` shell:
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">…</Sidebar.Nav>
+ *   <AppLayout.Inset>
+ *     <AppLayout.Content>
+ *       <AppLayout.Header>
+ *         <Sidebar.Trigger />
+ *       </AppLayout.Header>
+ *       …
+ *     </AppLayout.Content>
+ *   </AppLayout.Inset>
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Trigger: ({ appearance, "data-slot": dataSlot, icon, intent, label, onClick, ...props }: SidebarTriggerProps) => import("react").JSX.Element;
+type SidebarHeaderProps = ComponentProps<"div"> & WithAsChild & WithDataSlot;
+/**
+ * The top container of a `Sidebar.Nav`, pinned above the scrollable
+ * `Sidebar.Body`. Typically holds an app/product switcher built from
+ * `Sidebar.SwitcherTrigger` composed with a `DropdownMenu` or `Dialog`. Its
+ * height is the public `--sidebar-header-height` CSS variable (default
+ * `4.5rem`), which centers the switcher row on the same horizontal band as an
+ * `AppLayout.Header` toolbar — when a sidebar header is composed inside an
+ * `AppLayout`, the toolbar derives its own height from the same variable, so
+ * overriding it at a shared ancestor (e.g. `AppLayout.Root`) moves both rows
+ * together and the alignment holds by construction.
+ *
+ * **CSS variables (public API):**
+ *
+ * | CSS Variable | Default | Description |
+ * | --- | --- | --- |
+ * | `--sidebar-header-height` | `4.5rem` | The header row height (72px). Set it on a common ancestor of the sidebar and `AppLayout.Header`, not on `Sidebar.Nav`, so both rows read one value. |
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Header: ({ asChild, children, className, "data-slot": dataSlot, ...props }: SidebarHeaderProps) => import("react").JSX.Element;
+type SidebarBodyProps = ComponentProps<"div"> & WithAsChild & WithDataSlot;
+/**
+ * The scrollable middle region of a `Sidebar.Nav`, growing to fill the space
+ * between `Sidebar.Header` and `Sidebar.Footer`. Holds the navigation
+ * `Sidebar.Group` children. Overflowing edges fade out via the
+ * `scroll-fade-y` mask; inside the collapsed icon rail the scrollbar and its
+ * reserved gutter are hidden and the fade is the only overflow signal.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Body: ({ asChild, children, className, "data-slot": dataSlot, ...props }: SidebarBodyProps) => import("react").JSX.Element;
+type SidebarFooterProps = ComponentProps<"div"> & WithAsChild & WithDataSlot;
+/**
+ * The bottom container of a `Sidebar.Nav`, pinned below the scrollable
+ * `Sidebar.Body`. Typically holds cross-product items and the account/user
+ * switcher row (`Sidebar.SwitcherTrigger` with `Sidebar.AccountAvatar` and
+ * `Sidebar.UserAvatar`).
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Footer: ({ asChild, children, className, "data-slot": dataSlot, ...props }: SidebarFooterProps) => import("react").JSX.Element;
+type SidebarGroupProps = ComponentProps<"div"> & WithAsChild & WithDataSlot;
+/**
+ * A grouping container inside `Sidebar.Body` pairing an optional
+ * `Sidebar.GroupLabel` with a `Sidebar.List`. When a label is present, the
+ * group wires it to the list via `aria-labelledby` so assistive technology
+ * announces the list with the group's name.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Group: ({ asChild, children, className, "data-slot": dataSlot, ...props }: SidebarGroupProps) => import("react").JSX.Element;
+type SidebarGroupLabelProps = ComponentProps<"div"> & WithAsChild & WithDataSlot;
+/**
+ * The muted label of a `Sidebar.Group`, rendered above its `Sidebar.List`.
+ * Renders a `<div>` (not a heading, so the sidebar never dictates the page's
+ * heading outline); inside a `Sidebar.Group` it is automatically linked to
+ * the sibling list via `aria-labelledby`. Pass `asChild` to render a heading
+ * at a level you control.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const GroupLabel: ({ asChild, children, className, "data-slot": dataSlot, id: idProp, ...props }: SidebarGroupLabelProps) => import("react").JSX.Element;
+type SidebarListProps = ComponentProps<"ul"> & WithAsChild & WithDataSlot;
+/**
+ * The `<ul>` list of navigation rows inside a `Sidebar.Group`. When the group
+ * has a `Sidebar.GroupLabel`, the list is announced with the group's name via
+ * `aria-labelledby`.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const List: ({ "aria-labelledby": ariaLabelledBy, asChild, children, className, "data-slot": dataSlot, ...props }: SidebarListProps) => import("react").JSX.Element;
+type SidebarItemProps = ComponentProps<"li"> & WithAsChild & WithDataSlot;
+/**
+ * A single `<li>` row of a `Sidebar.List`. A plain wrapper — the interactive
+ * element is the `Sidebar.ItemButton` child, so props, `ref`, and `className`
+ * all target the list item itself.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Item: ({ asChild, children, className, "data-slot": dataSlot, ...props }: SidebarItemProps) => import("react").JSX.Element;
+type SidebarItemButtonProps = ComponentProps<"button"> & WithAsChild & WithDataSlot & {
+  /**
+   * Marks this row as the current page: sets `aria-current="page"` and the
+   * `data-current` styling state. Consumers control it from their router,
+   * e.g. `current={pathname === "/endpoints"}`.
+   */
+  current?: boolean;
+};
+/**
+ * The interactive row of a `Sidebar.Item`: a leading icon slot and a
+ * truncating label. Renders a `<button>` by default; pass `asChild` to
+ * compose with a router link. `current` sets `aria-current="page"` and the
+ * `data-current` visual state.
+ *
+ * The row sizes its **leading** icon to 20px and leaves trailing visuals — a
+ * caret, a count, a status dot — to size themselves, so a row composed with
+ * `DropdownMenu.Trigger asChild` can end in `<CaretDownIcon className="text-muted
+ * ml-auto size-4 shrink-0" />` and stays highlighted while its menu is open
+ * (`data-state="open"`, supplied by the trigger). Give that menu the same width
+ * floor the switcher rows use — `className="min-w-(--sidebar-row-width)"` — so
+ * it keeps the expanded row's width instead of shrinking to this row's 28px
+ * rail chip (see `Sidebar.SwitcherTrigger` for the whole contract).
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const ItemButton: ({ asChild, children, className, current, "data-slot": dataSlot, type, ...props }: SidebarItemButtonProps) => import("react").JSX.Element;
+type SidebarSwitcherTriggerProps = ComponentProps<"button"> & WithAsChild & WithDataSlot;
+/**
+ * The styled row for the sidebar's switchers: the app/product switcher in
+ * `Sidebar.Header` and the account/user row in `Sidebar.Footer`. A styled
+ * button only — it is not wired to any state; compose it with
+ * `DropdownMenu.Trigger asChild` or `Dialog.Trigger asChild`, which supply
+ * the open state (`data-state="open"` styling comes for free from those
+ * primitives).
+ *
+ * Inside the collapsed icon rail, the row collapses to
+ * its **first child element** — the leading visual (product icon, account
+ * avatar) — and the remaining children become visually hidden while staying
+ * in the accessibility tree, so the button's accessible name is unchanged.
+ * Wrap loose text in an element (e.g. a `<span>`) so it participates.
+ *
+ * A menu opened from the row should be as wide as the row: `width="trigger"`
+ * does that while the panel is expanded, but the row shrinks to a 36px chip in
+ * the icon rail and would drag the menu down to it. Floor the menu at the
+ * expanded row width with `className="min-w-(--sidebar-row-width)"` — the
+ * token `mantle.css` declares at `:root` for exactly this, since the menu
+ * renders in a portal and inherits nothing from the panel. The floor is a
+ * no-op while the panel is expanded (the row already measures that wide), and
+ * inert in the mobile sheet as long as its row is the wider of the two
+ * (`--sidebar-width-mobile` minus `1.5rem` and the sheet's 1px border, vs
+ * `--sidebar-width` minus `1rem`; 263px vs 240px at the defaults) — so widen
+ * `--sidebar-width-mobile` whenever you widen `--sidebar-width`, or the floor
+ * overhangs the sheet.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const SwitcherTrigger: ({ asChild, children, className, "data-slot": dataSlot, type, ...props }: SidebarSwitcherTriggerProps) => import("react").JSX.Element;
+type SidebarSeparatorProps = ComponentProps<typeof Separator>;
+/**
+ * An inset hairline between sidebar regions. Composes the mantle `Separator`,
+ * staying aligned with the `px-3` content padding of `Sidebar.Body` and
+ * `Sidebar.Footer` (it deliberately does not run edge to edge) with `my-3`
+ * breathing room above and below. When collapsed to the icon rail, it widens
+ * to the same 36px chip width as `Sidebar.SwitcherTrigger`, balancing the
+ * adjacent app-content gutter that sits outside the rail.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const SidebarSeparator: ({ className, ...props }: SidebarSeparatorProps) => import("react").JSX.Element;
+type SidebarAccountAvatarProps = Omit<ComponentProps<"div">, "children"> & {
+  /**
+   * The account's stable identifier. Used to deterministically select a
+   * background swatch from the design system's palette so the same account
+   * always gets the same color.
+   */
+  accountId: string | undefined;
+  /**
+   * The account's display name. The first one or two letters become the
+   * avatar's initials. Falls back to `?` when the name is empty.
+   */
+  accountName: string | undefined;
+};
+/**
+ * A small rounded-square avatar that represents an account (workspace,
+ * organization, etc.). The background color is derived deterministically from
+ * the `accountId` so an account's swatch is stable across renders, sessions,
+ * and devices.
+ *
+ * Accounts are rendered as squares to differentiate them visually from users,
+ * which use a circular `Sidebar.UserAvatar`.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const AccountAvatar: ({ accountId, accountName, className, ...props }: SidebarAccountAvatarProps) => import("react").JSX.Element;
+type SidebarUserAvatarProps = Omit<ComponentProps<"div">, "children"> & {
+  /**
+   * Optional URL of the user's profile picture. When provided, the image is
+   * rendered to fill the avatar with `object-cover`. When omitted (or while
+   * loading), a neutral person silhouette is shown.
+   */
+  src?: string;
+  /**
+   * Accessible label for the avatar. Used as the image's `alt` text and as
+   * the container's `aria-label` when no image is rendered.
+   *
+   * @default "Your account"
+   */
+  alt?: string;
+};
+/**
+ * A circular avatar that represents the currently signed-in user. Renders the
+ * user's profile picture when `src` is provided, otherwise falls back to a
+ * neutral, theme-aware person silhouette.
+ *
+ * Users are rendered as circles to differentiate them visually from accounts,
+ * which use a square `Sidebar.AccountAvatar`.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const UserAvatar: ({ alt, className, src, ...props }: SidebarUserAvatarProps) => import("react").JSX.Element;
+/**
+ * A composable, collapsible app-navigation sidebar. `Sidebar.Root` owns the
+ * state (no DOM); `Sidebar.Nav` renders the panel — inline on desktop,
+ * collapsing to a skinny icon rail, and a left-side `Sheet` below the root's
+ * `mobileBreakpoint`; and `Sidebar.Trigger` toggles it from anywhere under the
+ * root (typically an `AppLayout.Header`). Navigation is grouped with
+ * `Sidebar.Group`/`Sidebar.GroupLabel`/`Sidebar.List`, and the switcher rows
+ * (app switcher up top, account/user down bottom) compose
+ * `Sidebar.SwitcherTrigger` with your own `DropdownMenu` or `Dialog`.
+ *
+ * The component is routing-agnostic: compose router links via `asChild` on
+ * `Sidebar.ItemButton` and drive `current` from your router's location.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * Composition:
+ * ```
+ * Sidebar.Root
+ * ├── Sidebar.Nav
+ * │   ├── Sidebar.Header
+ * │   │   └── Sidebar.SwitcherTrigger
+ * │   ├── Sidebar.Body
+ * │   │   └── Sidebar.Group
+ * │   │       ├── Sidebar.GroupLabel
+ * │   │       └── Sidebar.List
+ * │   │           └── Sidebar.Item
+ * │   │               └── Sidebar.ItemButton
+ * │   └── Sidebar.Footer
+ * │       ├── Sidebar.Separator
+ * │       └── Sidebar.SwitcherTrigger
+ * │           ├── Sidebar.AccountAvatar
+ * │           └── Sidebar.UserAvatar
+ * └── Sidebar.Trigger
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Sidebar: {
+  /**
+   * The state owner for a sidebar. Renders no DOM — provides expanded /
+   * mobile-sheet state to every part below it so the trigger can live in the
+   * app shell without coupling it to the sidebar.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Root: typeof Root;
+  /**
+   * The sidebar panel: an inline panel that collapses to the icon rail on
+   * desktop, a left `Sheet` below the root's `mobileBreakpoint`. Set
+   * `--sidebar-width` / `--sidebar-width-mobile` via its `className` or
+   * `style`.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Nav: typeof Nav;
+  /**
+   * The `IconButton` that toggles the sidebar. Place it in the app shell's
+   * header; it stays functional at every breakpoint.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Trigger: typeof Trigger;
+  /**
+   * The pinned top container of the panel, typically holding the app
+   * switcher (`Sidebar.SwitcherTrigger` + `DropdownMenu`/`Dialog`). Its
+   * height vertically aligns the switcher with an `AppLayout.Header`.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Header: typeof Header;
+  /**
+   * The scrollable middle region holding the navigation groups.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Body: typeof Body;
+  /**
+   * The pinned bottom container, typically holding cross-product items and
+   * the account/user switcher row.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Footer: typeof Footer;
+  /**
+   * A grouping container pairing a `GroupLabel` with a `List`; wires the
+   * label to the list via `aria-labelledby`.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Group: typeof Group;
+  /**
+   * The muted label of a group. Renders a `<div>`; pass `asChild` to render
+   * a heading at a level you control.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly GroupLabel: typeof GroupLabel;
+  /**
+   * The `<ul>` of navigation rows in a group.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly List: typeof List;
+  /**
+   * A single `<li>` row wrapper.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Item: typeof Item;
+  /**
+   * The interactive navigation row (icon + truncating label). `asChild` for
+   * router links; `current` for the active page.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly ItemButton: typeof ItemButton;
+  /**
+   * The styled switcher row for the header/footer. Not state-wired — compose
+   * with `DropdownMenu.Trigger asChild` or `Dialog.Trigger asChild`.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly SwitcherTrigger: typeof SwitcherTrigger;
+  /**
+   * An inset hairline between sidebar regions, aligned with the content
+   * padding.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Separator: typeof SidebarSeparator;
+  /**
+   * A rounded-square account avatar with deterministic, WCAG-compliant
+   * swatch colors derived from the account id.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly AccountAvatar: typeof AccountAvatar;
+  /**
+   * A circular user avatar with a silhouette fallback.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly UserAvatar: typeof UserAvatar;
+};
+//#endregion
+export { Sidebar, type SidebarMobileBreakpoint, type SidebarState, useSidebar };