@arolariu/components 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,7 +5,7 @@ import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
5
5
  import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
6
6
  import { Drawer, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./drawer.js";
7
7
  import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./dropdown-menu.js";
8
- import { useIsMobile } from "../../hooks/use-mobile.js";
8
+ import { useIsMobile } from "../../hooks/useIsMobile.js";
9
9
  import { cn } from "../../lib/utils.js";
10
10
  const DropDrawerContext = /*#__PURE__*/ createContext({
11
11
  isMobile: false
@@ -1 +1 @@
1
- {"version":3,"file":"components\\ui\\dropdrawer.js","sources":["webpack://@arolariu/components/./src/components/ui/dropdrawer.tsx"],"sourcesContent":["\n\nimport { AnimatePresence, motion, Transition } from \"motion/react\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/components/ui/drawer\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { useIsMobile } from \"@/hooks/use-mobile\";\nimport { cn } from \"@/lib/utils\";\n\nconst DropDrawerContext = React.createContext<{ isMobile: boolean }>({\n isMobile: false,\n});\n\nconst useDropDrawerContext = () => {\n const context = React.useContext(DropDrawerContext);\n if (!context) {\n throw new Error(\n \"DropDrawer components cannot be rendered outside the Context\",\n );\n }\n return context;\n};\n\nfunction DropDrawer({\n children,\n ...props\n}:\n | React.ComponentProps<typeof Drawer>\n | React.ComponentProps<typeof DropdownMenu>) {\n const isMobile = useIsMobile();\n const DropdownComponent = isMobile ? Drawer : DropdownMenu;\n\n return (\n <DropDrawerContext.Provider value={{ isMobile }}>\n <DropdownComponent\n data-slot=\"drop-drawer\"\n {...(isMobile && { autoFocus: true })}\n {...props}\n >\n {children}\n </DropdownComponent>\n </DropDrawerContext.Provider>\n );\n}\n\nfunction DropDrawerTrigger({\n className,\n children,\n ...props\n}:\n | React.ComponentProps<typeof DrawerTrigger>\n | React.ComponentProps<typeof DropdownMenuTrigger>) {\n const { isMobile } = useDropDrawerContext();\n const TriggerComponent = isMobile ? DrawerTrigger : DropdownMenuTrigger;\n\n return (\n <TriggerComponent\n data-slot=\"drop-drawer-trigger\"\n className={className}\n {...props}\n >\n {children}\n </TriggerComponent>\n );\n}\n\nfunction DropDrawerContent({\n className,\n children,\n ...props\n}:\n | React.ComponentProps<typeof DrawerContent>\n | React.ComponentProps<typeof DropdownMenuContent>) {\n const { isMobile } = useDropDrawerContext();\n const [activeSubmenu, setActiveSubmenu] = React.useState<string | null>(null);\n const [submenuTitle, setSubmenuTitle] = React.useState<string | null>(null);\n const [submenuStack, setSubmenuStack] = React.useState<\n { id: string; title: string }[]\n >([]);\n // Add animation direction state\n const [animationDirection, setAnimationDirection] = React.useState<\n \"forward\" | \"backward\"\n >(\"forward\");\n\n // Create a ref to store submenu content by ID\n const submenuContentRef = React.useRef<Map<string, React.ReactNode[]>>(\n new Map(),\n );\n\n // Function to navigate to a submenu\n const navigateToSubmenu = React.useCallback((id: string, title: string) => {\n // Set animation direction to forward when navigating to a submenu\n setAnimationDirection(\"forward\");\n setActiveSubmenu(id);\n setSubmenuTitle(title);\n setSubmenuStack((prev) => [...prev, { id, title }]);\n }, []);\n\n // Function to go back to previous menu\n const goBack = React.useCallback(() => {\n // Set animation direction to backward when going back\n setAnimationDirection(\"backward\");\n\n if (submenuStack.length <= 1) {\n // If we're at the first level, go back to main menu\n setActiveSubmenu(null);\n setSubmenuTitle(null);\n setSubmenuStack([]);\n } else {\n // Go back to previous submenu\n const newStack = [...submenuStack];\n newStack.pop(); // Remove current\n const previous = newStack[newStack.length - 1];\n setActiveSubmenu(previous.id);\n setSubmenuTitle(previous.title);\n setSubmenuStack(newStack);\n }\n }, [submenuStack]);\n\n // Function to register submenu content\n const registerSubmenuContent = React.useCallback(\n (id: string, content: React.ReactNode[]) => {\n submenuContentRef.current.set(id, content);\n },\n [],\n );\n\n // Function to extract submenu content\n const extractSubmenuContent = React.useCallback(\n (elements: React.ReactNode, targetId: string): React.ReactNode[] => {\n const result: React.ReactNode[] = [];\n\n // Recursive function to search through all children\n const findSubmenuContent = (node: React.ReactNode) => {\n // Skip if not a valid element\n if (!React.isValidElement(node)) return;\n\n const element = node as React.ReactElement;\n // Use a more specific type to avoid 'any'\n const props = element.props as {\n id?: string;\n \"data-submenu-id\"?: string;\n children?: React.ReactNode;\n };\n\n // Check if this is a DropDrawerSub\n if (element.type === DropDrawerSub) {\n // Get all possible ID values\n const elementId = props.id;\n const dataSubmenuId = props[\"data-submenu-id\"];\n\n // If this is the submenu we're looking for\n if (elementId === targetId || dataSubmenuId === targetId) {\n // Find the SubContent within this Sub\n if (props.children) {\n React.Children.forEach(props.children, (child) => {\n if (\n React.isValidElement(child) &&\n child.type === DropDrawerSubContent\n ) {\n // Add all children of the SubContent to the result\n const subContentProps = child.props as {\n children?: React.ReactNode;\n };\n if (subContentProps.children) {\n React.Children.forEach(\n subContentProps.children,\n (contentChild) => {\n result.push(contentChild);\n },\n );\n }\n }\n });\n }\n return; // Found what we needed, no need to search deeper\n }\n }\n\n // If this element has children, search through them\n if (props.children) {\n if (Array.isArray(props.children)) {\n props.children.forEach((child: React.ReactNode) =>\n findSubmenuContent(child),\n );\n } else {\n findSubmenuContent(props.children);\n }\n }\n };\n\n // Start the search from the root elements\n if (Array.isArray(elements)) {\n elements.forEach((child) => findSubmenuContent(child));\n } else {\n findSubmenuContent(elements);\n }\n\n return result;\n },\n [],\n );\n\n // Get submenu content (either from cache or extract it)\n const getSubmenuContent = React.useCallback(\n (id: string) => {\n // Check if we have the content in our ref\n const cachedContent = submenuContentRef.current.get(id || \"\");\n if (cachedContent && cachedContent.length > 0) {\n return cachedContent;\n }\n\n // If not in cache, extract it\n const submenuContent = extractSubmenuContent(children, id);\n\n if (submenuContent.length === 0) {\n return [];\n }\n\n // Store in cache for future use\n if (id) {\n submenuContentRef.current.set(id, submenuContent);\n }\n\n return submenuContent;\n },\n [children, extractSubmenuContent],\n );\n\n // Animation variants for Framer Motion\n const variants = {\n enter: (direction: \"forward\" | \"backward\") => ({\n x: direction === \"forward\" ? \"100%\" : \"-100%\",\n opacity: 0,\n }),\n center: {\n x: 0,\n opacity: 1,\n },\n exit: (direction: \"forward\" | \"backward\") => ({\n x: direction === \"forward\" ? \"-100%\" : \"100%\",\n opacity: 0,\n }),\n };\n\n // Animation transition\n const transition = {\n duration: 0.3,\n ease: [0.25, 0.1, 0.25, 1.0], // cubic-bezier easing\n } satisfies Transition;\n\n if (isMobile) {\n return (\n <SubmenuContext.Provider\n value={{\n activeSubmenu,\n setActiveSubmenu: (id) => {\n if (id === null) {\n setActiveSubmenu(null);\n setSubmenuTitle(null);\n setSubmenuStack([]);\n }\n },\n submenuTitle,\n setSubmenuTitle,\n navigateToSubmenu,\n registerSubmenuContent,\n }}\n >\n <DrawerContent\n data-slot=\"drop-drawer-content\"\n className={cn(\"max-h-[90vh]\", className)}\n {...props}\n >\n {activeSubmenu ? (\n <>\n <DrawerHeader>\n <div className=\"flex items-center gap-2\">\n <button\n onClick={goBack}\n className=\"hover:bg-neutral-100/50 rounded-full p-1 dark:hover:bg-neutral-800/50\"\n >\n <ChevronLeftIcon className=\"h-5 w-5\" />\n </button>\n <DrawerTitle>{submenuTitle || \"Submenu\"}</DrawerTitle>\n </div>\n </DrawerHeader>\n <div className=\"flex-1 relative overflow-y-auto max-h-[70vh]\">\n {/* Use AnimatePresence to handle exit animations */}\n <AnimatePresence\n initial={false}\n mode=\"wait\"\n custom={animationDirection}\n >\n <motion.div\n key={activeSubmenu || \"main\"}\n custom={animationDirection}\n variants={variants}\n initial=\"enter\"\n animate=\"center\"\n exit=\"exit\"\n transition={transition}\n className=\"pb-6 space-y-1.5 w-full h-full\"\n >\n {activeSubmenu\n ? getSubmenuContent(activeSubmenu)\n : children}\n </motion.div>\n </AnimatePresence>\n </div>\n </>\n ) : (\n <>\n <DrawerHeader className=\"sr-only\">\n <DrawerTitle>Menu</DrawerTitle>\n </DrawerHeader>\n <div className=\"overflow-y-auto max-h-[70vh]\">\n <AnimatePresence\n initial={false}\n mode=\"wait\"\n custom={animationDirection}\n >\n <motion.div\n key=\"main-menu\"\n custom={animationDirection}\n variants={variants}\n initial=\"enter\"\n animate=\"center\"\n exit=\"exit\"\n transition={transition}\n className=\"pb-6 space-y-1.5 w-full\"\n >\n {children}\n </motion.div>\n </AnimatePresence>\n </div>\n </>\n )}\n </DrawerContent>\n </SubmenuContext.Provider>\n );\n }\n\n return (\n <SubmenuContext.Provider\n value={{\n activeSubmenu,\n setActiveSubmenu,\n submenuTitle,\n setSubmenuTitle,\n registerSubmenuContent,\n }}\n >\n <DropdownMenuContent\n data-slot=\"drop-drawer-content\"\n align=\"end\"\n sideOffset={4}\n className={cn(\n \"max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[220px] overflow-y-auto\",\n className,\n )}\n {...props}\n >\n {children}\n </DropdownMenuContent>\n </SubmenuContext.Provider>\n );\n}\n\nfunction DropDrawerItem({\n className,\n children,\n onSelect,\n onClick,\n icon,\n variant = \"default\",\n inset,\n disabled,\n ...props\n}: React.ComponentProps<typeof DropdownMenuItem> & {\n icon?: React.ReactNode;\n}) {\n const { isMobile } = useDropDrawerContext();\n\n // Define hooks outside of conditionals to follow React rules\n // Check if this item is inside a group by looking at parent elements\n const isInGroup = React.useCallback(\n (element: HTMLElement | null): boolean => {\n if (!element) return false;\n\n // Check if any parent has a data-drop-drawer-group attribute\n let parent = element.parentElement;\n while (parent) {\n if (parent.hasAttribute(\"data-drop-drawer-group\")) {\n return true;\n }\n parent = parent.parentElement;\n }\n return false;\n },\n [],\n );\n\n // Create a ref to check if the item is in a group\n const itemRef = React.useRef<HTMLDivElement>(null);\n const [isInsideGroup, setIsInsideGroup] = React.useState(false);\n\n React.useEffect(() => {\n // Only run this effect in mobile mode\n if (!isMobile) return;\n\n // Use a short timeout to ensure the DOM is fully rendered\n const timer = setTimeout(() => {\n if (itemRef.current) {\n setIsInsideGroup(isInGroup(itemRef.current));\n }\n }, 0);\n\n return () => clearTimeout(timer);\n }, [isInGroup, isMobile]);\n\n if (isMobile) {\n const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n if (onClick) onClick(e);\n if (onSelect) onSelect(e as unknown as Event);\n };\n\n // Only wrap in DrawerClose if it's not a submenu item\n const content = (\n <div\n ref={itemRef}\n data-slot=\"drop-drawer-item\"\n data-variant={variant}\n data-inset={inset}\n data-disabled={disabled}\n className={cn(\n \"flex cursor-pointer items-center justify-between px-4 py-4\",\n // Only apply margin, background and rounded corners if not in a group\n !isInsideGroup &&\n \"bg-neutral-100 dark:bg-neutral-100 mx-2 my-1.5 rounded-md dark:bg-neutral-800 dark:dark:bg-neutral-800\",\n // For items in a group, don't add background but add more padding\n isInsideGroup && \"bg-transparent py-4\",\n inset && \"pl-8\",\n variant === \"destructive\" &&\n \"text-red-500 dark:text-red-500 dark:text-red-900 dark:dark:text-red-900\",\n disabled && \"pointer-events-none opacity-50\",\n className,\n )}\n onClick={handleClick}\n aria-disabled={disabled}\n {...props}\n >\n <div className=\"flex items-center gap-2\">{children}</div>\n {icon && <div className=\"flex-shrink-0\">{icon}</div>}\n </div>\n );\n\n // Check if this is inside a submenu\n const isInSubmenu =\n (props as Record<string, unknown>)[\"data-parent-submenu-id\"] ||\n (props as Record<string, unknown>)[\"data-parent-submenu\"];\n\n if (isInSubmenu) {\n return content;\n }\n\n return <DrawerClose asChild>{content}</DrawerClose>;\n }\n\n return (\n <DropdownMenuItem\n data-slot=\"drop-drawer-item\"\n data-variant={variant}\n data-inset={inset}\n className={className}\n onSelect={onSelect}\n onClick={onClick as React.MouseEventHandler<HTMLDivElement>}\n variant={variant}\n inset={inset}\n disabled={disabled}\n {...props}\n >\n <div className=\"flex w-full items-center justify-between\">\n <div>{children}</div>\n {icon && <div>{icon}</div>}\n </div>\n </DropdownMenuItem>\n );\n}\n\nfunction DropDrawerSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n const { isMobile } = useDropDrawerContext();\n\n // For mobile, render a simple divider\n if (isMobile) {\n return null;\n }\n\n // For desktop, use the standard dropdown separator\n return (\n <DropdownMenuSeparator\n data-slot=\"drop-drawer-separator\"\n className={className}\n {...props}\n />\n );\n}\n\nfunction DropDrawerLabel({\n className,\n children,\n ...props\n}:\n | React.ComponentProps<typeof DropdownMenuLabel>\n | React.ComponentProps<typeof DrawerTitle>) {\n const { isMobile } = useDropDrawerContext();\n\n if (isMobile) {\n return (\n <DrawerHeader className=\"p-0\">\n <DrawerTitle\n data-slot=\"drop-drawer-label\"\n className={cn(\n \"text-neutral-500 px-4 py-2 text-sm font-medium dark:text-neutral-400\",\n className,\n )}\n {...props}\n >\n {children}\n </DrawerTitle>\n </DrawerHeader>\n );\n }\n\n return (\n <DropdownMenuLabel\n data-slot=\"drop-drawer-label\"\n className={className}\n {...props}\n >\n {children}\n </DropdownMenuLabel>\n );\n}\n\nfunction DropDrawerFooter({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof DrawerFooter> | React.ComponentProps<\"div\">) {\n const { isMobile } = useDropDrawerContext();\n\n if (isMobile) {\n return (\n <DrawerFooter\n data-slot=\"drop-drawer-footer\"\n className={cn(\"p-4\", className)}\n {...props}\n >\n {children}\n </DrawerFooter>\n );\n }\n\n // No direct equivalent in DropdownMenu, so we'll just render a div\n return (\n <div\n data-slot=\"drop-drawer-footer\"\n className={cn(\"p-2\", className)}\n {...props}\n >\n {children}\n </div>\n );\n}\n\nfunction DropDrawerGroup({\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n children: React.ReactNode;\n}) {\n const { isMobile } = useDropDrawerContext();\n\n // Add separators between children on mobile\n const childrenWithSeparators = React.useMemo(() => {\n if (!isMobile) return children;\n\n const childArray = React.Children.toArray(children);\n\n // Filter out any existing separators\n const filteredChildren = childArray.filter(\n (child) =>\n React.isValidElement(child) && child.type !== DropDrawerSeparator,\n );\n\n // Add separators between items\n return filteredChildren.flatMap((child, index) => {\n if (index === filteredChildren.length - 1) return [child];\n return [\n child,\n <div\n key={`separator-${index}`}\n className=\"bg-neutral-200 h-px dark:bg-neutral-800\"\n aria-hidden=\"true\"\n />,\n ];\n });\n }, [children, isMobile]);\n\n if (isMobile) {\n return (\n <div\n data-drop-drawer-group\n data-slot=\"drop-drawer-group\"\n role=\"group\"\n className={cn(\n \"bg-neutral-100 dark:bg-neutral-100 mx-2 my-3 overflow-hidden rounded-xl dark:bg-neutral-800 dark:dark:bg-neutral-800\",\n className,\n )}\n {...props}\n >\n {childrenWithSeparators}\n </div>\n );\n }\n\n // On desktop, use a div with proper role and attributes\n return (\n <div\n data-drop-drawer-group\n data-slot=\"drop-drawer-group\"\n role=\"group\"\n className={className}\n {...props}\n >\n {children}\n </div>\n );\n}\n\n// Context for managing submenu state on mobile\ninterface SubmenuContextType {\n activeSubmenu: string | null;\n setActiveSubmenu: (id: string | null) => void;\n submenuTitle: string | null;\n setSubmenuTitle: (title: string | null) => void;\n navigateToSubmenu?: (id: string, title: string) => void;\n registerSubmenuContent?: (id: string, content: React.ReactNode[]) => void;\n}\n\nconst SubmenuContext = React.createContext<SubmenuContextType>({\n activeSubmenu: null,\n setActiveSubmenu: () => {},\n submenuTitle: null,\n setSubmenuTitle: () => {},\n navigateToSubmenu: undefined,\n registerSubmenuContent: undefined,\n});\n\n// Submenu components\n// Counter for generating simple numeric IDs\nlet submenuIdCounter = 0;\n\nfunction DropDrawerSub({\n children,\n id,\n ...props\n}: React.ComponentProps<typeof DropdownMenuSub> & {\n id?: string;\n}) {\n const { isMobile } = useDropDrawerContext();\n const { registerSubmenuContent } = React.useContext(SubmenuContext);\n\n // Generate a simple numeric ID instead of using React.useId()\n const [generatedId] = React.useState(() => `submenu-${submenuIdCounter++}`);\n const submenuId = id || generatedId;\n\n // Extract submenu content to register with parent\n React.useEffect(() => {\n if (!registerSubmenuContent) return;\n\n // Find the SubContent within this Sub\n const contentItems: React.ReactNode[] = [];\n React.Children.forEach(children, (child) => {\n if (React.isValidElement(child) && child.type === DropDrawerSubContent) {\n // Add all children of the SubContent to the result\n React.Children.forEach(\n (child.props as { children?: React.ReactNode }).children,\n (contentChild) => {\n contentItems.push(contentChild);\n },\n );\n }\n });\n\n // Register the content with the parent\n if (contentItems.length > 0) {\n registerSubmenuContent(submenuId, contentItems);\n }\n }, [children, registerSubmenuContent, submenuId]);\n\n if (isMobile) {\n // For mobile, we'll use the context to manage submenu state\n // Process children to pass the submenu ID to the trigger and content\n const processedChildren = React.Children.map(children, (child) => {\n if (!React.isValidElement(child)) return child;\n\n if (child.type === DropDrawerSubTrigger) {\n return React.cloneElement(\n child as React.ReactElement,\n {\n ...(child.props as object),\n \"data-parent-submenu-id\": submenuId,\n \"data-submenu-id\": submenuId,\n // Use only data attributes, not custom props\n \"data-parent-submenu\": submenuId,\n } as React.HTMLAttributes<HTMLElement>,\n );\n }\n\n if (child.type === DropDrawerSubContent) {\n return React.cloneElement(\n child as React.ReactElement,\n {\n ...(child.props as object),\n \"data-parent-submenu-id\": submenuId,\n \"data-submenu-id\": submenuId,\n // Use only data attributes, not custom props\n \"data-parent-submenu\": submenuId,\n } as React.HTMLAttributes<HTMLElement>,\n );\n }\n\n return child;\n });\n\n return (\n <div\n data-slot=\"drop-drawer-sub\"\n data-submenu-id={submenuId}\n id={submenuId}\n >\n {processedChildren}\n </div>\n );\n }\n\n // For desktop, pass the generated ID to the DropdownMenuSub\n return (\n <DropdownMenuSub\n data-slot=\"drop-drawer-sub\"\n data-submenu-id={submenuId}\n // Don't pass id to DropdownMenuSub as it doesn't accept this prop\n {...props}\n >\n {children}\n </DropdownMenuSub>\n );\n}\n\nfunction DropDrawerSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n icon?: React.ReactNode;\n}) {\n const { isMobile } = useDropDrawerContext();\n const { navigateToSubmenu } = React.useContext(SubmenuContext);\n\n // Define hooks outside of conditionals to follow React rules\n // Check if this item is inside a group by looking at parent elements\n const isInGroup = React.useCallback(\n (element: HTMLElement | null): boolean => {\n if (!element) return false;\n\n // Check if any parent has a data-drop-drawer-group attribute\n let parent = element.parentElement;\n while (parent) {\n if (parent.hasAttribute(\"data-drop-drawer-group\")) {\n return true;\n }\n parent = parent.parentElement;\n }\n return false;\n },\n [],\n );\n\n // Create a ref to check if the item is in a group\n const itemRef = React.useRef<HTMLDivElement>(null);\n const [isInsideGroup, setIsInsideGroup] = React.useState(false);\n\n React.useEffect(() => {\n // Only run this effect in mobile mode\n if (!isMobile) return;\n\n // Use a short timeout to ensure the DOM is fully rendered\n const timer = setTimeout(() => {\n if (itemRef.current) {\n setIsInsideGroup(isInGroup(itemRef.current));\n }\n }, 0);\n\n return () => clearTimeout(timer);\n }, [isInGroup, isMobile]);\n\n if (isMobile) {\n // Find the parent submenu ID\n const handleClick = (e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n\n // Get the closest parent with data-submenu-id attribute\n const element = e.currentTarget as HTMLElement;\n let submenuId: string | null = null;\n\n // First check if the element itself has the data attribute\n if (element.closest(\"[data-submenu-id]\")) {\n const closestElement = element.closest(\"[data-submenu-id]\");\n const id = closestElement?.getAttribute(\"data-submenu-id\");\n if (id) {\n submenuId = id;\n }\n }\n\n // If not found, try props\n if (!submenuId) {\n submenuId =\n ((props as Record<string, unknown>)[\n \"data-parent-submenu-id\"\n ] as string) ||\n ((props as Record<string, unknown>)[\"data-parent-submenu\"] as string);\n }\n\n if (!submenuId) {\n return;\n }\n\n // Get the title\n const title = typeof children === \"string\" ? children : \"Submenu\";\n\n // Navigate to the submenu\n if (navigateToSubmenu) {\n navigateToSubmenu(submenuId, title);\n }\n };\n\n // Combine onClick handlers\n const combinedOnClick = (e: React.MouseEvent) => {\n // Call the original onClick if provided\n const typedProps = props as Record<string, unknown>;\n if (typedProps[\"onClick\"]) {\n const originalOnClick = typedProps[\n \"onClick\"\n ] as React.MouseEventHandler<HTMLDivElement>;\n originalOnClick(e as React.MouseEvent<HTMLDivElement>);\n }\n\n // Call our navigation handler\n handleClick(e);\n };\n\n // Remove onClick from props to avoid duplicate handlers\n const { ...restProps } = props as Record<string, unknown>;\n\n // Don't wrap in DrawerClose for submenu triggers\n return (\n <div\n ref={itemRef}\n data-slot=\"drop-drawer-sub-trigger\"\n data-inset={inset}\n className={cn(\n \"flex cursor-pointer items-center justify-between px-4 py-4\",\n // Only apply margin, background and rounded corners if not in a group\n !isInsideGroup &&\n \"bg-neutral-100 dark:bg-neutral-100 mx-2 my-1.5 rounded-md dark:bg-neutral-800 dark:dark:bg-neutral-800\",\n // For items in a group, don't add background but add more padding\n isInsideGroup && \"bg-transparent py-4\",\n inset && \"pl-8\",\n className,\n )}\n onClick={combinedOnClick}\n {...restProps}\n >\n <div className=\"flex items-center gap-2\">{children}</div>\n <ChevronRightIcon className=\"h-5 w-5\" />\n </div>\n );\n }\n\n return (\n <DropdownMenuSubTrigger\n data-slot=\"drop-drawer-sub-trigger\"\n data-inset={inset}\n className={className}\n inset={inset}\n {...props}\n >\n {children}\n </DropdownMenuSubTrigger>\n );\n}\n\nfunction DropDrawerSubContent({\n className,\n sideOffset = 4,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\n const { isMobile } = useDropDrawerContext();\n\n if (isMobile) {\n // For mobile, we don't render the content directly\n // It will be rendered by the DropDrawerContent component when active\n return null;\n }\n\n return (\n <DropdownMenuSubContent\n data-slot=\"drop-drawer-sub-content\"\n sideOffset={sideOffset}\n className={cn(\n \"z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 p-1 shadow-lg dark:border-neutral-800\",\n className,\n )}\n {...props}\n >\n {children}\n </DropdownMenuSubContent>\n );\n}\n\nexport {\n DropDrawer,\n DropDrawerContent,\n DropDrawerFooter,\n DropDrawerGroup,\n DropDrawerItem,\n DropDrawerLabel,\n DropDrawerSeparator,\n DropDrawerSub,\n DropDrawerSubContent,\n DropDrawerSubTrigger,\n DropDrawerTrigger,\n};\n"],"names":["DropDrawerContext","React","useDropDrawerContext","context","Error","DropDrawer","children","props","isMobile","useIsMobile","DropdownComponent","Drawer","DropdownMenu","DropDrawerTrigger","className","TriggerComponent","DrawerTrigger","DropdownMenuTrigger","DropDrawerContent","activeSubmenu","setActiveSubmenu","submenuTitle","setSubmenuTitle","submenuStack","setSubmenuStack","animationDirection","setAnimationDirection","submenuContentRef","Map","navigateToSubmenu","id","title","prev","goBack","newStack","previous","registerSubmenuContent","content","extractSubmenuContent","elements","targetId","result","findSubmenuContent","node","element","DropDrawerSub","elementId","dataSubmenuId","child","DropDrawerSubContent","subContentProps","contentChild","Array","getSubmenuContent","cachedContent","submenuContent","variants","direction","transition","SubmenuContext","DrawerContent","cn","DrawerHeader","ChevronLeftIcon","DrawerTitle","AnimatePresence","motion","DropdownMenuContent","DropDrawerItem","onSelect","onClick","icon","variant","inset","disabled","isInGroup","parent","itemRef","isInsideGroup","setIsInsideGroup","timer","setTimeout","clearTimeout","handleClick","e","isInSubmenu","DrawerClose","DropdownMenuItem","DropDrawerSeparator","DropdownMenuSeparator","DropDrawerLabel","DropdownMenuLabel","DropDrawerFooter","DrawerFooter","DropDrawerGroup","childrenWithSeparators","childArray","filteredChildren","index","undefined","submenuIdCounter","generatedId","submenuId","contentItems","processedChildren","DropDrawerSubTrigger","DropdownMenuSub","closestElement","combinedOnClick","typedProps","originalOnClick","restProps","ChevronRightIcon","DropdownMenuSubTrigger","sideOffset","DropdownMenuSubContent"],"mappings":"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"}
1
+ {"version":3,"file":"components\\ui\\dropdrawer.js","sources":["webpack://@arolariu/components/./src/components/ui/dropdrawer.tsx"],"sourcesContent":["\n\nimport { AnimatePresence, motion, Transition } from \"motion/react\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/components/ui/drawer\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { useIsMobile } from \"@/hooks/useIsMobile\";\nimport { cn } from \"@/lib/utils\";\n\nconst DropDrawerContext = React.createContext<{ isMobile: boolean }>({\n isMobile: false,\n});\n\nconst useDropDrawerContext = () => {\n const context = React.useContext(DropDrawerContext);\n if (!context) {\n throw new Error(\n \"DropDrawer components cannot be rendered outside the Context\",\n );\n }\n return context;\n};\n\nfunction DropDrawer({\n children,\n ...props\n}:\n | React.ComponentProps<typeof Drawer>\n | React.ComponentProps<typeof DropdownMenu>) {\n const isMobile = useIsMobile();\n const DropdownComponent = isMobile ? Drawer : DropdownMenu;\n\n return (\n <DropDrawerContext.Provider value={{ isMobile }}>\n <DropdownComponent\n data-slot=\"drop-drawer\"\n {...(isMobile && { autoFocus: true })}\n {...props}\n >\n {children}\n </DropdownComponent>\n </DropDrawerContext.Provider>\n );\n}\n\nfunction DropDrawerTrigger({\n className,\n children,\n ...props\n}:\n | React.ComponentProps<typeof DrawerTrigger>\n | React.ComponentProps<typeof DropdownMenuTrigger>) {\n const { isMobile } = useDropDrawerContext();\n const TriggerComponent = isMobile ? DrawerTrigger : DropdownMenuTrigger;\n\n return (\n <TriggerComponent\n data-slot=\"drop-drawer-trigger\"\n className={className}\n {...props}\n >\n {children}\n </TriggerComponent>\n );\n}\n\nfunction DropDrawerContent({\n className,\n children,\n ...props\n}:\n | React.ComponentProps<typeof DrawerContent>\n | React.ComponentProps<typeof DropdownMenuContent>) {\n const { isMobile } = useDropDrawerContext();\n const [activeSubmenu, setActiveSubmenu] = React.useState<string | null>(null);\n const [submenuTitle, setSubmenuTitle] = React.useState<string | null>(null);\n const [submenuStack, setSubmenuStack] = React.useState<\n { id: string; title: string }[]\n >([]);\n // Add animation direction state\n const [animationDirection, setAnimationDirection] = React.useState<\n \"forward\" | \"backward\"\n >(\"forward\");\n\n // Create a ref to store submenu content by ID\n const submenuContentRef = React.useRef<Map<string, React.ReactNode[]>>(\n new Map(),\n );\n\n // Function to navigate to a submenu\n const navigateToSubmenu = React.useCallback((id: string, title: string) => {\n // Set animation direction to forward when navigating to a submenu\n setAnimationDirection(\"forward\");\n setActiveSubmenu(id);\n setSubmenuTitle(title);\n setSubmenuStack((prev) => [...prev, { id, title }]);\n }, []);\n\n // Function to go back to previous menu\n const goBack = React.useCallback(() => {\n // Set animation direction to backward when going back\n setAnimationDirection(\"backward\");\n\n if (submenuStack.length <= 1) {\n // If we're at the first level, go back to main menu\n setActiveSubmenu(null);\n setSubmenuTitle(null);\n setSubmenuStack([]);\n } else {\n // Go back to previous submenu\n const newStack = [...submenuStack];\n newStack.pop(); // Remove current\n const previous = newStack[newStack.length - 1];\n setActiveSubmenu(previous.id);\n setSubmenuTitle(previous.title);\n setSubmenuStack(newStack);\n }\n }, [submenuStack]);\n\n // Function to register submenu content\n const registerSubmenuContent = React.useCallback(\n (id: string, content: React.ReactNode[]) => {\n submenuContentRef.current.set(id, content);\n },\n [],\n );\n\n // Function to extract submenu content\n const extractSubmenuContent = React.useCallback(\n (elements: React.ReactNode, targetId: string): React.ReactNode[] => {\n const result: React.ReactNode[] = [];\n\n // Recursive function to search through all children\n const findSubmenuContent = (node: React.ReactNode) => {\n // Skip if not a valid element\n if (!React.isValidElement(node)) return;\n\n const element = node as React.ReactElement;\n // Use a more specific type to avoid 'any'\n const props = element.props as {\n id?: string;\n \"data-submenu-id\"?: string;\n children?: React.ReactNode;\n };\n\n // Check if this is a DropDrawerSub\n if (element.type === DropDrawerSub) {\n // Get all possible ID values\n const elementId = props.id;\n const dataSubmenuId = props[\"data-submenu-id\"];\n\n // If this is the submenu we're looking for\n if (elementId === targetId || dataSubmenuId === targetId) {\n // Find the SubContent within this Sub\n if (props.children) {\n React.Children.forEach(props.children, (child) => {\n if (\n React.isValidElement(child) &&\n child.type === DropDrawerSubContent\n ) {\n // Add all children of the SubContent to the result\n const subContentProps = child.props as {\n children?: React.ReactNode;\n };\n if (subContentProps.children) {\n React.Children.forEach(\n subContentProps.children,\n (contentChild) => {\n result.push(contentChild);\n },\n );\n }\n }\n });\n }\n return; // Found what we needed, no need to search deeper\n }\n }\n\n // If this element has children, search through them\n if (props.children) {\n if (Array.isArray(props.children)) {\n props.children.forEach((child: React.ReactNode) =>\n findSubmenuContent(child),\n );\n } else {\n findSubmenuContent(props.children);\n }\n }\n };\n\n // Start the search from the root elements\n if (Array.isArray(elements)) {\n elements.forEach((child) => findSubmenuContent(child));\n } else {\n findSubmenuContent(elements);\n }\n\n return result;\n },\n [],\n );\n\n // Get submenu content (either from cache or extract it)\n const getSubmenuContent = React.useCallback(\n (id: string) => {\n // Check if we have the content in our ref\n const cachedContent = submenuContentRef.current.get(id || \"\");\n if (cachedContent && cachedContent.length > 0) {\n return cachedContent;\n }\n\n // If not in cache, extract it\n const submenuContent = extractSubmenuContent(children, id);\n\n if (submenuContent.length === 0) {\n return [];\n }\n\n // Store in cache for future use\n if (id) {\n submenuContentRef.current.set(id, submenuContent);\n }\n\n return submenuContent;\n },\n [children, extractSubmenuContent],\n );\n\n // Animation variants for Framer Motion\n const variants = {\n enter: (direction: \"forward\" | \"backward\") => ({\n x: direction === \"forward\" ? \"100%\" : \"-100%\",\n opacity: 0,\n }),\n center: {\n x: 0,\n opacity: 1,\n },\n exit: (direction: \"forward\" | \"backward\") => ({\n x: direction === \"forward\" ? \"-100%\" : \"100%\",\n opacity: 0,\n }),\n };\n\n // Animation transition\n const transition = {\n duration: 0.3,\n ease: [0.25, 0.1, 0.25, 1.0], // cubic-bezier easing\n } satisfies Transition;\n\n if (isMobile) {\n return (\n <SubmenuContext.Provider\n value={{\n activeSubmenu,\n setActiveSubmenu: (id) => {\n if (id === null) {\n setActiveSubmenu(null);\n setSubmenuTitle(null);\n setSubmenuStack([]);\n }\n },\n submenuTitle,\n setSubmenuTitle,\n navigateToSubmenu,\n registerSubmenuContent,\n }}\n >\n <DrawerContent\n data-slot=\"drop-drawer-content\"\n className={cn(\"max-h-[90vh]\", className)}\n {...props}\n >\n {activeSubmenu ? (\n <>\n <DrawerHeader>\n <div className=\"flex items-center gap-2\">\n <button\n onClick={goBack}\n className=\"hover:bg-neutral-100/50 rounded-full p-1 dark:hover:bg-neutral-800/50\"\n >\n <ChevronLeftIcon className=\"h-5 w-5\" />\n </button>\n <DrawerTitle>{submenuTitle || \"Submenu\"}</DrawerTitle>\n </div>\n </DrawerHeader>\n <div className=\"flex-1 relative overflow-y-auto max-h-[70vh]\">\n {/* Use AnimatePresence to handle exit animations */}\n <AnimatePresence\n initial={false}\n mode=\"wait\"\n custom={animationDirection}\n >\n <motion.div\n key={activeSubmenu || \"main\"}\n custom={animationDirection}\n variants={variants}\n initial=\"enter\"\n animate=\"center\"\n exit=\"exit\"\n transition={transition}\n className=\"pb-6 space-y-1.5 w-full h-full\"\n >\n {activeSubmenu\n ? getSubmenuContent(activeSubmenu)\n : children}\n </motion.div>\n </AnimatePresence>\n </div>\n </>\n ) : (\n <>\n <DrawerHeader className=\"sr-only\">\n <DrawerTitle>Menu</DrawerTitle>\n </DrawerHeader>\n <div className=\"overflow-y-auto max-h-[70vh]\">\n <AnimatePresence\n initial={false}\n mode=\"wait\"\n custom={animationDirection}\n >\n <motion.div\n key=\"main-menu\"\n custom={animationDirection}\n variants={variants}\n initial=\"enter\"\n animate=\"center\"\n exit=\"exit\"\n transition={transition}\n className=\"pb-6 space-y-1.5 w-full\"\n >\n {children}\n </motion.div>\n </AnimatePresence>\n </div>\n </>\n )}\n </DrawerContent>\n </SubmenuContext.Provider>\n );\n }\n\n return (\n <SubmenuContext.Provider\n value={{\n activeSubmenu,\n setActiveSubmenu,\n submenuTitle,\n setSubmenuTitle,\n registerSubmenuContent,\n }}\n >\n <DropdownMenuContent\n data-slot=\"drop-drawer-content\"\n align=\"end\"\n sideOffset={4}\n className={cn(\n \"max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[220px] overflow-y-auto\",\n className,\n )}\n {...props}\n >\n {children}\n </DropdownMenuContent>\n </SubmenuContext.Provider>\n );\n}\n\nfunction DropDrawerItem({\n className,\n children,\n onSelect,\n onClick,\n icon,\n variant = \"default\",\n inset,\n disabled,\n ...props\n}: React.ComponentProps<typeof DropdownMenuItem> & {\n icon?: React.ReactNode;\n}) {\n const { isMobile } = useDropDrawerContext();\n\n // Define hooks outside of conditionals to follow React rules\n // Check if this item is inside a group by looking at parent elements\n const isInGroup = React.useCallback(\n (element: HTMLElement | null): boolean => {\n if (!element) return false;\n\n // Check if any parent has a data-drop-drawer-group attribute\n let parent = element.parentElement;\n while (parent) {\n if (parent.hasAttribute(\"data-drop-drawer-group\")) {\n return true;\n }\n parent = parent.parentElement;\n }\n return false;\n },\n [],\n );\n\n // Create a ref to check if the item is in a group\n const itemRef = React.useRef<HTMLDivElement>(null);\n const [isInsideGroup, setIsInsideGroup] = React.useState(false);\n\n React.useEffect(() => {\n // Only run this effect in mobile mode\n if (!isMobile) return;\n\n // Use a short timeout to ensure the DOM is fully rendered\n const timer = setTimeout(() => {\n if (itemRef.current) {\n setIsInsideGroup(isInGroup(itemRef.current));\n }\n }, 0);\n\n return () => clearTimeout(timer);\n }, [isInGroup, isMobile]);\n\n if (isMobile) {\n const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n if (onClick) onClick(e);\n if (onSelect) onSelect(e as unknown as Event);\n };\n\n // Only wrap in DrawerClose if it's not a submenu item\n const content = (\n <div\n ref={itemRef}\n data-slot=\"drop-drawer-item\"\n data-variant={variant}\n data-inset={inset}\n data-disabled={disabled}\n className={cn(\n \"flex cursor-pointer items-center justify-between px-4 py-4\",\n // Only apply margin, background and rounded corners if not in a group\n !isInsideGroup &&\n \"bg-neutral-100 dark:bg-neutral-100 mx-2 my-1.5 rounded-md dark:bg-neutral-800 dark:dark:bg-neutral-800\",\n // For items in a group, don't add background but add more padding\n isInsideGroup && \"bg-transparent py-4\",\n inset && \"pl-8\",\n variant === \"destructive\" &&\n \"text-red-500 dark:text-red-500 dark:text-red-900 dark:dark:text-red-900\",\n disabled && \"pointer-events-none opacity-50\",\n className,\n )}\n onClick={handleClick}\n aria-disabled={disabled}\n {...props}\n >\n <div className=\"flex items-center gap-2\">{children}</div>\n {icon && <div className=\"flex-shrink-0\">{icon}</div>}\n </div>\n );\n\n // Check if this is inside a submenu\n const isInSubmenu =\n (props as Record<string, unknown>)[\"data-parent-submenu-id\"] ||\n (props as Record<string, unknown>)[\"data-parent-submenu\"];\n\n if (isInSubmenu) {\n return content;\n }\n\n return <DrawerClose asChild>{content}</DrawerClose>;\n }\n\n return (\n <DropdownMenuItem\n data-slot=\"drop-drawer-item\"\n data-variant={variant}\n data-inset={inset}\n className={className}\n onSelect={onSelect}\n onClick={onClick as React.MouseEventHandler<HTMLDivElement>}\n variant={variant}\n inset={inset}\n disabled={disabled}\n {...props}\n >\n <div className=\"flex w-full items-center justify-between\">\n <div>{children}</div>\n {icon && <div>{icon}</div>}\n </div>\n </DropdownMenuItem>\n );\n}\n\nfunction DropDrawerSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n const { isMobile } = useDropDrawerContext();\n\n // For mobile, render a simple divider\n if (isMobile) {\n return null;\n }\n\n // For desktop, use the standard dropdown separator\n return (\n <DropdownMenuSeparator\n data-slot=\"drop-drawer-separator\"\n className={className}\n {...props}\n />\n );\n}\n\nfunction DropDrawerLabel({\n className,\n children,\n ...props\n}:\n | React.ComponentProps<typeof DropdownMenuLabel>\n | React.ComponentProps<typeof DrawerTitle>) {\n const { isMobile } = useDropDrawerContext();\n\n if (isMobile) {\n return (\n <DrawerHeader className=\"p-0\">\n <DrawerTitle\n data-slot=\"drop-drawer-label\"\n className={cn(\n \"text-neutral-500 px-4 py-2 text-sm font-medium dark:text-neutral-400\",\n className,\n )}\n {...props}\n >\n {children}\n </DrawerTitle>\n </DrawerHeader>\n );\n }\n\n return (\n <DropdownMenuLabel\n data-slot=\"drop-drawer-label\"\n className={className}\n {...props}\n >\n {children}\n </DropdownMenuLabel>\n );\n}\n\nfunction DropDrawerFooter({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof DrawerFooter> | React.ComponentProps<\"div\">) {\n const { isMobile } = useDropDrawerContext();\n\n if (isMobile) {\n return (\n <DrawerFooter\n data-slot=\"drop-drawer-footer\"\n className={cn(\"p-4\", className)}\n {...props}\n >\n {children}\n </DrawerFooter>\n );\n }\n\n // No direct equivalent in DropdownMenu, so we'll just render a div\n return (\n <div\n data-slot=\"drop-drawer-footer\"\n className={cn(\"p-2\", className)}\n {...props}\n >\n {children}\n </div>\n );\n}\n\nfunction DropDrawerGroup({\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n children: React.ReactNode;\n}) {\n const { isMobile } = useDropDrawerContext();\n\n // Add separators between children on mobile\n const childrenWithSeparators = React.useMemo(() => {\n if (!isMobile) return children;\n\n const childArray = React.Children.toArray(children);\n\n // Filter out any existing separators\n const filteredChildren = childArray.filter(\n (child) =>\n React.isValidElement(child) && child.type !== DropDrawerSeparator,\n );\n\n // Add separators between items\n return filteredChildren.flatMap((child, index) => {\n if (index === filteredChildren.length - 1) return [child];\n return [\n child,\n <div\n key={`separator-${index}`}\n className=\"bg-neutral-200 h-px dark:bg-neutral-800\"\n aria-hidden=\"true\"\n />,\n ];\n });\n }, [children, isMobile]);\n\n if (isMobile) {\n return (\n <div\n data-drop-drawer-group\n data-slot=\"drop-drawer-group\"\n role=\"group\"\n className={cn(\n \"bg-neutral-100 dark:bg-neutral-100 mx-2 my-3 overflow-hidden rounded-xl dark:bg-neutral-800 dark:dark:bg-neutral-800\",\n className,\n )}\n {...props}\n >\n {childrenWithSeparators}\n </div>\n );\n }\n\n // On desktop, use a div with proper role and attributes\n return (\n <div\n data-drop-drawer-group\n data-slot=\"drop-drawer-group\"\n role=\"group\"\n className={className}\n {...props}\n >\n {children}\n </div>\n );\n}\n\n// Context for managing submenu state on mobile\ninterface SubmenuContextType {\n activeSubmenu: string | null;\n setActiveSubmenu: (id: string | null) => void;\n submenuTitle: string | null;\n setSubmenuTitle: (title: string | null) => void;\n navigateToSubmenu?: (id: string, title: string) => void;\n registerSubmenuContent?: (id: string, content: React.ReactNode[]) => void;\n}\n\nconst SubmenuContext = React.createContext<SubmenuContextType>({\n activeSubmenu: null,\n setActiveSubmenu: () => {},\n submenuTitle: null,\n setSubmenuTitle: () => {},\n navigateToSubmenu: undefined,\n registerSubmenuContent: undefined,\n});\n\n// Submenu components\n// Counter for generating simple numeric IDs\nlet submenuIdCounter = 0;\n\nfunction DropDrawerSub({\n children,\n id,\n ...props\n}: React.ComponentProps<typeof DropdownMenuSub> & {\n id?: string;\n}) {\n const { isMobile } = useDropDrawerContext();\n const { registerSubmenuContent } = React.useContext(SubmenuContext);\n\n // Generate a simple numeric ID instead of using React.useId()\n const [generatedId] = React.useState(() => `submenu-${submenuIdCounter++}`);\n const submenuId = id || generatedId;\n\n // Extract submenu content to register with parent\n React.useEffect(() => {\n if (!registerSubmenuContent) return;\n\n // Find the SubContent within this Sub\n const contentItems: React.ReactNode[] = [];\n React.Children.forEach(children, (child) => {\n if (React.isValidElement(child) && child.type === DropDrawerSubContent) {\n // Add all children of the SubContent to the result\n React.Children.forEach(\n (child.props as { children?: React.ReactNode }).children,\n (contentChild) => {\n contentItems.push(contentChild);\n },\n );\n }\n });\n\n // Register the content with the parent\n if (contentItems.length > 0) {\n registerSubmenuContent(submenuId, contentItems);\n }\n }, [children, registerSubmenuContent, submenuId]);\n\n if (isMobile) {\n // For mobile, we'll use the context to manage submenu state\n // Process children to pass the submenu ID to the trigger and content\n const processedChildren = React.Children.map(children, (child) => {\n if (!React.isValidElement(child)) return child;\n\n if (child.type === DropDrawerSubTrigger) {\n return React.cloneElement(\n child as React.ReactElement,\n {\n ...(child.props as object),\n \"data-parent-submenu-id\": submenuId,\n \"data-submenu-id\": submenuId,\n // Use only data attributes, not custom props\n \"data-parent-submenu\": submenuId,\n } as React.HTMLAttributes<HTMLElement>,\n );\n }\n\n if (child.type === DropDrawerSubContent) {\n return React.cloneElement(\n child as React.ReactElement,\n {\n ...(child.props as object),\n \"data-parent-submenu-id\": submenuId,\n \"data-submenu-id\": submenuId,\n // Use only data attributes, not custom props\n \"data-parent-submenu\": submenuId,\n } as React.HTMLAttributes<HTMLElement>,\n );\n }\n\n return child;\n });\n\n return (\n <div\n data-slot=\"drop-drawer-sub\"\n data-submenu-id={submenuId}\n id={submenuId}\n >\n {processedChildren}\n </div>\n );\n }\n\n // For desktop, pass the generated ID to the DropdownMenuSub\n return (\n <DropdownMenuSub\n data-slot=\"drop-drawer-sub\"\n data-submenu-id={submenuId}\n // Don't pass id to DropdownMenuSub as it doesn't accept this prop\n {...props}\n >\n {children}\n </DropdownMenuSub>\n );\n}\n\nfunction DropDrawerSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n icon?: React.ReactNode;\n}) {\n const { isMobile } = useDropDrawerContext();\n const { navigateToSubmenu } = React.useContext(SubmenuContext);\n\n // Define hooks outside of conditionals to follow React rules\n // Check if this item is inside a group by looking at parent elements\n const isInGroup = React.useCallback(\n (element: HTMLElement | null): boolean => {\n if (!element) return false;\n\n // Check if any parent has a data-drop-drawer-group attribute\n let parent = element.parentElement;\n while (parent) {\n if (parent.hasAttribute(\"data-drop-drawer-group\")) {\n return true;\n }\n parent = parent.parentElement;\n }\n return false;\n },\n [],\n );\n\n // Create a ref to check if the item is in a group\n const itemRef = React.useRef<HTMLDivElement>(null);\n const [isInsideGroup, setIsInsideGroup] = React.useState(false);\n\n React.useEffect(() => {\n // Only run this effect in mobile mode\n if (!isMobile) return;\n\n // Use a short timeout to ensure the DOM is fully rendered\n const timer = setTimeout(() => {\n if (itemRef.current) {\n setIsInsideGroup(isInGroup(itemRef.current));\n }\n }, 0);\n\n return () => clearTimeout(timer);\n }, [isInGroup, isMobile]);\n\n if (isMobile) {\n // Find the parent submenu ID\n const handleClick = (e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n\n // Get the closest parent with data-submenu-id attribute\n const element = e.currentTarget as HTMLElement;\n let submenuId: string | null = null;\n\n // First check if the element itself has the data attribute\n if (element.closest(\"[data-submenu-id]\")) {\n const closestElement = element.closest(\"[data-submenu-id]\");\n const id = closestElement?.getAttribute(\"data-submenu-id\");\n if (id) {\n submenuId = id;\n }\n }\n\n // If not found, try props\n if (!submenuId) {\n submenuId =\n ((props as Record<string, unknown>)[\n \"data-parent-submenu-id\"\n ] as string) ||\n ((props as Record<string, unknown>)[\"data-parent-submenu\"] as string);\n }\n\n if (!submenuId) {\n return;\n }\n\n // Get the title\n const title = typeof children === \"string\" ? children : \"Submenu\";\n\n // Navigate to the submenu\n if (navigateToSubmenu) {\n navigateToSubmenu(submenuId, title);\n }\n };\n\n // Combine onClick handlers\n const combinedOnClick = (e: React.MouseEvent) => {\n // Call the original onClick if provided\n const typedProps = props as Record<string, unknown>;\n if (typedProps[\"onClick\"]) {\n const originalOnClick = typedProps[\n \"onClick\"\n ] as React.MouseEventHandler<HTMLDivElement>;\n originalOnClick(e as React.MouseEvent<HTMLDivElement>);\n }\n\n // Call our navigation handler\n handleClick(e);\n };\n\n // Remove onClick from props to avoid duplicate handlers\n const { ...restProps } = props as Record<string, unknown>;\n\n // Don't wrap in DrawerClose for submenu triggers\n return (\n <div\n ref={itemRef}\n data-slot=\"drop-drawer-sub-trigger\"\n data-inset={inset}\n className={cn(\n \"flex cursor-pointer items-center justify-between px-4 py-4\",\n // Only apply margin, background and rounded corners if not in a group\n !isInsideGroup &&\n \"bg-neutral-100 dark:bg-neutral-100 mx-2 my-1.5 rounded-md dark:bg-neutral-800 dark:dark:bg-neutral-800\",\n // For items in a group, don't add background but add more padding\n isInsideGroup && \"bg-transparent py-4\",\n inset && \"pl-8\",\n className,\n )}\n onClick={combinedOnClick}\n {...restProps}\n >\n <div className=\"flex items-center gap-2\">{children}</div>\n <ChevronRightIcon className=\"h-5 w-5\" />\n </div>\n );\n }\n\n return (\n <DropdownMenuSubTrigger\n data-slot=\"drop-drawer-sub-trigger\"\n data-inset={inset}\n className={className}\n inset={inset}\n {...props}\n >\n {children}\n </DropdownMenuSubTrigger>\n );\n}\n\nfunction DropDrawerSubContent({\n className,\n sideOffset = 4,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\n const { isMobile } = useDropDrawerContext();\n\n if (isMobile) {\n // For mobile, we don't render the content directly\n // It will be rendered by the DropDrawerContent component when active\n return null;\n }\n\n return (\n <DropdownMenuSubContent\n data-slot=\"drop-drawer-sub-content\"\n sideOffset={sideOffset}\n className={cn(\n \"z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 p-1 shadow-lg dark:border-neutral-800\",\n className,\n )}\n {...props}\n >\n {children}\n </DropdownMenuSubContent>\n );\n}\n\nexport {\n DropDrawer,\n DropDrawerContent,\n DropDrawerFooter,\n DropDrawerGroup,\n DropDrawerItem,\n DropDrawerLabel,\n DropDrawerSeparator,\n DropDrawerSub,\n DropDrawerSubContent,\n DropDrawerSubTrigger,\n DropDrawerTrigger,\n};\n"],"names":["DropDrawerContext","React","useDropDrawerContext","context","Error","DropDrawer","children","props","isMobile","useIsMobile","DropdownComponent","Drawer","DropdownMenu","DropDrawerTrigger","className","TriggerComponent","DrawerTrigger","DropdownMenuTrigger","DropDrawerContent","activeSubmenu","setActiveSubmenu","submenuTitle","setSubmenuTitle","submenuStack","setSubmenuStack","animationDirection","setAnimationDirection","submenuContentRef","Map","navigateToSubmenu","id","title","prev","goBack","newStack","previous","registerSubmenuContent","content","extractSubmenuContent","elements","targetId","result","findSubmenuContent","node","element","DropDrawerSub","elementId","dataSubmenuId","child","DropDrawerSubContent","subContentProps","contentChild","Array","getSubmenuContent","cachedContent","submenuContent","variants","direction","transition","SubmenuContext","DrawerContent","cn","DrawerHeader","ChevronLeftIcon","DrawerTitle","AnimatePresence","motion","DropdownMenuContent","DropDrawerItem","onSelect","onClick","icon","variant","inset","disabled","isInGroup","parent","itemRef","isInsideGroup","setIsInsideGroup","timer","setTimeout","clearTimeout","handleClick","e","isInSubmenu","DrawerClose","DropdownMenuItem","DropDrawerSeparator","DropdownMenuSeparator","DropDrawerLabel","DropdownMenuLabel","DropDrawerFooter","DrawerFooter","DropDrawerGroup","childrenWithSeparators","childArray","filteredChildren","index","undefined","submenuIdCounter","generatedId","submenuId","contentItems","processedChildren","DropDrawerSubTrigger","DropdownMenuSub","closestElement","combinedOnClick","typedProps","originalOnClick","restProps","ChevronRightIcon","DropdownMenuSubTrigger","sideOffset","DropdownMenuSubContent"],"mappings":"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"}
@@ -4,7 +4,7 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useState }
4
4
  import { Slot } from "@radix-ui/react-slot";
5
5
  import { cva } from "class-variance-authority";
6
6
  import { PanelLeftIcon } from "lucide-react";
7
- import { useIsMobile } from "../../hooks/use-mobile.js";
7
+ import { useIsMobile } from "../../hooks/useIsMobile.js";
8
8
  import { cn } from "../../lib/utils.js";
9
9
  import { Button } from "./button.js";
10
10
  import { Input } from "./input.js";
@@ -1 +1 @@
1
- {"version":3,"file":"components\\ui\\sidebar.js","sources":["webpack://@arolariu/components/./src/components/ui/sidebar.tsx"],"sourcesContent":["\n\nimport * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { PanelLeftIcon } from \"lucide-react\";\n\nimport { useIsMobile } from \"@/hooks/use-mobile\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n Sheet,\n SheetContent,\n SheetDescription,\n SheetHeader,\n SheetTitle,\n} from \"@/components/ui/sheet\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\";\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\n\ntype SidebarContextProps = {\n state: \"expanded\" | \"collapsed\";\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext);\n if (!context) {\n throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n }\n\n return context;\n}\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = React.useState(false);\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = React.useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === \"function\" ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open],\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n }, [isMobile, setOpen, setOpenMobile]);\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? \"expanded\" : \"collapsed\";\n\n const contextValue = React.useMemo<SidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\n <div\n data-slot=\"sidebar-wrapper\"\n style={\n {\n \"--sidebar-width\": SIDEBAR_WIDTH,\n \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn(\n \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n </TooltipProvider>\n </SidebarContext.Provider>\n );\n}\n\nfunction Sidebar({\n side = \"left\",\n variant = \"sidebar\",\n collapsible = \"offcanvas\",\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n side?: \"left\" | \"right\";\n variant?: \"sidebar\" | \"floating\" | \"inset\";\n collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n}) {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n if (collapsible === \"none\") {\n return (\n <div\n data-slot=\"sidebar\"\n className={cn(\n \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n style={\n {\n \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex h-full w-full flex-col\">{children}</div>\n </SheetContent>\n </Sheet>\n );\n }\n\n return (\n <div\n className=\"group peer text-sidebar-foreground hidden md:block\"\n data-state={state}\n data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n data-variant={variant}\n data-side={side}\n data-slot=\"sidebar\"\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n \"group-data-[collapsible=offcanvas]:w-0\",\n \"group-data-[side=right]:rotate-180\",\n variant === \"floating\" || variant === \"inset\"\n ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\",\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n className={cn(\n \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n side === \"left\"\n ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n // Adjust the padding for floating and inset variants.\n variant === \"floating\" || variant === \"inset\"\n ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n className,\n )}\n {...props}\n >\n <div\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar-inner\"\n 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\"\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n\nfunction SidebarTrigger({\n className,\n onClick,\n ...props\n}: React.ComponentProps<typeof Button>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n size=\"icon\"\n className={cn(\"size-7\", className)}\n onClick={(event) => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n <PanelLeftIcon />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n \"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\",\n \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n return (\n <main\n data-slot=\"sidebar-inset\"\n className={cn(\n \"bg-white relative flex w-full flex-1 flex-col dark:bg-neutral-950\",\n \"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInput({\n className,\n ...props\n}: React.ComponentProps<typeof Input>) {\n return (\n <Input\n data-slot=\"sidebar-input\"\n data-sidebar=\"input\"\n className={cn(\n \"bg-white h-8 w-full shadow-none dark:bg-neutral-950\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-header\"\n data-sidebar=\"header\"\n className={cn(\"flex flex-col gap-2 p-2\", className)}\n {...props}\n />\n );\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-footer\"\n data-sidebar=\"footer\"\n className={cn(\"flex flex-col gap-2 p-2\", className)}\n {...props}\n />\n );\n}\n\nfunction SidebarSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof Separator>) {\n return (\n <Separator\n data-slot=\"sidebar-separator\"\n data-sidebar=\"separator\"\n className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n {...props}\n />\n );\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn(\n \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-group\"\n data-sidebar=\"group\"\n className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupLabel({\n className,\n asChild = false,\n ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : \"div\";\n\n return (\n <Comp\n data-slot=\"sidebar-group-label\"\n data-sidebar=\"group-label\"\n className={cn(\n \"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\",\n \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupAction({\n className,\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : \"button\";\n\n return (\n <Comp\n data-slot=\"sidebar-group-action\"\n data-sidebar=\"group-action\"\n className={cn(\n \"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\",\n // Increases the hit area of the button on mobile.\n \"after:absolute after:-inset-2 md:after:hidden\",\n \"group-data-[collapsible=icon]:hidden\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupContent({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-group-content\"\n data-sidebar=\"group-content\"\n className={cn(\"w-full text-sm\", className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n return (\n <ul\n data-slot=\"sidebar-menu\"\n data-sidebar=\"menu\"\n className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n return (\n <li\n data-slot=\"sidebar-menu-item\"\n data-sidebar=\"menu-item\"\n className={cn(\"group/menu-item relative\", className)}\n {...props}\n />\n );\n}\n\nconst sidebarMenuButtonVariants = cva(\n \"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] 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\",\n {\n variants: {\n variant: {\n default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n outline:\n \"bg-white shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))] dark:bg-neutral-950\",\n },\n size: {\n default: \"h-8 text-sm\",\n sm: \"h-7 text-xs\",\n lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nfunction SidebarMenuButton({\n asChild = false,\n isActive = false,\n variant = \"default\",\n size = \"default\",\n tooltip,\n className,\n ...props\n}: React.ComponentProps<\"button\"> & {\n asChild?: boolean;\n isActive?: boolean;\n tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n const Comp = asChild ? Slot : \"button\";\n const { isMobile, state } = useSidebar();\n\n const button = (\n <Comp\n data-slot=\"sidebar-menu-button\"\n data-sidebar=\"menu-button\"\n data-size={size}\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n {...props}\n />\n );\n\n if (!tooltip) {\n return button;\n }\n\n if (typeof tooltip === \"string\") {\n tooltip = {\n children: tooltip,\n };\n }\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent\n side=\"right\"\n align=\"center\"\n hidden={state !== \"collapsed\" || isMobile}\n {...tooltip}\n />\n </Tooltip>\n );\n}\n\nfunction SidebarMenuAction({\n className,\n asChild = false,\n showOnHover = false,\n ...props\n}: React.ComponentProps<\"button\"> & {\n asChild?: boolean;\n showOnHover?: boolean;\n}) {\n const Comp = asChild ? Slot : \"button\";\n\n return (\n <Comp\n data-slot=\"sidebar-menu-action\"\n data-sidebar=\"menu-action\"\n className={cn(\n \"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\",\n // Increases the hit area of the button on mobile.\n \"after:absolute after:-inset-2 md:after:hidden\",\n \"peer-data-[size=sm]/menu-button:top-1\",\n \"peer-data-[size=default]/menu-button:top-1.5\",\n \"peer-data-[size=lg]/menu-button:top-2.5\",\n \"group-data-[collapsible=icon]:hidden\",\n showOnHover &&\n \"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\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuBadge({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n \"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\",\n \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n \"peer-data-[size=sm]/menu-button:top-1\",\n \"peer-data-[size=default]/menu-button:top-1.5\",\n \"peer-data-[size=lg]/menu-button:top-2.5\",\n \"group-data-[collapsible=icon]:hidden\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSkeleton({\n className,\n showIcon = false,\n ...props\n}: React.ComponentProps<\"div\"> & {\n showIcon?: boolean;\n}) {\n // Random width between 50 to 90%.\n const width = React.useMemo(() => {\n return `${Math.floor(Math.random() * 40) + 50}%`;\n }, []);\n\n return (\n <div\n data-slot=\"sidebar-menu-skeleton\"\n data-sidebar=\"menu-skeleton\"\n className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n {...props}\n >\n {showIcon && (\n <Skeleton\n className=\"size-4 rounded-md\"\n data-sidebar=\"menu-skeleton-icon\"\n />\n )}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={\n {\n \"--skeleton-width\": width,\n } as React.CSSProperties\n }\n />\n </div>\n );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n \"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\",\n \"group-data-[collapsible=icon]:hidden\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubItem({\n className,\n ...props\n}: React.ComponentProps<\"li\">) {\n return (\n <li\n data-slot=\"sidebar-menu-sub-item\"\n data-sidebar=\"menu-sub-item\"\n className={cn(\"group/menu-sub-item relative\", className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubButton({\n asChild = false,\n size = \"md\",\n isActive = false,\n className,\n ...props\n}: React.ComponentProps<\"a\"> & {\n asChild?: boolean;\n size?: \"sm\" | \"md\";\n isActive?: boolean;\n}) {\n const Comp = asChild ? Slot : \"a\";\n\n return (\n <Comp\n data-slot=\"sidebar-menu-sub-button\"\n data-sidebar=\"menu-sub-button\"\n data-size={size}\n data-active={isActive}\n className={cn(\n \"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\",\n \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n size === \"sm\" && \"text-xs\",\n size === \"md\" && \"text-sm\",\n \"group-data-[collapsible=icon]:hidden\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar,\n};\n"],"names":["SIDEBAR_COOKIE_NAME","SIDEBAR_COOKIE_MAX_AGE","SIDEBAR_WIDTH","SIDEBAR_WIDTH_MOBILE","SIDEBAR_WIDTH_ICON","SIDEBAR_KEYBOARD_SHORTCUT","SidebarContext","React","useSidebar","context","Error","SidebarProvider","defaultOpen","openProp","setOpenProp","className","style","children","props","isMobile","useIsMobile","openMobile","setOpenMobile","_open","_setOpen","open","setOpen","value","openState","document","toggleSidebar","handleKeyDown","event","window","state","contextValue","TooltipProvider","cn","Sidebar","side","variant","collapsible","Sheet","SheetContent","SheetHeader","SheetTitle","SheetDescription","SidebarTrigger","onClick","Button","PanelLeftIcon","SidebarRail","SidebarInset","SidebarInput","Input","SidebarHeader","SidebarFooter","SidebarSeparator","Separator","SidebarContent","SidebarGroup","SidebarGroupLabel","asChild","Comp","Slot","SidebarGroupAction","SidebarGroupContent","SidebarMenu","SidebarMenuItem","sidebarMenuButtonVariants","cva","SidebarMenuButton","isActive","size","tooltip","button","Tooltip","TooltipTrigger","TooltipContent","SidebarMenuAction","showOnHover","SidebarMenuBadge","SidebarMenuSkeleton","showIcon","width","Math","Skeleton","SidebarMenuSub","SidebarMenuSubItem","SidebarMenuSubButton"],"mappings":"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"}
1
+ {"version":3,"file":"components\\ui\\sidebar.js","sources":["webpack://@arolariu/components/./src/components/ui/sidebar.tsx"],"sourcesContent":["\n\nimport * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { PanelLeftIcon } from \"lucide-react\";\n\nimport { useIsMobile } from \"@/hooks/useIsMobile\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n Sheet,\n SheetContent,\n SheetDescription,\n SheetHeader,\n SheetTitle,\n} from \"@/components/ui/sheet\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\";\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\n\ntype SidebarContextProps = {\n state: \"expanded\" | \"collapsed\";\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext);\n if (!context) {\n throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n }\n\n return context;\n}\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = React.useState(false);\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = React.useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === \"function\" ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open],\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n }, [isMobile, setOpen, setOpenMobile]);\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? \"expanded\" : \"collapsed\";\n\n const contextValue = React.useMemo<SidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\n <div\n data-slot=\"sidebar-wrapper\"\n style={\n {\n \"--sidebar-width\": SIDEBAR_WIDTH,\n \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn(\n \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n </TooltipProvider>\n </SidebarContext.Provider>\n );\n}\n\nfunction Sidebar({\n side = \"left\",\n variant = \"sidebar\",\n collapsible = \"offcanvas\",\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n side?: \"left\" | \"right\";\n variant?: \"sidebar\" | \"floating\" | \"inset\";\n collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n}) {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n if (collapsible === \"none\") {\n return (\n <div\n data-slot=\"sidebar\"\n className={cn(\n \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n style={\n {\n \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex h-full w-full flex-col\">{children}</div>\n </SheetContent>\n </Sheet>\n );\n }\n\n return (\n <div\n className=\"group peer text-sidebar-foreground hidden md:block\"\n data-state={state}\n data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n data-variant={variant}\n data-side={side}\n data-slot=\"sidebar\"\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n \"group-data-[collapsible=offcanvas]:w-0\",\n \"group-data-[side=right]:rotate-180\",\n variant === \"floating\" || variant === \"inset\"\n ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\",\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n className={cn(\n \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n side === \"left\"\n ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n // Adjust the padding for floating and inset variants.\n variant === \"floating\" || variant === \"inset\"\n ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n className,\n )}\n {...props}\n >\n <div\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar-inner\"\n 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\"\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n\nfunction SidebarTrigger({\n className,\n onClick,\n ...props\n}: React.ComponentProps<typeof Button>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n size=\"icon\"\n className={cn(\"size-7\", className)}\n onClick={(event) => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n <PanelLeftIcon />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n \"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\",\n \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n return (\n <main\n data-slot=\"sidebar-inset\"\n className={cn(\n \"bg-white relative flex w-full flex-1 flex-col dark:bg-neutral-950\",\n \"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInput({\n className,\n ...props\n}: React.ComponentProps<typeof Input>) {\n return (\n <Input\n data-slot=\"sidebar-input\"\n data-sidebar=\"input\"\n className={cn(\n \"bg-white h-8 w-full shadow-none dark:bg-neutral-950\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-header\"\n data-sidebar=\"header\"\n className={cn(\"flex flex-col gap-2 p-2\", className)}\n {...props}\n />\n );\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-footer\"\n data-sidebar=\"footer\"\n className={cn(\"flex flex-col gap-2 p-2\", className)}\n {...props}\n />\n );\n}\n\nfunction SidebarSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof Separator>) {\n return (\n <Separator\n data-slot=\"sidebar-separator\"\n data-sidebar=\"separator\"\n className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n {...props}\n />\n );\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn(\n \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-group\"\n data-sidebar=\"group\"\n className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupLabel({\n className,\n asChild = false,\n ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : \"div\";\n\n return (\n <Comp\n data-slot=\"sidebar-group-label\"\n data-sidebar=\"group-label\"\n className={cn(\n \"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\",\n \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupAction({\n className,\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : \"button\";\n\n return (\n <Comp\n data-slot=\"sidebar-group-action\"\n data-sidebar=\"group-action\"\n className={cn(\n \"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\",\n // Increases the hit area of the button on mobile.\n \"after:absolute after:-inset-2 md:after:hidden\",\n \"group-data-[collapsible=icon]:hidden\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupContent({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-group-content\"\n data-sidebar=\"group-content\"\n className={cn(\"w-full text-sm\", className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n return (\n <ul\n data-slot=\"sidebar-menu\"\n data-sidebar=\"menu\"\n className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n return (\n <li\n data-slot=\"sidebar-menu-item\"\n data-sidebar=\"menu-item\"\n className={cn(\"group/menu-item relative\", className)}\n {...props}\n />\n );\n}\n\nconst sidebarMenuButtonVariants = cva(\n \"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] 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\",\n {\n variants: {\n variant: {\n default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n outline:\n \"bg-white shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))] dark:bg-neutral-950\",\n },\n size: {\n default: \"h-8 text-sm\",\n sm: \"h-7 text-xs\",\n lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nfunction SidebarMenuButton({\n asChild = false,\n isActive = false,\n variant = \"default\",\n size = \"default\",\n tooltip,\n className,\n ...props\n}: React.ComponentProps<\"button\"> & {\n asChild?: boolean;\n isActive?: boolean;\n tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n const Comp = asChild ? Slot : \"button\";\n const { isMobile, state } = useSidebar();\n\n const button = (\n <Comp\n data-slot=\"sidebar-menu-button\"\n data-sidebar=\"menu-button\"\n data-size={size}\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n {...props}\n />\n );\n\n if (!tooltip) {\n return button;\n }\n\n if (typeof tooltip === \"string\") {\n tooltip = {\n children: tooltip,\n };\n }\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent\n side=\"right\"\n align=\"center\"\n hidden={state !== \"collapsed\" || isMobile}\n {...tooltip}\n />\n </Tooltip>\n );\n}\n\nfunction SidebarMenuAction({\n className,\n asChild = false,\n showOnHover = false,\n ...props\n}: React.ComponentProps<\"button\"> & {\n asChild?: boolean;\n showOnHover?: boolean;\n}) {\n const Comp = asChild ? Slot : \"button\";\n\n return (\n <Comp\n data-slot=\"sidebar-menu-action\"\n data-sidebar=\"menu-action\"\n className={cn(\n \"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\",\n // Increases the hit area of the button on mobile.\n \"after:absolute after:-inset-2 md:after:hidden\",\n \"peer-data-[size=sm]/menu-button:top-1\",\n \"peer-data-[size=default]/menu-button:top-1.5\",\n \"peer-data-[size=lg]/menu-button:top-2.5\",\n \"group-data-[collapsible=icon]:hidden\",\n showOnHover &&\n \"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\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuBadge({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n \"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\",\n \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n \"peer-data-[size=sm]/menu-button:top-1\",\n \"peer-data-[size=default]/menu-button:top-1.5\",\n \"peer-data-[size=lg]/menu-button:top-2.5\",\n \"group-data-[collapsible=icon]:hidden\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSkeleton({\n className,\n showIcon = false,\n ...props\n}: React.ComponentProps<\"div\"> & {\n showIcon?: boolean;\n}) {\n // Random width between 50 to 90%.\n const width = React.useMemo(() => {\n return `${Math.floor(Math.random() * 40) + 50}%`;\n }, []);\n\n return (\n <div\n data-slot=\"sidebar-menu-skeleton\"\n data-sidebar=\"menu-skeleton\"\n className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n {...props}\n >\n {showIcon && (\n <Skeleton\n className=\"size-4 rounded-md\"\n data-sidebar=\"menu-skeleton-icon\"\n />\n )}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={\n {\n \"--skeleton-width\": width,\n } as React.CSSProperties\n }\n />\n </div>\n );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n \"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\",\n \"group-data-[collapsible=icon]:hidden\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubItem({\n className,\n ...props\n}: React.ComponentProps<\"li\">) {\n return (\n <li\n data-slot=\"sidebar-menu-sub-item\"\n data-sidebar=\"menu-sub-item\"\n className={cn(\"group/menu-sub-item relative\", className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubButton({\n asChild = false,\n size = \"md\",\n isActive = false,\n className,\n ...props\n}: React.ComponentProps<\"a\"> & {\n asChild?: boolean;\n size?: \"sm\" | \"md\";\n isActive?: boolean;\n}) {\n const Comp = asChild ? Slot : \"a\";\n\n return (\n <Comp\n data-slot=\"sidebar-menu-sub-button\"\n data-sidebar=\"menu-sub-button\"\n data-size={size}\n data-active={isActive}\n className={cn(\n \"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\",\n \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n size === \"sm\" && \"text-xs\",\n size === \"md\" && \"text-sm\",\n \"group-data-[collapsible=icon]:hidden\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar,\n};\n"],"names":["SIDEBAR_COOKIE_NAME","SIDEBAR_COOKIE_MAX_AGE","SIDEBAR_WIDTH","SIDEBAR_WIDTH_MOBILE","SIDEBAR_WIDTH_ICON","SIDEBAR_KEYBOARD_SHORTCUT","SidebarContext","React","useSidebar","context","Error","SidebarProvider","defaultOpen","openProp","setOpenProp","className","style","children","props","isMobile","useIsMobile","openMobile","setOpenMobile","_open","_setOpen","open","setOpen","value","openState","document","toggleSidebar","handleKeyDown","event","window","state","contextValue","TooltipProvider","cn","Sidebar","side","variant","collapsible","Sheet","SheetContent","SheetHeader","SheetTitle","SheetDescription","SidebarTrigger","onClick","Button","PanelLeftIcon","SidebarRail","SidebarInset","SidebarInput","Input","SidebarHeader","SidebarFooter","SidebarSeparator","Separator","SidebarContent","SidebarGroup","SidebarGroupLabel","asChild","Comp","Slot","SidebarGroupAction","SidebarGroupContent","SidebarMenu","SidebarMenuItem","sidebarMenuButtonVariants","cva","SidebarMenuButton","isActive","size","tooltip","button","Tooltip","TooltipTrigger","TooltipContent","SidebarMenuAction","showOnHover","SidebarMenuBadge","SidebarMenuSkeleton","showIcon","width","Math","Skeleton","SidebarMenuSub","SidebarMenuSubItem","SidebarMenuSubButton"],"mappings":"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"}
@@ -22,4 +22,4 @@
22
22
  * ```
23
23
  */
24
24
  export declare function useIsMobile(): boolean;
25
- //# sourceMappingURL=use-mobile.d.ts.map
25
+ //# sourceMappingURL=useIsMobile.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useIsMobile.d.ts","sourceRoot":"","sources":["../../src/hooks/useIsMobile.tsx"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAgBrC"}
@@ -0,0 +1,19 @@
1
+ "use client";
2
+ import { useEffect, useState } from "react";
3
+ const MOBILE_BREAKPOINT = 768;
4
+ function useIsMobile() {
5
+ const [isMobile, setIsMobile] = useState(null);
6
+ useEffect(()=>{
7
+ const mql = globalThis.window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
8
+ const onChange = ()=>{
9
+ setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);
10
+ };
11
+ mql.addEventListener("change", onChange);
12
+ setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);
13
+ return ()=>mql.removeEventListener("change", onChange);
14
+ }, []);
15
+ return !!isMobile;
16
+ }
17
+ export { useIsMobile };
18
+
19
+ //# sourceMappingURL=useIsMobile.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hooks\\useIsMobile.js","sources":["webpack://@arolariu/components/./src/hooks/useIsMobile.tsx"],"sourcesContent":["\nimport * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\n/**\n * A custom React hook that detects whether the current device is a mobile device\n * based on the screen width.\n *\n * This hook uses a media query to check if the viewport width is less than the defined\n * mobile breakpoint (768px). It updates the state when the window size changes.\n *\n * @returns {boolean} Returns true if the viewport width is less than the mobile breakpoint,\n * false otherwise.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n * const isMobile = useIsMobile();\n *\n * return (\n * <div>\n * {isMobile ? 'Mobile View' : 'Desktop View'}\n * </div>\n * );\n * }\n * ```\n */\nexport function useIsMobile(): boolean {\n const [isMobile, setIsMobile] = React.useState<boolean | null>(null);\n\n React.useEffect(() => {\n const mql = globalThis.window.matchMedia(\n `(max-width: ${MOBILE_BREAKPOINT - 1}px)`,\n );\n const onChange = () => {\n setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);\n };\n mql.addEventListener(\"change\", onChange);\n setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);\n return () => mql.removeEventListener(\"change\", onChange);\n }, []);\n\n return !!isMobile;\n}\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","React","mql","globalThis","onChange"],"mappings":";;AAGA,MAAMA,oBAAoB;AAyBnB,SAASC;IACd,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAA+B;IAE/DA,UAAgB;QACd,MAAMC,MAAMC,WAAW,MAAM,CAAC,UAAU,CACtC,CAAC,YAAY,EAAEN,oBAAoB,EAAE,GAAG,CAAC;QAE3C,MAAMO,WAAW;YACfJ,YAAYG,WAAW,MAAM,CAAC,UAAU,GAAGN;QAC7C;QACAK,IAAI,gBAAgB,CAAC,UAAUE;QAC/BJ,YAAYG,WAAW,MAAM,CAAC,UAAU,GAAGN;QAC3C,OAAO,IAAMK,IAAI,mBAAmB,CAAC,UAAUE;IACjD,GAAG,EAAE;IAEL,OAAO,CAAC,CAACL;AACX"}
@@ -0,0 +1,30 @@
1
+ /** @format */
2
+ type WindowSize = {
3
+ width: number | null;
4
+ height: number | null;
5
+ };
6
+ type HookReturnType = Readonly<{
7
+ windowSize: WindowSize;
8
+ isMobile: boolean;
9
+ isDesktop: boolean;
10
+ }>;
11
+ /**
12
+ * Client hook to get the window size and whether the window is mobile or desktop.
13
+ * @returns An object containing the window size and whether the window is mobile or desktop.
14
+ *@example
15
+ * ```tsx
16
+ * function MyComponent() {
17
+ * const { windowSize, isMobile, isDesktop } = useWindowSize();
18
+ *
19
+ * return (
20
+ * <div>
21
+ * <p>Window Size: {windowSize.width} x {windowSize.height}</p>
22
+ * <p>{isMobile ? 'Mobile View' : 'Desktop View'}</p>
23
+ * </div>
24
+ * );
25
+ * }
26
+ * ```
27
+ */
28
+ export declare function useWindowSize(): HookReturnType;
29
+ export {};
30
+ //# sourceMappingURL=useWindowSize.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useWindowSize.tsx"],"names":[],"mappings":"AAAA,cAAc;AAQd,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAAC;AAEF,KAAK,cAAc,GAAG,QAAQ,CAAC;IAC7B,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,IAAI,cAAc,CAmC9C"}
@@ -0,0 +1,28 @@
1
+ import { useEffect, useState } from "react";
2
+ "use client";
3
+ const MOBILE_BREAKPOINT = 768;
4
+ function useWindowSize() {
5
+ const [windowSize, setWindowSize] = useState({
6
+ width: null,
7
+ height: null
8
+ });
9
+ useEffect(()=>{
10
+ function __handleResize__() {
11
+ setWindowSize({
12
+ width: globalThis.window.innerWidth,
13
+ height: globalThis.window.innerHeight
14
+ });
15
+ }
16
+ globalThis.window.addEventListener("resize", __handleResize__);
17
+ __handleResize__();
18
+ return ()=>globalThis.window.removeEventListener("resize", __handleResize__);
19
+ }, []);
20
+ return {
21
+ windowSize,
22
+ isMobile: "number" == typeof windowSize.width && windowSize.width < MOBILE_BREAKPOINT,
23
+ isDesktop: "number" == typeof windowSize.width && windowSize.width >= MOBILE_BREAKPOINT
24
+ };
25
+ }
26
+ export { useWindowSize };
27
+
28
+ //# sourceMappingURL=useWindowSize.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hooks\\useWindowSize.js","sources":["webpack://@arolariu/components/./src/hooks/useWindowSize.tsx"],"sourcesContent":["/** @format */\n\n\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\ntype WindowSize = {\n width: number | null;\n height: number | null;\n};\n\ntype HookReturnType = Readonly<{\n windowSize: WindowSize;\n isMobile: boolean;\n isDesktop: boolean;\n}>;\n\n/**\n * Client hook to get the window size and whether the window is mobile or desktop.\n * @returns An object containing the window size and whether the window is mobile or desktop.\n *@example\n * ```tsx\n * function MyComponent() {\n * const { windowSize, isMobile, isDesktop } = useWindowSize();\n *\n * return (\n * <div>\n * <p>Window Size: {windowSize.width} x {windowSize.height}</p>\n * <p>{isMobile ? 'Mobile View' : 'Desktop View'}</p>\n * </div>\n * );\n * }\n * ```\n */\nexport function useWindowSize(): HookReturnType {\n const [windowSize, setWindowSize] = useState<WindowSize>({\n width: null,\n height: null,\n });\n\n useEffect(() => {\n /**\n * This function updates the window size.\n * It is created inside of useEffect and has a short lifespan.\n * After it is attached to the window object, it will be garbage collected\n * when the component unmounts or the window is resized.\n */\n function __handleResize__() {\n setWindowSize({\n width: globalThis.window.innerWidth,\n height: globalThis.window.innerHeight,\n });\n }\n\n globalThis.window.addEventListener(\"resize\", __handleResize__);\n __handleResize__(); // Call the function once to get the initial window size\n return () =>\n globalThis.window.removeEventListener(\"resize\", __handleResize__);\n }, []); // Empty array ensures that effect is only run on mount\n\n return {\n windowSize,\n isMobile:\n typeof windowSize.width === \"number\" &&\n windowSize.width < MOBILE_BREAKPOINT,\n isDesktop:\n typeof windowSize.width === \"number\" &&\n windowSize.width >= MOBILE_BREAKPOINT,\n } as const;\n}\n"],"names":["MOBILE_BREAKPOINT","useWindowSize","windowSize","setWindowSize","useState","useEffect","__handleResize__","globalThis"],"mappings":";AAEA;AAIA,MAAMA,oBAAoB;AA8BnB,SAASC;IACd,MAAM,CAACC,YAAYC,cAAc,GAAGC,SAAqB;QACvD,OAAO;QACP,QAAQ;IACV;IAEAC,UAAU;QAOR,SAASC;YACPH,cAAc;gBACZ,OAAOI,WAAW,MAAM,CAAC,UAAU;gBACnC,QAAQA,WAAW,MAAM,CAAC,WAAW;YACvC;QACF;QAEAA,WAAW,MAAM,CAAC,gBAAgB,CAAC,UAAUD;QAC7CA;QACA,OAAO,IACLC,WAAW,MAAM,CAAC,mBAAmB,CAAC,UAAUD;IACpD,GAAG,EAAE;IAEL,OAAO;QACLJ;QACA,UACE,AAA4B,YAA5B,OAAOA,WAAW,KAAK,IACvBA,WAAW,KAAK,GAAGF;QACrB,WACE,AAA4B,YAA5B,OAAOE,WAAW,KAAK,IACvBA,WAAW,KAAK,IAAIF;IACxB;AACF"}
package/dist/index.d.ts CHANGED
@@ -44,7 +44,8 @@ export { Textarea } from "./components/ui/textarea";
44
44
  export { ToggleGroup, ToggleGroupItem } from "./components/ui/toggle-group";
45
45
  export { Toggle, toggleVariants } from "./components/ui/toggle";
46
46
  export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, } from "./components/ui/tooltip";
47
- export { useIsMobile } from "./hooks/use-mobile";
47
+ export { useIsMobile } from "./hooks/useIsMobile";
48
+ export { useWindowSize } from "./hooks/useWindowSize";
48
49
  export { cn } from "./lib/utils";
49
50
  export { FlipButton, type FlipButtonProps, type FlipDirection, } from "./components/ui/flip-button";
50
51
  export { RippleButton, type RippleButtonProps, } from "./components/ui/ripple-button";
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
package/dist/index.js CHANGED
@@ -44,7 +44,8 @@ import { Textarea } from "./components/ui/textarea.js";
44
44
  import { ToggleGroup, ToggleGroupItem } from "./components/ui/toggle-group.js";
45
45
  import { Toggle, toggleVariants } from "./components/ui/toggle.js";
46
46
  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/ui/tooltip.js";
47
- import { useIsMobile } from "./hooks/use-mobile.js";
47
+ import { useIsMobile } from "./hooks/useIsMobile.js";
48
+ import { useWindowSize } from "./hooks/useWindowSize.js";
48
49
  import { cn } from "./lib/utils.js";
49
50
  import { FlipButton } from "./components/ui/flip-button.js";
50
51
  import { RippleButton } from "./components/ui/ripple-button.js";
@@ -60,4 +61,4 @@ import { DotBackground } from "./components/ui/dot-background.js";
60
61
  import { BackgroundBeams } from "./components/ui/background-beams.js";
61
62
  import { TypewriterText, TypewriterTextSmooth } from "./components/ui/typewriter.js";
62
63
  import { DropDrawer, DropDrawerContent, DropDrawerFooter, DropDrawerGroup, DropDrawerItem, DropDrawerLabel, DropDrawerSeparator, DropDrawerSub, DropDrawerSubContent, DropDrawerSubTrigger, DropDrawerTrigger } from "./components/ui/dropdrawer.js";
63
- export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, BackgroundBeams, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BubbleBackground, Button, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CountingNumber, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DotBackground, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropDrawer, DropDrawerContent, DropDrawerFooter, DropDrawerGroup, DropDrawerItem, DropDrawerLabel, DropDrawerSeparator, DropDrawerSub, DropDrawerSubContent, DropDrawerSubTrigger, DropDrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FireworksBackground, FlipButton, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GradientBackground, GradientText, HighlightText, HoleBackground, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RippleButton, Scratcher, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypewriterText, TypewriterTextSmooth, badgeVariants, buttonVariants, cn, navigationMenuTriggerStyle, toast, toggleVariants, useFormField, useIsMobile, useSidebar };
64
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, BackgroundBeams, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BubbleBackground, Button, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CountingNumber, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DotBackground, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropDrawer, DropDrawerContent, DropDrawerFooter, DropDrawerGroup, DropDrawerItem, DropDrawerLabel, DropDrawerSeparator, DropDrawerSub, DropDrawerSubContent, DropDrawerSubTrigger, DropDrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FireworksBackground, FlipButton, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GradientBackground, GradientText, HighlightText, HoleBackground, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RippleButton, Scratcher, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypewriterText, TypewriterTextSmooth, badgeVariants, buttonVariants, cn, navigationMenuTriggerStyle, toast, toggleVariants, useFormField, useIsMobile, useSidebar, useWindowSize };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@arolariu/components",
3
3
  "displayName": "@arolariu/components",
4
- "version": "0.1.1",
4
+ "version": "0.1.2",
5
5
  "description": "🎨 60+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡",
6
6
  "homepage": "https://arolariu.ro",
7
7
  "repository": {
@@ -125,19 +125,19 @@
125
125
  "cmdk": "1.1.1",
126
126
  "embla-carousel-react": "8.6.0",
127
127
  "input-otp": "1.4.2",
128
- "lucide-react": "0.541.0",
128
+ "lucide-react": "0.542.0",
129
129
  "motion": "12.23.12",
130
130
  "next-themes": "0.4.6",
131
131
  "react-day-picker": "9.9.0",
132
132
  "react-hook-form": "7.62.0",
133
133
  "react-resizable-panels": "3.0.5",
134
134
  "recharts": "3.1.2",
135
- "shiki": "3.11.0",
135
+ "shiki": "3.12.2",
136
136
  "sonner": "2.0.7",
137
137
  "tailwind-merge": "3.3.1",
138
138
  "tailwindcss-animate": "1.0.7",
139
139
  "vaul": "1.1.2",
140
- "zod": "4.1.1"
140
+ "zod": "4.1.5"
141
141
  },
142
142
  "peerDependencies": {
143
143
  "motion": "^12",
@@ -147,9 +147,9 @@
147
147
  },
148
148
  "devDependencies": {
149
149
  "@microsoft/api-extractor": "7.52.11",
150
- "@rsbuild/core": "1.4.16",
151
- "@rsbuild/plugin-react": "1.3.5",
152
- "@rslib/core": "0.12.2",
150
+ "@rsbuild/core": "1.5.4",
151
+ "@rsbuild/plugin-react": "1.4.0",
152
+ "@rslib/core": "0.13.0",
153
153
  "@storybook/addon-a11y": "8.6.14",
154
154
  "@storybook/addon-docs": "8.6.14",
155
155
  "@storybook/addon-essentials": "8.6.14",
@@ -158,9 +158,9 @@
158
158
  "@storybook/addon-storysource": "8.6.14",
159
159
  "@storybook/addon-themes": "8.6.14",
160
160
  "@tailwindcss/postcss": "4.1.12",
161
- "@types/node": "24.3.0",
162
- "@types/react": "19.1.11",
163
- "@types/react-dom": "19.1.7",
161
+ "@types/node": "24.3.1",
162
+ "@types/react": "19.1.12",
163
+ "@types/react-dom": "19.1.9",
164
164
  "cssnano": "7.1.1",
165
165
  "playwright": "1.55.0",
166
166
  "postcss": "8.5.6",
@@ -489,10 +489,15 @@
489
489
  "import": "./dist/components/ui/typewriter.js",
490
490
  "default": "./dist/components/ui/typewriter.js"
491
491
  },
492
- "./use-mobile": {
493
- "types": "./dist/components/ui/use-mobile.d.ts",
494
- "import": "./dist/components/ui/use-mobile.js",
495
- "default": "./dist/components/ui/use-mobile.js"
492
+ "./useismobile": {
493
+ "types": "./dist/components/ui/useismobile.d.ts",
494
+ "import": "./dist/components/ui/useismobile.js",
495
+ "default": "./dist/components/ui/useismobile.js"
496
+ },
497
+ "./usewindowsize": {
498
+ "types": "./dist/components/ui/usewindowsize.d.ts",
499
+ "import": "./dist/components/ui/usewindowsize.js",
500
+ "default": "./dist/components/ui/usewindowsize.js"
496
501
  },
497
502
  "./utils": {
498
503
  "types": "./dist/components/ui/utils.d.ts",
@@ -500,4 +505,4 @@
500
505
  "default": "./dist/components/ui/utils.js"
501
506
  }
502
507
  }
503
- }
508
+ }
@@ -24,7 +24,7 @@ import {
24
24
  DropdownMenuSubTrigger,
25
25
  DropdownMenuTrigger,
26
26
  } from "@/components/ui/dropdown-menu";
27
- import { useIsMobile } from "@/hooks/use-mobile";
27
+ import { useIsMobile } from "@/hooks/useIsMobile";
28
28
  import { cn } from "@/lib/utils";
29
29
 
30
30
  const DropDrawerContext = React.createContext<{ isMobile: boolean }>({
@@ -5,7 +5,7 @@ import { Slot } from "@radix-ui/react-slot";
5
5
  import { cva, VariantProps } from "class-variance-authority";
6
6
  import { PanelLeftIcon } from "lucide-react";
7
7
 
8
- import { useIsMobile } from "@/hooks/use-mobile";
8
+ import { useIsMobile } from "@/hooks/useIsMobile";
9
9
  import { cn } from "@/lib/utils";
10
10
  import { Button } from "@/components/ui/button";
11
11
  import { Input } from "@/components/ui/input";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import * as React from "react";
2
3
 
3
4
  const MOBILE_BREAKPOINT = 768;
@@ -26,17 +27,17 @@ const MOBILE_BREAKPOINT = 768;
26
27
  * ```
27
28
  */
28
29
  export function useIsMobile(): boolean {
29
- const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
30
- undefined,
31
- );
30
+ const [isMobile, setIsMobile] = React.useState<boolean | null>(null);
32
31
 
33
32
  React.useEffect(() => {
34
- const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
33
+ const mql = globalThis.window.matchMedia(
34
+ `(max-width: ${MOBILE_BREAKPOINT - 1}px)`,
35
+ );
35
36
  const onChange = () => {
36
- setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
37
+ setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);
37
38
  };
38
39
  mql.addEventListener("change", onChange);
39
- setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
40
+ setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);
40
41
  return () => mql.removeEventListener("change", onChange);
41
42
  }, []);
42
43
 
@@ -0,0 +1,72 @@
1
+ /** @format */
2
+
3
+ "use client";
4
+
5
+ import { useEffect, useState } from "react";
6
+
7
+ const MOBILE_BREAKPOINT = 768;
8
+
9
+ type WindowSize = {
10
+ width: number | null;
11
+ height: number | null;
12
+ };
13
+
14
+ type HookReturnType = Readonly<{
15
+ windowSize: WindowSize;
16
+ isMobile: boolean;
17
+ isDesktop: boolean;
18
+ }>;
19
+
20
+ /**
21
+ * Client hook to get the window size and whether the window is mobile or desktop.
22
+ * @returns An object containing the window size and whether the window is mobile or desktop.
23
+ *@example
24
+ * ```tsx
25
+ * function MyComponent() {
26
+ * const { windowSize, isMobile, isDesktop } = useWindowSize();
27
+ *
28
+ * return (
29
+ * <div>
30
+ * <p>Window Size: {windowSize.width} x {windowSize.height}</p>
31
+ * <p>{isMobile ? 'Mobile View' : 'Desktop View'}</p>
32
+ * </div>
33
+ * );
34
+ * }
35
+ * ```
36
+ */
37
+ export function useWindowSize(): HookReturnType {
38
+ const [windowSize, setWindowSize] = useState<WindowSize>({
39
+ width: null,
40
+ height: null,
41
+ });
42
+
43
+ useEffect(() => {
44
+ /**
45
+ * This function updates the window size.
46
+ * It is created inside of useEffect and has a short lifespan.
47
+ * After it is attached to the window object, it will be garbage collected
48
+ * when the component unmounts or the window is resized.
49
+ */
50
+ function __handleResize__() {
51
+ setWindowSize({
52
+ width: globalThis.window.innerWidth,
53
+ height: globalThis.window.innerHeight,
54
+ });
55
+ }
56
+
57
+ globalThis.window.addEventListener("resize", __handleResize__);
58
+ __handleResize__(); // Call the function once to get the initial window size
59
+ return () =>
60
+ globalThis.window.removeEventListener("resize", __handleResize__);
61
+ }, []); // Empty array ensures that effect is only run on mount
62
+
63
+ return {
64
+ windowSize,
65
+ isMobile:
66
+ typeof windowSize.width === "number" &&
67
+ windowSize.width < MOBILE_BREAKPOINT,
68
+ isDesktop:
69
+ typeof windowSize.width === "number" &&
70
+ windowSize.width >= MOBILE_BREAKPOINT,
71
+ } as const;
72
+ }
package/src/index.ts CHANGED
@@ -329,7 +329,8 @@ export {
329
329
  TooltipProvider,
330
330
  } from "./components/ui/tooltip";
331
331
 
332
- export { useIsMobile } from "./hooks/use-mobile";
332
+ export { useIsMobile } from "./hooks/useIsMobile";
333
+ export { useWindowSize } from "./hooks/useWindowSize";
333
334
 
334
335
  export { cn } from "./lib/utils";
335
336
 
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobile.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAgBrC"}
@@ -1,18 +0,0 @@
1
- import { useEffect, useState } from "react";
2
- const MOBILE_BREAKPOINT = 768;
3
- function useIsMobile() {
4
- const [isMobile, setIsMobile] = useState(void 0);
5
- useEffect(()=>{
6
- const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
7
- const onChange = ()=>{
8
- setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
9
- };
10
- mql.addEventListener("change", onChange);
11
- setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
12
- return ()=>mql.removeEventListener("change", onChange);
13
- }, []);
14
- return !!isMobile;
15
- }
16
- export { useIsMobile };
17
-
18
- //# sourceMappingURL=use-mobile.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"hooks\\use-mobile.js","sources":["webpack://@arolariu/components/./src/hooks/use-mobile.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\n/**\n * A custom React hook that detects whether the current device is a mobile device\n * based on the screen width.\n *\n * This hook uses a media query to check if the viewport width is less than the defined\n * mobile breakpoint (768px). It updates the state when the window size changes.\n *\n * @returns {boolean} Returns true if the viewport width is less than the mobile breakpoint,\n * false otherwise.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n * const isMobile = useIsMobile();\n *\n * return (\n * <div>\n * {isMobile ? 'Mobile View' : 'Desktop View'}\n * </div>\n * );\n * }\n * ```\n */\nexport function useIsMobile(): boolean {\n const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n undefined,\n );\n\n React.useEffect(() => {\n const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n const onChange = () => {\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n };\n mql.addEventListener(\"change\", onChange);\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n return () => mql.removeEventListener(\"change\", onChange);\n }, []);\n\n return !!isMobile;\n}\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","React","undefined","mql","window","onChange"],"mappings":";AAEA,MAAMA,oBAAoB;AAyBnB,SAASC;IACd,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAC9BC;IAGFD,UAAgB;QACd,MAAME,MAAMC,OAAO,UAAU,CAAC,CAAC,YAAY,EAAEP,oBAAoB,EAAE,GAAG,CAAC;QACvE,MAAMQ,WAAW;YACfL,YAAYI,OAAO,UAAU,GAAGP;QAClC;QACAM,IAAI,gBAAgB,CAAC,UAAUE;QAC/BL,YAAYI,OAAO,UAAU,GAAGP;QAChC,OAAO,IAAMM,IAAI,mBAAmB,CAAC,UAAUE;IACjD,GAAG,EAAE;IAEL,OAAO,CAAC,CAACN;AACX"}