{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mixer-strip",
  "title": "Mixer strip",
  "description": "One channel of a mixing console per agent or source: its name, mute and solo keys, and a motorized fader that an orchestrator can move and you can take. For balancing subagents, models or data sources.",
  "dependencies": [
    "@base-ui/react",
    "cn"
  ],
  "registryDependencies": [
    "https://bevel-ui.vercel.app/r/bevel.json",
    "https://bevel-ui.vercel.app/r/motorized-fader.json"
  ],
  "files": [
    {
      "path": "registry/bevel/ui/mixer-strip.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Toggle } from \"@base-ui/react/toggle\"\nimport { cn } from \"cn\"\nimport { MotorizedFader, type MotorizedFaderProps } from \"@/components/ui/motorized-fader\"\n\ntype MixerStripContextValue = { name: string; muted: boolean }\n\nconst MixerStripContext = React.createContext<MixerStripContextValue | null>(null)\n\nfunction useMixerStrip() {\n  const context = React.useContext(MixerStripContext)\n  if (!context) throw new Error(\"MixerStrip parts must be inside <MixerStrip>\")\n  return context\n}\n\n/** A row of strips: one console. */\nfunction Mixer({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"mixer\"\n      className={cn(\"flex max-w-full gap-1 overflow-x-auto p-1\", className)}\n      {...props}\n    />\n  )\n}\n\ntype MixerStripProps = React.ComponentProps<\"div\"> & {\n  /** The channel's name: an agent, a source, a model. Names the group and its controls. */\n  name: string\n  /** Dims the strip. Pass the same value as MixerStripMute's pressed. */\n  muted?: boolean\n}\n\n/** One channel: a name, mute and solo, and a fader. */\nfunction MixerStrip({ className, name, muted = false, children, ...props }: MixerStripProps) {\n  return (\n    <MixerStripContext value={{ name, muted }}>\n      <div\n        role=\"group\"\n        aria-label={name}\n        data-slot=\"mixer-strip\"\n        data-muted={muted ? \"\" : undefined}\n        className={cn(\n          \"bevel-metal flex w-20 shrink-0 flex-col items-center gap-2 rounded-(--bevel-radius-sm) px-2 py-3\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </MixerStripContext>\n  )\n}\n\n/** The scribble strip: the channel's name, lit. */\nfunction MixerStripName({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { name } = useMixerStrip()\n  return (\n    <p\n      aria-hidden\n      data-slot=\"mixer-strip-name\"\n      className={cn(\n        \"w-full truncate rounded-(--bevel-radius-xs) bg-(--mixer-strip-scribble) px-1 py-1 text-center font-mono text-xs text-(--mixer-strip-scribble-foreground) shadow-(--bevel-depth-recessed)\",\n        \"transition-opacity duration-(--bevel-duration-small) in-data-muted:opacity-40 motion-reduce:transition-none\",\n        className\n      )}\n      {...props}\n    >\n      {name}\n    </p>\n  )\n}\n\nconst keyClass = cn(\n  \"bevel-raised h-7 w-full rounded-(--bevel-radius-xs) text-(length:--bevel-fine) font-black tracking-(--bevel-tracking-label) text-(--bevel-ivory) uppercase outline-none\",\n  \"transition-[translate,box-shadow] duration-(--bevel-duration-press) ease-(--bevel-ease-out) motion-reduce:transition-none\",\n  \"data-pressed:translate-y-px data-pressed:text-(--mixer-strip-lit-foreground)\",\n  \"focus-visible:ring-3 focus-visible:ring-ring/60 data-disabled:opacity-50\"\n)\n\n/** Mute: a toggle, named “Mute <name>”. */\nfunction MixerStripMute({ className, ...props }: Toggle.Props) {\n  const { name } = useMixerStrip()\n  return (\n    <Toggle aria-label={`Mute ${name}`} data-slot=\"mixer-strip-mute\" className={cn(keyClass, className)} {...props}>\n      M\n    </Toggle>\n  )\n}\n\n/** Solo: a toggle, named “Solo <name>”. What solo silences is up to you. */\nfunction MixerStripSolo({ className, ...props }: Toggle.Props) {\n  const { name } = useMixerStrip()\n  return (\n    <Toggle aria-label={`Solo ${name}`} data-slot=\"mixer-strip-solo\" className={cn(keyClass, className)} {...props}>\n      S\n    </Toggle>\n  )\n}\n\n/** The channel's motorized fader, named “<name> level”. */\nfunction MixerStripFader({ className, ...props }: MotorizedFaderProps) {\n  const { name } = useMixerStrip()\n  return (\n    <MotorizedFader\n      aria-label={`${name} level`}\n      className={cn(\"transition-opacity duration-(--bevel-duration-small) in-data-muted:opacity-60 motion-reduce:transition-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Mixer, MixerStrip, MixerStripName, MixerStripMute, MixerStripSolo, MixerStripFader }\nexport type { MixerStripProps }\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    ":root": {
      "--mixer-strip-panel": "oklch(0.32 0.01 260)",
      "--mixer-strip-panel-edge": "oklch(0.22 0.01 260)",
      "--mixer-strip-key": "oklch(0.42 0.01 260)",
      "--mixer-strip-mute": "oklch(0.62 0.22 27)",
      "--mixer-strip-solo": "oklch(0.84 0.16 90)",
      "--mixer-strip-lit-foreground": "oklch(0.2 0.02 60)",
      "--mixer-strip-scribble": "oklch(0.2 0.02 230)",
      "--mixer-strip-scribble-foreground": "oklch(0.88 0.08 230)"
    },
    "[data-slot=\"mixer-strip\"]": {
      "--bevel-material": "var(--mixer-strip-panel)",
      "--bevel-material-edge": "var(--mixer-strip-panel-edge)"
    },
    "[data-slot=\"mixer-strip-mute\"], [data-slot=\"mixer-strip-solo\"]": {
      "--bevel-material": "var(--mixer-strip-key)"
    },
    "[data-slot=\"mixer-strip-mute\"][data-pressed]": {
      "--bevel-material": "var(--mixer-strip-mute)"
    },
    "[data-slot=\"mixer-strip-solo\"][data-pressed]": {
      "--bevel-material": "var(--mixer-strip-solo)"
    }
  },
  "categories": [
    "instruments"
  ],
  "type": "registry:ui"
}