{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blue-cta-button",
  "title": "Blue CTA Button",
  "author": "STARCK",
  "description": "The dimensional call-to-action used by SessionWatcher, with configurable color tones and macOS or Windows platform modes.",
  "files": [
    {
      "path": "registry/default/blue-cta-button.tsx",
      "content": "import * as React from \"react\"\n\nconst blueCtaTones = [\"blue\", \"violet\", \"emerald\", \"rose\"] as const\n\ntype BlueCtaTone = (typeof blueCtaTones)[number]\n\nconst blueCtaPlatforms = [\"macos\", \"windows\"] as const\n\ntype BlueCtaPlatform = (typeof blueCtaPlatforms)[number]\n\ntype BlueCtaButtonProps = React.ComponentProps<\"button\"> & {\n  icon?: React.ReactNode\n  tone?: BlueCtaTone\n  platform?: BlueCtaPlatform\n}\n\ntype BlueCtaToneStyle = React.CSSProperties & {\n  \"--starck-blue-cta-start\": string\n  \"--starck-blue-cta-middle\": string\n  \"--starck-blue-cta-end\": string\n  \"--starck-blue-cta-dark\": string\n  \"--starck-blue-cta-glow\": string\n}\n\nconst blueCtaToneStyles = {\n  blue: {\n    \"--starck-blue-cta-start\": \"#0b75e5\",\n    \"--starck-blue-cta-middle\": \"#0a73e4\",\n    \"--starck-blue-cta-end\": \"#0972e4\",\n    \"--starck-blue-cta-dark\": \"0 40 120\",\n    \"--starck-blue-cta-glow\": \"10 118 240\",\n  },\n  violet: {\n    \"--starck-blue-cta-start\": \"#8257f5\",\n    \"--starck-blue-cta-middle\": \"#7447eb\",\n    \"--starck-blue-cta-end\": \"#693cdd\",\n    \"--starck-blue-cta-dark\": \"58 24 140\",\n    \"--starck-blue-cta-glow\": \"124 58 237\",\n  },\n  emerald: {\n    \"--starck-blue-cta-start\": \"#10a978\",\n    \"--starck-blue-cta-middle\": \"#07966a\",\n    \"--starck-blue-cta-end\": \"#05855e\",\n    \"--starck-blue-cta-dark\": \"0 82 58\",\n    \"--starck-blue-cta-glow\": \"5 150 105\",\n  },\n  rose: {\n    \"--starck-blue-cta-start\": \"#f14f70\",\n    \"--starck-blue-cta-middle\": \"#e73f61\",\n    \"--starck-blue-cta-end\": \"#d93254\",\n    \"--starck-blue-cta-dark\": \"130 20 52\",\n    \"--starck-blue-cta-glow\": \"244 63 94\",\n  },\n} satisfies Record<BlueCtaTone, BlueCtaToneStyle>\n\nconst blueCtaBaseClassName =\n  \"starck-blue-cta inline-flex cursor-pointer items-center justify-center gap-1.5 px-5 py-2 text-sm font-medium tracking-[-0.022em] whitespace-nowrap text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--starck-blue-cta-glow)/0.6)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n\n// The capsule is an Apple shape: macOS has drawn fully-rounded buttons since\n// Big Sur, so it reads as native there. Windows 11 has no such shape - Fluent\n// buttons are rounded rectangles - and a pill next to a Windows logo looks like\n// a Mac button in costume. 10px reads as Fluent at CTA scale without going\n// sharp next to soft cards.\nconst blueCtaPlatformClassNames = {\n  macos: \"rounded-full\",\n  windows: \"rounded-[10px]\",\n} satisfies Record<BlueCtaPlatform, string>\n\n// The macOS capsule, for consumers that compose their own button (navbar,\n// sticky bars) and never switch platform.\nconst blueCtaClassName = `${blueCtaBaseClassName} ${blueCtaPlatformClassNames.macos}`\n\nconst blueCtaStyle = {\n  fontFamily: '-apple-system, BlinkMacSystemFont, \"SF Pro Text\", sans-serif',\n} satisfies React.CSSProperties\n\nfunction AppleMark({ className }: { className?: string }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={className}\n      fill=\"currentColor\"\n      viewBox=\"0 0 814 1000\"\n    >\n      <path d=\"M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57.8-155.5-127.4c-58.3-81.3-105.9-207.6-105.9-329.1 0-193.9 126.1-296.6 250.1-296.6 65.9 0 120.9 43.3 162.2 43.3 39.5 0 101.1-45.9 176.3-45.9 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 103.5-30.4 135.5-71.3z\" />\n    </svg>\n  )\n}\n\n// The Windows 11 mark: four equal panes, no perspective. It stays legible at\n// 15px, where the tilted Windows 8/10 logo turns to mush.\nfunction WindowsMark({ className }: { className?: string }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={className}\n      fill=\"currentColor\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M1 1h9.7v9.7H1zM13.3 1H23v9.7h-9.7zM1 13.3h9.7V23H1zM13.3 13.3H23V23h-9.7z\" />\n    </svg>\n  )\n}\n\nfunction PlatformMark({\n  platform,\n  className,\n}: {\n  platform: BlueCtaPlatform\n  className?: string\n}) {\n  return platform === \"windows\" ? (\n    <WindowsMark className={className} />\n  ) : (\n    <AppleMark className={className} />\n  )\n}\n\nfunction BlueCtaButton({\n  children = \"Get SessionWatcher\",\n  className,\n  icon,\n  platform = \"macos\",\n  style,\n  tone = \"blue\",\n  type = \"button\",\n  ...props\n}: BlueCtaButtonProps) {\n  return (\n    <button\n      type={type}\n      className={[\n        blueCtaBaseClassName,\n        blueCtaPlatformClassNames[platform],\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={{\n        ...blueCtaStyle,\n        ...blueCtaToneStyles[tone],\n        ...style,\n      }}\n      {...props}\n    >\n      {icon === undefined ? (\n        <PlatformMark platform={platform} className=\"size-[15px]\" />\n      ) : (\n        icon\n      )}\n      {children}\n    </button>\n  )\n}\n\nexport {\n  AppleMark,\n  BlueCtaButton,\n  blueCtaBaseClassName,\n  blueCtaClassName,\n  blueCtaPlatformClassNames,\n  blueCtaPlatforms,\n  blueCtaStyle,\n  blueCtaTones,\n  PlatformMark,\n  WindowsMark,\n}\nexport type { BlueCtaButtonProps, BlueCtaPlatform, BlueCtaTone }\n",
      "type": "registry:component",
      "target": "components/blue-cta-button.tsx"
    }
  ],
  "css": {
    "@layer components": {
      ".starck-blue-cta": {
        "--starck-blue-cta-start": "#0b75e5",
        "--starck-blue-cta-middle": "#0a73e4",
        "--starck-blue-cta-end": "#0972e4",
        "--starck-blue-cta-dark": "0 40 120",
        "--starck-blue-cta-glow": "10 118 240",
        "position": "relative",
        "isolation": "isolate",
        "background": "radial-gradient(54% 155% at 50% -6%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.13) 34%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0) 84%), linear-gradient(180deg, var(--starck-blue-cta-start) 0%, var(--starck-blue-cta-middle) 55%, var(--starck-blue-cta-end) 100%)",
        "box-shadow": "inset 0 1px 0.5px rgba(255, 255, 255, 0.3), inset 0 3px 5px -1px rgba(255, 255, 255, 0.22), inset 0 -1px 0.5px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 20, 60, 0.28), 0 6px 16px -8px rgb(var(--starck-blue-cta-glow) / 0.4)",
        "transition": "box-shadow 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.22s ease"
      },
      ".starck-blue-cta:hover": {
        "transform": "translateY(-1px)",
        "filter": "brightness(1.08) saturate(1.04)",
        "box-shadow": "inset 0 1px 0.5px rgba(255, 255, 255, 0.66), inset 0 0 0 0.5px rgba(255, 255, 255, 0.13), inset 0 -2px 3px rgb(var(--starck-blue-cta-dark) / 0.28), 0 2px 3px rgba(0, 20, 70, 0.26), 0 12px 28px -6px rgb(var(--starck-blue-cta-glow) / 0.78), 0 0 0 1.5px rgb(var(--starck-blue-cta-glow) / 0.08)"
      },
      ".starck-blue-cta:active": {
        "transform": "translateY(1px) scale(0.985)",
        "transition-duration": "0.06s",
        "filter": "brightness(0.97)",
        "box-shadow": "inset 0 2px 4px rgb(var(--starck-blue-cta-dark) / 0.45), inset 0 1px 1px rgb(var(--starck-blue-cta-dark) / 0.4), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 20, 70, 0.3), 0 2px 8px -4px rgb(var(--starck-blue-cta-glow) / 0.4)"
      }
    }
  },
  "type": "registry:component"
}