@od-oneapp/uni-ui 2026.1.1301

package/dist/sidebar-CdWE7H3R.mjs

@@ -0,0 +1,814 @@
+'use client';
+import { t as cn } from "./utils-D2bGp2p_.mjs";
+import { a as SPRING_TACTILE, i as SPRING_GENTLE } from "./motion-zelaDelJ.mjs";
+import { t as Skeleton } from "./skeleton-aXwA3YID.mjs";
+import { t as Button } from "./button-DVOrrZLw.mjs";
+import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "./tooltip-B8_zKnHC.mjs";
+import { n as ErrorBoundary } from "./error-boundary-Ggc5btkU.mjs";
+import { t as Separator } from "./separator-veJJBul5.mjs";
+import { t as Input } from "./input-DhpkXN3J.mjs";
+import * as React$1 from "react";
+import { memo, useMemo } from "react";
+import { useHotkeys, useMediaQuery, useReducedMotion } from "@mantine/hooks";
+import { cva } from "class-variance-authority";
+import { PanelLeftIcon, XIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+
+//#region src/components/elements/organisms/sheet/sheet.tsx
+/**
+* @fileoverview Sheet Component - Premium Harmony V2
+*
+* A slide-out panel from screen edges with configurable side and size options.
+* Provides off-canvas content panels for navigation, forms, or details.
+*
+* Features:
+* - Premium Harmony V2 spring physics animations (SPRING_GENTLE)
+* - Motion/React for smooth, performant animations
+* - Reduced motion support with useReducedMotion
+* - ES2023 syntax with modern patterns
+* - Tailwind v4 CSS-first theming with CSS variables
+* - Super light/dark mode with seamless switching
+* - CVA variants for side and size
+* - Radix UI Dialog primitives for accessibility
+* - Slide animations from all edges
+* - ErrorBoundary wrapper for resilience
+* - Focus trap and scroll lock
+* - ForwardRef support on SheetTrigger
+* - Data attributes for state management (data-state, data-side)
+* - Semantic color tokens (no hardcoded colors)
+* - Focus-visible ring styles for interactive elements
+* - AnimatePresence for conditional rendering
+*
+* @module @od-oneapp/uni-ui/components/sheet
+*
+* @component Sheet
+*
+* @useCases
+* - Display navigation menus that slide in from the left or right edge
+* - Show contextual forms or settings panels without navigating away
+* - Present detailed information or filters in a dismissible side panel
+* - Create mobile-friendly navigation drawers with touch support
+* - Display shopping carts, notifications, or user profiles in slide-out panels
+* - Support multi-step workflows with persistent side navigation
+* - Adapt panel size based on content complexity (sm, default, lg, xl, full)
+* - Ensure accessibility with keyboard navigation and screen reader support
+*
+* @subcomponents
+* - Sheet - Root container with ErrorBoundary
+* - SheetTrigger - Button/element that opens the sheet
+* - SheetClose - Close button element
+* - SheetPortal - Portal container
+* - SheetOverlay - Background overlay
+* - SheetContent - Main panel content
+* - SheetHeader - Header section
+* - SheetFooter - Footer section
+* - SheetTitle - Sheet title
+* - SheetDescription - Sheet description
+*
+* @variants
+* - side: right (default), left, top, bottom
+* - size: sm, default, lg, xl, full
+*
+* @example
+* <Sheet>
+*   <SheetTrigger>Open Sheet</SheetTrigger>
+*   <SheetContent side="right" size="lg">
+*     <SheetHeader>
+*       <SheetTitle>Settings</SheetTitle>
+*       <SheetDescription>Configure your preferences</SheetDescription>
+*     </SheetHeader>
+*     <div>Sheet content</div>
+*     <SheetFooter>
+*       <SheetClose>Close</SheetClose>
+*     </SheetFooter>
+*   </SheetContent>
+* </Sheet>
+*/
+const SheetContext = React$1.createContext({ open: false });
+const useSheetContext = () => React$1.useContext(SheetContext);
+const SHEET_TRIGGER_BASE_CLASSNAME = "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none";
+const SHEET_OVERLAY_BASE_CLASSNAME = "fixed inset-0 z-50 bg-black/50 backdrop-blur-xs";
+const SHEET_CLOSE_BUTTON_CLASSNAME = "ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none active:scale-95";
+const SHEET_HEADER_BASE_CLASSNAME = "flex flex-col gap-1.5 p-4";
+const SHEET_FOOTER_BASE_CLASSNAME = "mt-auto flex flex-col gap-2 p-4";
+const SHEET_TITLE_BASE_CLASSNAME = "text-foreground font-semibold";
+const SHEET_DESCRIPTION_BASE_CLASSNAME = "text-muted-foreground text-sm";
+const DEFAULT_SHEET_SIDE = "right";
+const SHEET_CLOSE_SR_TEXT = "Close";
+const SHEET_CLOSE_ICON_CLASSNAME = "size-4";
+/**
+* Wraps the Radix Sheet root in an ErrorBoundary and renders it with `data-slot="sheet"`.
+*
+* @param props - Props forwarded to `SheetPrimitive.Root`
+* @returns The rendered Sheet root element
+*/
+const Sheet = memo(function Sheet({ children, ...props }) {
+	return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(SheetPrimitive.Root, {
+		"data-slot": "sheet",
+		...props,
+		children: /* @__PURE__ */ jsx(SheetContext.Provider, {
+			value: { open: props.open ?? false },
+			children
+		})
+	}) });
+});
+const SheetTrigger = React$1.forwardRef(({ className, asChild = false, children, ...props }, ref) => {
+	const reducedMotion = useReducedMotion() ?? false;
+	const triggerClassName = useMemo(() => cn(SHEET_TRIGGER_BASE_CLASSNAME, className), [className]);
+	const Comp = asChild ? Slot : motion.button;
+	return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, {
+		asChild,
+		children: /* @__PURE__ */ jsx(Comp, {
+			ref,
+			"data-slot": "sheet-trigger",
+			className: triggerClassName,
+			...asChild ? {} : {
+				whileTap: reducedMotion ? void 0 : { scale: .98 },
+				transition: reducedMotion ? { duration: 0 } : SPRING_GENTLE
+			},
+			...props,
+			children
+		})
+	});
+});
+SheetTrigger.displayName = "SheetTrigger";
+/**
+* Renders the Sheet's close control and forwards all provided props to the underlying Radix `Close` element.
+*
+* @param props - Props to pass through to the underlying `SheetPrimitive.Close` element.
+* @returns The configured `SheetPrimitive.Close` element with `data-slot="sheet-close"`.
+*/
+const SheetClose = memo(function SheetClose({ ...props }) {
+	return /* @__PURE__ */ jsx(SheetPrimitive.Close, {
+		"data-slot": "sheet-close",
+		...props
+	});
+});
+const SheetPortal = memo(function SheetPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(SheetPrimitive.Portal, {
+		"data-slot": "sheet-portal",
+		...props
+	});
+});
+const SheetOverlay = memo(function SheetOverlay({ className, ...props }) {
+	const reducedMotion = useReducedMotion() ?? false;
+	const { open } = useSheetContext();
+	const overlayClassName = useMemo(() => cn(SHEET_OVERLAY_BASE_CLASSNAME, className), [className]);
+	return /* @__PURE__ */ jsx(SheetPrimitive.Overlay, {
+		asChild: true,
+		forceMount: true,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "sheet-overlay",
+			"data-state": open ? "open" : "closed",
+			className: overlayClassName,
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			exit: { opacity: 0 },
+			transition: reducedMotion ? { duration: 0 } : { duration: .2 },
+			...props
+		})
+	});
+});
+const sheetContentVariants = cva("bg-background fixed z-50 flex flex-col gap-4 shadow-lg", {
+	variants: {
+		side: {
+			right: "inset-y-0 right-0 h-full border-l",
+			left: "inset-y-0 left-0 h-full border-r",
+			top: "inset-x-0 top-0 h-auto border-b",
+			bottom: "inset-x-0 bottom-0 h-auto border-t"
+		},
+		size: {
+			sm: "[&[data-side=left]]:w-2/3 [&[data-side=right]]:w-2/3 sm:[&[data-side=left]]:max-w-xs sm:[&[data-side=right]]:max-w-xs",
+			default: "[&[data-side=left]]:w-3/4 [&[data-side=right]]:w-3/4 sm:[&[data-side=left]]:max-w-sm sm:[&[data-side=right]]:max-w-sm",
+			lg: "[&[data-side=left]]:w-4/5 [&[data-side=right]]:w-4/5 sm:[&[data-side=left]]:max-w-md sm:[&[data-side=right]]:max-w-md",
+			xl: "[&[data-side=left]]:w-5/6 [&[data-side=right]]:w-5/6 sm:[&[data-side=left]]:max-w-lg sm:[&[data-side=right]]:max-w-lg",
+			full: "[&[data-side=left]]:w-full [&[data-side=right]]:w-full"
+		}
+	},
+	defaultVariants: {
+		side: "right",
+		size: "default"
+	}
+});
+const SheetContent = memo(function SheetContent({ className, children, side = DEFAULT_SHEET_SIDE, size, ...props }) {
+	const { open } = useSheetContext();
+	const reducedMotion = useReducedMotion() ?? false;
+	const contentClassName = useMemo(() => cn(sheetContentVariants({
+		side,
+		size
+	}), className), [
+		side,
+		size,
+		className
+	]);
+	const closeButton = useMemo(() => /* @__PURE__ */ jsx(SheetPrimitive.Close, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(motion.button, {
+			className: SHEET_CLOSE_BUTTON_CLASSNAME,
+			whileTap: reducedMotion ? void 0 : { scale: .95 },
+			transition: reducedMotion ? { duration: 0 } : SPRING_GENTLE,
+			children: [/* @__PURE__ */ jsx(XIcon, { className: SHEET_CLOSE_ICON_CLASSNAME }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: SHEET_CLOSE_SR_TEXT
+			})]
+		})
+	}), [reducedMotion]);
+	const getVariants = (side) => {
+		switch (side) {
+			case "left": return {
+				initial: { x: "-100%" },
+				animate: { x: 0 },
+				exit: { x: "-100%" }
+			};
+			case "right": return {
+				initial: { x: "100%" },
+				animate: { x: 0 },
+				exit: { x: "100%" }
+			};
+			case "top": return {
+				initial: { y: "-100%" },
+				animate: { y: 0 },
+				exit: { y: "-100%" }
+			};
+			case "bottom": return {
+				initial: { y: "100%" },
+				animate: { y: 0 },
+				exit: { y: "100%" }
+			};
+			default: return {
+				initial: { x: "100%" },
+				animate: { x: 0 },
+				exit: { x: "100%" }
+			};
+		}
+	};
+	const variants = getVariants(side);
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsxs(SheetPortal, {
+		forceMount: true,
+		children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsx(SheetPrimitive.Content, {
+			asChild: true,
+			forceMount: true,
+			...props,
+			children: /* @__PURE__ */ jsxs(motion.div, {
+				"data-slot": "sheet-content",
+				"data-side": side,
+				"data-state": open ? "open" : "closed",
+				className: contentClassName,
+				initial: reducedMotion ? variants.animate : variants.initial,
+				animate: variants.animate,
+				exit: reducedMotion ? variants.animate : variants.exit,
+				transition: reducedMotion ? { duration: 0 } : SPRING_GENTLE,
+				children: [children, closeButton]
+			})
+		})]
+	}) : null });
+});
+const SheetHeader = memo(function SheetHeader({ className, ...props }) {
+	const headerClassName = useMemo(() => cn(SHEET_HEADER_BASE_CLASSNAME, className), [className]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-header",
+		className: headerClassName,
+		...props
+	});
+});
+const SheetFooter = memo(function SheetFooter({ className, ...props }) {
+	const footerClassName = useMemo(() => cn(SHEET_FOOTER_BASE_CLASSNAME, className), [className]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-footer",
+		className: footerClassName,
+		...props
+	});
+});
+const SheetTitle = memo(function SheetTitle({ className, ...props }) {
+	const titleClassName = useMemo(() => cn(SHEET_TITLE_BASE_CLASSNAME, className), [className]);
+	return /* @__PURE__ */ jsx(SheetPrimitive.Title, {
+		"data-slot": "sheet-title",
+		className: titleClassName,
+		...props
+	});
+});
+const SheetDescription = memo(function SheetDescription({ className, ...props }) {
+	const descriptionClassName = useMemo(() => cn(SHEET_DESCRIPTION_BASE_CLASSNAME, className), [className]);
+	return /* @__PURE__ */ jsx(SheetPrimitive.Description, {
+		"data-slot": "sheet-description",
+		className: descriptionClassName,
+		...props
+	});
+});
+
+//#endregion
+//#region src/components/layout/sidebar/sidebar.tsx
+/**
+* @fileoverview Sidebar Component - Premium Harmony V2
+*
+* A comprehensive collapsible sidebar navigation component with responsive behavior.
+* Supports desktop (collapsible) and mobile (sheet) modes with full keyboard navigation
+* and Premium Harmony V2 motion standards.
+*
+* Features:
+* - ES2023 syntax with modern patterns
+* - Tailwind v4 CSS-first theming with CSS variables
+* - Premium Harmony V2 spring physics (SPRING_TACTILE)
+* - Touch detection with automatic sizing for mobile devices
+* - Reduced motion support for accessibility
+* - Multiple variants (sidebar, floating, inset) and collapsible modes (offcanvas, icon, none)
+* - Super light/dark mode with seamless switching
+* - Complete pseudo-state coverage (:hover, :focus-visible, :active, :disabled)
+* - Cookie-based state persistence
+* - Data attributes for state management
+* - WCAG 2.5.5 compliant 44px minimum touch targets
+* - Enhanced focus styles with ring indicators
+* - Keyboard shortcut support (Ctrl/Cmd+B)
+*
+* @module @od-oneapp/uni-ui/components/layout/sidebar
+* @component Sidebar
+*
+* @useCases
+* - Application navigation: Primary navigation menu with expandable/collapsible sections
+* - Dashboard layouts: Side navigation for admin panels, dashboards, settings pages
+* - Multi-level navigation: Hierarchical menu structures with submenu support
+* - Responsive layouts: Mobile sheet overlay, desktop persistent/floating sidebar
+* - Space-efficient designs: Icon-only collapsed mode for maximizing content area
+* - Touch interfaces: Mobile-optimized navigation with WCAG 2.5.5 compliant 44px touch targets
+* - Keyboard navigation: Full keyboard support with Ctrl/Cmd+B toggle shortcut
+* - Contextual actions: Group and menu item actions with hover/focus states
+* - Search integration: Built-in search input component for filtering navigation
+* - Loading states: Skeleton loaders for async navigation content
+* - Branded experiences: Floating and inset variants for custom visual styles
+* - Accessibility: Screen reader support, keyboard navigation, reduced motion support
+*
+* @subcomponents
+* - SidebarProvider - Context provider for sidebar state
+* - Sidebar - Main sidebar container (side: left|right, variant: sidebar|floating|inset)
+* - SidebarHeader - Header section
+* - SidebarContent - Scrollable content area
+* - SidebarFooter - Footer section
+* - SidebarGroup - Groups related items
+* - SidebarGroupLabel - Label for a group
+* - SidebarGroupAction - Action button in group header
+* - SidebarGroupContent - Group content wrapper
+* - SidebarMenu - Menu container
+* - SidebarMenuItem - Individual menu item
+* - SidebarMenuButton - Clickable menu button (variants: default|outline, sizes: default|sm|lg|touch)
+* - SidebarMenuAction - Action button in menu item
+* - SidebarMenuBadge - Badge in menu item
+* - SidebarMenuSkeleton - Loading skeleton
+* - SidebarMenuSub - Submenu container
+* - SidebarMenuSubItem - Submenu item
+* - SidebarMenuSubButton - Submenu button
+* - SidebarTrigger - Toggle button
+* - SidebarRail - Resize handle
+* - SidebarInset - Main content area
+* - SidebarInput - Search input
+* - SidebarSeparator - Visual separator
+* - useSidebar - Hook to access sidebar state and controls
+*
+* @variants
+* - variant: sidebar | floating | inset
+* - collapsible: offcanvas | icon | none
+* - side: left | right
+* - size (SidebarMenuButton): default | sm | lg | touch
+*
+* @example <SidebarProvider><Sidebar><SidebarHeader>Logo</SidebarHeader><SidebarContent><SidebarGroup><SidebarGroupLabel>Menu</SidebarGroupLabel><SidebarMenu><SidebarMenuItem><SidebarMenuButton>Dashboard</SidebarMenuButton></SidebarMenuItem></SidebarMenu></SidebarGroup></SidebarContent><SidebarFooter>Footer</SidebarFooter></Sidebar><SidebarInset>Main content</SidebarInset></SidebarProvider>
+*/
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SidebarContext = React$1.createContext(null);
+function useSidebar() {
+	const context = React$1.useContext(SidebarContext);
+	if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
+	return context;
+}
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) {
+	const [mounted, setMounted] = React$1.useState(false);
+	React$1.useEffect(() => {
+		setMounted(true);
+	}, []);
+	const isMobile = useMediaQuery("(max-width: 767px)") ?? false;
+	const isTouchDevice = useMediaQuery("(pointer: coarse)") ?? false;
+	const prefersReducedMotion = useReducedMotion() ?? false;
+	const mobileActive = mounted && isMobile;
+	const touchActive = mounted && isTouchDevice;
+	const motionReduced = mounted && prefersReducedMotion;
+	const [openMobile, setOpenMobile] = React$1.useState(false);
+	const [internalOpen, setInternalOpen] = React$1.useState(defaultOpen);
+	const open = openProp ?? internalOpen;
+	const setOpen = React$1.useCallback((value) => {
+		const openState = typeof value === "function" ? value(open) : value;
+		if (setOpenProp) setOpenProp(openState);
+		else setInternalOpen(openState);
+	}, [setOpenProp, open]);
+	const toggleSidebar = React$1.useCallback(() => {
+		return mobileActive ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+	}, [
+		mobileActive,
+		setOpen,
+		setOpenMobile
+	]);
+	useHotkeys([[
+		"mod+b",
+		toggleSidebar,
+		{ preventDefault: true }
+	]], [
+		"input",
+		"textarea",
+		"select"
+	]);
+	const state = open ? "expanded" : "collapsed";
+	const contextValue = React$1.useMemo(() => ({
+		state,
+		open,
+		setOpen,
+		isMobile: mobileActive,
+		isTouchDevice: touchActive,
+		prefersReducedMotion: motionReduced,
+		openMobile,
+		setOpenMobile,
+		toggleSidebar
+	}), [
+		state,
+		open,
+		setOpen,
+		mobileActive,
+		touchActive,
+		motionReduced,
+		openMobile,
+		setOpenMobile,
+		toggleSidebar
+	]);
+	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(TooltipProvider, {
+			delayDuration: 0,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "sidebar-wrapper",
+				style: {
+					"--sidebar-width": SIDEBAR_WIDTH,
+					"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+					...style
+				},
+				className: cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full bg-gray-200 p-2", className),
+				...props,
+				children
+			})
+		})
+	});
+}
+/**
+* Render a responsive Sidebar component that adapts between desktop and mobile layouts and supports configurable visual and collapsible variants.
+*
+* @param side - Placement of the sidebar: `'left'` or `'right'`.
+* @param variant - Visual style of the sidebar: `'sidebar'`, `'floating'`, or `'inset'`.
+* @param collapsible - Collapsible behavior: `'offcanvas'`, `'icon'`, or `'none'`.
+* @returns The rendered Sidebar React element configured for the current device and state.
+*/
+function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }) {
+	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+	if (collapsible === "none") return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar",
+		className: cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className),
+		...props,
+		children
+	}) });
+	if (isMobile) return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Sheet, {
+		open: openMobile,
+		onOpenChange: setOpenMobile,
+		...props,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			"data-sidebar": "sidebar",
+			"data-slot": "sidebar",
+			"data-mobile": "true",
+			className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+			style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
+			side,
+			children: [/* @__PURE__ */ jsxs(SheetHeader, {
+				className: "sr-only",
+				children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex h-full w-full flex-col",
+				children
+			})]
+		})
+	}) });
+	return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs("div", {
+		className: "group peer text-sidebar-foreground",
+		"data-state": state,
+		"data-collapsible": state === "collapsed" ? collapsible : "",
+		"data-variant": variant,
+		"data-side": side,
+		"data-slot": "sidebar",
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "sidebar-gap",
+			className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-in-out", "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)")
+		}), /* @__PURE__ */ jsx("div", {
+			"data-slot": "sidebar-container",
+			className: cn("fixed inset-y-0 z-10 flex h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-in-out", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[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-r group-data-[side=right]:border-l", className),
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-sidebar": "sidebar",
+				"data-slot": "sidebar-inner",
+				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",
+				children
+			})
+		})]
+	}) });
+}
+function SidebarTrigger({ className, onClick, ...props }) {
+	const { toggleSidebar, isTouchDevice, prefersReducedMotion } = useSidebar();
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-sidebar": "trigger",
+		"data-slot": "sidebar-trigger",
+		"data-touch": isTouchDevice,
+		variant: "ghost",
+		size: "icon",
+		className: cn("size-7", className),
+		onClick: (event) => {
+			onClick?.(event);
+			toggleSidebar();
+		},
+		whileTap: prefersReducedMotion ? void 0 : { scale: .98 },
+		transition: prefersReducedMotion ? void 0 : SPRING_TACTILE,
+		...props,
+		children: [/* @__PURE__ */ jsx(PanelLeftIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Toggle Sidebar"
+		})]
+	});
+}
+/**
+* Renders a clickable rail control that toggles the sidebar.
+*
+* The component renders a button styled and positioned as the sidebar rail,
+* exposes ARIA attributes and keyboard support (Enter / Space), and forwards
+* native button props to the underlying element.
+*
+* @returns A button element that toggles the sidebar when clicked or activated via keyboard.
+*/
+function SidebarRail({ className, ...props }) {
+	const { toggleSidebar } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-sidebar": "rail",
+		"data-slot": "sidebar-rail",
+		"aria-label": "Toggle Sidebar",
+		tabIndex: 0,
+		onClick: toggleSidebar,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				toggleSidebar();
+			}
+		},
+		title: "Toggle Sidebar",
+		className: cn("hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex", "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]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", "focus-visible:ring-sidebar-ring focus-visible:ring-offset-sidebar focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none", className),
+		...props
+	});
+}
+function SidebarInset({ className, ...props }) {
+	return /* @__PURE__ */ jsx("main", {
+		"data-slot": "sidebar-inset",
+		className: cn("bg-background relative flex w-full flex-1 flex-col overflow-x-hidden overflow-y-auto", "md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:rounded-b-xl md:peer-data-[variant=inset]:shadow-sm", className),
+		style: { height: "calc(100vh - 16px)" },
+		...props
+	});
+}
+function SidebarInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "sidebar-input",
+		"data-sidebar": "input",
+		className: cn("bg-background h-8 w-full shadow-none", className),
+		...props
+	});
+}
+function SidebarHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-header",
+		"data-sidebar": "header",
+		className: cn("flex flex-col gap-2 p-2", className),
+		...props
+	});
+}
+function SidebarFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-footer",
+		"data-sidebar": "footer",
+		className: cn("flex flex-col gap-2 p-2", className),
+		...props
+	});
+}
+function SidebarSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "sidebar-separator",
+		"data-sidebar": "separator",
+		className: cn("bg-sidebar-border mx-2 w-auto", className),
+		...props
+	});
+}
+function SidebarContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-content",
+		"data-sidebar": "content",
+		className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className),
+		...props
+	});
+}
+function SidebarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-group",
+		"data-sidebar": "group",
+		className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+		...props
+	});
+}
+function SidebarGroupLabel({ className, asChild = false, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		"data-slot": "sidebar-group-label",
+		"data-sidebar": "group-label",
+		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]:-mt-8 group-data-[collapsible=icon]:opacity-0", className),
+		...props
+	});
+}
+function SidebarGroupAction({ className, asChild = false, ...props }) {
+	const { isTouchDevice, prefersReducedMotion } = useSidebar();
+	const Comp = asChild ? motion(Slot) : motion.button;
+	const { onDrag, onDragStart, onDragEnd, onAnimationStart, style: _style, ...cleanProps } = props;
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "sidebar-group-action",
+		"data-sidebar": "group-action",
+		"data-touch": isTouchDevice,
+		className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 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),
+		whileTap: prefersReducedMotion ? void 0 : { scale: .98 },
+		transition: prefersReducedMotion ? void 0 : SPRING_TACTILE,
+		...cleanProps
+	});
+}
+function SidebarGroupContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-group-content",
+		"data-sidebar": "group-content",
+		className: cn("w-full text-sm", className),
+		...props
+	});
+}
+function SidebarMenu({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "sidebar-menu",
+		"data-sidebar": "menu",
+		className: cn("flex w-full min-w-0 flex-col gap-1", className),
+		...props
+	});
+}
+function SidebarMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "sidebar-menu-item",
+		"data-sidebar": "menu-item",
+		className: cn("group/menu-item relative", className),
+		...props
+	});
+}
+const sidebarMenuButtonVariants = cva("peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding,transform] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+			outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
+		},
+		size: {
+			default: "h-8 text-sm",
+			sm: "h-7 text-xs",
+			lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+			touch: "h-11 text-base group-data-[collapsible=icon]:p-0!"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+const SidebarMenuButton = React$1.forwardRef(({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, children, ...props }, ref) => {
+	const Comp = asChild ? motion.create(Slot) : motion.button;
+	const { isMobile, state, isTouchDevice, prefersReducedMotion } = useSidebar();
+	const { onDrag, onDragStart, onDragEnd, onAnimationStart, style: _style, ...cleanProps } = props;
+	const button = /* @__PURE__ */ jsx(Comp, {
+		ref,
+		"data-slot": "sidebar-menu-button",
+		"data-sidebar": "menu-button",
+		"data-size": size,
+		"data-active": isActive,
+		"data-touch": isTouchDevice,
+		className: cn(sidebarMenuButtonVariants({
+			variant,
+			size
+		}), "focus-visible:ring-sidebar-ring focus-visible:ring-offset-sidebar focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none", className),
+		whileTap: prefersReducedMotion ? void 0 : { scale: .98 },
+		transition: prefersReducedMotion ? void 0 : SPRING_TACTILE,
+		...cleanProps,
+		children
+	});
+	if (!tooltip) return button;
+	if (typeof tooltip === "string") tooltip = { children: tooltip };
+	if (asChild) return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { children: button }), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "right",
+		align: "center",
+		hidden: state !== "collapsed" || isMobile,
+		...tooltip
+	})] });
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: button
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "right",
+		align: "center",
+		hidden: state !== "collapsed" || isMobile,
+		...tooltip
+	})] });
+});
+SidebarMenuButton.displayName = "SidebarMenuButton";
+/**
+* Renders an action button positioned inside a sidebar menu item.
+*
+* @param asChild - If `true`, renders the provided child element instead of a native `button`.
+* @param showOnHover - When `true`, the action is visually hidden by default and becomes visible when the menu item is active, open, focused, or hovered (remains hidden on desktop unless triggered).
+* @returns The JSX element for the menu item action button, with positioning, accessibility, and focus styles applied.
+*/
+function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }) {
+	const { isTouchDevice, prefersReducedMotion } = useSidebar();
+	const Comp = asChild ? motion(Slot) : motion.button;
+	const { onDrag, onDragStart, onDragEnd, onAnimationStart, style: _style, ...cleanProps } = props;
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "sidebar-menu-action",
+		"data-sidebar": "menu-action",
+		"data-touch": isTouchDevice,
+		className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 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", "focus-visible:ring-sidebar-ring focus-visible:ring-offset-sidebar focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none", className),
+		whileTap: prefersReducedMotion ? void 0 : { scale: .98 },
+		transition: prefersReducedMotion ? void 0 : SPRING_TACTILE,
+		...cleanProps
+	});
+}
+function SidebarMenuBadge({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-menu-badge",
+		"data-sidebar": "menu-badge",
+		className: cn("text-sidebar-foreground pointer-events-none absolute right-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", "group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+}
+function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
+	const [width, setWidth] = React$1.useState("50%");
+	React$1.useEffect(() => {
+		setWidth(`${Math.floor(Math.random() * 40) + 50}%`);
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "sidebar-menu-skeleton",
+		"data-sidebar": "menu-skeleton",
+		className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+		...props,
+		children: [showIcon ? /* @__PURE__ */ jsx(Skeleton, {
+			className: "size-4 rounded-md",
+			"data-sidebar": "menu-skeleton-icon"
+		}) : null, /* @__PURE__ */ jsx(Skeleton, {
+			className: "h-4 max-w-(--skeleton-width) flex-1",
+			"data-sidebar": "menu-skeleton-text",
+			style: { "--skeleton-width": width }
+		})]
+	});
+}
+function SidebarMenuSub({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "sidebar-menu-sub",
+		"data-sidebar": "menu-sub",
+		className: cn("border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5", "group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+}
+function SidebarMenuSubItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "sidebar-menu-sub-item",
+		"data-sidebar": "menu-sub-item",
+		className: cn("group/menu-sub-item relative", className),
+		...props
+	});
+}
+function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false, className, ...props }) {
+	const { isTouchDevice, prefersReducedMotion } = useSidebar();
+	const Comp = asChild ? motion(Slot) : motion.a;
+	const { onDrag, onDragStart, onDragEnd, onAnimationStart, style: _style, ...cleanProps } = props;
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "sidebar-menu-sub-button",
+		"data-sidebar": "menu-sub-button",
+		"data-size": size,
+		"data-active": isActive,
+		"data-touch": isTouchDevice,
+		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),
+		whileTap: prefersReducedMotion ? void 0 : { scale: .98 },
+		transition: prefersReducedMotion ? void 0 : SPRING_TACTILE,
+		...cleanProps
+	});
+}
+
+//#endregion
+export { SheetHeader as A, SidebarTrigger as C, SheetContent as D, SheetClose as E, SheetTrigger as M, sheetContentVariants as N, SheetDescription as O, SidebarSeparator as S, Sheet as T, SidebarMenuSub as _, SidebarGroupAction as a, SidebarProvider as b, SidebarHeader as c, SidebarMenu as d, SidebarMenuAction as f, SidebarMenuSkeleton as g, SidebarMenuItem as h, SidebarGroup as i, SheetTitle as j, SheetFooter as k, SidebarInput as l, SidebarMenuButton as m, SidebarContent as n, SidebarGroupContent as o, SidebarMenuBadge as p, SidebarFooter as r, SidebarGroupLabel as s, Sidebar as t, SidebarInset as u, SidebarMenuSubButton as v, useSidebar as w, SidebarRail as x, SidebarMenuSubItem as y };
+//# sourceMappingURL=sidebar-CdWE7H3R.mjs.map