Cornered Button

1import { cva, type VariantProps } from "class-variance-authority"
2import * as React from "react"
3 
4import { cn } from "@/lib/utils"
5 
6const corneredButtonVariants = cva(
7  "relative inline-flex items-center justify-center overflow-visible border border-border bg-background text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent/50",
8  {
9    variants: {
10      size: {
11        sm: "h-8 px-3",
12        md: "h-9 px-4",
13        lg: "h-10 px-6",
14      },
15      variant: {
16        default: "",
17        outline: "bg-transparent",
18        ghost: "bg-transparent border-transparent hover:bg-accent",
19        destructive:
20          "bg-destructive text-destructive-foreground hover:bg-destructive/90 border-transparent",
21      },
22      corners: {
23        on: "",
24        off: "",
25      },
26    },
27    defaultVariants: {
28      size: "md",
29      variant: "default",
30      corners: "on",
31    },
32  }
33)
34 
35export interface CorneredButtonProps
36  extends React.ComponentPropsWithRef<"button">, VariantProps<typeof corneredButtonVariants> {
37  borderWidth?: number
38  cornerSize?: number
39  cornerColor?: string
40}
41 
42export function CorneredButton({
43  className,
44  children,
45  size,
46  variant,
47  corners = "on",
48  type = "button",
49  borderWidth = 1,
50  cornerSize = 8,
51  cornerColor,
52  style,
53  ref,
54  ...props
55}: CorneredButtonProps) {
56  const cornerBorder = `${borderWidth}px solid ${cornerColor ?? "hsl(var(--border))"}`
57 
58  return (
59    <button
60      ref={ref}
61      type={type}
62      data-corners={corners}
63      className={cn(corneredButtonVariants({ size, variant }), className)}
64      style={{ borderWidth, ...style }}
65      {...props}
66    >
67      {children}
68 
69      {corners === "on" && (
70        <span
71          aria-hidden
72          className="pointer-events-none absolute"
73          style={{ inset: `-${borderWidth}px` }}
74        >
75          {(["tl", "tr", "bl", "br"] as const).map((pos) => (
76            <span
77              key={pos}
78              className={cn(
79                "absolute",
80                pos === "tl" && "top-0 left-0",
81                pos === "tr" && "top-0 right-0",
82                pos === "bl" && "bottom-0 left-0",
83                pos === "br" && "right-0 bottom-0"
84              )}
85              style={{
86                width: cornerSize,
87                height: cornerSize,
88// … truncated