Border beam

1import type { HTMLAttributes } from "react";2 3export type BorderBeamProps = HTMLAttributes<HTMLDivElement> & {4  /** Whether the decorative border highlight is present. */5  active?: boolean;6  /** Freezes the highlight at its current position. */7  paused?: boolean;8};9 10/** An explicitly controlled border signal around a surface's real content. */11export function BorderBeam({12  children,13  active = true,14  paused = false,15  className = "",16  ...divProps17}: BorderBeamProps) {18  return (19    <div20      {...divProps}21      className={`border-beam ${className}`}22      data-active={active}23      data-paused={paused}24    >25      <span className="border-beam-light" aria-hidden="true" />26      <div className="border-beam-content">{children}</div>27    </div>28  );