{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "language-picker",
  "type": "registry:ui",
  "title": "Language picker",
  "description": "A grid of language options exposed as an accessible listbox, with the selected language outlined in the accent color. Plug it into locale or profile settings.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/language-picker.tsx",
      "type": "registry:ui",
      "target": "components/ui/language-picker.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nconst LANGS = [\n  { id: \"en\", label: \"English\" },\n  { id: \"es\", label: \"Español\" },\n  { id: \"de\", label: \"Deutsch\" },\n  { id: \"ja\", label: \"日本語\" },\n]\n\nfunction LanguagePicker({\n  value = \"en\",\n  onChange,\n  className,\n}: {\n  value?: string\n  onChange?: (id: string) => void\n  className?: string\n}) {\n  return (\n    <div data-slot=\"language-picker\" role=\"listbox\" aria-label=\"Language\" className={cn(\"grid gap-1 sm:grid-cols-2\", className)}>\n      {LANGS.map((l) => (\n        <button\n          key={l.id}\n          type=\"button\"\n          role=\"option\"\n          aria-selected={value === l.id}\n          onClick={() => onChange?.(l.id)}\n          className={cn(\n            \"rounded-lg border px-3 py-2 text-left text-sm text-fg outline-none focus-visible:ring-2 focus-visible:ring-accent\",\n            value === l.id ? \"border-accent bg-surface shadow-[inset_0_0_0_1px_var(--accent)]\" : \"border-border bg-surface hover:border-fg-subtle\"\n          )}\n        >\n          {l.label}\n        </button>\n      ))}\n    </div>\n  )\n}\nexport { LanguagePicker }\n"
    }
  ]
}