{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "settings-4",
  "title": "Preferences Dialog",
  "description": "Preferences Dialog for Settings.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "avatar",
    "button",
    "dialog",
    "label",
    "separator",
    "switch",
    "toggle-group"
  ],
  "files": [
    {
      "path": "registry/intents/account/settings/settings-4.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { Monitor, Moon, Settings2, Sun } from 'lucide-react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Button } from '@/components/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/components/ui/dialog'\nimport { Label } from '@/components/ui/label'\nimport { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\n\nexport function Settings4() {\n  const [theme, setTheme] = useState('system')\n  const [sound, setSound] = useState(true)\n  const [compact, setCompact] = useState(false)\n\n  return (\n    <div className=\"flex w-full max-w-sm items-center justify-between gap-4 rounded-lg border p-3\">\n      <div className=\"flex items-center gap-3\">\n        <Avatar className=\"size-9\">\n          <AvatarImage\n            src=\"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&fit=crop&crop=faces\"\n            alt=\"Ada Lovelace\"\n          />\n          <AvatarFallback className=\"bg-muted\">AL</AvatarFallback>\n        </Avatar>\n        <div className=\"flex flex-col\">\n          <span className=\"text-sm font-medium\">Ada Lovelace</span>\n          <span className=\"text-muted-foreground text-xs\">ada@acme.com</span>\n        </div>\n      </div>\n\n      <Dialog>\n        <DialogTrigger\n          render={\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Preferences\">\n              <Settings2 className=\"size-4\" />\n            </Button>\n          }\n        />\n        <DialogContent className=\"sm:max-w-sm\">\n          <DialogHeader>\n            <DialogTitle>Preferences</DialogTitle>\n            <DialogDescription>\n              Quick settings without leaving the page.\n            </DialogDescription>\n          </DialogHeader>\n\n          <div className=\"flex flex-col gap-5 py-2\">\n            <div className=\"flex flex-col gap-2\">\n              <Label className=\"text-xs\">Theme</Label>\n              <ToggleGroup\n                value={theme ? [theme] : []}\n                onValueChange={(v) => v[0] && setTheme(v[0])}\n                variant=\"outline\"\n                className=\"w-full\"\n              >\n                <ToggleGroupItem value=\"light\" className=\"flex-1\">\n                  <Sun className=\"size-4\" />\n                  Light\n                </ToggleGroupItem>\n                <ToggleGroupItem value=\"dark\" className=\"flex-1\">\n                  <Moon className=\"size-4\" />\n                  Dark\n                </ToggleGroupItem>\n                <ToggleGroupItem value=\"system\" className=\"flex-1\">\n                  <Monitor className=\"size-4\" />\n                  Auto\n                </ToggleGroupItem>\n              </ToggleGroup>\n            </div>\n\n            <Separator />\n\n            <div className=\"flex items-center justify-between\">\n              <Label htmlFor=\"pd-sound\" className=\"font-normal\">\n                Sound effects\n              </Label>\n              <Switch\n                id=\"pd-sound\"\n                checked={sound}\n                onCheckedChange={setSound}\n              />\n            </div>\n            <div className=\"flex items-center justify-between\">\n              <Label htmlFor=\"pd-compact\" className=\"font-normal\">\n                Compact mode\n              </Label>\n              <Switch\n                id=\"pd-compact\"\n                checked={compact}\n                onCheckedChange={setCompact}\n              />\n            </div>\n          </div>\n\n          <DialogFooter>\n            <Button className=\"w-full\">Done</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/intent/settings/settings-4.tsx"
    }
  ],
  "type": "registry:block"
}