Pricing card

import type { ReactNode } from "react";

export interface PricingCardProps {
  name: ReactNode;
  /** The amount, with its currency: "$24". */
  price: ReactNode;
  /** What the price is per: "per seat, monthly". */
  period?: ReactNode;
  description?: ReactNode;
  /** What the plan includes, one line each. */
  features?: ReactNode[];
  /** A word beside the name, e.g. "Popular". */
  badge?: ReactNode;
  /** The plan being recommended: it gets the stronger border. */
  isFeatured?: boolean;
  /** The button. */
  children?: ReactNode;
  className?: string;
}

/** One plan: its price, what it is for, what it includes, and the button to take it. */
export function PricingCard({ name, price, period, description, features, badge, isFeatured, children, className }: PricingCardProps) {
  return (
    <div
      data-slot="card"
      data-featured={isFeatured || undefined}
      className={[
        "flex w-full flex-col gap-(--tui-pricing-card-gap) rounded-(--tui-pricing-card-radius) border-solid border-(length:--tui-pricing-card-border-width) border-(--tui-pricing-card-border) bg-(--tui-pricing-card-bg) p-(--tui-pricing-card-padding) font-(family-name:--tui-font) text-(length:--tui-pricing-card-font-size) text-(--tui-pricing-card-fg) shadow-(--tui-pricing-card-shadow) data-featured:border-(--tui-pricing-card-featured-border)! data-featured:[box-shadow:0_0_0_1px_var(--tui-pricing-card-featured-border),var(--tui-pricing-card-shadow)]!",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
    >
      <div className="flex flex-col gap-2">
        <div className="flex items-center justify-between gap-3 leading-none">
          <h3 data-slot="card-title" className="m-0 text-(length:--tui-pricing-card-name-size) font-(--tui-pricing-card-name-weight)">
            {name}
          </h3>
          {badge}
        </div>
        {description && <p className="m-0 leading-snug text-(--tui-pricing-card-muted)">{description}</p>}
      </div>
      <div className="flex items-baseline gap-1.5 leading-none">
        <span className="text-(length:--tui-pricing-card-price-size) font-(--tui-pricing-card-price-weight) tracking-tight tabular-nums">{price}</span>
        {period && <span className="text-(--tui-pricing-card-muted)">{period}</span>}
      </div>
      {children}
      {features && features.length > 0 && (
        <ul className="m-0 flex list-none flex-col gap-(--tui-pricing-card-feature-gap) p-0">
          {features.map((feature, i) => (
            <li key={i} className="flex items-start gap-2.5 leading-snug">
              <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mt-[0.15em] size-[1.1em] shrink-0 text-(--tui-pricing-card-check)">
                <path d="M3.500 8.500l3 3 6-7" />
              </svg>
              <span>{feature}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Pricing card */
  --tui-pricing-card-padding: calc(var(--tui-space) * 6);
  --tui-pricing-card-gap: calc(var(--tui-space) * 5);
  --tui-pricing-card-feature-gap: calc(var(--tui-space) * 2.5);
  --tui-pricing-card-radius: calc(var(--tui-radius) * 2);
  --tui-pricing-card-border-width: var(--tui-border-width);
  --tui-pricing-card-shadow: var(--tui-shadow);
  --tui-pricing-card-font-size: var(--tui-text);
  --tui-pricing-card-name-size: 16px;
  --tui-pricing-card-name-weight: 600;
  --tui-pricing-card-price-size: 36px;
  --tui-pricing-card-price-weight: 600;
  --tui-pricing-card-bg: var(--tui-bg);
  --tui-pricing-card-fg: var(--tui-fg);
  --tui-pricing-card-muted: var(--tui-muted-fg);
  --tui-pricing-card-border: var(--tui-border);
  --tui-pricing-card-check: var(--tui-primary);
  --tui-pricing-card-featured-border: var(--tui-primary);
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}