@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/components/selection-slot.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, } from "react";
+import { cn } from "../internal/classes.js";
+const tabbable = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
+function focusable(root) {
+    return Array.from(root?.querySelectorAll(tabbable) ?? []).find((node) => !node.closest("[inert]") && node.getClientRects().length > 0);
+}
+function lost() {
+    const current = document.activeElement;
+    return !current || current === document.body;
+}
+/**
+ * Swaps a toolbar for a selection toolbar in the same place. Both share one
+ * grid cell, so the row keeps the height of the taller one and nothing below
+ * it moves. The hidden tools stay mounted, so their state survives, but are
+ * inert. Focus moves into the selection when it came from the hidden tools,
+ * and returns to where it was when the selection closes. If that element is
+ * gone, focus that was in the selection goes to the first tool.
+ */
+export function SelectionSlot({ active, selection, children, className, ...props }) {
+    const tools = useRef(null);
+    const selected = useRef(null);
+    const origin = useRef(null);
+    const previous = useRef(false);
+    const inside = useRef(false);
+    useLayoutEffect(() => {
+        if (active && !previous.current) {
+            const current = document.activeElement;
+            origin.current =
+                current instanceof HTMLElement && current !== document.body
+                    ? current
+                    : null;
+            if (origin.current && tools.current?.contains(origin.current))
+                focusable(selected.current)?.focus({ preventScroll: true });
+        }
+        if (!active && previous.current && lost()) {
+            if (origin.current?.isConnected)
+                origin.current.focus({ preventScroll: true });
+            else if (inside.current)
+                focusable(tools.current)?.focus({ preventScroll: true });
+        }
+        if (!active)
+            inside.current = false;
+        previous.current = active;
+    }, [active]);
+    return (_jsxs("div", { "data-slot": "selection-slot", "data-active": active || undefined, className: cn("sprout-selection-slot", className), ...props, children: [_jsx("div", { ref: tools, "data-slot": "selection-slot-default", className: "sprout-selection-slot-layer", inert: active, "aria-hidden": active || undefined, children: children }), active && (_jsx("div", { ref: selected, onFocus: () => (inside.current = true), onBlur: (event) => {
+                    // A null target means focus was dropped, as when the focused button is disabled.
+                    const next = event.relatedTarget;
+                    if (next && !event.currentTarget.contains(next))
+                        inside.current = false;
+                }, "data-slot": "selection-slot-selection", className: "sprout-selection-slot-layer sprout-selection-slot-selection", children: selection }))] }));
+}

package/dist/components/separator.d.ts

@@ -0,0 +1,48 @@
+import type { ComponentProps, ReactNode } from "react";
+import { Separator as BaseSeparator } from "@base-ui/react/separator";
+import { useRender } from "@base-ui/react/use-render";
+export declare const separatorVariantNames: readonly ["line", "fade", "marker", "marker-border"];
+export declare const separatorOrientationNames: readonly ["horizontal", "vertical"];
+export declare const separatorToneNames: readonly ["default", "input"];
+export type SeparatorVariant = (typeof separatorVariantNames)[number];
+export type SeparatorOrientation = (typeof separatorOrientationNames)[number];
+export type SeparatorTone = (typeof separatorToneNames)[number];
+/** A bare 1px rule, horizontal or vertical. */
+export interface SeparatorLineProps extends Omit<BaseSeparator.Props, "children"> {
+    variant?: "line" | undefined;
+    /** `"input"` matches control borders, for dividers inside grouped buttons. */
+    tone?: SeparatorTone | undefined;
+    children?: undefined;
+}
+/** A horizontal rule with centered content, such as "or". */
+export interface SeparatorLabelProps extends Omit<ComponentProps<"div">, "children"> {
+    variant?: "line" | undefined;
+    /**
+     * Short content centered on the line. Content that renders nothing, such
+     * as `false`, leaves a spaced plain line.
+     */
+    children: ReactNode;
+}
+/** A horizontal rule with faded ends and a centered text label. */
+export interface SeparatorFadeProps extends Omit<BaseSeparator.Props, "children" | "orientation"> {
+    variant: "fade";
+    /** The label. It also names the separator for assistive technology. */
+    children: string;
+}
+export interface SeparatorMarkerState extends Record<string, unknown> {
+    slot: "separator";
+    variant: "marker" | "marker-border";
+}
+/** A quiet, full-width timeline note, such as "Used skill" or "Today". */
+export interface SeparatorMarkerProps extends useRender.ComponentProps<"div", SeparatorMarkerState> {
+    /** `"marker-border"` adds a line under the row. */
+    variant: "marker" | "marker-border";
+}
+export type SeparatorProps = SeparatorLineProps | SeparatorLabelProps | SeparatorFadeProps | SeparatorMarkerProps;
+export declare function Separator(props: SeparatorProps): import("react").JSX.Element;
+export type SeparatorIconProps = ComponentProps<"span">;
+/** A 16px decorative icon slot. It is hidden from assistive technology. */
+export declare function SeparatorIcon({ className, ...props }: SeparatorIconProps): import("react").JSX.Element;
+export type SeparatorContentProps = ComponentProps<"span">;
+/** Marker text. Long words wrap instead of overflowing. */
+export declare function SeparatorContent({ className, ...props }: SeparatorContentProps): import("react").JSX.Element;

package/dist/components/separator.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { Separator as BaseSeparator } from "@base-ui/react/separator";
+import { useRender } from "@base-ui/react/use-render";
+import { cn, stateClassName } from "../internal/classes.js";
+export const separatorVariantNames = [
+    "line",
+    "fade",
+    "marker",
+    "marker-border",
+];
+export const separatorOrientationNames = ["horizontal", "vertical"];
+export const separatorToneNames = ["default", "input"];
+export function Separator(props) {
+    if (props.variant === "fade")
+        return _jsx(Fade, { ...props });
+    if (props.variant === "marker" || props.variant === "marker-border")
+        return _jsx(Marker, { ...props });
+    if (props.children !== undefined)
+        return _jsx(Labeled, { ...props });
+    return _jsx(Line, { ...props });
+}
+function Line({ className, orientation = "horizontal", tone = "default", variant: _variant, ...props }) {
+    return (_jsx(BaseSeparator, { "data-slot": "separator", "data-variant": "line", "data-tone": tone, orientation: orientation, className: stateClassName("sprout-separator", className), ...props }));
+}
+function Labeled({ children, className, variant: _variant, ...props }) {
+    const content = children !== null && children !== false && children !== "";
+    return (_jsxs("div", { "data-slot": "separator", "data-variant": "label", "data-content": content, className: cn("sprout-separator-label", className), ...props, children: [_jsx(Line, { className: "sprout-separator-label-line" }), content && (_jsxs(_Fragment, { children: [_jsx("span", { "data-slot": "separator-label-content", className: "sprout-separator-label-content", children: children }), _jsx("span", { "aria-hidden": "true", className: "sprout-separator sprout-separator-label-line", "data-orientation": "horizontal" })] }))] }));
+}
+function Fade({ children, className, variant: _variant, ...props }) {
+    return (_jsxs(BaseSeparator, { "aria-label": children, "data-slot": "separator", "data-variant": "fade", orientation: "horizontal", className: stateClassName("sprout-separator-fade", className), ...props, children: [_jsx("span", { className: "sprout-separator-fade-label", children: children }), _jsx("span", { "aria-hidden": "true", className: "sprout-separator-fade-shine", children: _jsx("span", { className: "sprout-separator-fade-label", children: children }) })] }));
+}
+function Marker({ className, variant, render, ref, ...props }) {
+    return useRender({
+        defaultTagName: "div",
+        ref,
+        render,
+        props: mergeProps({
+            "data-slot": "separator",
+            "data-variant": variant,
+            className: cn("sprout-separator-marker", variant === "marker-border" && "sprout-separator-marker-border", className),
+        }, props),
+        state: { slot: "separator", variant },
+    });
+}
+/** A 16px decorative icon slot. It is hidden from assistive technology. */
+export function SeparatorIcon({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "separator-icon", "aria-hidden": "true", className: cn("sprout-separator-icon", className), ...props }));
+}
+/** Marker text. Long words wrap instead of overflowing. */
+export function SeparatorContent({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "separator-content", className: cn("sprout-separator-content", className), ...props }));
+}

package/dist/components/settings-list.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentProps, ReactNode } from "react";
+export declare const settingsGroupHeadingNames: readonly ["h2", "h3", "h4"];
+export type SettingsGroupHeading = (typeof settingsGroupHeadingNames)[number];
+export interface SettingsGroupProps extends Omit<ComponentProps<"section">, "title"> {
+    title: ReactNode;
+    /** Id for the title. When set, the section is named by its title. */
+    titleId?: string;
+    heading?: SettingsGroupHeading;
+}
+/**
+ * A titled panel of settings rows. Children are stacked with a divider
+ * between them; rows, notes, forms, and alerts can sit side by side.
+ */
+export declare function SettingsGroup({ title, titleId, heading: Heading, className, children, ...props }: SettingsGroupProps): import("react").JSX.Element;
+export interface SettingsRowProps extends Omit<ComponentProps<"div">, "children"> {
+    label: ReactNode;
+    description?: ReactNode;
+    /** Renders the label as a `<label>` for this control id. */
+    htmlFor?: string;
+    children?: ReactNode;
+}
+/**
+ * One setting: a label and description, with its value or control beside
+ * them from 36rem of group width and below them on narrower groups.
+ */
+export declare function SettingsRow({ label, description, htmlFor, className, children, ...props }: SettingsRowProps): import("react").JSX.Element;

package/dist/components/settings-list.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../internal/classes.js";
+export const settingsGroupHeadingNames = ["h2", "h3", "h4"];
+/**
+ * A titled panel of settings rows. Children are stacked with a divider
+ * between them; rows, notes, forms, and alerts can sit side by side.
+ */
+export function SettingsGroup({ title, titleId, heading: Heading = "h2", className, children, ...props }) {
+    return (_jsxs("section", { "data-slot": "settings-group", "aria-labelledby": titleId, className: cn("sprout-settings-group", className), ...props, children: [_jsx(Heading, { id: titleId, className: "sprout-settings-group-title", children: title }), _jsx("div", { "data-slot": "settings-group-content", className: "sprout-settings-group-content", children: children })] }));
+}
+/**
+ * One setting: a label and description, with its value or control beside
+ * them from 36rem of group width and below them on narrower groups.
+ */
+export function SettingsRow({ label, description, htmlFor, className, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "settings-row", className: cn("sprout-settings-row", className), ...props, children: [_jsxs("div", { className: "sprout-settings-row-text", children: [htmlFor ? (_jsx("label", { htmlFor: htmlFor, className: "sprout-settings-row-label", children: label })) : (_jsx("p", { className: "sprout-settings-row-label", children: label })), description != null && description !== false && description !== "" && (_jsx("div", { className: "sprout-settings-row-description", children: description }))] }), children != null && children !== false && (_jsx("div", { "data-slot": "settings-row-control", className: "sprout-settings-row-control", children: children }))] }));
+}

package/dist/components/sheet.d.ts

@@ -0,0 +1,70 @@
+import { Drawer as SheetPrimitive } from "@base-ui/react/drawer";
+import { useRender } from "@base-ui/react/use-render";
+export declare const sheetSideNames: readonly ["top", "right", "bottom", "left"];
+export declare const sheetSizeNames: readonly ["default", "lg", "xl", "full"];
+export declare const sheetTitleSizeNames: readonly ["default", "lg"];
+export type SheetSide = (typeof sheetSideNames)[number];
+export type SheetSize = (typeof sheetSizeNames)[number];
+export type SheetTitleSize = (typeof sheetTitleSizeNames)[number];
+export type SheetProps = Omit<SheetPrimitive.Root.Props, "swipeDirection" | "snapPoints" | "snapPoint" | "defaultSnapPoint" | "onSnapPointChange" | "snapToSequentialPoints">;
+/**
+ * Groups the parts of a sheet. Touch users can swipe it closed toward the
+ * edge set by `SheetContent`'s `side`.
+ */
+export declare function Sheet(props: SheetProps): import("react").JSX.Element;
+export type SheetTriggerProps = SheetPrimitive.Trigger.Props;
+export declare function SheetTrigger(props: SheetTriggerProps): import("react").JSX.Element;
+export type SheetCloseProps = SheetPrimitive.Close.Props;
+export declare function SheetClose(props: SheetCloseProps): import("react").JSX.Element;
+export type SheetPortalProps = SheetPrimitive.Portal.Props;
+export declare function SheetPortal(props: SheetPortalProps): import("react").JSX.Element;
+export type SheetOverlayProps = SheetPrimitive.Backdrop.Props;
+export declare function SheetOverlay({ className, ...props }: SheetOverlayProps): import("react").JSX.Element;
+export interface SheetContentProps extends SheetPrimitive.Popup.Props {
+    /** The viewport edge the sheet slides in from. Defaults to `"right"`. */
+    side?: SheetSide;
+    /**
+     * Width of a left or right sheet: `default` 24rem, `lg` 32rem, `xl` 42rem.
+     * `full` covers the whole viewport from any side.
+     */
+    size?: SheetSize;
+    /** Adds a ghost icon button in the top-right corner. Defaults to `true`. */
+    showCloseButton?: boolean;
+    /** Accessible name of the corner close button. */
+    closeLabel?: string;
+    /** Keeps the sheet in the DOM while closed, so drafts and scroll survive. */
+    keepMounted?: boolean;
+    /** Where the portal renders. Defaults to `document.body`. */
+    container?: SheetPrimitive.Portal.Props["container"];
+    /** Shows a grab bar on the edge facing the page. Defaults to `false`. */
+    showSwipeHandle?: boolean;
+}
+/**
+ * The sliding panel. It renders its own portal and overlay, so place it
+ * directly inside `Sheet`. A touch swipe toward `side` closes it. Mouse and pen
+ * drags only move it from the handle or empty panel space, so text selection
+ * and form fields work as usual.
+ */
+export declare function SheetContent({ className, children, side, size, showCloseButton, closeLabel, keepMounted, container, showSwipeHandle, ...props }: SheetContentProps): import("react").JSX.Element;
+type PartSlot = "sheet-header" | "sheet-body" | "sheet-footer";
+export interface SheetPartState extends Record<string, unknown> {
+    slot: PartSlot;
+}
+export type SheetPartProps = useRender.ComponentProps<"div", SheetPartState>;
+/** Stacks the title and description with 16px padding. */
+export declare const SheetHeader: ({ className, render, ref, ...props }: SheetPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** The scrolling middle. It fills the space between header and footer. */
+export declare const SheetBody: ({ className, render, ref, ...props }: SheetPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Actions pinned to the bottom edge. They stack full width in side sheets and
+ * align right in wide top and bottom sheets.
+ */
+export declare const SheetFooter: ({ className, render, ref, ...props }: SheetPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export interface SheetTitleProps extends SheetPrimitive.Title.Props {
+    /** `lg` is the larger product-page title used in wide detail sheets. */
+    size?: SheetTitleSize;
+}
+export declare function SheetTitle({ className, size, ...props }: SheetTitleProps): import("react").JSX.Element;
+export type SheetDescriptionProps = SheetPrimitive.Description.Props;
+export declare function SheetDescription({ className, ...props }: SheetDescriptionProps): import("react").JSX.Element;
+export {};

package/dist/components/sheet.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useLayoutEffect, useState, } from "react";
+import { Drawer as SheetPrimitive } from "@base-ui/react/drawer";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { X } from "reicon-react/icons/X";
+import { cn, stateClassName } from "../internal/classes.js";
+import { Button } from "./button.js";
+export const sheetSideNames = ["top", "right", "bottom", "left"];
+export const sheetSizeNames = ["default", "lg", "xl", "full"];
+export const sheetTitleSizeNames = ["default", "lg"];
+const swipeDirections = {
+    top: "up",
+    right: "right",
+    bottom: "down",
+    left: "left",
+};
+const SheetSideContext = createContext(null);
+/**
+ * Groups the parts of a sheet. Touch users can swipe it closed toward the
+ * edge set by `SheetContent`'s `side`.
+ */
+export function Sheet(props) {
+    const [side, setSide] = useState("right");
+    return (_jsx(SheetSideContext.Provider, { value: setSide, children: _jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props, swipeDirection: swipeDirections[side] }) }));
+}
+export function SheetTrigger(props) {
+    return _jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+export function SheetClose(props) {
+    return _jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
+}
+export function SheetPortal(props) {
+    return _jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+export function SheetOverlay({ className, ...props }) {
+    return (_jsx(SheetPrimitive.Backdrop, { "data-slot": "sheet-overlay", ...props, className: stateClassName("sprout-sheet-overlay", className) }));
+}
+/**
+ * The sliding panel. It renders its own portal and overlay, so place it
+ * directly inside `Sheet`. A touch swipe toward `side` closes it. Mouse and pen
+ * drags only move it from the handle or empty panel space, so text selection
+ * and form fields work as usual.
+ */
+export function SheetContent({ className, children, side = "right", size = "default", showCloseButton = true, closeLabel = "Close", keepMounted = false, container, showSwipeHandle = false, ...props }) {
+    const setSide = useContext(SheetSideContext);
+    // Base UI reads the swipe direction from the root, but `side` lives here.
+    useLayoutEffect(() => setSide?.(side), [setSide, side]);
+    return (_jsxs(SheetPortal, { keepMounted: keepMounted, container: container, children: [_jsx(SheetOverlay, {}), _jsx(SheetPrimitive.Viewport, { "data-slot": "sheet-viewport", className: "sprout-sheet-viewport", children: _jsxs(SheetPrimitive.Popup, { "data-slot": "sheet-content", "data-side": side, "data-size": size, ...props, className: stateClassName("sprout-sheet-content", className), children: [showSwipeHandle && (_jsx("div", { "data-slot": "sheet-swipe-handle", "aria-hidden": "true", className: "sprout-sheet-swipe-handle" })), _jsx(SheetPrimitive.Content, { className: "sprout-sheet-inner", children: children }), showCloseButton && (_jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", className: "sprout-sheet-close", "aria-label": closeLabel, render: _jsx(Button, { variant: "ghost", size: "icon-sm" }), children: _jsx(X, { size: 16, "aria-hidden": "true" }) }))] }) })] }));
+}
+function part(slot, base) {
+    return function SheetPart({ className, render, ref, ...props }) {
+        return useRender({
+            defaultTagName: "div",
+            ref,
+            render,
+            props: mergeProps({ "data-slot": slot, className: cn(base, className) }, props),
+            state: { slot },
+        });
+    };
+}
+/** Stacks the title and description with 16px padding. */
+export const SheetHeader = part("sheet-header", "sprout-sheet-header");
+/** The scrolling middle. It fills the space between header and footer. */
+export const SheetBody = part("sheet-body", "sprout-sheet-body");
+/**
+ * Actions pinned to the bottom edge. They stack full width in side sheets and
+ * align right in wide top and bottom sheets.
+ */
+export const SheetFooter = part("sheet-footer", "sprout-sheet-footer");
+export function SheetTitle({ className, size = "default", ...props }) {
+    return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", "data-size": size, ...props, className: stateClassName("sprout-sheet-title", className) }));
+}
+export function SheetDescription({ className, ...props }) {
+    return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", ...props, className: stateClassName("sprout-sheet-description", className) }));
+}

package/dist/components/sidebar.d.ts

@@ -0,0 +1,70 @@
+import { type ComponentProps, type ReactNode, type RefObject, type SetStateAction } from "react";
+import { Button } from "@base-ui/react/button";
+import { Dialog } from "@base-ui/react/dialog";
+import { type TooltipContentProps } from "./tooltip.js";
+import { type InputProps } from "./input.js";
+import { type SeparatorLineProps } from "./separator.js";
+interface SidebarContextValue {
+    open: boolean;
+    setOpen: (open: SetStateAction<boolean>) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: SetStateAction<boolean>) => void;
+    isMobile: boolean;
+    state: "expanded" | "collapsed";
+    toggleSidebar: () => void;
+    panelId: string;
+    triggerRef: RefObject<HTMLElement | null>;
+}
+export declare function useSidebar(): SidebarContextValue;
+export interface SidebarProviderProps extends Omit<ComponentProps<"div">, "ref"> {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    openMobile?: boolean;
+    onOpenMobileChange?: (open: boolean) => void;
+    keyboardShortcut?: boolean;
+}
+export declare function SidebarProvider({ defaultOpen, open: controlledOpen, onOpenChange, openMobile: controlledMobile, onOpenMobileChange, keyboardShortcut, className, children, ...props }: SidebarProviderProps): import("react").JSX.Element;
+export interface SidebarProps extends ComponentProps<"aside"> {
+    side?: "left" | "right";
+    collapsible?: "icon" | "offcanvas" | "none";
+    label?: string;
+    portalContainer?: Dialog.Portal.Props["container"];
+}
+export declare function Sidebar({ side, collapsible, label, portalContainer, className, children, ...props }: SidebarProps): import("react").JSX.Element;
+export declare function SidebarTrigger({ className, onClick, children, ...props }: Button.Props): import("react").JSX.Element;
+export declare function SidebarHeader({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/** A 32px search or filter field for the sidebar header, on the canvas color. */
+export declare function SidebarInput({ className, ...props }: InputProps): import("react").JSX.Element;
+export declare function SidebarFooter({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function SidebarSeparator({ className, ...props }: SeparatorLineProps): import("react").JSX.Element;
+export declare function SidebarContent({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function SidebarGroup({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function SidebarGroupLabel({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function SidebarMenu({ className, ...props }: ComponentProps<"ul">): import("react").JSX.Element;
+export declare function SidebarMenuItem({ className, ...props }: ComponentProps<"li">): import("react").JSX.Element;
+export interface SidebarMenuButtonProps extends Button.Props {
+    icon?: ReactNode;
+    badge?: ReactNode;
+    isActive?: boolean;
+    /**
+     * The label shown beside the collapsed icon rail. Pass `TooltipContent`
+     * props to change its content or placement; `hidden` overrides when it shows.
+     */
+    tooltip?: string | TooltipContentProps;
+}
+export declare function SidebarMenuButton({ icon, badge, isActive, tooltip, className, children, onClick, ...props }: SidebarMenuButtonProps): import("react").JSX.Element;
+export declare function SidebarMenuAction({ className, ...props }: Button.Props): import("react").JSX.Element;
+export declare function SidebarMenuSub({ className, ...props }: ComponentProps<"ul">): import("react").JSX.Element;
+export declare const SidebarMenuSubItem: typeof SidebarMenuItem;
+export declare function SidebarMenuSubButton({ className, ...props }: SidebarMenuButtonProps): import("react").JSX.Element;
+export interface SidebarSectionProps extends Omit<SidebarMenuButtonProps, "onChange"> {
+    label: string;
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function SidebarSection({ label, children, open: controlledOpen, defaultOpen, onOpenChange, ...props }: SidebarSectionProps): import("react").JSX.Element;
+export declare function SidebarMenuSkeleton({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export {};

package/dist/components/sidebar.js

@@ -0,0 +1,187 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "reicon-react/icons/ChevronRight";
+import { createContext, useContext, useEffect, useId, useRef, useState, useSyncExternalStore, } from "react";
+import { Button } from "@base-ui/react/button";
+import { Dialog } from "@base-ui/react/dialog";
+import { Collapsible } from "@base-ui/react/collapsible";
+import { cn, stateClassName } from "../internal/classes.js";
+import { Pressable } from "../internal/pressable.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./tooltip.js";
+import { Input } from "./input.js";
+import { Separator } from "./separator.js";
+const SidebarContext = createContext(null);
+const PanelContext = createContext(null);
+export function useSidebar() {
+    const context = useContext(SidebarContext);
+    if (!context)
+        throw new Error("Sidebar parts must be inside SidebarProvider.");
+    return context;
+}
+function usePanel() {
+    const context = useContext(PanelContext);
+    if (!context)
+        throw new Error("Sidebar navigation parts must be inside Sidebar.");
+    return context;
+}
+function subscribeMobile(callback) {
+    const media = window.matchMedia("(max-width: 767px)");
+    media.addEventListener("change", callback);
+    return () => media.removeEventListener("change", callback);
+}
+export function SidebarProvider({ defaultOpen = true, open: controlledOpen, onOpenChange, openMobile: controlledMobile, onOpenMobileChange, keyboardShortcut = true, className, children, ...props }) {
+    const [localOpen, setLocalOpen] = useState(defaultOpen);
+    const [localMobile, setLocalMobile] = useState(false);
+    const isMobile = useSyncExternalStore(subscribeMobile, () => window.matchMedia("(max-width: 767px)").matches, () => false);
+    const open = controlledOpen ?? localOpen;
+    const openMobile = controlledMobile ?? localMobile;
+    const panelId = useId();
+    const triggerRef = useRef(null);
+    const wrapperRef = useRef(null);
+    function setOpen(value) {
+        const next = typeof value === "function" ? value(open) : value;
+        if (controlledOpen === undefined)
+            setLocalOpen(next);
+        onOpenChange?.(next);
+    }
+    function setOpenMobile(value) {
+        const next = typeof value === "function" ? value(openMobile) : value;
+        if (controlledMobile === undefined)
+            setLocalMobile(next);
+        onOpenMobileChange?.(next);
+    }
+    function toggleSidebar() {
+        if (isMobile)
+            setOpenMobile((value) => !value);
+        else
+            setOpen((value) => !value);
+    }
+    useEffect(() => {
+        if (!keyboardShortcut)
+            return;
+        function onKeyDown(event) {
+            if (event.defaultPrevented ||
+                event.repeat ||
+                event.altKey ||
+                !(event.metaKey || event.ctrlKey) ||
+                event.key.toLowerCase() !== "b")
+                return;
+            const target = event.target;
+            if (target instanceof Element) {
+                if (target.closest("input, textarea, select, [role=combobox], [role=listbox], [role=menu], [aria-haspopup=menu], [contenteditable]:not([contenteditable=false])"))
+                    return;
+                const owner = target.closest("[data-sprout-sidebar-provider]");
+                if (owner && owner !== wrapperRef.current)
+                    return;
+            }
+            event.preventDefault();
+            toggleSidebar();
+        }
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    });
+    return (_jsx(SidebarContext.Provider, { value: {
+            open,
+            setOpen,
+            openMobile,
+            setOpenMobile,
+            isMobile,
+            state: open ? "expanded" : "collapsed",
+            toggleSidebar,
+            panelId,
+            triggerRef,
+        }, children: _jsx(TooltipProvider, { delay: 200, children: _jsx("div", { ...props, ref: wrapperRef, "data-sprout-sidebar-provider": "", className: cn("sprout-sidebar-layout font-sprout text-sprout-text", className), children: children }) }) }));
+}
+export function Sidebar({ side = "left", collapsible = "icon", label = "Navigation", portalContainer, className, children, ...props }) {
+    const { open, openMobile, setOpenMobile, isMobile, panelId, triggerRef } = useSidebar();
+    const mobile = isMobile && collapsible !== "none";
+    const collapsed = !mobile && !open && collapsible === "icon";
+    const offcanvas = !open && collapsible === "offcanvas";
+    const content = (_jsx(PanelContext.Provider, { value: { collapsed, side, portalContainer }, children: children }));
+    if (mobile) {
+        return (_jsx(Dialog.Root, { open: openMobile, onOpenChange: setOpenMobile, children: _jsxs(Dialog.Portal, { container: portalContainer, children: [_jsx(Dialog.Backdrop, { className: "sprout-sidebar-backdrop" }), _jsxs(Dialog.Popup, { id: panelId, "data-side": side, className: "sprout-sidebar-drawer font-sprout text-sprout-text", finalFocus: triggerRef, children: [_jsxs("div", { className: "sprout-sidebar-drawer-heading", children: [_jsx(Dialog.Title, { children: label }), _jsx(Dialog.Close, { className: "sprout-sidebar-close", children: "Close" })] }), _jsx("aside", { ...props, "aria-label": label, "data-sprout-sidebar": "", "data-state": "expanded", className: cn("sprout-sidebar-panel sprout-sidebar-mobile bg-sprout-canvas", className), children: content })] })] }) }));
+    }
+    return (_jsx("aside", { ...props, id: panelId, "aria-label": label, "data-sprout-sidebar": "", "data-state": collapsed ? "collapsed" : "expanded", "data-side": side, "data-collapsible": collapsible, "data-offcanvas": offcanvas ? "" : undefined, "aria-hidden": offcanvas || undefined, inert: offcanvas, className: cn("sprout-sidebar-panel bg-sprout-canvas", className), children: content }));
+}
+export function SidebarTrigger({ className, onClick, children = "Toggle sidebar", ...props }) {
+    const { isMobile, open, openMobile, toggleSidebar, panelId, triggerRef } = useSidebar();
+    return (_jsx(Button, { "aria-label": "Toggle sidebar", "aria-expanded": isMobile ? openMobile : open, "aria-controls": panelId, ...props, className: stateClassName("sprout-sidebar-trigger", className), onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented)
+                return;
+            triggerRef.current = event.currentTarget;
+            toggleSidebar();
+        }, children: children }));
+}
+export function SidebarHeader({ className, ...props }) {
+    return _jsx("div", { ...props, className: cn("sprout-sidebar-header", className) });
+}
+/** A 32px search or filter field for the sidebar header, on the canvas color. */
+export function SidebarInput({ className, ...props }) {
+    return (_jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", ...props, className: stateClassName("sprout-sidebar-input", className) }));
+}
+export function SidebarFooter({ className, ...props }) {
+    return _jsx("div", { ...props, className: cn("sprout-sidebar-footer", className) });
+}
+export function SidebarSeparator({ className, ...props }) {
+    return (_jsx(Separator, { "data-sidebar": "separator", ...props, className: stateClassName("sprout-sidebar-separator", className) }));
+}
+export function SidebarContent({ className, ...props }) {
+    return _jsx("div", { ...props, className: cn("sprout-sidebar-content", className) });
+}
+export function SidebarGroup({ className, ...props }) {
+    return _jsx("div", { ...props, className: cn("sprout-sidebar-group", className) });
+}
+export function SidebarGroupLabel({ className, ...props }) {
+    return (_jsx("div", { ...props, className: cn("sprout-sidebar-group-label", className) }));
+}
+export function SidebarMenu({ className, ...props }) {
+    return _jsx("ul", { ...props, className: cn("sprout-sidebar-menu", className) });
+}
+export function SidebarMenuItem({ className, ...props }) {
+    return (_jsx("li", { ...props, className: cn("sprout-sidebar-menu-item", className) }));
+}
+export function SidebarMenuButton({ icon, badge, isActive = false, tooltip, className, children, onClick, ...props }) {
+    const { collapsed, side, portalContainer } = usePanel();
+    const { setOpenMobile } = useSidebar();
+    const content = typeof tooltip === "string" ? { children: tooltip } : tooltip;
+    const { hidden: hideTooltip = !collapsed, ...contentProps } = content ?? {};
+    const accessibleLabel = props["aria-label"] ??
+        (typeof content?.children === "string" ? content.children : undefined) ??
+        (typeof children === "string" ? children : undefined);
+    return (_jsxs(Tooltip, { disabled: hideTooltip || props.disabled, children: [_jsxs(TooltipTrigger, { render: _jsx(Pressable, { ...props, "aria-label": accessibleLabel, "aria-current": props["aria-current"] ??
+                        (isActive && props.nativeButton === false ? "page" : undefined), "data-active": isActive ? "" : undefined, className: stateClassName("sprout-sidebar-menu-button", className), onClick: (event) => {
+                        onClick?.(event);
+                        if (!event.defaultPrevented &&
+                            props.nativeButton === false &&
+                            !event.metaKey &&
+                            !event.ctrlKey &&
+                            !event.shiftKey &&
+                            !event.altKey)
+                            setOpenMobile(false);
+                    } }), children: [icon && (_jsx("span", { className: "sprout-sidebar-icon", "aria-hidden": "true", children: icon })), _jsx("span", { className: "sprout-sidebar-label", children: children }), badge != null && _jsx("span", { className: "sprout-sidebar-badge", children: badge })] }), _jsx(TooltipContent, { side: side === "left" ? "right" : "left", sideOffset: 8, container: portalContainer, ...contentProps, className: stateClassName("sprout-sidebar-tooltip", contentProps.className), children: contentProps.children ?? children })] }));
+}
+export function SidebarMenuAction({ className, ...props }) {
+    usePanel();
+    return (_jsx(Button, { ...props, className: stateClassName("sprout-sidebar-menu-action", className) }));
+}
+export function SidebarMenuSub({ className, ...props }) {
+    return (_jsx("ul", { ...props, className: cn("sprout-sidebar-menu sprout-sidebar-sub", className) }));
+}
+export const SidebarMenuSubItem = SidebarMenuItem;
+export function SidebarMenuSubButton({ className, ...props }) {
+    return (_jsx(SidebarMenuButton, { ...props, className: stateClassName("sprout-sidebar-sub-button", className) }));
+}
+export function SidebarSection({ label, children, open: controlledOpen, defaultOpen = false, onOpenChange, ...props }) {
+    const [localOpen, setLocalOpen] = useState(defaultOpen);
+    const { collapsed } = usePanel();
+    const open = !collapsed && (controlledOpen ?? localOpen);
+    return (_jsx(SidebarMenuItem, { children: _jsxs(Collapsible.Root, { open: open, onOpenChange: (value) => {
+                if (controlledOpen === undefined)
+                    setLocalOpen(value);
+                onOpenChange?.(value);
+            }, children: [_jsxs("div", { className: "sprout-sidebar-section-heading", children: [_jsx(SidebarMenuButton, { ...props, children: label }), _jsx(Collapsible.Trigger, { render: _jsx(SidebarMenuAction, { "aria-label": `${open ? "Collapse" : "Expand"} ${label}` }), children: _jsx(ChevronRight, { size: 16, "aria-hidden": "true", className: "sprout-sidebar-chevron" }) })] }), _jsx(Collapsible.Panel, { className: "sprout-sidebar-section-content", inert: !open, children: _jsx(SidebarMenuSub, { children: children }) })] }) }));
+}
+export function SidebarMenuSkeleton({ className, ...props }) {
+    return (_jsxs("div", { ...props, "aria-hidden": "true", className: cn("sprout-sidebar-skeleton", className), children: [_jsx("span", {}), _jsx("span", {})] }));
+}