Toggle Group

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

5
import { createContext, splitProps, useContext } from "solid-js";
6
import * as ToggleGroupPrimitive from "@kobalte/core/toggle-group";
7

8
import { toggleVariants } from "~/components/ui/toggle";
9
import { cn } from "~/lib/utils";
10

11
const ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({
12
  size: "default",
13
  variant: "default",
14
});
15

16
type ToggleGroupRootProps<T extends ValidComponent = "div"> =
17
  ToggleGroupPrimitive.ToggleGroupRootProps<T> &
18
    VariantProps<typeof toggleVariants> & {
19
      class?: string | undefined;
20
      children?: JSX.Element;
21
    };
22

23
const ToggleGroup = <T extends ValidComponent = "div">(
24
  props: PolymorphicProps<T, ToggleGroupRootProps<T>>,
25
) => {
26
  const [local, others] = splitProps(props as ToggleGroupRootProps, [
27
    "class",
28
    "children",
29
    "size",
30
    "variant",
31
  ]);
32

33
  return (
34
    <ToggleGroupPrimitive.Root
35
      data-slot="toggle-group"
36
      class={cn("flex items-center justify-center", local.class)}
37
      {...others}
38
    >
39
      <ToggleGroupContext.Provider
40
        value={{
41
          get size() {
42
            return local.size;
43
          },
44
          get variant() {
45
            return local.variant;
46
          },
47
        }}
48
      >
49
        {local.children}
50
      </ToggleGroupContext.Provider>
51
    </ToggleGroupPrimitive.Root>
52
  );
53
};
54

55
type ToggleGroupItemProps<T extends ValidComponent = "button"> =
56
  ToggleGroupPrimitive.ToggleGroupItemProps<T> &
57
    VariantProps<typeof toggleVariants> & { class?: string | undefined };
58

59
const ToggleGroupItem = <T extends ValidComponent = "button">(
60
  props: PolymorphicProps<T, ToggleGroupItemProps<T>>,
61
) => {
62
  const [local, others] = splitProps(props as ToggleGroupItemProps, [
63
    "class",
64
    "size",
65
    "variant",
66
  ]);
67
  const context = useContext(ToggleGroupContext);
68
  return (
69
    <ToggleGroupPrimitive.Item
70
      data-slot="toggle-group-item"
71
      class={cn(
72
        toggleVariants({
73
          size: context.size || local.size,
74
          variant: context.variant || local.variant,
75
        }),
76
        "min-w-0 flex-1 shrink-0 rounded-none first:rounded-l-base last:rounded-r-base",
77
        local.variant !== "transparent" &&
78
          "border-y-2 border-r-2 border-l-0! first:border-l-2!",
79
        local.class,
80
      )}
81
      {...others}
82
    />
83
  );
84
};
85

86
export { ToggleGroup, ToggleGroupItem };