@stll/ui 0.19.0 → 0.21.0

package/dist/components/context-menu.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+//#region src/components/context-menu.d.ts
+type ContextMenuAction = {
+  label: string;
+  icon?: ReactNode;
+  onClick?: () => void;
+  variant?: "default" | "destructive";
+  disabled?: boolean;
+  /** Set on a toggle-style action: it renders as a checkbox item whose
+   *  state assistive technology can read. `onClick` flips it. */
+  checked?: boolean;
+  submenu?: readonly ContextMenuAction[];
+  /** Draw a divider above this item — e.g. to set a trailing "New …" action
+   *  apart from the list of existing choices above it. */
+  separatorBefore?: boolean;
+  /** Keep the menu open after the click, for a toggle the user may flip
+   *  several of in a row. */
+  closeOnClick?: boolean;
+};
+type ContextMenuProps = {
+  actions: readonly ContextMenuAction[];
+  children: ReactNode;
+};
+/**
+ * Wrap arbitrary content with a right-click context menu. Built on
+ * base-ui's `ContextMenu`, which is purpose-built for right-click /
+ * long-press triggers — it tracks the cursor anchor itself and uses
+ * dismissal semantics tuned for context menus, so the popup doesn't
+ * close on incidental pointer movement the way a hover/click `Menu`
+ * does.
+ *
+ * Renders only the children when `actions` is empty so callers can
+ * pass conditionally.
+ */
+declare const ContextMenu: ({ actions, children }: ContextMenuProps) => ReactNode;
+//#endregion
+export { ContextMenu, ContextMenuAction, ContextMenuProps };

package/dist/components/context-menu.js

@@ -0,0 +1,48 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { DropdownMenuCheckboxItem as MenuCheckboxItem, DropdownMenuContent as MenuPopup, DropdownMenuItem as MenuItem, DropdownMenuSeparator as MenuSeparator, DropdownMenuSub as MenuSub, DropdownMenuSubContent as MenuSubPopup, DropdownMenuSubTrigger as MenuSubTrigger } from "./menu.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
+//#region src/components/context-menu.tsx
+/**
+* Wrap arbitrary content with a right-click context menu. Built on
+* base-ui's `ContextMenu`, which is purpose-built for right-click /
+* long-press triggers — it tracks the cursor anchor itself and uses
+* dismissal semantics tuned for context menus, so the popup doesn't
+* close on incidental pointer movement the way a hover/click `Menu`
+* does.
+*
+* Renders only the children when `actions` is empty so callers can
+* pass conditionally.
+*/
+const ContextMenu = ({ actions, children }) => {
+	if (actions.length === 0) return children;
+	return /* @__PURE__ */ jsxs(ContextMenu$1.Root, { children: [/* @__PURE__ */ jsx(ContextMenu$1.Trigger, {
+		"data-slot": "context-menu-trigger",
+		render: /* @__PURE__ */ jsx("div", { className: "contents" }),
+		children
+	}), /* @__PURE__ */ jsx(MenuPopup, {
+		"data-slot": "context-menu-popup",
+		children: actions.map((action) => /* @__PURE__ */ jsx(ContextMenuActionItem, { action }, action.label))
+	})] });
+};
+const ContextMenuActionItem = ({ action }) => {
+	const separator = action.separatorBefore ? /* @__PURE__ */ jsx(MenuSeparator, {}) : null;
+	if (action.submenu) return /* @__PURE__ */ jsxs(Fragment, { children: [separator, /* @__PURE__ */ jsxs(MenuSub, { children: [/* @__PURE__ */ jsxs(MenuSubTrigger, { children: [action.icon, action.label] }), /* @__PURE__ */ jsx(MenuSubPopup, { children: action.submenu.map((sub) => /* @__PURE__ */ jsx(ContextMenuActionItem, { action: sub }, sub.label)) })] })] });
+	if (action.checked !== void 0) return /* @__PURE__ */ jsxs(Fragment, { children: [separator, /* @__PURE__ */ jsxs(MenuCheckboxItem, {
+		checked: action.checked,
+		closeOnClick: action.closeOnClick ?? true,
+		disabled: action.disabled === true,
+		onCheckedChange: () => action.onClick?.(),
+		children: [action.icon, action.label]
+	})] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [separator, /* @__PURE__ */ jsxs(MenuItem, {
+		className: cn(action.variant === "destructive" && "text-destructive"),
+		closeOnClick: action.closeOnClick ?? true,
+		disabled: action.disabled === true,
+		onClick: action.onClick,
+		children: [action.icon, action.label]
+	})] });
+};
+//#endregion
+export { ContextMenu };

package/dist/components/input-group.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/input-group.d.ts
 declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+  align?: "inline-start" | "block-end" | "block-start" | "inline-end" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const InputGroupAddon: ({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => React$1.JSX.Element;
 declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;

package/dist/components/sidebar.d.ts

@@ -0,0 +1,109 @@
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Separator } from "./separator.js";
+import { TooltipContent as TooltipPopup } from "./tooltip.js";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/sidebar.d.ts
+/**
+ * Inline size the sidebar takes out of the layout row when expanded, in CSS
+ * pixels. Kept equal across the two rail-shaped primitives in this package:
+ * `SIDE_RAIL_WIDTH` (inspector) and `APPLICATION_RAIL_WIDTH` are both `w-12`
+ * (48px), the same as {@link SIDEBAR_WIDTH_ICON_PX} below, so a collapsed
+ * sidebar lines up with either rail.
+ */
+declare const SIDEBAR_WIDTH_PX = 256;
+/** Inline size of the collapsed ("icon") rail, in CSS pixels. See above. */
+declare const SIDEBAR_WIDTH_ICON_PX = 48;
+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;
+/**
+ * Inline size the sidebar takes out of the layout row, in CSS pixels. Panes
+ * docked to the opposite edge need this to know how much room is actually
+ * left for the content column. Mobile reports 0: there the sidebar is an
+ * overlay sheet and occupies no layout width.
+ */
+declare function useSidebarInlineSize(): 0 | 48 | 256;
+declare const SidebarProvider: ({ defaultOpen, forceCollapsed, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean;
+  forceCollapsed?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) => import("react").JSX.Element;
+declare const Sidebar: ({ side, variant, collapsible, mobileTitle, mobileDescription, className, children, ...props }: React.ComponentProps<"div"> & {
+  /**
+   * Which edge the sidebar docks to. Despite the physical name, this is
+   * applied as a *logical* position: `"left"` docks at the CSS inline-start
+   * edge and `"right"` docks at the inline-end edge (see the `start-0` /
+   * `end-0` classes below, keyed off `data-side`). Under `dir="rtl"` a
+   * `side="left"` sidebar therefore renders on the visual right, mirroring
+   * the reading direction rather than a fixed screen edge. `SidebarRail`
+   * derives its content-facing offset from `data-side` using the same
+   * left→end / right→start mapping so it keeps tracking the boundary
+   * between the sidebar and the content pane in both directions.
+   */
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+  /** Screen-reader title for the mobile sheet. Override to localize. */
+  mobileTitle?: string;
+  /** Screen-reader description for the mobile sheet. Override to localize. */
+  mobileDescription?: string;
+}) => import("react").JSX.Element;
+declare const SidebarTrigger: ({ className, onClick, label, "aria-label": ariaLabel, ...props }: React.ComponentProps<typeof Button> & {
+  /** Accessible name for the trigger. Override to localize. */
+  label?: string;
+}) => import("react").JSX.Element;
+declare const SidebarRail: ({ className, label, "aria-label": ariaLabel, ...props }: React.ComponentProps<"button"> & {
+  /** Accessible name for the rail. Override to localize. */
+  label?: string;
+}) => import("react").JSX.Element;
+declare const SidebarInset: ({ className, ...props }: React.ComponentProps<"main">) => import("react").JSX.Element;
+declare const SidebarInput: ({ className, ...props }: React.ComponentProps<typeof Input>) => import("react").JSX.Element;
+declare const SidebarHeader: ({ className, ...props }: React.ComponentProps<"div">) => import("react").JSX.Element;
+declare const SidebarFooter: ({ className, ...props }: React.ComponentProps<"div">) => import("react").JSX.Element;
+declare const SidebarSeparator: ({ className, ...props }: React.ComponentProps<typeof Separator>) => import("react").JSX.Element;
+declare const SidebarContent: ({ className, ...props }: React.ComponentProps<"div">) => import("react").JSX.Element;
+declare const SidebarGroup: ({ className, ...props }: React.ComponentProps<"div">) => import("react").JSX.Element;
+declare const SidebarGroupLabel: ({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+  asChild?: boolean;
+}) => import("react").JSX.Element;
+declare const SidebarGroupAction: ({ className, asChild, ...props }: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+}) => import("react").JSX.Element;
+declare const SidebarGroupContent: ({ className, ...props }: React.ComponentProps<"div">) => import("react").JSX.Element;
+declare const SidebarMenu: ({ className, ...props }: React.ComponentProps<"ul">) => import("react").JSX.Element;
+declare const SidebarMenuItem: ({ className, ...props }: React.ComponentProps<"li">) => import("react").JSX.Element;
+declare const sidebarMenuButtonVariants: (props?: ({
+  variant?: "default" | "outline" | null | undefined;
+  size?: "default" | "lg" | "sm" | "rail" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const SidebarMenuButton: ({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | React.ComponentProps<typeof TooltipPopup>;
+} & VariantProps<typeof sidebarMenuButtonVariants>) => import("react").JSX.Element;
+declare const SidebarMenuAction: ({ className, asChild, showOnHover, ...props }: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  showOnHover?: boolean;
+}) => import("react").JSX.Element;
+declare const SidebarMenuBadge: ({ className, ...props }: React.ComponentProps<"div">) => import("react").JSX.Element;
+declare const SidebarMenuSkeleton: ({ className, showIcon, ...props }: React.ComponentProps<"div"> & {
+  showIcon?: boolean;
+}) => import("react").JSX.Element;
+declare const SidebarMenuSub: ({ className, ...props }: React.ComponentProps<"ul">) => import("react").JSX.Element;
+declare const SidebarMenuSubItem: ({ className, ...props }: React.ComponentProps<"li">) => import("react").JSX.Element;
+declare const SidebarMenuSubButton: ({ asChild, size, isActive, className, ...props }: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+  size?: "sm" | "md";
+  isActive?: boolean;
+}) => import("react").JSX.Element;
+//#endregion
+export { SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, useSidebarInlineSize };

package/dist/components/sidebar.js

@@ -0,0 +1,361 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
+import { useIsMobile } from "../hooks/use-mobile.js";
+import { Button } from "./button.js";
+import { Sheet, SheetContent as SheetPopup, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
+import { Input } from "./input.js";
+import { Separator } from "./separator.js";
+import { Slot } from "../lib/slot.js";
+import { deriveSidebarState, isSidebarMenuButtonTooltipVisible, nextOpenMobile, nextRequestedOpen, resolveSidebarOpen } from "./sidebar.logic.js";
+import { Skeleton } from "./skeleton.js";
+import { PanelLeftIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useId, useState } from "react";
+import { cva } from "class-variance-authority";
+import { panic } from "better-result";
+//#region src/components/sidebar.tsx
+/**
+* Inline size the sidebar takes out of the layout row when expanded, in CSS
+* pixels. Kept equal across the two rail-shaped primitives in this package:
+* `SIDE_RAIL_WIDTH` (inspector) and `APPLICATION_RAIL_WIDTH` are both `w-12`
+* (48px), the same as {@link SIDEBAR_WIDTH_ICON_PX} below, so a collapsed
+* sidebar lines up with either rail.
+*/
+const SIDEBAR_WIDTH_PX = 256;
+/** Inline size of the collapsed ("icon") rail, in CSS pixels. See above. */
+const SIDEBAR_WIDTH_ICON_PX = 48;
+const REM_PX = 16;
+const SIDEBAR_WIDTH = `${256 / REM_PX}rem`;
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = `${48 / REM_PX}rem`;
+const DEFAULT_SIDEBAR_OPEN = true;
+const DEFAULT_TOGGLE_LABEL = "Toggle Sidebar";
+const DEFAULT_MOBILE_TITLE = "Sidebar";
+const DEFAULT_MOBILE_DESCRIPTION = "Displays the mobile sidebar.";
+const skeletonWidthFromId = (id) => {
+	let hash = 0;
+	for (const character of id) hash = (hash * 31 + (character.codePointAt(0) ?? 0)) % 40;
+	return `${hash + 50}%`;
+};
+const SidebarContext = createContext(null);
+function useSidebar() {
+	const context = use(SidebarContext);
+	if (!context) panic("useSidebar must be used within a SidebarProvider.");
+	return context;
+}
+/**
+* Inline size the sidebar takes out of the layout row, in CSS pixels. Panes
+* docked to the opposite edge need this to know how much room is actually
+* left for the content column. Mobile reports 0: there the sidebar is an
+* overlay sheet and occupies no layout width.
+*/
+function useSidebarInlineSize() {
+	const { isMobile, state } = useSidebar();
+	if (isMobile) return 0;
+	return state === "expanded" ? 256 : 48;
+}
+const SidebarProvider = ({ defaultOpen, forceCollapsed = false, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) => {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = useState(false);
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? DEFAULT_SIDEBAR_OPEN);
+	const requestedOpen = openProp ?? uncontrolledOpen;
+	const open = resolveSidebarOpen({
+		forceCollapsed,
+		requestedOpen
+	});
+	const setOpen = (value) => {
+		const openState = typeof value === "function" ? value(requestedOpen) : value;
+		if (setOpenProp) setOpenProp(openState);
+		else setUncontrolledOpen(openState);
+	};
+	const toggleSidebar = () => isMobile ? setOpenMobile(nextOpenMobile) : setOpen(nextRequestedOpen);
+	const contextValue = {
+		state: deriveSidebarState(open),
+		open,
+		setOpen,
+		isMobile,
+		openMobile,
+		setOpenMobile,
+		toggleSidebar
+	};
+	const wrapperStyle = {
+		"--sidebar-width": SIDEBAR_WIDTH,
+		"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+		...style
+	};
+	return /* @__PURE__ */ jsx(SidebarContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className),
+			"data-slot": "sidebar-wrapper",
+			style: wrapperStyle,
+			...props,
+			children
+		})
+	});
+};
+const Sidebar = ({ side = "left", variant = "sidebar", collapsible = "offcanvas", mobileTitle = DEFAULT_MOBILE_TITLE, mobileDescription = DEFAULT_MOBILE_DESCRIPTION, className, children, ...props }) => {
+	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+	if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
+		className: cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className),
+		"data-slot": "sidebar",
+		...props,
+		children
+	});
+	if (isMobile) {
+		const mobileStyle = { "--sidebar-width": SIDEBAR_WIDTH_MOBILE };
+		return /* @__PURE__ */ jsx(Sheet, {
+			onOpenChange: setOpenMobile,
+			open: openMobile,
+			...props,
+			children: /* @__PURE__ */ jsxs(SheetPopup, {
+				className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+				"data-mobile": "true",
+				"data-sidebar": "sidebar",
+				"data-slot": "sidebar",
+				side: side === "left" ? "inline-start" : "inline-end",
+				style: mobileStyle,
+				children: [/* @__PURE__ */ jsxs(SheetHeader, {
+					className: "sr-only",
+					children: [/* @__PURE__ */ jsx(SheetTitle, { children: mobileTitle }), /* @__PURE__ */ jsx(SheetDescription, { children: mobileDescription })]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex h-full w-full flex-col",
+					children
+				})]
+			})
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group peer text-sidebar-foreground hidden md:block",
+		"data-collapsible": state === "collapsed" ? collapsible : "",
+		"data-side": side,
+		"data-slot": "sidebar",
+		"data-state": state,
+		"data-variant": variant,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"),
+			"data-slot": "sidebar-gap"
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[inset-inline-start,inset-inline-end,width] duration-200 ease-linear md:flex", side === "left" ? "start-0 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]" : "end-0 group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-e group-data-[side=right]:border-s", className),
+			"data-slot": "sidebar-container",
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
+				"data-sidebar": "sidebar",
+				"data-slot": "sidebar-inner",
+				children
+			})
+		})]
+	});
+};
+const SidebarTrigger = ({ className, onClick, label = DEFAULT_TOGGLE_LABEL, "aria-label": ariaLabel, ...props }) => {
+	const { toggleSidebar } = useSidebar();
+	return /* @__PURE__ */ jsxs(Button, {
+		"aria-label": ariaLabel ?? label,
+		className: cn("size-7", className),
+		"data-sidebar": "trigger",
+		"data-slot": "sidebar-trigger",
+		onClick: (event) => {
+			onClick?.(event);
+			toggleSidebar();
+		},
+		size: "icon",
+		variant: "ghost",
+		...props,
+		children: [/* @__PURE__ */ jsx(PanelLeftIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	});
+};
+const SidebarRail = ({ className, label = DEFAULT_TOGGLE_LABEL, "aria-label": ariaLabel, ...props }) => {
+	const { toggleSidebar } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": ariaLabel ?? label,
+		type: "button",
+		className: cn("hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-[transform,background-color] ease-linear group-data-[side=left]:-end-4 group-data-[side=right]:start-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex", "ltr:-translate-x-1/2 rtl:translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-sidebar", "group-data-[collapsible=offcanvas]:ltr:translate-x-0 group-data-[collapsible=offcanvas]:rtl:translate-x-0", "group-data-[collapsible=offcanvas]:group-data-[side=left]:after:end-full group-data-[collapsible=offcanvas]:group-data-[side=right]:after:start-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-end-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-start-2", className),
+		"data-sidebar": "rail",
+		"data-slot": "sidebar-rail",
+		onClick: toggleSidebar,
+		tabIndex: -1,
+		...props
+	});
+};
+const SidebarInset = ({ className, ...props }) => /* @__PURE__ */ jsx("main", {
+	className: cn("bg-background relative flex w-full flex-1 flex-col overflow-hidden", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2", className),
+	"data-slot": "sidebar-inset",
+	...props
+});
+const SidebarInput = ({ className, ...props }) => /* @__PURE__ */ jsx(Input, {
+	className: cn("bg-background h-8 w-full shadow-none", className),
+	"data-sidebar": "input",
+	"data-slot": "sidebar-input",
+	...props
+});
+const SidebarHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col gap-2 p-2", className),
+	"data-sidebar": "header",
+	"data-slot": "sidebar-header",
+	...props
+});
+const SidebarFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col gap-2 p-2", className),
+	"data-sidebar": "footer",
+	"data-slot": "sidebar-footer",
+	...props
+});
+const SidebarSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(Separator, {
+	className: cn("bg-sidebar-border w-auto", className),
+	"data-sidebar": "separator",
+	"data-slot": "sidebar-separator",
+	...props
+});
+const SidebarContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-x-hidden overflow-y-auto group-data-[collapsible=icon]:[scrollbar-width:none] group-data-[collapsible=icon]:[&::-webkit-scrollbar]:hidden", className),
+	"data-sidebar": "content",
+	"data-slot": "sidebar-content",
+	...props
+});
+const SidebarGroup = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+	"data-sidebar": "group",
+	"data-slot": "sidebar-group",
+	...props
+});
+const SidebarGroupLabel = ({ className, asChild = false, ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		className: cn("text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:hidden", className),
+		"data-sidebar": "group-label",
+		"data-slot": "sidebar-group-label",
+		...props
+	});
+};
+const SidebarGroupAction = ({ className, asChild = false, ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "group-data-[collapsible=icon]:hidden", className),
+		"data-sidebar": "group-action",
+		"data-slot": "sidebar-group-action",
+		...props
+	});
+};
+const SidebarGroupContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("w-full text-sm", className),
+	"data-sidebar": "group-content",
+	"data-slot": "sidebar-group-content",
+	...props
+});
+const SidebarMenu = ({ className, ...props }) => /* @__PURE__ */ jsx("ul", {
+	className: cn("flex w-full min-w-0 flex-col gap-1", className),
+	"data-sidebar": "menu",
+	"data-slot": "sidebar-menu",
+	...props
+});
+const SidebarMenuItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
+	className: cn("group/menu-item relative", className),
+	"data-sidebar": "menu-item",
+	"data-slot": "sidebar-menu-item",
+	...props
+});
+const sidebarMenuButtonVariants = cva("peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-sidebar-accent-foreground data-[active=true]:hover:bg-sidebar-accent data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden transition-[width,height,padding,border-radius] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>span:last-child]:transition-opacity [&>span:last-child]:duration-200 group-data-[collapsible=icon]:[&>span:last-child]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+			outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+		},
+		size: {
+			default: "h-8 text-sm",
+			sm: "h-7 text-xs",
+			lg: "h-12 text-sm",
+			/** A 44px target in both states, for a sidebar that stands in for
+			* the application rail on touch and hybrid devices. */
+			rail: "h-11 text-sm group-data-[collapsible=icon]:size-11! group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:[&>span:last-child]:sr-only"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+const SidebarMenuButton = ({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }) => {
+	const Comp = asChild ? Slot : "button";
+	const { isMobile, state } = useSidebar();
+	const button = /* @__PURE__ */ jsx(Comp, {
+		className: cn(sidebarMenuButtonVariants({
+			variant,
+			size
+		}), className),
+		"data-active": isActive,
+		"data-sidebar": "menu-button",
+		"data-size": size,
+		"data-slot": "sidebar-menu-button",
+		...props
+	});
+	if (tooltip === void 0) return button;
+	const tooltipProps = typeof tooltip === "string" ? { children: tooltip } : tooltip;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipPopup, {
+		align: "center",
+		hidden: !isSidebarMenuButtonTooltipVisible({
+			isMobile,
+			state
+		}),
+		side: "right",
+		...tooltipProps
+	})] });
+};
+const SidebarMenuAction = ({ className, asChild = false, showOnHover = false, ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		className: cn("text-sidebar-foreground ring-sidebar-ring peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0", className),
+		"data-sidebar": "menu-action",
+		"data-slot": "sidebar-menu-action",
+		...props
+	});
+};
+const SidebarMenuBadge = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("text-sidebar-foreground pointer-events-none absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none", "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "transition-opacity duration-200 group-data-[collapsible=icon]:opacity-0", className),
+	"data-sidebar": "menu-badge",
+	"data-slot": "sidebar-menu-badge",
+	...props
+});
+const SidebarMenuSkeleton = ({ className, showIcon = false, ...props }) => {
+	const skeletonId = useId();
+	const textStyle = { "--skeleton-width": skeletonWidthFromId(skeletonId) };
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+		"data-sidebar": "menu-skeleton",
+		"data-slot": "sidebar-menu-skeleton",
+		...props,
+		children: [showIcon && /* @__PURE__ */ jsx(Skeleton, {
+			className: "size-4 rounded-md",
+			"data-sidebar": "menu-skeleton-icon"
+		}), /* @__PURE__ */ jsx(Skeleton, {
+			className: "h-4 max-w-(--skeleton-width) flex-1",
+			"data-sidebar": "menu-skeleton-text",
+			style: textStyle
+		})]
+	});
+};
+const SidebarMenuSub = ({ className, ...props }) => /* @__PURE__ */ jsx("ul", {
+	className: cn("border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-s px-2.5 py-0.5", "group-data-[collapsible=icon]:hidden", className),
+	"data-sidebar": "menu-sub",
+	"data-slot": "sidebar-menu-sub",
+	...props
+});
+const SidebarMenuSubItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
+	className: cn("group/menu-sub-item relative", className),
+	"data-sidebar": "menu-sub-item",
+	"data-slot": "sidebar-menu-sub-item",
+	...props
+});
+const SidebarMenuSubButton = ({ asChild = false, size = "md", isActive = false, className, ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
+		className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className),
+		"data-active": isActive,
+		"data-sidebar": "menu-sub-button",
+		"data-size": size,
+		"data-slot": "sidebar-menu-sub-button",
+		...props
+	});
+};
+//#endregion
+export { SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, useSidebarInlineSize };

package/dist/components/sidebar.logic.d.ts

@@ -0,0 +1,34 @@
+//#region src/components/sidebar.logic.d.ts
+type SidebarState = "expanded" | "collapsed";
+/**
+ * A `SidebarMenuButton`'s tooltip repeats the label already visible in the
+ * expanded rail, and mobile never collapses to icons, so it only earns its
+ * keep on desktop while the sidebar is icon-collapsed.
+ */
+declare const isSidebarMenuButtonTooltipVisible: ({ state, isMobile }: {
+  state: SidebarState;
+  isMobile: boolean;
+}) => boolean;
+/**
+ * The sidebar's displayed open state: the requested state (controlled prop,
+ * or the uncontrolled fallback), masked by `forceCollapsed`. A host can force
+ * the sidebar collapsed (e.g. a narrow viewport) without losing track of
+ * what the user actually asked for.
+ */
+declare const resolveSidebarOpen: ({ requestedOpen, forceCollapsed }: {
+  requestedOpen: boolean;
+  forceCollapsed: boolean;
+}) => boolean;
+/** The `data-state` driven off the sidebar's displayed open state. */
+declare const deriveSidebarState: (open: boolean) => SidebarState;
+/**
+ * `toggleSidebar`'s desktop transition: it flips the *requested* open state,
+ * not the *displayed* one. `forceCollapsed` can mask a `true` requested state
+ * down to a collapsed display; toggling while forced-collapsed still records
+ * the flip so it takes effect once `forceCollapsed` lifts.
+ */
+declare const nextRequestedOpen: (requestedOpen: boolean) => boolean;
+/** `toggleSidebar`'s mobile transition: it flips the sheet's open state. */
+declare const nextOpenMobile: (openMobile: boolean) => boolean;
+//#endregion
+export { SidebarState, deriveSidebarState, isSidebarMenuButtonTooltipVisible, nextOpenMobile, nextRequestedOpen, resolveSidebarOpen };

package/dist/components/sidebar.logic.js

@@ -0,0 +1,27 @@
+//#region src/components/sidebar.logic.ts
+/**
+* A `SidebarMenuButton`'s tooltip repeats the label already visible in the
+* expanded rail, and mobile never collapses to icons, so it only earns its
+* keep on desktop while the sidebar is icon-collapsed.
+*/
+const isSidebarMenuButtonTooltipVisible = ({ state, isMobile }) => state === "collapsed" && !isMobile;
+/**
+* The sidebar's displayed open state: the requested state (controlled prop,
+* or the uncontrolled fallback), masked by `forceCollapsed`. A host can force
+* the sidebar collapsed (e.g. a narrow viewport) without losing track of
+* what the user actually asked for.
+*/
+const resolveSidebarOpen = ({ requestedOpen, forceCollapsed }) => requestedOpen && !forceCollapsed;
+/** The `data-state` driven off the sidebar's displayed open state. */
+const deriveSidebarState = (open) => open ? "expanded" : "collapsed";
+/**
+* `toggleSidebar`'s desktop transition: it flips the *requested* open state,
+* not the *displayed* one. `forceCollapsed` can mask a `true` requested state
+* down to a collapsed display; toggling while forced-collapsed still records
+* the flip so it takes effect once `forceCollapsed` lifts.
+*/
+const nextRequestedOpen = (requestedOpen) => !requestedOpen;
+/** `toggleSidebar`'s mobile transition: it flips the sheet's open state. */
+const nextOpenMobile = (openMobile) => !openMobile;
+//#endregion
+export { deriveSidebarState, isSidebarMenuButtonTooltipVisible, nextOpenMobile, nextRequestedOpen, resolveSidebarOpen };