{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <edu@smoothui.dev>","css":{},"dependencies":["@base-ui/react"],"description":"Accessible Toolbar for SmoothUI with Base UI / Radix twins for grouped controls.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { Toolbar as ToolbarPrimitive } from \"@base-ui/react/toolbar\";\nimport { cn } from \"@/lib/utils\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nexport type ToolbarOrientation = \"horizontal\" | \"vertical\";\n\nexport interface ToolbarProps {\n  /** Toolbar content */\n  children?: ReactNode;\n  /** Optional CSS class names */\n  className?: string;\n  /** Disable all items */\n  disabled?: boolean;\n  /** Layout direction */\n  orientation?: ToolbarOrientation;\n}\n\nexport type ToolbarRootProps = Omit<\n  ComponentProps<typeof ToolbarPrimitive.Root>,\n  \"className\"\n> & { className?: string };\nexport type ToolbarGroupProps = Omit<\n  ComponentProps<typeof ToolbarPrimitive.Group>,\n  \"className\"\n> & { className?: string };\nexport type ToolbarButtonProps = Omit<\n  ComponentProps<typeof ToolbarPrimitive.Button>,\n  \"className\"\n> & { className?: string };\nexport type ToolbarLinkProps = Omit<\n  ComponentProps<typeof ToolbarPrimitive.Link>,\n  \"className\"\n> & { className?: string };\nexport type ToolbarSeparatorProps = Omit<\n  ComponentProps<typeof ToolbarPrimitive.Separator>,\n  \"className\"\n> & { className?: string };\nexport type ToolbarInputProps = Omit<\n  ComponentProps<typeof ToolbarPrimitive.Input>,\n  \"className\"\n> & { className?: string };\n\nconst BUTTON_CLASS =\n  \"inline-flex h-8 shrink-0 select-none items-center justify-center gap-1.5 rounded-md px-2.5 font-medium text-sm outline-none transition-colors hover:bg-muted focus-ring data-disabled:pointer-events-none data-disabled:opacity-50 data-pressed:bg-background data-pressed:shadow-sm dark:data-pressed:bg-foreground/15\";\n\nexport const ToolbarRoot = ({ className, ...props }: ToolbarRootProps) => (\n  <ToolbarPrimitive.Root\n    className={cn(\n      \"inline-flex items-center gap-1 rounded-xl border border-border bg-background/60 p-1 shadow-xs\",\n      \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch\",\n      className\n    )}\n    data-slot=\"toolbar\"\n    {...props}\n  />\n);\n\nexport const ToolbarGroup = ({ className, ...props }: ToolbarGroupProps) => (\n  <ToolbarPrimitive.Group\n    className={cn(\"flex items-center gap-0.5\", className)}\n    data-slot=\"toolbar-group\"\n    {...props}\n  />\n);\n\nexport const ToolbarButton = ({ className, ...props }: ToolbarButtonProps) => (\n  <ToolbarPrimitive.Button\n    className={cn(BUTTON_CLASS, className)}\n    data-slot=\"toolbar-button\"\n    {...props}\n  />\n);\n\nexport const ToolbarLink = ({ className, ...props }: ToolbarLinkProps) => (\n  <ToolbarPrimitive.Link\n    className={cn(\n      \"focus-ring px-2.5 font-medium text-muted-foreground text-xs outline-none transition-colors hover:text-foreground\",\n      className\n    )}\n    data-slot=\"toolbar-link\"\n    {...props}\n  />\n);\n\nexport const ToolbarSeparator = ({\n  className,\n  ...props\n}: ToolbarSeparatorProps) => (\n  <ToolbarPrimitive.Separator\n    className={cn(\n      \"mx-0.5 w-px self-stretch bg-foreground/25 data-[orientation=horizontal]:my-0.5 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full\",\n      className\n    )}\n    data-slot=\"toolbar-separator\"\n    {...props}\n  />\n);\n\nexport const ToolbarInput = ({ className, ...props }: ToolbarInputProps) => (\n  <ToolbarPrimitive.Input\n    className={cn(\n      \"focus-ring h-8 min-w-24 rounded-md border border-foreground/25 bg-background px-2 text-sm outline-none focus-visible:border-ring disabled:opacity-50\",\n      className\n    )}\n    data-slot=\"toolbar-input\"\n    {...props}\n  />\n);\n\n/**\n * SmoothUI Toolbar — Base UI twin (default).\n * Convenience root; use compounds for groups, buttons, links, separators.\n */\nexport default function Toolbar({\n  children,\n  className,\n  disabled,\n  orientation = \"horizontal\",\n}: ToolbarProps) {\n  return (\n    <ToolbarRoot\n      className={className}\n      disabled={disabled}\n      orientation={orientation}\n    >\n      {children}\n    </ToolbarRoot>\n  );\n}\n","path":"index.tsx","target":"components/smoothui/toolbar/index.tsx","type":"registry:ui"}],"name":"toolbar","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Toolbar","type":"registry:ui"}