Pricing Card Two

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 = 'pink' | 'blue' | 'amber' | 'emerald' | 'zinc';
17 
18export type PricingFeature = {
19  label: React.ReactNode;
20  included?: boolean; // default true
21};
22 
23export type PricingCardTwoProps = {
24  icon?: React.ReactNode;
25  name: string;
26  subtitle?: string;
27 
28  price: number | string;
29  currency?: string;
30  periodLabel?: string;
31 
32  features: PricingFeature[];
33 
34  cta?: AnchorOrButton & { label?: string; 'aria-label'?: string };
35 
36  /** Visuals */
37  tone?: Tone;
38  className?: string;
39 
40  /** Slot overrides */
41  iconClassName?: string;
42  nameClassName?: string;
43  subtitleClassName?: string;
44  priceClassName?: string;
45  periodClassName?: string;
46  featureListClassName?: string;
47  featureItemClassName?: string;
48  ctaClassName?: string;
49};
50 
51const toneMap: Record<
52  Tone,
53  {
54    /** gradient frame */
55    frame: string;
56    /** accent text (icon + price) */
57    accent: string;
58    /** CTA */
59    btn: string;
60    btnHover: string;
61    /** tick / cross badges */
62    okBg: string;
63    okRing: string;
64    okFg: string;
65    noBg: string;
66    noRing: string;
67    noFg: string;
68  }
69> = {
70  pink: {
71    frame: 'bg-gradient-to-b from-pink-400 to-fuchsia-600',
72    accent: 'text-pink-600',
73    btn: 'bg-pink-600 text-white',
74    btnHover: 'hover:bg-pink-700',
75    okBg: 'bg-pink-50 dark:bg-pink-950/40',
76    okRing: 'ring-pink-200 dark:ring-pink-900/50',
77    okFg: 'text-pink-600 dark:text-pink-400',
78    noBg: 'bg-amber-50 dark:bg-amber-950/40',
79    noRing: 'ring-amber-200 dark:ring-amber-900/40',
80    noFg: 'text-amber-500',
81  },
82  blue: {
83    frame: 'bg-gradient-to-b from-blue-400 to-indigo-600',
84    accent: 'text-blue-600',
85    btn: 'bg-blue-600 text-white',
86    btnHover: 'hover:bg-blue-700',
87    okBg: 'bg-blue-50 dark:bg-blue-950/40',
88    okRing: 'ring-blue-200 dark:ring-blue-900/50',
89    okFg: 'text-blue-600 dark:text-blue-400',
90    noBg: 'bg-amber-50 dark:bg-amber-950/40',
91    noRing: 'ring-amber-200 dark:ring-amber-900/40',
92    noFg: 'text-amber-500',
93  },
94  amber: {
95    frame: 'bg-gradient-to-b from-amber-400 to-orange-500',
96    accent: 'text-amber-600',
97    btn: 'bg-amber-500 text-white',
98// … truncated