@signalflare-ai/ui 0.5.0

package/dist/sidebar-DOwBrq57.js

@@ -0,0 +1,964 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { n as useLinkComponent } from "./link-provider-BUZKXaNE.js";
+import { n as TooltipProvider, t as Tooltip } from "./tooltip-Cb7QW-7H.js";
+import React, { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CaretRightIcon, MagnifyingGlassIcon, SidebarSimpleIcon } from "@phosphor-icons/react";
+import { Dialog } from "@base-ui/react/dialog";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/components/sidebar/sidebar.tsx
+/** Sidebar variant definitions mapping layout, collapse, and side options. */
+var SF_SIDEBAR_VARIANTS = {
+	variant: {
+		sidebar: {
+			classes: "",
+			description: "Standard sidebar with border separator"
+		},
+		floating: {
+			classes: "",
+			description: "Floating sidebar with shadow and rounded corners"
+		},
+		inset: {
+			classes: "",
+			description: "Inset sidebar within the content area"
+		}
+	},
+	collapsible: {
+		icon: {
+			classes: "",
+			description: "Collapses to show icons only"
+		},
+		offcanvas: {
+			classes: "",
+			description: "Slides off screen when collapsed"
+		},
+		none: {
+			classes: "",
+			description: "Cannot be collapsed"
+		}
+	},
+	side: {
+		left: {
+			classes: "",
+			description: "Left-aligned sidebar"
+		},
+		right: {
+			classes: "",
+			description: "Right-aligned sidebar"
+		}
+	}
+};
+var SF_SIDEBAR_DEFAULT_VARIANTS = {
+	variant: "sidebar",
+	collapsible: "icon",
+	side: "left"
+};
+var SF_SIDEBAR_STYLING = {
+	width: {
+		expanded: "16rem",
+		icon: "3rem"
+	},
+	mobile: { breakpoint: 768 }
+};
+var SIDEBAR_WIDTH = "16rem";
+var SIDEBAR_WIDTH_ICON = "3rem";
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+	const [isMobile, setIsMobile] = useState(false);
+	useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => setIsMobile(mql.matches);
+		mql.addEventListener("change", onChange);
+		setIsMobile(mql.matches);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return isMobile;
+}
+var SidebarContext = createContext(null);
+/**
+* Hook to access sidebar state and actions from any descendant component.
+*
+* @example
+* ```tsx
+* const { state, open, toggleSidebar, isMobile } = useSidebar();
+* ```
+*
+* @throws Error if used outside a `Sidebar.Provider`.
+*/
+function useSidebar() {
+	const context = useContext(SidebarContext);
+	if (!context) throw new Error("useSidebar must be used within a Sidebar.Provider");
+	return context;
+}
+/**
+* Sidebar context provider. Manages expand/collapse state and mobile detection.
+* Renders a flex wrapper div with CSS custom properties for sidebar width.
+*
+* @example
+* ```tsx
+* <Sidebar.Provider defaultOpen>
+*   <Sidebar>{...}</Sidebar>
+*   <main className="flex-1">{...}</main>
+* </Sidebar.Provider>
+* ```
+*/
+var DEFAULT_WIDTH_PX = 256;
+var MIN_WIDTH_PX = 200;
+var MAX_WIDTH_PX = 480;
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, variant = SF_SIDEBAR_DEFAULT_VARIANTS.variant, side = SF_SIDEBAR_DEFAULT_VARIANTS.side, collapsible = SF_SIDEBAR_DEFAULT_VARIANTS.collapsible, resizable = false, defaultWidth = DEFAULT_WIDTH_PX, minWidth = MIN_WIDTH_PX, maxWidth = MAX_WIDTH_PX, onWidthChange, children, className, style }) {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = useState(false);
+	const [width, setWidthState] = useState(defaultWidth);
+	const [isResizing, setIsResizing] = useState(false);
+	const setWidth = useCallback((newWidth) => {
+		const clamped = Math.min(maxWidth, Math.max(minWidth, newWidth));
+		setWidthState(clamped);
+		onWidthChange?.(clamped);
+	}, [
+		minWidth,
+		maxWidth,
+		onWidthChange
+	]);
+	const [_open, _setOpen] = useState(defaultOpen);
+	const open = openProp ?? _open;
+	const setOpen = useCallback((value) => {
+		const next = typeof value === "function" ? value(open) : value;
+		setOpenProp?.(next);
+		_setOpen(next);
+	}, [setOpenProp, open]);
+	const toggleSidebar = useCallback(() => {
+		if (isMobile) setOpenMobile((prev) => !prev);
+		else setOpen((prev) => !prev);
+	}, [isMobile, setOpen]);
+	const state = open ? "expanded" : "collapsed";
+	const sidebarWidthValue = resizable ? `${width}px` : SIDEBAR_WIDTH;
+	const contextValue = useMemo(() => ({
+		state,
+		open,
+		setOpen,
+		openMobile,
+		setOpenMobile,
+		isMobile,
+		toggleSidebar,
+		variant,
+		side,
+		collapsible,
+		width,
+		resizable,
+		minWidth,
+		maxWidth,
+		isResizing,
+		setIsResizing,
+		setWidth
+	}), [
+		state,
+		open,
+		setOpen,
+		openMobile,
+		setOpenMobile,
+		isMobile,
+		toggleSidebar,
+		variant,
+		side,
+		collapsible,
+		width,
+		resizable,
+		minWidth,
+		maxWidth,
+		isResizing,
+		setIsResizing,
+		setWidth
+	]);
+	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-sidebar-wrapper": "",
+			"data-state": state,
+			"data-side": side,
+			style: {
+				"--sidebar-width": sidebarWidthValue,
+				"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+				...style
+			},
+			className: cn("group/sidebar-wrapper flex min-h-svh w-full", "has-data-[variant=inset]:bg-sf-recessed", isResizing && "select-none", className),
+			children
+		})
+	});
+}
+SidebarProvider.displayName = "Sidebar.Provider";
+/**
+* Main sidebar container. Renders as `<aside>` on desktop, Dialog sheet on mobile.
+* Must be used inside `Sidebar.Provider`.
+*
+* @example
+* ```tsx
+* <Sidebar.Provider>
+*   <Sidebar>
+*     <Sidebar.Header>...</Sidebar.Header>
+*     <Sidebar.Content>...</Sidebar.Content>
+*     <Sidebar.Footer>...</Sidebar.Footer>
+*   </Sidebar>
+* </Sidebar.Provider>
+* ```
+*/
+var SidebarRoot = forwardRef(({ className, children, ...props }, ref) => {
+	const { state, isMobile, openMobile, setOpenMobile, side, variant, collapsible, isResizing, resizable, width } = useSidebar();
+	if (collapsible === "none") return /* @__PURE__ */ jsx("aside", {
+		ref,
+		"data-state": "expanded",
+		"data-side": side,
+		"data-variant": variant,
+		"data-sidebar": "sidebar",
+		style: {
+			width: "var(--sidebar-width)",
+			minWidth: "var(--sidebar-width)",
+			maxWidth: "var(--sidebar-width)"
+		},
+		className: cn("relative flex h-full shrink-0 grow-0 flex-col overflow-hidden bg-sf-base text-sf-default", variant === "sidebar" && (side === "left" ? "border-r border-sf-line" : "border-l border-sf-line"), variant === "floating" && "m-2 rounded-lg border border-sf-line shadow-lg", className),
+		...props,
+		children
+	});
+	if (isMobile) return /* @__PURE__ */ jsx(Dialog.Root, {
+		open: openMobile,
+		onOpenChange: setOpenMobile,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: "fixed inset-0 z-50 bg-black/50 transition-opacity duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0" }), /* @__PURE__ */ jsx(Dialog.Popup, {
+			className: cn("fixed inset-y-0 z-50 flex w-[--sidebar-width] flex-col bg-sf-base p-0", "duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0", side === "left" && "left-0 data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full", side === "right" && "right-0 data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full"),
+			style: {
+				"--sidebar-width": SIDEBAR_WIDTH,
+				transitionProperty: "transform, opacity",
+				transitionTimingFunction: "var(--default-transition-timing-function)"
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				"data-sidebar": "sidebar",
+				"data-mobile": "true",
+				className: cn("flex h-full w-full flex-col bg-sf-base text-sf-default", className),
+				children
+			})
+		})] })
+	});
+	const collapsedWidth = collapsible === "icon" ? "var(--sidebar-width-icon)" : "0px";
+	const expandedWidth = resizable ? `${width}px` : "var(--sidebar-width)";
+	const targetWidth = state === "expanded" ? expandedWidth : collapsedWidth;
+	return /* @__PURE__ */ jsx("aside", {
+		ref,
+		"data-state": state,
+		"data-side": side,
+		"data-variant": variant,
+		"data-collapsible": collapsible,
+		"data-sidebar": "sidebar",
+		style: { width: targetWidth },
+		className: cn("group/sidebar relative flex h-full shrink-0 grow-0 flex-col", "min-w-0 overflow-hidden whitespace-nowrap", "bg-sf-base text-sf-default", "transition-[width] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)] will-change-[width]", "motion-reduce:transition-none", isResizing && "transition-none!", variant === "sidebar" && (side === "left" ? "border-r border-sf-line" : "border-l border-sf-line"), variant === "floating" && "m-2 rounded-lg border border-sf-line shadow-lg", className),
+		...props,
+		children: /* @__PURE__ */ jsx(TooltipProvider, { children })
+	});
+});
+SidebarRoot.displayName = "Sidebar";
+/**
+* Top section of the sidebar. Typically contains a logo, title, and action button.
+*
+* @example
+* ```tsx
+* <Sidebar.Header>
+*   <CloudflareLogo />
+*   <span>Design Engineering</span>
+*   <Button shape="square" icon={CaretUpDownIcon} aria-label="Switch" />
+* </Sidebar.Header>
+* ```
+*/
+var SidebarHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-sidebar": "header",
+	className: cn("flex items-center gap-2 border-b border-sf-line px-2 py-3", "overflow-hidden", "group-data-[state=collapsed]/sidebar:border-b-0", className),
+	...props
+}));
+SidebarHeader.displayName = "Sidebar.Header";
+/**
+* Scrollable middle section of the sidebar. Contains nav groups and menus.
+*
+* @example
+* ```tsx
+* <Sidebar.Content>
+*   <Sidebar.Group>...</Sidebar.Group>
+* </Sidebar.Content>
+* ```
+*/
+var SidebarContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-sidebar": "content",
+	className: cn("flex min-w-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden px-2 py-2", "group-data-[state=collapsed]/sidebar:gap-0 group-data-[state=collapsed]/sidebar:py-0", "group-data-[state=collapsed]/sidebar:overflow-x-hidden", className),
+	...props
+}));
+SidebarContent.displayName = "Sidebar.Content";
+/**
+* Bottom-pinned section of the sidebar. Typically contains toggle button and help actions.
+*
+* @example
+* ```tsx
+* <Sidebar.Footer>
+*   <Sidebar.Trigger />
+*   <Button shape="square" icon={InfoIcon} aria-label="Help" />
+* </Sidebar.Footer>
+* ```
+*/
+var SidebarFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-sidebar": "footer",
+	className: cn("flex min-w-0 flex-col gap-2 border-t border-sf-line px-2 py-2", "group-data-[state=collapsed]/sidebar:border-t-0 group-data-[state=collapsed]/sidebar:py-1", className),
+	...props
+}));
+SidebarFooter.displayName = "Sidebar.Footer";
+var SidebarGroupCollapsibleContext = createContext({
+	isCollapsible: false,
+	isOpen: true
+});
+/**
+* Groups related menu items with an optional label.
+* When `collapsible` is set, wraps content with Base UI Collapsible for
+* animated expand/collapse via the group label.
+*
+* @example Non-collapsible group
+* ```tsx
+* <Sidebar.Group>
+*   <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>
+*   <Sidebar.Menu>...</Sidebar.Menu>
+* </Sidebar.Group>
+* ```
+*
+* @example Collapsible group (requires GroupContent for animation)
+* ```tsx
+* <Sidebar.Group collapsible defaultOpen>
+*   <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>
+*   <Sidebar.GroupContent>
+*     <Sidebar.Menu>...</Sidebar.Menu>
+*   </Sidebar.GroupContent>
+* </Sidebar.Group>
+* ```
+*/
+var SidebarGroup = forwardRef(({ className, collapsible = false, defaultOpen = true, open: openProp, onOpenChange, children, ...props }, ref) => {
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const isOpen = openProp ?? internalOpen;
+	const handleOpenChange = useCallback((newOpen) => {
+		setInternalOpen(newOpen);
+		onOpenChange?.(newOpen);
+	}, [onOpenChange]);
+	const contextValue = useMemo(() => ({
+		isCollapsible: collapsible,
+		isOpen
+	}), [collapsible, isOpen]);
+	const content = /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-sidebar": "group",
+		className: cn("flex min-w-0 flex-col gap-0.5", "group-data-[state=collapsed]/sidebar:gap-0", className),
+		...props,
+		children
+	});
+	if (!collapsible) return /* @__PURE__ */ jsx(SidebarGroupCollapsibleContext.Provider, {
+		value: contextValue,
+		children: content
+	});
+	return /* @__PURE__ */ jsx(SidebarGroupCollapsibleContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Collapsible.Root, {
+			defaultOpen,
+			open: openProp,
+			onOpenChange: handleOpenChange,
+			className: "min-w-0",
+			children: content
+		})
+	});
+});
+SidebarGroup.displayName = "Sidebar.Group";
+/**
+* Section label for a sidebar group (e.g., "Build", "Protect & Connect").
+* Hidden when the sidebar is collapsed to icon-only mode.
+*
+* When used inside a collapsible `Sidebar.Group`, renders as a
+* `Collapsible.Trigger` with an auto-rotating chevron.
+*
+* @example
+* ```tsx
+* <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>
+* ```
+*/
+var SidebarGroupLabel = forwardRef(({ className, children, ...props }, ref) => {
+	const { isCollapsible } = useContext(SidebarGroupCollapsibleContext);
+	if (isCollapsible) return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
+		ref,
+		"data-sidebar": "group-label",
+		className: cn("group/group-label flex w-full cursor-pointer items-center px-3 py-1 text-xs font-medium text-sf-subtle", "group-data-[state=collapsed]/sidebar:hidden", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex-1 truncate text-left",
+			children
+		}), /* @__PURE__ */ jsx(CaretRightIcon, { className: cn("ml-auto size-3 shrink-0 text-sf-subtle transition-transform duration-200", "group-data-[panel-open]/group-label:rotate-90") })]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-sidebar": "group-label",
+		className: cn("truncate px-3 py-1 text-xs font-medium text-sf-subtle", "group-data-[state=collapsed]/sidebar:hidden", className),
+		...props,
+		children
+	});
+});
+SidebarGroupLabel.displayName = "Sidebar.GroupLabel";
+/**
+* Animation wrapper for collapsible group content. Uses CSS grid-rows
+* for smooth height transitions when the group is expanded/collapsed.
+*
+* **Only needed for collapsible groups.** For non-collapsible groups,
+* place `Menu` directly inside `Group` — no wrapper required.
+*
+* @example Collapsible group (GroupContent required)
+* ```tsx
+* <Sidebar.Group collapsible defaultOpen>
+*   <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>
+*   <Sidebar.GroupContent>
+*     <Sidebar.Menu>...</Sidebar.Menu>
+*   </Sidebar.GroupContent>
+* </Sidebar.Group>
+* ```
+*
+* @example Non-collapsible group (no GroupContent needed)
+* ```tsx
+* <Sidebar.Group>
+*   <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>
+*   <Sidebar.Menu>...</Sidebar.Menu>
+* </Sidebar.Group>
+* ```
+*/
+var SidebarGroupContent = forwardRef(({ className, children, ...props }, ref) => {
+	const { isCollapsible, isOpen } = useContext(SidebarGroupCollapsibleContext);
+	if (isCollapsible) return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-sidebar": "group-content",
+		className: cn("grid", "transition-[grid-template-rows] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]", "motion-reduce:transition-none", "grid-rows-[0fr]", isOpen ? "group-data-[state=expanded]/sidebar:grid-rows-[1fr]" : "group-data-[state=expanded]/sidebar:grid-rows-[0fr]", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "overflow-hidden",
+			children
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-sidebar": "group-content",
+		className: cn("flex flex-col", className),
+		...props,
+		children
+	});
+});
+SidebarGroupContent.displayName = "Sidebar.GroupContent";
+/**
+* When `true`, indicates the component is already wrapped in a `MenuItem` `<li>`.
+* `MenuButton` checks this: if `false`, it auto-wraps itself in an `<li>`.
+*/
+var MenuItemContext = createContext(false);
+/**
+* When `true`, indicates the component is already wrapped in a `MenuSubItem` `<li>`.
+* `MenuSubButton` checks this: if `false`, it auto-wraps itself in an `<li>`.
+*/
+var MenuSubItemContext = createContext(false);
+/**
+* Navigation menu list. Renders as `<ul>`.
+*
+* `MenuButton` auto-wraps in `<li>` so `MenuItem` is optional for simple items.
+*
+* @example Simple usage
+* ```tsx
+* <Sidebar.Menu>
+*   <Sidebar.MenuButton icon={HouseIcon} active>Account home</Sidebar.MenuButton>
+*   <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>
+* </Sidebar.Menu>
+* ```
+*
+* @example With explicit MenuItem (needed for MenuAction sibling)
+* ```tsx
+* <Sidebar.Menu>
+*   <Sidebar.MenuItem>
+*     <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>
+*     <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>
+*   </Sidebar.MenuItem>
+* </Sidebar.Menu>
+* ```
+*/
+var SidebarMenu = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("ul", {
+	ref,
+	"data-sidebar": "menu",
+	className: cn("m-0 flex min-w-0 list-none flex-col gap-0.5 p-0", "group-data-[state=collapsed]/sidebar:gap-0", className),
+	...props
+}));
+SidebarMenu.displayName = "Sidebar.Menu";
+/**
+* Individual menu list item. Renders as `<li>`.
+*
+* **Optional when using `MenuButton` directly** — `MenuButton` auto-wraps
+* itself in a `<li>` when not already inside a `MenuItem`. Use `MenuItem`
+* explicitly when you need to place siblings (e.g., `MenuAction`) alongside
+* a `MenuButton`.
+*
+* @example Explicit usage (needed for MenuAction sibling)
+* ```tsx
+* <Sidebar.MenuItem>
+*   <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>
+*   <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>
+* </Sidebar.MenuItem>
+* ```
+*/
+var SidebarMenuItem = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(MenuItemContext.Provider, {
+	value: true,
+	children: /* @__PURE__ */ jsx("li", {
+		ref,
+		"data-sidebar": "menu-item",
+		className: cn("relative", className),
+		...props,
+		children
+	})
+}));
+SidebarMenuItem.displayName = "Sidebar.MenuItem";
+/**
+* Primary interactive element inside a menu item. Renders as a `<button>` or link.
+* Supports icons, active state, and auto-tooltip when the sidebar is collapsed.
+*
+* **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuItem`.
+* Use `MenuItem` explicitly only when you need siblings (e.g., `MenuAction`).
+*
+* When used as a `Collapsible.Trigger` via `render` prop, the expand/collapse chevron
+* auto-rotates thanks to Base UI's `data-panel-open` attribute combined with
+* `group/menu-button` CSS grouping.
+*
+* @example Simple usage (auto-wrapped in `<li>`)
+* ```tsx
+* <Sidebar.Menu>
+*   <Sidebar.MenuButton icon={GlobeIcon} active>Domains</Sidebar.MenuButton>
+*   <Sidebar.MenuButton icon={ClockIcon} href="/recents">Recents</Sidebar.MenuButton>
+* </Sidebar.Menu>
+* ```
+*
+* @example With MenuAction sibling (explicit MenuItem needed)
+* ```tsx
+* <Sidebar.MenuItem>
+*   <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>
+*   <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>
+* </Sidebar.MenuItem>
+* ```
+*/
+var SidebarMenuButton = forwardRef(({ className, icon: IconProp, active = false, size = "base", href, tooltip, children, ...props }, ref) => {
+	const { state } = useSidebar();
+	const LinkComponent = useLinkComponent();
+	const isInsideMenuItem = useContext(MenuItemContext);
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [(() => {
+		if (!IconProp) return null;
+		if (React.isValidElement(IconProp)) return IconProp;
+		return /* @__PURE__ */ jsx(IconProp, { className: cn("shrink-0", size === "base" ? "size-3.5" : "size-3") });
+	})(), /* @__PURE__ */ jsx("span", {
+		className: cn("flex flex-1 items-center min-w-0 text-left overflow-hidden", "group-data-[state=collapsed]/sidebar:hidden"),
+		children
+	})] });
+	const buttonClasses = cn("group/menu-button flex w-full min-w-0 items-center gap-2 rounded-lg outline-none cursor-pointer", size === "base" && "min-h-[34px] px-3 py-1.5 text-sm font-medium", size === "sm" && "min-h-[28px] px-2 py-1 text-sm", "text-sf-default", "transition-[color,background-color,padding] duration-0 ease-[cubic-bezier(0.77,0,0.175,1)]", "[&>svg]:text-sf-subtle", !active && "hover:bg-sf-tint", active && "bg-sf-tint", "has-[[data-active]]:bg-transparent has-[[data-active]]:hover:bg-sf-tint", "focus-visible:ring-1 focus-visible:ring-sf-ring", "group-data-[state=collapsed]/sidebar:px-2", className);
+	let button = href ? /* @__PURE__ */ jsx(LinkComponent, {
+		ref,
+		className: cn(buttonClasses, "no-underline!"),
+		href,
+		to: href,
+		"data-active": active || void 0,
+		"data-sidebar": "menu-button",
+		"data-size": size,
+		onClick: props.onClick,
+		children: content
+	}) : /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		className: buttonClasses,
+		"data-active": active || void 0,
+		"data-sidebar": "menu-button",
+		"data-size": size,
+		...props,
+		children: content
+	});
+	if (state === "collapsed" && tooltip) button = /* @__PURE__ */ jsx(Tooltip, {
+		content: tooltip,
+		side: "right",
+		children: button
+	});
+	if (!isInsideMenuItem) return /* @__PURE__ */ jsx("li", {
+		"data-sidebar": "menu-item",
+		className: "relative",
+		children: button
+	});
+	return button;
+});
+SidebarMenuButton.displayName = "Sidebar.MenuButton";
+/**
+* Right-aligned action button inside a menu item (e.g., settings gear, plus icon).
+* Positioned absolutely so it overlays the menu button.
+* Hidden when the sidebar is collapsed.
+*/
+var SidebarMenuAction = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("button", {
+	ref,
+	type: "button",
+	"data-sidebar": "menu-action",
+	className: cn("absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-md p-1", "text-sf-strong hover:bg-sf-overlay", "transition-colors duration-150", "group-data-[state=collapsed]/sidebar:hidden", className),
+	...props
+}));
+SidebarMenuAction.displayName = "Sidebar.MenuAction";
+/**
+* Badge pill displayed inside a menu button (e.g., "Beta", "New").
+* Uses dashed border styling matching the Cloudflare design system.
+*
+* @example
+* ```tsx
+* <Sidebar.MenuSubButton>
+*   Containers
+*   <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>
+* </Sidebar.MenuSubButton>
+* ```
+*/
+var SidebarMenuBadge = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+	ref,
+	"data-sidebar": "menu-badge",
+	className: cn("inline-flex shrink-0 items-center rounded-full border border-dashed border-sf-line", "select-none px-1.5 py-0.5 text-[11px]/none font-medium text-sf-strong", "group-data-[state=collapsed]/sidebar:hidden", className),
+	...props
+}));
+SidebarMenuBadge.displayName = "Sidebar.MenuBadge";
+/**
+* Indented sub-menu container for child navigation items. Renders as `<ul>` with
+* a left border accent for visual hierarchy.
+*
+* `MenuSubButton` auto-wraps in `<li>` so `MenuSubItem` is optional.
+*
+* @example
+* ```tsx
+* <Sidebar.MenuSub>
+*   <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>
+*   <Sidebar.MenuSubButton>Durable Objects</Sidebar.MenuSubButton>
+* </Sidebar.MenuSub>
+* ```
+*/
+var SidebarMenuSub = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("ul", {
+	ref,
+	"data-sidebar": "menu-sub",
+	className: cn("m-0 ml-3.5 flex min-w-0 list-none flex-col gap-0.5 border-l border-sf-line p-0 pl-2.5", "group-data-[state=collapsed]/sidebar:hidden", className),
+	...props
+}));
+SidebarMenuSub.displayName = "Sidebar.MenuSub";
+/**
+* Individual item inside a sub-menu. Renders as `<li>`.
+*
+* **Optional when using `MenuSubButton` directly** — `MenuSubButton` auto-wraps
+* itself in a `<li>` when not already inside a `MenuSubItem`.
+*/
+var SidebarMenuSubItem = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(MenuSubItemContext.Provider, {
+	value: true,
+	children: /* @__PURE__ */ jsx("li", {
+		ref,
+		"data-sidebar": "menu-sub-item",
+		className: cn("relative", className),
+		...props,
+		children
+	})
+}));
+SidebarMenuSubItem.displayName = "Sidebar.MenuSubItem";
+/**
+* Button inside a sub-menu item. Does not render an icon (sub-items are
+* indented instead). Supports active state and link rendering.
+*
+* **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuSubItem`.
+*
+* @example Simple usage (auto-wrapped in `<li>`)
+* ```tsx
+* <Sidebar.MenuSub>
+*   <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>
+*   <Sidebar.MenuSubButton href="/observability">Observability</Sidebar.MenuSubButton>
+* </Sidebar.MenuSub>
+* ```
+*/
+var SidebarMenuSubButton = forwardRef(({ className, active = false, href, children, ...props }, ref) => {
+	const LinkComponent = useLinkComponent();
+	const isInsideMenuSubItem = useContext(MenuSubItemContext);
+	const buttonClasses = cn("flex w-full min-w-0 items-center gap-2 rounded-lg min-h-[34px] px-3 py-1 text-sm font-medium outline-none", "text-sf-default transition-colors duration-150", !active && "hover:bg-sf-tint", active && "bg-sf-tint", "focus-visible:ring-1 focus-visible:ring-sf-ring", className);
+	const content = /* @__PURE__ */ jsx("span", {
+		className: "flex-1 truncate text-left",
+		children
+	});
+	const button = href ? /* @__PURE__ */ jsx(LinkComponent, {
+		ref,
+		className: cn(buttonClasses, "no-underline!"),
+		href,
+		to: href,
+		"data-active": active || void 0,
+		"data-sidebar": "menu-sub-button",
+		onClick: props.onClick,
+		children: content
+	}) : /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		className: buttonClasses,
+		"data-active": active || void 0,
+		"data-sidebar": "menu-sub-button",
+		...props,
+		children: content
+	});
+	if (!isInsideMenuSubItem) return /* @__PURE__ */ jsx("li", {
+		"data-sidebar": "menu-sub-item",
+		className: "relative",
+		children: button
+	});
+	return button;
+});
+SidebarMenuSubButton.displayName = "Sidebar.MenuSubButton";
+/**
+* Horizontal divider line between sidebar sections.
+*/
+var SidebarSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("hr", {
+	ref,
+	"data-sidebar": "separator",
+	className: cn("mx-2 min-h-px h-px border-0 bg-sf-line", className),
+	...props
+}));
+SidebarSeparator.displayName = "Sidebar.Separator";
+/**
+* Search trigger button styled as an input. Typically opens a command palette.
+*
+* @example
+* ```tsx
+* <Sidebar.Input placeholder="Quick search..." shortcut="⌘K" onClick={openSearch} />
+* ```
+*/
+var SidebarInput = forwardRef(({ className, placeholder = "Search...", shortcut, children, ...props }, ref) => /* @__PURE__ */ jsxs("button", {
+	ref,
+	type: "button",
+	"data-sidebar": "input",
+	className: cn("flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm", "bg-sf-base text-sf-subtle ring ring-sf-line", "transition-[color,background-color,padding,box-shadow] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]", "hover:bg-sf-overlay", "group-data-[state=collapsed]/sidebar:px-2 group-data-[state=collapsed]/sidebar:ring-0", className),
+	...props,
+	children: [
+		/* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "size-4 shrink-0 text-sf-subtle" }),
+		/* @__PURE__ */ jsx("span", {
+			className: "flex-1 truncate text-left group-data-[state=collapsed]/sidebar:hidden",
+			children: children ?? placeholder
+		}),
+		shortcut && /* @__PURE__ */ jsx("kbd", {
+			className: "ml-auto font-sans text-xs text-sf-subtle group-data-[state=collapsed]/sidebar:hidden",
+			children: shortcut
+		})
+	]
+}));
+SidebarInput.displayName = "Sidebar.Input";
+/**
+* Button that toggles the sidebar open/collapsed. Uses `toggleSidebar()` from context.
+* Defaults to a `SidebarSimpleIcon`, left-aligned.
+*
+* @example
+* ```tsx
+* <Sidebar.Trigger />
+* <Sidebar.Trigger><PanelLeftIcon className="size-5" /></Sidebar.Trigger>
+* ```
+*/
+var SidebarTrigger = forwardRef(({ className, children, onClick, ...props }, ref) => {
+	const { toggleSidebar } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		"data-sidebar": "trigger",
+		"aria-label": "Toggle sidebar",
+		className: cn("flex items-center rounded-md p-1.5", "text-sf-subtle hover:text-sf-strong hover:bg-sf-overlay", "transition-colors duration-150", className),
+		onClick: (e) => {
+			onClick?.(e);
+			toggleSidebar();
+		},
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(SidebarSimpleIcon, { className: "size-5" })
+	});
+});
+SidebarTrigger.displayName = "Sidebar.Trigger";
+/**
+* Invisible interaction strip at the sidebar edge for click-to-toggle.
+* Renders a thin hover-sensitive area between the sidebar and main content.
+*/
+var SidebarRail = forwardRef(({ className, ...props }, ref) => {
+	const { toggleSidebar } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		"data-sidebar": "rail",
+		"aria-label": "Toggle sidebar",
+		tabIndex: -1,
+		className: cn("absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 cursor-pointer transition-all", "after:absolute after:inset-y-0 after:left-1/2 after:w-0.5", "hover:after:bg-sf-brand/20", "group-data-[side=left]/sidebar-wrapper:right-0", "group-data-[side=right]/sidebar-wrapper:left-0", "sm:flex", className),
+		onClick: toggleSidebar,
+		...props
+	});
+});
+SidebarRail.displayName = "Sidebar.Rail";
+/**
+* Drag handle for resizing the sidebar. Renders when `resizable` is true in
+* both expanded and collapsed states.
+*
+* - **Expanded → drag inward past `minWidth`**: auto-collapses to icon-only.
+* - **Collapsed → drag outward past `minWidth`**: auto-expands and begins
+*   tracking width from `minWidth`.
+*/
+var SidebarResizeHandle = forwardRef(({ className, ...props }, ref) => {
+	const { side, resizable, setIsResizing, setWidth, setOpen, open, minWidth } = useSidebar();
+	const startX = useRef(0);
+	const startWidth = useRef(0);
+	const wasCollapsed = useRef(false);
+	if (!resizable) return null;
+	const handlePointerDown = (e) => {
+		e.preventDefault();
+		setIsResizing(true);
+		startX.current = e.clientX;
+		wasCollapsed.current = !open;
+		startWidth.current = (e.currentTarget.closest("[data-sidebar-wrapper]")?.querySelector("[data-sidebar='sidebar']"))?.getBoundingClientRect().width ?? 0;
+		const cleanup = () => {
+			setIsResizing(false);
+			document.removeEventListener("pointermove", handlePointerMove);
+			document.removeEventListener("pointerup", handlePointerUp);
+		};
+		const handlePointerMove = (moveEvent) => {
+			const delta = side === "left" ? moveEvent.clientX - startX.current : startX.current - moveEvent.clientX;
+			const rawWidth = startWidth.current + delta;
+			if (wasCollapsed.current) {
+				if (rawWidth >= minWidth) {
+					wasCollapsed.current = false;
+					setOpen(true);
+					setWidth(rawWidth);
+				}
+				return;
+			}
+			if (rawWidth < minWidth) {
+				setOpen(false);
+				wasCollapsed.current = true;
+				return;
+			}
+			setWidth(rawWidth);
+		};
+		const handlePointerUp = () => {
+			cleanup();
+		};
+		document.addEventListener("pointermove", handlePointerMove);
+		document.addEventListener("pointerup", handlePointerUp);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-sidebar": "resize-handle",
+		className: cn("absolute inset-y-0 z-20 hidden w-1 cursor-col-resize transition-colors sm:block", "hover:bg-sf-brand/30 active:bg-sf-brand/50", side === "left" && "right-0", side === "right" && "left-0", className),
+		onPointerDown: handlePointerDown,
+		...props
+	});
+});
+SidebarResizeHandle.displayName = "Sidebar.ResizeHandle";
+/**
+* Auto-rotating chevron for collapsible menu items. When the parent
+* `MenuButton` is used as a `Collapsible.Trigger`, Base UI sets
+* `data-panel-open` on the trigger — the chevron rotates automatically via CSS.
+*
+* @example
+* ```tsx
+* <Sidebar.CollapsibleTrigger render={<Sidebar.MenuButton icon={ComputeIcon} />}>
+*   Compute
+*   <Sidebar.MenuChevron />
+* </Sidebar.CollapsibleTrigger>
+* ```
+*/
+function SidebarMenuChevron({ className }) {
+	return /* @__PURE__ */ jsx(CaretRightIcon, { className: cn("ml-auto size-4 shrink-0 text-sf-subtle transition-transform duration-200", "group-data-[panel-open]/menu-button:rotate-90", "group-data-[state=collapsed]/sidebar:hidden", className) });
+}
+SidebarMenuChevron.displayName = "Sidebar.MenuChevron";
+/**
+* Base UI Collapsible.Root for sidebar sub-menu expand/collapse.
+* @see https://base-ui.com/react/components/collapsible
+*/
+var SidebarCollapsible = Collapsible.Root;
+/**
+* Base UI Collapsible.Trigger for sidebar sub-menu toggle.
+* Use `render` prop to compose with `Sidebar.MenuButton`.
+*
+* @example
+* ```tsx
+* <Sidebar.CollapsibleTrigger render={<Sidebar.MenuButton icon={DiamondIcon} />}>
+*   Compute
+*   <Sidebar.MenuChevron />
+* </Sidebar.CollapsibleTrigger>
+* ```
+*/
+var SidebarCollapsibleTrigger = Collapsible.Trigger;
+/**
+* Animated collapsible panel for sidebar sub-menu content.
+* Wraps Base UI `Collapsible.Panel` with a height transition driven by the
+* `--collapsible-panel-height` CSS variable that Base UI measures automatically.
+*
+* Uses `keepMounted` by default so the exit animation plays before removal.
+*
+* Animation flow:
+* - **Opening**: `data-starting-style` (h=0) → `data-open` (h=measured) — transition up
+* - **Closing**: `data-open` removed + `data-ending-style` (h=0) — transition down
+* - **Closed**: `data-closed` (h=0) — stays collapsed while mounted
+*/
+var SidebarCollapsibleContent = forwardRef(({ className, keepMounted = true, ...props }, ref) => /* @__PURE__ */ jsx(Collapsible.Panel, {
+	ref,
+	keepMounted,
+	className: cn("overflow-hidden", "h-[var(--collapsible-panel-height)]", "transition-[height] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]", "motion-reduce:transition-none", "data-[closed]:h-0 data-[starting-style]:h-0 data-[ending-style]:h-0", className),
+	...props
+}));
+SidebarCollapsibleContent.displayName = "Sidebar.CollapsibleContent";
+/**
+* Sidebar — responsive navigation panel with expand/collapse support.
+*
+* Compound component: `Sidebar` (root `<aside>`), `.Provider`, `.Header`,
+* `.Content`, `.Footer`, `.Group`, `.GroupLabel`, `.GroupContent`,
+* `.Menu`, `.MenuItem`, `.MenuButton`, `.MenuAction`, `.MenuBadge`,
+* `.MenuSub`, `.MenuSubItem`, `.MenuSubButton`, `.Separator`,
+* `.Input`, `.Trigger`, `.Rail`, `.MenuChevron`,
+* `.Collapsible`, `.CollapsibleTrigger`, `.CollapsibleContent`.
+*
+* Built on `@base-ui/react/collapsible` + `@base-ui/react/dialog`.
+*
+* @example
+* ```tsx
+* <Sidebar.Provider defaultOpen>
+*   <Sidebar>
+*     <Sidebar.Content>
+*       <Sidebar.Group>
+*         <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>
+*         <Sidebar.Menu>
+*           <Sidebar.MenuButton icon={HouseIcon} active>Home</Sidebar.MenuButton>
+*           <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>
+*         </Sidebar.Menu>
+*       </Sidebar.Group>
+*     </Sidebar.Content>
+*     <Sidebar.Footer>
+*       <Sidebar.Trigger />
+*     </Sidebar.Footer>
+*   </Sidebar>
+* </Sidebar.Provider>
+* ```
+*/
+var Sidebar = Object.assign(SidebarRoot, {
+	Provider: SidebarProvider,
+	Header: SidebarHeader,
+	Content: SidebarContent,
+	Footer: SidebarFooter,
+	Group: SidebarGroup,
+	GroupLabel: SidebarGroupLabel,
+	GroupContent: SidebarGroupContent,
+	Menu: SidebarMenu,
+	MenuItem: SidebarMenuItem,
+	MenuButton: SidebarMenuButton,
+	MenuAction: SidebarMenuAction,
+	MenuBadge: SidebarMenuBadge,
+	MenuSub: SidebarMenuSub,
+	MenuSubItem: SidebarMenuSubItem,
+	MenuSubButton: SidebarMenuSubButton,
+	Separator: SidebarSeparator,
+	Input: SidebarInput,
+	Trigger: SidebarTrigger,
+	Rail: SidebarRail,
+	ResizeHandle: SidebarResizeHandle,
+	MenuChevron: SidebarMenuChevron,
+	Collapsible: SidebarCollapsible,
+	CollapsibleTrigger: SidebarCollapsibleTrigger,
+	CollapsibleContent: SidebarCollapsibleContent
+});
+//#endregion
+export { useSidebar as A, SidebarMenuSubItem as C, SidebarRoot as D, SidebarResizeHandle as E, SidebarSeparator as O, SidebarMenuSubButton as S, SidebarRail as T, SidebarMenuBadge as _, SidebarCollapsible as a, SidebarMenuItem as b, SidebarContent as c, SidebarGroupContent as d, SidebarGroupLabel as f, SidebarMenuAction as g, SidebarMenu as h, Sidebar as i, SidebarTrigger as k, SidebarFooter as l, SidebarInput as m, SF_SIDEBAR_STYLING as n, SidebarCollapsibleContent as o, SidebarHeader as p, SF_SIDEBAR_VARIANTS as r, SidebarCollapsibleTrigger as s, SF_SIDEBAR_DEFAULT_VARIANTS as t, SidebarGroup as u, SidebarMenuButton as v, SidebarProvider as w, SidebarMenuSub as x, SidebarMenuChevron as y };
+
+//# sourceMappingURL=sidebar-DOwBrq57.js.map