{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "menu",
  "type": "registry:ui",
  "dependencies": [
    "class-variance-authority",
    "@radix-ui/react-slot"
  ],
  "registryDependencies": [
    "https://ui.getlyse.com/r/lyse-tokens.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/menu/menu.tsx",
      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport \"./menu.css\"\n\n/* ------------------------------------------------------------------ */\n/*  CVA                                                                */\n/* ------------------------------------------------------------------ */\n\nconst menuItemVariants = cva(\n  \"menu-item flex items-center rounded-[var(--layout-radius-lg)] text-content-note font-accent\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        accent: \"menu-item-accent\",\n      },\n      size: {\n        sm: \"h-[var(--layout-size-lg)] gap-[var(--layout-gap-sm)] py-[var(--layout-padding-sm)] px-[var(--layout-padding-md)] [&_.menu-item-icon]:h-[var(--layout-size-xs)] [&_.menu-item-icon]:w-[var(--layout-size-xs)] [&_.menu-item-icon>svg]:h-[var(--layout-size-xs)] [&_.menu-item-icon>svg]:w-[var(--layout-size-xs)]\",\n        md: \"h-9 gap-[var(--layout-gap-md)] p-[var(--layout-padding-md)] [&_.menu-item-icon]:h-[var(--layout-size-xs)] [&_.menu-item-icon]:w-[var(--layout-size-xs)] [&_.menu-item-icon>svg]:h-[var(--layout-size-xs)] [&_.menu-item-icon>svg]:w-[var(--layout-size-xs)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  }\n)\n\n/* ------------------------------------------------------------------ */\n/*  Menu                                                               */\n/* ------------------------------------------------------------------ */\n\nfunction Menu({\n  className,\n  children,\n  ref,\n  ...props\n}: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      ref={ref}\n      data-slot=\"menu\"\n      className={cn(\"flex flex-col gap-[var(--layout-gap-xl)]\", className)}\n      {...props}\n    >\n      {children}\n    </nav>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  MenuGroup                                                          */\n/* ------------------------------------------------------------------ */\n\nfunction MenuGroup({\n  className,\n  label,\n  children,\n  ref,\n  ...props\n}: React.ComponentProps<\"div\"> & { label?: string }) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"menu-group\"\n      role=\"group\"\n      aria-label={label || undefined}\n      className={cn(\"flex flex-col gap-[var(--layout-gap-md)]\", className)}\n      {...props}\n    >\n      {label && (\n        <span\n          aria-hidden=\"true\"\n          className=\"menu-group-label px-[var(--layout-padding-md)] text-content-caption font-accent\"\n        >\n          {label}\n        </span>\n      )}\n      <div className=\"flex flex-col gap-[var(--layout-gap-sm)]\">\n        {children}\n      </div>\n    </div>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  MenuItem                                                           */\n/* ------------------------------------------------------------------ */\n\nfunction MenuItem({\n  className,\n  variant,\n  size,\n  active,\n  disabled,\n  asChild,\n  icon,\n  shortcut,\n  badge,\n  dot,\n  children,\n  ref,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof menuItemVariants> & {\n    asChild?: boolean\n    active?: boolean\n    icon?: React.ReactNode\n    shortcut?: string\n    badge?: React.ReactNode\n    dot?: boolean\n  }) {\n  const itemClass = cn(\n    menuItemVariants({ variant, size }),\n    active && \"menu-item-active\",\n    disabled && \"menu-item-disabled\",\n    className\n  )\n\n  if (asChild) {\n    return (\n      <Slot\n        ref={ref as React.Ref<HTMLElement>}\n        data-slot=\"menu-item\"\n        aria-disabled={disabled || undefined}\n        className={itemClass}\n        {...props}\n      >\n        {children}\n      </Slot>\n    )\n  }\n\n  return (\n    <button\n      ref={ref}\n      data-slot=\"menu-item\"\n      type=\"button\"\n      disabled={disabled}\n      className={itemClass}\n      {...props}\n    >\n      {icon && (\n        <span className=\"menu-item-icon shrink-0\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <span className=\"flex-1 min-w-0 text-start\">{children}</span>\n      {badge && (\n        <span className=\"menu-item-badge shrink-0 inline-flex items-center justify-center min-w-[var(--layout-size-sm)] px-[var(--layout-padding-sm)] py-[var(--layout-padding-2xs)] rounded-[var(--layout-radius-full)] text-content-caption\">\n          {badge}\n        </span>\n      )}\n      {shortcut && (\n        <span className=\"menu-item-shortcut shrink-0 inline-flex items-center justify-center h-[var(--layout-size-sm)] px-[var(--layout-padding-xs)] py-[var(--layout-padding-2xs)] rounded-[var(--layout-radius-sm)] text-content-caption\">\n          {shortcut}\n        </span>\n      )}\n      {dot && (\n        <span className=\"menu-item-dot shrink-0 size-2 rounded-[var(--layout-radius-full)]\" />\n      )}\n    </button>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  MenuDivider                                                        */\n/* ------------------------------------------------------------------ */\n\nfunction MenuDivider({\n  className,\n  ref,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"menu-divider\"\n      className={cn(\"menu-divider my-[var(--layout-gap-xs)]\", className)}\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      {...props}\n    />\n  )\n}\n\nexport { Menu, MenuGroup, MenuItem, MenuDivider, menuItemVariants }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/ui/menu/menu.css",
      "content": "/* ================================================================\n * MENU — Styles\n * Structure (flex, gap, padding, radius) lives in menu.tsx via cva.\n * Theming (colors, borders, focus ring) lives here via tokens.\n * ================================================================ */\n\n/* --------------------------------\n * MenuItem — base\n * -------------------------------- */\n.menu-item {\n  color: var(--text-base-strong);\n  cursor: pointer;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .menu-item {\n    transition:\n      background 150ms ease,\n      color 150ms ease;\n  }\n}\n\n.menu-item:hover {\n  background: var(--background-neutral-faint-hover);\n}\n\n.menu-item:active {\n  background: var(--background-neutral-faint-pressed);\n}\n\n.menu-item:focus-visible {\n  background: var(--background-neutral-faint-hover);\n  outline: none;\n  box-shadow: 0 0 0 2px var(--shadow-brand-moderate);\n}\n\n/* --------------------------------\n * MenuItem — active state\n * -------------------------------- */\n.menu-item-active {\n  background: var(--background-neutral-lighter-default);\n}\n\n.menu-item-active:hover {\n  background: var(--background-neutral-lighter-hover);\n}\n\n/* --------------------------------\n * MenuItem — accent variant\n * -------------------------------- */\n.menu-item-accent {\n  color: var(--text-brand-moderate);\n}\n\n.menu-item.menu-item-accent .menu-item-icon {\n  color: var(--text-brand-moderate);\n}\n\n.menu-item.menu-item-accent:hover .menu-item-icon {\n  color: var(--text-brand-moderate);\n}\n\n/* --------------------------------\n * MenuItem — disabled\n * -------------------------------- */\n.menu-item-disabled,\n.menu-item:disabled,\n.menu-item[aria-disabled=\"true\"] {\n  color: var(--text-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.menu-item-disabled .menu-item-icon,\n.menu-item:disabled .menu-item-icon,\n.menu-item[aria-disabled=\"true\"] .menu-item-icon {\n  color: var(--text-disabled);\n}\n\n.menu-item-disabled .menu-item-shortcut,\n.menu-item:disabled .menu-item-shortcut,\n.menu-item[aria-disabled=\"true\"] .menu-item-shortcut {\n  color: var(--text-disabled);\n}\n\n/* --------------------------------\n * Icon\n * -------------------------------- */\n.menu-item-icon {\n  color: var(--text-base-moderate);\n}\n\n.menu-item:hover .menu-item-icon {\n  color: var(--text-base-strong);\n}\n\n/* --------------------------------\n * Shortcut\n * -------------------------------- */\n.menu-item-shortcut {\n  color: var(--text-base-medium);\n  border: var(--layout-border-thin) solid var(--border-default);\n}\n\n/* --------------------------------\n * Badge\n * -------------------------------- */\n.menu-item-badge {\n  background: var(--overlay-brand-default);\n  border: var(--layout-border-thin) solid var(--border-brand-lighter);\n  color: var(--text-brand-moderate);\n}\n\n/* --------------------------------\n * Dot\n * -------------------------------- */\n.menu-item-dot {\n  background: var(--background-brand-strong-default);\n}\n\n/* --------------------------------\n * Divider\n * -------------------------------- */\n.menu-divider {\n  border-top: var(--layout-border-thin) solid var(--border-default);\n}\n\n/* --------------------------------\n * Group label\n * -------------------------------- */\n.menu-group-label {\n  color: var(--text-base-moderate);\n}\n",
      "type": "registry:ui"
    }
  ]
}