{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "toolbar-orientation-example",
  "title": "Toolbar Orientation",
  "description": "toolbar-orientation-example",
  "dependencies": [
    "@heroicons/react"
  ],
  "registryDependencies": [
    "https://intentui.com/r/toolbar"
  ],
  "files": [
    {
      "path": "src/components/examples/controls/toolbar/toolbar-orientation-example.tsx",
      "content": "'use client'\n\nimport {\n  AdjustmentsHorizontalIcon as AdjustmentsHorizontalOutline,\n  Bars3BottomLeftIcon,\n  Bars3BottomRightIcon,\n  Bars3Icon,\n  BoltIcon as BoltOutline,\n  CursorArrowRaysIcon as CursorArrowRaysOutline,\n  NoSymbolIcon as NoSymbolOutline,\n  PencilIcon as PencilOutline,\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 { Toolbar, ToolbarGroup, ToolbarItem, ToolbarSeparator } from '@/components/ui/toolbar'\n\nexport default function ToolbarDemo() {\n  return (\n    <span data-slot=\"layout\">\n      <Toolbar orientation=\"vertical\" 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      </Toolbar>\n    </span>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/toolbar-orientation-example/page.tsx"
    }
  ],
  "type": "registry:page"
}