{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "plan-card",
  "type": "registry:ui",
  "title": "Plan Card",
  "description": "A card for displaying pricing tiers and subscription plans.",
  "files": [
    {
      "path": "src/registry/ui/plan-card.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { Check, X } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst planCardVariants = cva(\n  \"relative rounded-2xl border bg-card text-card-foreground transition-all duration-200\",\n  {\n    variants: {\n      variant: {\n        default: \"border-border\",\n        highlighted:\n          \"border-primary shadow-lg shadow-primary/10 ring-1 ring-primary\",\n        compact: \"border-border p-4\",\n      },\n      size: {\n        default: \"p-6\",\n        lg: \"p-8\",\n      },\n      layout: {\n        vertical: \"flex flex-col min-w-[280px]\",\n        horizontal: \"flex flex-row items-center gap-6 w-full\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      layout: \"vertical\",\n    },\n  },\n);\n\ninterface PlanCardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof planCardVariants> {}\n\nconst PlanCard = React.forwardRef<HTMLDivElement, PlanCardProps>(\n  ({ className, variant, size, layout, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(planCardVariants({ variant, size, layout, className }))}\n      {...props}\n    />\n  ),\n);\nPlanCard.displayName = \"PlanCard\";\n\nconst PlanCardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex flex-col gap-2\", className)} {...props} />\n));\nPlanCardHeader.displayName = \"PlanCardHeader\";\n\ninterface PlanCardBadgeProps\n  extends React.ComponentPropsWithoutRef<typeof Badge> {}\n\nconst PlanCardBadge = React.forwardRef<HTMLDivElement, PlanCardBadgeProps>(\n  ({ className, ...props }, ref) => (\n    <Badge ref={ref} className={cn(\"w-fit\", className)} {...props} />\n  ),\n);\nPlanCardBadge.displayName = \"PlanCardBadge\";\n\nconst PlanCardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\"text-2xl font-bold tracking-tight\", className)}\n    {...props}\n  />\n));\nPlanCardTitle.displayName = \"PlanCardTitle\";\n\nconst PlanCardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nPlanCardDescription.displayName = \"PlanCardDescription\";\n\ninterface PlanCardPriceProps extends React.HTMLAttributes<HTMLDivElement> {\n  amount: number;\n  currency?: string;\n  period?: \"month\" | \"year\" | \"once\";\n  originalAmount?: number;\n}\n\nconst PlanCardPrice = React.forwardRef<HTMLDivElement, PlanCardPriceProps>(\n  (\n    {\n      className,\n      amount,\n      currency = \"$\",\n      period = \"month\",\n      originalAmount,\n      ...props\n    },\n    ref,\n  ) => {\n    const periodLabel = {\n      month: \"/mo\",\n      year: \"/yr\",\n      once: \"\",\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"my-6 flex items-baseline gap-1\", className)}\n        {...props}\n      >\n        {originalAmount && (\n          <span className=\"text-lg text-muted-foreground line-through\">\n            {currency}\n            {originalAmount}\n          </span>\n        )}\n        <span className=\"text-4xl font-bold tracking-tight\">\n          {currency}\n          {amount}\n        </span>\n        {period !== \"once\" && (\n          <span className=\"text-muted-foreground\">{periodLabel[period]}</span>\n        )}\n      </div>\n    );\n  },\n);\nPlanCardPrice.displayName = \"PlanCardPrice\";\n\nconst PlanCardFeatures = React.forwardRef<\n  HTMLUListElement,\n  React.HTMLAttributes<HTMLUListElement>\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn(\"flex flex-col gap-3 text-sm\", className)}\n    {...props}\n  />\n));\nPlanCardFeatures.displayName = \"PlanCardFeatures\";\n\ninterface PlanCardFeatureProps extends React.HTMLAttributes<HTMLLIElement> {\n  included?: boolean;\n}\n\nconst PlanCardFeature = React.forwardRef<HTMLLIElement, PlanCardFeatureProps>(\n  ({ className, included = true, children, ...props }, ref) => (\n    <li\n      ref={ref}\n      className={cn(\n        \"flex items-center gap-3\",\n        !included && \"text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {included ? (\n        <Check className=\"h-4 w-4 shrink-0 text-primary\" />\n      ) : (\n        <X className=\"h-4 w-4 shrink-0 text-muted-foreground\" />\n      )}\n      <span>{children}</span>\n    </li>\n  ),\n);\nPlanCardFeature.displayName = \"PlanCardFeature\";\n\ninterface PlanCardActionProps\n  extends React.ComponentPropsWithoutRef<typeof Button> {}\n\nconst PlanCardAction = React.forwardRef<HTMLButtonElement, PlanCardActionProps>(\n  ({ className, ...props }, ref) => (\n    <Button ref={ref} className={cn(\"mt-6 w-full\", className)} {...props} />\n  ),\n);\nPlanCardAction.displayName = \"PlanCardAction\";\n\nexport {\n  PlanCard,\n  PlanCardHeader,\n  PlanCardBadge,\n  PlanCardTitle,\n  PlanCardDescription,\n  PlanCardPrice,\n  PlanCardFeatures,\n  PlanCardFeature,\n  PlanCardAction,\n  planCardVariants,\n};\n\nexport type {\n  PlanCardProps,\n  PlanCardBadgeProps,\n  PlanCardPriceProps,\n  PlanCardFeatureProps,\n  PlanCardActionProps,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/plan-card.tsx"
    },
    {
      "path": "src/registry/lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n",
      "type": "registry:lib",
      "target": "lib/utils.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority",
    "lucide-react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "badge",
    "button"
  ]
}