Price card

import type { ComponentProps, ReactNode } from "react";

// The parts every panel in this kit is made of. The corners of what is inside follow the panel's own.
const air = {
  panel: "flex w-(--tui-price-card-width) max-w-full flex-col gap-(--tui-price-card-gap) rounded-(--tui-price-card-radius) bg-(--tui-price-card-bg) p-(--tui-price-card-padding) font-(family-name:--tui-font) text-(length:--tui-price-card-font-size) leading-none text-(--tui-price-card-fg) shadow-(--tui-price-card-shadow)",
  head: "flex h-9 shrink-0 items-center justify-between gap-3 px-3 text-[0.93em] font-medium text-(--tui-price-card-muted)",
  chip: "inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-md bg-(--tui-price-card-well) px-1.5 text-[0.8em] font-medium text-(--tui-price-card-muted) tabular-nums",
  well: "rounded-[calc(var(--tui-price-card-radius)_-_var(--tui-price-card-padding))] bg-(--tui-price-card-well)",
  row: "flex min-h-(--tui-price-card-row-height) items-center gap-3 rounded-[calc(var(--tui-price-card-radius)_-_var(--tui-price-card-padding))] px-3 py-2 transition-colors duration-(--tui-duration)",
  meta: "ml-auto shrink-0 pl-2 text-[0.93em] text-(--tui-price-card-muted) tabular-nums",
  detail: "text-[0.93em] leading-snug text-(--tui-price-card-muted)",
  button: "inline-flex h-(--tui-price-card-row-height) cursor-default items-center justify-center gap-2 rounded-[calc(var(--tui-price-card-radius)_-_var(--tui-price-card-padding))] border-none px-4 font-[inherit] text-[length:inherit] leading-none font-medium whitespace-nowrap no-underline outline-none transition-[background-color,opacity,scale] duration-(--tui-duration) focus-visible:[outline:2px_solid_var(--tui-ring)] focus-visible:[outline-offset:2px] active:scale-[0.98]",
  filled: "bg-(--tui-price-card-accent) text-(--tui-price-card-accent-fg) hover:opacity-90",
  soft: "bg-(--tui-price-card-well) text-(--tui-price-card-fg) hover:bg-(--tui-price-card-well-hover)",
};

export type PriceLine = string | { label: string; /** Not in this plan: it is drawn faint, with a dash for a tick. */ included?: boolean; /** A quiet word at the end of the row: "5", "Soon". */ meta?: string };

export interface PriceCardProps extends Omit<ComponentProps<"article">, "children"> {
  name: ReactNode;
  /** A small word beside the name: "Popular", "Best value". */
  badge?: ReactNode;
  /** The price as it should be written: "$25", "Free", "Custom". */
  price: ReactNode;
  /** What the price is per: "per month", "per seat". */
  period?: ReactNode;
  /** Who the plan is for, in a line under the price. */
  line?: ReactNode;
  /** What the plan includes, and what it does not. */
  includes?: PriceLine[];
  /** The button: what it says and where it goes. */
  action: { label: string; href: string };
  /** The plan to choose: its button is the filled one. */
  featured?: boolean;
}

/**
 * One plan, as a floating panel: its name in the label row, the price in a
 * tile, what comes with it as rows, and one button across the bottom.
 */
export function PriceCard({ name, badge, price, period, line, includes, action, featured, className, ...props }: PriceCardProps) {
  return (
    <article data-slot="price-card" data-featured={featured || undefined} {...props} className={[air.panel, className].filter(Boolean).join(" ")}>
      <header className={air.head}>
        <h3 className="m-0 text-[length:inherit] font-medium text-(--tui-price-card-fg)">{name}</h3>
        {badge && <span className={air.chip}>{badge}</span>}
      </header>
      <div data-slot="price-card-price" className={"flex flex-col gap-3 p-4 " + air.well}>
        <p className="m-0 flex items-baseline gap-2">
          <span className="text-(length:--tui-price-card-price-size) leading-none font-semibold tracking-[-0.04em] tabular-nums">{price}</span>
          {period && <span className="text-(--tui-price-card-muted)">{period}</span>}
        </p>
        {line && <p className={"m-0 " + air.detail}>{line}</p>}
      </div>
      {includes && includes.length > 0 && (
        <ul className="m-0 flex list-none flex-col p-0">
          {includes.map((entry) => {
            const item = typeof entry === "string" ? { label: entry } : entry;
            const out = item.included === false;
            return (
              <li key={item.label} className={air.row + " min-h-10! " + (out ? "text-(--tui-price-card-muted)" : "")}>
                {out ? (
                  <span aria-hidden className="flex size-4 shrink-0 items-center justify-center">
                    <span className="h-0.5 w-2.5 rounded-full bg-current opacity-60" />
                  </span>
                ) : (
                  <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0 text-(--tui-price-card-muted)">
            <path d="M3.500 8.500l3 3 6-7" />
          </svg>
                )}
                <span className="min-w-0">
                  {out && <span className="sr-only">Not included: </span>}
                  {item.label}
                </span>
                {item.meta && <span className={air.meta}>{item.meta}</span>}
              </li>
            );
          })}
        </ul>
      )}
      <a href={action.href} data-slot="price-card-action" className={[air.button, featured ? air.filled : air.soft].join(" ")}>
        {action.label}
      </a>
    </article>
  );
}

: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;

  /* Price card */
  --tui-price-card-width: 320px;
  --tui-price-card-padding: calc(var(--tui-space) * 2);
  --tui-price-card-gap: calc(var(--tui-space) * 1.5);
  --tui-price-card-radius: calc(var(--tui-radius) * 3.25);
  --tui-price-card-font-size: var(--tui-text);
  --tui-price-card-bg: light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg)));
  --tui-price-card-shadow: 0 0 0 1px color-mix(in srgb, var(--tui-fg) 5%, transparent), 0 2px 6px rgb(0 0 0 / 0.04), 0 16px 40px rgb(0 0 0 / 0.1);
  --tui-price-card-fg: var(--tui-fg);
  --tui-price-card-muted: var(--tui-muted-fg);
  --tui-price-card-well: color-mix(in srgb, light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg))) 94%, var(--tui-fg));
  --tui-price-card-well-hover: color-mix(in srgb, light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg))) 90%, var(--tui-fg));
  --tui-price-card-accent: var(--tui-primary);
  --tui-price-card-accent-fg: var(--tui-primary-fg);
  --tui-price-card-row-height: calc(var(--tui-space) * 12);
  --tui-price-card-price-size: 40px;
}

.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;
}