Button

1import { cva, type VariantProps } from "class-variance-authority";
2import { html, LitElement, nothing, type PropertyValues } from "lit";
3import { customElement, property } from "lit/decorators.js";
4import { TW } from "@/lib/tailwindMixin";
5 
6export const buttonVariants = cva(
7  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
8  {
9    variants: {
10      variant: {
11        default: "bg-primary text-primary-foreground hover:bg-primary/90",
12        destructive:
13          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
14        outline:
15          "border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
16        secondary:
17          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
18        ghost:
19          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
20        link: "text-primary underline-offset-4 hover:underline",
21      },
22      size: {
23        default: "w-full h-9 px-4 py-2 has-[>svg]:px-3",
24        sm: "w-full h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
25        lg: "w-full h-10 rounded-md px-6 has-[>svg]:px-4",
26        "icon-sm": "size-8",
27        icon: "size-9",
28        "icon-lg": "size-15",
29      },
30    },
31    defaultVariants: {
32      variant: "default",
33      size: "default",
34    },
35  },
36);
37 
38type ButtonVariants = VariantProps<typeof buttonVariants>;
39 
40export type ButtonProperties = {
41  variant?: ButtonVariants["variant"];
42  size?: ButtonVariants["size"];
43  type: "button" | "submit" | "reset";
44  disabled: boolean;
45  ariaLabel: string | null;
46  ariaDescribedby: string | null;
47  ariaLabelledby: string | null;
48};
49 
50@customElement("ui-button")
51export class Button extends TW(LitElement) implements ButtonVariants {
52  static formAssociated = true;
53  private internals: ElementInternals;
54 
55  @property({ type: String }) variant: ButtonVariants["variant"] = "default";
56  @property({ type: String }) size: ButtonVariants["size"] = "default";
57// … truncated