Border beam

import type { ComponentProps } from "react";

/**
 * A frame with a light that travels round its edge. The edge is a gradient
 * swept around the box, showing through a gap the content leaves, so the
 * light follows the corners exactly whatever their radius.
 */
export function BorderBeam({ className, children, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="border-beam"
      {...props}
      className={[
        "relative rounded-(--tui-border-beam-radius) p-(--tui-border-beam-width) [animation:tui-beam_var(--tui-border-beam-duration)_linear_infinite] [background:conic-gradient(from_var(--tui-beam-angle),var(--tui-border-beam-track)_0_62%,var(--tui-border-beam-color)_86%,var(--tui-border-beam-track)_100%)] motion-reduce:[animation:none]",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
    >
      <div className="rounded-[calc(var(--tui-border-beam-radius)_-_var(--tui-border-beam-width))] bg-(--tui-border-beam-bg) p-(--tui-border-beam-padding) font-(family-name:--tui-font) text-(length:--tui-text) text-(--tui-border-beam-fg)">{children}</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;

  /* Border beam */
  --tui-border-beam-duration: 4s;
  --tui-border-beam-color: var(--tui-primary);
  --tui-border-beam-track: var(--tui-border);
  --tui-border-beam-width: 2px;
  --tui-border-beam-radius: calc(var(--tui-radius) * 2);
  --tui-border-beam-padding: calc(var(--tui-space) * 6);
  --tui-border-beam-bg: var(--tui-bg);
  --tui-border-beam-fg: var(--tui-fg);
}

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

@property --tui-beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes tui-beam {
  to { --tui-beam-angle: 360deg; }
}