{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "files": [
    {
      "content": "export * as Sidebar from \"./namespace\";\nexport * from \"./sidebar\";\nexport * from \"./styles\";\n",
      "path": "src/registry/ui/sidebar/index.tsx",
      "type": "registry:ui"
    },
    {
      "content": "\"use client\";\n\nimport { cx, type VariantProps } from \"cva\";\nimport { PanelLeftIcon } from \"lucide-react\";\nimport {\n  createContext,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { composeRenderProps, Link } from \"react-aria-components\";\nimport { useIsMobile } from \"~/registry/hooks/use-is-mobile\";\nimport { cn } from \"~/registry/lib/cva\";\nimport { Button, RACButton } from \"~/registry/ui/button\";\nimport { Input } from \"~/registry/ui/input\";\nimport { Separator } from \"~/registry/ui/separator\";\nimport {\n  Sheet,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"~/registry/ui/sheet\";\nimport { Skeleton } from \"~/registry/ui/skeleton\";\nimport { Tooltip, type TooltipContent } from \"~/registry/ui/tooltip\";\nimport { SidebarStyles } from \"./styles\";\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\";\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\n\ninterface SidebarContextProps {\n  isMobile: boolean;\n  open: boolean;\n  openMobile: boolean;\n  setOpen: (open: boolean) => void;\n  setOpenMobile: (open: boolean) => void;\n  state: \"expanded\" | \"collapsed\";\n  toggleSidebar: () => void;\n}\n\nconst SidebarContext = createContext<SidebarContextProps | null>(null);\n\nexport function useSidebar() {\n  const context = use(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n  }\n\n  return context;\n}\n\nexport interface SidebarProviderProps extends React.ComponentProps<\"div\"> {\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  open?: boolean;\n}\n\nexport function SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: SidebarProviderProps) {\n  const isMobile = useIsMobile();\n  const [openMobile, setOpenMobile] = useState(false);\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = useState(defaultOpen);\n  const open = openProp ?? _open;\n  const setOpen = useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value;\n      if (setOpenProp) {\n        setOpenProp(openState);\n      } else {\n        _setOpen(openState);\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      cookieStore.set({\n        expires: new Date(Date.now() + SIDEBAR_COOKIE_MAX_AGE * 1000).getTime(),\n        name: SIDEBAR_COOKIE_NAME,\n        path: \"/\",\n        value: openState.toString(),\n      });\n    },\n    [setOpenProp, open]\n  );\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = useCallback(\n    () =>\n      isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open),\n    [isMobile, setOpen]\n  );\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  useEffect(() => {\n    const controller = new AbortController();\n\n    window.addEventListener(\n      \"keydown\",\n      (e) => {\n        if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {\n          e.preventDefault();\n          toggleSidebar();\n        }\n      },\n      { signal: controller.signal }\n    );\n\n    return () => controller.abort();\n  }, [toggleSidebar]);\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\";\n\n  const contextValue = useMemo<SidebarContextProps>(\n    () => ({\n      isMobile,\n      open,\n      openMobile,\n      setOpen,\n      setOpenMobile,\n      state,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, toggleSidebar]\n  );\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        className={SidebarStyles.Provider({ className })}\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  );\n}\n\nexport interface SidebarRootProps extends React.ComponentProps<\"div\"> {\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n  side?: \"left\" | \"right\";\n  variant?: \"sidebar\" | \"floating\" | \"inset\";\n}\n\nexport function SidebarRoot({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  ...props\n}: SidebarRootProps) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        className={SidebarStyles.Root({ className, collapsible })}\n        data-slot=\"sidebar\"\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet.Root isOpen={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <Sheet.Overlay>\n          <Sheet.Modal\n            className=\"w-(--sidebar-width)\"\n            side={side}\n            style={\n              {\n                \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n              } as React.CSSProperties\n            }\n          >\n            <Sheet.Content\n              className=\"bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n              data-mobile=\"true\"\n              data-sidebar=\"sidebar\"\n              data-slot=\"sidebar\"\n            >\n              <SheetHeader className=\"sr-only\">\n                <SheetTitle>Sidebar</SheetTitle>\n                <SheetDescription>\n                  Displays the mobile sidebar.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"flex size-full flex-col\">{children}</div>\n            </Sheet.Content>\n          </Sheet.Modal>\n        </Sheet.Overlay>\n      </Sheet.Root>\n    );\n  }\n\n  return (\n    <div\n      className=\"group peer hidden text-sidebar-foreground md:block\"\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-side={side}\n      data-slot=\"sidebar\"\n      data-state={state}\n      data-variant={variant}\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        className={cx(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n        data-slot=\"sidebar-gap\"\n      />\n      <div\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        data-slot=\"sidebar-container\"\n        {...props}\n      >\n        <div\n          className={SidebarStyles.Inner()}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport interface SidebarTriggerProps\n  extends React.ComponentProps<typeof Button> {}\n\nexport function SidebarTrigger({\n  className,\n  onPress,\n  ...props\n}: SidebarTriggerProps) {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <Button\n      className={cn(\"size-7\", className)}\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      onPress={(event) => {\n        onPress?.(event);\n        toggleSidebar();\n      }}\n      size=\"icon\"\n      variant=\"ghost\"\n      {...props}\n    >\n      <PanelLeftIcon />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  );\n}\n\nexport interface SidebarRailProps\n  extends React.ComponentProps<typeof RACButton> {}\n\nexport function SidebarRail({ className, ...props }: SidebarRailProps) {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <RACButton\n      aria-label=\"Toggle Sidebar\"\n      className={SidebarStyles.Rail({ className })}\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      onPress={toggleSidebar}\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarInsetProps extends React.ComponentProps<\"main\"> {}\n\nexport function SidebarInset({ className, ...props }: SidebarInsetProps) {\n  return (\n    <main\n      className={SidebarStyles.Inset({ className })}\n      data-slot=\"sidebar-inset\"\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarInputProps extends React.ComponentProps<typeof Input> {}\n\nexport function SidebarInput({ className, ...props }: SidebarInputProps) {\n  return (\n    <Input\n      className={composeRenderProps(className, (className) =>\n        SidebarStyles.Input({ className })\n      )}\n      data-sidebar=\"input\"\n      data-slot=\"sidebar-input\"\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarHeaderProps extends React.ComponentProps<\"div\"> {}\n\nexport function SidebarHeader({ className, ...props }: SidebarHeaderProps) {\n  return (\n    <div\n      className={SidebarStyles.Header({ className })}\n      data-sidebar=\"header\"\n      data-slot=\"sidebar-header\"\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarFooterProps extends React.ComponentProps<\"div\"> {}\n\nexport function SidebarFooter({ className, ...props }: SidebarFooterProps) {\n  return (\n    <div\n      className={SidebarStyles.Header({ className })}\n      data-sidebar=\"footer\"\n      data-slot=\"sidebar-footer\"\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarSeparatorProps\n  extends React.ComponentProps<typeof Separator> {}\n\nexport function SidebarSeparator({\n  className,\n  ...props\n}: SidebarSeparatorProps) {\n  return (\n    <Separator\n      className={SidebarStyles.Separator({ className })}\n      data-sidebar=\"separator\"\n      data-slot=\"sidebar-separator\"\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarContentProps extends React.ComponentProps<\"div\"> {}\n\nexport function SidebarContent({ className, ...props }: SidebarContentProps) {\n  return (\n    <div\n      className={SidebarStyles.Content({ className })}\n      data-sidebar=\"content\"\n      data-slot=\"sidebar-content\"\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarGroupProps extends React.ComponentProps<\"div\"> {}\n\nexport function SidebarGroup({ className, ...props }: SidebarGroupProps) {\n  return (\n    <div\n      className={SidebarStyles.Group({ className })}\n      data-sidebar=\"group\"\n      data-slot=\"sidebar-group\"\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarGroupLabelProps extends React.ComponentProps<\"div\"> {}\n\nexport function SidebarGroupLabel({\n  className,\n  ...props\n}: SidebarGroupLabelProps) {\n  return (\n    <div\n      className={SidebarStyles.Label({ className })}\n      data-sidebar=\"group-label\"\n      data-slot=\"sidebar-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarGroupActionProps\n  extends React.ComponentProps<typeof RACButton> {}\n\nexport function SidebarGroupAction({\n  className,\n  ...props\n}: SidebarGroupActionProps) {\n  return (\n    <RACButton\n      className={composeRenderProps(className, (className) =>\n        SidebarStyles.GroupAction({ className })\n      )}\n      data-sidebar=\"group-action\"\n      data-slot=\"sidebar-group-action\"\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarGroupContentProps extends React.ComponentProps<\"div\"> {}\n\nexport function SidebarGroupContent({\n  className,\n  ...props\n}: SidebarGroupContentProps) {\n  return (\n    <div\n      className={SidebarStyles.GroupContent({ className })}\n      data-sidebar=\"group-content\"\n      data-slot=\"sidebar-group-content\"\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarMenuProps extends React.ComponentProps<\"ul\"> {}\n\nexport function SidebarMenu({ className, ...props }: SidebarMenuProps) {\n  return (\n    <ul\n      className={SidebarStyles.Menu({ className })}\n      data-sidebar=\"menu\"\n      data-slot=\"sidebar-menu\"\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarMenuItemProps extends React.ComponentProps<\"li\"> {}\n\nexport function SidebarMenuItem({ className, ...props }: SidebarMenuItemProps) {\n  return (\n    <li\n      className={SidebarStyles.MenuItem({ className })}\n      data-sidebar=\"menu-item\"\n      data-slot=\"sidebar-menu-item\"\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarMenuButtonProps\n  extends React.ComponentProps<typeof RACButton>,\n    VariantProps<typeof SidebarStyles.MenuButton> {\n  isActive?: boolean;\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n}\n\nexport function SidebarMenuButton({\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: SidebarMenuButtonProps) {\n  const { isMobile, state } = useSidebar();\n\n  const button = (\n    <RACButton\n      className={composeRenderProps(className, (className) =>\n        SidebarStyles.MenuButton({ className, size, variant })\n      )}\n      data-active={isActive}\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-slot=\"sidebar-menu-button\"\n      {...props}\n    />\n  );\n\n  if (!tooltip) {\n    return button;\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    };\n  }\n\n  return (\n    <Tooltip.Root isDisabled={state !== \"collapsed\" || isMobile}>\n      {button}\n\n      <Tooltip.Content placement=\"right\" {...tooltip} />\n    </Tooltip.Root>\n  );\n}\n\nexport interface SidebarMenuLinkProps\n  extends React.ComponentProps<typeof Link>,\n    VariantProps<typeof SidebarStyles.MenuButton> {\n  isActive?: boolean;\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n}\n\nexport function SidebarMenuLink({\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: SidebarMenuLinkProps) {\n  const { isMobile, state } = useSidebar();\n\n  const link = (\n    <Link\n      className={composeRenderProps(className, (className) =>\n        SidebarStyles.MenuButton({ className, size, variant })\n      )}\n      data-active={isActive}\n      data-sidebar=\"menu-link\"\n      data-size={size}\n      data-slot=\"sidebar-menu-link\"\n      {...props}\n    />\n  );\n\n  if (!tooltip) {\n    return link;\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    };\n  }\n\n  return (\n    <Tooltip.Root isDisabled={state !== \"collapsed\" || isMobile}>\n      {link}\n\n      <Tooltip.Content placement=\"right\" {...tooltip} />\n    </Tooltip.Root>\n  );\n}\n\nexport interface SidebarMenuActionProps\n  extends React.ComponentProps<typeof RACButton>,\n    VariantProps<typeof SidebarStyles.MenuAction> {}\n\nexport function SidebarMenuAction({\n  className,\n  showOnHover = false,\n  ...props\n}: SidebarMenuActionProps) {\n  return (\n    <RACButton\n      className={composeRenderProps(className, (className) =>\n        SidebarStyles.MenuAction({\n          className,\n          showOnHover,\n        })\n      )}\n      data-sidebar=\"menu-action\"\n      data-slot=\"sidebar-menu-action\"\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarMenuBadgeProps extends React.ComponentProps<\"div\"> {}\n\nexport function SidebarMenuBadge({\n  className,\n  ...props\n}: SidebarMenuBadgeProps) {\n  return (\n    <div\n      className={SidebarStyles.MenuBadge({ className })}\n      data-sidebar=\"menu-badge\"\n      data-slot=\"sidebar-menu-badge\"\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarMenuSkeletonProps extends React.ComponentProps<\"div\"> {\n  showIcon?: boolean;\n}\n\nexport function SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: SidebarMenuSkeletonProps) {\n  // Random width between 50 to 90%.\n  const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);\n\n  return (\n    <div\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n      data-sidebar=\"menu-skeleton\"\n      data-slot=\"sidebar-menu-skeleton\"\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  );\n}\n\nexport interface SidebarMenuSubProps extends React.ComponentProps<\"ul\"> {}\n\nexport function SidebarMenuSub({ className, ...props }: SidebarMenuSubProps) {\n  return (\n    <ul\n      className={cn(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      data-sidebar=\"menu-sub\"\n      data-slot=\"sidebar-menu-sub\"\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarMenuSubItemProps extends React.ComponentProps<\"li\"> {}\n\nexport function SidebarMenuSubItem({\n  className,\n  ...props\n}: SidebarMenuSubItemProps) {\n  return (\n    <li\n      className={cn(\"group/menu-sub-item relative\", className)}\n      data-sidebar=\"menu-sub-item\"\n      data-slot=\"sidebar-menu-sub-item\"\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarMenuSubButtonProps\n  extends React.ComponentProps<typeof Link>,\n    VariantProps<typeof SidebarStyles.MenuSubButton> {\n  isActive?: boolean;\n}\n\nexport function SidebarMenuSubButton({\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: SidebarMenuSubButtonProps) {\n  return (\n    <Link\n      className={SidebarStyles.MenuSubButton({\n        className,\n        size,\n      })}\n      data-active={isActive}\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-slot=\"sidebar-menu-sub-button\"\n      {...props}\n    />\n  );\n}\n",
      "path": "src/registry/ui/sidebar/sidebar.tsx",
      "type": "registry:ui"
    },
    {
      "content": "import { cva } from \"~/registry/lib/cva\";\n\nexport const SidebarStyles = {\n  Content: cva({\n    base: [\n      \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n    ],\n  }),\n  Group: cva({\n    base: [\"relative flex w-full min-w-0 flex-col p-2\"],\n  }),\n  GroupAction: cva({\n    base: [\n      \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n      // Increases the hit area of the button on mobile.\n      \"after:absolute after:-inset-2 md:after:hidden\",\n      \"group-data-[collapsible=icon]:hidden\",\n    ],\n  }),\n  GroupContent: cva({\n    base: [\"w-full text-sm\"],\n  }),\n  Header: cva({\n    base: [\"flex flex-col gap-2 p-2\"],\n  }),\n  Inner: cva({\n    base: [\n      \"flex size-full flex-col bg-sidebar\",\n      \"group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border\",\n      \"group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm\",\n    ],\n  }),\n  Input: cva({\n    base: [\"h-8 w-full bg-background shadow-none\"],\n  }),\n  Inset: cva({\n    base: [\n      \"relative flex w-full flex-1 flex-col bg-background\",\n      \"md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0\",\n      \"md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm\",\n    ],\n  }),\n  Label: cva({\n    base: [\n      \"flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n      \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n    ],\n  }),\n  Menu: cva({\n    base: [\"flex w-full min-w-0 flex-col gap-1\"],\n  }),\n  MenuAction: cva({\n    base: [\n      \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0\",\n      // Increases the hit area of the button on mobile.\n      \"after:absolute after:-inset-2 md:after:hidden\",\n      \"peer-data-[size=sm]/menu-button:top-1\",\n      \"peer-data-[size=default]/menu-button:top-1.5\",\n      \"peer-data-[size=lg]/menu-button:top-2.5\",\n      \"group-data-[collapsible=icon]:hidden\",\n    ],\n    defaultVariants: {\n      showOnHover: false,\n    },\n    variants: {\n      showOnHover: {\n        true: [\n          \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0\",\n        ],\n      },\n    },\n  }),\n  MenuBadge: cva({\n    base: [\n      \"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums\",\n      \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n      \"peer-data-[size=sm]/menu-button:top-1\",\n      \"peer-data-[size=default]/menu-button:top-1.5\",\n      \"peer-data-[size=lg]/menu-button:top-2.5\",\n      \"group-data-[collapsible=icon]:hidden\",\n    ],\n  }),\n  MenuButton: cva({\n    base: [\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,color,background-color] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n    ],\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n\n    variants: {\n      size: {\n        default: \"h-8 text-sm\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n        sm: \"h-7 text-xs\",\n      },\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background 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))]\",\n      },\n    },\n  }),\n  MenuItem: cva({\n    base: [\"group/menu-item relative\"],\n  }),\n  MenuSubButton: cva({\n    base: [\n      \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring\",\n      \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n      \"focus-visible:ring-2\",\n      \"disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n      \"[&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n      \"active:bg-sidebar-accent active:text-sidebar-accent-foreground\",\n      \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n      \"group-data-[collapsible=icon]:hidden\",\n    ],\n    defaultVariants: {\n      size: \"md\",\n    },\n    variants: {\n      size: {\n        md: \"text-sm\",\n        sm: \"text-xs\",\n      },\n    },\n  }),\n  Provider: cva({\n    base: [\n      \"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\n    ],\n  }),\n  Rail: cva({\n    base: [\n      \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4\",\n      \"after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=right]:left-0 sm:flex\",\n      \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n      \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n      \"group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full\",\n      \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n      \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    ],\n  }),\n  Root: cva({\n    variants: {\n      collapsible: {\n        none: [\n          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n        ],\n      },\n    },\n  }),\n  Separator: cva({\n    base: [\"mx-2 w-auto bg-sidebar-border\"],\n  }),\n};\n",
      "path": "src/registry/ui/sidebar/styles.ts",
      "type": "registry:ui"
    },
    {
      "content": "export {\n  SidebarContent as Content,\n  SidebarFooter as Footer,\n  SidebarGroup as Group,\n  SidebarGroupAction as GroupAction,\n  SidebarGroupContent as GroupContent,\n  SidebarGroupLabel as GroupLabel,\n  SidebarHeader as Header,\n  SidebarInput as Input,\n  SidebarInset as Inset,\n  SidebarMenu as Menu,\n  SidebarMenuAction as MenuAction,\n  SidebarMenuBadge as MenuBadge,\n  SidebarMenuButton as MenuButton,\n  SidebarMenuItem as MenuItem,\n  SidebarMenuLink as MenuLink,\n  SidebarMenuSkeleton as MenuSkeleton,\n  SidebarMenuSub as MenuSub,\n  SidebarMenuSubButton as MenuSubButton,\n  SidebarMenuSubItem as MenuSubItem,\n  SidebarProvider as Provider,\n  SidebarRail as Rail,\n  SidebarRoot as Root,\n  SidebarSeparator as Separator,\n  SidebarTrigger as Trigger,\n} from \"./sidebar\";\n",
      "path": "src/registry/ui/sidebar/namespace.ts",
      "type": "registry:ui"
    }
  ],
  "name": "sidebar",
  "registryDependencies": [
    "@kanpeki/use-is-mobile",
    "@kanpeki/button",
    "@kanpeki/input",
    "@kanpeki/separator",
    "@kanpeki/sheet",
    "@kanpeki/skeleton",
    "@kanpeki/tooltip"
  ],
  "type": "registry:ui"
}