{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "settings-notifications",
  "title": "Settings Notifications",
  "description": "Manage notification preferences and quiet hours.",
  "registryDependencies": [
    "button",
    "card",
    "field",
    "input-group",
    "select",
    "separator",
    "switch"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/settings/settings-notifications.tsx",
      "content": "\"use client\";\n\nimport {\n  Bell,\n  Loader2,\n  Mail,\n  MessageSquare,\n  Save,\n  Smartphone,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/registry/new-york/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/new-york/ui/field\";\nimport {\n  InputGroup,\n  InputGroupInput,\n} from \"@/registry/new-york/ui/input-group\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\";\nimport { Separator } from \"@/registry/new-york/ui/separator\";\nimport { Switch } from \"@/registry/new-york/ui/switch\";\n\nexport interface NotificationChannel {\n  email: boolean;\n  push: boolean;\n  inApp: boolean;\n  sms: boolean;\n}\n\nexport interface NotificationCategory {\n  id: string;\n  name: string;\n  description: string;\n  channels: NotificationChannel;\n  frequency?: \"realtime\" | \"digest-daily\" | \"digest-weekly\" | \"off\";\n}\n\nexport interface NotificationPreferences {\n  categories: NotificationCategory[];\n  quietHoursEnabled: boolean;\n  quietHoursStart?: string;\n  quietHoursEnd?: string;\n}\n\nexport interface SettingsNotificationsProps {\n  preferences?: NotificationPreferences;\n  onSave?: (data: NotificationPreferences) => Promise<void>;\n  className?: string;\n}\n\nconst defaultCategories: NotificationCategory[] = [\n  {\n    id: \"mentions\",\n    name: \"Mentions\",\n    description: \"When someone mentions you\",\n    channels: { email: true, push: true, inApp: true, sms: false },\n    frequency: \"realtime\",\n  },\n  {\n    id: \"replies\",\n    name: \"Replies\",\n    description: \"When someone replies to your messages\",\n    channels: { email: true, push: true, inApp: true, sms: false },\n    frequency: \"realtime\",\n  },\n  {\n    id: \"system\",\n    name: \"System Alerts\",\n    description: \"Important system notifications\",\n    channels: { email: true, push: true, inApp: true, sms: true },\n    frequency: \"realtime\",\n  },\n  {\n    id: \"marketing\",\n    name: \"Marketing\",\n    description: \"Promotional emails and updates\",\n    channels: { email: true, push: false, inApp: false, sms: false },\n    frequency: \"digest-weekly\",\n  },\n  {\n    id: \"security\",\n    name: \"Security\",\n    description: \"Security alerts and login notifications\",\n    channels: { email: true, push: true, inApp: true, sms: true },\n    frequency: \"realtime\",\n  },\n];\n\nconst defaultPreferences: NotificationPreferences = {\n  categories: defaultCategories,\n  quietHoursEnabled: false,\n  quietHoursStart: \"22:00\",\n  quietHoursEnd: \"08:00\",\n};\n\nexport default function SettingsNotifications({\n  preferences = defaultPreferences,\n  onSave,\n  className,\n}: SettingsNotificationsProps) {\n  const [isSaving, setIsSaving] = useState(false);\n  const [localPreferences, setLocalPreferences] =\n    useState<NotificationPreferences>(preferences);\n\n  const handleSave = async () => {\n    setIsSaving(true);\n    try {\n      await onSave?.(localPreferences);\n    } finally {\n      setIsSaving(false);\n    }\n  };\n\n  const updateCategoryChannel = (\n    categoryId: string,\n    channel: keyof NotificationChannel,\n    enabled: boolean\n  ) => {\n    setLocalPreferences((prev) => ({\n      ...prev,\n      categories: prev.categories.map((cat) =>\n        cat.id === categoryId\n          ? {\n              ...cat,\n              channels: { ...cat.channels, [channel]: enabled },\n            }\n          : cat\n      ),\n    }));\n  };\n\n  const updateCategoryFrequency = (\n    categoryId: string,\n    frequency: \"realtime\" | \"digest-daily\" | \"digest-weekly\" | \"off\"\n  ) => {\n    setLocalPreferences((prev) => ({\n      ...prev,\n      categories: prev.categories.map((cat) =>\n        cat.id === categoryId ? { ...cat, frequency } : cat\n      ),\n    }));\n  };\n\n  const getFrequencyLabel = (\n    frequency?: \"realtime\" | \"digest-daily\" | \"digest-weekly\" | \"off\"\n  ) => {\n    switch (frequency) {\n      case \"realtime\":\n        return \"Real-time\";\n      case \"digest-daily\":\n        return \"Daily Digest\";\n      case \"digest-weekly\":\n        return \"Weekly Digest\";\n      case \"off\":\n        return \"Off\";\n      default:\n        return \"Real-time\";\n    }\n  };\n\n  return (\n    <Card className={cn(\"w-full shadow-xs\", className)}>\n      <CardHeader>\n        <div className=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between\">\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n            <CardTitle className=\"wrap-break-word\">\n              Notification Preferences\n            </CardTitle>\n            <CardDescription className=\"wrap-break-word\">\n              Manage how and when you receive notifications\n            </CardDescription>\n          </div>\n          <div className=\"flex shrink-0 gap-2\">\n            <Button\n              className=\"w-full sm:w-auto\"\n              disabled={isSaving}\n              onClick={handleSave}\n              type=\"button\"\n            >\n              {isSaving ? (\n                <>\n                  <Loader2 className=\"size-4 animate-spin\" />\n                  <span className=\"whitespace-nowrap\">Saving…</span>\n                </>\n              ) : (\n                <>\n                  <Save className=\"size-4\" />\n                  <span className=\"whitespace-nowrap\">Save Changes</span>\n                </>\n              )}\n            </Button>\n          </div>\n        </div>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col gap-6\">\n          {/* Notification Categories */}\n          <div className=\"flex flex-col gap-4\">\n            {localPreferences.categories.map((category) => (\n              <div\n                className=\"flex flex-col gap-4 rounded-lg border p-4\"\n                key={category.id}\n              >\n                <div className=\"flex flex-col gap-2\">\n                  <div className=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between\">\n                    <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n                      <h4 className=\"font-medium text-sm\">{category.name}</h4>\n                      <p className=\"text-muted-foreground text-xs\">\n                        {category.description}\n                      </p>\n                    </div>\n                    <Select\n                      onValueChange={(\n                        value:\n                          | \"realtime\"\n                          | \"digest-daily\"\n                          | \"digest-weekly\"\n                          | \"off\"\n                      ) => updateCategoryFrequency(category.id, value)}\n                      value={category.frequency ?? \"realtime\"}\n                    >\n                      <SelectTrigger className=\"w-full shrink-0 sm:w-[140px]\">\n                        <SelectValue />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"realtime\">Real-time</SelectItem>\n                        <SelectItem value=\"digest-daily\">\n                          Daily Digest\n                        </SelectItem>\n                        <SelectItem value=\"digest-weekly\">\n                          Weekly Digest\n                        </SelectItem>\n                        <SelectItem value=\"off\">Off</SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                </div>\n\n                <Separator />\n\n                <div className=\"flex flex-col gap-3\">\n                  <Field>\n                    <div className=\"flex items-center justify-between\">\n                      <div className=\"flex items-center gap-2\">\n                        <Mail className=\"size-4 text-muted-foreground\" />\n                        <FieldLabel htmlFor={`${category.id}-email`}>\n                          Email\n                        </FieldLabel>\n                      </div>\n                      <Switch\n                        checked={category.channels.email}\n                        id={`${category.id}-email`}\n                        onCheckedChange={(checked) =>\n                          updateCategoryChannel(category.id, \"email\", checked)\n                        }\n                      />\n                    </div>\n                  </Field>\n\n                  <Field>\n                    <div className=\"flex items-center justify-between\">\n                      <div className=\"flex items-center gap-2\">\n                        <Bell className=\"size-4 text-muted-foreground\" />\n                        <FieldLabel htmlFor={`${category.id}-push`}>\n                          Push\n                        </FieldLabel>\n                      </div>\n                      <Switch\n                        checked={category.channels.push}\n                        id={`${category.id}-push`}\n                        onCheckedChange={(checked) =>\n                          updateCategoryChannel(category.id, \"push\", checked)\n                        }\n                      />\n                    </div>\n                  </Field>\n\n                  <Field>\n                    <div className=\"flex items-center justify-between\">\n                      <div className=\"flex items-center gap-2\">\n                        <MessageSquare className=\"size-4 text-muted-foreground\" />\n                        <FieldLabel htmlFor={`${category.id}-inapp`}>\n                          In-App\n                        </FieldLabel>\n                      </div>\n                      <Switch\n                        checked={category.channels.inApp}\n                        id={`${category.id}-inapp`}\n                        onCheckedChange={(checked) =>\n                          updateCategoryChannel(category.id, \"inApp\", checked)\n                        }\n                      />\n                    </div>\n                  </Field>\n\n                  <Field>\n                    <div className=\"flex items-center justify-between\">\n                      <div className=\"flex items-center gap-2\">\n                        <Smartphone className=\"size-4 text-muted-foreground\" />\n                        <FieldLabel htmlFor={`${category.id}-sms`}>\n                          SMS\n                        </FieldLabel>\n                      </div>\n                      <Switch\n                        checked={category.channels.sms}\n                        id={`${category.id}-sms`}\n                        onCheckedChange={(checked) =>\n                          updateCategoryChannel(category.id, \"sms\", checked)\n                        }\n                      />\n                    </div>\n                  </Field>\n                </div>\n              </div>\n            ))}\n          </div>\n\n          <Separator />\n\n          {/* Quiet Hours */}\n          <div className=\"flex flex-col gap-4\">\n            <h3 className=\"font-semibold text-base\">Quiet Hours</h3>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <div className=\"flex flex-col gap-1\">\n                  <FieldLabel htmlFor=\"quiet-hours\">\n                    Enable Quiet Hours\n                  </FieldLabel>\n                  <FieldDescription>\n                    Pause non-urgent notifications during these hours\n                  </FieldDescription>\n                </div>\n                <Switch\n                  checked={localPreferences.quietHoursEnabled}\n                  id=\"quiet-hours\"\n                  onCheckedChange={(checked) =>\n                    setLocalPreferences((prev) => ({\n                      ...prev,\n                      quietHoursEnabled: checked,\n                    }))\n                  }\n                />\n              </div>\n            </Field>\n\n            {localPreferences.quietHoursEnabled && (\n              <div className=\"flex flex-col gap-4 rounded-lg border bg-muted/30 p-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"quiet-start\">Start Time</FieldLabel>\n                  <FieldContent>\n                    <InputGroup>\n                      <InputGroupInput\n                        id=\"quiet-start\"\n                        onChange={(e) =>\n                          setLocalPreferences((prev) => ({\n                            ...prev,\n                            quietHoursStart: e.target.value,\n                          }))\n                        }\n                        type=\"time\"\n                        value={localPreferences.quietHoursStart || \"22:00\"}\n                      />\n                    </InputGroup>\n                  </FieldContent>\n                </Field>\n\n                <Field>\n                  <FieldLabel htmlFor=\"quiet-end\">End Time</FieldLabel>\n                  <FieldContent>\n                    <InputGroup>\n                      <InputGroupInput\n                        id=\"quiet-end\"\n                        onChange={(e) =>\n                          setLocalPreferences((prev) => ({\n                            ...prev,\n                            quietHoursEnd: e.target.value,\n                          }))\n                        }\n                        type=\"time\"\n                        value={localPreferences.quietHoursEnd || \"08:00\"}\n                      />\n                    </InputGroup>\n                  </FieldContent>\n                </Field>\n              </div>\n            )}\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "block",
    "settings"
  ],
  "type": "registry:ui"
}