{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "shipment-card", "title": "Shipment card", "description": "Shipment 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/shipment-card.tsx", "content": "\"use client\";\n\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { AlertTriangle, Check, ChevronDown, Copy, Package } 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 Pill,\n Skeleton,\n focusRing,\n useCardTheme,\n useReducedMotionSafe,\n type CardTheme,\n type PillTone,\n} from \"@/components/bjork-ui/cards/card-kit\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ShipmentStage = \"ordered\" | \"shipped\" | \"out_for_delivery\" | \"delivered\";\n\nexport interface ShipmentItem {\n id: string;\n name: string;\n quantity?: number;\n /** Swatch colour for the generated thumbnail. */\n color?: string;\n /** Replaces the generated thumbnail. */\n imageUrl?: string;\n}\n\nexport interface ShipmentEvent {\n /** ISO date-time. */\n at: string;\n label: string;\n location?: string;\n}\n\nexport interface ShipmentException {\n label: string;\n detail?: string;\n}\n\nexport interface ShipmentCardProps {\n orderNumber?: string;\n carrier?: string;\n service?: string;\n trackingNumber?: string;\n trackingUrl?: string;\n items?: ShipmentItem[];\n stage?: ShipmentStage;\n /** ISO date-time of the estimated delivery (end of window). */\n eta?: string;\n /** ISO date-time of the window start. Shown as \"between … and …\". */\n etaFrom?: string;\n /** ISO date-time, when delivered. */\n deliveredAt?: string;\n /** A delay or failed attempt. Keeps the stage, turns the rail amber. */\n exception?: ShipmentException;\n /** Newest last or newest first; the card sorts them. */\n events?: ShipmentEvent[];\n loading?: boolean;\n /** IANA zone for every date on the card. Default \"UTC\" so server and client agree. */\n timeZone?: string;\n locale?: string;\n theme?: CardTheme;\n className?: string;\n}\n\nexport const SHIPMENT_SAMPLE = {\n orderNumber: \"HX-20418\",\n carrier: \"Parcelline\",\n service: \"Ground\",\n trackingNumber: \"PL 7741 0952 3318\",\n trackingUrl: \"#\",\n stage: \"out_for_delivery\" as ShipmentStage,\n etaFrom: \"2026-10-08T16:00:00Z\",\n eta: \"2026-10-08T20:00:00Z\",\n items: [\n { id: \"i1\", name: \"Linen throw, oat\", color: \"#d8c7a6\" },\n { id: \"i2\", name: \"Stoneware mug\", quantity: 2, color: \"#6f7f86\" },\n { id: \"i3\", name: \"Walnut tray\", color: \"#7a4b2a\" },\n ] satisfies ShipmentItem[],\n events: [\n { at: \"2026-10-05T18:12:00Z\", label: \"Order placed\" },\n { at: \"2026-10-06T14:40:00Z\", label: \"Label created\", location: \"Reno, NV\" },\n { at: \"2026-10-06T22:05:00Z\", label: \"Picked up by carrier\", location: \"Reno, NV\" },\n { at: \"2026-10-07T09:31:00Z\", label: \"Arrived at sort facility\", location: \"Sacramento, CA\" },\n { at: \"2026-10-08T06:48:00Z\", label: \"Departed facility\", location: \"Oakland, CA\" },\n { at: \"2026-10-08T13:02:00Z\", label: \"Out for delivery\", location: \"San Francisco, CA\" },\n ] satisfies ShipmentEvent[],\n};\n\nconst STAGES: { id: ShipmentStage; label: string }[] = [\n { id: \"ordered\", label: \"Ordered\" },\n { id: \"shipped\", label: \"Shipped\" },\n { id: \"out_for_delivery\", label: \"Out for delivery\" },\n { id: \"delivered\", label: \"Delivered\" },\n];\n\n/**\n * Order tracking at a glance: when it arrives, where it is on the way, what is inside, and the full\n * scan history on demand. Delays and failed attempts turn the rail amber without losing progress.\n */\nexport function ShipmentCard({\n orderNumber = SHIPMENT_SAMPLE.orderNumber,\n carrier = SHIPMENT_SAMPLE.carrier,\n service = SHIPMENT_SAMPLE.service,\n trackingNumber = SHIPMENT_SAMPLE.trackingNumber,\n trackingUrl,\n items = SHIPMENT_SAMPLE.items,\n stage = SHIPMENT_SAMPLE.stage,\n eta = SHIPMENT_SAMPLE.eta,\n etaFrom = SHIPMENT_SAMPLE.etaFrom,\n deliveredAt,\n exception,\n events = SHIPMENT_SAMPLE.events,\n loading = false,\n timeZone = \"UTC\",\n locale = \"en-US\",\n theme = \"auto\",\n className,\n}: ShipmentCardProps) {\n const { style } = useCardTheme(theme);\n const reduce = useReducedMotionSafe();\n const titleId = useId();\n const historyId = useId();\n const [open, setOpen] = useState(false);\n const [copied, setCopied] = useState(false);\n const copyTimer = useRef(undefined);\n useEffect(() => () => window.clearTimeout(copyTimer.current), []);\n\n const f = useMemo(\n () => ({\n weekday: new Intl.DateTimeFormat(locale, { weekday: \"long\", timeZone }),\n date: new Intl.DateTimeFormat(locale, { month: \"short\", day: \"numeric\", timeZone }),\n time: new Intl.DateTimeFormat(locale, { hour: \"numeric\", minute: \"2-digit\", timeZone }),\n stamp: new Intl.DateTimeFormat(locale, { month: \"short\", day: \"numeric\", hour: \"numeric\", minute: \"2-digit\", timeZone }),\n }),\n [locale, timeZone],\n );\n\n const stageIndex = STAGES.findIndex((s) => s.id === stage);\n const delivered = stage === \"delivered\";\n const sorted = useMemo(() => [...events].sort((a, b) => Date.parse(b.at) - Date.parse(a.at)), [events]);\n const latest = sorted[0];\n\n const status: { label: string; tone: PillTone } = exception\n ? { label: exception.label, tone: \"warning\" }\n : delivered\n ? { label: \"Delivered\", tone: \"success\" }\n : { label: STAGES[stageIndex]?.label ?? \"In transit\", tone: \"accent\" };\n\n let headline = \"\";\n let sub = \"\";\n if (delivered && deliveredAt) {\n headline = `Delivered ${f.weekday.format(Date.parse(deliveredAt))}`;\n sub = `${f.date.format(Date.parse(deliveredAt))} at ${f.time.format(Date.parse(deliveredAt))}`;\n } else if (eta) {\n headline = `${exception ? \"Now arriving\" : \"Arriving\"} ${f.weekday.format(Date.parse(eta))}`;\n sub = etaFrom\n ? `${f.date.format(Date.parse(eta))}, ${f.time.format(Date.parse(etaFrom))} – ${f.time.format(Date.parse(eta))}`\n : `${f.date.format(Date.parse(eta))} by ${f.time.format(Date.parse(eta))}`;\n }\n\n const copy = async () => {\n try {\n await navigator.clipboard.writeText(trackingNumber.replace(/\\s/g, \"\"));\n setCopied(true);\n window.clearTimeout(copyTimer.current);\n copyTimer.current = window.setTimeout(() => setCopied(false), 1800);\n } catch {\n setCopied(false);\n }\n };\n\n const itemCount = items.reduce((n, i) => n + (i.quantity ?? 1), 0);\n const progress = stageIndex / (STAGES.length - 1);\n const railColor = exception ? \"var(--bjork-warning)\" : delivered ? \"var(--bjork-success)\" : \"var(--bjork-accent)\";\n\n if (loading) {\n return (\n \n
\n \n \n \n \n
\n {[0, 1, 2, 3].map((i) => (\n \n ))}\n
\n
\n \n );\n }\n\n return (\n \n
\n
\n

\n Order #{orderNumber}\n

\n \n {status.label}\n \n
\n

\n {headline}\n

\n

{sub}

\n {exception?.detail && (\n

\n \n {exception.detail}\n

\n )}\n
\n\n {/* Progress rail */}\n
\n
    \n \n \n \n {STAGES.map((s, i) => {\n const done = i < stageIndex || (delivered && i === stageIndex);\n const current = i === stageIndex && !delivered;\n return (\n \n \n {current && !reduce && (\n \n )}\n \n \n {s.label}\n {done ? \", complete\" : current ? \", current\" : \", upcoming\"}\n \n \n );\n })}\n
\n
\n\n {latest && (\n

\n {latest.label}\n {latest.location && · {latest.location}}\n \n \n \n

\n )}\n\n {/* Items + tracking */}\n
\n
\n {items.slice(0, 3).map((it) =>\n it.imageUrl ? (\n // eslint-disable-next-line @next/next/no-img-element\n \"\"\n ) : (\n \n \n \n ),\n )}\n
\n

\n \n {itemCount} {itemCount === 1 ? \"item\" : \"items\"}\n \n i.name).join(\", \")}>\n {items.map((i) => (i.quantity && i.quantity > 1 ? `${i.name} ×${i.quantity}` : i.name)).join(\", \")}\n \n

\n
\n\n
\n
\n

\n {carrier} · {service}\n

\n {trackingUrl ? (\n \n {trackingNumber}\n \n ) : (\n

{trackingNumber}

\n )}\n
\n : }\n >\n {copied ? \"Copied\" : \"Copy\"}\n \n
\n\n {sorted.length > 1 && (\n
\n setOpen((o) => !o)}\n className={cn(\n \"flex w-full cursor-pointer items-center justify-between px-5 py-3 text-[12px] text-[color:var(--bjork-text-medium)] transition-colors hover:bg-[color:var(--bjork-card-hover)] hover:text-[color:var(--bjork-text)]\",\n focusRing,\n \"focus-visible:ring-inset focus-visible:ring-offset-0\",\n )}\n >\n {open ? \"Hide\" : \"Show\"} tracking history ({sorted.length})\n \n \n \n
\n
    \n {sorted.map((e, i) => (\n
  1. \n \n \n {i < sorted.length - 1 && (\n \n )}\n \n
    \n

    {e.label}

    \n

    \n \n {e.location && ` · ${e.location}`}\n

    \n
    \n
    2. \n ))}\n
\n
\n
\n \n )}\n \n \n );\n}\n", "type": "registry:component", "target": "@components/bjork-ui/cards/shipment-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/shipment-card.json", "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/shipment-card.json" }, "type": "registry:component" }