Pricing Card One

1'use client';
2 
3import * as React from 'react';
4import { cn } from '@/lib/utils';
5 
6type AnchorOrButton =
7  | ({
8      href: string;
9      onClick?: never;
10    } & React.AnchorHTMLAttributes<HTMLAnchorElement>)
11  | ({
12      href?: undefined;
13      onClick?: React.MouseEventHandler<HTMLButtonElement>;
14    } & React.ButtonHTMLAttributes<HTMLButtonElement>);
15 
16type Tone = 'indigo' | 'blue' | 'emerald' | 'zinc';
17type Variant = 'outline' | 'elevated' | 'soft';
18 
19export type PricingFeature = {
20  label: React.ReactNode;
21  included?: boolean; // default true
22};
23 
24export type PricingCardOneProps = {
25  icon?: React.ReactNode; // big top icon
26  name: string; // plan name
27  subtitle?: string; // "the starter choice"
28  price: number | string; // 5 | "$5"
29  currency?: string; // "$" (used when price is number)
30  periodLabel?: string; // "/month"
31  recommended?: boolean;
32  recommendedLabel?: string;
33 
34  features: PricingFeature[];
35 
36  /** CTA button/link. If omitted, no button is shown. */
37  cta?: AnchorOrButton & { label?: string; 'aria-label'?: string };
38 
39  /** Visuals */
40  tone?: Tone;
41  variant?: Variant;
42  className?: string;
43 
44  /** Slot style overrides */
45  badgeClassName?: string;
46  iconClassName?: string;
47  nameClassName?: string;
48  subtitleClassName?: string;
49  priceClassName?: string;
50  periodClassName?: string;
51  featureListClassName?: string;
52  featureItemClassName?: string;
53  ctaClassName?: string;
54};
55 
56const toneMap: Record<
57  Tone,
58  {
59    accent: string; // text color for icon/price
60    ring: string; // ring color for included bullet
61    bulletOkBg: string; // bg for ✓
62    bulletOkFg: string;
63    bulletNoBg: string; // bg for ✕
64    bulletNoFg: string;
65    primaryBtn: string; // filled button
66    primaryBtnHover: string;
67    outlineBtn: string; // outline button text/ring
68  }
69> = {
70  indigo: {
71    accent: 'text-indigo-600',
72    ring: 'ring-indigo-200 dark:ring-indigo-900/50',
73    bulletOkBg: 'bg-indigo-50 dark:bg-indigo-950/40',
74    bulletOkFg: 'text-indigo-600 dark:text-indigo-400',
75    bulletNoBg: 'bg-amber-50 dark:bg-amber-950/40',
76    bulletNoFg: 'text-amber-500',
77    primaryBtn: 'bg-indigo-600 text-white',
78    primaryBtnHover: 'hover:bg-indigo-700',
79    outlineBtn:
80      'text-indigo-600 ring-1 ring-inset ring-indigo-200 dark:ring-indigo-900/50',
81  },
82  blue: {
83    accent: 'text-blue-600',
84    ring: 'ring-blue-200 dark:ring-blue-900/50',
85    bulletOkBg: 'bg-blue-50 dark:bg-blue-950/40',
86    bulletOkFg: 'text-blue-600 dark:text-blue-400',
87// … truncated