{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-menu",
  "type": "registry:ui",
  "title": "Sidebar Menu",
  "description": "SidebarGlass Menu Components",
  "dependencies": [
    "@radix-ui/react-slot"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/ui/sidebar-menu.tsx",
      "type": "registry:component",
      "content": "/* eslint-disable react-refresh/only-export-components */\n/**\n * SidebarGlass Menu Components\n *\n * Menu components for building navigation within the sidebar.\n * 100% API compatible with shadcn/ui Sidebar menu components.\n *\n * @module sidebar-menu\n */\n\nimport {\n  forwardRef,\n  type ReactNode,\n  type CSSProperties,\n  type ComponentPropsWithoutRef,\n  createContext,\n  useContext,\n} from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn } from '@/lib/utils';\nimport { useSidebar } from './sidebar-context';\nimport { TooltipGlassSimple } from '@/components/glass/ui/tooltip-glass';\nimport { SkeletonGlass } from '@/components/glass/ui/skeleton-glass';\n\n// ========================================\n// SIDEBAR GROUP\n// ========================================\n\nexport interface SidebarGroupProps extends ComponentPropsWithoutRef<'div'> {\n  children: ReactNode;\n}\n\n/**\n * SidebarGlass.Group - Container for a group of menu items\n */\nexport const SidebarGroup = forwardRef<HTMLDivElement, SidebarGroupProps>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"group\"\n        className={cn('flex flex-col gap-2 p-2', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nSidebarGroup.displayName = 'SidebarGlass.Group';\n\n// ========================================\n// SIDEBAR GROUP LABEL\n// ========================================\n\nexport interface SidebarGroupLabelProps extends ComponentPropsWithoutRef<'div'> {\n  children: ReactNode;\n  /** Render as child element */\n  asChild?: boolean;\n}\n\n/**\n * SidebarGlass.GroupLabel - Label for a group of menu items\n */\nexport const SidebarGroupLabel = forwardRef<HTMLDivElement, SidebarGroupLabelProps>(\n  ({ children, asChild = false, className, ...props }, ref) => {\n    const { state } = useSidebar();\n    const Comp = asChild ? Slot : 'div';\n\n    return (\n      <Comp\n        ref={ref}\n        data-sidebar=\"group-label\"\n        data-state={state}\n        className={cn(\n          'flex h-8 shrink-0 items-center px-2',\n          'text-xs font-medium text-[var(--sidebar-foreground)]/60',\n          'transition-[margin,opacity] duration-200 ease-linear',\n          // Collapsed state\n          'group-data-[state=collapsed]/sidebar:h-0 group-data-[state=collapsed]/sidebar:overflow-hidden',\n          'group-data-[state=collapsed]/sidebar:opacity-0',\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  }\n);\n\nSidebarGroupLabel.displayName = 'SidebarGlass.GroupLabel';\n\n// ========================================\n// SIDEBAR GROUP ACTION\n// ========================================\n\nexport interface SidebarGroupActionProps extends ComponentPropsWithoutRef<'button'> {\n  /** Render as child element */\n  asChild?: boolean;\n}\n\n/**\n * SidebarGlass.GroupAction - Action button in group header\n */\nexport const SidebarGroupAction = forwardRef<HTMLButtonElement, SidebarGroupActionProps>(\n  ({ asChild = false, className, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'button';\n\n    return (\n      <Comp\n        ref={ref}\n        data-sidebar=\"group-action\"\n        className={cn(\n          'absolute right-2 top-2.5',\n          'flex aspect-square w-5 items-center justify-center',\n          'rounded-md p-0 text-[var(--sidebar-foreground)]/60',\n          'ring-[var(--sidebar-ring)]',\n          'transition-transform hover:bg-[var(--sidebar-accent)]',\n          'hover:text-[var(--sidebar-foreground)]',\n          'focus-visible:outline-none focus-visible:ring-2',\n          '[&>svg]:size-4 [&>svg]:shrink-0',\n          // Hide when collapsed\n          'group-data-[state=collapsed]/sidebar:hidden',\n          // Show on hover\n          'after:absolute after:-inset-2 after:md:hidden',\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\n\nSidebarGroupAction.displayName = 'SidebarGlass.GroupAction';\n\n// ========================================\n// SIDEBAR GROUP CONTENT\n// ========================================\n\nexport interface SidebarGroupContentProps extends ComponentPropsWithoutRef<'div'> {\n  children: ReactNode;\n}\n\n/**\n * SidebarGlass.GroupContent - Content wrapper for group items\n */\nexport const SidebarGroupContent = forwardRef<HTMLDivElement, SidebarGroupContentProps>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"group-content\"\n        className={cn('flex flex-col gap-1', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nSidebarGroupContent.displayName = 'SidebarGlass.GroupContent';\n\n// ========================================\n// SIDEBAR MENU\n// ========================================\n\nexport interface SidebarMenuProps extends ComponentPropsWithoutRef<'ul'> {\n  children: ReactNode;\n}\n\n/**\n * SidebarGlass.Menu - Container for menu items\n */\nexport const SidebarMenu = forwardRef<HTMLUListElement, SidebarMenuProps>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <ul\n        ref={ref}\n        data-sidebar=\"menu\"\n        className={cn('flex w-full flex-col gap-1', className)}\n        {...props}\n      >\n        {children}\n      </ul>\n    );\n  }\n);\n\nSidebarMenu.displayName = 'SidebarGlass.Menu';\n\n// ========================================\n// SIDEBAR MENU ITEM\n// ========================================\n\nexport interface SidebarMenuItemProps extends ComponentPropsWithoutRef<'li'> {\n  children: ReactNode;\n}\n\n/**\n * SidebarGlass.MenuItem - Container for a single menu item\n */\nexport const SidebarMenuItem = forwardRef<HTMLLIElement, SidebarMenuItemProps>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <li\n        ref={ref}\n        data-sidebar=\"menu-item\"\n        className={cn('group/menu-item relative text-[var(--sidebar-foreground)]/60', className)}\n        {...props}\n      >\n        {children}\n      </li>\n    );\n  }\n);\n\nSidebarMenuItem.displayName = 'SidebarGlass.MenuItem';\n\n// ========================================\n// SIDEBAR MENU BUTTON\n// ========================================\n\nexport type SidebarMenuButtonSize = 'default' | 'sm' | 'lg';\nexport type SidebarMenuButtonVariant = 'default' | 'outline';\n\nexport interface SidebarMenuButtonProps extends ComponentPropsWithoutRef<'button'> {\n  /** Render as child element */\n  asChild?: boolean;\n  /** Whether this item is active */\n  isActive?: boolean;\n  /** Tooltip text when collapsed */\n  tooltip?: string | ReactNode;\n  /** Button size */\n  size?: SidebarMenuButtonSize;\n  /** Button variant */\n  variant?: SidebarMenuButtonVariant;\n}\n\nconst menuButtonSizeClasses: Record<SidebarMenuButtonSize, string> = {\n  default: 'h-8 text-sm',\n  sm: 'h-7 text-xs',\n  lg: 'h-10 text-sm group-data-[state=collapsed]/sidebar:!p-0',\n};\n\n/**\n * SidebarGlass.MenuButton - Interactive menu button\n */\nexport const SidebarMenuButton = forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n  (\n    {\n      asChild = false,\n      isActive = false,\n      tooltip,\n      size = 'default',\n      variant = 'default',\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { state, isMobile } = useSidebar();\n    const Comp = asChild ? Slot : 'button';\n\n    const button = (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        data-active={isActive}\n        data-size={size}\n        className={cn(\n          'peer/menu-button flex w-full items-center gap-2',\n          'overflow-hidden rounded-md px-2',\n          'ring-[var(--sidebar-ring)]',\n          'transition-[width,height,padding] duration-200 ease-linear',\n          'focus-visible:outline-none focus-visible:ring-2',\n          'active:bg-[var(--sidebar-accent)] active:text-[var(--sidebar-accent-foreground)]',\n          'disabled:pointer-events-none disabled:opacity-50',\n          'aria-disabled:pointer-events-none aria-disabled:opacity-50',\n          '[&>span:last-child]:truncate',\n          '[&>svg]:size-4 [&>svg]:shrink-0',\n          // Size variants\n          menuButtonSizeClasses[size],\n          // Variant styles\n          variant === 'default' && [\n            'hover:bg-[var(--sidebar-accent)] hover:text-[var(--sidebar-accent-foreground)]',\n          ],\n          variant === 'outline' && [\n            'bg-transparent shadow-none',\n            'hover:bg-[var(--sidebar-accent)] hover:text-[var(--sidebar-accent-foreground)]',\n            'hover:shadow-[0_0_0_1px_var(--sidebar-border)]',\n          ],\n          // Active state\n          isActive && [\n            'bg-[var(--sidebar-primary)] text-[var(--sidebar-primary-foreground)]',\n            'hover:bg-[var(--sidebar-primary)] hover:text-[var(--sidebar-primary-foreground)]',\n          ],\n          // Collapsed state - icon only\n          'group-data-[state=collapsed]/sidebar:w-8 group-data-[state=collapsed]/sidebar:!px-0',\n          'group-data-[state=collapsed]/sidebar:justify-center',\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n\n    // No tooltip on mobile or expanded state\n    if (!tooltip || isMobile || state === 'expanded') {\n      return button;\n    }\n\n    return (\n      <TooltipGlassSimple\n        content={typeof tooltip === 'string' ? tooltip : String(tooltip)}\n        side=\"right\"\n      >\n        {button}\n      </TooltipGlassSimple>\n    );\n  }\n);\n\nSidebarMenuButton.displayName = 'SidebarGlass.MenuButton';\n\n// ========================================\n// SIDEBAR MENU ACTION\n// ========================================\n\nexport interface SidebarMenuActionProps extends ComponentPropsWithoutRef<'button'> {\n  /** Render as child element */\n  asChild?: boolean;\n  /** Only show on hover */\n  showOnHover?: boolean;\n}\n\n/**\n * SidebarGlass.MenuAction - Action button within menu item\n */\nexport const SidebarMenuAction = forwardRef<HTMLButtonElement, SidebarMenuActionProps>(\n  ({ asChild = false, showOnHover = false, className, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'button';\n\n    return (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-action\"\n        className={cn(\n          'absolute right-1 top-1.5',\n          'flex aspect-square w-5 items-center justify-center',\n          'rounded-md p-0 text-[var(--sidebar-foreground)]/60',\n          'ring-[var(--sidebar-ring)]',\n          'transition-transform hover:bg-[var(--sidebar-accent)]',\n          'hover:text-[var(--sidebar-foreground)]',\n          'focus-visible:outline-none focus-visible:ring-2',\n          '[&>svg]:size-4 [&>svg]:shrink-0',\n          // Hide when collapsed\n          'group-data-[state=collapsed]/sidebar:hidden',\n          // Show on hover\n          showOnHover &&\n            'peer-hover/menu-button:opacity-100 group-focus-within/menu-item:opacity-100',\n          showOnHover && 'data-[state=open]:opacity-100 md:opacity-0',\n          // Tap area for touch\n          'after:absolute after:-inset-2 after:md:hidden',\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\n\nSidebarMenuAction.displayName = 'SidebarGlass.MenuAction';\n\n// ========================================\n// SIDEBAR MENU BADGE\n// ========================================\n\nexport interface SidebarMenuBadgeProps extends ComponentPropsWithoutRef<'div'> {\n  children: ReactNode;\n}\n\n/**\n * SidebarGlass.MenuBadge - Badge within menu item\n */\nexport const SidebarMenuBadge = forwardRef<HTMLDivElement, SidebarMenuBadgeProps>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"menu-badge\"\n        className={cn(\n          'pointer-events-none absolute right-1 flex h-5 min-w-5',\n          'select-none items-center justify-center',\n          'rounded-md px-1 text-xs font-medium tabular-nums',\n          'text-[var(--sidebar-foreground)]/60',\n          // Hide when collapsed\n          'group-data-[state=collapsed]/sidebar:hidden',\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nSidebarMenuBadge.displayName = 'SidebarGlass.MenuBadge';\n\n// ========================================\n// SIDEBAR MENU SKELETON\n// ========================================\n\nexport interface SidebarMenuSkeletonProps extends ComponentPropsWithoutRef<'div'> {\n  /** Show icon placeholder */\n  showIcon?: boolean;\n}\n\n/**\n * SidebarGlass.MenuSkeleton - Loading skeleton for menu items\n */\nexport const SidebarMenuSkeleton = forwardRef<HTMLDivElement, SidebarMenuSkeletonProps>(\n  ({ showIcon = false, className, ...props }, ref) => {\n    // Fixed width for consistent appearance (avoids Math.random during render)\n    const width = '70%';\n\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"menu-skeleton\"\n        className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n        {...props}\n      >\n        {showIcon && <SkeletonGlass className=\"size-4 rounded-md\" />}\n        <SkeletonGlass\n          className=\"h-4 max-w-[var(--skeleton-width)] flex-1\"\n          style={{ '--skeleton-width': width } as CSSProperties}\n        />\n      </div>\n    );\n  }\n);\n\nSidebarMenuSkeleton.displayName = 'SidebarGlass.MenuSkeleton';\n\n// ========================================\n// SIDEBAR MENU SUB (SUBMENU CONTAINER)\n// ========================================\n\n// Context for submenu state\ninterface SidebarMenuSubContextValue {\n  open: boolean;\n}\n\nconst SidebarMenuSubContext = createContext<SidebarMenuSubContextValue | null>(null);\n\nexport interface SidebarMenuSubProps extends ComponentPropsWithoutRef<'ul'> {\n  children: ReactNode;\n}\n\n/**\n * SidebarGlass.MenuSub - Container for submenu items\n */\nexport const SidebarMenuSub = forwardRef<HTMLUListElement, SidebarMenuSubProps>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <SidebarMenuSubContext.Provider value={{ open: true }}>\n        <ul\n          ref={ref}\n          data-sidebar=\"menu-sub\"\n          className={cn(\n            'flex min-w-0 flex-col gap-1',\n            'mx-3.5 border-l border-[var(--sidebar-border)] px-2.5 py-0.5',\n            // Hide when collapsed\n            'group-data-[state=collapsed]/sidebar:hidden',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ul>\n      </SidebarMenuSubContext.Provider>\n    );\n  }\n);\n\nSidebarMenuSub.displayName = 'SidebarGlass.MenuSub';\n\n// ========================================\n// SIDEBAR MENU SUB ITEM\n// ========================================\n\nexport interface SidebarMenuSubItemProps extends ComponentPropsWithoutRef<'li'> {\n  children: ReactNode;\n}\n\n/**\n * SidebarGlass.MenuSubItem - Container for a submenu item\n */\nexport const SidebarMenuSubItem = forwardRef<HTMLLIElement, SidebarMenuSubItemProps>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <li ref={ref} data-sidebar=\"menu-sub-item\" className={cn(className)} {...props}>\n        {children}\n      </li>\n    );\n  }\n);\n\nSidebarMenuSubItem.displayName = 'SidebarGlass.MenuSubItem';\n\n// ========================================\n// SIDEBAR MENU SUB BUTTON\n// ========================================\n\nexport interface SidebarMenuSubButtonProps extends ComponentPropsWithoutRef<'a'> {\n  /** Render as child element */\n  asChild?: boolean;\n  /** Whether this item is active */\n  isActive?: boolean;\n  /** Button size */\n  size?: 'sm' | 'md';\n}\n\n/**\n * SidebarGlass.MenuSubButton - Interactive submenu button\n */\nexport const SidebarMenuSubButton = forwardRef<HTMLAnchorElement, SidebarMenuSubButtonProps>(\n  ({ asChild = false, isActive = false, size = 'md', className, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'a';\n\n    return (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-sub-button\"\n        data-active={isActive}\n        data-size={size}\n        className={cn(\n          'flex min-w-0 items-center gap-2',\n          '-ml-px rounded-md border-l border-transparent',\n          'text-[var(--sidebar-foreground)]/60',\n          'ring-[var(--sidebar-ring)]',\n          'transition-colors',\n          'hover:border-[var(--sidebar-border)]',\n          'hover:bg-[var(--sidebar-accent)]',\n          'hover:text-[var(--sidebar-accent-foreground)]',\n          'focus-visible:outline-none focus-visible:ring-2',\n          'active:bg-[var(--sidebar-accent)] active:text-[var(--sidebar-accent-foreground)]',\n          'disabled:pointer-events-none disabled:opacity-50',\n          '[&>span:last-child]:truncate',\n          '[&>svg]:size-4 [&>svg]:shrink-0',\n          // Size variants\n          size === 'sm' && 'h-7 px-2 text-xs',\n          size === 'md' && 'h-8 px-2 text-sm',\n          // Active state\n          isActive && ['border-[var(--sidebar-primary)]', 'text-[var(--sidebar-foreground)]'],\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\n\nSidebarMenuSubButton.displayName = 'SidebarGlass.MenuSubButton';\n\n// Export hook for submenu context (optional use)\nexport function useSidebarMenuSub() {\n  const context = useContext(SidebarMenuSubContext);\n  return context;\n}\n"
    }
  ],
  "categories": [
    "ui"
  ],
  "cssVars": {
    "light": {
      "--glass-bg": "rgba(255, 255, 255, 0.1)",
      "--glass-border": "rgba(255, 255, 255, 0.2)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    },
    "dark": {
      "--glass-bg": "rgba(255, 255, 255, 0.05)",
      "--glass-border": "rgba(255, 255, 255, 0.1)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    }
  }
}