@arolariu/components 0.2.0 → 0.3.1

package/dist/components/ui/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"components\\ui\\sidebar.js","sources":["webpack://@arolariu/components/./src/components/ui/sidebar.tsx"],"sourcesContent":["\r\n\r\n/* eslint-disable */\r\n\r\nimport {Slot} from \"@radix-ui/react-slot\";\r\nimport {cva, VariantProps} from \"class-variance-authority\";\r\nimport {PanelLeftIcon} from \"lucide-react\";\r\nimport * as React from \"react\";\r\n\r\nimport {Button} from \"@/components/ui/button\";\r\nimport {Input} from \"@/components/ui/input\";\r\nimport {Separator} from \"@/components/ui/separator\";\r\nimport {Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle} from \"@/components/ui/sheet\";\r\nimport {Skeleton} from \"@/components/ui/skeleton\";\r\nimport {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from \"@/components/ui/tooltip\";\r\nimport {useIsMobile} from \"@/hooks/useIsMobile\";\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\";\r\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\r\nconst SIDEBAR_WIDTH = \"16rem\";\r\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\";\r\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\r\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\r\n\r\ntype SidebarContextProps = {\r\n  state: \"expanded\" | \"collapsed\";\r\n  open: boolean;\r\n  setOpen: (open: boolean) => void;\r\n  openMobile: boolean;\r\n  setOpenMobile: (open: boolean) => void;\r\n  isMobile: boolean;\r\n  toggleSidebar: () => void;\r\n};\r\n\r\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\r\n\r\nfunction useSidebar() {\r\n  const context = React.useContext(SidebarContext);\r\n  if (!context) {\r\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\");\r\n  }\r\n\r\n  return context;\r\n}\r\n\r\nfunction SidebarProvider({\r\n  defaultOpen = true,\r\n  open: openProp,\r\n  onOpenChange: setOpenProp,\r\n  className,\r\n  style,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n  defaultOpen?: boolean;\r\n  open?: boolean;\r\n  onOpenChange?: (open: boolean) => void;\r\n}) {\r\n  const isMobile = useIsMobile();\r\n  const [openMobile, setOpenMobile] = React.useState(false);\r\n\r\n  // This is the internal state of the sidebar.\r\n  // We use openProp and setOpenProp for control from outside the component.\r\n  const [_open, _setOpen] = React.useState(defaultOpen);\r\n  const open = openProp ?? _open;\r\n  const setOpen = React.useCallback(\r\n    (value: boolean | ((value: boolean) => boolean)) => {\r\n      const openState = typeof value === \"function\" ? value(open) : value;\r\n      if (setOpenProp) {\r\n        setOpenProp(openState);\r\n      } else {\r\n        _setOpen(openState);\r\n      }\r\n\r\n      // This sets the cookie to keep the sidebar state.\r\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\r\n    },\r\n    [setOpenProp, open],\r\n  );\r\n\r\n  // Helper to toggle the sidebar.\r\n  const toggleSidebar = React.useCallback(() => {\r\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\r\n  }, [isMobile, setOpen, setOpenMobile]);\r\n\r\n  // Adds a keyboard shortcut to toggle the sidebar.\r\n  React.useEffect(() => {\r\n    const handleKeyDown = (event: KeyboardEvent) => {\r\n      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\r\n        event.preventDefault();\r\n        toggleSidebar();\r\n      }\r\n    };\r\n\r\n    window.addEventListener(\"keydown\", handleKeyDown);\r\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\r\n  }, [toggleSidebar]);\r\n\r\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\r\n  // This makes it easier to style the sidebar with Tailwind classes.\r\n  const state = open ? \"expanded\" : \"collapsed\";\r\n\r\n  const contextValue = React.useMemo<SidebarContextProps>(\r\n    () => ({\r\n      state,\r\n      open,\r\n      setOpen,\r\n      isMobile,\r\n      openMobile,\r\n      setOpenMobile,\r\n      toggleSidebar,\r\n    }),\r\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\r\n  );\r\n\r\n  return (\r\n    <SidebarContext.Provider value={contextValue}>\r\n      <TooltipProvider delayDuration={0}>\r\n        <div\r\n          data-slot='sidebar-wrapper'\r\n          style={\r\n            {\r\n              \"--sidebar-width\": SIDEBAR_WIDTH,\r\n              \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\r\n              ...style,\r\n            } as React.CSSProperties\r\n          }\r\n          className={cn(\"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\", className)}\r\n          {...props}>\r\n          {children}\r\n        </div>\r\n      </TooltipProvider>\r\n    </SidebarContext.Provider>\r\n  );\r\n}\r\n\r\nfunction Sidebar({\r\n  side = \"left\",\r\n  variant = \"sidebar\",\r\n  collapsible = \"offcanvas\",\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n  side?: \"left\" | \"right\";\r\n  variant?: \"sidebar\" | \"floating\" | \"inset\";\r\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\";\r\n}) {\r\n  const {isMobile, state, openMobile, setOpenMobile} = useSidebar();\r\n\r\n  if (collapsible === \"none\") {\r\n    return (\r\n      <div\r\n        data-slot='sidebar'\r\n        className={cn(\"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\", className)}\r\n        {...props}>\r\n        {children}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  if (isMobile) {\r\n    return (\r\n      <Sheet\r\n        open={openMobile}\r\n        onOpenChange={setOpenMobile}\r\n        {...props}>\r\n        <SheetContent\r\n          data-sidebar='sidebar'\r\n          data-slot='sidebar'\r\n          data-mobile='true'\r\n          className='bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden'\r\n          style={\r\n            {\r\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\r\n            } as React.CSSProperties\r\n          }\r\n          side={side}>\r\n          <SheetHeader className='sr-only'>\r\n            <SheetTitle>Sidebar</SheetTitle>\r\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\r\n          </SheetHeader>\r\n          <div className='flex h-full w-full flex-col'>{children}</div>\r\n        </SheetContent>\r\n      </Sheet>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className='group peer text-sidebar-foreground hidden md:block'\r\n      data-state={state}\r\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\r\n      data-variant={variant}\r\n      data-side={side}\r\n      data-slot='sidebar'>\r\n      {/* This is what handles the sidebar gap on desktop */}\r\n      <div\r\n        data-slot='sidebar-gap'\r\n        className={cn(\r\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\r\n          \"group-data-[collapsible=offcanvas]:w-0\",\r\n          \"group-data-[side=right]:rotate-180\",\r\n          variant === \"floating\" || variant === \"inset\"\r\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\r\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\",\r\n        )}\r\n      />\r\n      <div\r\n        data-slot='sidebar-container'\r\n        className={cn(\r\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\r\n          side === \"left\"\r\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\r\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\r\n          // Adjust the padding for floating and inset variants.\r\n          variant === \"floating\" || variant === \"inset\"\r\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\r\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\r\n          className,\r\n        )}\r\n        {...props}>\r\n        <div\r\n          data-sidebar='sidebar'\r\n          data-slot='sidebar-inner'\r\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'>\r\n          {children}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction SidebarTrigger({className, onClick, ...props}: React.ComponentProps<typeof Button>) {\r\n  const {toggleSidebar} = useSidebar();\r\n\r\n  return (\r\n    <Button\r\n      data-sidebar='trigger'\r\n      data-slot='sidebar-trigger'\r\n      variant='ghost'\r\n      size='icon'\r\n      className={cn(\"size-7\", className)}\r\n      onClick={(event) => {\r\n        onClick?.(event);\r\n        toggleSidebar();\r\n      }}\r\n      {...props}>\r\n      <PanelLeftIcon />\r\n      <span className='sr-only'>Toggle Sidebar</span>\r\n    </Button>\r\n  );\r\n}\r\n\r\nfunction SidebarRail({className, ...props}: React.ComponentProps<\"button\">) {\r\n  const {toggleSidebar} = useSidebar();\r\n\r\n  return (\r\n    <button\r\n      data-sidebar='rail'\r\n      data-slot='sidebar-rail'\r\n      aria-label='Toggle Sidebar'\r\n      tabIndex={-1}\r\n      onClick={toggleSidebar}\r\n      title='Toggle Sidebar'\r\n      className={cn(\r\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\",\r\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\r\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\r\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\r\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\r\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction SidebarInset({className, ...props}: React.ComponentProps<\"main\">) {\r\n  return (\r\n    <main\r\n      data-slot='sidebar-inset'\r\n      className={cn(\r\n        \"relative flex w-full flex-1 flex-col bg-white dark:bg-neutral-950\",\r\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\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction SidebarInput({className, ...props}: React.ComponentProps<typeof Input>) {\r\n  return (\r\n    <Input\r\n      data-slot='sidebar-input'\r\n      data-sidebar='input'\r\n      className={cn(\"h-8 w-full bg-white shadow-none dark:bg-neutral-950\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction SidebarHeader({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='sidebar-header'\r\n      data-sidebar='header'\r\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction SidebarFooter({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='sidebar-footer'\r\n      data-sidebar='footer'\r\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction SidebarSeparator({className, ...props}: React.ComponentProps<typeof Separator>) {\r\n  return (\r\n    <Separator\r\n      data-slot='sidebar-separator'\r\n      data-sidebar='separator'\r\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction SidebarContent({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='sidebar-content'\r\n      data-sidebar='content'\r\n      className={cn(\"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction SidebarGroup({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='sidebar-group'\r\n      data-sidebar='group'\r\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction SidebarGroupLabel({className, asChild = false, ...props}: React.ComponentProps<\"div\"> & {asChild?: boolean}) {\r\n  const Comp = asChild ? Slot : \"div\";\r\n\r\n  return (\r\n    <Comp\r\n      data-slot='sidebar-group-label'\r\n      data-sidebar='group-label'\r\n      className={cn(\r\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\",\r\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction SidebarGroupAction({className, asChild = false, ...props}: React.ComponentProps<\"button\"> & {asChild?: boolean}) {\r\n  const Comp = asChild ? Slot : \"button\";\r\n\r\n  return (\r\n    <Comp\r\n      data-slot='sidebar-group-action'\r\n      data-sidebar='group-action'\r\n      className={cn(\r\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\",\r\n        // Increases the hit area of the button on mobile.\r\n        \"after:absolute after:-inset-2 md:after:hidden\",\r\n        \"group-data-[collapsible=icon]:hidden\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction SidebarGroupContent({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='sidebar-group-content'\r\n      data-sidebar='group-content'\r\n      className={cn(\"w-full text-sm\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction SidebarMenu({className, ...props}: React.ComponentProps<\"ul\">) {\r\n  return (\r\n    <ul\r\n      data-slot='sidebar-menu'\r\n      data-sidebar='menu'\r\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction SidebarMenuItem({className, ...props}: React.ComponentProps<\"li\">) {\r\n  return (\r\n    <li\r\n      data-slot='sidebar-menu-item'\r\n      data-sidebar='menu-item'\r\n      className={cn(\"group/menu-item relative\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nconst sidebarMenuButtonVariants = cva(\r\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\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\r\n        outline:\r\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\",\r\n      },\r\n      size: {\r\n        default: \"h-8 text-sm\",\r\n        sm: \"h-7 text-xs\",\r\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\",\r\n    },\r\n  },\r\n);\r\n\r\nfunction SidebarMenuButton({\r\n  asChild = false,\r\n  isActive = false,\r\n  variant = \"default\",\r\n  size = \"default\",\r\n  tooltip,\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"button\"> & {\r\n  asChild?: boolean;\r\n  isActive?: boolean;\r\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>;\r\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\r\n  const Comp = asChild ? Slot : \"button\";\r\n  const {isMobile, state} = useSidebar();\r\n\r\n  const button = (\r\n    <Comp\r\n      data-slot='sidebar-menu-button'\r\n      data-sidebar='menu-button'\r\n      data-size={size}\r\n      data-active={isActive}\r\n      className={cn(sidebarMenuButtonVariants({variant, size}), className)}\r\n      {...props}\r\n    />\r\n  );\r\n\r\n  if (!tooltip) {\r\n    return button;\r\n  }\r\n\r\n  if (typeof tooltip === \"string\") {\r\n    tooltip = {\r\n      children: tooltip,\r\n    };\r\n  }\r\n\r\n  return (\r\n    <Tooltip>\r\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\r\n      <TooltipContent\r\n        side='right'\r\n        align='center'\r\n        hidden={state !== \"collapsed\" || isMobile}\r\n        {...tooltip}\r\n      />\r\n    </Tooltip>\r\n  );\r\n}\r\n\r\nfunction SidebarMenuAction({\r\n  className,\r\n  asChild = false,\r\n  showOnHover = false,\r\n  ...props\r\n}: React.ComponentProps<\"button\"> & {\r\n  asChild?: boolean;\r\n  showOnHover?: boolean;\r\n}) {\r\n  const Comp = asChild ? Slot : \"button\";\r\n\r\n  return (\r\n    <Comp\r\n      data-slot='sidebar-menu-action'\r\n      data-sidebar='menu-action'\r\n      className={cn(\r\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\",\r\n        // Increases the hit area of the button on mobile.\r\n        \"after:absolute after:-inset-2 md:after:hidden\",\r\n        \"peer-data-[size=sm]/menu-button:top-1\",\r\n        \"peer-data-[size=default]/menu-button:top-1.5\",\r\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\r\n        \"group-data-[collapsible=icon]:hidden\",\r\n        showOnHover\r\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\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction SidebarMenuBadge({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='sidebar-menu-badge'\r\n      data-sidebar='menu-badge'\r\n      className={cn(\r\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\",\r\n        \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\r\n        \"peer-data-[size=sm]/menu-button:top-1\",\r\n        \"peer-data-[size=default]/menu-button:top-1.5\",\r\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\r\n        \"group-data-[collapsible=icon]:hidden\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction SidebarMenuSkeleton({\r\n  className,\r\n  showIcon = false,\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n  showIcon?: boolean;\r\n}) {\r\n  // Random width between 50 to 90%.\r\n  const width = React.useMemo(() => {\r\n    return `${Math.floor(Math.random() * 40) + 50}%`;\r\n  }, []);\r\n\r\n  return (\r\n    <div\r\n      data-slot='sidebar-menu-skeleton'\r\n      data-sidebar='menu-skeleton'\r\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\r\n      {...props}>\r\n      {showIcon && (\r\n        <Skeleton\r\n          className='size-4 rounded-md'\r\n          data-sidebar='menu-skeleton-icon'\r\n        />\r\n      )}\r\n      <Skeleton\r\n        className='h-4 max-w-(--skeleton-width) flex-1'\r\n        data-sidebar='menu-skeleton-text'\r\n        style={\r\n          {\r\n            \"--skeleton-width\": width,\r\n          } as React.CSSProperties\r\n        }\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction SidebarMenuSub({className, ...props}: React.ComponentProps<\"ul\">) {\r\n  return (\r\n    <ul\r\n      data-slot='sidebar-menu-sub'\r\n      data-sidebar='menu-sub'\r\n      className={cn(\r\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\",\r\n        \"group-data-[collapsible=icon]:hidden\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction SidebarMenuSubItem({className, ...props}: React.ComponentProps<\"li\">) {\r\n  return (\r\n    <li\r\n      data-slot='sidebar-menu-sub-item'\r\n      data-sidebar='menu-sub-item'\r\n      className={cn(\"group/menu-sub-item relative\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction SidebarMenuSubButton({\r\n  asChild = false,\r\n  size = \"md\",\r\n  isActive = false,\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"a\"> & {\r\n  asChild?: boolean;\r\n  size?: \"sm\" | \"md\";\r\n  isActive?: boolean;\r\n}) {\r\n  const Comp = asChild ? Slot : \"a\";\r\n\r\n  return (\r\n    <Comp\r\n      data-slot='sidebar-menu-sub-button'\r\n      data-sidebar='menu-sub-button'\r\n      data-size={size}\r\n      data-active={isActive}\r\n      className={cn(\r\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\",\r\n        \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\r\n        size === \"sm\" && \"text-xs\",\r\n        size === \"md\" && \"text-sm\",\r\n        \"group-data-[collapsible=icon]:hidden\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  Sidebar,\r\n  SidebarContent,\r\n  SidebarFooter,\r\n  SidebarGroup,\r\n  SidebarGroupAction,\r\n  SidebarGroupContent,\r\n  SidebarGroupLabel,\r\n  SidebarHeader,\r\n  SidebarInput,\r\n  SidebarInset,\r\n  SidebarMenu,\r\n  SidebarMenuAction,\r\n  SidebarMenuBadge,\r\n  SidebarMenuButton,\r\n  SidebarMenuItem,\r\n  SidebarMenuSkeleton,\r\n  SidebarMenuSub,\r\n  SidebarMenuSubButton,\r\n  SidebarMenuSubItem,\r\n  SidebarProvider,\r\n  SidebarRail,\r\n  SidebarSeparator,\r\n  SidebarTrigger,\r\n  useSidebar,\r\n};\r\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":";;;;;;;;;;;;;;AAkBA,MAAMA,sBAAsB;AAC5B,MAAMC,yBAAyB;AAC/B,MAAMC,gBAAgB;AACtB,MAAMC,uBAAuB;AAC7B,MAAMC,qBAAqB;AAC3B,MAAMC,4BAA4B;AAYlC,MAAMC,iBAAiB,WAAjBA,GAAiBC,cAAgD;AAEvE,SAASC;IACP,MAAMC,UAAUF,WAAiBD;IACjC,IAAI,CAACG,SACH,MAAM,IAAIC,MAAM;IAGlB,OAAOD;AACT;AAEA,SAASE,gBAAgB,EACvBC,cAAc,IAAI,EAClB,MAAMC,QAAQ,EACd,cAAcC,WAAW,EACzBC,SAAS,EACTC,KAAK,EACLC,QAAQ,EACR,GAAGC,OAKJ;IACC,MAAMC,WAAWC;IACjB,MAAM,CAACC,YAAYC,cAAc,GAAGf,SAAe;IAInD,MAAM,CAACgB,OAAOC,SAAS,GAAGjB,SAAeK;IACzC,MAAMa,OAAOZ,YAAYU;IACzB,MAAMG,UAAUnB,YACd,CAACoB;QACC,MAAMC,YAAY,qBAAOD,QAAuBA,MAAMF,QAAQE;QAC9D,IAAIb,aACFA,YAAYc;aAEZJ,SAASI;QAIXC,SAAS,MAAM,GAAG,GAAG7B,oBAAoB,CAAC,EAAE4B,UAAU,kBAAkB,EAAE3B,wBAAwB;IACpG,GACA;QAACa;QAAaW;KAAK;IAIrB,MAAMK,gBAAgBvB,YAAkB,IAC/BY,WAAWG,cAAc,CAACG,OAAS,CAACA,QAAQC,QAAQ,CAACD,OAAS,CAACA,OACrE;QAACN;QAAUO;QAASJ;KAAc;IAGrCf,UAAgB;QACd,MAAMwB,gBAAgB,CAACC;YACrB,IAAIA,MAAM,GAAG,KAAK3B,6BAA8B2B,CAAAA,MAAM,OAAO,IAAIA,MAAM,OAAM,GAAI;gBAC/EA,MAAM,cAAc;gBACpBF;YACF;QACF;QAEAG,OAAO,gBAAgB,CAAC,WAAWF;QACnC,OAAO,IAAME,OAAO,mBAAmB,CAAC,WAAWF;IACrD,GAAG;QAACD;KAAc;IAIlB,MAAMI,QAAQT,OAAO,aAAa;IAElC,MAAMU,eAAe5B,QACnB,IAAO;YACL2B;YACAT;YACAC;YACAP;YACAE;YACAC;YACAQ;QACF,IACA;QAACI;QAAOT;QAAMC;QAASP;QAAUE;QAAYC;QAAeQ;KAAc;IAG5E,OAAO,WAAP,GACE,IAACxB,eAAe,QAAQ;QAAC,OAAO6B;kBAC9B,kBAACC,iBAAeA;YAAC,eAAe;sBAC9B,kBAAC;gBACC,aAAU;gBACV,OACE;oBACE,mBAAmBlC;oBACnB,wBAAwBE;oBACxB,GAAGY,KAAK;gBACV;gBAEF,WAAWqB,GAAG,mFAAmFtB;gBAChG,GAAGG,KAAK;0BACRD;;;;AAKX;AAEA,SAASqB,QAAQ,EACfC,OAAO,MAAM,EACbC,UAAU,SAAS,EACnBC,cAAc,WAAW,EACzB1B,SAAS,EACTE,QAAQ,EACR,GAAGC,OAKJ;IACC,MAAM,EAACC,QAAQ,EAAEe,KAAK,EAAEb,UAAU,EAAEC,aAAa,EAAC,GAAGd;IAErD,IAAIiC,WAAAA,aACF,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWJ,GAAG,+EAA+EtB;QAC5F,GAAGG,KAAK;kBACRD;;IAKP,IAAIE,UACF,OAAO,WAAP,GACE,IAACuB,OAAKA;QACJ,MAAMrB;QACN,cAAcC;QACb,GAAGJ,KAAK;kBACT,mBAACyB,cAAYA;YACX,gBAAa;YACb,aAAU;YACV,eAAY;YACZ,WAAU;YACV,OACE;gBACE,mBAAmBxC;YACrB;YAEF,MAAMoC;;8BACN,KAACK,aAAWA;oBAAC,WAAU;;sCACrB,IAACC,YAAUA;sCAAC;;sCACZ,IAACC,kBAAgBA;sCAAC;;;;8BAEpB,IAAC;oBAAI,WAAU;8BAA+B7B;;;;;IAMtD,OAAO,WAAP,GACE,KAAC;QACC,WAAU;QACV,cAAYiB;QACZ,oBAAkBA,gBAAAA,QAAwBO,cAAc;QACxD,gBAAcD;QACd,aAAWD;QACX,aAAU;;0BAEV,IAAC;gBACC,aAAU;gBACV,WAAWF,GACT,2FACA,0CACA,sCACAG,eAAAA,WAA0BA,YAAAA,UACtB,qFACA;;0BAGR,IAAC;gBACC,aAAU;gBACV,WAAWH,GACT,wHACAE,WAAAA,OACI,mFACA,oFAEJC,eAAAA,WAA0BA,YAAAA,UACtB,6FACA,2HACJzB;gBAED,GAAGG,KAAK;0BACT,kBAAC;oBACC,gBAAa;oBACb,aAAU;oBACV,WAAU;8BACTD;;;;;AAKX;AAEA,SAAS8B,eAAe,EAAChC,SAAS,EAAEiC,OAAO,EAAE,GAAG9B,OAA2C;IACzF,MAAM,EAACY,aAAa,EAAC,GAAGtB;IAExB,OAAO,WAAP,GACE,KAACyC,QAAMA;QACL,gBAAa;QACb,aAAU;QACV,SAAQ;QACR,MAAK;QACL,WAAWZ,GAAG,UAAUtB;QACxB,SAAS,CAACiB;YACRgB,UAAUhB;YACVF;QACF;QACC,GAAGZ,KAAK;;0BACT,IAACgC,eAAaA,CAAAA;0BACd,IAAC;gBAAK,WAAU;0BAAU;;;;AAGhC;AAEA,SAASC,YAAY,EAACpC,SAAS,EAAE,GAAGG,OAAsC;IACxE,MAAM,EAACY,aAAa,EAAC,GAAGtB;IAExB,OAAO,WAAP,GACE,IAAC;QACC,gBAAa;QACb,aAAU;QACV,cAAW;QACX,UAAU;QACV,SAASsB;QACT,OAAM;QACN,WAAWO,GACT,mPACA,4EACA,0HACA,2JACA,6DACA,6DACAtB;QAED,GAAGG,KAAK;;AAGf;AAEA,SAASkC,aAAa,EAACrC,SAAS,EAAE,GAAGG,OAAoC;IACvE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWmB,GACT,qEACA,mNACAtB;QAED,GAAGG,KAAK;;AAGf;AAEA,SAASmC,aAAa,EAACtC,SAAS,EAAE,GAAGG,OAA0C;IAC7E,OAAO,WAAP,GACE,IAACoC,OAAKA;QACJ,aAAU;QACV,gBAAa;QACb,WAAWjB,GAAG,uDAAuDtB;QACpE,GAAGG,KAAK;;AAGf;AAEA,SAASqC,cAAc,EAACxC,SAAS,EAAE,GAAGG,OAAmC;IACvE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,gBAAa;QACb,WAAWmB,GAAG,2BAA2BtB;QACxC,GAAGG,KAAK;;AAGf;AAEA,SAASsC,cAAc,EAACzC,SAAS,EAAE,GAAGG,OAAmC;IACvE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,gBAAa;QACb,WAAWmB,GAAG,2BAA2BtB;QACxC,GAAGG,KAAK;;AAGf;AAEA,SAASuC,iBAAiB,EAAC1C,SAAS,EAAE,GAAGG,OAA8C;IACrF,OAAO,WAAP,GACE,IAACwC,WAASA;QACR,aAAU;QACV,gBAAa;QACb,WAAWrB,GAAG,iCAAiCtB;QAC9C,GAAGG,KAAK;;AAGf;AAEA,SAASyC,eAAe,EAAC5C,SAAS,EAAE,GAAGG,OAAmC;IACxE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,gBAAa;QACb,WAAWmB,GAAG,kGAAkGtB;QAC/G,GAAGG,KAAK;;AAGf;AAEA,SAAS0C,aAAa,EAAC7C,SAAS,EAAE,GAAGG,OAAmC;IACtE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,gBAAa;QACb,WAAWmB,GAAG,6CAA6CtB;QAC1D,GAAGG,KAAK;;AAGf;AAEA,SAAS2C,kBAAkB,EAAC9C,SAAS,EAAE+C,UAAU,KAAK,EAAE,GAAG5C,OAAyD;IAClH,MAAM6C,OAAOD,UAAUE,OAAO;IAE9B,OAAO,WAAP,GACE,IAACD,MAAAA;QACC,aAAU;QACV,gBAAa;QACb,WAAW1B,GACT,4OACA,+EACAtB;QAED,GAAGG,KAAK;;AAGf;AAEA,SAAS+C,mBAAmB,EAAClD,SAAS,EAAE+C,UAAU,KAAK,EAAE,GAAG5C,OAA4D;IACtH,MAAM6C,OAAOD,UAAUE,OAAO;IAE9B,OAAO,WAAP,GACE,IAACD,MAAAA;QACC,aAAU;QACV,gBAAa;QACb,WAAW1B,GACT,8RAEA,iDACA,wCACAtB;QAED,GAAGG,KAAK;;AAGf;AAEA,SAASgD,oBAAoB,EAACnD,SAAS,EAAE,GAAGG,OAAmC;IAC7E,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,gBAAa;QACb,WAAWmB,GAAG,kBAAkBtB;QAC/B,GAAGG,KAAK;;AAGf;AAEA,SAASiD,YAAY,EAACpD,SAAS,EAAE,GAAGG,OAAkC;IACpE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,gBAAa;QACb,WAAWmB,GAAG,sCAAsCtB;QACnD,GAAGG,KAAK;;AAGf;AAEA,SAASkD,gBAAgB,EAACrD,SAAS,EAAE,GAAGG,OAAkC;IACxE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,gBAAa;QACb,WAAWmB,GAAG,4BAA4BtB;QACzC,GAAGG,KAAK;;AAGf;AAEA,MAAMmD,4BAA4BC,IAChC,qzBACA;IACE,UAAU;QACR,SAAS;YACP,SAAS;YACT,SACE;QACJ;QACA,MAAM;YACJ,SAAS;YACT,IAAI;YACJ,IAAI;QACN;IACF;IACA,iBAAiB;QACf,SAAS;QACT,MAAM;IACR;AACF;AAGF,SAASC,kBAAkB,EACzBT,UAAU,KAAK,EACfU,WAAW,KAAK,EAChBhC,UAAU,SAAS,EACnBiC,OAAO,SAAS,EAChBC,OAAO,EACP3D,SAAS,EACT,GAAGG,OAK6C;IAChD,MAAM6C,OAAOD,UAAUE,OAAO;IAC9B,MAAM,EAAC7C,QAAQ,EAAEe,KAAK,EAAC,GAAG1B;IAE1B,MAAMmE,SAAS,WAATA,GACJ,IAACZ,MAAAA;QACC,aAAU;QACV,gBAAa;QACb,aAAWU;QACX,eAAaD;QACb,WAAWnC,GAAGgC,0BAA0B;YAAC7B;YAASiC;QAAI,IAAI1D;QACzD,GAAGG,KAAK;;IAIb,IAAI,CAACwD,SACH,OAAOC;IAGT,IAAI,mBAAOD,SACTA,UAAU;QACR,UAAUA;IACZ;IAGF,OAAO,WAAP,GACE,KAACE,SAAOA;;0BACN,IAACC,gBAAcA;gBAAC,SAAO;0BAAEF;;0BACzB,IAACG,gBAAcA;gBACb,MAAK;gBACL,OAAM;gBACN,QAAQ5C,gBAAAA,SAAyBf;gBAChC,GAAGuD,OAAO;;;;AAInB;AAEA,SAASK,kBAAkB,EACzBhE,SAAS,EACT+C,UAAU,KAAK,EACfkB,cAAc,KAAK,EACnB,GAAG9D,OAIJ;IACC,MAAM6C,OAAOD,UAAUE,OAAO;IAE9B,OAAO,WAAP,GACE,IAACD,MAAAA;QACC,aAAU;QACV,gBAAa;QACb,WAAW1B,GACT,oVAEA,iDACA,yCACA,gDACA,2CACA,wCACA2C,eACK,4LACLjE;QAED,GAAGG,KAAK;;AAGf;AAEA,SAAS+D,iBAAiB,EAAClE,SAAS,EAAE,GAAGG,OAAmC;IAC1E,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,gBAAa;QACb,WAAWmB,GACT,0KACA,4HACA,yCACA,gDACA,2CACA,wCACAtB;QAED,GAAGG,KAAK;;AAGf;AAEA,SAASgE,oBAAoB,EAC3BnE,SAAS,EACToE,WAAW,KAAK,EAChB,GAAGjE,OAGJ;IAEC,MAAMkE,QAAQ7E,QAAc,IACnB,GAAG8E,KAAK,KAAK,CAACA,KAAAA,KAAK,MAAM,MAAW,GAAG,CAAC,CAAC,EAC/C,EAAE;IAEL,OAAO,WAAP,GACE,KAAC;QACC,aAAU;QACV,gBAAa;QACb,WAAWhD,GAAG,+CAA+CtB;QAC5D,GAAGG,KAAK;;YACRiE,YAAY,WAAZA,GACC,IAACG,UAAQA;gBACP,WAAU;gBACV,gBAAa;;0BAGjB,IAACA,UAAQA;gBACP,WAAU;gBACV,gBAAa;gBACb,OACE;oBACE,oBAAoBF;gBACtB;;;;AAKV;AAEA,SAASG,eAAe,EAACxE,SAAS,EAAE,GAAGG,OAAkC;IACvE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,gBAAa;QACb,WAAWmB,GACT,kGACA,wCACAtB;QAED,GAAGG,KAAK;;AAGf;AAEA,SAASsE,mBAAmB,EAACzE,SAAS,EAAE,GAAGG,OAAkC;IAC3E,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,gBAAa;QACb,WAAWmB,GAAG,gCAAgCtB;QAC7C,GAAGG,KAAK;;AAGf;AAEA,SAASuE,qBAAqB,EAC5B3B,UAAU,KAAK,EACfW,OAAO,IAAI,EACXD,WAAW,KAAK,EAChBzD,SAAS,EACT,GAAGG,OAKJ;IACC,MAAM6C,OAAOD,UAAUE,OAAO;IAE9B,OAAO,WAAP,GACE,IAACD,MAAAA;QACC,aAAU;QACV,gBAAa;QACb,aAAWU;QACX,eAAaD;QACb,WAAWnC,GACT,ifACA,0FACAoC,SAAAA,QAAiB,WACjBA,SAAAA,QAAiB,WACjB,wCACA1D;QAED,GAAGG,KAAK;;AAGf"}
+{"version":3,"file":"components\\ui\\sidebar.js","sources":["webpack://@arolariu/components/./src/components/ui/sidebar.tsx"],"sourcesContent":["\r\n\r\nimport {Slot} from \"@radix-ui/react-slot\";\r\nimport {VariantProps, cva} from \"class-variance-authority\";\r\nimport {PanelLeft} from \"lucide-react\";\r\nimport * as React from \"react\";\r\n\r\nimport {Button} from \"@/components/ui/button\";\r\nimport {Input} from \"@/components/ui/input\";\r\nimport {Separator} from \"@/components/ui/separator\";\r\nimport {Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle} from \"@/components/ui/sheet\";\r\nimport {Skeleton} from \"@/components/ui/skeleton\";\r\nimport {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from \"@/components/ui/tooltip\";\r\nimport {useIsMobile} from \"@/hooks/useIsMobile\";\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\";\r\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\r\nconst SIDEBAR_WIDTH = \"16rem\";\r\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\";\r\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\r\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\r\n\r\ntype SidebarContextProps = {\r\n  state: \"expanded\" | \"collapsed\";\r\n  open: boolean;\r\n  setOpen: (open: boolean) => void;\r\n  openMobile: boolean;\r\n  setOpenMobile: (open: boolean) => void;\r\n  isMobile: boolean;\r\n  toggleSidebar: () => void;\r\n};\r\n\r\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\r\n\r\nfunction useSidebar() {\r\n  const context = React.useContext(SidebarContext);\r\n  if (!context) {\r\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\");\r\n  }\r\n\r\n  return context;\r\n}\r\n\r\nconst SidebarProvider = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\"> & {\r\n    defaultOpen?: boolean;\r\n    open?: boolean;\r\n    onOpenChange?: (open: boolean) => void;\r\n  }\r\n>(({defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props}, ref) => {\r\n  const isMobile = useIsMobile();\r\n  const [openMobile, setOpenMobile] = React.useState(false);\r\n\r\n  // This is the internal state of the sidebar.\r\n  // We use openProp and setOpenProp for control from outside the component.\r\n  const [_open, _setOpen] = React.useState(defaultOpen);\r\n  const open = openProp ?? _open;\r\n  const setOpen = React.useCallback(\r\n    (value: boolean | ((value: boolean) => boolean)) => {\r\n      const openState = typeof value === \"function\" ? value(open) : value;\r\n      if (setOpenProp) {\r\n        setOpenProp(openState);\r\n      } else {\r\n        _setOpen(openState);\r\n      }\r\n\r\n      // This sets the cookie to keep the sidebar state.\r\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\r\n    },\r\n    [setOpenProp, open],\r\n  );\r\n\r\n  // Helper to toggle the sidebar.\r\n  const toggleSidebar = React.useCallback(() => {\r\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\r\n  }, [isMobile, setOpen, setOpenMobile]);\r\n\r\n  // Adds a keyboard shortcut to toggle the sidebar.\r\n  React.useEffect(() => {\r\n    const handleKeyDown = (event: KeyboardEvent) => {\r\n      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\r\n        event.preventDefault();\r\n        toggleSidebar();\r\n      }\r\n    };\r\n\r\n    globalThis.window.addEventListener(\"keydown\", handleKeyDown);\r\n    return () => globalThis.window.removeEventListener(\"keydown\", handleKeyDown);\r\n  }, [toggleSidebar]);\r\n\r\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\r\n  // This makes it easier to style the sidebar with Tailwind classes.\r\n  const state = open ? \"expanded\" : \"collapsed\";\r\n\r\n  const contextValue = React.useMemo<SidebarContextProps>(\r\n    () => ({\r\n      state,\r\n      open,\r\n      setOpen,\r\n      isMobile,\r\n      openMobile,\r\n      setOpenMobile,\r\n      toggleSidebar,\r\n    }),\r\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\r\n  );\r\n\r\n  return (\r\n    <SidebarContext.Provider value={contextValue}>\r\n      <TooltipProvider delayDuration={0}>\r\n        <div\r\n          style={\r\n            {\r\n              \"--sidebar-width\": SIDEBAR_WIDTH,\r\n              \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\r\n              ...style,\r\n            } as React.CSSProperties\r\n          }\r\n          className={cn(\"group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full\", className)}\r\n          ref={ref}\r\n          {...props}>\r\n          {children}\r\n        </div>\r\n      </TooltipProvider>\r\n    </SidebarContext.Provider>\r\n  );\r\n});\r\nSidebarProvider.displayName = \"SidebarProvider\";\r\n\r\nconst Sidebar = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\"> & {\r\n    side?: \"left\" | \"right\";\r\n    variant?: \"sidebar\" | \"floating\" | \"inset\";\r\n    collapsible?: \"offcanvas\" | \"icon\" | \"none\";\r\n  }\r\n>(({side = \"left\", variant = \"sidebar\", collapsible = \"offcanvas\", className, children, ...props}, ref) => {\r\n  const {isMobile, state, openMobile, setOpenMobile} = useSidebar();\r\n\r\n  if (collapsible === \"none\") {\r\n    return (\r\n      <div\r\n        className={cn(\"bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col\", className)}\r\n        ref={ref}\r\n        {...props}>\r\n        {children}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  if (isMobile) {\r\n    return (\r\n      <Sheet\r\n        open={openMobile}\r\n        onOpenChange={setOpenMobile}\r\n        {...props}>\r\n        <SheetContent\r\n          data-sidebar='sidebar'\r\n          data-mobile='true'\r\n          className='bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden'\r\n          style={\r\n            {\r\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\r\n            } as React.CSSProperties\r\n          }\r\n          side={side}>\r\n          <SheetHeader className='sr-only'>\r\n            <SheetTitle>Sidebar</SheetTitle>\r\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\r\n          </SheetHeader>\r\n          <div className='flex h-full w-full flex-col'>{children}</div>\r\n        </SheetContent>\r\n      </Sheet>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      className='group peer text-sidebar-foreground hidden md:block'\r\n      data-state={state}\r\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\r\n      data-variant={variant}\r\n      data-side={side}>\r\n      {/* This is what handles the sidebar gap on desktop */}\r\n      <div\r\n        className={cn(\r\n          \"relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear\",\r\n          \"group-data-[collapsible=offcanvas]:w-0\",\r\n          \"group-data-[side=right]:rotate-180\",\r\n          variant === \"floating\" || variant === \"inset\"\r\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]\"\r\n            : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon]\",\r\n        )}\r\n      />\r\n      <div\r\n        className={cn(\r\n          \"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex\",\r\n          side === \"left\"\r\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\r\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\r\n          // Adjust the padding for floating and inset variants.\r\n          variant === \"floating\" || variant === \"inset\"\r\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]\"\r\n            : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l\",\r\n          className,\r\n        )}\r\n        {...props}>\r\n        <div\r\n          data-sidebar='sidebar'\r\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'>\r\n          {children}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n});\r\nSidebar.displayName = \"Sidebar\";\r\n\r\nconst SidebarTrigger = React.forwardRef<React.ComponentRef<typeof Button>, React.ComponentProps<typeof Button>>(\r\n  ({className, onClick, ...props}, ref) => {\r\n    const {toggleSidebar} = useSidebar();\r\n\r\n    return (\r\n      <Button\r\n        ref={ref}\r\n        data-sidebar='trigger'\r\n        variant='ghost'\r\n        size='icon'\r\n        className={cn(\"h-7 w-7\", className)}\r\n        onClick={(event) => {\r\n          onClick?.(event);\r\n          toggleSidebar();\r\n        }}\r\n        {...props}>\r\n        <PanelLeft />\r\n        <span className='sr-only'>Toggle Sidebar</span>\r\n      </Button>\r\n    );\r\n  },\r\n);\r\nSidebarTrigger.displayName = \"SidebarTrigger\";\r\n\r\nconst SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<\"button\">>(({className, ...props}, ref) => {\r\n  const {toggleSidebar} = useSidebar();\r\n\r\n  return (\r\n    <button\r\n      ref={ref}\r\n      data-sidebar='rail'\r\n      aria-label='Toggle Sidebar'\r\n      tabIndex={-1}\r\n      type='button'\r\n      onClick={toggleSidebar}\r\n      title='Toggle Sidebar'\r\n      className={cn(\r\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\",\r\n        \"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize\",\r\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\r\n        \"group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\r\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\r\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nSidebarRail.displayName = \"SidebarRail\";\r\n\r\nconst SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<\"main\">>(({className, ...props}, ref) => {\r\n  return (\r\n    <main\r\n      ref={ref}\r\n      className={cn(\r\n        \"relative flex w-full flex-1 flex-col bg-white dark:bg-neutral-950\",\r\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 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nSidebarInset.displayName = \"SidebarInset\";\r\n\r\nconst SidebarInput = React.forwardRef<React.ComponentRef<typeof Input>, React.ComponentProps<typeof Input>>(\r\n  ({className, ...props}, ref) => {\r\n    return (\r\n      <Input\r\n        ref={ref}\r\n        data-sidebar='input'\r\n        className={cn(\r\n          \"focus-visible:ring-sidebar-ring h-8 w-full bg-white shadow-none focus-visible:ring-2 dark:bg-neutral-950\",\r\n          className,\r\n        )}\r\n        {...props}\r\n      />\r\n    );\r\n  },\r\n);\r\nSidebarInput.displayName = \"SidebarInput\";\r\n\r\nconst SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(({className, ...props}, ref) => {\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      data-sidebar='header'\r\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nSidebarHeader.displayName = \"SidebarHeader\";\r\n\r\nconst SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(({className, ...props}, ref) => {\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      data-sidebar='footer'\r\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nSidebarFooter.displayName = \"SidebarFooter\";\r\n\r\nconst SidebarSeparator = React.forwardRef<React.ComponentRef<typeof Separator>, React.ComponentProps<typeof Separator>>(\r\n  ({className, ...props}, ref) => {\r\n    return (\r\n      <Separator\r\n        ref={ref}\r\n        data-sidebar='separator'\r\n        className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\r\n        {...props}\r\n      />\r\n    );\r\n  },\r\n);\r\nSidebarSeparator.displayName = \"SidebarSeparator\";\r\n\r\nconst SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(({className, ...props}, ref) => {\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      data-sidebar='content'\r\n      className={cn(\"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nSidebarContent.displayName = \"SidebarContent\";\r\n\r\nconst SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(({className, ...props}, ref) => {\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      data-sidebar='group'\r\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nSidebarGroup.displayName = \"SidebarGroup\";\r\n\r\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\"> & {asChild?: boolean}>(\r\n  ({className, asChild = false, ...props}, ref) => {\r\n    const Comp = asChild ? Slot : \"div\";\r\n\r\n    return (\r\n      <Comp\r\n        ref={ref}\r\n        data-sidebar='group-label'\r\n        className={cn(\r\n          \"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\r\n          \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\r\n          className,\r\n        )}\r\n        {...props}\r\n      />\r\n    );\r\n  },\r\n);\r\nSidebarGroupLabel.displayName = \"SidebarGroupLabel\";\r\n\r\nconst SidebarGroupAction = React.forwardRef<HTMLButtonElement, React.ComponentProps<\"button\"> & {asChild?: boolean}>(\r\n  ({className, asChild = false, ...props}, ref) => {\r\n    const Comp = asChild ? Slot : \"button\";\r\n\r\n    return (\r\n      <Comp\r\n        ref={ref}\r\n        data-sidebar='group-action'\r\n        className={cn(\r\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 transition-transform outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\r\n          // Increases the hit area of the button on mobile.\r\n          \"after:absolute after:-inset-2 after:md:hidden\",\r\n          \"group-data-[collapsible=icon]:hidden\",\r\n          className,\r\n        )}\r\n        {...props}\r\n      />\r\n    );\r\n  },\r\n);\r\nSidebarGroupAction.displayName = \"SidebarGroupAction\";\r\n\r\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(({className, ...props}, ref) => (\r\n  <div\r\n    ref={ref}\r\n    data-sidebar='group-content'\r\n    className={cn(\"w-full text-sm\", className)}\r\n    {...props}\r\n  />\r\n));\r\nSidebarGroupContent.displayName = \"SidebarGroupContent\";\r\n\r\nconst SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<\"ul\">>(({className, ...props}, ref) => (\r\n  <ul\r\n    ref={ref}\r\n    data-sidebar='menu'\r\n    className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\r\n    {...props}\r\n  />\r\n));\r\nSidebarMenu.displayName = \"SidebarMenu\";\r\n\r\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<\"li\">>(({className, ...props}, ref) => (\r\n  <li\r\n    ref={ref}\r\n    data-sidebar='menu-item'\r\n    className={cn(\"group/menu-item relative\", className)}\r\n    {...props}\r\n  />\r\n));\r\nSidebarMenuItem.displayName = \"SidebarMenuItem\";\r\n\r\nconst sidebarMenuButtonVariants = cva(\r\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none 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\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\r\n        outline:\r\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\",\r\n      },\r\n      size: {\r\n        default: \"h-8 text-sm\",\r\n        sm: \"h-7 text-xs\",\r\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:!p-0\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\",\r\n    },\r\n  },\r\n);\r\n\r\nconst SidebarMenuButton = React.forwardRef<\r\n  HTMLButtonElement,\r\n  React.ComponentProps<\"button\"> & {\r\n    asChild?: boolean;\r\n    isActive?: boolean;\r\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>;\r\n  } & VariantProps<typeof sidebarMenuButtonVariants>\r\n>(({asChild = false, isActive = false, variant = \"default\", size = \"default\", tooltip, className, ...props}, ref) => {\r\n  const Comp = asChild ? Slot : \"button\";\r\n  const {isMobile, state} = useSidebar();\r\n\r\n  const button = (\r\n    <Comp\r\n      ref={ref}\r\n      data-sidebar='menu-button'\r\n      data-size={size}\r\n      data-active={isActive}\r\n      className={cn(sidebarMenuButtonVariants({variant, size}), className)}\r\n      {...props}\r\n    />\r\n  );\r\n\r\n  if (!tooltip) {\r\n    return button;\r\n  }\r\n\r\n  if (typeof tooltip === \"string\") {\r\n    tooltip = {\r\n      children: tooltip,\r\n    };\r\n  }\r\n\r\n  return (\r\n    <Tooltip>\r\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\r\n      <TooltipContent\r\n        side='right'\r\n        align='center'\r\n        hidden={state !== \"collapsed\" || isMobile}\r\n        {...tooltip}\r\n      />\r\n    </Tooltip>\r\n  );\r\n});\r\nSidebarMenuButton.displayName = \"SidebarMenuButton\";\r\n\r\nconst SidebarMenuAction = React.forwardRef<\r\n  HTMLButtonElement,\r\n  React.ComponentProps<\"button\"> & {\r\n    asChild?: boolean;\r\n    showOnHover?: boolean;\r\n  }\r\n>(({className, asChild = false, showOnHover = false, ...props}, ref) => {\r\n  const Comp = asChild ? Slot : \"button\";\r\n\r\n  return (\r\n    <Comp\r\n      ref={ref}\r\n      data-sidebar='menu-action'\r\n      className={cn(\r\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 transition-transform outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\r\n        // Increases the hit area of the button on mobile.\r\n        \"after:absolute after:-inset-2 after:md:hidden\",\r\n        \"peer-data-[size=sm]/menu-button:top-1\",\r\n        \"peer-data-[size=default]/menu-button:top-1.5\",\r\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\r\n        \"group-data-[collapsible=icon]:hidden\",\r\n        showOnHover\r\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\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nSidebarMenuAction.displayName = \"SidebarMenuAction\";\r\n\r\nconst SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(({className, ...props}, ref) => (\r\n  <div\r\n    ref={ref}\r\n    data-sidebar='menu-badge'\r\n    className={cn(\r\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\",\r\n      \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\r\n      \"peer-data-[size=sm]/menu-button:top-1\",\r\n      \"peer-data-[size=default]/menu-button:top-1.5\",\r\n      \"peer-data-[size=lg]/menu-button:top-2.5\",\r\n      \"group-data-[collapsible=icon]:hidden\",\r\n      className,\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nSidebarMenuBadge.displayName = \"SidebarMenuBadge\";\r\n\r\nconst SidebarMenuSkeleton = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\"> & {\r\n    showIcon?: boolean;\r\n  }\r\n>(({className, showIcon = false, ...props}, ref) => {\r\n  // Random width between 50 to 90%.\r\n  const width = React.useMemo(() => {\r\n    return `${Math.floor(Math.random() * 40) + 50}%`;\r\n  }, []);\r\n\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      data-sidebar='menu-skeleton'\r\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\r\n      {...props}>\r\n      {showIcon && (\r\n        <Skeleton\r\n          className='size-4 rounded-md'\r\n          data-sidebar='menu-skeleton-icon'\r\n        />\r\n      )}\r\n      <Skeleton\r\n        className='h-4 max-w-[--skeleton-width] flex-1'\r\n        data-sidebar='menu-skeleton-text'\r\n        style={\r\n          {\r\n            \"--skeleton-width\": width,\r\n          } as React.CSSProperties\r\n        }\r\n      />\r\n    </div>\r\n  );\r\n});\r\nSidebarMenuSkeleton.displayName = \"SidebarMenuSkeleton\";\r\n\r\nconst SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<\"ul\">>(({className, ...props}, ref) => (\r\n  <ul\r\n    ref={ref}\r\n    data-sidebar='menu-sub'\r\n    className={cn(\r\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\",\r\n      \"group-data-[collapsible=icon]:hidden\",\r\n      className,\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nSidebarMenuSub.displayName = \"SidebarMenuSub\";\r\n\r\nconst SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<\"li\">>(({...props}, ref) => (\r\n  <li\r\n    ref={ref}\r\n    {...props}\r\n  />\r\n));\r\nSidebarMenuSubItem.displayName = \"SidebarMenuSubItem\";\r\n\r\nconst SidebarMenuSubButton = React.forwardRef<\r\n  HTMLAnchorElement,\r\n  React.ComponentProps<\"a\"> & {\r\n    asChild?: boolean;\r\n    size?: \"sm\" | \"md\";\r\n    isActive?: boolean;\r\n  }\r\n>(({asChild = false, size = \"md\", isActive, className, ...props}, ref) => {\r\n  const Comp = asChild ? Slot : \"a\";\r\n\r\n  return (\r\n    <Comp\r\n      ref={ref}\r\n      data-sidebar='menu-sub-button'\r\n      data-size={size}\r\n      data-active={isActive}\r\n      className={cn(\r\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-none 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\",\r\n        \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\r\n        size === \"sm\" && \"text-xs\",\r\n        size === \"md\" && \"text-sm\",\r\n        \"group-data-[collapsible=icon]:hidden\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nSidebarMenuSubButton.displayName = \"SidebarMenuSubButton\";\r\n\r\nexport {\r\n  Sidebar,\r\n  SidebarContent,\r\n  SidebarFooter,\r\n  SidebarGroup,\r\n  SidebarGroupAction,\r\n  SidebarGroupContent,\r\n  SidebarGroupLabel,\r\n  SidebarHeader,\r\n  SidebarInput,\r\n  SidebarInset,\r\n  SidebarMenu,\r\n  SidebarMenuAction,\r\n  SidebarMenuBadge,\r\n  SidebarMenuButton,\r\n  SidebarMenuItem,\r\n  SidebarMenuSkeleton,\r\n  SidebarMenuSub,\r\n  SidebarMenuSubButton,\r\n  SidebarMenuSubItem,\r\n  SidebarProvider,\r\n  SidebarRail,\r\n  SidebarSeparator,\r\n  SidebarTrigger,\r\n  useSidebar,\r\n};\r\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","ref","isMobile","useIsMobile","openMobile","setOpenMobile","_open","_setOpen","open","setOpen","value","openState","document","toggleSidebar","handleKeyDown","event","globalThis","state","contextValue","TooltipProvider","cn","Sidebar","side","variant","collapsible","Sheet","SheetContent","SheetHeader","SheetTitle","SheetDescription","SidebarTrigger","onClick","Button","PanelLeft","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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"}

package/dist/components/ui/skeleton.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
-declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function Skeleton({ className, ...props }: Readonly<React.HTMLAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
 export { Skeleton };
 //# sourceMappingURL=skeleton.d.ts.map

package/dist/components/ui/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/ui/skeleton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,iBAAS,QAAQ,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQnE;AAED,OAAO,EAAC,QAAQ,EAAC,CAAC"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/ui/skeleton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,iBAAS,QAAQ,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,2CAOtF;AAED,OAAO,EAAC,QAAQ,EAAC,CAAC"}

package/dist/components/ui/skeleton.js

@@ -4,8 +4,7 @@ import { cn } from "../../lib/utilities.js";
 import "react";
 function Skeleton({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        "data-slot": "skeleton",
-        className: cn("animate-pulse rounded-md bg-neutral-100 dark:bg-neutral-800", className),
+        className: cn("animate-pulse rounded-md bg-neutral-900/10 dark:bg-neutral-50/10", className),
         ...props
     });
 }

package/dist/components/ui/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"components\\ui\\skeleton.js","sources":["webpack://@arolariu/components/./src/components/ui/skeleton.tsx"],"sourcesContent":["\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport * as React from \"react\";\r\n\r\nfunction Skeleton({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='skeleton'\r\n      className={cn(\"animate-pulse rounded-md bg-neutral-100 dark:bg-neutral-800\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {Skeleton};\r\n"],"names":["Skeleton","className","props","cn"],"mappings":";;;;AAKA,SAASA,SAAS,EAACC,SAAS,EAAE,GAAGC,OAAmC;IAClE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GAAG,+DAA+DF;QAC5E,GAAGC,KAAK;;AAGf"}
+{"version":3,"file":"components\\ui\\skeleton.js","sources":["webpack://@arolariu/components/./src/components/ui/skeleton.tsx"],"sourcesContent":["\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport * as React from \"react\";\r\n\r\nfunction Skeleton({className, ...props}: Readonly<React.HTMLAttributes<HTMLDivElement>>) {\r\n  return (\r\n    <div\r\n      className={cn(\"animate-pulse rounded-md bg-neutral-900/10 dark:bg-neutral-50/10\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {Skeleton};\r\n"],"names":["Skeleton","className","props","cn"],"mappings":";;;;AAKA,SAASA,SAAS,EAACC,SAAS,EAAE,GAAGC,OAAsD;IACrF,OAAO,WAAP,GACE,IAAC;QACC,WAAWC,GAAG,oEAAoEF;QACjF,GAAGC,KAAK;;AAGf"}

package/dist/components/ui/slider.d.ts

@@ -1,5 +1,5 @@
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import * as React from "react";
-declare function Slider({ className, defaultValue, value, min, max, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export { Slider };
 //# sourceMappingURL=slider.d.ts.map

package/dist/components/ui/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/ui/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,MAAM,CAAC,EAAC,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,GAAO,EAAE,GAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAuChI;AAED,OAAO,EAAC,MAAM,EAAC,CAAC"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/ui/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,MAAM,yJAaV,CAAC;AAGH,OAAO,EAAC,MAAM,EAAC,CAAC"}

package/dist/components/ui/slider.js

@@ -1,44 +1,25 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Range, Root, Thumb, Track } from "@radix-ui/react-slider";
-import { useMemo } from "react";
+import { forwardRef } from "react";
 import { cn } from "../../lib/utilities.js";
-function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
-    const _values = useMemo(()=>Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [
-            min,
-            max
-        ], [
-        value,
-        defaultValue,
-        min,
-        max
-    ]);
-    return /*#__PURE__*/ jsxs(Root, {
-        "data-slot": "slider",
-        defaultValue: defaultValue,
-        value: value,
-        min: min,
-        max: max,
-        className: cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
+const Slider = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsxs(Root, {
+        ref: ref,
+        className: cn("relative flex w-full touch-none items-center select-none", className),
         ...props,
         children: [
             /*#__PURE__*/ jsx(Track, {
-                "data-slot": "slider-track",
-                className: cn("relative grow overflow-hidden rounded-full bg-neutral-100 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5 dark:bg-neutral-800"),
+                className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-neutral-900/20 dark:bg-neutral-50/20",
                 children: /*#__PURE__*/ jsx(Range, {
-                    "data-slot": "slider-range",
-                    className: cn("absolute bg-neutral-900 data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full dark:bg-neutral-50")
+                    className: "absolute h-full bg-neutral-900 dark:bg-neutral-50"
                 })
             }),
-            Array.from({
-                length: _values.length
-            }, (_, index)=>/*#__PURE__*/ jsx(Thumb, {
-                    "data-slot": "slider-thumb",
-                    className: "block size-4 shrink-0 rounded-full border border-neutral-200 border-neutral-900 bg-white shadow-sm ring-neutral-950/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-50 dark:border-neutral-800 dark:bg-neutral-950 dark:ring-neutral-300/50"
-                }, index))
+            /*#__PURE__*/ jsx(Thumb, {
+                className: "block h-4 w-4 rounded-full border border-neutral-200 border-neutral-900/50 bg-white shadow transition-colors focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-50/50 dark:border-neutral-800 dark:bg-neutral-950 dark:focus-visible:ring-neutral-300"
+            })
         ]
-    });
-}
+    }));
+Slider.displayName = Root.displayName;
 export { Slider };
 
 //# sourceMappingURL=slider.js.map

package/dist/components/ui/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"components\\ui\\slider.js","sources":["webpack://@arolariu/components/./src/components/ui/slider.tsx"],"sourcesContent":["\r\n\r\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nfunction Slider({className, defaultValue, value, min = 0, max = 100, ...props}: React.ComponentProps<typeof SliderPrimitive.Root>) {\r\n  const _values = React.useMemo(\r\n    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),\r\n    [value, defaultValue, min, max],\r\n  );\r\n\r\n  return (\r\n    <SliderPrimitive.Root\r\n      data-slot='slider'\r\n      defaultValue={defaultValue}\r\n      value={value}\r\n      min={min}\r\n      max={max}\r\n      className={cn(\r\n        \"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\",\r\n        className,\r\n      )}\r\n      {...props}>\r\n      <SliderPrimitive.Track\r\n        data-slot='slider-track'\r\n        className={cn(\r\n          \"relative grow overflow-hidden rounded-full bg-neutral-100 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5 dark:bg-neutral-800\",\r\n        )}>\r\n        <SliderPrimitive.Range\r\n          data-slot='slider-range'\r\n          className={cn(\r\n            \"absolute bg-neutral-900 data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full dark:bg-neutral-50\",\r\n          )}\r\n        />\r\n      </SliderPrimitive.Track>\r\n      {Array.from({length: _values.length}, (_, index) => (\r\n        <SliderPrimitive.Thumb\r\n          data-slot='slider-thumb'\r\n          key={index}\r\n          className='block size-4 shrink-0 rounded-full border border-neutral-200 border-neutral-900 bg-white shadow-sm ring-neutral-950/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-50 dark:border-neutral-800 dark:bg-neutral-950 dark:ring-neutral-300/50'\r\n        />\r\n      ))}\r\n    </SliderPrimitive.Root>\r\n  );\r\n}\r\n\r\nexport {Slider};\r\n"],"names":["Slider","className","defaultValue","value","min","max","props","_values","React","Array","SliderPrimitive","cn","_","index"],"mappings":";;;;;AAOA,SAASA,OAAO,EAACC,SAAS,EAAEC,YAAY,EAAEC,KAAK,EAAEC,MAAM,CAAC,EAAEC,MAAM,GAAG,EAAE,GAAGC,OAAyD;IAC/H,MAAMC,UAAUC,QACd,IAAOC,MAAM,OAAO,CAACN,SAASA,QAAQM,MAAM,OAAO,CAACP,gBAAgBA,eAAe;YAACE;YAAKC;SAAI,EAC7F;QAACF;QAAOD;QAAcE;QAAKC;KAAI;IAGjC,OAAO,WAAP,GACE,KAACK,MAAoB;QACnB,aAAU;QACV,cAAcR;QACd,OAAOC;QACP,KAAKC;QACL,KAAKC;QACL,WAAWM,GACT,uOACAV;QAED,GAAGK,KAAK;;0BACT,IAACI,OAAqB;gBACpB,aAAU;gBACV,WAAWC,GACT;0BAEF,kBAACD,OAAqB;oBACpB,aAAU;oBACV,WAAWC,GACT;;;YAILF,MAAM,IAAI,CAAC;gBAAC,QAAQF,QAAQ,MAAM;YAAA,GAAG,CAACK,GAAGC,QAAAA,WAAAA,GACxC,IAACH,OAAqB;oBACpB,aAAU;oBAEV,WAAU;mBADLG;;;AAMf"}
+{"version":3,"file":"components\\ui\\slider.js","sources":["webpack://@arolariu/components/./src/components/ui/slider.tsx"],"sourcesContent":["\r\n\r\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nconst Slider = React.forwardRef<\r\n  React.ComponentRef<typeof SliderPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\r\n>(({className, ...props}, ref) => (\r\n  <SliderPrimitive.Root\r\n    ref={ref}\r\n    className={cn(\"relative flex w-full touch-none items-center select-none\", className)}\r\n    {...props}>\r\n    <SliderPrimitive.Track className='relative h-1.5 w-full grow overflow-hidden rounded-full bg-neutral-900/20 dark:bg-neutral-50/20'>\r\n      <SliderPrimitive.Range className='absolute h-full bg-neutral-900 dark:bg-neutral-50' />\r\n    </SliderPrimitive.Track>\r\n    <SliderPrimitive.Thumb className='block h-4 w-4 rounded-full border border-neutral-200 border-neutral-900/50 bg-white shadow transition-colors focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-50/50 dark:border-neutral-800 dark:bg-neutral-950 dark:focus-visible:ring-neutral-300' />\r\n  </SliderPrimitive.Root>\r\n));\r\nSlider.displayName = SliderPrimitive.Root.displayName;\r\n\r\nexport {Slider};\r\n"],"names":["Slider","React","className","props","ref","SliderPrimitive","cn"],"mappings":";;;;;AAOA,MAAMA,SAAS,WAATA,GAASC,WAGb,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAM,EAAEC,MAAAA,WAAAA,GACxB,KAACC,MAAoB;QACnB,KAAKD;QACL,WAAWE,GAAG,4DAA4DJ;QACzE,GAAGC,KAAK;;0BACT,IAACE,OAAqB;gBAAC,WAAU;0BAC/B,kBAACA,OAAqB;oBAAC,WAAU;;;0BAEnC,IAACA,OAAqB;gBAAC,WAAU;;;;AAGrCL,OAAO,WAAW,GAAGK,KAAAA,WAAgC"}

package/dist/components/ui/sonner.d.ts

@@ -1,4 +1,6 @@
-import { ToasterProps, toast } from "sonner";
+import * as React from "react";
+import { Toaster as Sonner, toast } from "sonner";
+type ToasterProps = React.ComponentProps<typeof Sonner>;
 declare const Toaster: ({ ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
-export { Toaster, toast, };
+export { toast, Toaster, };
 //# sourceMappingURL=sonner.d.ts.map

package/dist/components/ui/sonner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sonner.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAoB,YAAY,EAAE,KAAK,EAAC,MAAM,QAAQ,CAAC;AAE9D,QAAA,MAAM,OAAO,GAAI,cAAY,YAAY,4CAiBxC,CAAC;AAEF,OAAO,EACL,OAAO,EAEP,KAAK,GACN,CAAC"}
+{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sonner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,OAAO,IAAI,MAAM,EAAE,KAAK,EAAC,MAAM,QAAQ,CAAC;AAEhD,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAExD,QAAA,MAAM,OAAO,GAAI,cAAY,YAAY,4CAqBxC,CAAC;AAEF,OAAO,EAEL,KAAK,EACL,OAAO,GACR,CAAC"}

package/dist/components/ui/sonner.js

@@ -8,10 +8,13 @@ const sonner_Toaster = ({ ...props })=>{
     return /*#__PURE__*/ jsx(Toaster, {
         theme: theme,
         className: "toaster group",
-        style: {
-            "--normal-bg": "var(--popover)",
-            "--normal-text": "var(--popover-foreground)",
-            "--normal-border": "var(--border)"
+        toastOptions: {
+            classNames: {
+                toast: "group toast group-[.toaster]:bg-white group-[.toaster]:text-neutral-950 group-[.toaster]:border-neutral-200 group-[.toaster]:shadow-lg dark:group-[.toaster]:bg-neutral-950 dark:group-[.toaster]:text-neutral-50 dark:group-[.toaster]:border-neutral-800",
+                description: "group-[.toast]:text-neutral-500 dark:group-[.toast]:text-neutral-400",
+                actionButton: "group-[.toast]:bg-neutral-900 group-[.toast]:text-neutral-50 dark:group-[.toast]:bg-neutral-50 dark:group-[.toast]:text-neutral-900",
+                cancelButton: "group-[.toast]:bg-neutral-100 group-[.toast]:text-neutral-500 dark:group-[.toast]:bg-neutral-800 dark:group-[.toast]:text-neutral-400"
+            }
         },
         ...props
     });

package/dist/components/ui/sonner.js.map

@@ -1 +1 @@
-{"version":3,"file":"components\\ui\\sonner.js","sources":["webpack://@arolariu/components/./src/components/ui/sonner.tsx"],"sourcesContent":["\r\n\r\nimport {useTheme} from \"next-themes\";\r\nimport * as React from \"react\";\r\nimport {Toaster as Sonner, ToasterProps, toast} from \"sonner\";\r\n\r\nconst Toaster = ({...props}: ToasterProps) => {\r\n  const {theme = \"system\"} = useTheme();\r\n\r\n  return (\r\n    <Sonner\r\n      theme={theme as ToasterProps[\"theme\"]}\r\n      className='toaster group'\r\n      style={\r\n        {\r\n          \"--normal-bg\": \"var(--popover)\",\r\n          \"--normal-text\": \"var(--popover-foreground)\",\r\n          \"--normal-border\": \"var(--border)\",\r\n        } as React.CSSProperties\r\n      }\r\n      {...props}\r\n    />\r\n  );\r\n};\r\n\r\nexport {\r\n  Toaster,\r\n  // eslint-disable-next-line unicorn/prefer-export-from -- same export style.\r\n  toast,\r\n};\r\n"],"names":["Toaster","props","theme","useTheme","Sonner"],"mappings":";;;;;AAMA,MAAMA,iBAAU,CAAC,EAAC,GAAGC,OAAoB;IACvC,MAAM,EAACC,QAAQ,QAAQ,EAAC,GAAGC;IAE3B,OAAO,WAAP,GACE,IAACC,SAAMA;QACL,OAAOF;QACP,WAAU;QACV,OACE;YACE,eAAe;YACf,iBAAiB;YACjB,mBAAmB;QACrB;QAED,GAAGD,KAAK;;AAGf"}
+{"version":3,"file":"components\\ui\\sonner.js","sources":["webpack://@arolariu/components/./src/components/ui/sonner.tsx"],"sourcesContent":["\r\n\r\nimport {useTheme} from \"next-themes\";\r\nimport * as React from \"react\";\r\nimport {Toaster as Sonner, toast} from \"sonner\";\r\n\r\ntype ToasterProps = React.ComponentProps<typeof Sonner>;\r\n\r\nconst Toaster = ({...props}: ToasterProps) => {\r\n  const {theme = \"system\"} = useTheme();\r\n\r\n  return (\r\n    <Sonner\r\n      theme={theme as ToasterProps[\"theme\"]}\r\n      className='toaster group'\r\n      toastOptions={{\r\n        classNames: {\r\n          toast:\r\n            \"group toast group-[.toaster]:bg-white group-[.toaster]:text-neutral-950 group-[.toaster]:border-neutral-200 group-[.toaster]:shadow-lg dark:group-[.toaster]:bg-neutral-950 dark:group-[.toaster]:text-neutral-50 dark:group-[.toaster]:border-neutral-800\",\r\n          description: \"group-[.toast]:text-neutral-500 dark:group-[.toast]:text-neutral-400\",\r\n          actionButton:\r\n            \"group-[.toast]:bg-neutral-900 group-[.toast]:text-neutral-50 dark:group-[.toast]:bg-neutral-50 dark:group-[.toast]:text-neutral-900\",\r\n          cancelButton:\r\n            \"group-[.toast]:bg-neutral-100 group-[.toast]:text-neutral-500 dark:group-[.toast]:bg-neutral-800 dark:group-[.toast]:text-neutral-400\",\r\n        },\r\n      }}\r\n      {...props}\r\n    />\r\n  );\r\n};\r\n\r\nexport {\r\n  // eslint-disable-next-line unicorn/prefer-export-from -- same export style.\r\n  toast,\r\n  Toaster,\r\n};\r\n"],"names":["Toaster","props","theme","useTheme","Sonner"],"mappings":";;;;;AAQA,MAAMA,iBAAU,CAAC,EAAC,GAAGC,OAAoB;IACvC,MAAM,EAACC,QAAQ,QAAQ,EAAC,GAAGC;IAE3B,OAAO,WAAP,GACE,IAACC,SAAMA;QACL,OAAOF;QACP,WAAU;QACV,cAAc;YACZ,YAAY;gBACV,OACE;gBACF,aAAa;gBACb,cACE;gBACF,cACE;YACJ;QACF;QACC,GAAGD,KAAK;;AAGf"}

package/dist/components/ui/spinner.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+declare function Spinner({ className, ...props }: React.ComponentProps<"svg">): import("react/jsx-runtime").JSX.Element;
+export { Spinner };
+//# sourceMappingURL=spinner.d.ts.map

package/dist/components/ui/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/ui/spinner.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,iBAAS,OAAO,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CASlE;AAED,OAAO,EAAC,OAAO,EAAC,CAAC"}

package/dist/components/ui/spinner.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utilities.js";
+import { Loader2Icon } from "lucide-react";
+import "react";
+function Spinner({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Loader2Icon, {
+        role: "status",
+        "aria-label": "Loading",
+        className: cn("size-4 animate-spin", className),
+        ...props
+    });
+}
+export { Spinner };
+
+//# sourceMappingURL=spinner.js.map

package/dist/components/ui/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components\\ui\\spinner.js","sources":["webpack://@arolariu/components/./src/components/ui/spinner.tsx"],"sourcesContent":["\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport {Loader2Icon} from \"lucide-react\";\r\nimport * as React from \"react\";\r\n\r\nfunction Spinner({className, ...props}: React.ComponentProps<\"svg\">) {\r\n  return (\r\n    <Loader2Icon\r\n      role='status'\r\n      aria-label='Loading'\r\n      className={cn(\"size-4 animate-spin\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {Spinner};\r\n"],"names":["Spinner","className","props","Loader2Icon","cn"],"mappings":";;;;;AAMA,SAASA,QAAQ,EAACC,SAAS,EAAE,GAAGC,OAAmC;IACjE,OAAO,WAAP,GACE,IAACC,aAAWA;QACV,MAAK;QACL,cAAW;QACX,WAAWC,GAAG,uBAAuBH;QACpC,GAAGC,KAAK;;AAGf"}

package/dist/components/ui/switch.d.ts

@@ -1,5 +1,5 @@
-import * as SwitchPrimitive from "@radix-ui/react-switch";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
 import * as React from "react";
-declare function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Switch };
 //# sourceMappingURL=switch.d.ts.map

package/dist/components/ui/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/ui/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,MAAM,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAiBvF;AAED,OAAO,EAAC,MAAM,EAAC,CAAC"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/ui/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,MAAM,8JAiBV,CAAC;AAGH,OAAO,EAAC,MAAM,EAAC,CAAC"}

package/dist/components/ui/switch.js

@@ -1,19 +1,17 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { Root, Thumb } from "@radix-ui/react-switch";
-import "react";
+import { forwardRef } from "react";
 import { cn } from "../../lib/utilities.js";
-function Switch({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Root, {
-        "data-slot": "switch",
-        className: cn("peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-neutral-200 border-transparent shadow-xs transition-all outline-none focus-visible:border-neutral-950 focus-visible:ring-[3px] focus-visible:ring-neutral-950/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200 dark:border-neutral-800 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:data-[state=checked]:bg-neutral-50 dark:dark:data-[state=unchecked]:bg-neutral-800/80 dark:data-[state=unchecked]:bg-neutral-200/80 dark:data-[state=unchecked]:bg-neutral-800", className),
+const Switch = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Root, {
+        className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200 dark:focus-visible:ring-neutral-300 dark:focus-visible:ring-offset-neutral-950 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=unchecked]:bg-neutral-800", className),
         ...props,
+        ref: ref,
         children: /*#__PURE__*/ jsx(Thumb, {
-            "data-slot": "switch-thumb",
-            className: cn("pointer-events-none block size-4 rounded-full bg-white ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:bg-neutral-950 dark:dark:data-[state=checked]:bg-neutral-900 dark:data-[state=checked]:bg-neutral-50 dark:dark:data-[state=unchecked]:bg-neutral-50 dark:data-[state=unchecked]:bg-neutral-950")
+            className: cn("pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:bg-neutral-950")
         })
-    });
-}
+    }));
+Switch.displayName = Root.displayName;
 export { Switch };
 
 //# sourceMappingURL=switch.js.map

package/dist/components/ui/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"components\\ui\\switch.js","sources":["webpack://@arolariu/components/./src/components/ui/switch.tsx"],"sourcesContent":["\r\n\r\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nfunction Switch({className, ...props}: React.ComponentProps<typeof SwitchPrimitive.Root>) {\r\n  return (\r\n    <SwitchPrimitive.Root\r\n      data-slot='switch'\r\n      className={cn(\r\n        \"peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-neutral-200 border-transparent shadow-xs transition-all outline-none focus-visible:border-neutral-950 focus-visible:ring-[3px] focus-visible:ring-neutral-950/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200 dark:border-neutral-800 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:data-[state=checked]:bg-neutral-50 dark:dark:data-[state=unchecked]:bg-neutral-800/80 dark:data-[state=unchecked]:bg-neutral-200/80 dark:data-[state=unchecked]:bg-neutral-800\",\r\n        className,\r\n      )}\r\n      {...props}>\r\n      <SwitchPrimitive.Thumb\r\n        data-slot='switch-thumb'\r\n        className={cn(\r\n          \"pointer-events-none block size-4 rounded-full bg-white ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:bg-neutral-950 dark:dark:data-[state=checked]:bg-neutral-900 dark:data-[state=checked]:bg-neutral-50 dark:dark:data-[state=unchecked]:bg-neutral-50 dark:data-[state=unchecked]:bg-neutral-950\",\r\n        )}\r\n      />\r\n    </SwitchPrimitive.Root>\r\n  );\r\n}\r\n\r\nexport {Switch};\r\n"],"names":["Switch","className","props","SwitchPrimitive","cn"],"mappings":";;;;;AAOA,SAASA,OAAO,EAACC,SAAS,EAAE,GAAGC,OAAyD;IACtF,OAAO,WAAP,GACE,IAACC,MAAoB;QACnB,aAAU;QACV,WAAWC,GACT,yoBACAH;QAED,GAAGC,KAAK;kBACT,kBAACC,OAAqB;YACpB,aAAU;YACV,WAAWC,GACT;;;AAKV"}
+{"version":3,"file":"components\\ui\\switch.js","sources":["webpack://@arolariu/components/./src/components/ui/switch.tsx"],"sourcesContent":["\r\n\r\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nconst Switch = React.forwardRef<\r\n  React.ComponentRef<typeof SwitchPrimitives.Root>,\r\n  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\r\n>(({className, ...props}, ref) => (\r\n  <SwitchPrimitives.Root\r\n    className={cn(\r\n      \"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200 dark:focus-visible:ring-neutral-300 dark:focus-visible:ring-offset-neutral-950 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=unchecked]:bg-neutral-800\",\r\n      className,\r\n    )}\r\n    {...props}\r\n    ref={ref}>\r\n    <SwitchPrimitives.Thumb\r\n      className={cn(\r\n        \"pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:bg-neutral-950\",\r\n      )}\r\n    />\r\n  </SwitchPrimitives.Root>\r\n));\r\nSwitch.displayName = SwitchPrimitives.Root.displayName;\r\n\r\nexport {Switch};\r\n"],"names":["Switch","React","className","props","ref","SwitchPrimitives","cn"],"mappings":";;;;;AAOA,MAAMA,SAAS,WAATA,GAASC,WAGb,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAM,EAAEC,MAAAA,WAAAA,GACxB,IAACC,MAAqB;QACpB,WAAWC,GACT,6iBACAJ;QAED,GAAGC,KAAK;QACT,KAAKC;kBACL,kBAACC,OAAsB;YACrB,WAAWC,GACT;;;AAKRN,OAAO,WAAW,GAAGK,KAAAA,WAAiC"}

package/dist/components/ui/table.d.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
-declare function Table({ className, ...props }: React.ComponentProps<"table">): import("react/jsx-runtime").JSX.Element;
-declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): import("react/jsx-runtime").JSX.Element;
-declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): import("react/jsx-runtime").JSX.Element;
-declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): import("react/jsx-runtime").JSX.Element;
-declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
-declare function TableHead({ className, ...props }: React.ComponentProps<"th">): import("react/jsx-runtime").JSX.Element;
-declare function TableCell({ className, ...props }: React.ComponentProps<"td">): import("react/jsx-runtime").JSX.Element;
-declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): import("react/jsx-runtime").JSX.Element;
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
 //# sourceMappingURL=table.d.ts.map

package/dist/components/ui/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/ui/table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,KAAK,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAalE;AAED,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAQxE;AAED,iBAAS,SAAS,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAQtE;AAED,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAQxE;AAED,iBAAS,QAAQ,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAWlE;AAED,iBAAS,SAAS,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAWnE;AAED,iBAAS,SAAS,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAQnE;AAED,iBAAS,YAAY,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,2CAQ3E;AAED,OAAO,EAAC,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAC,CAAC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/ui/table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,KAAK,iHAQT,CAAC;AAGH,QAAA,MAAM,WAAW,+HAQhB,CAAC;AAGF,QAAA,MAAM,SAAS,+HAMb,CAAC;AAGH,QAAA,MAAM,WAAW,+HAQhB,CAAC;AAGF,QAAA,MAAM,QAAQ,uHASZ,CAAC;AAGH,QAAA,MAAM,SAAS,2HASb,CAAC;AAGH,QAAA,MAAM,SAAS,2HAMb,CAAC;AAGH,QAAA,MAAM,YAAY,+HAQjB,CAAC;AAGF,OAAO,EAAC,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAC,CAAC"}

package/dist/components/ui/table.js

@@ -1,67 +1,58 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import "react";
+import { forwardRef } from "react";
 import { cn } from "../../lib/utilities.js";
-function Table({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "table-container",
-        className: "relative w-full overflow-x-auto",
+const Table = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        className: "relative w-full overflow-auto",
         children: /*#__PURE__*/ jsx("table", {
-            "data-slot": "table",
+            ref: ref,
             className: cn("w-full caption-bottom text-sm", className),
             ...props
         })
-    });
-}
-function TableHeader({ className, ...props }) {
-    return /*#__PURE__*/ jsx("thead", {
-        "data-slot": "table-header",
+    }));
+Table.displayName = "Table";
+const TableHeader = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("thead", {
+        ref: ref,
         className: cn("[&_tr]:border-b", className),
         ...props
-    });
-}
-function TableBody({ className, ...props }) {
-    return /*#__PURE__*/ jsx("tbody", {
-        "data-slot": "table-body",
+    }));
+TableHeader.displayName = "TableHeader";
+const TableBody = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("tbody", {
+        ref: ref,
         className: cn("[&_tr:last-child]:border-0", className),
         ...props
-    });
-}
-function TableFooter({ className, ...props }) {
-    return /*#__PURE__*/ jsx("tfoot", {
-        "data-slot": "table-footer",
+    }));
+TableBody.displayName = "TableBody";
+const TableFooter = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("tfoot", {
+        ref: ref,
         className: cn("border-t bg-neutral-100/50 font-medium dark:bg-neutral-800/50 [&>tr]:last:border-b-0", className),
         ...props
-    });
-}
-function TableRow({ className, ...props }) {
-    return /*#__PURE__*/ jsx("tr", {
-        "data-slot": "table-row",
+    }));
+TableFooter.displayName = "TableFooter";
+const TableRow = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("tr", {
+        ref: ref,
         className: cn("border-b transition-colors hover:bg-neutral-100/50 data-[state=selected]:bg-neutral-100 dark:hover:bg-neutral-800/50 dark:data-[state=selected]:bg-neutral-800", className),
         ...props
-    });
-}
-function TableHead({ className, ...props }) {
-    return /*#__PURE__*/ jsx("th", {
-        "data-slot": "table-head",
-        className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-neutral-950 dark:text-neutral-50 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+    }));
+TableRow.displayName = "TableRow";
+const TableHead = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("th", {
+        ref: ref,
+        className: cn("h-10 px-2 text-left align-middle font-medium text-neutral-500 dark:text-neutral-400 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
         ...props
-    });
-}
-function TableCell({ className, ...props }) {
-    return /*#__PURE__*/ jsx("td", {
-        "data-slot": "table-cell",
-        className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+    }));
+TableHead.displayName = "TableHead";
+const TableCell = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("td", {
+        ref: ref,
+        className: cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
         ...props
-    });
-}
-function TableCaption({ className, ...props }) {
-    return /*#__PURE__*/ jsx("caption", {
-        "data-slot": "table-caption",
+    }));
+TableCell.displayName = "TableCell";
+const TableCaption = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("caption", {
+        ref: ref,
         className: cn("mt-4 text-sm text-neutral-500 dark:text-neutral-400", className),
         ...props
-    });
-}
+    }));
+TableCaption.displayName = "TableCaption";
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
 
 //# sourceMappingURL=table.js.map