{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-table",
  "type": "registry:ui",
  "title": "Pricing Table",
  "description": "A comparison table for displaying multiple pricing plans side by side with feature comparison.",
  "files": [
    {
      "path": "src/registry/ui/pricing-table.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { Check, Minus, X } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst GRID_COLS = {\n  3: \"grid-cols-3\",\n  4: \"grid-cols-4\",\n  5: \"grid-cols-5\",\n} as const;\n\ntype ColumnCount = keyof typeof GRID_COLS;\n\nconst pricingTableVariants = cva(\n  \"relative w-full overflow-hidden rounded-2xl border bg-card text-card-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"border-border\",\n        elevated: \"border-border shadow-lg\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\ninterface PricingTableProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof pricingTableVariants> {\n  /** Accessible label for the pricing table */\n  \"aria-label\"?: string;\n}\n\nconst PricingTable = React.forwardRef<HTMLDivElement, PricingTableProps>(\n  (\n    {\n      className,\n      variant,\n      \"aria-label\": ariaLabel = \"Pricing comparison\",\n      ...props\n    },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n      role=\"table\"\n      aria-label={ariaLabel}\n      className={cn(pricingTableVariants({ variant, className }))}\n      {...props}\n    />\n  ),\n);\nPricingTable.displayName = \"PricingTable\";\n\ninterface PricingTableHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  columns?: ColumnCount;\n}\n\nconst PricingTableHeader = React.forwardRef<\n  HTMLDivElement,\n  PricingTableHeaderProps\n>(({ className, columns = 4, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"rowgroup\"\n    className={cn(\"grid border-b bg-muted/30\", GRID_COLS[columns], className)}\n    {...props}\n  />\n));\nPricingTableHeader.displayName = \"PricingTableHeader\";\n\ninterface PricingTablePlanProps extends React.HTMLAttributes<HTMLDivElement> {\n  highlighted?: boolean;\n}\n\nconst PricingTablePlan = React.forwardRef<\n  HTMLDivElement,\n  PricingTablePlanProps\n>(({ className, highlighted, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"columnheader\"\n    className={cn(\n      \"flex flex-col items-center gap-1 p-6 text-center\",\n      highlighted &&\n        \"bg-primary/5 ring-2 ring-inset ring-primary first:rounded-tl-2xl last:rounded-tr-2xl\",\n      className,\n    )}\n    {...props}\n  />\n));\nPricingTablePlan.displayName = \"PricingTablePlan\";\n\ninterface PricingTablePlanNameProps\n  extends React.HTMLAttributes<HTMLHeadingElement> {\n  /** Heading level (default: 3) */\n  as?: \"h2\" | \"h3\" | \"h4\";\n}\n\nconst PricingTablePlanName = React.forwardRef<\n  HTMLHeadingElement,\n  PricingTablePlanNameProps\n>(({ className, as: Component = \"h3\", ...props }, ref) => (\n  <Component\n    ref={ref}\n    className={cn(\"text-lg font-semibold tracking-tight\", className)}\n    {...props}\n  />\n));\nPricingTablePlanName.displayName = \"PricingTablePlanName\";\n\ninterface PricingTablePriceProps extends React.HTMLAttributes<HTMLDivElement> {\n  amount: number;\n  currency?: string;\n  period?: \"month\" | \"year\" | \"once\";\n}\n\nconst PricingTablePrice = React.forwardRef<\n  HTMLDivElement,\n  PricingTablePriceProps\n>(({ className, amount, currency = \"$\", period = \"month\", ...props }, ref) => {\n  const periodLabel = {\n    month: \"/mo\",\n    year: \"/yr\",\n    once: \"\",\n  };\n\n  const periodFullLabel = {\n    month: \"per month\",\n    year: \"per year\",\n    once: \"one-time payment\",\n  };\n\n  // Screen reader friendly price\n  const srLabel =\n    period === \"once\"\n      ? `${currency}${amount}, ${periodFullLabel[period]}`\n      : `${currency}${amount} ${periodFullLabel[period]}`;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\"mt-2 flex items-baseline gap-0.5\", className)}\n      {...props}\n    >\n      <span className=\"sr-only\">{srLabel}</span>\n      <span className=\"text-3xl font-bold tracking-tight\" aria-hidden=\"true\">\n        {currency}\n        {amount}\n      </span>\n      {period !== \"once\" && (\n        <span className=\"text-sm text-muted-foreground\" aria-hidden=\"true\">\n          {periodLabel[period]}\n        </span>\n      )}\n    </div>\n  );\n});\nPricingTablePrice.displayName = \"PricingTablePrice\";\n\nconst PricingTablePlanDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"mt-1 text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nPricingTablePlanDescription.displayName = \"PricingTablePlanDescription\";\n\ninterface PricingTableActionProps\n  extends React.ComponentPropsWithoutRef<typeof Button> {}\n\nconst PricingTableAction = React.forwardRef<\n  HTMLButtonElement,\n  PricingTableActionProps\n>(({ className, ...props }, ref) => (\n  <Button ref={ref} className={cn(\"mt-4 w-full\", className)} {...props} />\n));\nPricingTableAction.displayName = \"PricingTableAction\";\n\nconst PricingTableBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"rowgroup\"\n    className={cn(\n      \"divide-y\",\n      // Apply rounded corners to highlighted cells in last row\n      \"[&>:last-child>[data-highlighted]:first-child]:rounded-bl-2xl\",\n      \"[&>:last-child>[data-highlighted]:last-child]:rounded-br-2xl\",\n      className,\n    )}\n    {...props}\n  />\n));\nPricingTableBody.displayName = \"PricingTableBody\";\n\ninterface PricingTableRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  columns?: ColumnCount;\n}\n\nconst PricingTableRow = React.forwardRef<HTMLDivElement, PricingTableRowProps>(\n  ({ className, columns = 4, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"row\"\n      className={cn(\"grid items-stretch\", GRID_COLS[columns], className)}\n      {...props}\n    />\n  ),\n);\nPricingTableRow.displayName = \"PricingTableRow\";\n\nconst PricingTableFeatureCell = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"rowheader\"\n    className={cn(\n      \"flex items-center self-stretch px-6 py-4 text-sm font-medium\",\n      className,\n    )}\n    {...props}\n  />\n));\nPricingTableFeatureCell.displayName = \"PricingTableFeatureCell\";\n\n/** Empty spacer cell for the header's first column */\nconst PricingTableSpacer = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"columnheader\"\n    aria-hidden=\"true\"\n    className={cn(\"p-6\", className)}\n    {...props}\n  />\n));\nPricingTableSpacer.displayName = \"PricingTableSpacer\";\n\ntype CellValue = boolean | string | \"partial\";\n\ninterface PricingTableCellProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: CellValue;\n  highlighted?: boolean;\n}\n\nconst PricingTableCell = React.forwardRef<\n  HTMLDivElement,\n  PricingTableCellProps\n>(({ className, value, highlighted, ...props }, ref) => {\n  const renderValue = () => {\n    if (typeof value === \"boolean\") {\n      return value ? (\n        <Check className=\"h-5 w-5 text-primary\" aria-hidden=\"true\" />\n      ) : (\n        <X className=\"h-5 w-5 text-muted-foreground/50\" aria-hidden=\"true\" />\n      );\n    }\n    if (value === \"partial\") {\n      return (\n        <Minus className=\"h-5 w-5 text-muted-foreground\" aria-hidden=\"true\" />\n      );\n    }\n    return <span className=\"text-sm\">{value}</span>;\n  };\n\n  // Screen reader friendly value\n  const getAriaLabel = () => {\n    if (typeof value === \"boolean\") {\n      return value ? \"Included\" : \"Not included\";\n    }\n    if (value === \"partial\") {\n      return \"Partially included\";\n    }\n    return undefined; // Let the text content speak for itself\n  };\n\n  const ariaLabel = getAriaLabel();\n\n  return (\n    <div\n      ref={ref}\n      role=\"cell\"\n      aria-label={ariaLabel}\n      data-highlighted={highlighted || undefined}\n      className={cn(\n        \"flex items-center justify-center self-stretch px-6 py-4\",\n        highlighted && \"bg-primary/5\",\n        className,\n      )}\n      {...props}\n    >\n      {renderValue()}\n    </div>\n  );\n});\nPricingTableCell.displayName = \"PricingTableCell\";\n\ninterface PricingTableFeatureLabelProps\n  extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst PricingTableFeatureLabel = React.forwardRef<\n  HTMLDivElement,\n  PricingTableFeatureLabelProps\n>(({ className, children, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"row\"\n    aria-label={\n      typeof children === \"string\" ? `${children} section` : undefined\n    }\n    className={cn(\n      \"px-6 py-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground bg-muted/50\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n));\nPricingTableFeatureLabel.displayName = \"PricingTableFeatureLabel\";\n\nexport {\n  PricingTable,\n  PricingTableHeader,\n  PricingTablePlan,\n  PricingTablePlanName,\n  PricingTablePrice,\n  PricingTablePlanDescription,\n  PricingTableAction,\n  PricingTableBody,\n  PricingTableRow,\n  PricingTableFeatureCell,\n  PricingTableSpacer,\n  PricingTableCell,\n  PricingTableFeatureLabel,\n  pricingTableVariants,\n};\n\nexport type {\n  PricingTableProps,\n  PricingTableHeaderProps,\n  PricingTablePlanProps,\n  PricingTablePriceProps,\n  PricingTablePlanNameProps,\n  PricingTableActionProps,\n  PricingTableRowProps,\n  PricingTableCellProps,\n  PricingTableFeatureLabelProps,\n  CellValue,\n  ColumnCount,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/pricing-table.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": [
    "button"
  ]
}