Action 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-action-card-width) max-w-full flex-col gap-(--tui-action-card-gap) rounded-(--tui-action-card-radius) bg-(--tui-action-card-bg) p-(--tui-action-card-padding) font-(family-name:--tui-font) text-(length:--tui-action-card-font-size) leading-none text-(--tui-action-card-fg) shadow-(--tui-action-card-shadow)",
  head: "flex h-9 shrink-0 items-center justify-between gap-3 px-3 text-[0.93em] font-medium text-(--tui-action-card-muted)",
  chip: "inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-md bg-(--tui-action-card-well) px-1.5 text-[0.8em] font-medium text-(--tui-action-card-muted) tabular-nums",
  detail: "text-[0.93em] leading-snug text-(--tui-action-card-muted)",
  button: "inline-flex h-(--tui-action-card-row-height) cursor-default items-center justify-center gap-2 rounded-[calc(var(--tui-action-card-radius)_-_var(--tui-action-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-action-card-accent) text-(--tui-action-card-accent-fg) hover:opacity-90",
  soft: "bg-(--tui-action-card-well) text-(--tui-action-card-fg) hover:bg-(--tui-action-card-well-hover)",
};

export interface ActionCardProps extends Omit<ComponentProps<"section">, "title" | "children"> {
  /** A quiet label over the headline, and a small word at its end. */
  label?: ReactNode;
  badge?: ReactNode;
  title: ReactNode;
  /** The sentence under the title. */
  children?: ReactNode;
  primary?: { label: string; href: string };
  secondary?: { label: string; href: string };
}

/**
 * The ask, as a floating panel: a headline and a sentence with room round
 * them, and the buttons across the bottom, each the full width of its half.
 */
export function ActionCard({ label, badge, title, children, primary, secondary, className, ...props }: ActionCardProps) {
  return (
    <section data-slot="action-card" {...props} className={[air.panel, className].filter(Boolean).join(" ")}>
      {(label || badge) && (
        <div className={air.head}>
          {label}
          {badge && <span className={air.chip}>{badge}</span>}
        </div>
      )}
      <div className={"flex flex-col gap-2.5 px-3 pb-(--tui-action-card-room) " + (label || badge ? "pt-1" : "pt-(--tui-action-card-room)")}>
        <h2 className="m-0 text-(length:--tui-action-card-title-size) leading-[1.15] font-semibold tracking-[-0.025em] text-balance">{title}</h2>
        {children && <p className={"m-0 text-pretty " + air.detail + " leading-relaxed! text-[1em]!"}>{children}</p>}
      </div>
      {(primary || secondary) && (
        <div className="flex gap-(--tui-action-card-gap) *:flex-1">
          {secondary && (
            <a href={secondary.href} data-slot="action-card-secondary" className={[air.button, air.soft].join(" ")}>
              {secondary.label}
            </a>
          )}
          {primary && (
            <a href={primary.href} data-slot="action-card-primary" className={[air.button, air.filled].join(" ")}>
              {primary.label}
            </a>
          )}
        </div>
      )}
    </section>
  );
}

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

  /* Action card */
  --tui-action-card-width: 400px;
  --tui-action-card-padding: calc(var(--tui-space) * 2);
  --tui-action-card-gap: calc(var(--tui-space) * 1.5);
  --tui-action-card-radius: calc(var(--tui-radius) * 3.25);
  --tui-action-card-font-size: var(--tui-text);
  --tui-action-card-bg: light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg)));
  --tui-action-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-action-card-fg: var(--tui-fg);
  --tui-action-card-muted: var(--tui-muted-fg);
  --tui-action-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-action-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-action-card-accent: var(--tui-primary);
  --tui-action-card-accent-fg: var(--tui-primary-fg);
  --tui-action-card-row-height: calc(var(--tui-space) * 12);
  --tui-action-card-room: calc(var(--tui-space) * 5);
  --tui-action-card-title-size: 24px;
}

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