{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"tool-toggle","type":"registry:ui","title":"Tool Toggle","description":"Switches for the tools a model may use — web search, code execution, file access — with unmistakable on and off states.","author":"Scrim UI (https://scrimui.dev)","categories":["model-settings"],"docs":"https://scrimui.dev/components/tool-toggle","dependencies":[],"registryDependencies":[],"files":[{"path":"src/showcase/tool-toggle/tool-toggle.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\n\n/* ------------------------------------------------------------------ */\n/* Types                                                               */\n/* ------------------------------------------------------------------ */\n\nexport type ToolSetting = {\n  id: string;\n  name: string;\n  description: string;\n  enabled: boolean;\n  disabled?: boolean;\n  icon?: React.ReactNode;\n};\n\nexport type ToolToggleProps = {\n  tools: ToolSetting[];\n  title?: string;\n  description?: string;\n  onToggle?: (id: string, enabled: boolean) => void;\n  className?: string;\n};\n\n/* ------------------------------------------------------------------ */\n/* ToolToggle                                                          */\n/* ------------------------------------------------------------------ */\n\nexport function ToolToggle({\n  tools,\n  title = \"Tools\",\n  description = \"What the assistant is allowed to use\",\n  onToggle,\n  className = \"\",\n}: ToolToggleProps) {\n  /* Prefix for the per-row label/description ids the switches point at. */\n  const uid = React.useId();\n\n  return (\n    <div className={`rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900 ${className}`}>\n      <div className=\"border-b border-zinc-100 px-4 py-3 dark:border-zinc-800\">\n        <p className=\"text-sm font-medium text-zinc-900 dark:text-zinc-100\">{title}</p>\n        <p className=\"mt-0.5 text-xs text-zinc-500 dark:text-zinc-400\">{description}</p>\n      </div>\n\n      <ul className=\"divide-y divide-zinc-100 dark:divide-zinc-800\">\n        {tools.map((tool) => (\n          <li key={tool.id} className=\"flex items-center gap-3 px-4 py-3\">\n            {tool.icon && (\n              <span className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400\">\n                {tool.icon}\n              </span>\n            )}\n            <div className=\"min-w-0 flex-1\">\n              <p\n                id={`${uid}-${tool.id}-name`}\n                className=\"text-[13px] font-medium text-zinc-800 dark:text-zinc-200\"\n              >\n                {tool.name}\n              </p>\n              <p\n                id={`${uid}-${tool.id}-desc`}\n                className=\"mt-0.5 text-xs text-zinc-500 dark:text-zinc-400\"\n              >\n                {tool.description}\n              </p>\n            </div>\n            {/* The switch is a bare coloured pill, so without these it has no\n                accessible name at all — a screen reader announces \"switch, on\"\n                with no clue which tool it governs. Pointing at the visible\n                label rather than duplicating the string in an aria-label keeps\n                the two from drifting apart. */}\n            <button\n              type=\"button\"\n              role=\"switch\"\n              aria-checked={tool.enabled}\n              aria-disabled={tool.disabled}\n              aria-labelledby={`${uid}-${tool.id}-name`}\n              aria-describedby={`${uid}-${tool.id}-desc`}\n              onClick={() => !tool.disabled && onToggle?.(tool.id, !tool.enabled)}\n              className={`relative h-5 w-9 shrink-0 rounded-full transition-colors ${\n                tool.enabled ? \"bg-violet-600\" : \"bg-zinc-200 dark:bg-zinc-700\"\n              } ${tool.disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\"}`}\n            >\n              <span\n                className={`absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${\n                  tool.enabled ? \"translate-x-4\" : \"\"\n                }`}\n              />\n            </button>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n","type":"registry:ui","target":"components/ui/tool-toggle.tsx"}]}