{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "settings-account",
  "title": "Settings Account",
  "description": "Manage account settings, subscription, and team members.",
  "registryDependencies": [
    "alert-dialog",
    "badge",
    "button",
    "card",
    "field",
    "progress",
    "separator"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/settings/settings-account.tsx",
      "content": "\"use client\";\n\nimport {\n  AlertTriangle,\n  ArrowUpRight,\n  Crown,\n  Loader2,\n  Trash2,\n  Users,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/new-york/ui/alert-dialog\";\nimport { Badge } from \"@/registry/new-york/ui/badge\";\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 { FieldDescription, FieldLabel } from \"@/registry/new-york/ui/field\";\nimport { Progress } from \"@/registry/new-york/ui/progress\";\nimport { Separator } from \"@/registry/new-york/ui/separator\";\n\nexport interface AccountInfo {\n  type: \"free\" | \"pro\" | \"enterprise\";\n  status: \"active\" | \"trial\" | \"suspended\" | \"cancelled\";\n  trialEndsAt?: Date;\n  memberCount?: number;\n  memberLimit?: number;\n  storageUsed?: number;\n  storageLimit?: number;\n}\n\nexport interface SettingsAccountProps {\n  account?: AccountInfo;\n  onUpgrade?: () => Promise<void>;\n  onDelete?: () => Promise<void>;\n  onTransfer?: () => Promise<void>;\n  className?: string;\n}\n\nfunction formatBytes(bytes: number): string {\n  if (bytes === 0) return \"0 Bytes\";\n  const k = 1024;\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\"];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${Math.round((bytes / k ** i) * 100) / 100} ${sizes[i]}`;\n}\n\nfunction formatDate(date: Date): string {\n  return new Intl.DateTimeFormat(\"en-US\", {\n    month: \"short\",\n    day: \"numeric\",\n    year: \"numeric\",\n  }).format(date);\n}\n\nexport default function SettingsAccount({\n  account,\n  onUpgrade,\n  onDelete,\n  onTransfer,\n  className,\n}: SettingsAccountProps) {\n  const [isDeleting, setIsDeleting] = useState(false);\n\n  if (!account) {\n    return null;\n  }\n\n  const getStatusBadge = (status: AccountInfo[\"status\"]) => {\n    switch (status) {\n      case \"active\":\n        return (\n          <Badge className=\"text-xs\" variant=\"default\">\n            Active\n          </Badge>\n        );\n      case \"trial\":\n        return (\n          <Badge className=\"text-xs\" variant=\"secondary\">\n            Trial\n          </Badge>\n        );\n      case \"suspended\":\n        return (\n          <Badge className=\"text-xs\" variant=\"destructive\">\n            Suspended\n          </Badge>\n        );\n      case \"cancelled\":\n        return (\n          <Badge className=\"text-xs\" variant=\"outline\">\n            Cancelled\n          </Badge>\n        );\n    }\n  };\n\n  const getPlanBadge = (type: AccountInfo[\"type\"]) => {\n    switch (type) {\n      case \"free\":\n        return (\n          <Badge className=\"text-xs\" variant=\"outline\">\n            Free\n          </Badge>\n        );\n      case \"pro\":\n        return (\n          <Badge className=\"text-xs\" variant=\"default\">\n            Pro\n          </Badge>\n        );\n      case \"enterprise\":\n        return (\n          <Badge className=\"flex items-center gap-1 text-xs\" variant=\"default\">\n            <Crown className=\"size-3\" />\n            <span>Enterprise</span>\n          </Badge>\n        );\n    }\n  };\n\n  const memberPercentage =\n    account.memberLimit && account.memberCount\n      ? (account.memberCount / account.memberLimit) * 100\n      : 0;\n  const storagePercentage =\n    account.storageLimit && account.storageUsed\n      ? (account.storageUsed / account.storageLimit) * 100\n      : 0;\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\">Account</CardTitle>\n            <CardDescription className=\"wrap-break-word\">\n              Manage your account settings and subscription\n            </CardDescription>\n          </div>\n        </div>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col gap-6\">\n          {/* Account Overview */}\n          <div className=\"grid gap-4 md:grid-cols-2\">\n            <div className=\"flex flex-col gap-4 rounded-lg border p-4\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex size-8 items-center justify-center rounded-lg bg-muted\">\n                  <Crown className=\"size-4\" />\n                </div>\n                <FieldLabel className=\"mb-0\">Plan</FieldLabel>\n              </div>\n              <div className=\"flex flex-col gap-2\">\n                <div className=\"flex items-center gap-2\">\n                  {getPlanBadge(account.type)}\n                  {getStatusBadge(account.status)}\n                </div>\n                {account.status === \"trial\" && account.trialEndsAt && (\n                  <p className=\"text-muted-foreground text-xs\">\n                    Trial ends on {formatDate(account.trialEndsAt)}\n                  </p>\n                )}\n                {account.type !== \"enterprise\" && (\n                  <Button\n                    className=\"w-full sm:w-auto\"\n                    onClick={onUpgrade}\n                    type=\"button\"\n                    variant=\"outline\"\n                  >\n                    <ArrowUpRight className=\"size-4\" />\n                    Upgrade Plan\n                  </Button>\n                )}\n              </div>\n            </div>\n\n            {account.memberLimit !== undefined && (\n              <div className=\"flex flex-col gap-4 rounded-lg border p-4\">\n                <div className=\"flex items-center gap-2\">\n                  <div className=\"flex size-8 items-center justify-center rounded-lg bg-muted\">\n                    <Users className=\"size-4\" />\n                  </div>\n                  <FieldLabel className=\"mb-0\">Team Members</FieldLabel>\n                </div>\n                <div className=\"flex flex-col gap-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-muted-foreground text-sm\">\n                      {account.memberCount || 0} / {account.memberLimit}\n                    </span>\n                    <span className=\"font-medium text-sm\">\n                      {memberPercentage.toFixed(0)}%\n                    </span>\n                  </div>\n                  <Progress value={memberPercentage} />\n                </div>\n              </div>\n            )}\n          </div>\n\n          {account.storageLimit !== undefined && (\n            <>\n              <Separator />\n              <div className=\"flex flex-col gap-4 rounded-lg border p-4\">\n                <div className=\"flex items-center gap-2\">\n                  <div className=\"flex size-8 items-center justify-center rounded-lg bg-muted\">\n                    <Crown className=\"size-4\" />\n                  </div>\n                  <FieldLabel className=\"mb-0\">Storage</FieldLabel>\n                </div>\n                <div className=\"flex flex-col gap-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-muted-foreground text-sm\">\n                      {formatBytes(account.storageUsed || 0)} /{\" \"}\n                      {formatBytes(account.storageLimit)}\n                    </span>\n                    <span className=\"font-medium text-sm\">\n                      {storagePercentage.toFixed(1)}%\n                    </span>\n                  </div>\n                  <Progress value={storagePercentage} />\n                </div>\n              </div>\n            </>\n          )}\n\n          <Separator />\n\n          {/* Account Actions */}\n          <div className=\"grid gap-4 md:grid-cols-2\">\n            <div className=\"flex flex-col gap-4 rounded-lg border p-4\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex size-8 items-center justify-center rounded-lg bg-muted\">\n                  <Users className=\"size-4\" />\n                </div>\n                <FieldLabel className=\"mb-0\">Transfer Account</FieldLabel>\n              </div>\n              <FieldDescription>\n                Transfer ownership of this account to another user\n              </FieldDescription>\n              <Button\n                className=\"w-full sm:w-auto\"\n                onClick={onTransfer}\n                type=\"button\"\n                variant=\"outline\"\n              >\n                Transfer Ownership\n              </Button>\n            </div>\n\n            <div className=\"flex flex-col gap-4 rounded-lg border border-destructive/50 p-4\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex size-8 items-center justify-center rounded-lg bg-destructive/10\">\n                  <AlertTriangle className=\"size-4 text-destructive\" />\n                </div>\n                <FieldLabel className=\"mb-0 text-destructive\">\n                  Danger Zone\n                </FieldLabel>\n              </div>\n              <FieldDescription>\n                Permanently delete your account and all associated data\n              </FieldDescription>\n              <AlertDialog>\n                <AlertDialogTrigger asChild>\n                  <Button\n                    className=\"w-full sm:w-auto\"\n                    disabled={isDeleting}\n                    type=\"button\"\n                    variant=\"destructive\"\n                  >\n                    {isDeleting ? (\n                      <>\n                        <Loader2 className=\"size-4 animate-spin\" />\n                        Deleting…\n                      </>\n                    ) : (\n                      <>\n                        <Trash2 className=\"size-4\" />\n                        Delete Account\n                      </>\n                    )}\n                  </Button>\n                </AlertDialogTrigger>\n                <AlertDialogContent>\n                  <AlertDialogHeader>\n                    <AlertDialogTitle>Delete Account?</AlertDialogTitle>\n                    <AlertDialogDescription>\n                      This will permanently delete your account and all\n                      associated data. This action cannot be undone. Please type{\" \"}\n                      <strong>DELETE</strong> to confirm.\n                    </AlertDialogDescription>\n                  </AlertDialogHeader>\n                  <AlertDialogFooter>\n                    <AlertDialogCancel>Cancel</AlertDialogCancel>\n                    <AlertDialogAction\n                      className=\"bg-destructive text-destructive-foreground hover:bg-destructive/90\"\n                      onClick={async () => {\n                        setIsDeleting(true);\n                        try {\n                          await onDelete?.();\n                        } finally {\n                          setIsDeleting(false);\n                        }\n                      }}\n                    >\n                      Delete Account\n                    </AlertDialogAction>\n                  </AlertDialogFooter>\n                </AlertDialogContent>\n              </AlertDialog>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "block",
    "settings"
  ],
  "type": "registry:ui"
}