border-beam-button

1"use client"
2 
3/**
4 * `border-beam` around `Button` — compact `beamSize="sm"` glow for controls.
5 * `className` styles the button; `borderBeamClassName` styles the beam wrapper.
6 */
7import type { ComponentProps, CSSProperties } from "react"
8import { forwardRef } from "react"
9import {
10  BorderBeam,
11  type BorderBeamProps,
12  type BorderBeamSize,
13} from "border-beam"
14 
15import { cn } from "@/lib/utils"
16import { Button } from "@/components/ui/button"
17 
18type BeamShellProps = Pick<
19  BorderBeamProps,
20  | "colorVariant"
21  | "theme"
22  | "staticColors"
23  | "duration"
24  | "active"
25  | "borderRadius"
26  | "brightness"
27  | "saturation"
28  | "hueRange"
29  | "strength"
30  | "onActivate"
31  | "onDeactivate"
32> & {
33  beamSize?: BorderBeamSize
34  borderBeamClassName?: string
35  borderBeamStyle?: CSSProperties
36}
37 
38export type BorderBeamButtonProps = ComponentProps<typeof Button> &
39  BeamShellProps
40 
41export type BorderBeamIconButtonProps = BorderBeamButtonProps
42 
43export const BorderBeamButton = forwardRef<
44  HTMLDivElement,
45  BorderBeamButtonProps
46>(function BorderBeamButton(
47  {
48    beamSize = "sm",
49    borderBeamClassName,
50    borderBeamStyle,
51    theme = "auto",
52    colorVariant,
53    staticColors,
54    duration,
55    active,
56    borderRadius,
57    brightness,
58    saturation,
59    hueRange,
60    strength,
61    onActivate,
62    onDeactivate,
63    className,
64    ...buttonProps
65  },
66  ref
67) {
68  return (
69    <BorderBeam
70      active={active}
71      borderRadius={borderRadius}
72      brightness={brightness}
73      className={cn(
74        "overflow-visible! inline-flex w-fit min-w-0 flex-col items-stretch leading-none",
75        borderBeamClassName
76      )}
77      colorVariant={colorVariant}
78      duration={duration}
79      hueRange={hueRange}
80      onActivate={onActivate}
81      onDeactivate={onDeactivate}
82      ref={ref}
83      saturation={saturation}
84      size={beamSize}
85      staticColors={staticColors}
86      strength={strength}
87      style={borderBeamStyle}
88      theme={theme}
89    >
90      <Button className={className} {...buttonProps} />
91    </BorderBeam>
92  )
93})
94 
95BorderBeamButton.displayName = "BorderBeamButton"
96 
97export const BorderBeamIconButton = forwardRef<
98  HTMLDivElement,
99  BorderBeamIconButtonProps
100>(function BorderBeamIconButton(
101  { size = "icon-sm", className, ...props },
102  ref
103) {
104  return (
105    <BorderBeamButton
106      className={cn("!leading-none [&_svg]:block [&_svg]:shrink-0", className)}
107      ref={ref}
108      size={size}
109      {...props}
110    />
111  )
112})
113 
114// … truncated