{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "clerk-logo",
  "title": "Clerk Logo",
  "description": "Clerk logo component with variants, color schemes, modes, and backgrounds",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/blocks/logos/clerk-logo/components/logos/clerk.tsx",
      "content": "const COLORS = {\n  purple: {\n    light: {\n      center: \"#6C47FF\",\n      arc1: \"#BBB2FF\",\n      arc2: \"#6C47FF\",\n    },\n    dark: {\n      center: \"#9B84FF\",\n      arc1: \"#6458A7\",\n      arc2: \"#9B84FF\",\n    },\n  },\n  grayscale: {\n    light: {\n      center: \"#171717\",\n      arc1: \"rgba(23, 23, 23, 0.6)\",\n      arc2: \"#171717\",\n    },\n    dark: {\n      center: \"#FFFFFF\",\n      arc1: \"rgba(255, 255, 255, 0.6)\",\n      arc2: \"#FFFFFF\",\n    },\n  },\n  bg: {\n    purple: {\n      light: \"#6C47FF\",\n      dark: \"#FFFFFF\",\n    },\n    grayscale: {\n      light: \"#171717\",\n      dark: \"#FFFFFF\",\n    },\n  },\n  bgIcon: {\n    purple: {\n      light: {\n        center: \"#FFFFFF\",\n        arc1: \"rgba(255, 255, 255, 0.6)\",\n        arc2: \"#FFFFFF\",\n      },\n      dark: {\n        center: \"#6C47FF\",\n        arc1: \"#BBB2FF\",\n        arc2: \"#6C47FF\",\n      },\n    },\n    grayscale: {\n      light: {\n        center: \"#FFFFFF\",\n        arc1: \"rgba(255, 255, 255, 0.6)\",\n        arc2: \"#FFFFFF\",\n      },\n      dark: {\n        center: \"#171717\",\n        arc1: \"rgba(23, 23, 23, 0.6)\",\n        arc2: \"#171717\",\n      },\n    },\n  },\n} as const;\n\nexport function ClerkLogo({\n  className,\n  variant = \"icon\",\n  colorScheme = \"grayscale\",\n  mode = \"light\",\n  background = \"none\",\n}: {\n  className?: string;\n  variant?: \"icon\" | \"wordmark\";\n  colorScheme?: \"grayscale\" | \"purple\";\n  mode?: \"dark\" | \"light\";\n  background?: \"none\" | \"square\" | \"circle\";\n}) {\n  const colors = COLORS[colorScheme][mode];\n  const textColor = mode === \"dark\" ? \"#FFFFFF\" : \"#171717\";\n\n  const bgConfig =\n    background !== \"none\"\n      ? {\n          bg: COLORS.bg[colorScheme][mode],\n          icon: COLORS.bgIcon[colorScheme][mode],\n        }\n      : null;\n\n  const iconPaths = {\n    center: <circle cx=\"64\" cy=\"64\" r=\"20\" fill={colors.center} />,\n    arc1: (\n      <path\n        fill={colors.arc1}\n        d=\"M99.5716 10.788C101.571 12.1272 101.742 14.9444 100.04 16.646L85.4244 31.2618C84.1035 32.5828 82.0542 32.7914 80.3915 31.9397C75.4752 29.421 69.9035 28 64 28C44.1177 28 28 44.1177 28 64C28 69.9035 29.421 75.4752 31.9397 80.3915C32.7914 82.0542 32.5828 84.1035 31.2618 85.4244L16.646 100.04C14.9444 101.742 12.1272 101.571 10.788 99.5716C3.97411 89.3989 0 77.1635 0 64C0 28.6538 28.6538 0 64 0C77.1635 0 89.3989 3.97411 99.5716 10.788Z\"\n      />\n    ),\n    arc2: (\n      <path\n        fill={colors.arc2}\n        d=\"M100.04 111.354C101.742 113.056 101.571 115.873 99.5717 117.212C89.3989 124.026 77.1636 128 64 128C50.8364 128 38.6011 124.026 28.4283 117.212C26.4289 115.873 26.2581 113.056 27.9597 111.354L42.5755 96.7382C43.8965 95.4172 45.9457 95.2085 47.6084 96.0603C52.5248 98.579 58.0964 100 64 100C69.9036 100 75.4753 98.579 80.3916 96.0603C82.0543 95.2085 84.1036 95.4172 85.4245 96.7382L100.04 111.354Z\"\n      />\n    ),\n    text: (\n      <path\n        fill={textColor}\n        d=\"M166.971 40.9172C178.576 40.9172 190.795 45.5232 198.363 54.4358C198.413 54.4943 198.406 54.5818 198.348 54.6321L186.955 64.4905C186.897 64.5411 186.808 64.5348 186.757 64.4768C184.442 61.8452 181.568 59.7383 178.335 58.303C175.059 56.8492 171.495 56.1207 167.898 56.1702C154.488 56.1702 145.548 65.3619 145.548 78.8C145.548 85.5131 147.771 91.145 151.635 95.0891C153.762 97.1729 156.302 98.8083 159.099 99.8948C161.896 100.981 164.891 101.496 167.898 101.406C171.46 101.438 174.992 100.759 178.276 99.4104C181.52 98.0791 184.457 96.1229 186.911 93.6584C186.963 93.6061 187.047 93.6025 187.103 93.6506L198.748 103.698C198.808 103.749 198.814 103.839 198.761 103.898C192.264 111.073 180.762 116.764 166.364 116.764C155.225 116.764 145.571 112.854 138.795 106.199C132.019 99.5445 128 90.1203 128 78.928C128 56.2988 144.169 40.9174 166.971 40.9172ZM272.297 40.9241C294.364 40.9243 308.634 56.4443 308.634 77.8733C308.603 80.0994 308.45 82.3226 308.177 84.5325C308.168 84.6028 308.108 84.6555 308.037 84.6555H253.776C253.687 84.6555 253.62 84.7398 253.64 84.8274C255.961 95.114 263.91 101.384 274.9 101.384C278.479 101.459 282.026 100.724 285.269 99.2327C288.467 97.7617 291.284 95.5949 293.505 92.8977C293.555 92.8373 293.644 92.829 293.704 92.8792L294.151 93.2522L305.314 102.971C305.371 103.02 305.379 103.107 305.332 103.165C299.016 110.999 288.524 116.764 273.977 116.764C252.205 116.764 235.781 101.687 235.781 78.7805C235.781 67.5426 239.651 58.1184 246.1 51.4641C249.503 48.0425 253.584 45.3422 258.089 43.5295C262.594 41.7168 267.43 40.83 272.297 40.9241ZM225.661 11.9758C225.739 11.9758 225.802 12.0388 225.802 12.1165V115.625C225.802 115.703 225.739 115.766 225.661 115.766H208.977C208.899 115.766 208.836 115.703 208.836 115.625V12.1165C208.836 12.0389 208.899 11.976 208.977 11.9758H225.661ZM361.385 40.9192C361.463 40.9183 361.527 40.9816 361.527 41.0598V59.6116C361.527 59.6933 361.457 59.7582 361.376 59.7522C359.432 59.6052 357.496 59.4612 356.304 59.4612C343.246 59.4613 335.579 68.6515 335.579 80.7151V115.625C335.579 115.703 335.516 115.766 335.438 115.766H318.755C318.677 115.766 318.614 115.703 318.614 115.625V42.1047C318.614 42.0272 318.677 41.9641 318.755 41.9641H335.438C335.516 41.9641 335.579 42.0272 335.579 42.1047V53.0413C335.579 53.098 335.626 53.1438 335.683 53.1438C335.715 53.1438 335.746 53.1287 335.766 53.1028C341.617 45.2882 350.254 40.9407 359.379 40.9407L361.385 40.9192ZM388.332 11.9758C388.41 11.9759 388.473 12.0388 388.473 12.1165V75.2815C388.473 75.4096 388.63 75.4707 388.717 75.3762L419.408 41.9211C419.435 41.8922 419.472 41.8752 419.512 41.8752H439.575C439.697 41.8752 439.762 42.0202 439.68 42.1106L412.928 71.6262C412.886 71.6727 412.879 71.7419 412.912 71.7952L440.031 115.551C440.089 115.645 440.022 115.766 439.912 115.766H420.879C420.83 115.766 420.784 115.741 420.759 115.699L401.525 84.7874C401.5 84.7463 401.455 84.7209 401.406 84.7209H401.226C401.187 84.7209 401.149 84.7373 401.122 84.7659L388.51 98.3167C388.486 98.3426 388.473 98.3769 388.473 98.4124V115.625C388.473 115.703 388.41 115.766 388.332 115.766H371.647C371.57 115.766 371.507 115.703 371.507 115.625V12.1165C371.507 12.0388 371.57 11.9759 371.647 11.9758H388.332ZM273.184 56.1526C270.429 56.0653 267.689 56.5639 265.148 57.6135C262.608 58.6639 260.328 60.2418 258.465 62.2375C256.265 64.7317 254.709 67.7085 253.927 70.9172C253.905 71.0052 253.972 71.09 254.062 71.0901H291.098C291.188 71.0901 291.255 71.0045 291.233 70.9163C289.077 62.1122 282.94 56.1526 273.184 56.1526Z\"\n      />\n    ),\n  };\n\n  if (variant === \"wordmark\") {\n    return (\n      <svg\n        role=\"img\"\n        viewBox=\"0 0 441 128\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className={className}\n      >\n        <title>Clerk Wordmark</title>\n        {iconPaths.text}\n        {iconPaths.center}\n        {iconPaths.arc1}\n        {iconPaths.arc2}\n      </svg>\n    );\n  }\n\n  if (bgConfig) {\n    const padding = 16;\n    const size = 128 + padding * 2;\n    const isCircle = background === \"circle\";\n\n    const bgIconPaths = {\n      center: <circle cx=\"64\" cy=\"64\" r=\"20\" fill={bgConfig.icon.center} />,\n      arc1: (\n        <path\n          fill={bgConfig.icon.arc1}\n          d=\"M99.5716 10.788C101.571 12.1272 101.742 14.9444 100.04 16.646L85.4244 31.2618C84.1035 32.5828 82.0542 32.7914 80.3915 31.9397C75.4752 29.421 69.9035 28 64 28C44.1177 28 28 44.1177 28 64C28 69.9035 29.421 75.4752 31.9397 80.3915C32.7914 82.0542 32.5828 84.1035 31.2618 85.4244L16.646 100.04C14.9444 101.742 12.1272 101.571 10.788 99.5716C3.97411 89.3989 0 77.1635 0 64C0 28.6538 28.6538 0 64 0C77.1635 0 89.3989 3.97411 99.5716 10.788Z\"\n        />\n      ),\n      arc2: (\n        <path\n          fill={bgConfig.icon.arc2}\n          d=\"M100.04 111.354C101.742 113.056 101.571 115.873 99.5717 117.212C89.3989 124.026 77.1636 128 64 128C50.8364 128 38.6011 124.026 28.4283 117.212C26.4289 115.873 26.2581 113.056 27.9597 111.354L42.5755 96.7382C43.8965 95.4172 45.9457 95.2085 47.6084 96.0603C52.5248 98.579 58.0964 100 64 100C69.9036 100 75.4753 98.579 80.3916 96.0603C82.0543 95.2085 84.1036 95.4172 85.4245 96.7382L100.04 111.354Z\"\n        />\n      ),\n    };\n\n    return (\n      <svg\n        role=\"img\"\n        viewBox={`0 0 ${size} ${size}`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className={className}\n      >\n        <title>Clerk Logo</title>\n        <defs>\n          <clipPath id={`clerk-clip-${background}`}>\n            {isCircle ? (\n              <circle cx={size / 2} cy={size / 2} r={size / 2} />\n            ) : (\n              <rect x=\"0\" y=\"0\" width={size} height={size} />\n            )}\n          </clipPath>\n        </defs>\n        <g clipPath={`url(#clerk-clip-${background})`}>\n          {isCircle ? (\n            <circle\n              cx={size / 2}\n              cy={size / 2}\n              r={size / 2}\n              fill={bgConfig.bg}\n            />\n          ) : (\n            <rect x=\"0\" y=\"0\" width={size} height={size} fill={bgConfig.bg} />\n          )}\n          <g transform={`translate(${padding}, ${padding})`}>\n            {bgIconPaths.center}\n            {bgIconPaths.arc1}\n            {bgIconPaths.arc2}\n          </g>\n        </g>\n      </svg>\n    );\n  }\n\n  return (\n    <svg\n      role=\"img\"\n      viewBox=\"0 0 128 128\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n    >\n      <title>Clerk Logo</title>\n      {iconPaths.center}\n      {iconPaths.arc1}\n      {iconPaths.arc2}\n    </svg>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "hasVariants": true,
    "variants": [
      "icon-grayscale",
      "icon-purple",
      "icon-square-grayscale",
      "icon-square-purple",
      "icon-circle-grayscale",
      "icon-circle-purple",
      "wordmark-grayscale",
      "wordmark-purple"
    ],
    "variantTypes": {
      "base": [
        "icon",
        "wordmark"
      ],
      "colorSchemes": [
        "grayscale",
        "purple"
      ],
      "modes": [
        "dark",
        "light"
      ],
      "backgrounds": [
        "none",
        "square",
        "circle"
      ]
    }
  },
  "docs": "Clerk authentication logo with 2 base variants (icon, wordmark), 2 color schemes (grayscale, purple), 3 background options (none, square, circle), and 2 modes (light, dark) = 16 total combinations. Theme-aware: automatically adapts colors when you switch themes.",
  "categories": [
    "Auth",
    "logo",
    "brand"
  ],
  "type": "registry:ui"
}