{"version":3,"file":"components\\ui\\sidebar.cjs","sources":["webpack://@arolariu/components/./src/components/ui/sidebar.tsx"],"sourcesContent":["\r\n\r\nimport * as React from \"react\";\r\nimport { PanelLeftIcon } from \"lucide-react\";\r\nimport { useIsMobile } from \"./../../hooks/use-mobile\";\r\nimport {\r\n Tooltip,\r\n TooltipContent,\r\n TooltipProvider,\r\n TooltipTrigger,\r\n} from \"./tooltip\";\r\nimport { cn } from \"./../../lib/utils\";\r\nimport {\r\n Sheet,\r\n SheetContent,\r\n SheetDescription,\r\n SheetHeader,\r\n SheetTitle,\r\n} from \"./sheet\";\r\nimport { Input } from \"./input\";\r\nimport { Skeleton } from \"./skeleton\";\r\nimport { Button } from \"./button\";\r\nimport { Separator } from \"./separator\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\";\r\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\r\nconst SIDEBAR_WIDTH = \"16rem\";\r\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\";\r\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\r\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\r\n\r\ntype SidebarContext = {\r\n state: \"expanded\" | \"collapsed\";\r\n open: boolean;\r\n setOpen: (open: boolean) => void;\r\n openMobile: boolean;\r\n setOpenMobile: (open: boolean) => void;\r\n isMobile: boolean;\r\n toggleSidebar: () => void;\r\n};\r\n\r\nconst SidebarContext = React.createContext(null);\r\n\r\nfunction useSidebar() {\r\n const context = React.useContext(SidebarContext);\r\n if (!context) {\r\n throw new Error(\"useSidebar must be used within a SidebarProvider.\");\r\n }\r\n\r\n return context;\r\n}\r\n\r\nfunction SidebarProvider({\r\n defaultOpen = true,\r\n open: openProp,\r\n onOpenChange: setOpenProp,\r\n className,\r\n style,\r\n children,\r\n ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n defaultOpen?: boolean;\r\n open?: boolean;\r\n onOpenChange?: (open: boolean) => void;\r\n}) {\r\n const isMobile = useIsMobile();\r\n const [openMobile, setOpenMobile] = React.useState(false);\r\n\r\n // This is the internal state of the sidebar.\r\n // We use openProp and setOpenProp for control from outside the component.\r\n const [_open, _setOpen] = React.useState(defaultOpen);\r\n const open = openProp ?? _open;\r\n const setOpen = React.useCallback(\r\n (value: boolean | ((value: boolean) => boolean)) => {\r\n const openState = typeof value === \"function\" ? value(open) : value;\r\n if (setOpenProp) {\r\n setOpenProp(openState);\r\n } else {\r\n _setOpen(openState);\r\n }\r\n\r\n // This sets the cookie to keep the sidebar state.\r\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\r\n },\r\n [setOpenProp, open]\r\n );\r\n\r\n // Helper to toggle the sidebar.\r\n const toggleSidebar = React.useCallback(() => {\r\n return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\r\n }, [isMobile, setOpen, setOpenMobile]);\r\n\r\n // Adds a keyboard shortcut to toggle the sidebar.\r\n React.useEffect(() => {\r\n const handleKeyDown = (event: KeyboardEvent) => {\r\n if (\r\n event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\r\n (event.metaKey || event.ctrlKey)\r\n ) {\r\n event.preventDefault();\r\n toggleSidebar();\r\n }\r\n };\r\n\r\n window.addEventListener(\"keydown\", handleKeyDown);\r\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\r\n }, [toggleSidebar]);\r\n\r\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\r\n // This makes it easier to style the sidebar with Tailwind classes.\r\n const state = open ? \"expanded\" : \"collapsed\";\r\n\r\n const contextValue = React.useMemo(\r\n () => ({\r\n state,\r\n open,\r\n setOpen,\r\n isMobile,\r\n openMobile,\r\n setOpenMobile,\r\n toggleSidebar,\r\n }),\r\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\r\n );\r\n\r\n return (\r\n \r\n \r\n \r\n {children}\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction Sidebar({\r\n side = \"left\",\r\n variant = \"sidebar\",\r\n collapsible = \"offcanvas\",\r\n className,\r\n children,\r\n ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n side?: \"left\" | \"right\";\r\n variant?: \"sidebar\" | \"floating\" | \"inset\";\r\n collapsible?: \"offcanvas\" | \"icon\" | \"none\";\r\n}) {\r\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\r\n\r\n if (collapsible === \"none\") {\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n }\r\n\r\n if (isMobile) {\r\n return (\r\n \r\n button]:hidden\"\r\n style={\r\n {\r\n \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\r\n } as React.CSSProperties\r\n }\r\n side={side}\r\n >\r\n \r\n Sidebar\r\n Displays the mobile sidebar.\r\n \r\n
{children}
\r\n \r\n \r\n );\r\n }\r\n\r\n return (\r\n