{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "toolbar",
  "title": "toolbar",
  "description": "toolbar",
  "dependencies": [
    "react-aria-components",
    "cn"
  ],
  "registryDependencies": [
    "https://intentui.com/r/primitive",
    "https://intentui.com/r/separator",
    "https://intentui.com/r/toggle"
  ],
  "files": [
    {
      "path": "src/components/ui/toolbar.tsx",
      "content": "\"use client\"\n\nimport { createContext, use } from \"react\"\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport { Group, type GroupProps } from \"react-aria-components/Group\"\nimport type { SeparatorProps } from \"react-aria-components/Separator\"\nimport {\n  Toolbar as ToolbarPrimitive,\n  type ToolbarProps as ToolbarPrimitiveProps,\n} from \"react-aria-components/Toolbar\"\nimport { cn } from \"cn\"\nimport { cx } from \"@/lib/primitive\"\nimport { Separator } from \"./separator\"\nimport { Toggle, type ToggleProps } from \"./toggle\"\n\nconst ToolbarContext = createContext<ToolbarProps>({\n  orientation: \"horizontal\",\n  isCircle: false,\n})\n\nexport interface ToolbarProps extends ToolbarPrimitiveProps {\n  isCircle?: boolean\n}\n\nexport function Toolbar({\n  orientation = \"horizontal\",\n  isCircle,\n  className,\n  ...props\n}: ToolbarProps) {\n  return (\n    <ToolbarContext value={{ orientation, isCircle }}>\n      <ToolbarPrimitive\n        orientation={orientation}\n        {...props}\n        className={composeRenderProps(className, (className, { orientation }) =>\n          cn(\n            \"group scrollbar-none inset-ring inset-ring-border inline-flex flex-row gap-1.5 bg-overlay p-1.5 [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden\",\n            isCircle ? \"rounded-full\" : \"rounded-lg\",\n            orientation === \"horizontal\"\n              ? \"scrollbar-none flex-row items-center [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden\"\n              : \"flex-col items-start\",\n            className\n          )\n        )}\n      />\n    </ToolbarContext>\n  )\n}\n\nconst ToolbarGroupContext = createContext<{ isDisabled?: boolean; isCircle?: boolean }>({})\n\nexport interface ToolbarGroupProps extends GroupProps {}\nexport function ToolbarGroup({ isDisabled, className, ...props }: ToolbarGroupProps) {\n  return (\n    <ToolbarGroupContext value={{ isDisabled }}>\n      <Group\n        className={cx(\n          \"flex gap-1.5 group-orientation-vertical:flex-col group-orientation-vertical:items-start group-orientation-horizontal:items-center\",\n          className\n        )}\n        {...props}\n      >\n        {props.children}\n      </Group>\n    </ToolbarGroupContext>\n  )\n}\n\nexport interface ToggleItemProps extends ToggleProps {}\n\nexport function ToolbarItem({\n  isDisabled,\n  isCircle,\n  size = \"sm\",\n  intent = \"outline\",\n  ref,\n  className,\n  ...props\n}: ToggleItemProps) {\n  const context = use(ToolbarGroupContext)\n  const { isCircle: contextCircle } = use(ToolbarContext)\n  const effectiveIsDisabled = isDisabled || context.isDisabled\n  const effectiveIsCircle = isCircle || contextCircle\n  return (\n    <Toggle\n      intent={intent}\n      size={size}\n      ref={ref}\n      data-slot=\"toolbar-item\"\n      className={cx(\n        effectiveIsCircle ? \"rounded-full\" : \"rounded-[calc(var(--radius-lg)-1px)]\",\n        className\n      )}\n      isDisabled={effectiveIsDisabled}\n      {...props}\n    />\n  )\n}\nexport type ToolbarSeparatorProps = SeparatorProps\nexport function ToolbarSeparator({ className, ...props }: ToolbarSeparatorProps) {\n  const { orientation } = use(ToolbarContext)\n  const reverseOrientation = orientation === \"vertical\" ? \"horizontal\" : \"vertical\"\n  return (\n    <Separator\n      orientation={reverseOrientation}\n      className={cn(reverseOrientation === \"vertical\" ? \"mx-0.5 h-6\" : \"my-0.5 w-8\", className)}\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "color-overlay": "var(--overlay)"
    },
    "light": {
      "overlay": "oklch(1 0 0)"
    },
    "dark": {
      "overlay": "oklch(0.210 0.006 285.885)"
    }
  },
  "type": "registry:ui"
}