@ctrl-ui/react 0.9.17 → 0.9.18

package/dist/ui/sidebar-menu.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
-import { SidebarSurfaceContext, useSidebar } from "./sidebar-provider.js";
+import { SidebarIconRailContext, SidebarSurfaceContext, useSidebarIconOnly } from "./sidebar-provider.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
 import { createContext, useContext, useRef, useState } from "react";
 import { useRender } from "@base-ui/react/use-render";
@@ -111,9 +111,9 @@ function SidebarMenuBadge({ className, ...props }) {
 	});
 }
 function SidebarMenuButton({ render, isActive = false, variant = "default", size = "default", tooltip, className, children, ref, ...props }) {
-	const { isMobile, state } = useSidebar();
 	const surface = useContext(SidebarSurfaceContext);
-	const tooltipEnabled = !isMobile && state === "collapsed" && surface?.collapsible === "icon";
+	const inIconRail = useContext(SidebarIconRailContext);
+	const iconOnly = useSidebarIconOnly();
 	const indicator = useContext(SidebarMenuContext);
 	const buttonRef = useRef(null);
 	const [textLabel, setTextLabel] = useState("");
@@ -137,16 +137,16 @@ function SidebarMenuButton({ render, isActive = false, variant = "default", size
 			children
 		}
 	});
-	if (!tooltip && surface?.collapsible !== "icon") return button;
+	if (!tooltip && !inIconRail && surface?.collapsible !== "icon") return button;
 	return /* @__PURE__ */ jsxs(Tooltip, {
-		disabled: !tooltipEnabled,
+		disabled: !iconOnly,
 		onOpenChange: (open) => {
 			if (open && !tooltip) setTextLabel(buttonRef.current?.textContent?.trim() ?? "");
 		},
 		children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipContent, {
 			side: surface?.side === "right" ? "inline-start" : "inline-end",
 			align: "center",
-			hidden: !tooltipEnabled,
+			hidden: !iconOnly,
 			children: tooltip ?? textLabel
 		})]
 	});

package/dist/ui/sidebar-mobile.js

@@ -2,9 +2,9 @@
 import { cn } from "../lib/cn.js";
 import { useSidebar, useSidebarElements } from "./sidebar-provider.js";
 import { SidebarMenuButton } from "./sidebar-menu.js";
+import { MenuIcon } from "lucide-react";
 import { useRender } from "@base-ui/react/use-render";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { MenuIcon } from "lucide-react";
 //#region src/ui/sidebar-mobile.tsx
 function SidebarMobileNav({ variant = "bar", "aria-label": label = "Mobile navigation", className, style, ...props }) {
 	const { layout } = useSidebar();

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

@@ -37,12 +37,14 @@ export declare const SidebarSurfaceContext: import("react").Context<{
   collapsible: "offcanvas" | "icon" | "none";
   railContainer: HTMLDivElement | null;
 } | null>;
+export declare const SidebarIconRailContext: import("react").Context<boolean>;
 export declare function useSidebarElements(): SidebarElements;
 export declare function useSidebarSurface(): {
   side: "left" | "right";
   collapsible: "offcanvas" | "icon" | "none";
   railContainer: HTMLDivElement | null;
 };
+export declare function useSidebarIconOnly(): boolean;
 export declare function useSidebar(): SidebarContextProps;
 export type SidebarProviderProps = Omit<ComponentProps<"div">, "style"> & {
   defaultOpen?: boolean;

package/dist/ui/sidebar-provider.js

@@ -12,6 +12,7 @@ const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 const SIDEBAR_MOBILE_BREAKPOINT = "--breakpoint-sidebar";
 const SidebarElementsContext = createContext(null);
 const SidebarSurfaceContext = createContext(null);
+const SidebarIconRailContext = createContext(false);
 function useSidebarElements() {
 	const elements = useContext(SidebarElementsContext);
 	if (!elements) throw new Error("Sidebar parts must be used within a SidebarProvider.");
@@ -22,6 +23,11 @@ function useSidebarSurface() {
 	if (!surface) throw new Error("SidebarRail must be used within a Sidebar.");
 	return surface;
 }
+function useSidebarIconOnly() {
+	const { isMobile, state } = useSidebar();
+	const surface = useContext(SidebarSurfaceContext);
+	return useContext(SidebarIconRailContext) || !isMobile && state === "collapsed" && surface?.collapsible === "icon";
+}
 function focusOutsideCollapsedContent({ offcanvasRef, railRef, triggerRef }) {
 	const container = offcanvasRef.current;
 	if (!container?.contains(document.activeElement)) return;
@@ -157,4 +163,4 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, def
 	});
 }
 //#endregion
-export { SidebarProvider, SidebarSurfaceContext, useSidebar, useSidebarElements, useSidebarSurface };
+export { SidebarIconRailContext, SidebarProvider, SidebarSurfaceContext, useSidebar, useSidebarElements, useSidebarIconOnly, useSidebarSurface };

package/dist/ui/sidebar.d.ts

@@ -19,6 +19,16 @@ export type SidebarInsetProps = Omit<ComponentProps<"main">, "style" | "id"> & {
   style?: CSSProperties & SidebarKnobStyle;
 };
 type SidebarSurfaceStyle = CSSProperties & SidebarKnobStyle;
+export type SidebarIconRailLayer = "sidebar" | "raised";
+export type SidebarPanelLayer = "sidebar" | "raised" | "content";
+export type SidebarIconRailProps = Omit<ComponentProps<"div">, "style"> & {
+  layer?: SidebarIconRailLayer;
+  style?: SidebarSurfaceStyle;
+};
+export type SidebarPanelProps = Omit<ComponentProps<"div">, "style"> & {
+  layer?: SidebarPanelLayer;
+  style?: SidebarSurfaceStyle;
+};
 export type SidebarProps = Omit<ComponentProps<"div">, "style"> & {
   side?: "left" | "right";
   variant?: SidebarLayout;
@@ -40,6 +50,8 @@ export declare function SidebarHeader({ className, divider, ...props }: Componen
 export declare function SidebarFooter({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & SidebarKnobStyle;
 }): import("react").JSX.Element;
+export declare function SidebarIconRail({ layer, className, ...props }: SidebarIconRailProps): import("react").JSX.Element;
+export declare function SidebarPanel({ layer, className, ...props }: SidebarPanelProps): import("react").JSX.Element;
 export declare function SidebarContent({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
 //#endregion
 export { SidebarGroup, SidebarGroupContent, type SidebarGroupContentProps, SidebarGroupLabel, type SidebarGroupLabelProps, type SidebarLayoutMode, SidebarMenu, SidebarMenuAction, type SidebarMenuActionProps, SidebarMenuBadge, type SidebarMenuBadgeProps, SidebarMenuButton, type SidebarMenuButtonProps, type SidebarMenuButtonSize, type SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarMobileNav, SidebarMobileNavItem, type SidebarMobileNavProps, SidebarMobileTrigger, type SidebarMobileTriggerProps, SidebarProvider, type SidebarProviderProps, type SidebarSelectionIndicator, type SidebarStyle, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };

package/dist/ui/sidebar.js

@@ -5,14 +5,14 @@ import { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";
 import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle } from "./drawer.js";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "./sheet.js";
-import { SidebarProvider, SidebarSurfaceContext, useSidebar, useSidebarElements, useSidebarSurface } from "./sidebar-provider.js";
+import { SidebarIconRailContext, SidebarProvider, SidebarSurfaceContext, useSidebar, useSidebarElements, useSidebarIconOnly, useSidebarSurface } from "./sidebar-provider.js";
 import { SidebarResizeRail } from "./sidebar-resize-rail.js";
 import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
 import { SidebarMobileNav, SidebarMobileNavItem, SidebarMobileTrigger } from "./sidebar-mobile.js";
+import { PanelLeftIcon } from "lucide-react";
 import { useState } from "react";
 import { useRender } from "@base-ui/react/use-render";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { PanelLeftIcon } from "lucide-react";
 import { createPortal } from "react-dom";
 //#region src/ui/sidebar.tsx
 const SIDEBAR_WIDTH_MOBILE = "18rem";
@@ -58,7 +58,7 @@ function SidebarSurface({ variant, mobileVariant = "sheet", label = "Navigation"
 				"data-control-ui": "sidebar",
 				"data-control-family": "sidebar",
 				"data-slot": "inner",
-				className: "flex h-full w-full flex-col",
+				className: "flex h-full w-full",
 				inert: state === "collapsed" && collapsible === "offcanvas",
 				children
 			}), /* @__PURE__ */ jsx("div", {
@@ -85,7 +85,7 @@ function SidebarSurface({ variant, mobileVariant = "sheet", label = "Navigation"
 		"data-surface": "panel",
 		"data-variant": resolvedVariant,
 		"data-side": side,
-		className: cn("group relative flex h-full w-(--sidebar-width) flex-col", className),
+		className: cn("group relative flex h-full w-(--sidebar-width)", className),
 		style,
 		...props,
 		children: [children, /* @__PURE__ */ jsx("div", {
@@ -137,7 +137,7 @@ function SidebarMobileSurface({ mobileVariant, label, variant, ref, className, c
 			"data-control-ui": "sidebar",
 			"data-control-family": "sidebar",
 			"data-slot": "inner",
-			className: "flex min-h-0 flex-1 flex-col",
+			className: "flex min-h-0 flex-1",
 			children
 		})
 	});
@@ -300,10 +300,35 @@ function SidebarFooter({ className, ...props }) {
 		...props
 	});
 }
-function SidebarContent({ className, children, ...props }) {
-	const { state, isMobile } = useSidebar();
+function SidebarIconRail({ layer = "sidebar", className, ...props }) {
+	return /* @__PURE__ */ jsx(SidebarIconRailContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "icon-rail",
+			"data-layer": layer,
+			"data-collapsible": "icon",
+			className: cn("group flex min-h-0 flex-col", className),
+			...props
+		})
+	});
+}
+function SidebarPanel({ layer = "sidebar", className, ...props }) {
+	const { isMobile, state } = useSidebar();
 	const { collapsible } = useSidebarSurface();
-	const iconOnly = !isMobile && state === "collapsed" && collapsible === "icon";
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "panel",
+		"data-layer": layer,
+		inert: !isMobile && state === "collapsed" && collapsible === "icon",
+		className: cn("flex min-h-0 min-w-0 flex-col", className),
+		...props
+	});
+}
+function SidebarContent({ className, children, ...props }) {
+	const iconOnly = useSidebarIconOnly();
 	return /* @__PURE__ */ jsx(ScrollArea, {
 		"data-control-ui": "sidebar",
 		"data-slot": "content",
@@ -322,4 +347,4 @@ function SidebarContent({ className, children, ...props }) {
 	});
 }
 //#endregion
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMobileNav, SidebarMobileNavItem, SidebarMobileTrigger, SidebarProvider, SidebarRail, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarIconRail, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMobileNav, SidebarMobileNavItem, SidebarMobileTrigger, SidebarPanel, SidebarProvider, SidebarRail, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };

package/dist/ui/spinner.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/cn.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Loader2 } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/spinner.tsx
 function Spinner({ size = "sm", label = "Loading", className, ...props }) {
 	return /* @__PURE__ */ jsxs("span", {

package/dist/ui/stepper.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { CheckIcon, CircleAlertIcon } from "lucide-react";
 import { createContext, useContext, useEffect, useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckIcon, CircleAlertIcon } from "lucide-react";
 //#region src/ui/stepper.tsx
 const StepperContext = createContext(null);
 function useStepper() {

package/dist/ui/toast.js

@@ -4,8 +4,8 @@ import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { PopupCloseButton } from "../popup-parts.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { CircleCheckIcon, CircleXIcon, InfoIcon, TriangleAlertIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Toast } from "@base-ui/react/toast";
 //#region src/ui/toast.tsx
 const toastManager = Toast.createToastManager();

package/dist/ui/tree.js

@@ -2,10 +2,10 @@
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
+import { ChevronRightIcon } from "lucide-react";
 import { Children, createContext, isValidElement, useContext, useEffect, useId, useRef, useState } from "react";
 import { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRightIcon } from "lucide-react";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/ui/tree.tsx
 const TYPEAHEAD_TIMEOUT = 500;

package/dist/user-ask.js

@@ -4,9 +4,9 @@ import { Button } from "./ui/button.js";
 import { LiveStatus } from "./ui/live-status.js";
 import { Kbd } from "./ui/kbd.js";
 import { useUserAsk } from "./hooks/use-user-ask.js";
+import { Check, ChevronLeft, ChevronRight, PencilLine } from "lucide-react";
 import { createContext, useContext, useEffect, useId, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Check, ChevronLeft, ChevronRight, PencilLine } from "lucide-react";
 //#region src/user-ask.tsx
 const UserAskContext = createContext(null);
 function useUserAskContext() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.9.17",
+  "version": "0.9.18",
   "description": "100+ React components for Tailwind CSS and shadcn/ui: pickers, trees, editors, canvases, app templates, and AI chat surfaces, with neutral defaults and consumer-owned themes.",
   "keywords": [
     "react",