{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toolbar",
  "type": "registry:ui",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "toolbar.tsx",
      "target": "components/ui/toolbar.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ToolbarProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Toolbar = React.forwardRef<HTMLDivElement, ToolbarProps>(\n  ({ className, role = \"toolbar\", ...props }, ref) => (\n    <div\n      ref={ref}\n      role={role}\n      className={cn(\n        \"flex min-h-11 flex-wrap items-center gap-2 border-b border-border bg-surface px-3 py-2 text-sm text-ink\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nToolbar.displayName = \"Toolbar\";\n\nexport type ToolbarGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const ToolbarGroup = React.forwardRef<HTMLDivElement, ToolbarGroupProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"flex flex-wrap items-center gap-1.5\", className)}\n      {...props}\n    />\n  ),\n);\nToolbarGroup.displayName = \"ToolbarGroup\";\n\nexport type ToolbarActionsProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const ToolbarActions = React.forwardRef<\n  HTMLDivElement,\n  ToolbarActionsProps\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"ml-auto flex flex-wrap items-center gap-1.5\", className)}\n    {...props}\n  />\n));\nToolbarActions.displayName = \"ToolbarActions\";\n\nexport interface ToolbarLegendProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Cap the visible keys; the rest collapse into a \"+N\" indicator. */\n  max?: number;\n}\n\nexport const ToolbarLegend = React.forwardRef<\n  HTMLDivElement,\n  ToolbarLegendProps\n>(({ className, max, children, ...props }, ref) => {\n  const all = React.Children.toArray(children);\n  const shown = max != null ? all.slice(0, max) : all;\n  const overflow = all.length - shown.length;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex min-w-0 items-center gap-5\", className)}\n      {...props}\n    >\n      {shown}\n      {overflow > 0 && (\n        <span className=\"shrink-0 font-mono text-xs tabular-nums text-muted\">\n          +{overflow}\n        </span>\n      )}\n    </div>\n  );\n});\nToolbarLegend.displayName = \"ToolbarLegend\";\n\nexport interface ToolbarLegendItemProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Categorical key colour, any CSS colour, following StripeCard's stripeColor.\n   * A legend swatch names a thing, it does not carry a semantic tone.\n   */\n  swatch?: string;\n}\n\nexport const ToolbarLegendItem = React.forwardRef<\n  HTMLDivElement,\n  ToolbarLegendItemProps\n>(({ className, swatch, children, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"flex min-w-0 items-center gap-1.5 text-xs font-medium text-muted\",\n      className,\n    )}\n    {...props}\n  >\n    <span\n      aria-hidden=\"true\"\n      data-testid=\"toolbar-legend-swatch\"\n      className={cn(\n        \"size-2 shrink-0 rounded-sm\",\n        swatch == null && \"bg-border-strong\",\n      )}\n      style={{ backgroundColor: swatch }}\n    />\n    <span className=\"truncate\">{children}</span>\n  </div>\n));\nToolbarLegendItem.displayName = \"ToolbarLegendItem\";\n\nexport type ToolbarCountTone =\n  | \"accent\"\n  | \"accent-alt\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\";\n\nconst countTone: Record<ToolbarCountTone, string> = {\n  accent: \"border-accent/30 bg-accent/10 text-accent\",\n  \"accent-alt\": \"border-accent-alt/30 bg-accent-alt/10 text-accent-alt\",\n  success: \"border-success/30 bg-success/10 text-success\",\n  warning: \"border-warning/30 bg-warning/10 text-warning\",\n  danger: \"border-danger/30 bg-danger/10 text-danger\",\n};\n\nconst countDot: Record<ToolbarCountTone, string> = {\n  accent: \"bg-accent\",\n  \"accent-alt\": \"bg-accent-alt\",\n  success: \"bg-success\",\n  warning: \"bg-warning\",\n  danger: \"bg-danger\",\n};\n\nexport interface ToolbarCountProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  count: number;\n  tone?: ToolbarCountTone;\n}\n\n/**\n * A status chip that disappears at zero, so callers stop guarding the render.\n *\n * Enter is CSS only. There is no exit animation: without AnimatePresence the\n * node is already unmounted, and a status chip does not justify making the\n * whole Toolbar a client component.\n */\nexport const ToolbarCount = React.forwardRef<HTMLDivElement, ToolbarCountProps>(\n  ({ className, count, tone = \"accent\", children, ...props }, ref) => {\n    if (!(count > 0)) return null;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex min-h-8 animate-reveal items-center gap-2 rounded-lg border px-3\",\n          \"text-xs font-semibold tabular-nums\",\n          countTone[tone],\n          className,\n        )}\n        {...props}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={cn(\"size-1.5 shrink-0 rounded-full\", countDot[tone])}\n        />\n        <span>{count}</span>\n        <span>{children}</span>\n      </div>\n    );\n  },\n);\nToolbarCount.displayName = \"ToolbarCount\";\n"
    }
  ]
}