{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sf-dropdown-menu",
  "title": "SF Dropdown Menu",
  "description": "Brutalist dropdown with inverted focus state, mono text",
  "registryDependencies": [
    "dropdown-menu"
  ],
  "files": [
    {
      "path": "components/sf/sf-dropdown-menu.tsx",
      "content": "\"use client\";\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Context menu — FRAME layer dropdown navigation primitive.\n *\n * Radix DropdownMenu root wrapped with SF contract. Compose with\n * SFDropdownMenuTrigger, SFDropdownMenuContent, SFDropdownMenuGroup,\n * SFDropdownMenuItem, SFDropdownMenuLabel, SFDropdownMenuSeparator,\n * and SFDropdownMenuShortcut for full context menu behavior.\n *\n * @example\n * <SFDropdownMenu>\n *   <SFDropdownMenuTrigger asChild><SFButton>Options</SFButton></SFDropdownMenuTrigger>\n *   <SFDropdownMenuContent>\n *     <SFDropdownMenuItem>Edit</SFDropdownMenuItem>\n *     <SFDropdownMenuSeparator />\n *     <SFDropdownMenuItem>Delete</SFDropdownMenuItem>\n *   </SFDropdownMenuContent>\n * </SFDropdownMenu>\n */\nfunction SFDropdownMenu(props: React.ComponentProps<typeof DropdownMenu>) {\n  return <DropdownMenu {...props} />;\n}\n\n/** Sub-component of SFDropdownMenu — trigger element that opens the dropdown on click. */\nfunction SFDropdownMenuTrigger(\n  props: React.ComponentProps<typeof DropdownMenuTrigger>\n) {\n  return <DropdownMenuTrigger {...props} />;\n}\n\n/** Sub-component of SFDropdownMenu — floating content panel with sharp corners, 2px border, and no shadow. */\nfunction SFDropdownMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      className={cn(\n        \"rounded-none border-2 border-foreground bg-background shadow-none ring-0\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFDropdownMenu — groups related items with a mono uppercase label heading. */\nfunction SFDropdownMenuGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuGroup>) {\n  return (\n    <DropdownMenuGroup\n      className={cn(\n        \"**:[[data-slot=dropdown-menu-label]]:font-mono **:[[data-slot=dropdown-menu-label]]:uppercase **:[[data-slot=dropdown-menu-label]]:tracking-[0.15em]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFDropdownMenu — selectable menu item; inverts colors on focus/hover. */\nfunction SFDropdownMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem>) {\n  return (\n    <DropdownMenuItem\n      className={cn(\n        \"rounded-none font-mono uppercase tracking-wider text-xs cursor-pointer focus:bg-foreground focus:text-background\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFDropdownMenu — non-interactive section label in muted foreground at xs size. */\nfunction SFDropdownMenuLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuLabel>) {\n  return (\n    <DropdownMenuLabel\n      className={cn(\n        \"font-mono uppercase tracking-[0.15em] text-[var(--text-xs)] text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFDropdownMenu — keyboard shortcut hint in mono uppercase, right-aligned in item. */\nfunction SFDropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      className={cn(\"font-mono uppercase tracking-wider text-xs\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFDropdownMenu — full-width foreground rule separating menu sections. */\nfunction SFDropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n  return (\n    <DropdownMenuSeparator\n      className={cn(\"bg-foreground h-[var(--border-element)]\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  SFDropdownMenu,\n  SFDropdownMenuTrigger,\n  SFDropdownMenuContent,\n  SFDropdownMenuGroup,\n  SFDropdownMenuItem,\n  SFDropdownMenuLabel,\n  SFDropdownMenuSeparator,\n  SFDropdownMenuShortcut,\n};\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "layer": "frame",
    "pattern": "A"
  },
  "type": "registry:ui"
}