Pricing Table

1import { cva, type VariantProps } from "class-variance-authority";
2import { Check, Minus, X } from "lucide-react";
3import * as React from "react";
4import { Button } from "@/components/ui/button";
5import { cn } from "@/lib/utils";
6 
7const GRID_COLS = {
8  3: "grid-cols-3",
9  4: "grid-cols-4",
10  5: "grid-cols-5",
11} as const;
12 
13type ColumnCount = keyof typeof GRID_COLS;
14 
15const pricingTableVariants = cva(
16  "relative w-full overflow-hidden rounded-2xl border bg-card text-card-foreground",
17  {
18    variants: {
19      variant: {
20        default: "border-border",
21        elevated: "border-border shadow-lg",
22      },
23    },
24    defaultVariants: {
25      variant: "default",
26    },
27  },
28);
29 
30interface PricingTableProps
31  extends React.HTMLAttributes<HTMLDivElement>,
32    VariantProps<typeof pricingTableVariants> {
33  /** Accessible label for the pricing table */
34  "aria-label"?: string;
35}
36 
37const PricingTable = React.forwardRef<HTMLDivElement, PricingTableProps>(
38  (
39    {
40      className,
41      variant,
42      "aria-label": ariaLabel = "Pricing comparison",
43      ...props
44    },
45    ref,
46  ) => (
47    <div
48      ref={ref}
49      role="table"
50      aria-label={ariaLabel}
51      className={cn(pricingTableVariants({ variant, className }))}
52      {...props}
53    />
54  ),
55);
56PricingTable.displayName = "PricingTable";
57 
58interface PricingTableHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
59  columns?: ColumnCount;
60}
61 
62const PricingTableHeader = React.forwardRef<
63  HTMLDivElement,
64  PricingTableHeaderProps
65>(({ className, columns = 4, ...props }, ref) => (
66  <div
67    ref={ref}
68    role="rowgroup"
69    className={cn("grid border-b bg-muted/30", GRID_COLS[columns], className)}
70    {...props}
71  />
72));
73PricingTableHeader.displayName = "PricingTableHeader";
74 
75interface PricingTablePlanProps extends React.HTMLAttributes<HTMLDivElement> {
76  highlighted?: boolean;
77}
78 
79const PricingTablePlan = React.forwardRef<
80  HTMLDivElement,
81  PricingTablePlanProps
82>(({ className, highlighted, ...props }, ref) => (
83  <div
84    ref={ref}
85    role="columnheader"
86    className={cn(
87      "flex flex-col items-center gap-1 p-6 text-center",
88      highlighted &&
89        "bg-primary/5 ring-2 ring-inset ring-primary first:rounded-tl-2xl last:rounded-tr-2xl",
90      className,
91    )}
92    {...props}
93  />
94));
95PricingTablePlan.displayName = "PricingTablePlan";
96 
97interface PricingTablePlanNameProps
98  extends React.HTMLAttributes<HTMLHeadingElement> {
99  /** Heading level (default: 3) */
100  as?: "h2" | "h3" | "h4";
101}
102 
103// … truncated