{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toolbar",
  "title": "Toolbar",
  "description": "A toolbar component.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@cubby-ui/button",
    "@cubby-ui/elevated"
  ],
  "files": [
    {
      "path": "registry/default/toolbar/toolbar.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Toolbar as BaseToolbar } from \"@base-ui/react/toolbar\";\n\nimport { ButtonProps, buttonVariants } from \"@/registry/default/button/button\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  solidSurface,\n  type SurfaceLevel,\n} from \"@/registry/default/lib/elevated\";\n\nconst toolbarVariants = cva(\n  \"flex items-center gap-1 rounded-lg p-1 data-[orientation=vertical]:flex-col data-disabled:pointer-events-none data-disabled:opacity-60\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        outline: \"bg-transparent border border-border\",\n        ghost: \"bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\ntype ToolbarProps = React.ComponentProps<typeof BaseToolbar.Root> &\n  VariantProps<typeof toolbarVariants> & {\n    /** Surface elevation level for the `default` variant (1-8). Defaults to 3. */\n    level?: SurfaceLevel;\n    /** Shadow weight (1-8). Defaults to 3. */\n    shadowLevel?: SurfaceLevel;\n  };\n\nfunction Toolbar({\n  className,\n  variant = \"default\",\n  level = 3,\n  shadowLevel = 3,\n  ...props\n}: ToolbarProps) {\n  return (\n    <BaseToolbar.Root\n      data-slot=\"toolbar\"\n      data-level={variant === \"default\" ? level : undefined}\n      className={cn(\n        toolbarVariants({ variant }),\n        variant === \"default\" && solidSurface(level, shadowLevel),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ToolbarButton({\n  className,\n  variant = \"ghost\",\n  size = \"icon_sm\",\n  ...props\n}: React.ComponentProps<typeof BaseToolbar.Button> & ButtonProps) {\n  return (\n    <BaseToolbar.Button\n      data-slot=\"toolbar-button\"\n      className={cn(\n        buttonVariants({ variant, size }),\n        \"shrink-0 rounded-md\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ToolbarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseToolbar.Separator>) {\n  return (\n    <BaseToolbar.Separator\n      data-slot=\"toolbar-separator\"\n      className={cn(\n        \"bg-border shrink-0\",\n        // Default: vertical line for horizontal toolbar\n        \"h-6 w-px\",\n        // When inside vertical toolbar: horizontal line\n        \"in-data-[orientation=vertical]:h-px in-data-[orientation=vertical]:w-6\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ToolbarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseToolbar.Input>) {\n  return (\n    <BaseToolbar.Input\n      data-slot=\"toolbar-input\"\n      className={cn(\n        \"placeholder:text-muted-foreground bg-input border-border\",\n        \"flex h-8 min-w-0 rounded-md border bg-clip-padding px-2 py-1 text-sm\",\n        \"transition-colors duration-100\",\n        \"focus-visible:outline-ring/50 outline-0 outline-offset-0 outline-transparent\",\n        \"transition-[outline-width,outline-offset,outline-color] duration-100 ease-out\",\n        \"outline-solid focus-visible:outline-2 focus-visible:outline-offset-2\",\n        \"data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-60\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ToolbarGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseToolbar.Group>) {\n  return (\n    <BaseToolbar.Group\n      data-slot=\"toolbar-group\"\n      className={cn(\n        \"flex items-center gap-0.5\",\n        \"data-[orientation=vertical]:flex-col\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-60\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ToolbarLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseToolbar.Link>) {\n  return (\n    <BaseToolbar.Link\n      data-slot=\"toolbar-link\"\n      className={cn(\n        \"text-muted-foreground inline-flex h-8 shrink-0 items-center gap-2 rounded-md px-2.5 text-sm no-underline\",\n        \"hover:text-foreground hover:bg-surface-hover\",\n        \"transition-[color,background-color,outline-width,outline-offset,outline-color] duration-100 ease-out\",\n        \"focus-visible:outline-ring/50 outline-0 outline-offset-0 outline-transparent\",\n        \"outline-solid focus-visible:outline-2 focus-visible:outline-offset-2\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Toolbar,\n  ToolbarButton,\n  ToolbarSeparator,\n  ToolbarInput,\n  ToolbarGroup,\n  ToolbarLink,\n  toolbarVariants,\n};\n\nexport type { ToolbarProps };\n",
      "type": "registry:ui",
      "target": "components/ui/cubby-ui/toolbar.tsx"
    }
  ],
  "type": "registry:ui"
}