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

package/sheet-motion/index.js

@@ -0,0 +1,386 @@
+// Rivet-authored (no upstream): drag-to-dismiss + snap points for an edge-attached sheet, on the house motion
+// `@rivetjs/cdk/motion` (embla-carousel 8.6.0 physics, MIT, © David Jerleke; user decision 2026-10-08: no hand-rolled
+// physics / JS easing). Feature set (snap points, close threshold, sequential snapping, handle-only drags, backdrop fade
+// from a snap index) inspired by HeroUI Pro's public Sheet docs; independent implementation. Generalises the Sidebar's
+// mobile sheet swipe (`../sidebar/sheet-motion.ts`) to four placements, so the Sidebar can adopt it later.
+// - Units: `offset` = px the sheet is pushed towards its closed edge: 0 = fully shown, `size` (its own extent along the
+//   axis) = off-screen. Rendered as an inline `transform: translate{X|Y}(…)` (an overlay's CSS enter / exit animates
+//   the separate `translate` property: the two compose).
+// - Snap points: numbers 0…1 = fraction of the viewport along the axis, or CSS lengths (`"148px"`, `"20rem"`, `"50dvh"`,
+//   `"40%"` of the viewport); offset of a point = `size - visible` clamped to 0…size (a point ≥ the sheet's size = fully
+//   shown). `snapPointTransform()` gives the same position as a CSS expression for the first render (no measurement).
+// - Drag: a move must go `AXIS_LOCK` px, more along the axis than across, before the drag starts (cross moves scroll /
+//   pan); a start inside a scroll container that can still scroll in the drag direction scrolls it instead (closing
+//   direction: always; opening direction: once the sheet is fully expanded). Past the drag limits the sheet follows
+//   at `RUBBER_BAND` of the pointer. A started drag dispatches a synthetic `pointercancel` on the press target (the
+//   browser does the same when it starts a pan; our own window listener ignores it) and swallows the next click.
+// - Release: `VelocityTracker` flick force × `DragRelease.forceBoost` (snap 300 mouse / 400 touch) projects the throw.
+//   Without snap points: dismiss when the projection passes `closeThreshold` × size, else settle back open. With snap
+//   points: dismiss when it passes the lowest point + `closeThreshold` × the remaining distance, else the nearest point
+//   (`sequential`: at most one point from where the drag started). Settle duration / friction = `DragRelease.settle`.
+//   A dismiss animates off-screen, then `close()` runs on settle. `prefers-reduced-motion: reduce` or `reduceMotion()`
+//   → every release / `snapTo` jumps.
+import { DragRelease, Motion1D, VelocityTracker } from "../motion/index.js";
+/** Pixels a pointer moves before a drag is decided. */
+export const SHEET_AXIS_LOCK = 6;
+/** Pointer-to-sheet ratio past the drag limits. */
+export const SHEET_RUBBER_BAND = 0.2;
+/** Default dismiss threshold (fraction of the remaining distance to the closed edge). */
+export const SHEET_CLOSE_THRESHOLD = 0.25;
+const BASE_FRICTION = 0.68;
+/** Elements a drag never starts from (text entry). */
+const NO_DRAG = "input, textarea, select, [contenteditable=''], [contenteditable='true'], [data-sheet-no-drag]";
+const LENGTH = /^(-?\d*\.?\d+)(px|rem|em|vh|dvh|svh|lvh|vw|dvw|svw|lvw|%)?$/;
+/** Visible size (px) of a snap point on a sheet whose axis is `vertical`, in a `width` × `height` viewport (`rem` / `em` from `rootFontSize`). */
+export function snapPointSize(point, viewport, vertical, rootFontSize = 16) {
+    const along = vertical ? viewport.height : viewport.width;
+    if (typeof point === "number")
+        return point <= 1 ? point * along : point;
+    const match = LENGTH.exec(point.trim());
+    if (!match)
+        return 0;
+    const value = Number(match[1]);
+    const unit = match[2];
+    if (unit === undefined || unit === "px")
+        return value;
+    if (unit === "rem" || unit === "em")
+        return value * rootFontSize;
+    if (unit === "%")
+        return (value / 100) * along;
+    return (value / 100) * (unit.endsWith("h") ? viewport.height : viewport.width);
+}
+/** Whether the axis of `placement` is vertical. */
+export const isVerticalSheet = (placement) => placement === "top" || placement === "bottom";
+/**
+ * The resting `transform` of a sheet at snap point `point` as a CSS expression (first render, before any measurement):
+ * `translateY(max(0px, calc(100% - 50dvh)))` for a bottom sheet at `0.5`. `undefined` when there is no point.
+ */
+export function snapPointTransform(placement, point) {
+    if (point === undefined)
+        return undefined;
+    const vertical = isVerticalSheet(placement);
+    const visible = typeof point === "number"
+        ? point <= 1
+            ? `${+(point * 100).toFixed(4)}${vertical ? "dvh" : "dvw"}`
+            : `${point}px`
+        : point.endsWith("%")
+            ? `${parseFloat(point)}${vertical ? "dvh" : "dvw"}`
+            : point;
+    const sign = placement === "bottom" || placement === "right" ? "" : "-1 * ";
+    const offset = `max(0px, calc(100% - ${visible}))`;
+    return `translate${vertical ? "Y" : "X"}(${sign ? `calc(${sign}${offset})` : offset})`;
+}
+/** Backdrop opacity at `offset` for snap offsets `offsets` (descending visibility order = ascending index) and `fadeFrom`. */
+export function sheetBackdropOpacity(offset, size, offsets, fadeFrom) {
+    if (!offsets.length)
+        return size ? Math.max(0, Math.min(1, 1 - offset / size)) : 1;
+    const index = Math.max(0, Math.min(offsets.length - 1, fadeFrom));
+    const full = offsets[index];
+    const none = index === 0 ? size : offsets[index - 1];
+    if (offset <= full)
+        return 1;
+    if (offset >= none || none === full)
+        return 0;
+    return 1 - (offset - full) / (none - full);
+}
+/** Where the sheet goes for an undamped pointer offset `raw`: `raw` within `limits`, `SHEET_RUBBER_BAND` of the overshoot past them. */
+export function rubberBand(raw, limits) {
+    const [min, max] = limits;
+    if (raw < min)
+        return min - (min - raw) * SHEET_RUBBER_BAND;
+    if (raw > max)
+        return max + (raw - max) * SHEET_RUBBER_BAND;
+    return raw;
+}
+/** Attaches drag / snap motion to an open sheet element; returns its controller. */
+export function sheetMotion(sheet, options) {
+    const placement = options.placement ?? "bottom";
+    const { close, onSnap, onDrag, onRelease, onProgress, onSettle, reduceMotion, backdrop, handle } = options;
+    const dismissible = options.dismissible ?? true;
+    const points = options.snapPoints?.length ? options.snapPoints : undefined;
+    const closeThreshold = options.closeThreshold ?? SHEET_CLOSE_THRESHOLD;
+    const fadeFrom = options.fadeFromIndex ?? (points ? points.length - 1 : 0);
+    const view = sheet.ownerDocument.defaultView;
+    const vertical = isVerticalSheet(placement);
+    // Closing direction in screen coordinates: a bottom sheet closes downwards (+y).
+    const sign = placement === "bottom" || placement === "right" ? 1 : -1;
+    const tracker = VelocityTracker();
+    const release = DragRelease(false, BASE_FRICTION);
+    let size = 0;
+    let offsets = [];
+    let index = points ? Math.max(0, Math.min(points.length - 1, options.activeSnapIndex ?? 0)) : -1;
+    let dismissing = false;
+    const measure = () => {
+        size = vertical ? sheet.offsetHeight : sheet.offsetWidth;
+        if (!points)
+            return void (offsets = []);
+        const viewport = { width: view.innerWidth, height: view.innerHeight };
+        const rem = parseFloat(view.getComputedStyle(sheet.ownerDocument.documentElement).fontSize) || 16;
+        offsets = points.map((point) => Math.max(0, Math.min(size, size - snapPointSize(point, viewport, vertical, rem))));
+    };
+    const restOf = (i) => (i < 0 || !offsets.length ? 0 : offsets[i]);
+    // Overdrag bleed (inline: behaviour-critical, never keyed on a class): created on the first overdrag past fully
+    // shown, removed when the motion settles.
+    const bleeds = options.bleed ?? true;
+    let bleed = null;
+    let position = null;
+    const showBleed = () => {
+        if (bleed)
+            return;
+        bleed = sheet.ownerDocument.createElement("div");
+        bleed.setAttribute("data-sheet-bleed", "");
+        bleed.setAttribute("aria-hidden", "true");
+        const beyond = {
+            bottom: "top:100%;left:0;right:0;height:100vh",
+            top: "bottom:100%;left:0;right:0;height:100vh",
+            right: "left:100%;top:0;bottom:0;width:100vw",
+            left: "right:100%;top:0;bottom:0;width:100vw",
+        }[placement];
+        bleed.style.cssText = `position:absolute;${beyond};background:inherit;pointer-events:none;`;
+        if (view.getComputedStyle(sheet).position === "static")
+            ((position = sheet.style.position), (sheet.style.position = "relative"));
+        sheet.append(bleed);
+    };
+    const hideBleed = () => {
+        if (!bleed)
+            return;
+        bleed.remove();
+        bleed = null;
+        if (position !== null)
+            ((sheet.style.position = position), (position = null));
+    };
+    const render = (value) => {
+        const px = sign * value;
+        if (value < 0 && bleeds)
+            showBleed();
+        sheet.style.transform = px || points ? `translate${vertical ? "Y" : "X"}(${px}px)` : "";
+        if (points)
+            sheet.style.setProperty("--snap-point-height", `${value}px`);
+        if (backdrop && size) {
+            const opacity = sheetBackdropOpacity(value, size, offsets, fadeFrom);
+            if (points || value)
+                backdrop.style.setProperty("--sheet-backdrop-opacity", String(+opacity.toFixed(4)));
+            else
+                backdrop.style.removeProperty("--sheet-backdrop-opacity");
+        }
+        onProgress?.(size ? Math.max(0, Math.min(1, 1 - value / size)) : 1);
+    };
+    const motion = Motion1D({
+        value: 0,
+        friction: BASE_FRICTION,
+        render,
+        onSettle: () => {
+            sheet.removeAttribute("data-dragging");
+            if (motion.target.get() >= 0)
+                hideBleed();
+            onSettle?.(!dismissing);
+            if (dismissing)
+                return close();
+            sheet.style.transition = "";
+            if (backdrop)
+                backdrop.style.transition = "";
+            if (!points)
+                reset();
+        },
+    });
+    const reset = () => {
+        sheet.style.transform = "";
+        backdrop?.style.removeProperty("--sheet-backdrop-opacity");
+    };
+    const reduced = () => !!reduceMotion?.() || !!view.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const animateTo = (next, rawForce) => {
+        const current = motion.target.get();
+        if (reduced())
+            return motion.to(next, true);
+        const { duration, friction } = release.settle(rawForce || next - current, next - current);
+        motion.scrollBody.useDuration(duration).useFriction(friction);
+        motion.target.set(next);
+        motion.animation.start();
+    };
+    let pointer = null;
+    let dragging = false;
+    let cancelling = false;
+    let limits = [0, 0];
+    let origin = 0;
+    const along = (event) => sign * (vertical ? event.clientY : event.clientX);
+    /** Whether a scroll container between `target` and the sheet can scroll for a finger moving `towardsClosed`. */
+    const scrollsFirst = (target, towardsClosed) => {
+        for (let el = target; el && el !== sheet; el = el.parentElement) {
+            if (!(el instanceof HTMLElement))
+                continue;
+            const style = view.getComputedStyle(el);
+            const overflow = vertical ? style.overflowY : style.overflowX;
+            if (overflow !== "auto" && overflow !== "scroll")
+                continue;
+            const pos = vertical ? el.scrollTop : Math.abs(el.scrollLeft);
+            const max = vertical ? el.scrollHeight - el.clientHeight : el.scrollWidth - el.clientWidth;
+            if (max <= 1)
+                continue;
+            // Finger towards the closed edge on a bottom / right sheet scrolls the content back to its start.
+            const towardsStart = towardsClosed === (sign === 1);
+            if (towardsStart ? pos > 0 : pos < max - 1)
+                return true;
+        }
+        return false;
+    };
+    const down = (event) => {
+        if (pointer || dismissing || (event.pointerType === "mouse" && event.button !== 0))
+            return;
+        const target = event.target;
+        if (target?.closest?.(NO_DRAG))
+            return;
+        if (handle && !target?.closest?.(handle))
+            return;
+        pointer = { id: event.pointerId, x: event.clientX, y: event.clientY, target, mouse: event.pointerType === "mouse", startOffset: motion.target.get() };
+        dragging = false;
+    };
+    const move = (event) => {
+        if (!pointer || event.pointerId !== pointer.id)
+            return;
+        if (!dragging) {
+            const dx = event.clientX - pointer.x, dy = event.clientY - pointer.y;
+            const main = vertical ? dy : dx, cross = vertical ? dx : dy;
+            if (Math.abs(main) < SHEET_AXIS_LOCK && Math.abs(cross) < SHEET_AXIS_LOCK)
+                return;
+            if (Math.abs(cross) >= Math.abs(main))
+                return void (pointer = null);
+            const towardsClosed = sign * main > 0;
+            measure();
+            const min = offsets.length ? Math.min(...offsets) : 0;
+            if (!handle && scrollsFirst(pointer.target, towardsClosed) && (towardsClosed || motion.target.get() <= min + 0.5))
+                return void (pointer = null);
+            dragging = true;
+            const max = dismissible ? size : offsets.length ? Math.max(...offsets) : 0;
+            limits = [min, max];
+            sheet.style.transition = "none";
+            sheet.setAttribute("data-dragging", "true");
+            if (backdrop)
+                backdrop.style.transition = "none";
+            try {
+                sheet.setPointerCapture(event.pointerId);
+            }
+            catch {
+                // Synthetic pointers have no capture.
+            }
+            cancelling = true;
+            try {
+                pointer.target?.dispatchEvent(new PointerEvent("pointercancel", { bubbles: true, pointerId: event.pointerId, pointerType: event.pointerType }));
+            }
+            finally {
+                cancelling = false;
+            }
+            view.addEventListener("click", swallow, { capture: true, once: true });
+            origin = sign * (vertical ? pointer.y : pointer.x);
+            tracker.pointerDown(origin, event.timeStamp);
+            motion.hold(true);
+            // Grabbed mid-animation: the drag continues from where the sheet is.
+            pointer.startOffset = motion.target.get();
+        }
+        event.preventDefault();
+        const point = along(event);
+        tracker.pointerMove(point, event.timeStamp);
+        // `origin` = pointer position (along the closing direction) at the drag start.
+        motion.drag(rubberBand(pointer.startOffset + point - origin, limits) - motion.target.get());
+        onDrag?.(event, size ? Math.max(0, motion.target.get() / size) : 0);
+    };
+    const up = (event) => {
+        if (cancelling || !pointer || event.pointerId !== pointer.id)
+            return;
+        const { mouse, startOffset } = pointer;
+        pointer = null;
+        if (!dragging)
+            return;
+        dragging = false;
+        view.setTimeout(() => view.removeEventListener("click", swallow, { capture: true }), 0);
+        const rawForce = event.type === "pointercancel" ? 0 : tracker.pointerUp(event.timeStamp) * release.forceBoost(mouse);
+        const current = motion.target.get();
+        const projected = current + rawForce;
+        motion.hold(false);
+        let next;
+        if (!offsets.length) {
+            dismissing = dismissible && projected > size * closeThreshold;
+            next = dismissing ? size : 0;
+        }
+        else {
+            const lowest = Math.max(...offsets);
+            dismissing = dismissible && projected > lowest + (size - lowest) * closeThreshold && (!options.sequential || index === 0 || startOffset >= lowest - 0.5);
+            if (dismissing)
+                next = size;
+            else {
+                let target = index;
+                if (options.sequential) {
+                    const moved = projected - startOffset;
+                    if (Math.abs(moved) > SHEET_AXIS_LOCK)
+                        target = Math.max(0, Math.min(offsets.length - 1, index + (moved > 0 ? -1 : 1)));
+                }
+                else {
+                    let best = Infinity;
+                    offsets.forEach((o, i) => {
+                        const d = Math.abs(o - projected);
+                        if (d < best)
+                            ((best = d), (target = i));
+                    });
+                }
+                next = offsets[target];
+                if (target !== index)
+                    ((index = target), onSnap?.(target));
+            }
+        }
+        onRelease?.(event, !dismissing);
+        animateTo(next, rawForce);
+    };
+    const swallow = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+    };
+    const touchAction = sheet.style.touchAction;
+    if (!handle)
+        sheet.style.touchAction = options.touchAction ?? (vertical ? "none" : "pan-y");
+    else if (options.touchAction)
+        sheet.style.touchAction = options.touchAction;
+    sheet.addEventListener("pointerdown", down);
+    view.addEventListener("pointermove", move, { passive: false });
+    view.addEventListener("pointerup", up);
+    view.addEventListener("pointercancel", up);
+    // Rest at the initial snap point in px (replaces the CSS expression of the first render).
+    if (points) {
+        measure();
+        motion.to(restOf(index), true);
+    }
+    return {
+        snapTo: (i, jump) => {
+            if (dismissing)
+                return;
+            measure();
+            if (points)
+                index = Math.max(0, Math.min(points.length - 1, i));
+            const next = restOf(points ? index : -1);
+            if (jump || reduced())
+                motion.to(next, true);
+            else
+                animateTo(next, 0);
+        },
+        dismiss: () => {
+            if (dismissing)
+                return;
+            measure();
+            dismissing = true;
+            animateTo(size, 0);
+        },
+        offset: () => motion.get(),
+        index: () => index,
+        destroy: () => {
+            motion.stop();
+            sheet.removeEventListener("pointerdown", down);
+            view.removeEventListener("pointermove", move);
+            view.removeEventListener("pointerup", up);
+            view.removeEventListener("pointercancel", up);
+            view.removeEventListener("click", swallow, { capture: true });
+            sheet.style.touchAction = touchAction;
+            sheet.removeAttribute("data-dragging");
+            hideBleed();
+            if (!dismissing && !points)
+                reset();
+        },
+    };
+}

package/sidebar/index.d.ts

@@ -0,0 +1,257 @@
+import { type Signal } from "@rivetjs/reactivity";
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import { type ButtonProps } from "../button/index.jsx";
+import { type LinkProps } from "../link/index.jsx";
+import { type InputProps } from "../input/index.jsx";
+import { type SeparatorProps } from "../separator/index.jsx";
+import { type TooltipProps } from "../tooltip/index.jsx";
+import { type Href, type RouterOptions } from "../utils/links.jsx";
+import { type MaybeAccessor } from "../interactions/utils.js";
+import type { GlobalDOMAttributes } from "../utils/dom-props.js";
+import type { DOMRenderProps } from "../utils/render.js";
+import { type ClassNameOrFunction, type RefValue, type StyleObject } from "../slots/index.jsx";
+import { type SidebarResizeProps } from "./resize.js";
+import { type SidebarStateProps } from "./state.js";
+export * from "./state.js";
+export { sidebarSheetMotion, type SidebarSheetMotionOptions } from "./sheet-motion.js";
+export * from "./resize.js";
+export { SidebarPage, SidebarPages, SidebarPagesContext, setSidebarPage, sidebarPagesValue, useSidebarPages, type SidebarPageProps, type SidebarPagesContextValue, type SidebarPagesProps, type SidebarPagesState, } from "./pages.jsx";
+/** Props shared by the structural parts (upstream `React.ComponentProps<tag>`). */
+export interface SidebarPartProps<E extends Element = HTMLElement> extends GlobalDOMAttributes<E>, DOMRenderProps<any, undefined> {
+    /** The CSS class (a string, or a function of `{ defaultClassName }`; called in a binding). */
+    class?: ClassNameOrFunction<{}>;
+    style?: StyleObject;
+    id?: string;
+    role?: string;
+    title?: string;
+    children?: Content;
+    ref?: RefValue<E>;
+    [attribute: `aria-${string}`]: unknown;
+}
+/** `useSidebar()` (upstream `SidebarContextProps`): values are accessors. */
+export interface SidebarContextValue {
+    /** `"expanded"` / `"collapsed"`. */
+    state: () => "expanded" | "collapsed";
+    open: () => boolean;
+    setOpen: (open: boolean | ((open: boolean) => boolean)) => void;
+    openMobile: () => boolean;
+    setOpenMobile: (open: boolean | ((open: boolean) => boolean)) => void;
+    isMobile: () => boolean;
+    toggleSidebar: () => void;
+}
+/** Upstream `useSidebar`: state accessors + setters of the nearest SidebarProvider (throws outside one). */
+export declare function useSidebar(): SidebarContextValue;
+export interface SidebarProviderProps extends SidebarStateProps, SidebarPartProps<HTMLDivElement> {
+    /** Called for every `keydown` inside the wrapper, before the toggle shortcut check. */
+    onKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Rivet: client-side navigation for the sidebar's links (a cdk `RouterProvider` for the subtree; an inline arrow).
+     * Without it links are native: `@rivetjs/router` routes them client-side when a route matches.
+     */
+    navigate?: (href: Href, routerOptions: RouterOptions) => void;
+    /** Rivet: maps a router href to the DOM `href` (with `navigate`). */
+    useHref?: (href: Href) => string;
+}
+/** Provides the sidebar state; wraps the app (`data-slot="sidebar-wrapper"`). */
+export declare function SidebarProvider(props: SidebarProviderProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface SidebarProps extends SidebarPartProps<HTMLDivElement>, SidebarResizeProps {
+    /** @default the provider's `side`, else "left" */
+    side?: MaybeAccessor<"left" | "right">;
+    /** @default the provider's `variant`, else "sidebar" */
+    variant?: MaybeAccessor<"sidebar" | "floating" | "inset">;
+    /** `none` is read once (it picks the element). @default the provider's `collapsible`, else "offcanvas" */
+    collapsible?: MaybeAccessor<"offcanvas" | "icon" | "none">;
+    /** Class of the desktop root (`data-slot="sidebar"`, carries `data-state` / `data-collapsible` / `data-variant` / `data-side`). @default "rv-Sidebar" */
+    rootClass?: string;
+    /** Class of the gap element that reserves the width in the layout. @default "rv-Sidebar-gap" */
+    gapClass?: string;
+    /** Class of the inner panel (`data-sidebar="sidebar"`). @default "rv-Sidebar-inner" */
+    innerClass?: string;
+    /** Mobile: class of the overlay underlay. @default "rv-Sidebar-overlay" */
+    overlayClass?: string;
+    /** Mobile: class of the sheet (`data-mobile="true"`). @default "rv-Sidebar-sheet" */
+    sheetClass?: string;
+    /** Mobile: class of the sheet's dialog (holds the content). @default "rv-Sidebar-dialog" */
+    dialogClass?: string;
+    /** Rivet: mobile sheet underlay look (`data-backdrop` on the overlay). @default "blur" */
+    backdrop?: "blur" | "opaque" | "transparent";
+    /**
+     * Rivet: a drag handle on the panel's inner edge resizes the desktop sidebar (`role="separator"`; `width` /
+     * `defaultWidth` / `minWidth` / `maxWidth` / `onWidthChange` / `onWidthChangeEnd` / `collapseBelowMin` / `resizeStep`).
+     * Not with `collapsible="none"`. @default false
+     */
+    resizable?: boolean;
+    /** Rivet: class of the resize handle. @default "rv-SidebarResizeHandle" */
+    resizeHandleClass?: string;
+    /** Rivet: accessible name of the resize handle. @default "Resize sidebar" */
+    resizeHandleLabel?: string;
+}
+/**
+ * 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 declare function Sidebar(props: SidebarProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/** Children = static content (the icon); no render function: the label follows them. */
+export type SidebarTriggerProps = Omit<ButtonProps, "children"> & {
+    children?: Content;
+};
+/**
+ * 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 declare function SidebarTrigger(props: SidebarTriggerProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface SidebarRailProps extends SidebarPartProps<HTMLButtonElement> {
+}
+/** The thin rail along the sidebar edge: click toggles (not in the tab order, as upstream). */
+export declare function SidebarRail(props: SidebarRailProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface SidebarInsetProps extends SidebarPartProps<HTMLElement> {
+}
+/** The main content next to an `inset` sidebar (`<main>`). */
+export declare function SidebarInset(props: SidebarInsetProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export type SidebarInputProps = InputProps;
+/** A cdk Input inside the sidebar (`data-sidebar="input"`). */
+export declare function SidebarInput(props: SidebarInputProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export type SidebarSeparatorProps = SeparatorProps;
+/** A cdk Separator inside the sidebar (`data-sidebar="separator"`). */
+export declare function SidebarSeparator(props: SidebarSeparatorProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export type SidebarHeaderProps = SidebarPartProps<HTMLDivElement>;
+/** Top of the sidebar (`data-sidebar="header"`). */
+export declare function SidebarHeader(props: SidebarHeaderProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export type SidebarFooterProps = SidebarPartProps<HTMLDivElement>;
+/** Bottom of the sidebar (`data-sidebar="footer"`). */
+export declare function SidebarFooter(props: SidebarFooterProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export type SidebarContentProps = SidebarPartProps<HTMLDivElement>;
+/** The scrollable middle of the sidebar (`data-sidebar="content"`). */
+export declare function SidebarContent(props: SidebarContentProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface SidebarGroupProps extends SidebarPartProps<HTMLDivElement> {
+    /** Rivet: close the mobile sheet when a menu button in this group is pressed. @default inherited (provider: true) */
+    closeMobileOnAction?: boolean;
+}
+/** A section of the sidebar (`data-sidebar="group"`). */
+export declare function SidebarGroup(props: SidebarGroupProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export type SidebarGroupLabelProps = SidebarPartProps<HTMLDivElement>;
+/** The label of a group (`div`; `render` replaces upstream `asChild`, e.g. a Disclosure trigger Button). */
+export declare function SidebarGroupLabel(props: SidebarGroupLabelProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export type SidebarGroupActionProps = SidebarPartProps<HTMLButtonElement>;
+/** An action button in a group header (native `button`, as the React Aria base). */
+export declare function SidebarGroupAction(props: SidebarGroupActionProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export type SidebarGroupContentProps = SidebarPartProps<HTMLDivElement>;
+/** The content of a group (`data-sidebar="group-content"`). */
+export declare function SidebarGroupContent(props: SidebarGroupContentProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface SidebarMenuProps extends SidebarPartProps<HTMLUListElement> {
+    /**
+     * Rivet: the guide line along nested sub menus — always (`true`), only while the menu is hovered / focused
+     * (`"hover"`) or never (`false`); `data-guide-lines="hover" | "none"` (absent for `true`). @default true
+     */
+    showGuideLines?: boolean | "hover";
+    /** Rivet: close the mobile sheet when a menu button in this menu is pressed. @default inherited (group / provider) */
+    closeMobileOnAction?: boolean;
+    /** Rivet: no sub menu / indicator / pages animation in this menu (`data-reduce-motion`). @default inherited (provider) */
+    reduceMotion?: boolean;
+}
+/** A menu list (`ul`, as new-york). */
+export declare function SidebarMenu(props: SidebarMenuProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/** Rivet: tree items — an expandable SidebarMenuItem / SidebarMenuSubItem is a cdk Disclosure. */
+export interface SidebarExpandableProps {
+    /** Renders the item as an expandable tree node (cdk Disclosure; implied by the props below). @default false */
+    expandable?: boolean;
+    /** Expanded at first (uncontrolled). @default false */
+    defaultExpanded?: boolean;
+    /** Expanded (controlled): a plain value or a two-way Signal. */
+    isExpanded?: boolean | Signal<boolean>;
+    /** Called when the item expands / collapses. */
+    onExpandedChange?: (isExpanded: boolean) => void;
+    /** Disables the trigger. */
+    isDisabled?: boolean;
+}
+export interface SidebarMenuItemProps extends SidebarPartProps<HTMLLIElement>, SidebarExpandableProps {
+}
+/** A menu item (`li`): holds a SidebarMenuButton and optional action / badge / sub menu; expandable = a tree node. */
+export declare function SidebarMenuItem(props: SidebarMenuItemProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/** Rivet: link / action extras of SidebarMenuButton and SidebarMenuSubButton. */
+export interface SidebarMenuLinkExtras {
+    /** The current page: `aria-current="page"` (and `data-active` unless `isActive` is given); a value or an accessor. */
+    isCurrent?: MaybeAccessor<boolean | undefined>;
+    /** With `href`: a full document load instead of client routing (`data-rivet-reload`, native router). @default false */
+    forceReload?: boolean;
+    /** Close the mobile sheet when pressed. @default inherited (menu / group / provider: true) */
+    closeMobileOnAction?: boolean;
+}
+interface MenuButtonExtras extends SidebarMenuLinkExtras {
+    /** Marks the current item (`data-active="true"`); a value or an accessor. @default false (`isCurrent`) */
+    isActive?: MaybeAccessor<boolean | undefined>;
+    /** `data-size`. @default "default" */
+    size?: "default" | "sm" | "lg";
+    /** Upstream `sidebarMenuButtonVariants` variant, exposed as `data-variant` (headless). @default "default" */
+    variant?: "default" | "outline";
+    /** A tooltip shown while the sidebar is collapsed (desktop only): its text, or Tooltip props. */
+    tooltip?: string | TooltipProps;
+}
+/** `SidebarMenuButton`: a cdk Button, or a cdk Link when `href` is given (React Aria base). */
+export type SidebarMenuButtonProps = MenuButtonExtras & ((ButtonProps & {
+    href?: undefined;
+}) | (LinkProps & {
+    href: string;
+}));
+/** The button / link of a menu item; with `tooltip`, a tooltip while collapsed (not on mobile). */
+export declare function SidebarMenuButton(props: SidebarMenuButtonProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/** Rivet: SidebarMenuTrigger — the expand / collapse button of an expandable item (a SidebarMenuButton, `slot="trigger"`). */
+export type SidebarMenuTriggerProps = Omit<MenuButtonExtras, "forceReload" | "closeMobileOnAction" | "isCurrent"> & Omit<ButtonProps, "slot">;
+/** Rivet: the trigger of an expandable (tree) item: toggles it, `aria-expanded` / `aria-controls` from the Disclosure. */
+export declare function SidebarMenuTrigger(props: SidebarMenuTriggerProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export type SidebarMenuIndicatorProps = SidebarPartProps<HTMLSpanElement>;
+/**
+ * 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 declare function SidebarMenuIndicator(props: SidebarMenuIndicatorProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface SidebarMenuActionProps extends ButtonProps {
+    /** Shown only while the item is hovered / focused (desktop): `data-show-on-hover="true"`. @default false */
+    showOnHover?: boolean;
+}
+/** An action button next to a menu button (cdk Button, React Aria base). */
+export declare function SidebarMenuAction(props: SidebarMenuActionProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface SidebarMenuActionsProps extends SidebarPartProps<HTMLDivElement> {
+    /** Shown only while the item is hovered / focused (desktop): `data-show-on-hover="true"`. @default false */
+    showOnHover?: boolean;
+}
+/** Rivet: several SidebarMenuAction buttons at the end of a menu item (`div`, `role="group"`). */
+export declare function SidebarMenuActions(props: SidebarMenuActionsProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export type SidebarMenuBadgeProps = SidebarPartProps<HTMLDivElement>;
+/** A badge (count) in a menu item. */
+export declare function SidebarMenuBadge(props: SidebarMenuBadgeProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface SidebarMenuSkeletonProps extends SidebarPartProps<HTMLDivElement> {
+    /** Renders the icon placeholder too. @default false */
+    showIcon?: boolean;
+    /** Class of the icon placeholder. @default "rv-SidebarMenuSkeleton-icon" */
+    iconClass?: string;
+    /** Class of the text placeholder (width `--skeleton-width`, random 50–90%). @default "rv-SidebarMenuSkeleton-text" */
+    textClass?: string;
+}
+/** A loading placeholder for a menu item. */
+export declare function SidebarMenuSkeleton(props: SidebarMenuSkeletonProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface SidebarMenuSubProps extends SidebarPartProps<HTMLUListElement> {
+    /** Rivet: inside an expandable item, class of the DisclosurePanel around the list. @default "rv-SidebarMenuSub-panel" */
+    panelClass?: string;
+}
+/** A nested menu (`ul`); inside an expandable item it sits in the item's DisclosurePanel (`data-slot="sidebar-menu-sub-panel"`). */
+export declare function SidebarMenuSub(props: SidebarMenuSubProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface SidebarMenuSubItemProps extends SidebarPartProps<HTMLLIElement>, SidebarExpandableProps {
+}
+/** An item of a nested menu (`li`); expandable = a nested tree node. */
+export declare function SidebarMenuSubItem(props: SidebarMenuSubItemProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+interface MenuSubButtonExtras extends SidebarMenuLinkExtras {
+    /** `data-size`. @default "md" */
+    size?: "sm" | "md";
+    /** Marks the current item (`data-active="true"`); a value or an accessor. @default false (`isCurrent`) */
+    isActive?: MaybeAccessor<boolean | undefined>;
+}
+/** `SidebarMenuSubButton`: a cdk Link with `href`, else a cdk Button (React Aria base; new-york: `<a>`). */
+export type SidebarMenuSubButtonProps = MenuSubButtonExtras & ((ButtonProps & {
+    href?: undefined;
+}) | (LinkProps & {
+    href: string;
+}));
+/** The link / button of a sub menu item. */
+export declare function SidebarMenuSubButton(props: SidebarMenuSubButtonProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;