{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "channel-toggle",
  "title": "Channel Toggle",
  "description": "Mute, solo and monitor toggle buttons with their own pressed colours.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@audiocn/use-audio-config"
  ],
  "files": [
    {
      "path": "components/ui/channel-toggle.tsx",
      "content": "\"use client\";\n\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { cva } from \"class-variance-authority\";\nimport type { VariantProps } from \"class-variance-authority\";\n\nimport { useAudioConfig } from \"@/hooks/use-audio-config\";\nimport { cn } from \"@/lib/utils\";\n\nconst channelToggleVariants = cva(\n  \"group/channel-toggle focus-visible:ring-ring/30 inline-flex shrink-0 items-center justify-center gap-1 rounded-lg text-xs font-semibold whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      tone: \"neutral\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-7 min-w-7 px-1.5\",\n        icon: \"size-7\",\n        lg: \"h-8 min-w-8 px-2\",\n        sm: \"h-6 min-w-6 px-1\",\n      },\n      tone: {\n        monitor:\n          \"data-pressed:border-channel-monitor/40 data-pressed:bg-channel-monitor/15 data-pressed:text-channel-monitor-foreground\",\n        mute: \"data-pressed:border-channel-mute/40 data-pressed:bg-channel-mute/15 data-pressed:text-channel-mute-foreground\",\n        neutral: \"data-pressed:bg-foreground data-pressed:text-background\",\n        solo: \"data-pressed:border-channel-solo/50 data-pressed:bg-channel-solo/20 data-pressed:text-channel-solo-foreground\",\n      },\n      variant: {\n        default: \"bg-muted text-muted-foreground hover:text-foreground\",\n        ghost: \"text-muted-foreground hover:bg-muted hover:text-foreground\",\n        outline:\n          \"border-border text-muted-foreground hover:bg-muted hover:text-foreground border bg-transparent\",\n      },\n    },\n  }\n);\n\nexport type ChannelToggleProps = TogglePrimitive.Props &\n  VariantProps<typeof channelToggleVariants>;\n\nexport const ChannelToggle = ({\n  className,\n  tone = \"neutral\",\n  variant = \"default\",\n  size = \"default\",\n  disabled,\n  ...props\n}: ChannelToggleProps) => {\n  const config = useAudioConfig();\n  return (\n    <TogglePrimitive\n      className={cn(channelToggleVariants({ size, tone, variant }), className)}\n      data-slot=\"channel-toggle\"\n      data-tone={tone}\n      disabled={disabled ?? config.disabled}\n      {...props}\n    />\n  );\n};\n\nexport type ChannelTogglePresetProps = Omit<ChannelToggleProps, \"tone\">;\n\nexport const MuteToggle = (props: ChannelTogglePresetProps) => (\n  <ChannelToggle\n    aria-label=\"Mute\"\n    data-slot=\"mute-toggle\"\n    tone=\"mute\"\n    {...props}\n  />\n);\n\nexport const SoloToggle = (props: ChannelTogglePresetProps) => (\n  <ChannelToggle\n    aria-label=\"Solo\"\n    data-slot=\"solo-toggle\"\n    tone=\"solo\"\n    {...props}\n  />\n);\n\nexport const MonitorToggle = (props: ChannelTogglePresetProps) => (\n  <ChannelToggle\n    aria-label=\"Monitor\"\n    data-slot=\"monitor-toggle\"\n    tone=\"monitor\"\n    {...props}\n  />\n);\n\nexport { channelToggleVariants };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}