{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "trust-1", "title": "Trust 1: security and trust center", "author": "Ballmac ", "description": "A trust center: certification cards with dates, the security controls behind them, documents where audit reports ask for a request under a confidentiality agreement, a subprocessor table with change alerts, and a disclosure contact.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/blur-fade.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/checkbox.json", "https://ui.ballmac.com/r/cover-art.json", "https://ui.ballmac.com/r/dialog.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/skeleton.json", "https://ui.ballmac.com/r/spotlight-card.json", "https://ui.ballmac.com/r/state-view.json", "https://ui.ballmac.com/r/return-focus.json" ], "files": [ { "path": "registry/ballmac/components/blocks/trust-1/trust-1.tsx", "content": "// Ballmac UI: Trust 1. https://ui.ballmac.com/blocks/trust-1\n\"use client\"\n\nimport * as React from \"react\"\nimport { Bell, Bug, CalendarCheck, CircleAlert, CircleCheck, Clock, Download, FileText, Loader2, Lock, MailCheck, Search, Server, ShieldCheck } from \"lucide-react\"\n\nimport { BlurFade, BlurFadeGroup } from \"@/components/ballmac/blur-fade\"\nimport { Button } from \"@/components/ballmac/button\"\nimport { Checkbox } from \"@/components/ballmac/checkbox\"\nimport { CoverArt } from \"@/components/ballmac/cover-art\"\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"@/components/ballmac/dialog\"\nimport { Input } from \"@/components/ballmac/input\"\nimport { Skeleton } from \"@/components/ballmac/skeleton\"\nimport { useReturnFocus } from \"@/lib/ballmac/return-focus\"\nimport { SpotlightCard } from \"@/components/ballmac/spotlight-card\"\nimport { frameProps, StateView, type StateProps } from \"@/components/ballmac/state-view\"\nimport { cn } from \"@/lib/utils\"\n\ntype Trust1Certification = {\n id: string\n /** The standard's short name: \"SOC 2 Type II\". */\n name: string\n status: \"certified\" | \"in-progress\" | \"aligned\"\n /** Who audited it or what it covers. */\n detail: string\n /** When it is valid until, or when the next step happens. */\n valid?: string\n}\n\ntype Trust1ControlGroup = {\n id: string\n title: string\n icon?: React.ReactNode\n controls: { text: string; status?: \"done\" | \"progress\" }[]\n}\n\ntype Trust1Document = {\n id: string\n name: string\n description?: string\n /** A public document downloads straight away; a gated one asks for a request first. */\n access: \"public\" | \"gated\"\n /** \"PDF · 2.4 MB\". */\n format: string\n /** Already written for people (\"Updated June 2026\"). */\n updated: string\n href?: string\n}\n\ntype Trust1Subprocessor = { name: string; purpose: string; location: string; data: string }\n\ntype Trust1Props = Omit, \"title\"> &\n Pick & {\n title?: string\n description?: string\n /** The line in the status pill. */\n status?: { label: string; ok?: boolean; updated?: string }\n certifications?: Trust1Certification[]\n groups?: Trust1ControlGroup[]\n documents?: Trust1Document[]\n subprocessors?: Trust1Subprocessor[]\n /** Where vulnerability reports go. */\n securityEmail?: string\n /** Your company's name, used in the confidentiality line. */\n companyName?: string\n /** The id of a gated document whose request dialog is open at first. */\n defaultRequestId?: string\n /** Called when a public document is downloaded. */\n onDownload?: (doc: Trust1Document) => void\n /** Called with a request for a gated document. Resolve to confirm; throw to show the reason. Defaults to a short simulated request. */\n onRequestAccess?: (doc: Trust1Document, details: { email: string; company: string }) => Promise\n /** Called with an email to notify when the list of subprocessors changes. Resolve to confirm; throw to show the reason. */\n onSubscribe?: (email: string) => Promise\n }\n\nconst sampleCerts: Trust1Certification[] = [\n { id: \"soc2\", name: \"SOC 2 Type II\", status: \"certified\", detail: \"Audited by Halden & Rowe, independent auditors\", valid: \"Valid until 14 Jun 2027\" },\n { id: \"iso\", name: \"ISO 27001\", status: \"certified\", detail: \"Information security management system\", valid: \"Valid until 2 Nov 2027\" },\n { id: \"gdpr\", name: \"GDPR\", status: \"aligned\", detail: \"Data processing agreement and EU data residency\", valid: \"DPA available below\" },\n { id: \"hipaa\", name: \"HIPAA\", status: \"in-progress\", detail: \"Controls mapped; independent assessment scheduled\", valid: \"Assessment in Q1 2027\" },\n]\n\nconst sampleGroups: Trust1ControlGroup[] = [\n {\n id: \"data\",\n title: \"Data protection\",\n icon: ,\n controls: [\n { text: \"Encrypted at rest with AES-256\", status: \"done\" },\n { text: \"TLS 1.3 for all traffic, in transit and between services\", status: \"done\" },\n { text: \"Each customer's data is isolated in its own workspace\", status: \"done\" },\n { text: \"Daily encrypted backups, restored and tested every quarter\", status: \"done\" },\n ],\n },\n {\n id: \"access\",\n title: \"Access control\",\n icon: ,\n controls: [\n { text: \"Single sign-on and SCIM for your team\", status: \"done\" },\n { text: \"Two-step sign-in required for every employee\", status: \"done\" },\n { text: \"Access reviewed every quarter, with least privilege\", status: \"done\" },\n { text: \"Every admin action recorded in an audit log\", status: \"done\" },\n ],\n },\n {\n id: \"infra\",\n title: \"Infrastructure\",\n icon: ,\n controls: [\n { text: \"Hosted in ISO-certified data centers\", status: \"done\" },\n { text: \"EU and US regions, chosen when you sign up\", status: \"done\" },\n { text: \"99.95% uptime over the last 12 months\", status: \"done\" },\n { text: \"Disaster recovery rehearsed once a year\", status: \"done\" },\n ],\n },\n {\n id: \"app\",\n title: \"Application security\",\n icon: ,\n controls: [\n { text: \"Independent penetration test every year\", status: \"done\" },\n { text: \"Dependency and secret scanning on every commit\", status: \"done\" },\n { text: \"Security training for every employee\", status: \"done\" },\n { text: \"Bug bounty with cash rewards\", status: \"progress\" },\n ],\n },\n]\n\nconst sampleDocs: Trust1Document[] = [\n { id: \"wp\", name: \"Security whitepaper\", description: \"How the product is built, run and protected.\", access: \"public\", format: \"PDF · 2.4 MB\", updated: \"Updated June 2026\" },\n { id: \"dpa\", name: \"Data processing agreement\", description: \"The standard DPA, ready to sign.\", access: \"public\", format: \"PDF · 480 KB\", updated: \"Updated March 2026\" },\n { id: \"soc2\", name: \"SOC 2 Type II report\", description: \"The full audit report, under a confidentiality agreement.\", access: \"gated\", format: \"PDF · 6.1 MB\", updated: \"Updated June 2026\" },\n { id: \"pen\", name: \"Penetration test summary\", description: \"Findings and fixes from the latest independent test.\", access: \"gated\", format: \"PDF · 1.2 MB\", updated: \"Updated May 2026\" },\n]\n\nconst sampleSubs: Trust1Subprocessor[] = [\n { name: \"Cloud hosting\", purpose: \"Runs the product and stores data\", location: \"Frankfurt, Germany\", data: \"All customer data\" },\n { name: \"Email delivery\", purpose: \"Sends sign-in and notification email\", location: \"Dublin, Ireland\", data: \"Names and email addresses\" },\n { name: \"Payments\", purpose: \"Processes card payments\", location: \"United States\", data: \"Billing details\" },\n { name: \"Error monitoring\", purpose: \"Finds and fixes crashes\", location: \"Frankfurt, Germany\", data: \"Technical diagnostics, never content\" },\n { name: \"Support desk\", purpose: \"Answers customer questions\", location: \"Dublin, Ireland\", data: \"Support conversations\" },\n { name: \"Product analytics\", purpose: \"Shows which features are used\", location: \"Frankfurt, Germany\", data: \"Usage events, never content\" },\n]\n\nconst emailOk = (v: string) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(v.trim())\nconst statusMeta = {\n certified: { label: \"Certified\", icon: CircleCheck, tone: \"bg-chart-2/15 text-foreground border-chart-2/30\" },\n aligned: { label: \"Compliant\", icon: CircleCheck, tone: \"bg-chart-1/15 text-foreground border-chart-1/30\" },\n \"in-progress\": { label: \"In progress\", icon: Clock, tone: \"bg-chart-3/20 text-foreground border-chart-3/40\" },\n} as const\n\nfunction TrustSkeleton() {\n return (\n
\n
\n {[0, 1, 2, 3].map((i) => (\n \n ))}\n
\n
\n {[0, 1, 2, 3].map((i) => (\n \n ))}\n
\n
\n )\n}\n\n/**\n * A trust center: the standards you meet with dates, the security controls behind them, documents (public ones download, sensitive ones\n * ask for a request with a confidentiality agreement), the subprocessors that touch customer data with a way to be told of changes, and\n * where to report a vulnerability.\n */\nfunction Trust1({\n title = \"Trust center\",\n description = \"How we protect your data, who helps us do it, and the proof. Everything on this page is kept current.\",\n status = { label: \"All systems operational\", ok: true, updated: \"Checked 2 minutes ago\" },\n certifications = sampleCerts,\n groups = sampleGroups,\n documents = sampleDocs,\n subprocessors = sampleSubs,\n securityEmail = \"security@acme.com\",\n companyName = \"Acme\",\n defaultRequestId,\n onDownload,\n onRequestAccess,\n onSubscribe,\n state = \"ready\",\n onRetry,\n errorState,\n className,\n ...props\n}: Trust1Props) {\n const id = React.useId()\n const [query, setQuery] = React.useState(\"\")\n const [request, setRequest] = React.useState(() => documents.find((d) => d.id === defaultRequestId && d.access === \"gated\") ?? null)\n const returnFocus = useReturnFocus(!!request)\n const [form, setForm] = React.useState({ email: \"\", company: \"\", agree: false })\n const [phase, setPhase] = React.useState<\"idle\" | \"sending\" | \"error\" | \"done\">(\"idle\")\n const [message, setMessage] = React.useState()\n const [touched, setTouched] = React.useState(false)\n const [subEmail, setSubEmail] = React.useState(\"\")\n const [subPhase, setSubPhase] = React.useState<\"idle\" | \"sending\" | \"error\" | \"done\">(\"idle\")\n const [subMessage, setSubMessage] = React.useState()\n\n const q = query.trim().toLowerCase()\n const subs = subprocessors.filter((s) => !q || `${s.name} ${s.purpose} ${s.location} ${s.data}`.toLowerCase().includes(q))\n\n const emailError = touched && !emailOk(form.email) ? \"Enter a work email, like name@company.com.\" : undefined\n const companyError = touched && !form.company.trim() ? \"Tell us which company this is for.\" : undefined\n const agreeError = touched && !form.agree ? \"Agree to keep it confidential to continue.\" : undefined\n\n async function submit(e: React.FormEvent) {\n e.preventDefault()\n setTouched(true)\n if (!request || !emailOk(form.email) || !form.company.trim() || !form.agree) return\n setPhase(\"sending\")\n setMessage(undefined)\n try {\n if (onRequestAccess) await onRequestAccess(request, { email: form.email.trim(), company: form.company.trim() })\n else await new Promise((r) => setTimeout(r, 900))\n setPhase(\"done\")\n } catch (err) {\n setPhase(\"error\")\n setMessage(err instanceof Error && err.message ? err.message : \"The request could not be sent. Try again in a moment.\")\n }\n }\n\n async function subscribe(e: React.FormEvent) {\n e.preventDefault()\n if (!emailOk(subEmail)) {\n setSubPhase(\"error\")\n setSubMessage(\"Enter a valid email address.\")\n return\n }\n setSubPhase(\"sending\")\n try {\n if (onSubscribe) await onSubscribe(subEmail.trim())\n else await new Promise((r) => setTimeout(r, 700))\n setSubPhase(\"done\")\n } catch (err) {\n setSubPhase(\"error\")\n setSubMessage(err instanceof Error && err.message ? err.message : \"We could not sign you up. Try again.\")\n }\n }\n\n const content = (\n
\n
\n

\n Standards we meet\n

\n *]:h-full [&>*>*]:h-full\" item={{ direction: \"up\", offset: 12, blur: 6 }}>\n {certifications.map((c) => {\n const S = statusMeta[c.status]\n return (\n \n
\n \n \n \n \n \n {S.label}\n \n
\n
\n

{c.name}

\n

{c.detail}

\n
\n {c.valid ? (\n

\n \n {c.valid}\n

\n ) : null}\n \n )\n })}\n \n
\n\n
\n

\n How we protect your data\n

\n

The controls behind the certificates, written as plainly as we can.

\n
\n {groups.map((g, gi) => (\n \n
\n
\n \n {g.icon ?? }\n \n

{g.title}

\n {g.controls.length} controls\n
\n
    \n {g.controls.map((c) => (\n
  • \n {c.status === \"progress\" ? : }\n \n {c.text}\n {c.status === \"progress\" ? (in progress) : null}\n \n
    • \n ))}\n
\n
\n \n ))}\n
\n
\n\n
\n

\n Documents\n

\n

Public documents download straight away. Audit reports are shared under a confidentiality agreement.

\n \n
\n\n
\n
\n
\n

\n Subprocessors\n

\n

The companies that handle customer data for us, what they do, and where. We tell you 30 days before we add one.

\n
\n
\n \n {subPhase === \"done\" ? (\n

\n \n You are on the list. We will email {subEmail}.\n

\n ) : (\n <>\n
\n {\n setSubEmail(e.target.value)\n if (subPhase === \"error\") setSubPhase(\"idle\")\n }}\n aria-invalid={subPhase === \"error\" || undefined}\n aria-describedby={subPhase === \"error\" ? `${id}-sub-error` : undefined}\n />\n \n
\n {subPhase === \"error\" ? (\n

\n {subMessage}\n

\n ) : null}\n \n )}\n
\n
\n
\n
\n \n setQuery(e.target.value)} className=\"placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent text-sm outline-none\" />\n {subs.length} of {subprocessors.length}\n
\n
\n \n \n \n \n \n \n \n \n \n \n {subs.map((s) => (\n \n \n \n \n \n \n ))}\n {!subs.length ? (\n \n \n \n ) : null}\n \n
NameWhat they doWhereData they handle
{s.name}{s.purpose}{s.location}{s.data}
\n No subprocessors match “{query}”.\n
\n
\n
\n
\n\n
\n )\n\n const report = (\n \n
\n \n
\n \n \n \n

\n Found a security issue?\n

\n

Please tell us before you tell anyone else. We answer within one working day, we do not take legal action against good-faith research, and we credit you if you like.

\n \n {securityEmail}\n \n
\n
\n \n )\n\n return (\n
\n \n
\n \n
\n

\n \n {status.label}\n {status.updated ? · {status.updated} : null}\n

\n

\n {title}\n

\n

{description}

\n
\n \n\n } error={{ title: errorState?.title ?? \"The trust center could not be loaded\", description: errorState?.description ?? \"Check your connection and try again. You can still reach us at the address below.\", ...errorState }}>\n {content}\n \n
{report}
\n\n !o && setRequest(null)}>\n \n {phase === \"done\" ? (\n
\n \n \n \n Request sent\n \n We will email {form.email} within one working day with a link to {request?.name}.\n \n \n
\n ) : (\n
\n \n Request {request?.name}\n We share this under a confidentiality agreement. It takes a minute.\n \n
\n \n setForm((f) => ({ ...f, email: e.target.value }))} aria-invalid={!!emailError || undefined} aria-describedby={emailError ? `${id}-email-error` : undefined} />\n {emailError ?

{emailError}

: null}\n
\n
\n \n setForm((f) => ({ ...f, company: e.target.value }))} aria-invalid={!!companyError || undefined} aria-describedby={companyError ? `${id}-company-error` : undefined} />\n {companyError ?

{companyError}

: null}\n
\n
\n
\n setForm((f) => ({ ...f, agree: c === true }))} aria-invalid={!!agreeError || undefined} aria-describedby={agreeError ? `${id}-nda-error` : undefined} className=\"mt-0.5\" />\n \n
\n {agreeError ?

{agreeError}

: null}\n
\n {phase === \"error\" ? (\n

\n \n {message}\n

\n ) : null}\n
\n \n \n
\n
\n )}\n \n \n
\n )\n}\n\nexport { Trust1, type Trust1Props, type Trust1Certification, type Trust1ControlGroup, type Trust1Document, type Trust1Subprocessor }\n", "type": "registry:component", "target": "@components/ballmac/blocks/trust-1/trust-1.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "trust", "security", "compliance", "soc 2", "iso 27001", "gdpr", "hipaa", "subprocessors", "privacy", "enterprise", "audit" ], "version": "1.0.0", "updated": "2026-10-18", "tests": true, "ai": { "summary": "A security and compliance page. …} onSubscribe={async (email) => …} />. Gated documents open a request dialog with validation and submitting, success and error states.", "whenToUse": [ "The trust, security or compliance page a B2B buyer's security team reads", "Sharing SOC 2 and penetration test reports behind a request" ], "whenNotToUse": [ "A privacy policy or terms (plain text pages)", "A system status page (use the relay template's status page or stats-pro-2)", "A cookie banner (use cookie-consent)" ], "composesWith": [ "header-2", "footer-2", "about-1", "faq-1", "contact-1" ], "a11y": [ { "keys": "Request access", "action": "Opens a dialog whose fields have labels; errors are announced and linked to their fields; focus returns to the button afterwards" }, { "keys": "Status", "action": "Certified, Compliant and In progress are words with an icon, never color alone; controls in progress say so in the text" }, { "keys": "Subprocessors table", "action": "A labelled, focusable scroll region on narrow screens, with row headers" } ], "customization": [ "companyName for the confidentiality line", "defaultRequestId opens a request at first", "onRequestAccess should create the request in your CRM or send a secure link; never expose the file URL to the browser until it is approved" ] }, "states": [ { "id": "loading", "title": "Loading", "example": "trust-1-loading", "trigger": "state=\"loading\"", "note": "Skeleton certificate and control cards under the real header, announced as loading." }, { "id": "error", "title": "Could not load", "example": "trust-1-error", "trigger": "state=\"error\"", "note": "An alert with Try again (onRetry). The header stays so the page never looks broken." } ], "examples": [ "trust-1-demo", "trust-1-request", "trust-1-loading", "trust-1-error" ], "url": "https://ui.ballmac.com/components/trust-1" }, "categories": [ "blocks", "trust" ], "type": "registry:block" }