{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toolbar",
  "title": "Toolbar",
  "description": "Dense soft-rect toolbar chrome with Motion press feedback.",
  "dependencies": [
    "@base-ui/react",
    "motion"
  ],
  "registryDependencies": [
    "@atroui/utils",
    "@atroui/motion"
  ],
  "files": [
    {
      "path": "registry/default/ui/toolbar.tsx",
      "content": "\"use client\"\n\nimport { Toolbar as ToolbarPrimitive } from \"@base-ui/react/toolbar\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { controlGestures, pressTween } from \"@/lib/motion\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Dense soft-rect toolbar chrome — Mira muted track, press ≤100ms.\n * Family Values: one chrome surface; pressed states stay quiet (no shared\n * layoutId — toolbars often allow multiple pressed peers).\n */\nfunction Toolbar({\n  className,\n  style,\n  ...props\n}: ToolbarPrimitive.Root.Props) {\n  return (\n    <ToolbarPrimitive.Root\n      data-slot=\"toolbar\"\n      className={cn(\n        \"group/toolbar inline-flex w-fit items-center gap-0.5 rounded-[var(--radius)] border border-border-subtle bg-muted/40 p-0.5\",\n        \"data-[orientation=vertical]:flex-col\",\n        className\n      )}\n      style={{ borderRadius: \"var(--radius)\", ...style }}\n      {...props}\n    />\n  )\n}\n\nfunction ToolbarGroup({ className, ...props }: ToolbarPrimitive.Group.Props) {\n  return (\n    <ToolbarPrimitive.Group\n      data-slot=\"toolbar-group\"\n      className={cn(\n        \"flex items-center gap-0.5 group-data-[orientation=vertical]/toolbar:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst toolbarControlClass =\n  \"inline-flex h-7 shrink-0 items-center justify-center gap-1 rounded-[calc(var(--radius)-2px)] px-2 text-[0.8rem] font-medium tracking-[-0.01em] text-muted-foreground outline-none transition-[background-color,color,box-shadow] duration-150 ease-[cubic-bezier(0.16,1,0.3,1)] hover:bg-background hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/20 data-disabled:pointer-events-none data-disabled:opacity-50 data-pressed:bg-background data-pressed:text-foreground aria-pressed:bg-background aria-pressed:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 motion-reduce:transition-none\"\n\nfunction ToolbarButton({\n  className,\n  render,\n  ...props\n}: ToolbarPrimitive.Button.Props) {\n  const reduce = useReducedMotion()\n  const gestures = controlGestures(reduce)\n\n  return (\n    <ToolbarPrimitive.Button\n      data-slot=\"toolbar-button\"\n      className={cn(toolbarControlClass, className)}\n      render={\n        render ?? (\n          <motion.button\n            whileHover={gestures.whileHover}\n            whileFocus={gestures.whileFocus}\n            whileTap={\n              reduce ? undefined : { scale: 0.97, y: 0.5, transition: pressTween }\n            }\n          />\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nfunction ToolbarLink({ className, ...props }: ToolbarPrimitive.Link.Props) {\n  return (\n    <ToolbarPrimitive.Link\n      data-slot=\"toolbar-link\"\n      className={cn(toolbarControlClass, \"underline-offset-4 hover:underline\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ToolbarInput({ className, ...props }: ToolbarPrimitive.Input.Props) {\n  return (\n    <ToolbarPrimitive.Input\n      data-slot=\"toolbar-input\"\n      className={cn(\n        \"h-7 min-w-24 rounded-[calc(var(--radius)-2px)] border border-transparent bg-background px-2 text-[0.8rem] text-foreground outline-none\",\n        \"placeholder:text-muted-foreground\",\n        \"focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/20\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ToolbarSeparator({\n  className,\n  ...props\n}: ToolbarPrimitive.Separator.Props) {\n  return (\n    <ToolbarPrimitive.Separator\n      data-slot=\"toolbar-separator\"\n      className={cn(\n        \"bg-border-subtle\",\n        \"data-[orientation=vertical]:mx-0.5 data-[orientation=vertical]:h-4 data-[orientation=vertical]:w-px\",\n        \"data-[orientation=horizontal]:my-0.5 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Toolbar,\n  ToolbarButton,\n  ToolbarGroup,\n  ToolbarInput,\n  ToolbarLink,\n  ToolbarSeparator,\n}\n",
      "type": "registry:ui",
      "target": "components/ui/toolbar.tsx"
    }
  ],
  "type": "registry:ui"
}