{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "selection-card",
  "title": "Selection Card",
  "description": "A stylized selection card component for wizard and onboarding UIs. Includes SelectionCard with icon, title, description, and color-coded selection state, plus PageDots for step navigation and BRAND_COLORS preset for common tools.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/ui/selection-card.tsx",
      "content": "\"use client\";\n\n/**\n * SelectionCard and PageDots components for wizard/onboarding UIs.\n * SelectionCard is a stylized button with icon, title, description, and selected state.\n * PageDots provides navigation indicators for multi-step wizards.\n */\n\nimport { Check } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n/** Color classes for selection card theming */\nexport interface SelectionCardColorClass {\n  /** Background color when selected (e.g., \"bg-blue-500/10\") */\n  bg: string;\n  /** Text color when selected (e.g., \"text-blue-600 dark:text-blue-400\") */\n  text: string;\n  /** Ring color when selected (e.g., \"ring-blue-500\") */\n  ring: string;\n  /** Icon background color when selected (e.g., \"bg-blue-500/20\") */\n  iconBg: string;\n}\n\nexport interface SelectionCardProps {\n  /** Whether this card is currently selected */\n  selected: boolean;\n  /** Click handler */\n  onClick: () => void;\n  /** Icon component to render */\n  icon: React.ComponentType<{ className?: string }>;\n  /** Card title */\n  title: string;\n  /** Optional subtitle below title */\n  subtitle?: string;\n  /** Description text */\n  description: string;\n  /** Color classes for theming */\n  colorClass: SelectionCardColorClass;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * A selectable card component for wizard/onboarding selection UIs.\n * Displays an icon, title, optional subtitle, and description with\n * color-coded styling based on selection state.\n */\nexport function SelectionCard({\n  selected,\n  onClick,\n  icon: Icon,\n  title,\n  subtitle,\n  description,\n  colorClass,\n  className,\n}: SelectionCardProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className={cn(\n        \"relative flex flex-col items-center justify-center gap-4 rounded-2xl border-2 p-8 w-52 h-64\",\n        \"transition-all duration-200 ease-out cursor-pointer\",\n        \"hover:scale-[1.02] hover:shadow-lg\",\n        selected\n          ? [\n              \"scale-[1.02] shadow-lg\",\n              colorClass.bg,\n              colorClass.ring,\n              \"ring-2 ring-offset-2 ring-offset-background\",\n              \"border-transparent\",\n            ]\n          : [\"border-border/50 hover:border-border bg-card\"],\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          \"flex items-center justify-center rounded-2xl p-4\",\n          selected ? colorClass.iconBg : \"bg-muted\",\n        )}\n      >\n        <Icon\n          className={cn(\n            \"h-16 w-16 transition-colors\",\n            selected ? colorClass.text : \"text-muted-foreground\",\n          )}\n        />\n      </div>\n      <div className=\"text-center space-y-1\">\n        <h3\n          className={cn(\n            \"text-lg font-semibold\",\n            selected ? colorClass.text : \"text-foreground\",\n          )}\n        >\n          {title}\n        </h3>\n        {subtitle && (\n          <p\n            className={cn(\n              \"text-xs font-medium\",\n              selected ? colorClass.text : \"text-muted-foreground\",\n            )}\n          >\n            {subtitle}\n          </p>\n        )}\n        <p className=\"text-xs text-muted-foreground\">{description}</p>\n      </div>\n      {selected && (\n        <div\n          className={cn(\n            \"absolute top-3 right-3 rounded-full p-1\",\n            colorClass.iconBg,\n          )}\n        >\n          <Check className={cn(\"h-4 w-4\", colorClass.text)} />\n        </div>\n      )}\n    </button>\n  );\n}\n\nexport interface PageDotsProps {\n  /** Current page (1-indexed) */\n  current: number;\n  /** Total number of pages */\n  total: number;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Navigation dots for multi-step wizards.\n * Displays filled dots for the current page and hollow dots for others.\n */\nexport function PageDots({ current, total, className }: PageDotsProps) {\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)}>\n      {Array.from({ length: total }, (_, i) => (\n        <div\n          key={i}\n          className={cn(\n            \"h-2 w-2 rounded-full transition-colors\",\n            i + 1 === current ? \"bg-foreground\" : \"bg-muted-foreground/30\",\n          )}\n        />\n      ))}\n    </div>\n  );\n}\n\n/** Pre-configured brand colors for common runtime/package manager icons */\nexport const BRAND_COLORS = {\n  python: {\n    bg: \"bg-blue-500/10\",\n    text: \"text-blue-600 dark:text-blue-400\",\n    ring: \"ring-blue-500\",\n    iconBg: \"bg-blue-500/20\",\n  },\n  deno: {\n    bg: \"bg-emerald-500/10\",\n    text: \"text-emerald-600 dark:text-emerald-400\",\n    ring: \"ring-emerald-500\",\n    iconBg: \"bg-emerald-500/20\",\n  },\n  uv: {\n    bg: \"bg-fuchsia-500/10\",\n    text: \"text-fuchsia-600 dark:text-fuchsia-400\",\n    ring: \"ring-fuchsia-500\",\n    iconBg: \"bg-fuchsia-500/20\",\n  },\n  conda: {\n    bg: \"bg-green-500/10\",\n    text: \"text-green-600 dark:text-green-400\",\n    ring: \"ring-green-500\",\n    iconBg: \"bg-green-500/20\",\n  },\n  pixi: {\n    bg: \"bg-yellow-500/10\",\n    text: \"text-yellow-600 dark:text-yellow-400\",\n    ring: \"ring-yellow-500\",\n    iconBg: \"bg-yellow-500/20\",\n  },\n} as const satisfies Record<string, SelectionCardColorClass>;\n",
      "type": "registry:component",
      "target": "components/ui/selection-card.tsx"
    }
  ],
  "type": "registry:component"
}