{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "b-selection-toolbar",
  "type": "registry:ui",
  "registryDependencies": ["selectiontoolbar"],
  "dependencies": ["@base-ui/react", "lucide-react"],
  "devDependencies": [],
  "files": [
    {
      "path": "b-selection-toolbar.tsx",
      "content": "\"use client\";\n\nimport { Toolbar as ToolbarPrimitive } from \"@base-ui/react/toolbar\";\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport {\n  getSelectionToolbarButtonClassName,\n  getSelectionToolbarShortcutLabel,\n  isSelectionToolbarCommandActive,\n  type SelectionToolbarItem,\n  type SelectionToolbarProps,\n  selectionToolbarStyles,\n  useSelectionToolbar,\n} from \"./selectiontoolbar\";\n\nexport type {\n  SelectionToolbarCommand,\n  SelectionToolbarItem,\n  SelectionToolbarProps,\n} from \"./selectiontoolbar\";\n\ntype ToolbarButtonProps = {\n  active?: boolean;\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  label: string;\n  onMouseDown: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  shortcut?: string;\n  tabIndex?: number;\n};\n\nconst ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(\n  function ToolbarButton(\n    {\n      active = false,\n      children,\n      className,\n      disabled = false,\n      label,\n      onMouseDown,\n      shortcut,\n      tabIndex = -1,\n    },\n    ref\n  ) {\n    return (\n      <ToolbarPrimitive.Button\n        aria-keyshortcuts={shortcut}\n        aria-label={shortcut ? `${label} (${shortcut})` : label}\n        aria-pressed={active}\n        className={getSelectionToolbarButtonClassName({ active, className })}\n        disabled={disabled}\n        onMouseDown={onMouseDown}\n        ref={ref}\n        tabIndex={tabIndex}\n        title={shortcut ? `${label} (${shortcut})` : label}\n        type=\"button\"\n      >\n        <span className={selectionToolbarStyles.toolbarButtonIconClassName}>\n          {children}\n        </span>\n      </ToolbarPrimitive.Button>\n    );\n  }\n);\n\nToolbarButton.displayName = \"SelectionToolbarButton\";\n\nfunction renderToolbarItems({\n  active,\n  buttonRefs,\n  disabled,\n  focusedIndex,\n  handleItemAction,\n  items,\n}: {\n  active: ReturnType<typeof useSelectionToolbar>[\"active\"];\n  buttonRefs: ReturnType<typeof useSelectionToolbar>[\"buttonRefs\"];\n  disabled: boolean;\n  focusedIndex: number;\n  handleItemAction: (item: SelectionToolbarItem) => void;\n  items: SelectionToolbarItem[];\n}) {\n  return items.map((item, index) => (\n    <ToolbarButton\n      active={\n        item.command\n          ? isSelectionToolbarCommandActive(item.command, active)\n          : false\n      }\n      disabled={disabled || item.disabled}\n      key={item.id}\n      label={item.label}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        handleItemAction(item);\n      }}\n      ref={(node) => {\n        buttonRefs.current[index] = node;\n      }}\n      shortcut={\n        item.command\n          ? getSelectionToolbarShortcutLabel(item.command)\n          : undefined\n      }\n      tabIndex={focusedIndex === index ? 0 : -1}\n    >\n      {item.icon}\n    </ToolbarButton>\n  ));\n}\n\nexport function SelectionToolbar(props: SelectionToolbarProps) {\n  const toolbar = useSelectionToolbar(props);\n\n  if (!(toolbar.mounted && toolbar.portalTarget)) {\n    return null;\n  }\n\n  return createPortal(\n    <ToolbarPrimitive.Root\n      aria-controls={toolbar.ariaControls}\n      aria-hidden={!toolbar.visible}\n      aria-label=\"Text formatting\"\n      className={toolbar.shellClassName}\n      onKeyDown={toolbar.handleToolbarKeyDown}\n      onMouseDown={(event) => event.preventDefault()}\n      orientation=\"horizontal\"\n      ref={toolbar.setToolbarNode}\n      style={toolbar.toolbarStyle}\n    >\n      {renderToolbarItems({\n        active: toolbar.active,\n        buttonRefs: toolbar.buttonRefs,\n        disabled: toolbar.disabled,\n        focusedIndex: toolbar.focusedIndex,\n        handleItemAction: toolbar.handleItemAction,\n        items: toolbar.resolvedItems,\n      })}\n      {toolbar.children}\n    </ToolbarPrimitive.Root>,\n    toolbar.portalTarget\n  );\n}\n\nSelectionToolbar.displayName = \"SelectionToolbar\";\n\nexport { ToolbarButton };\n",
      "type": "registry:ui"
    }
  ],
  "title": "Selection Toolbar (Base UI)",
  "description": "Floating selection toolbar with the same Iconiq API layered over Base UI toolbar primitives, including viewport-aware positioning, keyboard shortcuts, and fluid button motion."
}