{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "api-key-list", "title": "ApiKeyList", "description": "Create, reveal-once, and revoke Neon API keys (personal and organization), with an inline create flow, a one-time secret reveal, and per-row revoke confirmation.", "dependencies": [ "@hugeicons/react", "@hugeicons/core-free-icons" ], "registryDependencies": [ "utils", "https://ui.neon.com/r/button.json", "https://ui.neon.com/r/input.json", "https://ui.neon.com/r/tooltip.json", "https://ui.neon.com/r/skeleton.json", "https://ui.neon.com/r/neon-tokens.json", "https://ui.neon.com/r/select.json" ], "files": [ { "path": "src/components/api-key-list/api-key-list.tsx", "content": "\"use client\";\n\nimport {\n Alert02Icon,\n Building01Icon,\n Copy01Icon,\n Delete02Icon,\n Key01Icon,\n PlusSignIcon,\n Tick02Icon,\n} from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { ComponentProps, FormEvent, ReactNode } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\nconst COPY_FLASH_MS = 1500;\n\n/** Where the key lives: a personal account key or an organization key. */\nexport type ApiKeyScope = \"personal\" | \"organization\";\n\nexport interface ApiKey {\n id: string;\n name: string;\n scope: ApiKeyScope;\n /** Preformatted creation date, e.g. \"Jul 12, 2026\". */\n createdAt: string;\n /** Preformatted last use, e.g. \"2h ago\". Omit for a never-used key. */\n lastUsedAt?: string;\n}\n\nconst SCOPE_ICON = {\n organization: Building01Icon,\n personal: Key01Icon,\n} as const;\n\nconst SCOPE_SUBLABEL: Record = {\n organization: \"Organization\",\n personal: \"Personal\",\n};\n\nconst SCOPES: { value: ApiKeyScope; label: string }[] = [\n { label: \"personal\", value: \"personal\" },\n { label: \"org\", value: \"organization\" },\n];\n\n/* ─────────────────────────────────────────────────────────\n * A copy that carries the real token and flashes a primary\n * check, announcing through a polite live region. The\n * \"Copied\" note masks the value under a gradient so the row\n * never breaks.\n * ───────────────────────────────────────────────────────── */\nconst CopyButton = ({ value, label }: { value: string; label: string }) => {\n const [copied, setCopied] = useState(false);\n\n const copy = async () => {\n setCopied(true);\n window.setTimeout(() => setCopied(false), COPY_FLASH_MS);\n\n try {\n await navigator.clipboard.writeText(value);\n } catch {\n // Clipboard unavailable (blur, permissions); the feedback still shows.\n }\n };\n\n return (\n
\n \n Copied\n \n \n \n \n \n }\n />\n {label}\n \n \n {copied ? `${label} copied` : \"\"}\n \n
\n );\n};\n\nconst ScopeToggle = ({\n scope,\n onSelect,\n}: {\n scope: ApiKeyScope;\n onSelect: (scope: ApiKeyScope) => void;\n}) => (\n
\n Key scope\n {SCOPES.map((entry) => (\n onSelect(entry.value)}\n type=\"button\"\n >\n {entry.label}\n \n ))}\n
\n);\n\ntype ScopeFilterValue = ApiKeyScope | \"all\";\n\nconst ScopeFilter = ({\n value,\n onChange,\n}: {\n value: ScopeFilterValue;\n onChange: (value: ScopeFilterValue) => void;\n}) => (\n {\n if (next !== null) {\n onChange(next as ScopeFilterValue);\n }\n }}\n value={value}\n >\n \n \n \n \n \n all\n \n \n personal\n \n \n org\n \n \n \n);\n\n/* The one-time reveal: the full token, a copy, and a warning that it\n * will never be shown again. Recessed well so it reads as a secret. */\nconst RevealOncePanel = ({\n name,\n secret,\n onDone,\n}: {\n name: string;\n secret: string;\n onDone: () => void;\n}) => (\n \n
\n \n

{name} created

\n
\n
\n \n {secret}\n \n \n
\n
\n

\n \n Copy it now. You will not see this key again.\n

\n \n
\n \n);\n\nconst CreateForm = ({\n pending,\n onSubmit,\n onCancel,\n}: {\n pending: boolean;\n onSubmit: (name: string, scope: ApiKeyScope) => void;\n onCancel: () => void;\n}) => {\n const [name, setName] = useState(\"\");\n const [scope, setScope] = useState(\"personal\");\n\n const submit = (event: FormEvent) => {\n event.preventDefault();\n\n if (name.trim()) {\n onSubmit(name.trim(), scope);\n }\n };\n\n return (\n \n setName(event.target.value)}\n placeholder=\"Key name\"\n value={name}\n />\n \n \n {pending ? \"Creating\\u2026\" : \"Create\"}\n \n \n Cancel\n \n \n );\n};\n\nconst HOLD_MS = 1000;\nconst RELEASE_MS = 180;\n\n/* Hold-to-confirm: a destructive fill sweeps left to right for HOLD_MS\n * (linear, it is progress), revealing a white copy of the label under the\n * same clip-path. Releasing early rewinds it. Pointer and keyboard both work.\n * Same grammar as the confirm-dialog. */\nconst HoldButton = ({\n label,\n onHold,\n}: {\n label: string;\n onHold: () => void;\n}) => {\n const [holding, setHolding] = useState(false);\n const timerRef = useRef(0);\n\n const cancel = () => {\n window.clearTimeout(timerRef.current);\n setHolding(false);\n };\n\n const start = () => {\n setHolding(true);\n timerRef.current = window.setTimeout(() => {\n setHolding(false);\n onHold();\n }, HOLD_MS);\n };\n\n useEffect(() => () => window.clearTimeout(timerRef.current), []);\n\n return (\n {\n if (event.repeat || !(event.key === \"Enter\" || event.key === \" \")) {\n return;\n }\n\n event.preventDefault();\n\n if (!holding) {\n start();\n }\n }}\n onKeyUp={cancel}\n onPointerCancel={cancel}\n onPointerDown={start}\n onPointerLeave={cancel}\n onPointerUp={cancel}\n size=\"xs\"\n type=\"button\"\n variant=\"ghost\"\n >\n {label}\n \n {label}\n \n \n );\n};\n\nconst KeyRow = ({\n apiKey,\n revoking,\n onAskRevoke,\n onCancelRevoke,\n onRevoke,\n}: {\n apiKey: ApiKey;\n revoking: boolean;\n onAskRevoke: () => void;\n onCancelRevoke: () => void;\n onRevoke: () => void;\n}) => (\n \n \n \n \n\n
\n

\n {apiKey.name}\n

\n

\n {SCOPE_SUBLABEL[apiKey.scope]}\n

\n
\n\n
\n

\n {`created ${apiKey.createdAt}`}\n

\n

\n {apiKey.lastUsedAt ? `used ${apiKey.lastUsedAt}` : \"never used\"}\n

\n
\n\n
\n \n \n \n \n }\n />\n Revoke\n \n
\n\n {revoking ? (\n
\n \n \n
\n ) : null}\n \n);\n\nexport type ApiKeyListProps = Omit<\n ComponentProps<\"div\">,\n \"children\" | \"onChange\"\n> & {\n /** The keys to list, in display order. */\n keys: ApiKey[];\n /**\n * Create a key of the chosen scope; return the full token to reveal once.\n * The create UI hides when omitted.\n */\n onCreate?: (name: string, scope: ApiKeyScope) => Promise | string;\n /** Revoke a key. Receives the whole key so the scope is known. */\n onRevoke?: (key: ApiKey) => Promise | void;\n /** Card title. */\n label?: string;\n isLoading?: boolean;\n error?: Error | string | null;\n};\n\nconst cardClassName =\n \"flex w-full min-w-0 flex-col rounded-lg border border-border/60 bg-card p-4 shadow-none ring-0\";\n\nconst Header = ({\n label,\n actions,\n}: {\n label: string;\n actions?: ComponentProps<\"div\">[\"children\"];\n}) => (\n
\n

{label}

\n {actions ? (\n
{actions}
\n ) : null}\n
\n);\n\nconst emptyMessage = (total: number, filter: ScopeFilterValue) => {\n if (total === 0) {\n return \"No API keys yet.\";\n }\n\n return `No ${filter === \"organization\" ? \"organization\" : \"personal\"} keys.`;\n};\n\nconst HeaderActions = ({\n showFilter,\n filter,\n onFilter,\n showCreate,\n onCreate,\n}: {\n showFilter: boolean;\n filter: ScopeFilterValue;\n onFilter: (value: ScopeFilterValue) => void;\n showCreate: boolean;\n onCreate: () => void;\n}) => (\n <>\n {showFilter ? : null}\n {showCreate ? (\n \n ) : null}\n \n);\n\n/**\n * Animate the body's height as it changes (create form opens, the reveal\n * panel appears, rows are added or revoked), so the card grows and shrinks\n * smoothly instead of jumping.\n */\nconst AnimatedHeight = ({ children }: { children: ReactNode }) => {\n const innerRef = useRef(null);\n const lastRef = useRef(null);\n const [height, setHeight] = useState();\n const [animating, setAnimating] = useState(false);\n\n useEffect(() => {\n const inner = innerRef.current;\n\n if (!inner) {\n return;\n }\n\n const observer = new ResizeObserver(() => {\n const next = inner.offsetHeight;\n\n if (lastRef.current !== null && lastRef.current !== next) {\n setAnimating(true);\n }\n\n lastRef.current = next;\n setHeight(next);\n });\n\n observer.observe(inner);\n lastRef.current = inner.offsetHeight;\n setHeight(inner.offsetHeight);\n\n return () => observer.disconnect();\n }, []);\n\n return (\n setAnimating(false)}\n style={{ height }}\n >\n
{children}
\n \n );\n};\n\nconst EmptyState = ({\n message,\n showHint,\n}: {\n message: string;\n showHint: boolean;\n}) => (\n
\n

{message}

\n {showHint ? (\n

\n Create one to call the Neon API.\n

\n ) : null}\n
\n);\n\nexport const ApiKeyList = ({\n keys,\n onCreate,\n onRevoke,\n label = \"API keys\",\n isLoading = false,\n error = null,\n className,\n ...props\n}: ApiKeyListProps) => {\n const [creating, setCreating] = useState(false);\n const [pending, setPending] = useState(false);\n const [created, setCreated] = useState<{ name: string; secret: string }>();\n const [revokingId, setRevokingId] = useState();\n const [filter, setFilter] = useState(\"all\");\n\n const handleCreate = async (name: string, scope: ApiKeyScope) => {\n if (!onCreate) {\n return;\n }\n\n setPending(true);\n\n try {\n const secret = await onCreate(name, scope);\n setCreated({ name, secret });\n setCreating(false);\n } finally {\n setPending(false);\n }\n };\n\n const handleRevoke = async (key: ApiKey) => {\n setRevokingId(undefined);\n await onRevoke?.(key);\n };\n\n if (isLoading) {\n return (\n \n
\n
\n \n \n
\n \n );\n }\n\n if (error) {\n const message = typeof error === \"string\" ? error : error.message;\n\n return (\n \n
\n

\n error\n {message}\n

\n \n );\n }\n\n const hasOrg = keys.some((key) => key.scope === \"organization\");\n const hasPersonal = keys.some((key) => key.scope === \"personal\");\n const showFilter = hasOrg && hasPersonal;\n const filtered =\n filter === \"all\" ? keys : keys.filter((key) => key.scope === filter);\n const showCreateButton = Boolean(onCreate) && !(creating || created);\n const showEmpty = filtered.length === 0 && !(creating || created);\n\n return (\n \n \n setCreating(true)}\n onFilter={setFilter}\n showCreate={showCreateButton}\n showFilter={showFilter}\n />\n }\n label={label}\n />\n\n \n
\n {creating ? (\n setCreating(false)}\n onSubmit={handleCreate}\n pending={pending}\n />\n ) : null}\n\n {created ? (\n setCreated(undefined)}\n secret={created.secret}\n />\n ) : null}\n\n {filtered.length > 0 ? (\n
    \n {filtered.map((apiKey) => (\n setRevokingId(apiKey.id)}\n onCancelRevoke={() => setRevokingId(undefined)}\n onRevoke={() => handleRevoke(apiKey)}\n revoking={revokingId === apiKey.id}\n />\n ))}\n
\n ) : null}\n\n {showEmpty ? (\n \n ) : null}\n
\n \n \n \n );\n};\n", "type": "registry:component" } ], "type": "registry:component" }