button

1import { cva, type VariantProps } from "class-variance-authority";
2import { Slot } from "radix-ui";
3import type * as React from "react";
4import { Pane } from "@/components/ui/pane";
5import { cn } from "@/lib/utils";
6 
7const wrapperVariants = cva("inline-flex shrink-0", {
8  variants: {
9    size: {
10      default: "",
11      sm: "",
12      lg: "",
13      icon: "",
14    },
15  },
16  defaultVariants: { size: "default" },
17});
18 
19const radiusBySize: Record<string, number> = {
20  default: 16,
21  sm: 13,
22  lg: 20,
23  icon: 16,
24};
25 
26const buttonVariants = cva(
27  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap text-sm font-medium outline-none transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
28  {
29    variants: {
30      variant: {
31        default: "text-foreground",
32        destructive: "text-red-600 dark:text-red-400",
33      },
34      size: {
35        default: "h-9 px-4",
36        sm: "h-8 px-3 text-xs",
37        lg: "h-11 px-6 text-base",
38        icon: "size-9 px-0",
39      },
40    },
41    defaultVariants: { variant: "default", size: "default" },
42  },
43);
44 
45export interface ButtonProps
46  extends React.ComponentProps<"button">,
47    VariantProps<typeof buttonVariants> {
48  asChild?: boolean;
49}
50 
51function Button({
52  className,
53  variant = "default",
54  size = "default",
55  asChild = false,
56  ...props
57}: ButtonProps) {
58  const Comp = asChild ? Slot.Root : "button";
59 
60  return (
61    <Pane
62      variant="clear"
63      interactive
64      radius={radiusBySize[size ?? "default"]}
65      className={cn(
66        wrapperVariants({ size }),
67        // keyboard only: `focus-within` leaves the ring painted around the pane
68        // after every mouse click
69        "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--pane-highlight)] has-[:focus-visible]:ring-offset-0",
70      )}
71    >
72      <Comp
73        data-slot="button"
74        data-variant={variant}
75        data-size={size}
76        className={cn(
77          buttonVariants({ variant, size, className }),
78          "bg-transparent",
79        )}
80        {...props}
81      />
82    </Pane>
83  );
84}
85 
86export { Button, buttonVariants };