@ctrl-ui/react 0.8.0 → 0.8.1

package/dist/ui/sidebar-menu.js

@@ -0,0 +1,135 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinIndicator } from "../skin.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { useSidebar } from "./sidebar-provider.js";
+import { TrackHighlight } from "../extensions/track-highlight.js";
+import { createContext, useContext } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/ui/sidebar-menu.tsx
+const sidebarMenuButtonVariants = ["default", "outline"];
+const sidebarMenuButtonSizes = [
+	"default",
+	"sm",
+	"lg"
+];
+function SidebarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "group",
+		className: cn("relative flex w-full min-w-0 flex-col", className),
+		...props
+	});
+}
+function SidebarGroupLabel({ className, render, children, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "group-label",
+			className: cn("flex h-[var(--control-h-sm)] shrink-0 items-center [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:invisible group-data-[collapsible=icon]:-mt-[var(--control-h-sm)] group-data-[collapsible=icon]:opacity-0", className),
+			children
+		}
+	});
+}
+const SidebarMenuContext = createContext("none");
+function SidebarMenu({ className, indicator, style, children, ...props }) {
+	const resolvedIndicator = indicator ?? skinIndicator("sidebar") ?? "none";
+	const hasHighlight = resolvedIndicator !== "none";
+	const list = /* @__PURE__ */ jsx("ul", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "menu",
+		"data-indicator": resolvedIndicator,
+		className: cn("flex min-w-0 flex-col", hasHighlight ? void 0 : className),
+		style: hasHighlight ? void 0 : style,
+		...props,
+		children: /* @__PURE__ */ jsx(SidebarMenuContext.Provider, {
+			value: resolvedIndicator,
+			children
+		})
+	});
+	if (!hasHighlight) return list;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "menu-track",
+		"data-indicator": resolvedIndicator,
+		"data-track": resolvedIndicator,
+		className: cn("relative isolate", className),
+		style,
+		children: [list, /* @__PURE__ */ jsx(TrackHighlight, {})]
+	});
+}
+function SidebarMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "menu-item",
+		className: cn("group/menu-item relative", className),
+		...props
+	});
+}
+const sidebarMenuButtonClasses = cva("peer/menu-button flex w-full items-center overflow-hidden text-start group-data-[collapsible=icon]:px-0! disabled:pointer-events-none aria-disabled:pointer-events-none [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: null,
+			outline: null
+		},
+		size: {
+			default: "group-data-[collapsible=icon]:size-[var(--control-h-md)]!",
+			sm: "group-data-[collapsible=icon]:size-[var(--control-h-sm)]!",
+			lg: "group-data-[collapsible=icon]:size-[var(--control-h-lg)]!"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function SidebarMenuButton({ render, isActive = false, variant = "default", size = "default", tooltip, className, children, ...props }) {
+	const { isMobile, state } = useSidebar();
+	const indicator = useContext(SidebarMenuContext);
+	const button = useRender({
+		defaultTagName: "button",
+		render,
+		props: {
+			type: "button",
+			...props,
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "menu-button",
+			"data-size": size,
+			"data-variant": variant,
+			"data-active": isActive || void 0,
+			"data-track-item": indicator !== "none" ? "" : void 0,
+			className: cn(sidebarMenuButtonClasses({
+				variant,
+				size
+			}), className),
+			children
+		}
+	});
+	if (!tooltip) return button;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "right",
+		align: "center",
+		hidden: state !== "collapsed" || isMobile,
+		children: tooltip
+	})] });
+}
+function SidebarMenuSub({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SidebarMenu, {
+		"data-submenu": "",
+		className: cn("group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+}
+//#endregion
+export { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants };

package/dist/ui/sidebar-provider.d.ts

@@ -0,0 +1,28 @@
+import { SidebarKnobStyle } from "../knob-contracts/sidebar-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/sidebar-provider.d.ts
+type SidebarStyle = CSSProperties & SidebarKnobStyle & {
+  "--sidebar-width"?: string;
+  "--sidebar-width-icon"?: string;
+};
+type SidebarContextProps = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextProps;
+type SidebarProviderProps = Omit<ComponentProps<"div">, "style"> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  persistOpen?: boolean;
+  keyboardShortcut?: string | null;
+  style?: SidebarStyle;
+};
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange, persistOpen, keyboardShortcut, ref, className, style, children, ...props }: SidebarProviderProps): import("react").JSX.Element;
+//#endregion
+export { SidebarProvider, SidebarProviderProps, SidebarStyle, useSidebar };

package/dist/ui/sidebar-provider.js

@@ -0,0 +1,80 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinSidebarWidth } from "../skin.js";
+import { TooltipProvider } from "./tooltip.js";
+import { SIDEBAR_COOKIE_NAME } from "../control-props.js";
+import { useIsMobile } from "../hooks/use-mobile.js";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/sidebar-provider.tsx
+const SIDEBAR_COOKIE_MAX_AGE = 604800;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const SIDEBAR_MOBILE_BREAKPOINT = 1024;
+const SidebarContext = createContext(null);
+function useSidebar() {
+	const context = useContext(SidebarContext);
+	if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
+	return context;
+}
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, persistOpen = true, keyboardShortcut = SIDEBAR_KEYBOARD_SHORTCUT, ref, className, style, children, ...props }) {
+	const isMobile = useIsMobile(SIDEBAR_MOBILE_BREAKPOINT);
+	const [openMobile, setOpenMobile] = useState(false);
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const open = openProp ?? internalOpen;
+	const setOpen = (value) => {
+		const openState = typeof value === "function" ? value(open) : value;
+		if (onOpenChange) onOpenChange(openState);
+		else setInternalOpen(openState);
+		if (persistOpen) document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+	};
+	const toggleSidebar = () => isMobile ? setOpenMobile((prev) => !prev) : setOpen(!open);
+	const toggleRef = useRef(toggleSidebar);
+	useEffect(() => {
+		toggleRef.current = toggleSidebar;
+	});
+	useEffect(() => {
+		if (keyboardShortcut === null) return;
+		const handleKeyDown = (event) => {
+			if (event.key === keyboardShortcut && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				toggleRef.current();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [keyboardShortcut]);
+	const contextValue = {
+		state: open ? "expanded" : "collapsed",
+		open,
+		setOpen,
+		isMobile,
+		openMobile,
+		setOpenMobile,
+		toggleSidebar
+	};
+	const wrapperStyle = {
+		"--sidebar-width": skinSidebarWidth() ?? SIDEBAR_WIDTH,
+		"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+		...style
+	};
+	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(TooltipProvider, {
+			delay: 0,
+			children: /* @__PURE__ */ jsx("div", {
+				ref,
+				"data-control-ui": "sidebar",
+				"data-control-family": "sidebar",
+				"data-slot": "wrapper",
+				style: wrapperStyle,
+				className: cn("group/sidebar-wrapper flex min-h-svh w-full", className),
+				...props,
+				children
+			})
+		})
+	});
+}
+//#endregion
+export { SidebarProvider, useSidebar };

package/dist/ui/sidebar.d.ts

@@ -1,55 +1,16 @@
-import { RenderProp, SelectionIndicator } from "../control-props.js";
 import { Button } from "./button.js";
 import { SidebarKnobStyle } from "../knob-contracts/sidebar-knobs.js";
-import { CSSProperties, ComponentProps, ReactNode } from "react";
+import { SidebarGroup, SidebarGroupLabel, SidebarGroupLabelProps, SidebarMenu, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarSelectionIndicator, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
+import { SidebarProvider, SidebarProviderProps, SidebarStyle, useSidebar } from "./sidebar-provider.js";
+import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/sidebar.d.ts
-declare const sidebarMenuButtonVariants: readonly ["default", "outline"];
-type SidebarMenuButtonVariant = (typeof sidebarMenuButtonVariants)[number];
-declare const sidebarMenuButtonSizes: readonly ["default", "sm", "lg"];
-type SidebarMenuButtonSize = (typeof sidebarMenuButtonSizes)[number];
 type SidebarRailProps = Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & SidebarKnobStyle;
 };
 type SidebarInsetProps = Omit<ComponentProps<"main">, "style"> & {
   style?: CSSProperties & SidebarKnobStyle;
 };
-type SidebarGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
-  style?: CSSProperties & SidebarKnobStyle;
-} & {
-  render?: RenderProp<ComponentProps<"div">>;
-};
-type SidebarMenuButtonProps = Omit<ComponentProps<"button">, "style"> & {
-  style?: CSSProperties & SidebarKnobStyle;
-} & {
-  render?: RenderProp<ComponentProps<"button">>;
-  isActive?: boolean;
-  tooltip?: ReactNode;
-  variant?: SidebarMenuButtonVariant;
-  size?: SidebarMenuButtonSize;
-};
-/** Exported so blocks can set width through `style` and stay type-checked. */
-type SidebarStyle = CSSProperties & SidebarKnobStyle & {
-  "--sidebar-width"?: string;
-  "--sidebar-width-icon"?: string;
-};
 type SidebarSurfaceStyle = CSSProperties & SidebarKnobStyle;
-type SidebarContextProps = {
-  state: "expanded" | "collapsed";
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  openMobile: boolean;
-  setOpenMobile: (open: boolean) => void;
-  isMobile: boolean;
-  toggleSidebar: () => void;
-};
-declare function useSidebar(): SidebarContextProps;
-type SidebarProviderProps = Omit<ComponentProps<"div">, "style"> & {
-  defaultOpen?: boolean;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  style?: SidebarStyle;
-};
-declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, ref, className, style, children, ...props }: SidebarProviderProps): import("react").JSX.Element;
 declare function Sidebar({ side, variant, collapsible, ref, className, children, style, ...props }: Omit<ComponentProps<"div">, "style"> & {
   side?: "left" | "right";
   variant?: "sidebar" | "floating" | "inset";
@@ -66,23 +27,5 @@ declare function SidebarFooter({ className, ...props }: ComponentProps<"div"> &
   style?: CSSProperties & SidebarKnobStyle;
 }): import("react").JSX.Element;
 declare function SidebarContent({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
-declare function SidebarGroup({ className, ...props }: ComponentProps<"div"> & {
-  style?: CSSProperties & SidebarKnobStyle;
-}): import("react").JSX.Element;
-declare function SidebarGroupLabel({ className, render, children, ...props }: SidebarGroupLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-type SidebarSelectionIndicator = SelectionIndicator;
-declare function SidebarMenu({ className, indicator, children, ...props }: ComponentProps<"ul"> & {
-  /**
-   * `slide` replaces per-row backgrounds with one pill that glides to hovered or active item.
-   * Defaults to ControlUiSkin.indicators.sidebar, else `none`.
-   */
-  indicator?: SidebarSelectionIndicator;
-} & {
-  style?: CSSProperties & SidebarKnobStyle;
-}): import("react").JSX.Element;
-declare function SidebarMenuItem({ className, ...props }: ComponentProps<"li"> & {
-  style?: CSSProperties & SidebarKnobStyle;
-}): import("react").JSX.Element;
-declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, children, ...props }: SidebarMenuButtonProps): import("react").JSX.Element;
 //#endregion
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarGroupLabelProps, SidebarHeader, SidebarInset, SidebarInsetProps, SidebarMenu, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuItem, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailProps, SidebarSelectionIndicator, SidebarStyle, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarHeader, SidebarInset, SidebarInsetProps, SidebarMenu, SidebarMenuButton, type SidebarMenuButtonProps, type SidebarMenuButtonSize, type SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarRailProps, type SidebarSelectionIndicator, type SidebarStyle, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };

package/dist/ui/sidebar.js

@@ -1,100 +1,21 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinIndicator, skinSidebarLayout, skinSidebarWidth } from "../skin.js";
+import { skinSidebarLayout } from "../skin.js";
 import { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
-import { SIDEBAR_COOKIE_NAME } from "../control-props.js";
-import { useIsMobile } from "../hooks/use-mobile.js";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
-import { Suspense, createContext, lazy, useContext, useEffect, useRef, useState } from "react";
-import { useRender } from "@base-ui/react/use-render";
+import { SidebarProvider, useSidebar } from "./sidebar-provider.js";
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { PanelLeftIcon } from "lucide-react";
-import { cva } from "class-variance-authority";
 //#region src/ui/sidebar.tsx
-const sidebarMenuButtonVariants = ["default", "outline"];
-const sidebarMenuButtonSizes = [
-	"default",
-	"sm",
-	"lg"
-];
-const TrackHighlight = lazy(() => import("../extensions/track-highlight.js").then((module) => ({ default: module.TrackHighlight })));
-const SIDEBAR_COOKIE_MAX_AGE = 604800;
-const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem";
-const SIDEBAR_KEYBOARD_SHORTCUT = "b";
-const SIDEBAR_MOBILE_BREAKPOINT = 1024;
 const sidebarTriggerWidth = {
 	xs: "w-[var(--control-h-xs)]",
 	sm: "w-[var(--control-h-sm)]",
 	md: "w-[var(--control-h-md)]",
 	lg: "w-[var(--control-h-lg)]"
 };
-const SidebarContext = createContext(null);
-function useSidebar() {
-	const context = useContext(SidebarContext);
-	if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
-	return context;
-}
-function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, ref, className, style, children, ...props }) {
-	const isMobile = useIsMobile(SIDEBAR_MOBILE_BREAKPOINT);
-	const [openMobile, setOpenMobile] = useState(false);
-	const [_open, _setOpen] = useState(defaultOpen);
-	const open = openProp ?? _open;
-	const setOpen = (value) => {
-		const openState = typeof value === "function" ? value(open) : value;
-		if (setOpenProp) setOpenProp(openState);
-		else _setOpen(openState);
-		document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-	};
-	const toggleSidebar = () => isMobile ? setOpenMobile((prev) => !prev) : setOpen(!open);
-	const toggleRef = useRef(toggleSidebar);
-	useEffect(() => {
-		toggleRef.current = toggleSidebar;
-	});
-	useEffect(() => {
-		const handleKeyDown = (event) => {
-			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-				event.preventDefault();
-				toggleRef.current();
-			}
-		};
-		window.addEventListener("keydown", handleKeyDown);
-		return () => window.removeEventListener("keydown", handleKeyDown);
-	}, []);
-	const contextValue = {
-		state: open ? "expanded" : "collapsed",
-		open,
-		setOpen,
-		isMobile,
-		openMobile,
-		setOpenMobile,
-		toggleSidebar
-	};
-	const wrapperStyle = {
-		"--sidebar-width": skinSidebarWidth() ?? SIDEBAR_WIDTH,
-		"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-		...style
-	};
-	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
-		value: contextValue,
-		children: /* @__PURE__ */ jsx(TooltipProvider, {
-			delay: 0,
-			children: /* @__PURE__ */ jsx("div", {
-				ref,
-				"data-control-ui": "sidebar",
-				"data-control-family": "sidebar",
-				"data-slot": "wrapper",
-				style: wrapperStyle,
-				className: cn("group/sidebar-wrapper flex min-h-svh w-full", className),
-				...props,
-				children
-			})
-		})
-	});
-}
 function Sidebar({ side = "left", variant, collapsible = "offcanvas", ref, className, children, style, ...props }) {
 	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 	const resolvedVariant = variant ?? skinSidebarLayout() ?? "sidebar";
@@ -118,11 +39,6 @@ function Sidebar({ side = "left", variant, collapsible = "offcanvas", ref, class
 			open: openMobile,
 			onOpenChange: setOpenMobile,
 			children: /* @__PURE__ */ jsxs(SheetContent, {
-				ref,
-				"data-control-ui": "sidebar",
-				"data-control-family": "sidebar",
-				"data-slot": "root",
-				"data-surface": "panel",
 				side,
 				className: "w-(--sidebar-width) gap-0 p-0",
 				style: mobileSheetStyle,
@@ -130,11 +46,23 @@ function Sidebar({ side = "left", variant, collapsible = "offcanvas", ref, class
 					className: "sr-only",
 					children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
 				}), /* @__PURE__ */ jsx("div", {
+					ref,
 					"data-control-ui": "sidebar",
 					"data-control-family": "sidebar",
-					"data-slot": "inner",
-					className: "flex h-full w-full flex-col",
-					children
+					"data-slot": "root",
+					"data-surface": "panel",
+					"data-mobile": "",
+					"data-side": side,
+					className: cn("flex min-h-0 flex-1 flex-col", className),
+					style,
+					...props,
+					children: /* @__PURE__ */ jsx("div", {
+						"data-control-ui": "sidebar",
+						"data-control-family": "sidebar",
+						"data-slot": "inner",
+						className: "flex min-h-0 flex-1 flex-col",
+						children
+					})
 				})]
 			})
 		});
@@ -173,11 +101,13 @@ function Sidebar({ side = "left", variant, collapsible = "offcanvas", ref, class
 	});
 }
 function SidebarTrigger({ className, onClick, size = "sm", ...props }) {
-	const { toggleSidebar } = useSidebar();
+	const { toggleSidebar, isMobile, openMobile, open } = useSidebar();
 	return /* @__PURE__ */ jsxs(Button, {
 		"data-control-ui": "sidebar",
 		"data-slot": "trigger",
+		"data-sidebar-trigger": "",
 		variant: "ghost",
+		"aria-expanded": isMobile ? openMobile : open,
 		size,
 		className: cn(sidebarTriggerWidth[size], "px-0", className),
 		onClick: (event) => {
@@ -211,7 +141,7 @@ function SidebarInset({ className, ...props }) {
 		"data-control-ui": "sidebar",
 		"data-control-family": "sidebar",
 		"data-slot": "inset",
-		className: cn("relative flex w-full flex-1 flex-col", className),
+		className: cn("relative flex min-w-0 w-full flex-1 flex-col", className),
 		...props
 	});
 }
@@ -249,114 +179,5 @@ function SidebarContent({ className, children, ...props }) {
 		})
 	});
 }
-function SidebarGroup({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "sidebar",
-		"data-control-family": "sidebar",
-		"data-slot": "group",
-		className: cn("relative flex w-full min-w-0 flex-col", className),
-		...props
-	});
-}
-function SidebarGroupLabel({ className, render, children, ...props }) {
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: {
-			...props,
-			"data-control-ui": "sidebar",
-			"data-control-family": "sidebar",
-			"data-slot": "group-label",
-			className: cn("flex h-[var(--control-h-sm)] shrink-0 items-center [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-[var(--control-h-sm)] group-data-[collapsible=icon]:opacity-0", className),
-			children
-		}
-	});
-}
-const SidebarMenuContext = createContext("none");
-function SidebarMenu({ className, indicator, children, ...props }) {
-	const resolvedIndicator = indicator ?? skinIndicator("sidebar") ?? "none";
-	const sliding = resolvedIndicator === "slide";
-	const list = /* @__PURE__ */ jsx("ul", {
-		"data-control-ui": "sidebar",
-		"data-control-family": "sidebar",
-		"data-slot": "menu",
-		"data-indicator": resolvedIndicator,
-		className: cn("flex w-full min-w-0 flex-col", sliding ? void 0 : className),
-		...props,
-		children: /* @__PURE__ */ jsx(SidebarMenuContext.Provider, {
-			value: resolvedIndicator,
-			children
-		})
-	});
-	if (!sliding) return list;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-control-ui": "sidebar",
-		"data-control-family": "sidebar",
-		"data-slot": "menu-track",
-		"data-indicator": resolvedIndicator,
-		className: cn("relative isolate", className),
-		children: [/* @__PURE__ */ jsx(Suspense, {
-			fallback: null,
-			children: /* @__PURE__ */ jsx(TrackHighlight, {
-				itemSelector: "[data-control-ui=\"sidebar\"][data-slot=\"menu-button\"]",
-				activeSelector: "[data-control-ui=\"sidebar\"][data-slot=\"menu-button\"][data-active]"
-			})
-		}), list]
-	});
-}
-function SidebarMenuItem({ className, ...props }) {
-	return /* @__PURE__ */ jsx("li", {
-		"data-control-ui": "sidebar",
-		"data-control-family": "sidebar",
-		"data-slot": "menu-item",
-		className: cn("group/menu-item relative", className),
-		...props
-	});
-}
-const sidebarMenuButtonClasses = cva("peer/menu-button flex w-full items-center overflow-hidden group-data-[collapsible=icon]:px-0! disabled:pointer-events-none aria-disabled:pointer-events-none [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
-	variants: {
-		variant: {
-			default: null,
-			outline: null
-		},
-		size: {
-			default: "group-data-[collapsible=icon]:size-[var(--control-h-md)]!",
-			sm: "group-data-[collapsible=icon]:size-[var(--control-h-sm)]!",
-			lg: "group-data-[collapsible=icon]:size-[var(--control-h-lg)]!"
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default"
-	}
-});
-function SidebarMenuButton({ render, isActive = false, variant = "default", size = "default", tooltip, className, children, ...props }) {
-	const { isMobile, state } = useSidebar();
-	const button = useRender({
-		defaultTagName: "button",
-		render,
-		props: {
-			...props,
-			"data-control-ui": "sidebar",
-			"data-control-family": "sidebar",
-			"data-slot": "menu-button",
-			"data-size": size,
-			"data-variant": variant,
-			"data-active": isActive || void 0,
-			className: cn(sidebarMenuButtonClasses({
-				variant,
-				size
-			}), className),
-			children
-		}
-	});
-	if (!tooltip) return button;
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipContent, {
-		side: "right",
-		align: "center",
-		hidden: state !== "collapsed" || isMobile,
-		children: tooltip
-	})] });
-}
 //#endregion
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarProvider, SidebarRail, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };

package/dist/ui/table-of-contents.js

@@ -12,9 +12,6 @@ const tableOfContentsVariants = [
 const DETECTION_MARGIN = "-80px 0px -20% 0px";
 const TOC_ITEM_SELECTOR = "[data-control-ui=\"table-of-contents\"][data-slot=\"item\"]";
 const TOC_ACTIVE_SELECTOR = "[data-control-ui=\"table-of-contents\"][data-slot=\"item\"][data-active]";
-const tableOfContentsItemClass = "block";
-const tableOfContentsHighlightClass = "";
-const tableOfContentsTrailClass = "absolute inset-y-0 left-0 w-0.5";
 function getScrollContainer(el) {
 	let node = el.parentElement;
 	while (node) {
@@ -91,8 +88,6 @@ function TableOfContents({ items, label = "On this page", variant = "both", clas
 	const normalizedItems = normalizeItems(items, Math.min(...collectLevels(items), 2));
 	const targetIds = flattenItems(normalizedItems).map((item) => item.href.replace(/^#/, ""));
 	const activeSet = activeIdsInRange(useVisibleSections(targetIds), targetIds);
-	const railStyle = style;
-	const highlightStyle = style;
 	if (items.length === 0) return null;
 	return /* @__PURE__ */ jsxs("nav", {
 		"data-control-ui": "table-of-contents",
@@ -119,8 +114,7 @@ function TableOfContents({ items, label = "On this page", variant = "both", clas
 					"data-control-ui": "table-of-contents",
 					"data-control-family": "table-of-contents",
 					"data-slot": "rail",
-					className: "pointer-events-none absolute inset-y-0 left-0 -z-20 w-px",
-					style: railStyle
+					className: "pointer-events-none absolute inset-y-0 left-0 -z-20 w-px"
 				}),
 				/* @__PURE__ */ jsx(TrackHighlight, {
 					"data-variant": variant,
@@ -128,14 +122,12 @@ function TableOfContents({ items, label = "On this page", variant = "both", clas
 					activeSelector: TOC_ACTIVE_SELECTOR,
 					range: true,
 					followHover: false,
-					style: highlightStyle,
-					className: tableOfContentsHighlightClass,
 					children: variant !== "background" && /* @__PURE__ */ jsx("div", {
 						"aria-hidden": true,
 						"data-control-ui": "table-of-contents",
 						"data-control-family": "table-of-contents",
 						"data-slot": "trail",
-						className: tableOfContentsTrailClass
+						className: "absolute inset-y-0 left-0 w-0.5"
 					})
 				}),
 				/* @__PURE__ */ jsx(TocList, {
@@ -167,7 +159,7 @@ function TocList({ items, activeSet, variant, root = false }) {
 				"data-depth": item.depth,
 				"aria-current": isActive ? "location" : void 0,
 				href: item.href,
-				className: tableOfContentsItemClass,
+				className: "block",
 				children: item.label
 			}), item.children && /* @__PURE__ */ jsx(TocList, {
 				items: item.children,