{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "settings-6", "title": "Settings 6: data and privacy", "author": "Ballmac ", "description": "A data and privacy page: request an export in JSON or CSV and watch it prepare, set how long messages are kept, and delete the account behind a typed confirmation with a grace period you can cancel.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/alert-dialog.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/checkbox.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/progress.json", "https://ui.ballmac.com/r/segmented-control.json", "https://ui.ballmac.com/r/select.json", "https://ui.ballmac.com/r/skeleton.json", "https://ui.ballmac.com/r/state-view.json", "https://ui.ballmac.com/r/switch.json" ], "files": [ { "path": "registry/ballmac/components/blocks/settings-6/settings-6.tsx", "content": "// Ballmac UI: Settings 6. https://ui.ballmac.com/blocks/settings-6\n\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarClock, CircleAlert, CircleCheck, Download, FileArchive, Hourglass, Loader2, ShieldCheck, Trash2, Undo2 } from \"lucide-react\"\n\nimport { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from \"@/components/ballmac/alert-dialog\"\nimport { Button } from \"@/components/ballmac/button\"\nimport { Checkbox } from \"@/components/ballmac/checkbox\"\nimport { Input } from \"@/components/ballmac/input\"\nimport { Progress } from \"@/components/ballmac/progress\"\nimport { SegmentedControl, SegmentedControlItem } from \"@/components/ballmac/segmented-control\"\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ballmac/select\"\nimport { Skeleton } from \"@/components/ballmac/skeleton\"\nimport { frameProps, StateView, type StateProps } from \"@/components/ballmac/state-view\"\nimport { Switch } from \"@/components/ballmac/switch\"\nimport { cn } from \"@/lib/utils\"\n\ntype Settings6Scope = \"profile\" | \"projects\" | \"messages\" | \"billing\"\ntype Settings6Format = \"json\" | \"csv\"\ntype Settings6Retention = \"30d\" | \"1y\" | \"forever\"\n\ntype Settings6Export = {\n id: string\n /** Already written for people (\"14 October, 09:42\"). */\n requested: string\n /** What it contains, in words (\"Profile, projects and messages\"). */\n contents: string\n format: Settings6Format\n status: \"preparing\" | \"ready\" | \"failed\" | \"expired\"\n /** 0 to 100 while preparing. */\n progress?: number\n /** \"18 MB\", when ready. */\n size?: string\n /** \"Expires in 6 days\", when ready. */\n expires?: string\n}\n\ntype Settings6Props = Omit, \"title\"> &\n StateProps & {\n title?: string\n description?: string\n /** The account email, which the person types to confirm deletion. */\n email?: string\n /** Past and running exports. Update the list from your server as jobs progress. */\n exports?: Settings6Export[]\n /** Called with what to include and the format. Return a promise; reject to show the message. Without it, a preparing job is simulated for demos. */\n onRequestExport?: (request: { scope: Settings6Scope[]; format: Settings6Format }) => void | Promise\n onDownload?: (item: Settings6Export) => void\n /** How long messages are kept (controlled by onRetentionChange). */\n retention?: Settings6Retention\n onRetentionChange?: (value: Settings6Retention) => void\n /** Whether anonymous product analytics are shared. */\n analytics?: boolean\n onAnalyticsChange?: (value: boolean) => void\n /** Set when deletion is already scheduled (\"12 November\"). */\n deletionDate?: string\n /** Called when deletion is confirmed. Return a promise; reject to show the message. */\n onDeleteAccount?: () => void | Promise\n onCancelDeletion?: () => void | Promise\n }\n\nconst scopes: { id: Settings6Scope; label: string; hint: string }[] = [\n { id: \"profile\", label: \"Profile and settings\", hint: \"Name, email, preferences\" },\n { id: \"projects\", label: \"Projects and files\", hint: \"Everything you created\" },\n { id: \"messages\", label: \"Messages and comments\", hint: \"Conversations you took part in\" },\n { id: \"billing\", label: \"Billing history\", hint: \"Invoices and payments\" },\n]\n\nconst sampleExports: Settings6Export[] = [\n { id: \"e2\", requested: \"12 October, 16:20\", contents: \"Profile, projects and messages\", format: \"json\", status: \"ready\", size: \"18 MB\", expires: \"Expires in 4 days\" },\n { id: \"e1\", requested: \"2 September, 09:05\", contents: \"Billing history\", format: \"csv\", status: \"expired\" },\n]\n\nconst retentionLabel: Record = { \"30d\": \"30 days\", \"1y\": \"1 year\", forever: \"Until I delete them\" }\n\nfunction Skel() {\n return (\n
\n {[0, 1, 2].map((i) => (\n
\n \n \n \n
\n ))}\n
\n )\n}\n\nfunction Card({ id, icon: Icon, title, children, danger }: { id: string; icon: React.ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>; title: string; children: React.ReactNode; danger?: boolean }) {\n return (\n
\n

\n \n \n \n {title}\n

\n {children}\n
\n )\n}\n\n/**\n * A data and privacy page: ask for a copy of your data (pick what to include, watch it prepare, download it before it expires), choose how\n * long messages are kept, and delete the account behind a typed confirmation with a grace period you can cancel.\n */\nfunction Settings6({\n title = \"Data and privacy\",\n description = \"Take your data with you, decide how long we keep it, or remove it.\",\n email = \"priya@acme.com\",\n exports: exportsProp,\n onRequestExport,\n onDownload,\n retention: retentionProp,\n onRetentionChange,\n analytics: analyticsProp,\n onAnalyticsChange,\n deletionDate: deletionProp,\n onDeleteAccount,\n onCancelDeletion,\n state = \"ready\",\n onRetry,\n errorState,\n className,\n ...props\n}: Settings6Props) {\n const id = React.useId()\n const [list, setList] = React.useState(exportsProp ?? sampleExports)\n React.useEffect(() => {\n if (exportsProp) setList(exportsProp)\n }, [exportsProp])\n const [picked, setPicked] = React.useState>(new Set([\"profile\", \"projects\"]))\n const [format, setFormat] = React.useState(\"json\")\n const [requesting, setRequesting] = React.useState(false)\n const [exportError, setExportError] = React.useState()\n const [retention, setRetention] = React.useState(retentionProp ?? \"1y\")\n const [analytics, setAnalytics] = React.useState(analyticsProp ?? true)\n const [deletionDate, setDeletionDate] = React.useState(deletionProp)\n const [confirmOpen, setConfirmOpen] = React.useState(false)\n const [typed, setTyped] = React.useState(\"\")\n const [deleting, setDeleting] = React.useState(false)\n const [deleteError, setDeleteError] = React.useState()\n const [announce, setAnnounce] = React.useState(\"\")\n const deleteTrigger = React.useRef(null)\n\n React.useEffect(() => setDeletionDate(deletionProp), [deletionProp])\n React.useEffect(() => {\n if (retentionProp) setRetention(retentionProp)\n }, [retentionProp])\n React.useEffect(() => {\n if (analyticsProp !== undefined) setAnalytics(analyticsProp)\n }, [analyticsProp])\n\n // Without a server, a request is simulated so the whole path from asking to downloading can be seen.\n React.useEffect(() => {\n if (onRequestExport || exportsProp) return\n if (!list.some((e) => e.status === \"preparing\")) return\n const t = setInterval(() => {\n setList((l) =>\n l.map((e) => {\n if (e.status !== \"preparing\") return e\n const p = Math.min(100, (e.progress ?? 0) + 18)\n return p >= 100 ? { ...e, status: \"ready\", progress: 100, size: \"12 MB\", expires: \"Expires in 7 days\" } : { ...e, progress: p }\n })\n )\n }, 700)\n return () => clearInterval(t)\n }, [list, onRequestExport, exportsProp])\n\n const toggleScope = (s: Settings6Scope, on: boolean) =>\n setPicked((p) => {\n const n = new Set(p)\n if (on) n.add(s)\n else n.delete(s)\n return n\n })\n\n async function request() {\n if (!picked.size || requesting) return\n const scope = scopes.filter((s) => picked.has(s.id)).map((s) => s.id)\n setExportError(undefined)\n setRequesting(true)\n try {\n if (onRequestExport) await onRequestExport({ scope, format })\n else {\n const names = scopes.filter((s) => picked.has(s.id)).map((s) => s.label.split(\" and \")[0]!.toLowerCase())\n const contents = names.length > 1 ? `${names.slice(0, -1).join(\", \")} and ${names.at(-1)}` : names[0]!\n setList((l) => [{ id: `e${Date.now()}`, requested: \"Just now\", contents: contents[0]!.toUpperCase() + contents.slice(1), format, status: \"preparing\", progress: 4 }, ...l])\n }\n setAnnounce(\"Your export was requested. We will email you when it is ready.\")\n } catch (e) {\n setExportError(e instanceof Error ? e.message : \"We could not start the export. Try again.\")\n } finally {\n setRequesting(false)\n }\n }\n\n async function confirmDelete() {\n setDeleteError(undefined)\n setDeleting(true)\n try {\n await onDeleteAccount?.()\n setDeletionDate((d) => d ?? \"in 30 days\")\n setConfirmOpen(false)\n setTyped(\"\")\n setAnnounce(\"Deletion confirmed. You have 30 days to change your mind.\")\n } catch (e) {\n setDeleteError(e instanceof Error ? e.message : \"We could not schedule the deletion. Nothing was changed.\")\n } finally {\n setDeleting(false)\n }\n }\n\n const busy = list.some((e) => e.status === \"preparing\")\n\n const content = (\n
\n \n

We prepare a download and email you when it is ready. Links work for a week.

\n
\n Include\n
\n {scopes.map((s) => (\n \n ))}\n
\n
\n
\n
\n

\n Format\n

\n setFormat(v as Settings6Format)} aria-labelledby={`${id}-format`} size=\"sm\">\n JSON\n CSV\n \n
\n \n
\n {!picked.size ? (\n

\n Choose at least one thing to include.\n

\n ) : null}\n {exportError ? (\n

\n \n {exportError}\n

\n ) : null}\n\n {list.length ? (\n
\n

Your exports

\n
    \n {list.map((e) => (\n
  • \n \n {e.status === \"ready\" ? : e.status === \"failed\" ? : e.status === \"preparing\" ? : }\n \n
    \n

    \n {e.contents} · {e.format}\n

    \n

    \n Requested {e.requested}\n {e.status === \"ready\" ? ` · ${e.size} · ${e.expires}` : e.status === \"expired\" ? \" · Link expired\" : e.status === \"failed\" ? \" · Something went wrong, ask again\" : \"\"}\n

    \n {e.status === \"preparing\" ? : null}\n
    \n {e.status === \"preparing\" ? {e.progress ?? 0}% : null}\n {e.status === \"ready\" ? (\n \n ) : null}\n
    • \n ))}\n
\n
\n ) : null}\n \n\n \n
\n
\n
\n

\n Keep my messages for\n

\n

Older messages are deleted for good, and cannot be recovered.

\n
\n {\n setRetention(v as Settings6Retention)\n onRetentionChange?.(v as Settings6Retention)\n }}\n >\n \n \n \n \n {(Object.keys(retentionLabel) as Settings6Retention[]).map((r) => (\n \n {retentionLabel[r]}\n \n ))}\n \n \n
\n
\n
\n

\n Share anonymous usage data\n

\n

Helps us fix what is slow. Never includes your content.

\n
\n {\n setAnalytics(v)\n onAnalyticsChange?.(v)\n }}\n aria-labelledby={`${id}-an`}\n />\n
\n
\n \n\n \n {deletionDate ? (\n
\n
\n

Your account is scheduled for deletion {deletionDate.startsWith(\"in\") ? deletionDate : `on ${deletionDate}`}.

\n

Until then you can sign in and change your mind. After that, everything is removed for good.

\n
\n {\n await onCancelDeletion?.()\n setDeletionDate(undefined)\n setAnnounce(\"Deletion cancelled. Your account stays as it is.\")\n }}\n >\n \n Keep my account\n \n
\n ) : (\n <>\n

Removes your profile, projects and messages. We wait 30 days before deleting anything, so you can change your mind. Export first if you want a copy.

\n \n \n )}\n \n\n {\n if (deleting) return\n setConfirmOpen(o)\n if (!o) {\n setTyped(\"\")\n setDeleteError(undefined)\n }\n }}\n >\n {\n e.preventDefault()\n deleteTrigger.current?.focus()\n }}\n >\n \n Delete this account?\n \n {busy ? \"An export is still being prepared; it will be lost. \" : \"\"}After 30 days your projects, messages and settings are removed for good. To confirm, type {email}.\n \n \n setTyped(e.target.value)} aria-label=\"Type your email to confirm\" autoComplete=\"off\" placeholder={email} aria-invalid={!!deleteError} />\n {deleteError ? (\n

\n {deleteError}\n

\n ) : null}\n \n Keep my account\n {\n e.preventDefault()\n void confirmDelete()\n }}\n >\n {deleting ? : null}\n {deleting ? \"Scheduling\" : \"Delete account\"}\n \n \n \n \n
\n )\n\n return (\n
\n
\n

\n {title}\n

\n

{description}

\n
\n } error={{ title: errorState?.title ?? \"Your data settings could not be loaded\", description: errorState?.description ?? \"Nothing was changed. Check your connection and try again.\", ...errorState }}>\n {content}\n \n

\n {announce}\n

\n
\n )\n}\n\nexport { Settings6, type Settings6Props, type Settings6Export, type Settings6Scope, type Settings6Format, type Settings6Retention }\n", "type": "registry:component", "target": "@components/ballmac/blocks/settings-6/settings-6.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "settings", "privacy", "gdpr", "data export", "delete account", "retention", "compliance", "download my data", "account" ], "version": "1.0.0", "updated": "2026-10-18", "tests": true, "ai": { "summary": "A data and privacy settings page. Promise} onDownload retention='30d' | '1y' | 'forever' onRetentionChange analytics onAnalyticsChange deletionDate onDeleteAccount onCancelDeletion />. Reject a promise to show its message in place. Without onRequestExport, a request is simulated so a demo shows the whole path.", "whenToUse": [ "Privacy and data-rights pages (GDPR/CCPA access and erasure)", "The danger zone of any account settings" ], "whenNotToUse": [ "Cookie choices on first visit (use cookie-consent)", "Who changed what in the workspace (use settings-5)" ], "composesWith": [ "settings-1", "settings-5", "app-shell-1" ], "a11y": [ { "keys": "Tab", "action": "Checkboxes, format, request, then each export's download; every control has a visible label" }, { "keys": "Delete", "action": "An alert dialog; the confirm button stays disabled until the email is typed exactly, focus returns to Delete account when it closes" }, { "keys": "Progress", "action": "Each preparing export has a labelled progress bar and a percentage in text" } ], "customization": [ "Requests, deletion and cancelling are all async; reject to show a message", "deletionDate set from the server shows the scheduled state with a way back", "Retention and analytics are controlled with value and onChange props" ] }, "states": [ { "id": "loading", "title": "Loading", "example": "settings-6-loading", "trigger": "state=\"loading\"", "note": "Skeleton cards under the real heading, announced as loading." }, { "id": "error", "title": "Could not load", "example": "settings-6-error", "trigger": "state=\"error\"", "note": "An alert saying nothing was changed, with Try again (onRetry). Failed requests show their message in place." } ], "examples": [ "settings-6-demo", "settings-6-deleting", "settings-6-loading", "settings-6-error" ], "url": "https://ui.ballmac.com/components/settings-6" }, "categories": [ "blocks", "settings" ], "type": "registry:block" }