alert

1import React from "react";
2import { CloseButton } from "./CloseButton";
3
4type AlertVariant = "default" | "success" | "warning" | "error";
5
6interface AlertProps {
7  variant?: AlertVariant;
8  title: string;
9  description?: string;
10  onDismiss?: () => void;
11  className?: string;
12}
13
14/* Tiles share Toast's lit-from-above gradients, so an alert and the toast
15   it came from look like the same object.                              */
16const variantConfig: Record<AlertVariant, {
17  tile: string;
18  icon: React.ReactNode;
19}> = {
20  default: {
21    tile: "var(--face-dark)",
22    icon: (
23      <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.75" viewBox="0 0 24 24">
24        <circle cx="12" cy="12" r="10" />
25        <path strokeLinecap="round" d="M12 8v4m0 4h.01" />
26      </svg>
27    ),
28  },
29  success: {
30    tile: "linear-gradient(180deg, #10b981 0%, #059669 100%)",
31    icon: (
32      <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
33        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
34      </svg>
35    ),
36  },
37  warning: {
38    tile: "linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%)",
39    icon: (
40      <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.75" viewBox="0 0 24 24">
41        <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
42      </svg>
43    ),
44  },
45  error: {
46    tile: "linear-gradient(180deg, #f87171 0%, #dc2626 100%)",
47    icon: (
48      <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
49        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
50      </svg>
51    ),
52  },
53};
54
55export function Alert({ variant = "default", title, description, onDismiss, className = "" }: AlertProps) {
56  const { tile, icon } = variantConfig[variant];
57
58  return (
59    <div
60      // Errors and warnings interrupt; everything else waits its turn
61      role={variant === "error" || variant === "warning" ? "alert" : "status"}
62      className={["rounded-[18px] p-1.5", className].join(" ")}
63      style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
64    >
65      <div
66        className="bg-white rounded-[13px] pl-3 pr-2 py-3 flex items-start gap-3"
67        style={{ boxShadow: "var(--panel-face-shadow)" }}
68      >
69        <div
70          aria-hidden
71          className="shrink-0 w-7 h-7 rounded-[8px] flex items-center justify-center text-white"
72          style={{
73            background: tile,
74            boxShadow:
75              "0 0 3px rgba(0,0,0,0.212), 0 1px 2px rgba(0,0,0,0.15), inset 0 2px 3px -2px rgba(255,255,255,0.188)",
76          }}
77        >
78          {icon}
79        </div>
80
81        <div className="flex-1 min-w-0 pt-[5px]">
82          <p className="text-[13px] font-semibold text-neutral-900 leading-tight tracking-[-0.01em]">{title}</p>
83          {description && (
84            <p className="text-[12.5px] text-neutral-500 mt-1 leading-relaxed">{description}</p>
85          )}
86        </div>
87
88        {onDismiss && <CloseButton size="sm" label="Dismiss" onClick={onDismiss} />}
89      </div>
90    </div>
91  );
92}

1"use client";
2
3import React from "react";
4
5interface CloseButtonProps {
6  onClick?: () => void;
7  label?: string;
8  size?: "sm" | "md";
9  tone?: "light" | "dark";
10  className?: string;
11}
12
13const sizes = {
14  sm: { box: "w-6 h-6 rounded-[7px]", icon: 9 },
15  md: { box: "w-7 h-7 rounded-[8px]", icon: 10 },
16};
17
18/* Quiet until hovered, then it rises into a raised face like every other
19   pressable thing — so it reads as a control, not decoration.            */
20export function CloseButton({
21  onClick,
22  label = "Close",
23  size = "md",
24  tone = "light",
25  className = "",
26}: CloseButtonProps) {
27  const dark = tone === "dark";
28  const s = sizes[size];
29
30  return (
31    <button
32      type="button"
33      onClick={onClick}
34      aria-label={label}
35      className={[
36        "group/close relative shrink-0 flex items-center justify-center cursor-pointer",
37        "transition-[color,background,scale] duration-150 active:scale-95",
38        "focus-visible:outline-2 focus-visible:outline-offset-2",
39        dark
40          ? "text-white/45 hover:text-white focus-visible:outline-white"
41          : "text-neutral-400 hover:text-neutral-900 focus-visible:outline-neutral-900",
42        s.box,
43        className,
44      ].join(" ")}
45    >
46      <span
47        aria-hidden
48        className={[
49          "absolute inset-0 rounded-[inherit] opacity-0 group-hover/close:opacity-100 transition-opacity duration-150",
50          dark
51            ? "[background:var(--tile-dark)] [box-shadow:var(--tile-dark-shadow)]"
52            : "[background:var(--face-light)] [box-shadow:var(--face-light-shadow)]",
53        ].join(" ")}
54      />
55      <svg
56        className="relative"
57        width={s.icon}
58        height={s.icon}
59        fill="none"
60        stroke="currentColor"
61        strokeWidth="2.5"
62        viewBox="0 0 24 24"
63      >
64        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
65      </svg>
66    </button>
67  );
68}