{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu",
  "title": "DropdownMenu (FRAME/12 Adapter)",
  "description": "FRAME/12 skin for accessible action menus built on @radix-ui/react-dropdown-menu with ink inversion on focus and hover.",
  "dependencies": [
    "@radix-ui/react-dropdown-menu"
  ],
  "registryDependencies": [
    "https://frame12.dev/r/frame12-styles.json",
    "https://frame12.dev/r/button.json"
  ],
  "files": [
    {
      "path": "ui/dropdown-menu.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport type { ButtonProps } from './button';\n\ninterface DropdownMenuFieldContextValue {\n  containerEl: HTMLDivElement | null;\n}\n\nconst DropdownMenuFieldContext = React.createContext<DropdownMenuFieldContextValue | null>(null);\n\nexport type DropdownMenuProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>;\n\nexport function DropdownMenu({\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal = false,\n  dir,\n  children,\n}: DropdownMenuProps) {\n  const [containerEl, setContainerEl] = React.useState<HTMLDivElement | null>(null);\n  const ctxValue = React.useMemo(() => ({ containerEl }), [containerEl]);\n\n  return (\n    <DropdownMenuFieldContext.Provider value={ctxValue}>\n      <div ref={setContainerEl} className=\"f12-menu-wrap\">\n        <DropdownMenuPrimitive.Root\n          open={open}\n          defaultOpen={defaultOpen}\n          onOpenChange={onOpenChange}\n          modal={modal}\n          dir={dir}\n        >\n          {children}\n        </DropdownMenuPrimitive.Root>\n      </div>\n    </DropdownMenuFieldContext.Provider>\n  );\n}\n\nexport interface DropdownMenuTriggerProps extends ButtonProps {\n  asChild?: boolean;\n}\n\nexport const DropdownMenuTrigger = React.forwardRef<HTMLButtonElement, DropdownMenuTriggerProps>(\n  function DropdownMenuTrigger(\n    { asChild = false, variant = 'secondary', size = 'md', className = '', children, ...rest },\n    forwardedRef,\n  ) {\n    if (asChild && React.isValidElement(children)) {\n      return (\n        <DropdownMenuPrimitive.Trigger\n          ref={forwardedRef}\n          asChild\n          className={className || undefined}\n          {...rest}\n        >\n          {children}\n        </DropdownMenuPrimitive.Trigger>\n      );\n    }\n    const classes = `f12-btn f12-btn-${variant} f12-btn-${size}${className ? ` ${className}` : ''}`;\n    return (\n      <DropdownMenuPrimitive.Trigger\n        ref={forwardedRef}\n        type=\"button\"\n        className={classes}\n        {...rest}\n      >\n        {children}\n      </DropdownMenuPrimitive.Trigger>\n    );\n  },\n);\n\nexport type DropdownMenuContentProps = React.ComponentPropsWithoutRef<\n  typeof DropdownMenuPrimitive.Content\n>;\n\nexport const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContentProps>(\n  function DropdownMenuContent(\n    { className = '', sideOffset = 4, align = 'start', children, ...rest },\n    forwardedRef,\n  ) {\n    const field = React.useContext(DropdownMenuFieldContext);\n    const portalContainer =\n      (field?.containerEl?.closest(\n        'dialog, .f12-frame, .f12-sheet, .f12-theme-dark, .f12-theme-light, [data-theme]',\n      ) as HTMLElement | null) ?? undefined;\n\n    return (\n      <DropdownMenuPrimitive.Portal container={portalContainer}>\n        <DropdownMenuPrimitive.Content\n          ref={forwardedRef}\n          sideOffset={sideOffset}\n          align={align}\n          className={`f12-menu${className ? ` ${className}` : ''}`}\n          {...rest}\n        >\n          {children}\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    );\n  },\n);\n\nexport type DropdownMenuLabelProps = React.ComponentPropsWithoutRef<\n  typeof DropdownMenuPrimitive.Label\n>;\n\nexport const DropdownMenuLabel = React.forwardRef<HTMLDivElement, DropdownMenuLabelProps>(\n  function DropdownMenuLabel({ className = '', children, ...rest }, forwardedRef) {\n    return (\n      <DropdownMenuPrimitive.Label\n        ref={forwardedRef}\n        className={`f12-menu-label${className ? ` ${className}` : ''}`}\n        {...rest}\n      >\n        {children}\n      </DropdownMenuPrimitive.Label>\n    );\n  },\n);\n\nexport type DropdownMenuSeparatorProps = React.ComponentPropsWithoutRef<\n  typeof DropdownMenuPrimitive.Separator\n>;\n\nexport const DropdownMenuSeparator = React.forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(\n  function DropdownMenuSeparator({ className = '', ...rest }, forwardedRef) {\n    return (\n      <DropdownMenuPrimitive.Separator\n        ref={forwardedRef}\n        className={`f12-menu-sep${className ? ` ${className}` : ''}`}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport type DropdownMenuItemProps = React.ComponentPropsWithoutRef<\n  typeof DropdownMenuPrimitive.Item\n>;\n\nexport const DropdownMenuItem = React.forwardRef<HTMLDivElement, DropdownMenuItemProps>(\n  function DropdownMenuItem({ className = '', children, ...rest }, forwardedRef) {\n    return (\n      <DropdownMenuPrimitive.Item\n        ref={forwardedRef}\n        className={`f12-menu-item${className ? ` ${className}` : ''}`}\n        {...rest}\n      >\n        {children}\n      </DropdownMenuPrimitive.Item>\n    );\n  },\n);\n\nexport type DropdownMenuGroupProps = React.ComponentPropsWithoutRef<\n  typeof DropdownMenuPrimitive.Group\n>;\n\nexport const DropdownMenuGroup = React.forwardRef<HTMLDivElement, DropdownMenuGroupProps>(\n  function DropdownMenuGroup({ className = '', children, ...rest }, forwardedRef) {\n    return (\n      <DropdownMenuPrimitive.Group\n        ref={forwardedRef}\n        className={`f12-menu-group${className ? ` ${className}` : ''}`}\n        {...rest}\n      >\n        {children}\n      </DropdownMenuPrimitive.Group>\n    );\n  },\n);\n",
      "type": "registry:ui",
      "target": "components/frame12/dropdown-menu.tsx"
    }
  ],
  "type": "registry:ui"
}