@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/sidebar/index.jsx

@@ -0,0 +1,624 @@
+// Ported from shadcn/ui Sidebar (apps/v4/registry/new-york-v4/ui/sidebar.tsx, apps/v4/registry/new-york-v4/hooks/use-mobile.ts;
+// React Aria base apps/v4/registry/bases/aria/ui/sidebar.tsx), shadcn/ui 4.21.4, MIT, © 2023 shadcn.
+// A composable, collapsible app sidebar: SidebarProvider (state, Cmd/Ctrl+B, `sidebar_state` cookie, mobile
+// detection) > Sidebar (desktop panel; a modal sheet on mobile) + SidebarInset / SidebarTrigger, and the
+// structural parts (header / footer / content / groups / menus / sub menus).
+// Rivet:
+// - headless: every part renders the same element and `data-slot` / `data-sidebar` / `data-*` attributes as
+//   upstream, with a default `rv-Sidebar*` class instead of the Tailwind classes; the look (widths, collapse
+//   transitions, offcanvas / icon modes) is CSS on those attributes (`@rivetjs/cdk/theme.css`,
+//   `@rivetjs/ui/sidebar`). CSS variables `--sidebar-width` / `--sidebar-width-icon` on the provider,
+//   `--sidebar-width-mobile` on the sheet.
+// - state = `./state.ts` (signals + `controllable`): `open` takes a value, a two-way Signal or an accessor;
+//   `useSidebar()` returns accessors (`state()`, `open()`, `openMobile()`, `isMobile()`) + setters.
+// - nothing runs at load (a resumed sidebar page stays cold): the keyboard shortcut is a delegated `keydown` on
+//   the wrapper (works cold, while focus is inside the wrapper) + a window listener attached once the runtime runs
+//   (`preload: "interaction"`); `isMobile` (upstream `useIsMobile`, `false` on the server) is re-read on every
+//   toggle and by a `media:` listener attached the same way; tooltips / `useSidebar().isMobile()` read the viewport
+//   at call time. Before any interaction the mobile / desktop split is CSS (desktop root hidden below 768 px).
+// - `asChild` → `render` (cdk DOMRenderProps); `Slot` merging → spread the received props.
+// - mobile: Sheet → cdk ModalOverlay + Modal + Dialog on the shared div overlay layer (dismissable, Escape),
+//   swipe-to-dismiss `sidebarSheetMotion` (./sheet-motion.ts, `@rivetjs/cdk/motion` physics).
+// - Button-like parts follow the React Aria base: SidebarTrigger / SidebarMenuAction = cdk Button,
+//   SidebarMenuButton / SidebarMenuSubButton = cdk Link with `href`, else cdk Button; tooltip = cdk
+//   TooltipTrigger (disabled unless collapsed and not mobile) + Tooltip `placement="right"`, delay 0
+//   (new-york `TooltipProvider delayDuration={0}`).
+// Rivet extensions (feature set inspired by HeroUI Pro's public Sidebar docs; independent implementation), shadcn API kept:
+// - provider `toggleShortcut` / `reduceMotion` / `closeMobileOnAction` / `navigate` (+ `useHref`: a cdk RouterProvider
+//   for the subtree; default = native links, which `@rivetjs/router` routes client-side when a route matches);
+// - tree menus: `expandable` (or `defaultExpanded` / `isExpanded` / `onExpandedChange`) on SidebarMenuItem /
+//   SidebarMenuSubItem renders a cdk Disclosure (`li`), `SidebarMenuTrigger` (slot="trigger" menu button) +
+//   `SidebarMenuIndicator`, the item's SidebarMenuSub becomes the DisclosurePanel's list (APG disclosure navigation);
+//   `SidebarMenu showGuideLines` (true | "hover" | false → `data-guide-lines`), menu / group options context;
+// - menu buttons: `isCurrent` (aria-current="page"), `forceReload` (`data-rivet-reload`, native router), external
+//   http(s) hrefs open in a new tab, `closeMobileOnAction`; `SidebarMenuActions` (several actions);
+// - `Sidebar backdrop` (mobile underlay `data-backdrop`), `SidebarPages` / `SidebarPage` (./pages.tsx).
+// Deviations: `data-active` / `data-show-on-hover` are `"true"` or absent (React writes `"false"` too);
+// `SidebarMenuAction` writes `data-show-on-hover` and `SidebarMenuButton` `data-variant` (upstream: Tailwind
+// classes) so CSS can key on them; the desktop root stays in the DOM on mobile (empty, CSS-hidden) so `SidebarInset`'s sibling selectors keep working.
+import { createContext, provide, useContext } from "@rivetjs/reactivity";
+import { Show, clientEffect, clientEvent, ref as createRef } from "@rivetjs/runtime/dom";
+import { resumableContext } from "@rivetjs/runtime/resume-format";
+import { visuallyHidden } from "../a11y/index.js";
+import { Button } from "../button/index.jsx";
+import { Link } from "../link/index.jsx";
+import { Input } from "../input/index.jsx";
+import { Separator } from "../separator/index.jsx";
+import { Dialog } from "../dialog/index.jsx";
+import { Modal, ModalOverlay } from "../modal/index.jsx";
+import { Tooltip, TooltipTrigger } from "../tooltip/index.jsx";
+import { Disclosure, DisclosurePanel } from "../disclosure/index.jsx";
+import { RouterContext, createRouter } from "../utils/links.jsx";
+import { read } from "../interactions/utils.js";
+import { dataBool } from "../utils/data-attrs.jsx";
+import { createId } from "../utils/id.js";
+import { Provider, renderProps } from "../slots/index.jsx";
+import { sidebarSheetMotion } from "./sheet-motion.js";
+import { createSidebarResizeState, sidebarBoundPx, sidebarResizeKeyDown, sidebarResizePointerDown, sidebarResizePointerMove, sidebarResizePointerUp, sidebarResizeReset, sidebarResizeSync, sidebarWidthCss, sidebarWidthNow, } from "./resize.js";
+import { SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, closeSidebarMobileOnAction, createSidebarState, setSidebarOpen, setSidebarOpenMobile, sidebarShortcutKeyDown, sidebarReducedMotion, sidebarStateName, sidebarViewportIsMobile, toggleSidebar, updateSidebarIsMobile, SidebarContext, SidebarMenuOptionsContext, } from "./state.js";
+export * from "./state.js";
+export { sidebarSheetMotion } from "./sheet-motion.js";
+export * from "./resize.js";
+export { SidebarPage, SidebarPages, SidebarPagesContext, setSidebarPage, sidebarPagesValue, useSidebarPages, } from "./pages.jsx";
+const NONE = {};
+/** Rivet: whether the nearest menu item is an expandable tree item (its SidebarMenuSub is the panel; `rv-sidebar-item`). */
+const SidebarItemContext = resumableContext(createContext(false, { id: "rv-sidebar-item" }));
+function sidebarState() {
+    const state = useContext(SidebarContext);
+    if (!state)
+        throw new Error("useSidebar must be used within a SidebarProvider.");
+    return state;
+}
+/** Upstream `useSidebar`: state accessors + setters of the nearest SidebarProvider (throws outside one). */
+export function useSidebar() {
+    const s = sidebarState();
+    return {
+        state: () => sidebarStateName(s),
+        open: () => s.open(),
+        setOpen: (open) => setSidebarOpen(s, open),
+        openMobile: () => s.openMobile(),
+        setOpenMobile: (open) => setSidebarOpenMobile(s, open),
+        // Tracks the signal (media listener), answers from the viewport (nothing reads it at load).
+        isMobile: () => (s.isMobile(), sidebarViewportIsMobile()),
+        toggleSidebar: () => toggleSidebar(s),
+    };
+}
+/** Provides the sidebar state; wraps the app (`data-slot="sidebar-wrapper"`). */
+export function SidebarProvider(props) {
+    const { open, defaultOpen, onOpenChange, toggleShortcut, reduceMotion, closeMobileOnAction, side, variant, collapsible, navigate, useHref, class: cls, style, children, render, ref, onKeyDown, ...rest } = props;
+    const state = createSidebarState({
+        open,
+        defaultOpen,
+        onOpenChange,
+        toggleShortcut,
+        reduceMotion,
+        closeMobileOnAction,
+        side,
+        variant,
+        collapsible,
+    });
+    const reduce = dataBool(!!reduceMotion);
+    // use-mobile.ts: every media query change, once the runtime runs (no boot at load; toggles re-read the width).
+    // A literal (compiler RV1103): `media:` + MOBILE_QUERY.
+    clientEvent("media:(max-width: 767px)", "change", () => updateSidebarIsMobile(state), { preload: "interaction" });
+    // Adds a keyboard shortcut to toggle the sidebar: window-wide once the runtime runs; cold, the wrapper's
+    // delegated keydown below (an event is handled once).
+    clientEvent(window, "keydown", (event) => sidebarShortcutKeyDown(event, state), { preload: "interaction" });
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: "rv-SidebarProvider" });
+    // `navigate`: a router for the subtree (cdk Link / menu buttons); default = the native router.
+    // Built in the body (not inside the closure): the router object is a capture of `content`, its `navigate` the caller's.
+    const router = navigate ? createRouter(navigate, useHref) : undefined;
+    const content = () => (router ? provide(RouterContext, router, () => rp.children()) : rp.children());
+    const wrapperStyle = { "--sidebar-width": SIDEBAR_WIDTH, "--sidebar-width-icon": SIDEBAR_WIDTH_ICON, ...style };
+    if (render) {
+        const attrs = {
+            ...rest,
+            ref,
+            "data-slot": "sidebar-wrapper",
+            class: () => rp.class(),
+            style: wrapperStyle,
+            "data-reduce-motion": reduce,
+            onKeyDown: (event) => {
+                onKeyDown?.(event);
+                sidebarShortcutKeyDown(event, state);
+            },
+            children: () => <Provider values={[[SidebarContext, state]]}>{() => content()}</Provider>,
+        };
+        return render(attrs, undefined);
+    }
+    return (<div {...rest} ref={ref} data-slot="sidebar-wrapper" class={rp.class()} style={wrapperStyle} data-reduce-motion={reduce} preload="visible" onKeyDown={(event) => {
+            onKeyDown?.(event);
+            sidebarShortcutKeyDown(event, state);
+        }}>
+      {provide(SidebarContext, state, () => content())}
+    </div>);
+}
+/**
+ * The sidebar panel. `class`, `style` and the DOM props land on the desktop container
+ * (`data-slot="sidebar-container"`) and on the mobile sheet; `collapsible="none"` renders one plain panel.
+ */
+export function Sidebar(props) {
+    const s = sidebarState();
+    const { side = s.side ?? "left", variant = s.variant ?? "sidebar", collapsible = s.collapsible ?? "offcanvas", class: cls, style, children, render, ref, rootClass, gapClass, innerClass, overlayClass, sheetClass, dialogClass, backdrop = "blur", resizable, width, defaultWidth, onWidthChange, onWidthChangeEnd, minWidth, maxWidth, collapseBelowMin, resizeStep, resizeHandleClass, resizeHandleLabel, ...rest } = props;
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: collapsible === "none" ? "rv-Sidebar" : "rv-Sidebar-container" });
+    if (read(collapsible) === "none") {
+        if (render)
+            return render({ ...rest, ref, "data-slot": "sidebar", class: () => rp.class(), style, children: () => rp.children() }, undefined);
+        return (<div {...rest} ref={ref} data-slot="sidebar" class={rp.class()} style={style}>
+        {rp.children()}
+      </div>);
+    }
+    const sheet = { side, children, overlayClass, sheetClass, dialogClass, style, rest, backdrop };
+    // Rivet `resizable`: the width is `--sidebar-width` on the root (the gap + container read it), unset = the provider's.
+    const rs = resizable
+        ? createSidebarResizeState({ width, defaultWidth, onWidthChange, onWidthChangeEnd, minWidth, maxWidth, collapseBelowMin, resizeStep })
+        : null;
+    const handle = { state: s, rs: rs, class: resizeHandleClass, label: resizeHandleLabel };
+    return (<div class={rootClass ?? "rv-Sidebar"} style={rs ? { "--sidebar-width": sidebarWidthCss(rs.control.value()) } : undefined} data-state={sidebarStateName(s)} data-collapsible={s.open() ? "" : read(collapsible)} data-variant={read(variant)} data-side={read(side)} data-slot="sidebar">
+      <Show when={() => !s.isMobile()} fallback={() => <SidebarSheet state={s} {...sheet}/>}>
+        {() => (<>
+            {/* This is what handles the sidebar gap on desktop */}
+            <div data-slot="sidebar-gap" class={gapClass ?? "rv-Sidebar-gap"}/>
+            {render ? (render({
+                ...rest,
+                ref,
+                "data-slot": "sidebar-container",
+                "data-side": () => read(side),
+                class: () => rp.class(),
+                style,
+                children: () => (<>
+                      <div data-sidebar="sidebar" data-slot="sidebar-inner" class={innerClass ?? "rv-Sidebar-inner"}>
+                        {rp.children()}
+                      </div>
+                      {rs ? <SidebarResizeHandle {...handle}/> : null}
+                    </>),
+            }, undefined)) : (<div {...rest} ref={ref} data-slot="sidebar-container" data-side={read(side)} class={rp.class()} style={style}>
+                <div data-sidebar="sidebar" data-slot="sidebar-inner" class={innerClass ?? "rv-Sidebar-inner"}>
+                  {rp.children()}
+                </div>
+                {rs ? <SidebarResizeHandle {...handle}/> : null}
+              </div>)}
+          </>)}
+      </Show>
+    </div>);
+}
+/** Behaviour-critical: no browser panning / scrolling while dragging the handle. */
+const RESIZE_HANDLE_STYLE = Object.freeze({ touchAction: "none" });
+/**
+ * Rivet `resizable`: the WAI-ARIA window splitter on the panel's inner edge (`./resize.ts`). Pointer drag (captured),
+ * arrows / Home / End / Enter, double-click resets; nothing runs before the first interaction.
+ */
+function SidebarResizeHandle(props) {
+    const { state, rs, class: cls, label } = props;
+    return (<div role="separator" tabIndex={0} aria-orientation="vertical" aria-label={label ?? "Resize sidebar"} aria-valuenow={sidebarWidthNow(rs)} aria-valuemin={sidebarBoundPx(rs.min)} aria-valuemax={sidebarBoundPx(rs.max)} data-sidebar="resize-handle" data-slot="sidebar-resize-handle" class={cls ?? "rv-SidebarResizeHandle"} style={RESIZE_HANDLE_STYLE} onPointerDown={(event) => sidebarResizePointerDown(event, state, rs)} onPointerMove={(event) => sidebarResizePointerMove(event, state, rs)} onPointerUp={(event) => sidebarResizePointerUp(event, rs)} onPointerCancel={(event) => sidebarResizePointerUp(event, rs)} onDblClick={(event) => sidebarResizeReset(event, state, rs)} onKeyDown={(event) => sidebarResizeKeyDown(event, state, rs)} onFocus={(event) => sidebarResizeSync(event, rs)}/>);
+}
+/** Mobile: upstream `<Sheet>` = ModalOverlay + Modal + Dialog on the shared overlay layer. */
+function SidebarSheet(props) {
+    const { state, side, children, overlayClass, sheetClass, dialogClass, style, rest, backdrop } = props;
+    const sheetRef = createRef();
+    const titleId = createId();
+    const descriptionId = createId();
+    // Swipe-to-dismiss (./sheet-motion.ts) while the sheet is open.
+    clientEffect(() => {
+        const el = sheetRef();
+        if (!el || !state.openMobile())
+            return;
+        return sidebarSheetMotion(el, { side: read(side), close: () => setSidebarOpenMobile(state, false), reduceMotion: () => state.reduceMotion });
+    });
+    const sheetStyle = { "--sidebar-width": `var(--sidebar-width-mobile, ${SIDEBAR_WIDTH_MOBILE})`, ...style };
+    return (<ModalOverlay isOpen={state.openMobile} isDismissable class={overlayClass ?? "rv-Sidebar-overlay"} data-side={read(side)} data-backdrop={backdrop} data-reduce-motion={dataBool(state.reduceMotion)}>
+      <Modal {...rest} ref={sheetRef} class={sheetClass ?? "rv-Sidebar-sheet"} style={sheetStyle} data-sidebar="sidebar" data-slot="sidebar" data-mobile="true" data-side={read(side)} data-reduce-motion={dataBool(state.reduceMotion)}>
+        {() => (<Dialog class={dialogClass ?? "rv-Sidebar-dialog"} aria-labelledby={titleId} aria-describedby={descriptionId}>
+            <div data-slot="sheet-header" style={visuallyHidden}>
+              <h2 id={titleId}>Sidebar</h2>
+              <p id={descriptionId}>Displays the mobile sidebar.</p>
+            </div>
+            <div data-slot="sidebar-sheet-inner" class="rv-Sidebar-sheet-inner">
+              {children}
+            </div>
+          </Dialog>)}
+      </Modal>
+    </ModalOverlay>);
+}
+/**
+ * Toggles the sidebar (desktop) or the mobile sheet. The visually hidden "Toggle Sidebar" label is always rendered after
+ * `children` (shadcn renders its icon + the `sr-only` label and ignores children; headless here, so `children` = the
+ * icon); pass `aria-label` to rename it.
+ */
+export function SidebarTrigger(props) {
+    const s = sidebarState();
+    const { onPress, class: cls, children, ...rest } = props;
+    return (<Button {...rest} data-sidebar="trigger" data-slot="sidebar-trigger" class={cls ?? "rv-SidebarTrigger"} onPress={(event) => {
+            onPress?.(event);
+            toggleSidebar(s);
+        }}>
+      {children}
+      <span style={visuallyHidden}>Toggle Sidebar</span>
+    </Button>);
+}
+/** The thin rail along the sidebar edge: click toggles (not in the tab order, as upstream). */
+export function SidebarRail(props) {
+    const s = sidebarState();
+    const { class: cls, style, render, ref, onClick, children, ...rest } = props;
+    const rp = renderProps({ class: cls, values: NONE, defaultClassName: "rv-SidebarRail" });
+    if (render)
+        return render({
+            ...rest,
+            ref,
+            "data-sidebar": "rail",
+            "data-slot": "sidebar-rail",
+            "aria-label": "Toggle Sidebar",
+            tabindex: -1,
+            title: "Toggle Sidebar",
+            class: () => rp.class(),
+            style,
+            onClick: (event) => {
+                toggleSidebar(s);
+                onClick?.(event);
+            },
+            children,
+        }, undefined);
+    return (<button {...rest} ref={ref} type="button" data-sidebar="rail" data-slot="sidebar-rail" aria-label="Toggle Sidebar" tabIndex={-1} title="Toggle Sidebar" class={rp.class()} style={style} onClick={(event) => {
+            toggleSidebar(s);
+            onClick?.(event);
+        }}>
+      {children}
+    </button>);
+}
+/** The main content next to an `inset` sidebar (`<main>`). */
+export function SidebarInset(props) {
+    const { class: cls, style, children, render, ref, ...rest } = props;
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: "rv-SidebarInset" });
+    if (render)
+        return render({ ...rest, ref, "data-slot": "sidebar-inset", class: () => rp.class(), style, children: () => rp.children() }, undefined);
+    return (<main {...rest} ref={ref} data-slot="sidebar-inset" class={rp.class()} style={style}>
+      {rp.children()}
+    </main>);
+}
+/** A cdk Input inside the sidebar (`data-sidebar="input"`). */
+export function SidebarInput(props) {
+    const { class: cls, ...rest } = props;
+    return <Input {...rest} {...{ "data-slot": "sidebar-input", "data-sidebar": "input" }} class={cls ?? "rv-SidebarInput"}/>;
+}
+/** A cdk Separator inside the sidebar (`data-sidebar="separator"`). */
+export function SidebarSeparator(props) {
+    const { class: cls, ...rest } = props;
+    return <Separator {...rest} data-slot="sidebar-separator" data-sidebar="separator" class={cls ?? "rv-SidebarSeparator"}/>;
+}
+/** Top of the sidebar (`data-sidebar="header"`). */
+export function SidebarHeader(props) {
+    const { class: cls, style, children, render, ref, ...rest } = props;
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: "rv-SidebarHeader" });
+    if (render)
+        return render({ ...rest, ref, "data-slot": "sidebar-header", "data-sidebar": "header", class: () => rp.class(), style, children: () => rp.children() }, undefined);
+    return (<div {...rest} ref={ref} data-slot="sidebar-header" data-sidebar="header" class={rp.class()} style={style}>
+      {rp.children()}
+    </div>);
+}
+/** Bottom of the sidebar (`data-sidebar="footer"`). */
+export function SidebarFooter(props) {
+    const { class: cls, style, children, render, ref, ...rest } = props;
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: "rv-SidebarFooter" });
+    if (render)
+        return render({ ...rest, ref, "data-slot": "sidebar-footer", "data-sidebar": "footer", class: () => rp.class(), style, children: () => rp.children() }, undefined);
+    return (<div {...rest} ref={ref} data-slot="sidebar-footer" data-sidebar="footer" class={rp.class()} style={style}>
+      {rp.children()}
+    </div>);
+}
+/** The scrollable middle of the sidebar (`data-sidebar="content"`). */
+export function SidebarContent(props) {
+    const { class: cls, style, children, render, ref, ...rest } = props;
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: "rv-SidebarContent" });
+    if (render)
+        return render({ ...rest, ref, "data-slot": "sidebar-content", "data-sidebar": "content", class: () => rp.class(), style, children: () => rp.children() }, undefined);
+    return (<div {...rest} ref={ref} data-slot="sidebar-content" data-sidebar="content" class={rp.class()} style={style}>
+      {rp.children()}
+    </div>);
+}
+/** A section of the sidebar (`data-sidebar="group"`). */
+export function SidebarGroup(props) {
+    const { closeMobileOnAction, class: cls, style, children, render, ref, ...rest } = props;
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: "rv-SidebarGroup" });
+    // Options for the menus inside (only when set: the default markup has no provider).
+    const options = closeMobileOnAction === undefined ? null : { ...useContext(SidebarMenuOptionsContext), closeMobileOnAction };
+    if (render)
+        return render({
+            ...rest,
+            ref,
+            "data-slot": "sidebar-group",
+            "data-sidebar": "group",
+            class: () => rp.class(),
+            style,
+            children: () => (options ? <Provider values={[[SidebarMenuOptionsContext, options]]}>{() => rp.children()}</Provider> : rp.children()),
+        }, undefined);
+    return (<div {...rest} ref={ref} data-slot="sidebar-group" data-sidebar="group" class={rp.class()} style={style}>
+      {options ? provide(SidebarMenuOptionsContext, options, () => rp.children()) : rp.children()}
+    </div>);
+}
+/** The label of a group (`div`; `render` replaces upstream `asChild`, e.g. a Disclosure trigger Button). */
+export function SidebarGroupLabel(props) {
+    const { class: cls, style, children, render, ref, ...rest } = props;
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: "rv-SidebarGroupLabel" });
+    if (render)
+        return render({
+            ...rest,
+            ref,
+            "data-slot": "sidebar-group-label",
+            "data-sidebar": "group-label",
+            class: () => rp.class(),
+            style,
+            children: () => rp.children(),
+        }, undefined);
+    return (<div {...rest} ref={ref} data-slot="sidebar-group-label" data-sidebar="group-label" class={rp.class()} style={style}>
+      {rp.children()}
+    </div>);
+}
+/** An action button in a group header (native `button`, as the React Aria base). */
+export function SidebarGroupAction(props) {
+    const { class: cls, style, children, render, ref, ...rest } = props;
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: "rv-SidebarGroupAction" });
+    if (render)
+        return render({
+            ...rest,
+            ref,
+            "data-slot": "sidebar-group-action",
+            "data-sidebar": "group-action",
+            class: () => rp.class(),
+            style,
+            children: () => rp.children(),
+        }, undefined);
+    return (<button {...rest} ref={ref} type="button" data-slot="sidebar-group-action" data-sidebar="group-action" class={rp.class()} style={style}>
+      {rp.children()}
+    </button>);
+}
+/** The content of a group (`data-sidebar="group-content"`). */
+export function SidebarGroupContent(props) {
+    const { class: cls, style, children, render, ref, ...rest } = props;
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: "rv-SidebarGroupContent" });
+    if (render)
+        return render({
+            ...rest,
+            ref,
+            "data-slot": "sidebar-group-content",
+            "data-sidebar": "group-content",
+            class: () => rp.class(),
+            style,
+            children: () => rp.children(),
+        }, undefined);
+    return (<div {...rest} ref={ref} data-slot="sidebar-group-content" data-sidebar="group-content" class={rp.class()} style={style}>
+      {rp.children()}
+    </div>);
+}
+/** A menu list (`ul`, as new-york). */
+export function SidebarMenu(props) {
+    const { showGuideLines = true, closeMobileOnAction, reduceMotion, class: cls, style, children, render, ref, ...rest } = props;
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: "rv-SidebarMenu" });
+    const guideLines = showGuideLines === true ? undefined : showGuideLines === "hover" ? "hover" : "none";
+    const motion = reduceMotion === undefined ? undefined : String(reduceMotion);
+    const options = closeMobileOnAction === undefined && reduceMotion === undefined
+        ? null
+        : {
+            ...useContext(SidebarMenuOptionsContext),
+            ...(closeMobileOnAction === undefined ? {} : { closeMobileOnAction }),
+            ...(reduceMotion === undefined ? {} : { reduceMotion }),
+        };
+    if (render)
+        return render({
+            ...rest,
+            ref,
+            "data-slot": "sidebar-menu",
+            "data-sidebar": "menu",
+            "data-guide-lines": guideLines,
+            "data-reduce-motion": motion,
+            class: () => rp.class(),
+            style,
+            children: () => (options ? <Provider values={[[SidebarMenuOptionsContext, options]]}>{() => rp.children()}</Provider> : rp.children()),
+        }, undefined);
+    return (<ul {...rest} ref={ref} data-slot="sidebar-menu" data-sidebar="menu" data-guide-lines={guideLines} data-reduce-motion={motion} class={rp.class()} style={style}>
+      {options ? provide(SidebarMenuOptionsContext, options, () => rp.children()) : rp.children()}
+    </ul>);
+}
+const isExpandable = (p) => !!p.expandable || p.defaultExpanded !== undefined || p.isExpanded !== undefined || p.onExpandedChange !== undefined;
+/** An expandable item: cdk Disclosure rendered as the `li` (`data-expanded`), its sub menu = the panel. */
+function SidebarExpandableItem(props) {
+    const { slot, part, defaultClassName, cls, style, children, ref, rest, defaultExpanded, isExpanded, onExpandedChange, isDisabled } = props;
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName });
+    return (<Disclosure {...rest} ref={ref} class={() => rp.class()} defaultExpanded={defaultExpanded} isExpanded={isExpanded} onExpandedChange={onExpandedChange} isDisabled={isDisabled} render={(p) => <li {...p} style={style} data-slot={slot} data-sidebar={part} data-expandable="true"/>}>
+      {() => provide(SidebarItemContext, true, () => rp.children())}
+    </Disclosure>);
+}
+/** A menu item (`li`): holds a SidebarMenuButton and optional action / badge / sub menu; expandable = a tree node. */
+export function SidebarMenuItem(props) {
+    const { expandable, defaultExpanded, isExpanded, onExpandedChange, isDisabled, class: cls, style, children, render, ref, ...rest } = props;
+    if (isExpandable(props))
+        return (<SidebarExpandableItem slot="sidebar-menu-item" part="menu-item" defaultClassName="rv-SidebarMenuItem" cls={cls} style={style} ref={ref} rest={rest} expandable={expandable} defaultExpanded={defaultExpanded} isExpanded={isExpanded} onExpandedChange={onExpandedChange} isDisabled={isDisabled}>
+        {children}
+      </SidebarExpandableItem>);
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: "rv-SidebarMenuItem" });
+    if (render)
+        return render({ ...rest, ref, "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", class: () => rp.class(), style, children: () => rp.children() }, undefined);
+    return (<li {...rest} ref={ref} data-slot="sidebar-menu-item" data-sidebar="menu-item" class={rp.class()} style={style}>
+      {rp.children()}
+    </li>);
+}
+const NATIVE_ROUTER = { isNative: true };
+const EXTERNAL_HREF = /^https?:\/\//i;
+/** Link-only props: external http(s) hrefs open in a new tab (unless `target` is given), `forceReload`. */
+function linkExtras(rest, forceReload) {
+    const external = typeof rest.href === "string" && EXTERNAL_HREF.test(rest.href) && rest.target === undefined;
+    return {
+        ...(external ? { target: "_blank", rel: rest.rel ?? "noopener noreferrer" } : {}),
+        ...(forceReload ? { "data-rivet-reload": "" } : {}),
+    };
+}
+/** The button / link of a menu item; with `tooltip`, a tooltip while collapsed (not on mobile). */
+export function SidebarMenuButton(props) {
+    const s = sidebarState();
+    const { isActive, isCurrent, forceReload, closeMobileOnAction, size = "default", variant = "default", tooltip, class: cls, onPress, ...rest } = props;
+    const options = useContext(SidebarMenuOptionsContext);
+    const close = closeMobileOnAction ?? options?.closeMobileOnAction;
+    // In the body (not a helper): the accessors close over component locals, so they resume (a helper's closure is not
+    // a registered symbol: "function is not serializable").
+    const activeSource = isActive ?? isCurrent ?? false;
+    const active = typeof activeSource === "function" ? () => dataBool(activeSource()) : dataBool(activeSource);
+    // `aria-current` of `isCurrent` (`undefined`: not set by the sidebar).
+    const current = isCurrent === undefined ? undefined : typeof isCurrent === "function" ? () => (isCurrent() ? "page" : undefined) : isCurrent ? "page" : undefined;
+    const className = cls ?? "rv-SidebarMenuButton";
+    const content = () => rest.href !== undefined ? (forceReload ? (provide(RouterContext, NATIVE_ROUTER, () => (<Link {...rest} {...linkExtras(rest, true)} {...(current === undefined ? {} : { "aria-current": current })} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size={size} data-variant={variant} data-active={active} class={className} onPress={(event) => {
+            onPress?.(event);
+            closeSidebarMobileOnAction(s, close);
+        }}/>))) : (<Link {...rest} {...linkExtras(rest, false)} {...(current === undefined ? {} : { "aria-current": current })} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size={size} data-variant={variant} data-active={active} class={className} onPress={(event) => {
+            onPress?.(event);
+            closeSidebarMobileOnAction(s, close);
+        }}/>)) : (<Button {...rest} {...(current === undefined ? {} : { "aria-current": current })} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size={size} data-variant={variant} data-active={active} class={className} onPress={(event) => {
+            onPress?.(event);
+            // A tree trigger (slot="trigger") toggles its item, it is not an action.
+            if (rest.slot !== "trigger")
+                closeSidebarMobileOnAction(s, close);
+        }}/>);
+    if (!tooltip)
+        return content();
+    const tip = typeof tooltip === "string" ? { children: tooltip } : tooltip;
+    return (<TooltipTrigger delay={0} isDisabled={() => s.open() || sidebarViewportIsMobile()}>
+      {content()}
+      <Tooltip placement="right" {...tip}/>
+    </TooltipTrigger>);
+}
+/** Rivet: the trigger of an expandable (tree) item: toggles it, `aria-expanded` / `aria-controls` from the Disclosure. */
+export function SidebarMenuTrigger(props) {
+    return <SidebarMenuButton {...props} slot="trigger"/>;
+}
+/**
+ * Rivet: the expand indicator inside a SidebarMenuTrigger (`span`, `aria-hidden`; your icon as children). CSS rotates
+ * it while the item is expanded (`[aria-expanded="true"]`).
+ */
+export function SidebarMenuIndicator(props) {
+    const { class: cls, style, children, render, ref, ...rest } = props;
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: "rv-SidebarMenuIndicator" });
+    if (render)
+        return render({
+            ...rest,
+            ref,
+            "aria-hidden": "true",
+            "data-slot": "sidebar-menu-indicator",
+            "data-sidebar": "menu-indicator",
+            class: () => rp.class(),
+            style,
+            children: () => rp.children(),
+        }, undefined);
+    return (<span {...rest} ref={ref} aria-hidden="true" data-slot="sidebar-menu-indicator" data-sidebar="menu-indicator" class={rp.class()} style={style}>
+      {rp.children()}
+    </span>);
+}
+/** An action button next to a menu button (cdk Button, React Aria base). */
+export function SidebarMenuAction(props) {
+    const { showOnHover = false, class: cls, ...rest } = props;
+    return (<Button {...rest} data-slot="sidebar-menu-action" data-sidebar="menu-action" data-show-on-hover={dataBool(showOnHover)} class={cls ?? "rv-SidebarMenuAction"}/>);
+}
+/** Rivet: several SidebarMenuAction buttons at the end of a menu item (`div`, `role="group"`). */
+export function SidebarMenuActions(props) {
+    const { showOnHover = false, class: cls, style, children, render, ref, ...rest } = props;
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: "rv-SidebarMenuActions" });
+    if (render)
+        return render({
+            role: "group",
+            ...rest,
+            ref,
+            "data-slot": "sidebar-menu-actions",
+            "data-sidebar": "menu-actions",
+            "data-show-on-hover": dataBool(showOnHover),
+            class: () => rp.class(),
+            style,
+            children: () => rp.children(),
+        }, undefined);
+    return (<div role="group" {...rest} ref={ref} data-slot="sidebar-menu-actions" data-sidebar="menu-actions" data-show-on-hover={dataBool(showOnHover)} class={rp.class()} style={style}>
+      {rp.children()}
+    </div>);
+}
+/** A badge (count) in a menu item. */
+export function SidebarMenuBadge(props) {
+    const { class: cls, style, children, render, ref, ...rest } = props;
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: "rv-SidebarMenuBadge" });
+    if (render)
+        return render({ ...rest, ref, "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", class: () => rp.class(), style, children: () => rp.children() }, undefined);
+    return (<div {...rest} ref={ref} data-slot="sidebar-menu-badge" data-sidebar="menu-badge" class={rp.class()} style={style}>
+      {rp.children()}
+    </div>);
+}
+/** A loading placeholder for a menu item. */
+export function SidebarMenuSkeleton(props) {
+    const { showIcon = false, iconClass, textClass, class: cls, style, render, ref, children: _children, ...rest } = props;
+    // Random width between 50 to 90%.
+    const width = `${Math.floor(Math.random() * 40) + 50}%`;
+    const rp = renderProps({ class: cls, values: NONE, defaultClassName: "rv-SidebarMenuSkeleton" });
+    const parts = () => (<>
+      {showIcon ? <div class={iconClass ?? "rv-SidebarMenuSkeleton-icon"} data-sidebar="menu-skeleton-icon"/> : null}
+      <div class={textClass ?? "rv-SidebarMenuSkeleton-text"} data-sidebar="menu-skeleton-text" style={{ "--skeleton-width": width }}/>
+    </>);
+    if (render)
+        return render({ ...rest, ref, "data-slot": "sidebar-menu-skeleton", "data-sidebar": "menu-skeleton", class: () => rp.class(), style, children: parts }, undefined);
+    return (<div {...rest} ref={ref} data-slot="sidebar-menu-skeleton" data-sidebar="menu-skeleton" class={rp.class()} style={style}>
+      {parts()}
+    </div>);
+}
+/** A nested menu (`ul`); inside an expandable item it sits in the item's DisclosurePanel (`data-slot="sidebar-menu-sub-panel"`). */
+export function SidebarMenuSub(props) {
+    const { panelClass, class: cls, style, children, render, ref, ...rest } = props;
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: "rv-SidebarMenuSub" });
+    const list = () => render ? (render({ ...rest, ref, "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", class: () => rp.class(), style, children: () => rp.children() }, undefined)) : (<ul {...rest} ref={ref} data-slot="sidebar-menu-sub" data-sidebar="menu-sub" class={rp.class()} style={style}>
+        {rp.children()}
+      </ul>);
+    if (!useContext(SidebarItemContext))
+        return list();
+    // An expandable item's sub menu: the Disclosure panel (animated size, `hidden="until-found"` when collapsed).
+    return (<DisclosurePanel class={panelClass ?? "rv-SidebarMenuSub-panel"} render={(p) => <div {...p} data-slot="sidebar-menu-sub-panel" data-sidebar="menu-sub-panel"/>}>
+      {() => provide(SidebarItemContext, false, () => list())}
+    </DisclosurePanel>);
+}
+/** An item of a nested menu (`li`); expandable = a nested tree node. */
+export function SidebarMenuSubItem(props) {
+    const { expandable, defaultExpanded, isExpanded, onExpandedChange, isDisabled, class: cls, style, children, render, ref, ...rest } = props;
+    if (isExpandable(props))
+        return (<SidebarExpandableItem slot="sidebar-menu-sub-item" part="menu-sub-item" defaultClassName="rv-SidebarMenuSubItem" cls={cls} style={style} ref={ref} rest={rest} expandable={expandable} defaultExpanded={defaultExpanded} isExpanded={isExpanded} onExpandedChange={onExpandedChange} isDisabled={isDisabled}>
+        {children}
+      </SidebarExpandableItem>);
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: "rv-SidebarMenuSubItem" });
+    if (render)
+        return render({
+            ...rest,
+            ref,
+            "data-slot": "sidebar-menu-sub-item",
+            "data-sidebar": "menu-sub-item",
+            class: () => rp.class(),
+            style,
+            children: () => rp.children(),
+        }, undefined);
+    return (<li {...rest} ref={ref} data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" class={rp.class()} style={style}>
+      {rp.children()}
+    </li>);
+}
+/** The link / button of a sub menu item. */
+export function SidebarMenuSubButton(props) {
+    const s = sidebarState();
+    const { size = "md", isActive, isCurrent, forceReload, closeMobileOnAction, class: cls, onPress, ...rest } = props;
+    const options = useContext(SidebarMenuOptionsContext);
+    const close = closeMobileOnAction ?? options?.closeMobileOnAction;
+    // In the body (not a helper): the accessors close over component locals, so they resume (a helper's closure is not
+    // a registered symbol: "function is not serializable").
+    const activeSource = isActive ?? isCurrent ?? false;
+    const active = typeof activeSource === "function" ? () => dataBool(activeSource()) : dataBool(activeSource);
+    // `aria-current` of `isCurrent` (`undefined`: not set by the sidebar).
+    const current = isCurrent === undefined ? undefined : typeof isCurrent === "function" ? () => (isCurrent() ? "page" : undefined) : isCurrent ? "page" : undefined;
+    const className = cls ?? "rv-SidebarMenuSubButton";
+    if (rest.href === undefined)
+        return (<Button {...rest} {...(current === undefined ? {} : { "aria-current": current })} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size={size} data-active={active} class={className} onPress={(event) => {
+                onPress?.(event);
+                if (rest.slot !== "trigger")
+                    closeSidebarMobileOnAction(s, close);
+            }}/>);
+    const link = () => (<Link {...rest} {...linkExtras(rest, forceReload)} {...(current === undefined ? {} : { "aria-current": current })} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size={size} data-active={active} class={className} onPress={(event) => {
+            onPress?.(event);
+            closeSidebarMobileOnAction(s, close);
+        }}/>);
+    return forceReload ? provide(RouterContext, NATIVE_ROUTER, link) : link();
+}