{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "preferences-01",
  "title": "Preferences",
  "description": "An app's Settings window: a tabs switches between General, Appearance and Notifications, each a grouped form of switches, pop-up buttons and a slider.",
  "registryDependencies": [
    "@cupertinoui/macos-theme",
    "@cupertinoui/grouped-form",
    "@cupertinoui/select",
    "@cupertinoui/slider",
    "@cupertinoui/switch",
    "@cupertinoui/tabs",
    "@cupertinoui/window"
  ],
  "files": [
    {
      "path": "registry/macos/blocks/preferences-01/preferences-01.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  GroupedForm,\n  GroupedFormGroup,\n  GroupedFormRow,\n  GroupedFormRowControl,\n  GroupedFormRowDescription,\n  GroupedFormRowLabel,\n  GroupedFormRowTitle,\n  GroupedFormSection,\n} from \"@/registry/macos/ui/grouped-form\"\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/registry/macos/ui/select\"\nimport { Slider } from \"@/registry/macos/ui/slider\"\nimport { Switch } from \"@/registry/macos/ui/switch\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/registry/macos/ui/tabs\"\nimport {\n  Window,\n  WindowContent,\n  WindowControls,\n  WindowMain,\n  WindowTitle,\n  WindowTitlebar,\n} from \"@/registry/macos/ui/window\"\n\n// A pop-up button in a settings row.\nfunction Choice({ label, items, defaultValue }: { label: string; items: Record<string, string>; defaultValue: string }) {\n  return (\n    <Select defaultValue={defaultValue} items={items}>\n      <SelectTrigger variant=\"borderless\" aria-label={label}>\n        <SelectValue />\n      </SelectTrigger>\n      <SelectContent>\n        {Object.entries(items).map(([value, text]) => (\n          <SelectItem key={value} value={value}>\n            {text}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  )\n}\n\n// A settings row with a title, an optional description and a control.\nfunction Row({ title, description, children }: { title: string; description?: string; children: React.ReactNode }) {\n  return (\n    <GroupedFormRow className={cn(description && \"items-start\")}>\n      {description ? (\n        <GroupedFormRowLabel>\n          <GroupedFormRowTitle>{title}</GroupedFormRowTitle>\n          <GroupedFormRowDescription>{description}</GroupedFormRowDescription>\n        </GroupedFormRowLabel>\n      ) : (\n        <GroupedFormRowTitle>{title}</GroupedFormRowTitle>\n      )}\n      <GroupedFormRowControl>{children}</GroupedFormRowControl>\n    </GroupedFormRow>\n  )\n}\n\n// An app's Settings window: a tabs picks General, Appearance\n// or Notifications, each a grouped form of switches, pop-up buttons and a\n// slider. Replace the rows with your own settings.\nexport function Preferences01({ className, ...props }: React.ComponentProps<typeof Window>) {\n  return (\n    <Window className={cn(\"h-[460px] w-[560px]\", className)} {...props}>\n      <WindowMain>\n        <WindowTitlebar>\n          <WindowControls />\n          <WindowTitle>Settings</WindowTitle>\n        </WindowTitlebar>\n        <WindowContent className=\"flex flex-col\">\n          <Tabs defaultValue=\"general\" className=\"flex min-h-0 flex-1 flex-col items-center gap-4 pt-3\">\n            <TabsList>\n              <TabsTrigger value=\"general\">General</TabsTrigger>\n              <TabsTrigger value=\"appearance\">Appearance</TabsTrigger>\n              <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"general\" className=\"w-full px-5 pb-5\">\n              <GroupedForm>\n                <GroupedFormSection>\n                  <GroupedFormGroup>\n                    <Row title=\"Open at login\">\n                      <Switch size=\"mini\" aria-label=\"Open at login\" />\n                    </Row>\n                    <Row title=\"Check for updates automatically\">\n                      <Switch size=\"mini\" defaultChecked aria-label=\"Check for updates automatically\" />\n                    </Row>\n                  </GroupedFormGroup>\n                </GroupedFormSection>\n                <GroupedFormSection>\n                  <GroupedFormGroup>\n                    <Row title=\"New documents open in\">\n                      <Choice label=\"New documents open in\" defaultValue=\"documents\" items={{ documents: \"Documents\", desktop: \"Desktop\", icloud: \"iCloud Drive\" }} />\n                    </Row>\n                    <Row title=\"Language\">\n                      <Choice label=\"Language\" defaultValue=\"system\" items={{ system: \"System Language\", en: \"English\", de: \"Deutsch\", fr: \"Français\" }} />\n                    </Row>\n                  </GroupedFormGroup>\n                </GroupedFormSection>\n              </GroupedForm>\n            </TabsContent>\n            <TabsContent value=\"appearance\" className=\"w-full px-5 pb-5\">\n              <GroupedForm>\n                <GroupedFormSection>\n                  <GroupedFormGroup>\n                    <Row title=\"Appearance\">\n                      <Choice label=\"Appearance\" defaultValue=\"auto\" items={{ auto: \"Auto\", light: \"Light\", dark: \"Dark\" }} />\n                    </Row>\n                    <Row title=\"Text size\">\n                      <div className=\"w-40\">\n                        <Slider defaultValue={[40]} aria-label=\"Text size\" />\n                      </div>\n                    </Row>\n                    <Row title=\"Show the sidebar\" description=\"Hide it to make more room for what you’re working on.\">\n                      <Switch size=\"mini\" defaultChecked aria-label=\"Show the sidebar\" />\n                    </Row>\n                  </GroupedFormGroup>\n                </GroupedFormSection>\n              </GroupedForm>\n            </TabsContent>\n            <TabsContent value=\"notifications\" className=\"w-full px-5 pb-5\">\n              <GroupedForm>\n                <GroupedFormSection>\n                  <GroupedFormGroup>\n                    <Row title=\"Allow notifications\">\n                      <Switch size=\"mini\" defaultChecked aria-label=\"Allow notifications\" />\n                    </Row>\n                    <Row title=\"Sound\">\n                      <Choice label=\"Sound\" defaultValue=\"glass\" items={{ none: \"None\", glass: \"Glass\", ping: \"Ping\", pop: \"Pop\" }} />\n                    </Row>\n                    <Row title=\"Badge the app icon\">\n                      <Switch size=\"mini\" defaultChecked aria-label=\"Badge the app icon\" />\n                    </Row>\n                    <Row title=\"Show previews\">\n                      <Choice label=\"Show previews\" defaultValue=\"always\" items={{ always: \"Always\", never: \"Never\" }} />\n                    </Row>\n                  </GroupedFormGroup>\n                </GroupedFormSection>\n              </GroupedForm>\n            </TabsContent>\n          </Tabs>\n        </WindowContent>\n      </WindowMain>\n    </Window>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/preferences-01.tsx"
    }
  ],
  "type": "registry:block"
}