{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "team-invite-card", "title": "Team invite card", "description": "Team invite card is a production-ready cards component from BJORK UI, packaged for shadcn registries.", "dependencies": [ "clsx", "framer-motion", "lucide-react", "next-themes", "tailwind-merge" ], "files": [ { "path": "components/bjork-ui/cards/team-invite-card.tsx", "content": "\"use client\";\n\nimport {\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n type ClipboardEvent as ReactClipboardEvent,\n type KeyboardEvent as ReactKeyboardEvent,\n} from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Check, ChevronDown, Link2, Loader2, X } from \"lucide-react\";\nimport { LiveRegion } from \"@/components/bjork-ui/_core/a11y\";\nimport { ease } from \"@/components/bjork-ui/_core/motion\";\nimport {\n CardButton,\n CardFrame,\n focusRing,\n useCardTheme,\n useClock,\n useReducedMotionSafe,\n type CardTheme,\n} from \"@/components/bjork-ui/cards/card-kit\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface InviteRole {\n id: string;\n label: string;\n description?: string;\n}\n\nexport interface PendingInvite {\n id: string;\n email: string;\n role: string;\n /** Epoch ms. */\n sentAt: number;\n}\n\nexport interface TeamInviteCardProps {\n team?: string;\n roles?: InviteRole[];\n defaultRole?: string;\n /** Emails already on the team. Typing one flags it. */\n members?: string[];\n defaultPending?: PendingInvite[];\n /** Addresses already in the field at mount. */\n defaultEmails?: string[];\n seats?: { used: number; total: number };\n /** Resolve when the invites are sent; reject to keep the chips and show an error. Without it the card simulates a send. */\n onInvite?: (emails: string[], role: string) => Promise;\n onResend?: (invite: PendingInvite) => void;\n onRevoke?: (invite: PendingInvite) => void;\n /** Shareable join link. Omit to hide the row. */\n inviteLink?: string;\n /** Role people get through the link. Default \"member\". */\n linkRole?: string;\n /** Days an invite stays valid. Default 7. */\n expiresInDays?: number;\n /** Epoch ms. Freezes the clock for previews and tests. */\n now?: number;\n theme?: CardTheme;\n className?: string;\n}\n\nconst DAY = 86_400_000;\nconst NOW = Date.UTC(2026, 9, 8, 17);\n\nexport const TEAM_INVITE_SAMPLE = {\n team: \"Northpeak\",\n roles: [\n { id: \"admin\", label: \"Admin\", description: \"Billing, members and every project\" },\n { id: \"member\", label: \"Member\", description: \"Create and edit projects\" },\n { id: \"viewer\", label: \"Viewer\", description: \"Read-only access\" },\n ] satisfies InviteRole[],\n members: [\"mara@northpeak.co\", \"rowan@northpeak.co\", \"iko@northpeak.co\", \"dana@northpeak.co\", \"sol@northpeak.co\", \"tamsin@northpeak.co\"],\n pending: [\n { id: \"inv_1\", email: \"jules@halden.io\", role: \"member\", sentAt: NOW - 2 * DAY },\n { id: \"inv_2\", email: \"ana.reyes@cobalt.dev\", role: \"viewer\", sentAt: NOW - 6.5 * DAY },\n ] satisfies PendingInvite[],\n seats: { used: 6, total: 10 },\n inviteLink: \"https://fieldwork.app/join/np-7Hq2xK\",\n now: NOW,\n};\n\nfunction parseEmails(raw: string) {\n return raw\n .split(/[\\s,;]+/)\n .map((p) => p.trim().replace(/^<|>$/g, \"\"))\n .filter(Boolean);\n}\n\nconst EMAIL = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$/;\n\ntype ChipState = \"ok\" | \"invalid\" | \"member\" | \"pending\" | \"duplicate\";\n\ninterface Chip {\n email: string;\n state: ChipState;\n}\n\nconst CHIP_HINT: Record, string> = {\n invalid: \"Not a valid email\",\n member: \"Already on the team\",\n pending: \"Already invited\",\n duplicate: \"Listed twice\",\n};\n\n/**\n * Invite people by email: paste or type a list, pick a role, and send. Bad addresses, existing\n * members and seat limits are caught before sending; pending invites can be resent or revoked.\n */\nexport function TeamInviteCard({\n team = TEAM_INVITE_SAMPLE.team,\n roles = TEAM_INVITE_SAMPLE.roles,\n defaultRole,\n members = TEAM_INVITE_SAMPLE.members,\n defaultPending = TEAM_INVITE_SAMPLE.pending,\n defaultEmails = [],\n seats = TEAM_INVITE_SAMPLE.seats,\n onInvite,\n onResend,\n onRevoke,\n inviteLink = TEAM_INVITE_SAMPLE.inviteLink,\n linkRole = \"member\",\n expiresInDays = 7,\n now,\n theme = \"auto\",\n className,\n}: TeamInviteCardProps) {\n const { style } = useCardTheme(theme);\n const reduce = useReducedMotionSafe();\n const clock = useClock(now, 60_000);\n const titleId = useId();\n const inputId = useId();\n const hintId = useId();\n const roleId = useId();\n\n const [emails, setEmails] = useState(defaultEmails);\n const [draft, setDraft] = useState(\"\");\n const [role, setRole] = useState(defaultRole ?? roles[1]?.id ?? roles[0]?.id ?? \"\");\n const [pending, setPending] = useState(defaultPending);\n const [sending, setSending] = useState(false);\n const [error, setError] = useState(null);\n const [message, setMessage] = useState(\"\");\n const [resent, setResent] = useState>(new Set());\n const [linkCopied, setLinkCopied] = useState(false);\n const inputRef = useRef(null);\n const timers = useRef([]);\n useEffect(() => () => timers.current.forEach((t) => window.clearTimeout(t)), []);\n\n const memberSet = useMemo(() => new Set(members.map((m) => m.toLowerCase())), [members]);\n const pendingSet = useMemo(() => new Set(pending.map((p) => p.email.toLowerCase())), [pending]);\n\n const classify = (list: string[]): Chip[] =>\n list.map((email, i) => {\n const e = email.toLowerCase();\n let state: ChipState = \"ok\";\n if (!EMAIL.test(email)) state = \"invalid\";\n else if (memberSet.has(e)) state = \"member\";\n else if (pendingSet.has(e)) state = \"pending\";\n else if (list.findIndex((x) => x.toLowerCase() === e) !== i) state = \"duplicate\";\n return { email, state };\n });\n const chips = classify(emails);\n const valid = chips.filter((c) => c.state === \"ok\");\n const problems = chips.filter((c) => c.state !== \"ok\");\n const seatsLeft = Math.max(0, seats.total - seats.used - pending.length);\n const overSeats = valid.length > seatsLeft;\n\n const commit = (raw: string) => {\n const parts = parseEmails(raw);\n if (parts.length === 0) return;\n setEmails((list) => [...list, ...parts]);\n setDraft(\"\");\n setError(null);\n };\n\n const removeChip = (i: number) => {\n setEmails((list) => list.filter((_, j) => j !== i));\n inputRef.current?.focus();\n };\n\n const onKey = (e: ReactKeyboardEvent) => {\n if ((e.key === \"Enter\" || e.key === \",\" || e.key === \" \" || e.key === \";\") && draft.trim()) {\n e.preventDefault();\n commit(draft);\n } else if (e.key === \"Enter\" && !draft.trim() && valid.length) {\n e.preventDefault();\n void send();\n } else if (e.key === \"Backspace\" && !draft && emails.length) {\n e.preventDefault();\n setEmails((list) => list.slice(0, -1));\n }\n };\n\n const onPaste = (e: ReactClipboardEvent) => {\n const text = e.clipboardData.getData(\"text\");\n if (/[\\s,;]/.test(text.trim())) {\n e.preventDefault();\n commit(draft + text);\n }\n };\n\n const send = async () => {\n // Include whatever is still in the input, so a click on Send never drops the last address.\n const all = [...emails, ...parseEmails(draft)];\n if (draft.trim()) commit(draft);\n const list = classify(all)\n .filter((c) => c.state === \"ok\")\n .map((c) => c.email);\n if (!list.length || list.length > seatsLeft || sending) return;\n setSending(true);\n setError(null);\n try {\n if (onInvite) await onInvite(list, role);\n else await new Promise((r) => setTimeout(r, 900));\n const sentAt = clock ?? Date.now();\n setPending((p) => [...list.map((email, i) => ({ id: `new-${sentAt}-${i}`, email, role, sentAt })), ...p]);\n setEmails((all) => all.filter((x) => !list.includes(x)));\n const roleLabel = roles.find((r) => r.id === role)?.label ?? role;\n setMessage(`Sent ${list.length} ${list.length === 1 ? \"invite\" : \"invites\"} as ${roleLabel}`);\n } catch {\n setError(\"Invites couldn’t be sent. Check your connection and try again.\");\n } finally {\n setSending(false);\n }\n };\n\n const resend = (inv: PendingInvite) => {\n onResend?.(inv);\n setResent((s) => new Set(s).add(inv.id));\n setMessage(`Invite resent to ${inv.email}`);\n timers.current.push(\n window.setTimeout(\n () =>\n setResent((s) => {\n const n = new Set(s);\n n.delete(inv.id);\n return n;\n }),\n 4000,\n ),\n );\n };\n\n const revoke = (inv: PendingInvite) => {\n onRevoke?.(inv);\n setPending((p) => p.filter((x) => x.id !== inv.id));\n setMessage(`Revoked invite for ${inv.email}`);\n inputRef.current?.focus();\n };\n\n const copyLink = async () => {\n try {\n await navigator.clipboard.writeText(inviteLink);\n setLinkCopied(true);\n setMessage(\"Invite link copied\");\n timers.current.push(window.setTimeout(() => setLinkCopied(false), 1800));\n } catch {\n setLinkCopied(false);\n }\n };\n\n const expiry = (inv: PendingInvite) => {\n if (clock === null) return \"\";\n const left = Math.ceil((inv.sentAt + expiresInDays * DAY - clock) / DAY);\n if (left <= 0) return \"Expired\";\n return left === 1 ? \"Expires tomorrow\" : `Expires in ${left} days`;\n };\n\n const usedPct = Math.min(1, (seats.used + pending.length) / seats.total);\n const roleMeta = roles.find((r) => r.id === role);\n\n return (\n \n
\n
\n

\n Invite to {team}\n

\n \n {seatsLeft} of {seats.total} seats free\n \n
\n \n {Array.from({ length: seats.total }, (_, i) => (\n \n ))}\n
\n {usedPct === 1 ? \"All seats are in use.\" : \"\"}\n \n\n
\n \n inputRef.current?.focus()}\n className={cn(\n \"mt-1.5 flex min-h-[44px] cursor-text flex-wrap items-center gap-1.5 rounded-[12px] border bg-[color:var(--bjork-card-inset)] p-1.5 transition-[border-color,box-shadow] focus-within:border-[color:var(--bjork-accent)] focus-within:shadow-[0_0_0_3px_var(--bjork-accent-soft)]\",\n problems.length ? \"border-[color:var(--bjork-warning)]\" : \"border-[color:var(--bjork-border)]\",\n )}\n >\n
    \n \n {chips.map((c, i) => (\n \n {c.email}\n {c.state !== \"ok\" && , {CHIP_HINT[c.state]}}\n {\n e.stopPropagation();\n removeChip(i);\n }}\n aria-label={`Remove ${c.email}`}\n className={cn(\"grid size-6 cursor-pointer place-items-center rounded-[6px] opacity-60 hover:opacity-100\", focusRing)}\n >\n \n \n \n ))}\n \n
\n setDraft(e.target.value)}\n onKeyDown={onKey}\n onPaste={onPaste}\n onBlur={() => draft.trim() && commit(draft)}\n aria-describedby={hintId}\n placeholder={emails.length ? \"\" : \"name@company.com, …\"}\n className=\"h-7 min-w-[8rem] flex-1 bg-transparent px-1.5 text-[13px] outline-none placeholder:text-[color:var(--bjork-text-soft)]\"\n />\n
\n

\n {error ? (\n {error}\n ) : overSeats ? (\n \n {valid.length - seatsLeft} more than your free seats. Remove some or add seats.\n \n ) : problems.length ? (\n \n {problems.length} {problems.length === 1 ? \"address\" : \"addresses\"} will be skipped: {problems.map((p) => CHIP_HINT[p.state as Exclude].toLowerCase()).filter((v, i, a) => a.indexOf(v) === i).join(\", \")}.\n \n ) : (\n \"Separate with commas or paste a list.\"\n )}\n

\n \n\n
\n
\n \n
\n setRole(e.target.value)}\n className={cn(\n \"h-9 w-full cursor-pointer appearance-none rounded-[10px] border border-[color:var(--bjork-border)] bg-[color:var(--bjork-card-raised)] pl-3 pr-8 text-[13px] text-[color:var(--bjork-text)]\",\n focusRing,\n )}\n >\n {roles.map((r) => (\n \n ))}\n \n \n
\n
\n : undefined}\n className=\"min-w-[7.5rem]\"\n >\n {sending ? \"Sending\" : valid.length > 1 ? `Send ${valid.length} invites` : \"Send invite\"}\n \n
\n {roleMeta?.description && (\n

{roleMeta.description}

\n )}\n\n {pending.length > 0 && (\n
\n

\n Pending · {pending.length}\n

\n
    \n \n {pending.map((inv) => {\n const exp = expiry(inv);\n return (\n \n
    \n \n {inv.email[0]}\n \n
    \n

    {inv.email}

    \n

    \n {roles.find((r) => r.id === inv.role)?.label ?? inv.role}\n {exp && ` · ${exp}`}\n

    \n
    \n resend(inv)}\n aria-label={resent.has(inv.id) ? `Invite resent to ${inv.email}` : `Resend invite to ${inv.email}`}\n className=\"px-2\"\n >\n {resent.has(inv.id) ? (\n <>\n \n Sent\n \n ) : (\n \"Resend\"\n )}\n \n revoke(inv)}\n aria-label={`Revoke invite for ${inv.email}`}\n className={cn(\n \"grid size-8 cursor-pointer place-items-center rounded-[8px] text-[color:var(--bjork-text-muted)] transition-colors hover:bg-[color:var(--bjork-error-soft)] hover:text-[color:var(--bjork-error)]\",\n focusRing,\n )}\n >\n \n \n
    \n \n );\n })}\n     \n
\n
\n )}\n\n {inviteLink && (\n
\n \n {inviteLink}\n

\n Anyone with the link joins as {roles.find((r) => r.id === linkRole)?.label ?? linkRole}\n

\n : undefined}>\n {linkCopied ? \"Copied\" : \"Copy link\"}\n \n
\n )}\n \n \n );\n}\n", "type": "registry:component", "target": "@components/bjork-ui/cards/team-invite-card.tsx" }, { "path": "components/bjork-ui/_core/a11y.tsx", "content": "import type { ReactNode } from \"react\";\n\n// Text for assistive tech only.\nexport function VisuallyHidden({ children }: { children: ReactNode }) {\n return {children};\n}\n\n// Announces `message` when it changes. Same text re-rendered does not re-announce.\nexport function LiveRegion({\n message,\n politeness = \"polite\",\n}: {\n message: string;\n politeness?: \"polite\" | \"assertive\";\n}) {\n return (\n \n {message}\n \n );\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/a11y.tsx" }, { "path": "components/bjork-ui/_core/motion.ts", "content": "// Shared springs, easings and durations. Components import these instead of inventing values.\n\nexport const springs = {\n press: { type: \"spring\", stiffness: 500, damping: 30, mass: 0.6 },\n snappy: { type: \"spring\", stiffness: 400, damping: 25, mass: 1 },\n standard: { type: \"spring\", stiffness: 300, damping: 30, mass: 0.8 },\n soft: { type: \"spring\", stiffness: 200, damping: 25, mass: 1.2 },\n settle: { type: \"spring\", stiffness: 380, damping: 30, mass: 0.8 },\n blurIn: { type: \"spring\", stiffness: 400, damping: 28, mass: 0.6 },\n} as const;\n\nexport const ease = {\n out: [0.23, 1, 0.32, 1],\n inOut: [0.77, 0, 0.175, 1],\n drawer: [0.32, 0.72, 0, 1],\n} as const;\n\nexport const easeCss = {\n out: \"cubic-bezier(0.23,1,0.32,1)\",\n inOut: \"cubic-bezier(0.77,0,0.175,1)\",\n drawer: \"cubic-bezier(0.32,0.72,0,1)\",\n} as const;\n\nexport const durations = { press: 140, tooltip: 160, menu: 200, panel: 280 } as const; // ms\n\n// Cubic bezier easing for canvas and rAF code. Returns progress y for input x in [0, 1].\nexport function cubicBezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number {\n const cx = 3 * x1;\n const bx = 3 * (x2 - x1) - cx;\n const ax = 1 - cx - bx;\n const cy = 3 * y1;\n const by = 3 * (y2 - y1) - cy;\n const ay = 1 - cy - by;\n const sampleX = (s: number) => ((ax * s + bx) * s + cx) * s;\n const sampleY = (s: number) => ((ay * s + by) * s + cy) * s;\n const sampleDX = (s: number) => (3 * ax * s + 2 * bx) * s + cx;\n\n const solveX = (x: number) => {\n let s = x;\n for (let i = 0; i < 8; i++) {\n const err = sampleX(s) - x;\n if (Math.abs(err) < 1e-6) return s;\n const d = sampleDX(s);\n if (Math.abs(d) < 1e-6) break;\n s -= err / d;\n }\n let lo = 0;\n let hi = 1;\n s = x;\n while (lo < hi) {\n const v = sampleX(s);\n if (Math.abs(v - x) < 1e-6) return s;\n if (x > v) lo = s;\n else hi = s;\n s = (lo + hi) / 2;\n if (hi - lo < 1e-7) break;\n }\n return s;\n };\n\n return (t: number) => {\n if (t <= 0) return 0;\n if (t >= 1) return 1;\n return sampleY(solveX(t));\n };\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/motion.ts" }, { "path": "components/bjork-ui/cards/card-kit.tsx", "content": "\"use client\";\n\nimport {\n forwardRef,\n useSyncExternalStore,\n type ButtonHTMLAttributes,\n type CSSProperties,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { useReducedMotion } from \"framer-motion\";\nimport type { BjorkTone } from \"@/components/bjork-ui/_core/palette\";\nimport { surfaceVars } from \"@/components/bjork-ui/_core/surface\";\nimport { useBjorkTone } from \"@/components/bjork-ui/_core/tone\";\nimport { cn } from \"@/lib/utils\";\n\n/** \"auto\" follows the site theme (next-themes). \"light\" and \"dark\" pin the card. */\nexport type CardTheme = \"light\" | \"dark\" | \"auto\";\n\n/**\n * Card tokens. They are written onto the card root as the library's `--bjork-*` custom properties,\n * so a pinned theme wins over the page theme, and the status colours the global sheet lacks\n * (success, warning, error) are always defined.\n */\nexport const CARD_TOKENS = {\n dark: {\n card: \"#141414\",\n raised: \"#1b1b1b\",\n inset: \"#0d0d0d\",\n hover: \"#1f1f1f\",\n border: \"#242424\",\n borderStrong: \"#363636\",\n hair: \"rgba(237,237,237,0.08)\",\n text: \"#ededed\",\n textMedium: \"rgba(237,237,237,0.74)\",\n textMuted: \"rgba(237,237,237,0.56)\",\n textSoft: \"rgba(237,237,237,0.4)\",\n textFaint: \"rgba(237,237,237,0.22)\",\n accent: \"#ec5c13\",\n accentInk: \"#f27a3c\",\n accentFill: \"#b84a12\",\n accentFillHover: \"#c95517\",\n accentFg: \"#fff2ea\",\n accentSoft: \"rgba(236,92,19,0.13)\",\n accentMuted: \"rgba(236,92,19,0.26)\",\n success: \"#4cc38a\",\n successSoft: \"rgba(76,195,138,0.13)\",\n warning: \"#f2b544\",\n warningSoft: \"rgba(242,181,68,0.13)\",\n error: \"#ff6b5c\",\n errorSoft: \"rgba(255,107,92,0.13)\",\n track: \"#262626\",\n shadow:\n \"inset 0 1px 0 rgba(255,255,255,0.045), 0 1px 0 rgba(0,0,0,0.5), 0 24px 48px -28px rgba(0,0,0,0.9)\",\n raisedShadow: \"inset 0 1px 0 rgba(255,255,255,0.04)\",\n },\n light: {\n card: \"#fffcf6\",\n raised: \"#f7f1e6\",\n inset: \"#f1eadd\",\n hover: \"#f3ecdf\",\n border: \"#ebe2d4\",\n borderStrong: \"#dbcfbd\",\n hair: \"rgba(23,23,23,0.07)\",\n text: \"#171717\",\n textMedium: \"rgba(23,23,23,0.76)\",\n textMuted: \"rgba(23,23,23,0.62)\",\n textSoft: \"rgba(23,23,23,0.46)\",\n textFaint: \"rgba(23,23,23,0.2)\",\n accent: \"#ec7d43\",\n accentInk: \"#a84a19\",\n accentFill: \"#ec7d43\",\n accentFillHover: \"#f0935f\",\n accentFg: \"#3f2112\",\n accentSoft: \"rgba(236,125,67,0.12)\",\n accentMuted: \"rgba(236,125,67,0.24)\",\n success: \"#1b7f4d\",\n successSoft: \"rgba(31,138,85,0.11)\",\n warning: \"#966000\",\n warningSoft: \"rgba(168,107,0,0.11)\",\n error: \"#c0331d\",\n errorSoft: \"rgba(200,54,31,0.1)\",\n track: \"#ebe3d6\",\n shadow:\n \"inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(66,52,33,0.06), 0 22px 44px -28px rgba(66,52,33,0.26)\",\n raisedShadow: \"inset 0 1px 0 rgba(255,255,255,0.7)\",\n },\n} as const;\n\nexport type CardTokens = (typeof CARD_TOKENS)[BjorkTone];\n\nexport function cardVars(tone: BjorkTone): CSSProperties {\n const t = CARD_TOKENS[tone];\n return {\n colorScheme: tone,\n ...surfaceVars(tone),\n \"--bjork-card\": t.card,\n \"--bjork-card-raised\": t.raised,\n \"--bjork-card-inset\": t.inset,\n \"--bjork-card-hover\": t.hover,\n \"--bjork-border\": t.border,\n \"--bjork-border-strong\": t.borderStrong,\n \"--bjork-hair\": t.hair,\n \"--bjork-text\": t.text,\n \"--bjork-text-medium\": t.textMedium,\n \"--bjork-text-muted\": t.textMuted,\n \"--bjork-text-soft\": t.textSoft,\n \"--bjork-text-faint\": t.textFaint,\n \"--bjork-accent\": t.accent,\n \"--bjork-accent-ink\": t.accentInk,\n \"--bjork-accent-fill\": t.accentFill,\n \"--bjork-accent-fill-hover\": t.accentFillHover,\n \"--bjork-accent-foreground\": t.accentFg,\n \"--bjork-accent-soft\": t.accentSoft,\n \"--bjork-accent-muted\": t.accentMuted,\n \"--bjork-success\": t.success,\n \"--bjork-success-soft\": t.successSoft,\n \"--bjork-warning\": t.warning,\n \"--bjork-warning-soft\": t.warningSoft,\n \"--bjork-error\": t.error,\n \"--bjork-error-soft\": t.errorSoft,\n \"--bjork-track\": t.track,\n \"--bjork-card-shadow\": t.shadow,\n \"--bjork-raised-shadow\": t.raisedShadow,\n \"--bjork-ring-offset\": t.card,\n } as CSSProperties;\n}\n\n/** Resolves the card tone and the CSS variables for it. */\nexport function useCardTheme(theme: CardTheme = \"auto\") {\n const tone = useBjorkTone(theme === \"auto\" ? undefined : theme);\n return { tone, tokens: CARD_TOKENS[tone], style: cardVars(tone) };\n}\n\nconst noopSubscribe = () => () => {};\n\n/** True after hydration. The server render and the first client render both see false. */\nexport function useHydrated() {\n return useSyncExternalStore(\n noopSubscribe,\n () => true,\n () => false,\n );\n}\n\n/** Reduced-motion preference, hydration-safe: false until mounted. */\nexport function useReducedMotionSafe() {\n const hydrated = useHydrated();\n const reduced = useReducedMotion();\n return hydrated && reduced === true;\n}\n\nconst clockStores = new Map void) => () => void; get: () => number }>();\n\nfunction clockStore(stepMs: number) {\n let store = clockStores.get(stepMs);\n if (!store) {\n store = {\n subscribe: (cb) => {\n const id = window.setInterval(cb, Math.min(stepMs, 1000));\n return () => window.clearInterval(id);\n },\n get: () => Math.floor(Date.now() / stepMs) * stepMs,\n };\n clockStores.set(stepMs, store);\n }\n return store;\n}\n\n/**\n * Wall clock rounded to `stepMs`. A fixed `now` (previews, tests) wins. Returns null during SSR and\n * hydration so server and client text agree; callers render a neutral fallback for that frame.\n */\nexport function useClock(now: number | undefined, stepMs = 60_000): number | null {\n const store = clockStore(stepMs);\n const live = useSyncExternalStore(store.subscribe, store.get, () => null);\n return now ?? live;\n}\n\nexport const focusRing =\n \"outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--bjork-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--bjork-ring-offset)]\";\n\nexport interface CardFrameProps extends HTMLAttributes {\n style?: CSSProperties;\n /** Width in px, capped at the container width. Default 420. */\n maxWidth?: number;\n as?: \"section\" | \"article\" | \"div\";\n}\n\n/** The shared card surface: tokens, radius, border, shadow and a container query root. */\nexport const CardFrame = forwardRef(function CardFrame(\n { as: Tag = \"section\", maxWidth = 420, className, style, children, ...rest },\n ref,\n) {\n return (\n \n {children}\n \n );\n});\n\ntype ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\";\n\nexport interface CardButtonProps extends ButtonHTMLAttributes {\n variant?: ButtonVariant;\n size?: \"sm\" | \"md\";\n icon?: ReactNode;\n}\n\nconst buttonVariants: Record = {\n primary:\n \"bg-[color:var(--bjork-accent-fill)] text-[color:var(--bjork-accent-foreground)] hover:bg-[color:var(--bjork-accent-fill-hover)] shadow-[inset_0_1px_0_rgba(255,255,255,0.16)]\",\n secondary:\n \"border border-[color:var(--bjork-border)] bg-[color:var(--bjork-card-raised)] text-[color:var(--bjork-text)] shadow-[var(--bjork-raised-shadow)] hover:bg-[color:var(--bjork-card-hover)] hover:border-[color:var(--bjork-border-strong)]\",\n ghost:\n \"text-[color:var(--bjork-text-medium)] hover:bg-[color:var(--bjork-card-hover)] hover:text-[color:var(--bjork-text)]\",\n danger:\n \"border border-[color:var(--bjork-border)] bg-[color:var(--bjork-error-soft)] text-[color:var(--bjork-error)] hover:border-[color:var(--bjork-error)]\",\n};\n\nexport const CardButton = forwardRef(function CardButton(\n { variant = \"secondary\", size = \"md\", icon, className, children, type = \"button\", ...rest },\n ref,\n) {\n return (\n \n {icon}\n {children}\n \n );\n});\n\nexport type PillTone = \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"error\";\n\nconst pillTones: Record = {\n neutral: \"bg-[color:var(--bjork-hair)] text-[color:var(--bjork-text-medium)]\",\n accent: \"bg-[color:var(--bjork-accent-soft)] text-[color:var(--bjork-accent-ink)]\",\n success: \"bg-[color:var(--bjork-success-soft)] text-[color:var(--bjork-success)]\",\n warning: \"bg-[color:var(--bjork-warning-soft)] text-[color:var(--bjork-warning)]\",\n error: \"bg-[color:var(--bjork-error-soft)] text-[color:var(--bjork-error)]\",\n};\n\n/** Small status label. `dot` adds a leading status dot; `pulse` animates it (not under reduced motion). */\nexport function Pill({\n tone = \"neutral\",\n dot = false,\n pulse = false,\n className,\n children,\n}: {\n tone?: PillTone;\n dot?: boolean;\n pulse?: boolean;\n className?: string;\n children: ReactNode;\n}) {\n return (\n \n {dot && (\n \n {pulse && (\n \n )}\n \n \n )}\n {children}\n \n );\n}\n\n/** Loading placeholder. Shimmers unless reduced motion is on. */\nexport function Skeleton({ className, style }: { className?: string; style?: CSSProperties }) {\n return (\n \n );\n}\n\n/** Deterministic pseudo-random generator for sample data, so server and client agree. */\nexport function seeded(seed: number) {\n let s = seed >>> 0 || 1;\n return () => {\n s ^= s << 13;\n s ^= s >>> 17;\n s ^= s << 5;\n return ((s >>> 0) % 100_000) / 100_000;\n };\n}\n", "type": "registry:component", "target": "@components/bjork-ui/cards/card-kit.tsx" }, { "path": "components/bjork-ui/_core/palette.ts", "content": "export type BjorkTone = \"dark\" | \"light\";\n\n// Canvas, WebGL and SVG attribute colours. DOM code uses the CSS tokens with these as fallbacks.\nexport const BJORK_PALETTE = {\n dark: {\n bg: \"#050505\", stage: \"#111111\", surface: \"#121212\", raised: \"#161616\", active: \"#202020\",\n border: \"#232323\", borderStrong: \"#343434\",\n text: \"#ededed\", textMedium: \"rgba(237,237,237,0.72)\", textMuted: \"rgba(237,237,237,0.6)\",\n textSoft: \"rgba(237,237,237,0.5)\", textFaint: \"rgba(237,237,237,0.22)\", hair: \"rgba(237,237,237,0.12)\",\n accent: \"#ec5c13\", accentInk: \"#ec5c13\", accentFill: \"#b84a12\", accentSoft: \"rgba(236,92,19,0.12)\", accentMuted: \"rgba(236,92,19,0.24)\",\n accentFg: \"#fff2ea\", success: \"#4cc38a\", warning: \"#f2b544\", error: \"#ff5c4d\",\n },\n light: {\n bg: \"#f7f5ef\", stage: \"#f7f5ef\", surface: \"#fffcf6\", raised: \"#f5efe3\", active: \"#efe7d8\",\n border: \"#eee6db\", borderStrong: \"#e1d7c8\",\n text: \"#171717\", textMedium: \"rgba(23,23,23,0.78)\", textMuted: \"rgba(23,23,23,0.68)\",\n textSoft: \"rgba(23,23,23,0.62)\", textFaint: \"rgba(23,23,23,0.22)\", hair: \"rgba(23,23,23,0.10)\",\n accent: \"#ec7d43\", accentInk: \"#b4531f\", accentFill: \"#ec7d43\", accentSoft: \"rgba(236,125,67,0.10)\", accentMuted: \"rgba(236,125,67,0.20)\",\n accentFg: \"#3f2112\", success: \"#1f8a55\", warning: \"#a86b00\", error: \"#c8361f\",\n },\n} as const;\n", "type": "registry:component", "target": "@components/bjork-ui/_core/palette.ts" }, { "path": "components/bjork-ui/_core/surface.ts", "content": "import type { CSSProperties } from \"react\";\nimport type { BjorkTone } from \"./palette\";\n\n// The library surface (CANON.md §1). Values mirror app/globals.css :root and .dark. Change both together.\nexport const BJORK_SURFACE = {\n light: {\n surface: \"#fffcf6\", surfaceMuted: \"rgba(250, 246, 237, 0.94)\", surfaceHover: \"#f5efe3\", surfaceActive: \"#efe7d8\",\n panel: \"#f8f2e7\", menu: \"rgba(255, 252, 246, 0.98)\", field: \"rgba(255, 252, 246, 0.96)\",\n fieldMuted: \"rgba(248, 242, 231, 0.82)\", fieldInset: \"rgba(239, 231, 216, 0.72)\",\n border: \"#eee6db\", borderMuted: \"#f5ede2\", borderStrong: \"#e1d7c8\",\n shadowSurface: \"inset 0 7px 14px rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.92), inset 1px 0 0 rgba(88, 72, 49, 0.026), inset -1px 0 0 rgba(255, 255, 255, 0.68), 0 14px 22px -9px rgba(66, 52, 33, 0.11)\",\n shadowSoft: \"inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)\",\n shadowPanel: \"inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.64), 0 18px 38px -30px rgba(66, 52, 33, 0.2)\",\n shadowMenu: \"inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 0 12px 24px rgba(88, 72, 49, 0.022), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.62), 0 22px 44px -26px rgba(66, 52, 33, 0.22)\",\n shadowInset: \"inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)\",\n },\n dark: {\n surface: \"#121212\", surfaceMuted: \"rgba(22, 22, 22, 0.92)\", surfaceHover: \"#161616\", surfaceActive: \"#202020\",\n panel: \"#0d0d0d\", menu: \"rgba(18, 18, 18, 0.98)\", field: \"rgba(18, 18, 18, 0.95)\",\n fieldMuted: \"rgba(18, 18, 18, 0.55)\", fieldInset: \"rgba(9, 9, 9, 0.75)\",\n border: \"#232323\", borderMuted: \"#1c1c1c\", borderStrong: \"#343434\",\n shadowSurface: \"inset 0 7px 14px rgba(255, 255, 255, 0.03), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.06), 0 14px 20px -6px rgba(0, 0, 0, 0.45)\",\n shadowSoft: \"inset 0 1px 0 rgba(255, 255, 255, 0.045)\",\n shadowPanel: \"inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 36px -28px rgba(0, 0, 0, 0.9)\",\n shadowMenu: \"inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 12px 24px rgba(255, 255, 255, 0.018), inset 0 -18px 26px rgba(0, 0, 0, 0.24), 0 22px 42px -22px rgba(0, 0, 0, 0.9)\",\n shadowInset: \"inset 0 1px 10px rgba(0, 0, 0, 0.45)\",\n },\n} as const;\n\n/** Writes the surface tokens for a pinned tone as --bjork-* custom properties. Spread first; kit-specific keys may override. */\nexport function surfaceVars(tone: BjorkTone): CSSProperties {\n const s = BJORK_SURFACE[tone];\n return {\n \"--bjork-surface\": s.surface, \"--bjork-surface-muted\": s.surfaceMuted, \"--bjork-surface-hover\": s.surfaceHover,\n \"--bjork-surface-active\": s.surfaceActive, \"--bjork-panel\": s.panel, \"--bjork-menu\": s.menu, \"--bjork-field\": s.field,\n \"--bjork-field-muted\": s.fieldMuted, \"--bjork-field-inset\": s.fieldInset, \"--bjork-border\": s.border,\n \"--bjork-border-muted\": s.borderMuted, \"--bjork-border-strong\": s.borderStrong,\n \"--bjork-shadow-surface\": s.shadowSurface, \"--bjork-shadow-soft\": s.shadowSoft, \"--bjork-shadow-panel\": s.shadowPanel,\n \"--bjork-shadow-menu\": s.shadowMenu, \"--bjork-shadow-inset\": s.shadowInset,\n } as CSSProperties;\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/surface.ts" }, { "path": "components/bjork-ui/_core/tone.ts", "content": "\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\nimport { useTheme } from \"next-themes\";\nimport type { BjorkTone } from \"./palette\";\n\nconst subscribeNoop = () => () => {};\nconst getMounted = () => true;\nconst getServerMounted = () => false;\n\n/**\n * Resolves the tone for a component. An explicit `tone` always wins.\n * Otherwise it follows next-themes' resolved theme, but only after mount,\n * so the server render and first client render agree on dark.\n */\nexport function useBjorkTone(tone?: BjorkTone): BjorkTone {\n const { resolvedTheme } = useTheme();\n const mounted = useSyncExternalStore(subscribeNoop, getMounted, getServerMounted);\n if (tone) return tone;\n if (!mounted) return \"dark\";\n return resolvedTheme === \"light\" ? \"light\" : \"dark\";\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/tone.ts" }, { "path": "lib/utils.ts", "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n", "type": "registry:lib", "target": "@lib/utils.ts" } ], "cssVars": { "light": { "bjork-bg": "#f7f3ea", "bjork-surface": "#fffcf6", "bjork-surface-muted": "rgba(250, 246, 237, 0.94)", "bjork-surface-hover": "#f5efe3", "bjork-surface-active": "#efe7d8", "bjork-panel": "#f8f2e7", "bjork-menu": "rgba(255, 252, 246, 0.98)", "bjork-field": "rgba(255, 252, 246, 0.96)", "bjork-field-muted": "rgba(248, 242, 231, 0.82)", "bjork-field-inset": "rgba(239, 231, 216, 0.72)", "bjork-error-bg": "#fff0e8", "bjork-text": "#171717", "bjork-text-strong": "rgba(23, 23, 23, 0.9)", "bjork-text-medium": "rgba(23, 23, 23, 0.78)", "bjork-text-muted": "rgba(23, 23, 23, 0.68)", "bjork-text-soft": "rgba(23, 23, 23, 0.62)", "bjork-text-faint": "rgba(23, 23, 23, 0.22)", "bjork-inverted-text": "#fff8f0", "bjork-border": "#eee6db", "bjork-border-muted": "#f5ede2", "bjork-border-strong": "#e1d7c8", "bjork-thumb": "#a49b8e", "bjork-track": "#ded6ca", "bjork-accent": "#ec7d43", "bjork-accent-hover": "#f0935f", "bjork-accent-soft": "rgba(236, 125, 67, 0.1)", "bjork-accent-muted": "rgba(236, 125, 67, 0.2)", "bjork-accent-badge": "rgba(236, 125, 67, 0.16)", "bjork-accent-badge-foreground": "#8d421d", "bjork-accent-foreground": "#3f2112", "bjork-accent-fill": "#ec7d43", "bjork-accent-fill-hover": "#f0935f", "bjork-shadow-surface": "inset 0 7px 14px rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.92), inset 1px 0 0 rgba(88, 72, 49, 0.026), inset -1px 0 0 rgba(255, 255, 255, 0.68), 0 14px 22px -9px rgba(66, 52, 33, 0.11)", "bjork-shadow-soft": "inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)", "bjork-shadow-panel": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.64), 0 18px 38px -30px rgba(66, 52, 33, 0.2)", "bjork-shadow-menu": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 0 12px 24px rgba(88, 72, 49, 0.022), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.62), 0 22px 44px -26px rgba(66, 52, 33, 0.22)", "bjork-shadow-inset": "inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)", "bjork-ring-offset": "#f7f3ea" }, "dark": { "bjork-bg": "#111111", "bjork-surface": "#121212", "bjork-surface-muted": "rgba(22, 22, 22, 0.92)", "bjork-surface-hover": "#161616", "bjork-surface-active": "#202020", "bjork-panel": "#0d0d0d", "bjork-menu": "rgba(18, 18, 18, 0.98)", "bjork-field": "rgba(18, 18, 18, 0.95)", "bjork-field-muted": "rgba(18, 18, 18, 0.55)", "bjork-field-inset": "rgba(9, 9, 9, 0.75)", "bjork-error-bg": "#130d0a", "bjork-text": "#ededed", "bjork-text-strong": "rgba(237, 237, 237, 0.9)", "bjork-text-medium": "rgba(237, 237, 237, 0.72)", "bjork-text-muted": "rgba(237, 237, 237, 0.6)", "bjork-text-soft": "rgba(237, 237, 237, 0.5)", "bjork-text-faint": "rgba(237, 237, 237, 0.22)", "bjork-inverted-text": "#080808", "bjork-border": "#232323", "bjork-border-muted": "#1c1c1c", "bjork-border-strong": "#343434", "bjork-thumb": "#626262", "bjork-track": "#090909", "bjork-accent": "#ec5c13", "bjork-accent-hover": "#f07832", "bjork-accent-soft": "rgba(236, 92, 19, 0.12)", "bjork-accent-muted": "rgba(236, 92, 19, 0.24)", "bjork-accent-badge": "#b84a12", "bjork-accent-badge-foreground": "#fff2ea", "bjork-accent-foreground": "#fff2ea", "bjork-accent-fill": "#b84a12", "bjork-accent-fill-hover": "#a84a14", "bjork-shadow-surface": "inset 0 7px 14px rgba(255, 255, 255, 0.03), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.06), 0 14px 20px -6px rgba(0, 0, 0, 0.45)", "bjork-shadow-soft": "inset 0 1px 0 rgba(255, 255, 255, 0.045)", "bjork-shadow-panel": "inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 36px -28px rgba(0, 0, 0, 0.9)", "bjork-shadow-menu": "inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 12px 24px rgba(255, 255, 255, 0.018), inset 0 -18px 26px rgba(0, 0, 0, 0.24), 0 22px 42px -22px rgba(0, 0, 0, 0.9)", "bjork-shadow-inset": "inset 0 1px 10px rgba(0, 0, 0, 0.45)", "bjork-ring-offset": "#080808" } }, "css": { ".bjork-range": { "box-shadow": "inset 0 1px 1px rgba(255, 255, 255, 0.04), 0 0 14px rgba(189, 69, 20, 0.06)" }, ".bjork-range::-webkit-slider-thumb": { "appearance": "none", "width": "16px", "height": "8px", "border": "0", "border-radius": "999px", "background": "var(--bjork-thumb)", "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)" }, ".bjork-range::-moz-range-thumb": { "width": "16px", "height": "8px", "border": "0", "border-radius": "999px", "background": "var(--bjork-thumb)", "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)" }, ".bjork-layered-button-accent, .bjork-layered-button-raised": { "position": "relative", "isolation": "isolate", "appearance": "none", "overflow": "hidden", "border": "0", "border-radius": "13px", "box-shadow": "inset 0 1px 0 #ffffff38, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a", "transition": "filter 150ms ease-out, box-shadow 150ms ease-out" }, ".bjork-layered-button-accent::after, .bjork-layered-button-raised::after": { "position": "absolute", "inset": "0", "pointer-events": "none", "content": "\"\"", "border": "1.5px solid transparent", "border-radius": "inherit", "background": "linear-gradient(#ffffffb8, #0000003d 41% 75%, #ffffff47) border-box", "mix-blend-mode": "overlay", "-webkit-mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)", "mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)", "-webkit-mask-clip": "padding-box, border-box", "mask-clip": "padding-box, border-box", "-webkit-mask-origin": "padding-box, border-box", "mask-origin": "padding-box, border-box", "-webkit-mask-composite": "xor", "mask-composite": "exclude" }, ".bjork-layered-button-accent": { "color": "oklch(100% 0 0)", "text-shadow": "0 -1px #00000040", "background": "radial-gradient(ellipse at -20px top, rgba(255, 255, 255, 0.14), transparent), linear-gradient(180deg, #ec5c13 0%, #ec5c13 62%, color-mix(in oklab, #ec5c13 84%, black 16%) 100%)" }, ".bjork-layered-button-raised": { "color": "oklch(100% 0 0)", "text-shadow": "0 -1px #00000026", "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, oklch(0.1881 0.006 265), oklch(0.5493 0.0081 265))" }, ".dark .bjork-layered-button-raised": { "color": "oklch(0.2574 0.0056 265)", "text-shadow": "0 -1px #00000026", "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, color-mix(in oklab, oklch(0.9674 0.0013 265) 80%, oklch(0.2574 0.0056 265) 20%), color-mix(in oklab, oklch(0.669 0.0107 265) 80%, oklch(0.2574 0.0056 265) 20%))" }, "@media (hover: hover)": { ".bjork-layered-button-accent:hover": { "filter": "brightness(1.08) saturate(1.04)" }, ".bjork-layered-button-raised:hover": { "filter": "brightness(1.08) contrast(0.9)" } } }, "meta": { "collection": "Cards", "registryUrl": "https://ui.isaiahbjork.com/team-invite-card.json", "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/team-invite-card.json" }, "type": "registry:component" }