{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toolbar",
  "type": "registry:ui",
  "title": "Toolbar",
  "description": "Roving-focus toolbar for editor controls and compact actions.",
  "dependencies": [
    "@base-ui/react@^1.7.0"
  ],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/toolbar-knobs.ts",
      "target": "@components/control-ui/knob-contracts/toolbar-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/toolbar.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const toolbarKnobs = [\n  \"--cui-toolbar-radius\",\n  \"--cui-toolbar-padding\",\n  \"--cui-toolbar-background\",\n  \"--cui-toolbar-foreground\",\n  \"--cui-toolbar-border-color\",\n  \"--cui-toolbar-shadow\",\n  \"--cui-toolbar-item-radius\",\n  \"--cui-toolbar-item-background\",\n  \"--cui-toolbar-item-shadow\",\n  \"--cui-toolbar-item-foreground\",\n  \"--cui-toolbar-item-hover-background\",\n  \"--cui-toolbar-item-hover-foreground\",\n  \"--cui-toolbar-item-active-background\",\n  \"--cui-toolbar-item-active-foreground\",\n  \"--cui-toolbar-separator-background\",\n] as const;\nexport type ToolbarKnobStyle = Partial<Record<(typeof toolbarKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/toolbar.css",
      "target": "@components/control-ui/styles/recipes/toolbar.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"toolbar\"][data-slot=\"root\"]) {\n    --cui-toolbar-radius: calc(\n      min(var(--cui-toolbar-item-radius), calc(var(--control-h-sm) / 2)) +\n      clamp(0px, calc(min(var(--cui-toolbar-item-radius), calc(var(--control-h-sm) / 2)) * 1000), var(--cui-toolbar-padding))\n    );\n    --cui-toolbar-padding: 0.25rem;\n    --cui-toolbar-background: oklch(from var(--card) l c h / 0.72);\n    --cui-toolbar-foreground: var(--foreground);\n    --cui-toolbar-border-color: var(--border);\n    --cui-toolbar-shadow: var(--shadow-sm);\n    --cui-toolbar-item-radius: min(var(--radius-sm), calc(var(--control-h-sm) / 2));\n    --cui-toolbar-item-background: transparent;\n    --cui-toolbar-item-foreground: var(--muted-foreground);\n    --cui-toolbar-item-shadow: none;\n    --cui-toolbar-item-hover-background: oklch(from var(--foreground) l c h / 0.06);\n    --cui-toolbar-item-hover-foreground: var(--foreground);\n    --cui-toolbar-item-active-background: oklch(from var(--foreground) l c h / 0.08);\n    --cui-toolbar-item-active-foreground: var(--foreground);\n    --cui-toolbar-separator-background: var(--border);\n    border: 1px solid var(--cui-toolbar-border-color);\n    padding: var(--cui-toolbar-padding);\n    border-radius: var(--cui-toolbar-radius);\n    background-color: var(--cui-toolbar-background);\n    color: var(--cui-toolbar-foreground);\n    box-shadow: var(--cui-toolbar-shadow);\n  }\n\n  :where([data-control-family=\"toolbar\"][data-slot=\"root\"][data-variant=\"inverse\"]) {\n    --cui-toolbar-background: var(--foreground);\n    --cui-toolbar-foreground: var(--background);\n    --cui-toolbar-border-color: transparent;\n    --cui-toolbar-shadow: var(--shadow-pop);\n    --cui-toolbar-item-foreground: oklch(from var(--background) l c h / 0.7);\n    --cui-toolbar-item-hover-background: oklch(from var(--background) l c h / 0.1);\n    --cui-toolbar-item-hover-foreground: var(--background);\n    --cui-toolbar-item-active-background: var(--background);\n    --cui-toolbar-item-active-foreground: var(--foreground);\n    --cui-toolbar-separator-background: oklch(from var(--background) l c h / 0.2);\n  }\n\n  :where([data-control-family=\"toolbar\"][data-slot=\"button\"]),\n  :where([data-control-family=\"toolbar\"][data-slot=\"link\"]),\n  :where([data-control-family=\"toolbar\"][data-slot=\"input\"]) {\n    border-radius: var(--cui-toolbar-item-radius);\n    background-color: var(--cui-toolbar-item-background);\n    box-shadow: var(--cui-toolbar-item-shadow);\n    color: var(--cui-toolbar-item-foreground);\n    font-weight: 500;\n    transition-property: background-color, color, box-shadow;\n    transition-duration: var(--duration-fast);\n    transition-timing-function: var(--ease-standard);\n  }\n\n  @media (hover: hover) {\n    :where([data-control-family=\"toolbar\"][data-slot=\"button\"]:hover),\n    :where([data-control-family=\"toolbar\"][data-slot=\"link\"]:hover) {\n      background-color: var(--cui-toolbar-item-hover-background);\n      color: var(--cui-toolbar-item-hover-foreground);\n    }\n  }\n\n  :where([data-control-family=\"toolbar\"][data-slot=\"button\"]:is([data-pressed], [data-active])),\n  :where([data-control-family=\"toolbar\"][data-slot=\"link\"]:is([data-pressed], [data-active])) {\n    background-color: var(--cui-toolbar-item-active-background);\n    color: var(--cui-toolbar-item-active-foreground);\n  }\n\n  :where([data-control-family=\"toolbar\"][data-slot=\"button\"][data-disabled]),\n  :where([data-control-family=\"toolbar\"][data-slot=\"input\"][data-disabled]) {\n    opacity: 0.5;\n  }\n\n  :where([data-control-family=\"toolbar\"][data-slot=\"input\"]) {\n    --_toolbar-input-foreground: var(--foreground);\n    --_toolbar-input-placeholder-foreground: var(--muted-foreground);\n    background-color: transparent;\n    color: var(--_toolbar-input-foreground);\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"toolbar\"][data-slot=\"input\"])::placeholder {\n    color: var(--_toolbar-input-placeholder-foreground);\n  }\n\n  :where([data-control-family=\"toolbar\"][data-slot=\"link\"][data-variant=\"track\"]:is([data-pressed], [data-active])) {\n    background-color: transparent;\n  }\n\n  :where([data-control-family=\"toolbar\"][data-slot=\"link\"][data-variant=\"track\"]) {\n    --_toolbar-track-font-size: var(--text-caption);\n    --_toolbar-track-active-hover-foreground: var(--muted-foreground);\n    font-size: var(--_toolbar-track-font-size);\n  }\n\n  @media (width >= 40rem) {\n    :where([data-control-family=\"toolbar\"][data-slot=\"link\"][data-variant=\"track\"]) {\n      --_toolbar-track-font-size: var(--text-label);\n    }\n  }\n\n  @media (hover: hover) {\n    :where([data-control-family=\"toolbar\"][data-slot=\"link\"][data-variant=\"track\"]:hover) {\n      background-color: transparent;\n    }\n  }\n\n  :where([data-control-family=\"toolbar\"][data-slot=\"root\"][data-variant=\"inverse\"] [data-control-family=\"button\"][data-slot=\"root\"]) {\n    --cui-button-bg: transparent;\n    --cui-button-foreground: oklch(from var(--background) l c h / 0.7);\n    --cui-button-hover-bg: oklch(from var(--background) l c h / 0.1);\n    --cui-button-hover-foreground: var(--background);\n    --cui-button-press-bg: oklch(from var(--background) l c h / 0.12);\n    --cui-button-active-bg: var(--background);\n    --cui-button-active-foreground: var(--foreground);\n    --cui-button-active-hover-bg: var(--background);\n    --cui-button-shadow: 0 0 transparent;\n    --cui-button-active-shadow: 0 0 transparent;\n  }\n\n  :where([data-control-family=\"toolbar\"][data-slot=\"root\"][data-variant=\"inverse\"] [data-slot=\"link\"][data-variant=\"track\"]) {\n    --_toolbar-track-active-hover-foreground: oklch(from var(--background) l c h / 0.7);\n  }\n\n  :where([data-track-hover] [data-control-family=\"toolbar\"][data-slot=\"link\"][data-variant=\"track\"][data-active]) {\n    color: var(--_toolbar-track-active-hover-foreground);\n  }\n\n  :where([data-control-family=\"toolbar\"][data-slot=\"root\"][data-variant=\"inverse\"] [data-slot=\"input\"]) {\n    --_toolbar-input-foreground: var(--background);\n    --_toolbar-input-placeholder-foreground: oklch(from var(--background) l c h / 0.7);\n  }\n\n  :where([data-control-family=\"toolbar\"][data-slot=\"separator\"]) {\n    background-color: var(--cui-toolbar-separator-background);\n  }\n\n  :where([data-control-family=\"toolbar\"][data-slot=\"link\"]) {\n    text-decoration-line: none;\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"toolbar\"][data-slot=\"button\"]) {\n    outline-style: none;\n  }\n}\n\n@property --cui-toolbar-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-toolbar-padding {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-toolbar-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-toolbar-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-toolbar-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-toolbar-shadow {\n  syntax: \"*\";\n  inherits: true;\n}\n\n@property --cui-toolbar-item-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-toolbar-item-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-toolbar-item-shadow {\n  syntax: \"*\";\n  inherits: true;\n}\n\n@property --cui-toolbar-item-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-toolbar-item-hover-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-toolbar-item-hover-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-toolbar-item-active-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-toolbar-item-active-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-toolbar-separator-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/toolbar.tsx",
      "target": "@components/control-ui/ui/toolbar.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { Toolbar as ToolbarPrimitive } from \"@base-ui/react/toolbar\";\nimport type { ComponentProps, CSSProperties } from \"react\";\nimport { controlSize } from \"@/components/control-ui/control-variants\";\nimport type { ToolbarKnobStyle } from \"@/components/control-ui/knob-contracts/toolbar-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\n\nexport type ToolbarVariant = \"default\" | \"inverse\";\n\nexport type ToolbarLinkVariant = \"default\" | \"track\";\n\nexport type ToolbarProps = Omit<ComponentProps<\"div\">, \"style\"> & {\n  orientation?: \"horizontal\" | \"vertical\";\n  variant?: ToolbarVariant;\n  style?: CSSProperties & ToolbarKnobStyle;\n};\n\nexport type ToolbarButtonProps = Omit<ComponentProps<\"button\">, \"style\"> & {\n  iconOnly?: boolean;\n  style?: CSSProperties & ToolbarKnobStyle;\n};\n\nexport type ToolbarLinkProps = Omit<ComponentProps<\"a\">, \"style\"> & {\n  variant?: ToolbarLinkVariant;\n  style?: CSSProperties & ToolbarKnobStyle;\n};\n\nexport type ToolbarGroupProps = ComponentProps<\"div\"> & { style?: CSSProperties & ToolbarKnobStyle };\n\nexport type ToolbarSeparatorProps = Omit<ComponentProps<\"div\">, \"style\"> & {\n  orientation?: \"horizontal\" | \"vertical\";\n  style?: CSSProperties & ToolbarKnobStyle;\n};\n\nexport type ToolbarInputProps = Omit<ComponentProps<\"input\">, \"style\"> & {\n  style?: CSSProperties & ToolbarKnobStyle;\n};\n\n// Button and Link forward Base UI's `render` prop, so composed trigger still receives roving-focus wiring.\n\nexport function Toolbar({ orientation = \"horizontal\", variant = \"default\", className, ...props }: ToolbarProps) {\n  return (\n    <ToolbarPrimitive.Root\n      orientation={orientation}\n      data-control-ui=\"toolbar\"\n      data-control-family=\"toolbar\"\n      data-slot=\"root\"\n      data-variant={variant}\n      className={cn(\"group/toolbar inline-flex gap-1\", orientation === \"vertical\" ? \"flex-col items-stretch\" : \"items-center\", className)}\n      {...props}\n    />\n  );\n}\n\n// `render` is picked straight off Base UI primitive so composed trigger types and merges as Base UI expects\ntype RefinedToolbarButtonProps = ToolbarButtonProps & Pick<ComponentProps<typeof ToolbarPrimitive.Button>, \"render\">;\n\nexport function ToolbarButton({ iconOnly = false, className, ...props }: RefinedToolbarButtonProps) {\n  return (\n    <ToolbarPrimitive.Button\n      data-control-ui=\"toolbar\"\n      data-control-family=\"toolbar\"\n      data-slot=\"button\"\n      data-control=\"true\"\n      data-size=\"sm\"\n      data-icon-only={iconOnly ? \"true\" : undefined}\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center select-none data-[disabled]:pointer-events-none [&_svg]:block [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n        controlSize({ size: \"sm\" }),\n        \"px-2\",\n        iconOnly && \"aspect-square px-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype RefinedToolbarLinkProps = ToolbarLinkProps & Pick<ComponentProps<typeof ToolbarPrimitive.Link>, \"render\">;\n\nexport function ToolbarLink({ variant = \"default\", className, ...props }: RefinedToolbarLinkProps) {\n  return (\n    <ToolbarPrimitive.Link\n      data-control-ui=\"toolbar\"\n      data-control-family=\"toolbar\"\n      data-slot=\"link\"\n      data-control=\"true\"\n      data-size=\"sm\"\n      data-variant={variant}\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center [&_svg]:block [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n        controlSize({ size: \"sm\" }),\n        variant === \"track\" ? \"relative z-[2] gap-1 px-1 sm:px-1.5\" : \"px-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ToolbarGroup({ className, ...props }: ToolbarGroupProps) {\n  return (\n    <ToolbarPrimitive.Group\n      data-control-ui=\"toolbar\"\n      data-control-family=\"toolbar\"\n      data-slot=\"group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ToolbarSeparator({ orientation = \"vertical\", className, ...props }: ToolbarSeparatorProps) {\n  // horizontal toolbar renders vertical separators, hence default\n  return (\n    <ToolbarPrimitive.Separator\n      orientation={orientation}\n      data-control-ui=\"toolbar\"\n      data-control-family=\"toolbar\"\n      data-slot=\"separator\"\n      className={cn(\"shrink-0 self-stretch\", orientation === \"vertical\" ? \"w-px\" : \"h-px w-full\", className)}\n      {...props}\n    />\n  );\n}\n\ntype RefinedToolbarInputProps = ToolbarInputProps & Pick<ComponentProps<typeof ToolbarPrimitive.Input>, \"render\">;\n\nexport function ToolbarInput({ className, ...props }: RefinedToolbarInputProps) {\n  return (\n    <ToolbarPrimitive.Input\n      data-control-ui=\"toolbar\"\n      data-control-family=\"toolbar\"\n      data-slot=\"input\"\n      data-control=\"true\"\n      data-size=\"sm\"\n      className={cn(\"min-w-0\", controlSize({ size: \"sm\" }), \"px-2\", className)}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/toolbar.css\"": {}
  },
  "meta": {}
}