{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toolbar",
  "title": "Toolbar",
  "description": "Horizontal control group (role=toolbar) with arrow-key roving focus and separators.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/toolbar/toolbar.tsx",
      "content": "import { cn } from \"@vllnt/ui\";\n\nconst FOCUSABLE_SELECTOR = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(\",\");\n\n/** Orientation shared by the toolbar and its separators. */\nexport type ToolbarOrientation = \"horizontal\" | \"vertical\";\n\n/** Props for the {@link Toolbar} container. */\nexport type ToolbarProps = {\n  /** Layout and arrow-key navigation axis. Defaults to `horizontal`. */\n  orientation?: ToolbarOrientation;\n} & React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Horizontal (or vertical) container that groups related controls with\n * `role=\"toolbar\"` and roving arrow-key navigation (Arrow keys, Home, End).\n * @example\n * <Toolbar aria-label=\"Formatting\">\n *   <Button>Bold</Button>\n *   <ToolbarSeparator />\n *   <Button>Italic</Button>\n * </Toolbar>\n */\nconst Toolbar = ({\n  className,\n  onKeyDown,\n  orientation = \"horizontal\",\n  ref,\n  ...props\n}: ToolbarProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>): void {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n\n    const nextKey = orientation === \"horizontal\" ? \"ArrowRight\" : \"ArrowDown\";\n    const previousKey = orientation === \"horizontal\" ? \"ArrowLeft\" : \"ArrowUp\";\n    const isNext = event.key === nextKey;\n    const isPrevious = event.key === previousKey;\n    const isHome = event.key === \"Home\";\n    const isEnd = event.key === \"End\";\n\n    if (!isNext && !isPrevious && !isHome && !isEnd) return;\n\n    const items = [\n      ...event.currentTarget.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n    ];\n    if (items.length === 0) return;\n\n    event.preventDefault();\n    const active =\n      document.activeElement instanceof HTMLElement\n        ? document.activeElement\n        : null;\n    const currentIndex = active ? items.indexOf(active) : -1;\n\n    let nextIndex = 0;\n    if (isHome) {\n      nextIndex = 0;\n    } else if (isEnd) {\n      nextIndex = items.length - 1;\n    } else if (isNext) {\n      nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % items.length;\n    } else {\n      nextIndex =\n        currentIndex < 0\n          ? items.length - 1\n          : (currentIndex - 1 + items.length) % items.length;\n    }\n\n    items[nextIndex]?.focus();\n  }\n\n  return (\n    <div\n      aria-orientation={orientation}\n      className={cn(\n        \"flex items-center gap-1 rounded-md border border-border bg-background p-1\",\n        orientation === \"vertical\" ? \"flex-col\" : \"flex-row\",\n        className,\n      )}\n      onKeyDown={handleKeyDown}\n      ref={ref}\n      role=\"toolbar\"\n      {...props}\n    />\n  );\n};\nToolbar.displayName = \"Toolbar\";\n\n/** Props for the {@link ToolbarSeparator}. */\nexport type ToolbarSeparatorProps = {\n  /** Separator axis. Defaults to `vertical` (for a horizontal toolbar). */\n  orientation?: ToolbarOrientation;\n} & React.HTMLAttributes<HTMLDivElement>;\n\n/** Visual and semantic divider between groups of toolbar controls. */\nconst ToolbarSeparator = ({\n  className,\n  orientation = \"vertical\",\n  ref,\n  ...props\n}: ToolbarSeparatorProps & { ref?: React.Ref<HTMLDivElement> }) => (\n  <div\n    aria-orientation={orientation}\n    className={cn(\n      \"shrink-0 bg-border\",\n      orientation === \"vertical\" ? \"mx-1 h-6 w-px\" : \"my-1 h-px w-full\",\n      className,\n    )}\n    ref={ref}\n    role=\"separator\"\n    {...props}\n  />\n);\nToolbarSeparator.displayName = \"ToolbarSeparator\";\n\nexport { Toolbar, ToolbarSeparator };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}