align-dropdown-menu.json

{
  "dependencies": [
    "@udecode/plate-alignment"
  ],
  "files": [
    {
      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n  useAlignDropdownMenu,\n  useAlignDropdownMenuState,\n} from '@udecode/plate-alignment/react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n  {\n    icon: Icons.alignLeft,\n    value: 'left',\n  },\n  {\n    icon: Icons.alignCenter,\n    value: 'center',\n  },\n  {\n    icon: Icons.alignRight,\n    value: 'right',\n  },\n  {\n    icon: Icons.alignJustify,\n    value: 'justify',\n  },\n];\n\nexport function AlignDropdownMenu({ children, ...props }: DropdownMenuProps) {\n  const state = useAlignDropdownMenuState();\n  const { radioGroupProps } = useAlignDropdownMenu(state);\n\n  const openState = useOpenState();\n  const IconValue =\n    items.find((item) => item.value === radioGroupProps.value)?.icon ??\n    Icons.alignLeft;\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Align\" isDropdown>\n          <IconValue />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent className=\"min-w-0\" align=\"start\">\n        <DropdownMenuRadioGroup\n          className=\"flex flex-col gap-0.5\"\n          {...radioGroupProps}\n        >\n          {items.map(({ icon: Icon, value: itemValue }) => (\n            <DropdownMenuRadioItem key={itemValue} value={itemValue} hideIcon>\n              <Icon className={iconVariants({ variant: 'toolbar' })} />\n            </DropdownMenuRadioItem>\n          ))}\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
      "path": "plate-ui/align-dropdown-menu.tsx",
      "target": "components/plate-ui/align-dropdown-menu.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "align-dropdown-menu",
  "registryDependencies": [
    "dropdown-menu",
    "toolbar"
  ],
  "type": "registry:ui"
}