{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "toolbar-example",
  "title": "Toolbar",
  "description": "toolbar-example",
  "dependencies": [
    "@heroicons/react"
  ],
  "registryDependencies": [
    "https://intentui.com/r/button",
    "https://intentui.com/r/checkbox",
    "https://intentui.com/r/menu",
    "https://intentui.com/r/toolbar"
  ],
  "files": [
    {
      "path": "src/components/examples/controls/toolbar/toolbar-example.tsx",
      "content": "'use client'\n\nimport { ChevronDownIcon } from '@heroicons/react/20/solid'\nimport {\n  AdjustmentsHorizontalIcon as AdjustmentsHorizontalOutline,\n  ArrowUturnLeftIcon,\n  ArrowUturnRightIcon,\n  Bars3BottomLeftIcon,\n  Bars3BottomRightIcon,\n  Bars3Icon,\n  BoltIcon as BoltOutline,\n  CursorArrowRaysIcon as CursorArrowRaysOutline,\n  LinkIcon,\n  NoSymbolIcon as NoSymbolOutline,\n  PencilIcon as PencilOutline,\n  PhotoIcon,\n  Squares2X2Icon,\n} from '@heroicons/react/24/outline'\nimport {\n  AdjustmentsHorizontalIcon as AdjustmentsHorizontalSolid,\n  Bars3BottomLeftIcon as Bars3BottomLeftSolid,\n  Bars3BottomRightIcon as Bars3BottomRightSolid,\n  Bars3Icon as Bars3Solid,\n  BoltIcon as BoltSolid,\n  CursorArrowRaysIcon as CursorArrowRaysSolid,\n  NoSymbolIcon as NoSymbolSolid,\n  PencilIcon as PencilSolid,\n} from '@heroicons/react/24/solid'\n\nimport { Button } from '@/components/ui/button'\nimport { Checkbox, CheckboxField } from '@/components/ui/checkbox'\nimport { Menu, MenuContent, MenuItem } from '@/components/ui/menu'\nimport { Toolbar, ToolbarGroup, ToolbarItem, ToolbarSeparator } from '@/components/ui/toolbar'\n\nexport default function ToolbarDemo() {\n  return (\n    <span data-slot=\"layout\">\n      <Toolbar aria-label=\"Toolbars\">\n        <ToolbarGroup aria-label=\"Text Formatting Options\">\n          <ToolbarItem defaultSelected aria-label=\"Bold\" size=\"sq-sm\">\n            {({ isSelected }) => <>{isSelected ? <BoltSolid /> : <BoltOutline />}</>}\n          </ToolbarItem>\n          <ToolbarItem aria-label=\"Italic\" size=\"sq-sm\">\n            {({ isSelected }) => <>{isSelected ? <PencilSolid /> : <PencilOutline />}</>}\n          </ToolbarItem>\n          <ToolbarItem aria-label=\"Underline\" size=\"sq-sm\">\n            {({ isSelected }) => (\n              <>{isSelected ? <CursorArrowRaysSolid /> : <CursorArrowRaysOutline />}</>\n            )}\n          </ToolbarItem>\n          <ToolbarItem aria-label=\"Strikethrough\" size=\"sq-sm\">\n            {({ isSelected }) => <>{isSelected ? <NoSymbolSolid /> : <NoSymbolOutline />}</>}\n          </ToolbarItem>\n        </ToolbarGroup>\n        <ToolbarSeparator />\n        <ToolbarGroup aria-label=\"Alignment\">\n          <ToolbarItem aria-label=\"Align Left\" size=\"sq-sm\">\n            {({ isSelected }) => (\n              <>{isSelected ? <Bars3BottomLeftSolid /> : <Bars3BottomLeftIcon />}</>\n            )}\n          </ToolbarItem>\n          <ToolbarItem size=\"sq-sm\" aria-label=\"Align Center\">\n            {({ isSelected }) => (\n              <>{isSelected ? <AdjustmentsHorizontalSolid /> : <AdjustmentsHorizontalOutline />}</>\n            )}\n          </ToolbarItem>\n          <ToolbarItem size=\"sq-sm\" aria-label=\"Align Right\">\n            {({ isSelected }) => (\n              <>{isSelected ? <Bars3BottomRightSolid /> : <Bars3BottomRightIcon />}</>\n            )}\n          </ToolbarItem>\n          <ToolbarItem size=\"sq-sm\" aria-label=\"Align Justify\">\n            {({ isSelected }) => <>{isSelected ? <Bars3Solid /> : <Bars3Icon />}</>}\n          </ToolbarItem>\n        </ToolbarGroup>\n        <ToolbarSeparator />\n        <CheckboxField>\n          <Checkbox>Spell Check</Checkbox>\n        </CheckboxField>\n        <ToolbarGroup className=\"ml-auto\">\n          <Menu>\n            <Button aria-label=\"Other options\" size=\"sm\" intent=\"outline\">\n              Options...\n              <ChevronDownIcon />\n            </Button>\n            <MenuContent placement=\"bottom right\">\n              <MenuItem>\n                <ArrowUturnLeftIcon />\n                Undo\n              </MenuItem>\n              <MenuItem>\n                <ArrowUturnRightIcon />\n                Redo\n              </MenuItem>\n              <MenuItem>\n                <LinkIcon />\n                Insert Link\n              </MenuItem>\n              <MenuItem>\n                <PhotoIcon />\n                Insert Image\n              </MenuItem>\n              <MenuItem>\n                <Squares2X2Icon />\n                Insert Grid\n              </MenuItem>\n            </MenuContent>\n          </Menu>\n        </ToolbarGroup>\n      </Toolbar>\n    </span>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/toolbar-example/page.tsx"
    }
  ],
  "type": "registry:page"
}