{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "security-checkpoint",
  "type": "registry:ui",
  "description": "Security checkpoint illustration or component",
  "files": [
    {
      "path": "registry/default/ui/security-checkpoint.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type CheckpointLine = {\n  id: string\n  color: \"blue\" | \"red\"\n}\n\nexport const CHECKPOINT_LINES: CheckpointLine[] = [\n  { id: \"line-1\", color: \"blue\" },\n  { id: \"line-2\", color: \"red\" },\n  { id: \"line-3\", color: \"blue\" },\n  { id: \"line-4\", color: \"red\" },\n  { id: \"line-5\", color: \"blue\" },\n  { id: \"line-6\", color: \"red\" },\n]\n\nexport interface SecurityCheckpointProps extends React.ComponentProps<\"div\"> {\n  title?: string\n  subtitle?: string\n  message?: string\n  lines?: CheckpointLine[]\n}\n\nexport interface SecurityCheckpointLineLayerProps\n  extends React.ComponentProps<\"div\"> {\n  lines: CheckpointLine[]\n  mounted: boolean\n  cardLeft: number\n}\n\nexport function SecurityCheckpointBlueLines({\n  lines,\n  mounted,\n  cardLeft: _cardLeft,\n  className,\n  ...props\n}: SecurityCheckpointLineLayerProps) {\n  return (\n    <div\n      data-slot=\"security-checkpoint-blue-lines\"\n      className={cn(\n        \"absolute inset-0 flex flex-col items-stretch justify-center\",\n        className\n      )}\n      style={{ gap: 18, zIndex: 0 }}\n      {...props}\n    >\n      {lines.map((line, i) =>\n        line.color === \"blue\" ? (\n          <div key={line.id} style={{ height: 2 }}>\n            <div\n              style={{\n                height: 2,\n                borderRadius: 1,\n                width: mounted ? \"100%\" : \"0%\",\n                transition: `width 1s cubic-bezier(0.16, 1, 0.3, 1) ${i * 0.08 + 0.15}s`,\n                background:\n                  \"linear-gradient(90deg, transparent 0%, rgba(147,197,253,0.2) 10%, rgba(96,165,250,0.5) 40%, rgba(59,130,246,0.8) 100%)\",\n              }}\n            />\n          </div>\n        ) : (\n          <div key={line.id} style={{ height: 2 }} />\n        )\n      )}\n    </div>\n  )\n}\n\nexport function SecurityCheckpointRedLines({\n  lines,\n  mounted,\n  cardLeft,\n  className,\n  ...props\n}: SecurityCheckpointLineLayerProps) {\n  return (\n    <div\n      data-slot=\"security-checkpoint-red-lines\"\n      className={cn(\n        \"absolute inset-0 flex flex-col items-stretch justify-center\",\n        className\n      )}\n      style={{ gap: 18, zIndex: 0 }}\n      {...props}\n    >\n      {lines.map((line, i) =>\n        line.color === \"red\" ? (\n          <div\n            key={line.id}\n            data-slot=\"security-checkpoint-red-line-row\"\n            className=\"relative\"\n            style={{ height: 2 }}\n          >\n            <div\n              style={{\n                height: 2,\n                borderRadius: 1,\n                width: mounted && cardLeft > 0 ? cardLeft : 0,\n                transition: `width 0.8s cubic-bezier(0.16, 1, 0.3, 1) ${i * 0.08 + 0.2}s`,\n                background:\n                  \"linear-gradient(90deg, transparent 0%, rgba(252,165,165,0.2) 10%, rgba(248,113,113,0.5) 40%, rgba(239,68,68,0.85) 100%)\",\n              }}\n            />\n            <span\n              data-slot=\"security-checkpoint-red-line-glow\"\n              style={{\n                position: \"absolute\",\n                left: cardLeft > 0 ? cardLeft - 12 : -100,\n                top: \"50%\",\n                transform: \"translateY(-50%)\",\n                width: 24,\n                height: 24,\n                borderRadius: \"50%\",\n                background:\n                  \"radial-gradient(circle, rgba(252,165,165,0.4) 0%, rgba(252,165,165,0.15) 50%, transparent 70%)\",\n                opacity: mounted ? 1 : 0,\n                transition: `opacity 0.3s ease ${i * 0.08 + 0.85}s`,\n              }}\n            />\n            <span\n              data-slot=\"security-checkpoint-red-line-dot\"\n              style={{\n                position: \"absolute\",\n                left: cardLeft > 0 ? cardLeft - 7 : -100,\n                top: \"50%\",\n                transform: \"translateY(-50%)\",\n                width: 7,\n                height: 7,\n                borderRadius: \"50%\",\n                background: \"#ef4444\",\n                opacity: mounted ? 1 : 0,\n                transition: `opacity 0.3s ease ${i * 0.08 + 0.9}s`,\n              }}\n            />\n          </div>\n        ) : (\n          <div key={line.id} style={{ height: 2 }} />\n        )\n      )}\n    </div>\n  )\n}\n\nexport interface SecurityCheckpointCardProps\n  extends React.ComponentProps<\"div\"> {\n  title: string\n  subtitle: string\n  message: string\n  mounted: boolean\n}\n\nexport const SecurityCheckpointCard = React.forwardRef<\n  HTMLDivElement,\n  SecurityCheckpointCardProps\n>(function SecurityCheckpointCard(\n  { title, subtitle, message, className, mounted, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"security-checkpoint-card\"\n      className={cn(\n        \"relative flex flex-col rounded-[14px] border bg-white border-black/8 shadow-[0_1px_3px_rgba(0,0,0,0.04),0_6px_16px_rgba(0,0,0,0.04)] dark:bg-zinc-900 dark:border-white/10 dark:shadow-[0_1px_3px_rgba(0,0,0,0.3),0_6px_16px_rgba(0,0,0,0.4)]\",\n        className\n      )}\n      style={{\n        zIndex: 1,\n        padding: \"16px 20px\",\n        gap: 12,\n        width: 300,\n        opacity: mounted ? 1 : 0,\n        transform: mounted ? \"scale(1)\" : \"scale(0.97)\",\n        transition:\n          \"opacity 0.4s ease 0.1s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s\",\n      }}\n      {...props}\n    >\n      <div\n        data-slot=\"security-checkpoint-card-header\"\n        className=\"flex items-center\"\n        style={{ gap: 8 }}\n      >\n        <div className=\"flex items-center\" style={{ gap: 8, flex: 1 }}>\n          <div\n            data-slot=\"security-checkpoint-card-header-accent\"\n            style={{\n              width: 3,\n              height: 20,\n              borderRadius: 2,\n              background: \"#2563eb\",\n            }}\n          />\n          <span\n            className=\"text-zinc-900 dark:text-zinc-100\"\n            style={{\n              fontSize: 14,\n              lineHeight: \"20px\",\n              letterSpacing: \"-0.01em\",\n            }}\n          >\n            <strong style={{ fontWeight: 600 }}>{title}</strong>{\" \"}\n            <span style={{ fontWeight: 400 }}>{subtitle}</span>\n          </span>\n        </div>\n        <div\n          data-slot=\"security-checkpoint-card-header-dots\"\n          className=\"flex items-center\"\n          style={{ gap: 3 }}\n        >\n          <span className=\"size-[5px] rounded-full bg-zinc-900 dark:bg-zinc-100\" />\n          <span className=\"size-[5px] rounded-full bg-zinc-400 dark:bg-zinc-500\" />\n          <span className=\"size-[5px] rounded-full bg-zinc-300 dark:bg-zinc-600\" />\n        </div>\n      </div>\n\n      <div\n        data-slot=\"security-checkpoint-card-message\"\n        className=\"border-l border-black/10 text-zinc-500 dark:border-white/10 dark:text-zinc-400\"\n        style={{\n          paddingLeft: 14,\n          fontSize: 13,\n          lineHeight: \"19px\",\n          letterSpacing: \"-0.005em\",\n        }}\n      >\n        {message}\n      </div>\n    </div>\n  )\n})\n\nexport function SecurityCheckpoint({\n  title = \"Vercel\",\n  subtitle = \"Security Checkpoint\",\n  message = \"To ensure a smooth and safe experience, we're taking a few moments to verify your browser.\",\n  lines = CHECKPOINT_LINES,\n  className,\n  ...props\n}: SecurityCheckpointProps) {\n  const [mounted, setMounted] = useState(false)\n  const [cardLeft, setCardLeft] = useState(0)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const cardRef = useRef<HTMLDivElement>(null)\n\n  const measure = useCallback(() => {\n    if (containerRef.current && cardRef.current) {\n      const containerRect = containerRef.current.getBoundingClientRect()\n      const cardRect = cardRef.current.getBoundingClientRect()\n      setCardLeft(cardRect.left - containerRect.left)\n    }\n  }, [])\n\n  useEffect(() => {\n    measure()\n    setMounted(true)\n    window.addEventListener(\"resize\", measure)\n    return () => window.removeEventListener(\"resize\", measure)\n  }, [measure])\n\n  return (\n    <div\n      ref={containerRef}\n      data-slot=\"security-checkpoint\"\n      className={cn(\n        \"relative grid place-items-center overflow-hidden rounded-xl bg-[#f8f8f8] dark:bg-zinc-950\",\n        className\n      )}\n      style={{\n        width: \"100%\",\n        maxWidth: 444,\n        height: 200,\n      }}\n      {...props}\n    >\n      <SecurityCheckpointBlueLines\n        lines={lines}\n        mounted={mounted}\n        cardLeft={cardLeft}\n      />\n      <SecurityCheckpointRedLines\n        lines={lines}\n        mounted={mounted}\n        cardLeft={cardLeft}\n      />\n      <SecurityCheckpointCard\n        ref={cardRef}\n        title={title}\n        subtitle={subtitle}\n        message={message}\n        mounted={mounted}\n      />\n    </div>\n  )\n}\n\nexport interface SecurityCheckpointDemoProps\n  extends React.ComponentProps<\"div\"> {}\n\nexport default function SecurityCheckpointDemo({\n  className,\n  ...props\n}: SecurityCheckpointDemoProps) {\n  return (\n    <div\n      data-slot=\"security-checkpoint-demo\"\n      className={cn(\n        \"min-h-screen flex items-center justify-center bg-[#fafafa] dark:bg-zinc-950\",\n        className\n      )}\n      {...props}\n    >\n      <SecurityCheckpoint />\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}