beez-ui 0.9.0 → 0.10.0

package/dist/components/filter-presets-bar.d.ts

@@ -39,6 +39,8 @@ export interface FilterPresetSaveButtonProps {
     /** Saves the current query under the given name. Returns `false` when there is no query to save. */
     onSaveCurrentQuery: (presetName: string) => boolean;
     labels?: Partial<FilterPresetLabels>;
+    /** Classes of the icon button, for example to adapt it to the action slot of an input. */
+    className?: string;
 }
 /**
  * Compact icon button that saves the current query as a named preset. Fits the action slot of
@@ -46,7 +48,7 @@ export interface FilterPresetSaveButtonProps {
  * @param props - Save availability, save callback and optional labels.
  * @returns The button and its naming popover.
  */
-export declare function FilterPresetSaveButton({ canSaveCurrentQuery, onSaveCurrentQuery, labels }: FilterPresetSaveButtonProps): import("react").JSX.Element;
+export declare function FilterPresetSaveButton({ canSaveCurrentQuery, onSaveCurrentQuery, labels, className }: FilterPresetSaveButtonProps): import("react").JSX.Element;
 export interface FilterPresetsBarProps {
     presets: readonly FilterPreset[];
     /** Qualifiers of the filter bar, offered as suggestions while editing a preset query. */

package/dist/components/filter-presets-bar.js

@@ -74,8 +74,8 @@ const CHIP_ICON_BUTTON_CLASS_NAME = "inline-flex cursor-pointer items-center bor
 * @returns The button and its naming popover.
 */
 export function FilterPresetSaveButton(t0) {
-	const $ = _c(45);
-	const { canSaveCurrentQuery, onSaveCurrentQuery, labels } = t0;
+	const $ = _c(46);
+	const { canSaveCurrentQuery, onSaveCurrentQuery, labels, className } = t0;
 	let t1;
 	if ($[0] !== labels) {
 		t1 = {
@@ -138,7 +138,7 @@ export function FilterPresetSaveButton(t0) {
 		t5 = $[8];
 	}
 	let t6;
-	if ($[9] !== resolvedLabels.saveAction || $[10] !== t4) {
+	if ($[9] !== className || $[10] !== resolvedLabels.saveAction || $[11] !== t4) {
 		t6 = /* @__PURE__ */ _jsx(TooltipTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ _jsx(PopoverTrigger, {
@@ -146,6 +146,7 @@ export function FilterPresetSaveButton(t0) {
 				children: /* @__PURE__ */ _jsx(Button, {
 					"data-slot": "filter-preset-save-button",
 					"aria-label": resolvedLabels.saveAction,
+					className,
 					disabled: t4,
 					size: "icon-xs",
 					type: "button",
@@ -154,56 +155,57 @@ export function FilterPresetSaveButton(t0) {
 				})
 			})
 		});
-		$[9] = resolvedLabels.saveAction;
-		$[10] = t4;
-		$[11] = t6;
+		$[9] = className;
+		$[10] = resolvedLabels.saveAction;
+		$[11] = t4;
+		$[12] = t6;
 	} else {
-		t6 = $[11];
+		t6 = $[12];
 	}
 	let t7;
-	if ($[12] !== resolvedLabels.saveAction) {
+	if ($[13] !== resolvedLabels.saveAction) {
 		t7 = /* @__PURE__ */ _jsx(TooltipContent, { children: resolvedLabels.saveAction });
-		$[12] = resolvedLabels.saveAction;
-		$[13] = t7;
+		$[13] = resolvedLabels.saveAction;
+		$[14] = t7;
 	} else {
-		t7 = $[13];
+		t7 = $[14];
 	}
 	let t8;
-	if ($[14] !== t6 || $[15] !== t7) {
+	if ($[15] !== t6 || $[16] !== t7) {
 		t8 = /* @__PURE__ */ _jsxs(Tooltip, { children: [t6, t7] });
-		$[14] = t6;
-		$[15] = t7;
-		$[16] = t8;
+		$[15] = t6;
+		$[16] = t7;
+		$[17] = t8;
 	} else {
-		t8 = $[16];
+		t8 = $[17];
 	}
 	let t9;
-	if ($[17] !== nameInputId || $[18] !== resolvedLabels.presetName) {
+	if ($[18] !== nameInputId || $[19] !== resolvedLabels.presetName) {
 		t9 = /* @__PURE__ */ _jsx(Label, {
 			htmlFor: nameInputId,
 			children: resolvedLabels.presetName
 		});
-		$[17] = nameInputId;
-		$[18] = resolvedLabels.presetName;
-		$[19] = t9;
+		$[18] = nameInputId;
+		$[19] = resolvedLabels.presetName;
+		$[20] = t9;
 	} else {
-		t9 = $[19];
+		t9 = $[20];
 	}
 	let t10;
-	if ($[20] !== error) {
+	if ($[21] !== error) {
 		t10 = (event) => {
 			setNameDraft(event.target.value);
 			if (error) {
 				setError(null);
 			}
 		};
-		$[20] = error;
-		$[21] = t10;
+		$[21] = error;
+		$[22] = t10;
 	} else {
-		t10 = $[21];
+		t10 = $[22];
 	}
 	let t11;
-	if ($[22] !== handleConfirmSave) {
+	if ($[23] !== handleConfirmSave) {
 		t11 = (event_0) => {
 			if (event_0.key !== ENTER_KEY) {
 				return;
@@ -211,13 +213,13 @@ export function FilterPresetSaveButton(t0) {
 			event_0.preventDefault();
 			handleConfirmSave();
 		};
-		$[22] = handleConfirmSave;
-		$[23] = t11;
+		$[23] = handleConfirmSave;
+		$[24] = t11;
 	} else {
-		t11 = $[23];
+		t11 = $[24];
 	}
 	let t12;
-	if ($[24] !== nameDraft || $[25] !== nameInputId || $[26] !== resolvedLabels.presetNamePlaceholder || $[27] !== t10 || $[28] !== t11) {
+	if ($[25] !== nameDraft || $[26] !== nameInputId || $[27] !== resolvedLabels.presetNamePlaceholder || $[28] !== t10 || $[29] !== t11) {
 		t12 = /* @__PURE__ */ _jsx(Input, {
 			id: nameInputId,
 			onChange: t10,
@@ -226,29 +228,29 @@ export function FilterPresetSaveButton(t0) {
 			type: "text",
 			value: nameDraft
 		});
-		$[24] = nameDraft;
-		$[25] = nameInputId;
-		$[26] = resolvedLabels.presetNamePlaceholder;
-		$[27] = t10;
-		$[28] = t11;
-		$[29] = t12;
+		$[25] = nameDraft;
+		$[26] = nameInputId;
+		$[27] = resolvedLabels.presetNamePlaceholder;
+		$[28] = t10;
+		$[29] = t11;
+		$[30] = t12;
 	} else {
-		t12 = $[29];
+		t12 = $[30];
 	}
 	let t13;
-	if ($[30] !== error) {
+	if ($[31] !== error) {
 		t13 = error ? /* @__PURE__ */ _jsx("p", {
 			className: ERROR_CLASS_NAME,
 			role: "alert",
 			children: error
 		}) : null;
-		$[30] = error;
-		$[31] = t13;
+		$[31] = error;
+		$[32] = t13;
 	} else {
-		t13 = $[31];
+		t13 = $[32];
 	}
 	let t14;
-	if ($[32] !== handleConfirmSave || $[33] !== resolvedLabels.saveConfirm || $[34] !== resolvedLabels.saveConfirmAriaLabel) {
+	if ($[33] !== handleConfirmSave || $[34] !== resolvedLabels.saveConfirm || $[35] !== resolvedLabels.saveConfirmAriaLabel) {
 		t14 = /* @__PURE__ */ _jsx(Button, {
 			"aria-label": resolvedLabels.saveConfirmAriaLabel,
 			onClick: handleConfirmSave,
@@ -256,15 +258,15 @@ export function FilterPresetSaveButton(t0) {
 			type: "button",
 			children: resolvedLabels.saveConfirm
 		});
-		$[32] = handleConfirmSave;
-		$[33] = resolvedLabels.saveConfirm;
-		$[34] = resolvedLabels.saveConfirmAriaLabel;
-		$[35] = t14;
+		$[33] = handleConfirmSave;
+		$[34] = resolvedLabels.saveConfirm;
+		$[35] = resolvedLabels.saveConfirmAriaLabel;
+		$[36] = t14;
 	} else {
-		t14 = $[35];
+		t14 = $[36];
 	}
 	let t15;
-	if ($[36] !== t12 || $[37] !== t13 || $[38] !== t14 || $[39] !== t9) {
+	if ($[37] !== t12 || $[38] !== t13 || $[39] !== t14 || $[40] !== t9) {
 		t15 = /* @__PURE__ */ _jsxs(PopoverContent, {
 			align: "end",
 			className: FORM_POPOVER_CLASS_NAME,
@@ -275,27 +277,27 @@ export function FilterPresetSaveButton(t0) {
 				t14
 			]
 		});
-		$[36] = t12;
-		$[37] = t13;
-		$[38] = t14;
-		$[39] = t9;
-		$[40] = t15;
+		$[37] = t12;
+		$[38] = t13;
+		$[39] = t14;
+		$[40] = t9;
+		$[41] = t15;
 	} else {
-		t15 = $[40];
+		t15 = $[41];
 	}
 	let t16;
-	if ($[41] !== isOpen || $[42] !== t15 || $[43] !== t8) {
+	if ($[42] !== isOpen || $[43] !== t15 || $[44] !== t8) {
 		t16 = /* @__PURE__ */ _jsxs(Popover, {
 			onOpenChange: handleOpenChange,
 			open: isOpen,
 			children: [t8, t15]
 		});
-		$[41] = isOpen;
-		$[42] = t15;
-		$[43] = t8;
-		$[44] = t16;
+		$[42] = isOpen;
+		$[43] = t15;
+		$[44] = t8;
+		$[45] = t16;
 	} else {
-		t16 = $[44];
+		t16 = $[45];
 	}
 	return t16;
 }

package/dist/components/presence-swap.d.ts

@@ -1,5 +1,5 @@
 /** Cross-fades between states of the same region, such as idle, loading and result. */
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 declare const PRESENCE_SWAP_ELEMENTS: {
     readonly div: import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>;
     readonly span: import("motion/react").ForwardRefComponent<HTMLSpanElement, import("motion/react").HTMLMotionProps<"span">>;

package/dist/components/presence-swap.js

@@ -1,5 +1,7 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
+/** Cross-fades between states of the same region, such as idle, loading and result. */
+import { useState } from "react";
 import { AnimatePresence, motion, useIsPresent } from "motion/react";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
@@ -20,8 +22,12 @@ function PresenceSwapItem(t0) {
 	const { as, className, children } = t0;
 	const MotionElement = PRESENCE_SWAP_ELEMENTS[as];
 	const isPresent = useIsPresent();
+	const [isMountedExiting] = useState(!isPresent);
 	const shouldReduceMotion = usePrefersReducedMotion();
 	const distance = shouldReduceMotion ? 0 : MOTION_CONTENT_DISTANCE;
+	if (isMountedExiting) {
+		return null;
+	}
 	const t1 = isPresent ? undefined : true;
 	const t2 = !isPresent || undefined;
 	let t3;
@@ -98,6 +104,47 @@ function PresenceSwapItem(t0) {
 	return t8;
 }
 /**
+* Gives every key change its own presence key. Motion keeps the exit bookkeeping of a key that
+* already left, so a reused key (loading → error → loading) mounted already exiting would have
+* its removal ignored and stall a `wait` swap forever.
+* @param presenceKey - Key identifying the current state.
+* @returns A key that is never reused within this swap.
+*/
+function usePresenceSwapKey(presenceKey) {
+	const $ = _c(5);
+	let t0;
+	if ($[0] !== presenceKey) {
+		t0 = {
+			presenceKey,
+			generation: 0
+		};
+		$[0] = presenceKey;
+		$[1] = t0;
+	} else {
+		t0 = $[1];
+	}
+	const [current, setCurrent] = useState(t0);
+	if (current.presenceKey !== presenceKey) {
+		const t1 = current.generation + 1;
+		let t2;
+		if ($[2] !== presenceKey || $[3] !== t1) {
+			t2 = {
+				presenceKey,
+				generation: t1
+			};
+			$[2] = presenceKey;
+			$[3] = t1;
+			$[4] = t2;
+		} else {
+			t2 = $[4];
+		}
+		const next = t2;
+		setCurrent(next);
+		return `${next.generation}:${presenceKey}`;
+	}
+	return `${current.generation}:${presenceKey}`;
+}
+/**
 * Swaps keyed content with a short lift-and-fade; the first render is not animated.
 * @param props - Key identifying the current state and its content.
 * @returns The animated content.
@@ -107,6 +154,7 @@ export function PresenceSwap(t0) {
 	const { presenceKey, children, as: t1, className, mode: t2 } = t0;
 	const as = t1 === undefined ? "div" : t1;
 	const mode = t2 === undefined ? "wait" : t2;
+	const itemKey = usePresenceSwapKey(presenceKey);
 	const t3 = as === "span" && "inline-flex items-center";
 	let t4;
 	if ($[0] !== className || $[1] !== t3) {
@@ -118,15 +166,15 @@ export function PresenceSwap(t0) {
 		t4 = $[2];
 	}
 	let t5;
-	if ($[3] !== as || $[4] !== children || $[5] !== presenceKey || $[6] !== t4) {
+	if ($[3] !== as || $[4] !== children || $[5] !== itemKey || $[6] !== t4) {
 		t5 = /* @__PURE__ */ _jsx(PresenceSwapItem, {
 			as,
 			className: t4,
 			children
-		}, presenceKey);
+		}, itemKey);
 		$[3] = as;
 		$[4] = children;
-		$[5] = presenceKey;
+		$[5] = itemKey;
 		$[6] = t4;
 		$[7] = t5;
 	} else {

package/dist/components/sidebar.d.ts

@@ -1,71 +1,158 @@
+/**
+ * Animated application sidebar adapted from beui.dev/components/motion/animated-sidebar: the rail
+ * morphs its width with a spring, labels fade out of the icon rail, a shared pill follows the
+ * hovered and active items, submenus unfold with a stagger, and small screens get a focus-trapped
+ * sheet. Links route through the `BeezUIProvider` adapter and the open state keeps the
+ * `sidebar_state` cookie contract read by server entrypoints.
+ */
 import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-import { Button } from "./button.js";
-import { Input } from "./input.js";
-import { Separator } from "./separator.js";
-import { TooltipContent } from "./tooltip.js";
-type SidebarContextProps = {
-    state: "expanded" | "collapsed";
+import { type HTMLMotionProps } from "motion/react";
+type SidebarState = "expanded" | "collapsed";
+type SidebarSide = "left" | "right";
+type SidebarVariant = "sidebar" | "floating" | "inset";
+type SidebarCollapsible = "offcanvas" | "icon" | "none";
+type SidebarLinkTarget = "_blank" | "_self" | "_parent" | "_top";
+type SidebarContextValue = {
+    isMobile: boolean;
+    layoutId: string;
+    /** Sheet width; the sheet is portaled outside the wrapper that declares the CSS variables. */
+    mobileWidth: string;
     open: boolean;
-    setOpen: (open: boolean) => void;
     openMobile: boolean;
+    reduce: boolean;
+    setOpen: (open: boolean) => void;
     setOpenMobile: (open: boolean) => void;
-    isMobile: boolean;
+    state: SidebarState;
     toggleSidebar: () => void;
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+};
+/**
+ * Reads the sidebar state shared by `SidebarProvider`.
+ * @returns Open state for desktop and mobile, viewport and motion flags, and state setters.
+ */
+declare function useSidebar(): SidebarContextValue;
+type SidebarProviderStyle = React.CSSProperties & {
+    "--sidebar-width"?: string;
+    "--sidebar-width-icon"?: string;
+    "--sidebar-width-mobile"?: string;
 };
-declare function useSidebar(): SidebarContextProps;
-declare function SidebarProvider({ defaultOpen, storageKey, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
+export type SidebarProviderProps = React.ComponentProps<"div"> & {
+    /** Controlled desktop state. */
+    open?: boolean;
+    /** Desktop state before any interaction; server entrypoints pass the `sidebar_state` cookie here. */
     defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Controlled state of the small-screen sheet. */
+    openMobile?: boolean;
+    defaultOpenMobile?: boolean;
+    onOpenMobileChange?: (open: boolean) => void;
     /** Opts into local persistence without changing the shared SSR cookie contract. */
     storageKey?: string;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-}): React.JSX.Element;
-declare function Sidebar({ side, variant, collapsible, className, children, dir, ...props }: React.ComponentProps<"div"> & {
-    side?: "left" | "right";
-    variant?: "sidebar" | "floating" | "inset";
-    collapsible?: "offcanvas" | "icon" | "none";
-}): React.JSX.Element;
-declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
-declare function SidebarRail({ className, ...props }: React.ComponentProps<"button">): React.JSX.Element;
-declare function SidebarInset({ className, ...props }: React.ComponentProps<"main">): React.JSX.Element;
-declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): React.JSX.Element;
+    style?: SidebarProviderStyle;
+};
+/**
+ * Owns the open state of the sidebar, the ⌘B / Ctrl+B shortcut and the layout wrapper.
+ * @param props - Controlled or default state for both viewports, persistence key and wrapper attributes.
+ * @returns The wrapper that lays out the sidebar next to its inset.
+ */
+declare function SidebarProvider({ children, open: openProp, defaultOpen, onOpenChange, openMobile: openMobileProp, defaultOpenMobile, onOpenMobileChange, storageKey, className, style, ...props }: SidebarProviderProps): React.JSX.Element;
+export type SidebarProps = Omit<HTMLMotionProps<"aside">, "children"> & {
+    children?: React.ReactNode;
+    side?: SidebarSide;
+    variant?: SidebarVariant;
+    /** `icon` shrinks to an icon rail, `offcanvas` slides away, `none` stays expanded on every viewport. */
+    collapsible?: SidebarCollapsible;
+    ariaLabel?: string;
+    /** Classes of the inner panel that paints the sidebar surface. */
+    panelClassName?: string;
+};
+/**
+ * Renders the sidebar: a width-morphing rail on desktop and a sheet on small screens.
+ * @param props - Side, variant, collapse mode, accessible name and panel classes.
+ * @returns The desktop rail, the mobile sheet portal, or an always-expanded panel.
+ */
+declare function Sidebar({ side, variant, collapsible, ariaLabel, children, className, panelClassName, style, ...props }: SidebarProps): React.JSX.Element;
+/**
+ * Button that toggles the desktop rail or the mobile sheet; shows a panel icon unless given children.
+ * @param props - Native button attributes.
+ * @returns The toggle button.
+ */
+declare function SidebarTrigger({ children, className, onClick, ref, type, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+/**
+ * Button that closes the sidebar on the current viewport.
+ * @param props - Native button attributes; the content is the consumer's icon or text.
+ * @returns The close button.
+ */
+declare function SidebarClose({ className, onClick, type, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+/**
+ * Thin hit area on the sidebar edge that toggles it with the pointer.
+ * @param props - Native button attributes.
+ * @returns The rail button, outside the tab order.
+ */
+declare function SidebarRail({ className, onClick, type, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+/**
+ * Main content area laid out next to the sidebar.
+ * @param props - Motion-enabled `main` attributes.
+ * @returns The content landmark.
+ */
+declare function SidebarInset({ className, ...props }: HTMLMotionProps<"main">): React.JSX.Element;
 declare function SidebarHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function SidebarFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
 declare function SidebarContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function SidebarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function SidebarGroupLabel({ className, asChild, ...props }: React.ComponentProps<"div"> & {
-    asChild?: boolean;
-}): React.JSX.Element;
-declare function SidebarGroupAction({ className, asChild, ...props }: React.ComponentProps<"button"> & {
-    asChild?: boolean;
-}): React.JSX.Element;
+/** Section heading that fades out of the icon rail and is hidden from assistive technology there. */
+declare function SidebarGroupLabel({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** Menu list whose items share a hover pill that glides between them. */
 declare function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
-declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
-declare const sidebarMenuButtonVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "lg" | "sm" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
-    asChild?: boolean;
-    isActive?: boolean;
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-} & VariantProps<typeof sidebarMenuButtonVariants>): React.JSX.Element;
-declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React.ComponentProps<"button"> & {
-    asChild?: boolean;
-    showOnHover?: boolean;
-}): React.JSX.Element;
-declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<"div"> & {
-    showIcon?: boolean;
-}): React.JSX.Element;
-declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
-declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
-declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React.ComponentProps<"a"> & {
-    asChild?: boolean;
-    size?: "sm" | "md";
+declare function SidebarMenuItem({ className, ...props }: HTMLMotionProps<"li">): React.JSX.Element;
+export type SidebarMenuSubProps = Omit<HTMLMotionProps<"ul">, "children"> & {
+    /** Whether the submenu is unfolded; it never renders inside the icon rail. */
+    open: boolean;
+    children?: React.ReactNode;
+};
+/**
+ * Nested list that unfolds with a clip and staggered items.
+ * @param props - Open state and motion-enabled list attributes.
+ * @returns The submenu while open and the sidebar is expanded.
+ */
+declare function SidebarMenuSub({ open, children, className, ...props }: SidebarMenuSubProps): React.JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: HTMLMotionProps<"li">): React.JSX.Element;
+type SidebarActionProps = {
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    /** Renders a link through the `BeezUIProvider` routing adapter instead of a button. */
+    href?: string;
     isActive?: boolean;
-}): React.JSX.Element;
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };
+    disabled?: boolean;
+    target?: SidebarLinkTarget;
+    rel?: string;
+    onSelect?: () => void;
+    className?: string;
+};
+export type SidebarMenuSubButtonProps = SidebarActionProps & {
+    /** Closes the mobile sheet after selecting; on by default. */
+    closeOnSelect?: boolean;
+};
+/**
+ * Submenu entry; shows a dot when no icon is given.
+ * @param props - Label, icon, link or select handler, active and disabled state.
+ * @returns The submenu link or button.
+ */
+declare function SidebarMenuSubButton({ children, icon, href, isActive, disabled, closeOnSelect, target, rel, onSelect, className, }: SidebarMenuSubButtonProps): React.JSX.Element;
+export type SidebarMenuButtonProps = SidebarActionProps & {
+    /** Trailing content such as a counter, hidden in the icon rail. */
+    badge?: React.ReactNode;
+    /** Marks the button as a submenu toggle and shows a rotating chevron. */
+    ariaExpanded?: boolean;
+    /** Closes the mobile sheet after selecting; defaults to on, except for submenu toggles. */
+    closeOnSelect?: boolean;
+};
+/**
+ * Top-level menu entry: the active one carries a pill that glides between entries, and the label
+ * fades out of the icon rail, leaving a string label as accessible name and native tooltip.
+ * @param props - Label, icon, badge, link or select handler, submenu and active state.
+ * @returns The menu link or button.
+ */
+declare function SidebarMenuButton({ children, icon, badge, href, isActive, ariaExpanded, disabled, closeOnSelect, target, rel, onSelect, className, }: SidebarMenuButtonProps): React.JSX.Element;
+export { Sidebar, SidebarClose, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, useSidebar, };