hitbox

1import { cva, type VariantProps } from "class-variance-authority";
2import { Slot as SlotPrimitive } from "radix-ui";
3import type * as React from "react";
4 
5import { cn } from "@/lib/utils";
6 
7type Size = "default" | "sm" | "lg";
8type DynamicSize = Size | (string & {});
9 
10const sizes: DynamicSize[] = ["default", "sm", "lg"];
11 
12const hitboxVariants = cva(
13  "relative [--size-default:12px] [--size-lg:16px] [--size-sm:8px] after:absolute after:content-['']",
14  {
15    variants: {
16      size: {
17        default: "[--size:var(--size-default)]",
18        sm: "[--size:var(--size-sm)]",
19        lg: "[--size:var(--size-lg)]",
20        dynamic: "[--size:var(--size)]",
21      },
22      position: {
23        all: "after:[inset:calc(-1*var(--size))]",
24        top: "after:[height:var(--size)] after:[left:0] after:[right:0] after:[top:calc(-1*var(--size))]",
25        bottom:
26          "after:[bottom:calc(-1*var(--size))] after:[height:var(--size)] after:[left:0] after:[right:0]",
27        left: "after:[bottom:0] after:[left:calc(-1*var(--size))] after:[top:0] after:[width:var(--size)]",
28        right:
29          "after:[bottom:0] after:[right:calc(-1*var(--size))] after:[top:0] after:[width:var(--size)]",
30        vertical:
31          "after:[bottom:calc(-1*var(--size))] after:[left:0] after:[right:0] after:[top:calc(-1*var(--size))]",
32        horizontal:
33          "after:[bottom:0] after:[left:calc(-1*var(--size))] after:[right:calc(-1*var(--size))] after:[top:0]",
34      },
35      radius: {
36        none: "",
37        sm: "after:rounded-sm",
38        md: "after:rounded-md",
39        lg: "after:rounded-lg",
40        full: "after:rounded-full",
41      },
42      debug: {
43        true: "after:border after:border-red-500 after:border-dashed after:bg-red-500/20",
44        false: "",
45      },
46    },
47    defaultVariants: {
48      size: "default",
49      position: "all",
50      radius: "none",
51      debug: false,
52    },
53  },
54);
55 
56interface HitboxProps
57  extends React.ComponentProps<typeof SlotPrimitive.Slot>,
58    Omit<VariantProps<typeof hitboxVariants>, "size"> {
59  size?: DynamicSize;
60}
61 
62function Hitbox(props: HitboxProps) {
63  const {
64    className,
65    style,
66    size,
67    position,
68    radius,
69    debug = false,
70    ...hitboxProps
71  } = props;
72 
73  const isDynamicSize = size && !sizes.includes(size);
74 
75  return (
76    <SlotPrimitive.Slot
77      {...hitboxProps}
78      className={cn(
79        hitboxVariants({
80          size: isDynamicSize ? "dynamic" : (size as Size),
81          position,
82          radius,
83// … truncated