{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotlight-card",
  "title": "Spotlight Card",
  "description": "The plain Calamansi surface as a card: one flat layer clipped to the squircle, in the Calamansi, White, Slate and Citrus palettes.",
  "dependencies": [],
  "registryDependencies": [
    "utils",
    "squircle"
  ],
  "files": [
    {
      "path": "components/ui/spotlight-card.tsx",
      "content": "\"use client\";\n\nimport { type ReactNode } from \"react\";\nimport { SQUIRCLE_RADIUS, SQUIRCLE_SMOOTHING, Squircle } from \"@/lib/squircle\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SpotlightCardVariant = \"white\" | \"calamansi\" | \"slate\" | \"citrus\";\n\n/**\n * The Calamansi palettes. `calamansi` is the default slab; `white` is the other end\n * of the range — the only palette that has to read on a light page: white in light\n * mode, near-black in dark. Each palette carries the ink that sits on it, and\n * everything inside tints from `currentColor`.\n */\nconst VARIANTS: Record<SpotlightCardVariant, { paint: string; ink: string }> = {\n  white: {\n    paint: \"bg-white dark:bg-[#1c1c1f]\",\n    ink: \"text-foreground\",\n  },\n  calamansi: {\n    paint: [\n      \"bg-gradient-to-br from-[#8fa37d] via-[#5c7a67] to-[#39564a]\",\n      \"dark:from-[#1b281f] dark:via-[#16221a] dark:to-[#0e1611]\",\n    ].join(\" \"),\n    ink: \"text-white\",\n  },\n  slate: {\n    paint: [\n      \"bg-gradient-to-br from-[#a79cb7] via-[#687396] to-[#4a5a7f]\",\n      \"dark:from-[#1e1b4b] dark:via-[#1e293b] dark:to-[#0f172a]\",\n    ].join(\" \"),\n    ink: \"text-white\",\n  },\n  citrus: {\n    paint: [\n      \"bg-gradient-to-br from-[#d69f7e] via-[#b87152] to-[#7d4128]\",\n      \"dark:from-[#2e170c] dark:via-[#22120b] dark:to-[#140a06]\",\n    ].join(\" \"),\n    ink: \"text-white\",\n  },\n};\n\nexport type SpotlightCardProps = {\n  children?: ReactNode;\n  className?: string;\n  /** Title shown inside the card. */\n  title?: ReactNode;\n  /** Subtitle or detail label shown under the title. */\n  subtitle?: ReactNode;\n  /** Icon displayed in the header beside the title. */\n  icon?: ReactNode;\n  /** Badge or small element placed at the top-right of the card. */\n  badge?: ReactNode;\n  /** Custom header element replacing the default top title/icon row. */\n  header?: ReactNode;\n  /** Corner radius of the squircle, in pixels. Default: 28 */\n  cornerRadius?: number;\n  /** Corner smoothing, from 0 (a rounded rectangle) to 1. Default: 1 */\n  cornerSmoothing?: number;\n  /** Surface palette. Default: \"calamansi\" */\n  variant?: SpotlightCardVariant;\n};\n\n/**\n * The branded card: one flat surface — the Calamansi slab by default, or white,\n * slate and citrus — clipped to the squircle. No grain, no glow.\n *\n * Everything inside is drawn in `currentColor`, so a card dropped into a coloured\n * context keeps its own ink rather than assuming white on white.\n */\nconst SURFACE = [\"relative w-full p-5 font-runde select-none\", \"sm:p-6\"].join(\n  \" \",\n);\n\nconst ICON_CHIP =\n  \"flex size-9 shrink-0 items-center justify-center rounded-xl bg-current/10 text-current\";\n\nconst CONTENT = \"relative z-10 flex flex-col\";\n\nexport function SpotlightCard({\n  children,\n  className,\n  title,\n  subtitle,\n  icon,\n  badge,\n  header,\n  cornerRadius = SQUIRCLE_RADIUS,\n  cornerSmoothing = SQUIRCLE_SMOOTHING,\n  variant = \"calamansi\",\n}: SpotlightCardProps) {\n  const hasTopHeader = Boolean(header || title || icon || subtitle || badge);\n\n  return (\n    <div className={cn(SURFACE, VARIANTS[variant].ink, className)}>\n      <Squircle\n        className={VARIANTS[variant].paint}\n        radius={cornerRadius}\n        smoothing={cornerSmoothing}\n      />\n\n      <div data-slot=\"spotlight-card\" className={CONTENT}>\n        {hasTopHeader && (\n          <div className=\"mb-4 flex items-start justify-between gap-3\">\n            {header ? (\n              header\n            ) : (\n              <div className=\"flex min-w-0 items-center gap-3\">\n                {icon && <span className={ICON_CHIP}>{icon}</span>}\n                {(title || subtitle) && (\n                  <div className=\"min-w-0\">\n                    {title && (\n                      <h3 className=\"truncate font-runde text-lg font-bold tracking-tight\">\n                        {title}\n                      </h3>\n                    )}\n                    {subtitle && (\n                      <p className=\"truncate text-xs font-medium text-current/70\">\n                        {subtitle}\n                      </p>\n                    )}\n                  </div>\n                )}\n              </div>\n            )}\n            {badge && <div className=\"shrink-0\">{badge}</div>}\n          </div>\n        )}\n\n        {children}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}