Alert

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

const base = "flex items-start gap-(--tui-alert-gap) rounded-(--tui-alert-radius) p-(--tui-alert-padding) font-(family-name:--tui-font) text-(length:--tui-alert-font-size) leading-normal text-(--tui-alert-fg)";

// No outline and no stripe: a wash of the tone, and a round mark that says what kind of news it is.
const variants = {
  neutral: { root: "bg-(--tui-alert-neutral-bg)", mark: "bg-(--tui-alert-neutral-accent)", path: "M8 7.500v3.500M8 4.750v.010" },
  success: { root: "bg-(--tui-alert-success-bg)", mark: "bg-(--tui-alert-success-accent)", path: "M4.500 8.500l2.500 2.500 4.500-5.500" },
  warning: { root: "bg-(--tui-alert-warning-bg)", mark: "bg-(--tui-alert-warning-accent)", path: "M8 4.500v4M8 11.250v.010" },
  danger: { root: "bg-(--tui-alert-danger-bg)", mark: "bg-(--tui-alert-danger-accent)", path: "M5.250 5.250l5.500 5.500M10.750 5.250l-5.500 5.500" },
};

export interface AlertProps extends Omit<ComponentProps<"div">, "title"> {
  variant?: keyof typeof variants;
  title?: ReactNode;
  /** Replaces the drawing inside the round mark. */
  icon?: ReactNode;
  /** A control at the end: a button, a link. */
  action?: ReactNode;
}

export function Alert({ variant = "neutral", title, icon, action, className, children, ...props }: AlertProps) {
  const tone = variants[variant];
  return (
    <div role={variant === "danger" ? "alert" : "status"} data-slot="alert" {...props} className={[base, tone.root, className].filter(Boolean).join(" ")}>
      <span aria-hidden data-slot="alert-mark" className={`flex size-(--tui-alert-mark-size) shrink-0 items-center justify-center rounded-full text-(--tui-alert-mark-fg) [&_svg]:size-[62%] ${tone.mark}`}>
        {icon ?? (
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
            <path d={tone.path} />
          </svg>
        )}
      </span>
      <div className="flex min-h-(--tui-alert-mark-size) min-w-0 flex-1 flex-col justify-center gap-0.5">
        {title && <div className="font-(--tui-alert-title-weight)">{title}</div>}
        {children && <div className="text-(--tui-alert-muted)">{children}</div>}
      </div>
      {action && <div className="flex min-h-(--tui-alert-mark-size) shrink-0 items-center">{action}</div>}
    </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;

  /* Alert */
  --tui-alert-padding: calc(var(--tui-space) * 4);
  --tui-alert-gap: calc(var(--tui-space) * 3.5);
  --tui-alert-mark-size: calc(var(--tui-space) * 8);
  --tui-alert-radius: calc(var(--tui-radius) * 2.5);
  --tui-alert-font-size: var(--tui-text);
  --tui-alert-title-weight: 600;
  --tui-alert-fg: var(--tui-fg);
  --tui-alert-muted: var(--tui-muted-fg);
  --tui-alert-mark-fg: var(--tui-bg);
  --tui-alert-neutral-bg: color-mix(in srgb, var(--tui-bg) 94%, var(--tui-fg));
  --tui-alert-neutral-accent: var(--tui-fg);
  --tui-alert-success-bg: color-mix(in srgb, var(--tui-bg) 89%, var(--tui-success));
  --tui-alert-success-accent: var(--tui-success);
  --tui-alert-warning-bg: color-mix(in srgb, var(--tui-bg) 87%, var(--tui-warning));
  --tui-alert-warning-accent: var(--tui-warning);
  --tui-alert-danger-bg: color-mix(in srgb, var(--tui-bg) 90%, var(--tui-danger));
  --tui-alert-danger-accent: var(--tui-danger);
}

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