{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toolbar",
  "type": "registry:ui",
  "title": "Toolbar and tool button",
  "description": "A frosted capsule strip of circular 36 tool caps (frost in the colorway, or graphite), latched tools pressed with a green LED, engraved separators, a search well, and tooltips with the key. Built on Base UI Toolbar, Toggle and Tooltip.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/toolbar/toolbar.tsx",
      "type": "registry:ui",
      "target": "components/metalui/toolbar/toolbar.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';\nimport { Toggle } from '@base-ui/react/toggle';\nimport { Tooltip, TooltipProvider } from '../tooltip/tooltip';\nimport { Kbd } from '../kbd/kbd';\n\n/* ─────────────────────────────────────────────────────────\n * TOOLBAR and TOOL BUTTON on Base UI Toolbar + Toggle + Tooltip\n *   enter     one nest from its edge on the surface spring\n *   hover     the glyph plays its pose (the tool is its trigger); a tooltip after 120 ms: \"Select · V\"\n *   press     down 1 into a well, 50 ms; back on release\n *   latched   stays pressed, a 4 pt green LED top right; state changes at once\n *   focus     a 1.5 ring with no offset (a dense strip); arrows move between tools\n * ───────────────────────────────────────────────────────── */\n\nexport interface ToolbarProps {\n  /** frost (the colorway's frosted strip) or graphite (the dark strip, in both colorways). */\n  variant?: 'frost' | 'graphite';\n  'aria-label': string;\n  className?: string;\n  children: React.ReactNode;\n}\n\n/* Styled with the theme's utilities (the toolbar recipe's own drawings): the frosted strip or the graphite\n * dock, and its tools, separators and search well per variant through a group variant. */\nconst STRIP = {\n  frost: 'mu-toolbar group/toolbar inline-flex items-center toolbar-enter toolbar-frost material-frost-strip',\n  graphite: 'mu-toolbar group/toolbar inline-flex items-center toolbar-enter gap-toolbar-gap p-toolbar-pad rounded-toolbar-radius recipe-toolbar backdrop-toolbar-blur',\n};\nconst TOOL = 'mu-tool mu-icon-trigger relative grid place-items-center p-0 border-0 cursor-pointer tap-highlight-none toolbar-frost-tool group-data-[variant=graphite]/toolbar:toolbar-graphite-tool data-disabled:opacity-button-disabled data-disabled:cursor-default';\nconst SEP = 'mu-toolbar-sep toolbar-frost-sep group-data-[variant=graphite]/toolbar:toolbar-graphite-sep';\nconst SEARCH = 'mu-toolbar-search flex items-center border-0 cursor-text [&>.mu-kbd]:ml-auto toolbar-frost-search group-data-[variant=graphite]/toolbar:toolbar-graphite-search';\n\n/** A strip of tools: 48 tall, a capsule. */\nexport function Toolbar({ variant = 'frost', className, children, ...props }: ToolbarProps) {\n  return (\n    <TooltipProvider>\n      <BaseToolbar.Root\n        aria-label={props['aria-label']}\n        data-variant={variant}\n        className={className ? `${STRIP[variant]} ${className}` : STRIP[variant]}\n      >\n        {children}\n      </BaseToolbar.Root>\n    </TooltipProvider>\n  );\n}\n\nexport interface ToolButtonProps {\n  /** The tool's name: its accessible name and tooltip. */\n  label: string;\n  /** The key, in the tooltip and aria-keyshortcuts: \"V\". */\n  shortcut?: string;\n  /** The glyph at 16, e.g. <SelectIcon size={16} />. */\n  icon: React.ReactNode;\n  /** Latched (the active tool). Omit for a momentary action. */\n  pressed?: boolean;\n  onPressedChange?: (pressed: boolean) => void;\n  onClick?: () => void;\n  disabled?: boolean;\n}\n\n/** A circular tool cap. Latched tools sit pressed with a green LED. */\nexport function ToolButton({ label, shortcut, icon, pressed, onPressedChange, onClick, disabled }: ToolButtonProps) {\n  const button = pressed === undefined ? (\n    <BaseToolbar.Button className={TOOL} aria-label={label} aria-keyshortcuts={shortcut} disabled={disabled} onClick={onClick}>\n      {icon}\n    </BaseToolbar.Button>\n  ) : (\n    <BaseToolbar.Button\n      render={<Toggle pressed={pressed} onPressedChange={(p) => onPressedChange?.(p)} />}\n      className={TOOL}\n      aria-label={label}\n      aria-keyshortcuts={shortcut}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {icon}\n    </BaseToolbar.Button>\n  );\n  return <Tooltip label={label} shortcut={shortcut}>{button}</Tooltip>;\n}\n\n/** An engraved rule between groups of tools. */\nexport function ToolbarSeparator() {\n  return <BaseToolbar.Separator className={SEP} />;\n}\n\nexport interface ToolbarSearchProps {\n  /** Opens the command palette. */\n  onOpen: () => void;\n  placeholder?: string;\n  icon?: React.ReactNode;\n  shortcut?: string;\n}\n\n/** The search well in the strip: opens the palette. */\nexport function ToolbarSearch({ onOpen, placeholder = 'Search or ask', icon, shortcut = '⌘K' }: ToolbarSearchProps) {\n  return (\n    <BaseToolbar.Button className={SEARCH} onClick={onOpen} aria-keyshortcuts=\"Meta+K\">\n      {icon}\n      {placeholder}\n      <Kbd surface=\"plain\">{shortcut}</Kbd>\n    </BaseToolbar.Button>\n  );\n}\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/toolbar.md. SwiftUI: MetalToolbar, MetalToolButton, MetalToolbarSeparator in the MetalUI Swift package."
}