Toggle

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import type { VariantProps } from "class-variance-authority";
3
import type { ValidComponent } from "solid-js";
4

5
import { splitProps } from "solid-js";
6
import * as ToggleButtonPrimitive from "@kobalte/core/toggle-button";
7
import { cva } from "class-variance-authority";
8

9
import { cn } from "~/lib/utils";
10

11
const toggleVariants = cva(
12
  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
13
  {
14
    variants: {
15
      variant: {
16
        default:
17
          "bg-transparent ui-pressed:border-2 ui-pressed:border-border ui-pressed:bg-primary/80",
18
        transparent: "bg-transparent",
19
        outline:
20
          "border-2 border-border bg-transparent shadow-sm ui-pressed:bg-primary/80",
21
        outlineTransparent: "border-2 border-border bg-transparent shadow-sm",
22
      },
23
      size: {
24
        default: "h-9 px-3",
25
        sm: "h-8 px-2",
26
        lg: "h-10 px-3",
27
      },
28
    },
29
    defaultVariants: {
30
      variant: "default",
31
      size: "default",
32
    },
33
  },
34
);
35

36
type ToggleButtonRootProps<T extends ValidComponent = "button"> =
37
  ToggleButtonPrimitive.ToggleButtonRootProps<T> &
38
    VariantProps<typeof toggleVariants> & { class?: string | undefined };
39

40
const Toggle = <T extends ValidComponent = "button">(
41
  props: PolymorphicProps<T, ToggleButtonRootProps<T>>,
42
) => {
43
  const [local, others] = splitProps(props as ToggleButtonRootProps, [
44
    "class",
45
    "variant",
46
    "size",
47
  ]);
48
  return (
49
    <ToggleButtonPrimitive.Root
50
      data-slot="toggle-button"
51
      class={cn(
52
        toggleVariants({ variant: local.variant, size: local.size }),
53
        local.class,
54
      )}
55
      {...others}
56
    />
57
  );
58
};
59

60
export type { ToggleButtonRootProps as ToggleProps };
61
export { toggleVariants, Toggle };