Radio Group

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

4
import { splitProps } from "solid-js";
5
import * as RadioGroupPrimitive from "@kobalte/core/radio-group";
6
import CircleIcon from "lucide-solid/icons/circle";
7

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

10
type RadioGroupRootProps<T extends ValidComponent = "div"> =
11
  RadioGroupPrimitive.RadioGroupRootProps<T> & { class?: string | undefined };
12

13
const RadioGroup = <T extends ValidComponent = "div">(
14
  props: PolymorphicProps<T, RadioGroupRootProps<T>>,
15
) => {
16
  const [local, others] = splitProps(props as RadioGroupRootProps, ["class"]);
17
  return (
18
    <RadioGroupPrimitive.Root
19
      data-slot="radio-group"
20
      class={cn("grid gap-2", local.class)}
21
      {...others}
22
    />
23
  );
24
};
25

26
type RadioGroupItemProps<T extends ValidComponent = "div"> =
27
  RadioGroupPrimitive.RadioGroupItemProps<T> & {
28
    class?: string | undefined;
29
    children?: JSX.Element;
30
  };
31

32
const RadioGroupItem = <T extends ValidComponent = "div">(
33
  props: PolymorphicProps<T, RadioGroupItemProps<T>>,
34
) => {
35
  const [local, others] = splitProps(props as RadioGroupItemProps, [
36
    "class",
37
    "children",
38
  ]);
39
  return (
40
    <RadioGroupPrimitive.Item
41
      data-slot="radio-group-item"
42
      class={cn("flex items-center space-x-2", local.class)}
43
      {...others}
44
    >
45
      <RadioGroupPrimitive.ItemInput data-slot="radio-group-input" />
46
      <RadioGroupPrimitive.ItemControl
47
        data-slot="radio-group-control"
48
        class="aspect-square size-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ui-checked:text-primary"
49
      >
50
        <RadioGroupPrimitive.ItemIndicator class="flex h-full items-center justify-center">
51
          <CircleIcon class="size-2.5 fill-current text-current" />
52
        </RadioGroupPrimitive.ItemIndicator>
53
      </RadioGroupPrimitive.ItemControl>
54
      {local.children}
55
    </RadioGroupPrimitive.Item>
56
  );
57
};
58

59
type RadioGroupLabelProps<T extends ValidComponent = "label"> =
60
  RadioGroupPrimitive.RadioGroupLabelProps<T> & {
61
    class?: string | undefined;
62
  };
63

64
const RadioGroupItemLabel = <T extends ValidComponent = "label">(
65
  props: PolymorphicProps<T, RadioGroupLabelProps<T>>,
66
) => {
67
  const [local, others] = splitProps(props as RadioGroupLabelProps, ["class"]);
68
  return (
69
    <RadioGroupPrimitive.ItemLabel
70
      data-slot="radio-group-item-label"
71
      class={cn(
72
        "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
73
        local.class,
74
      )}
75
      {...others}
76
    />
77
  );
78
};
79

80
export { RadioGroup, RadioGroupItem, RadioGroupItemLabel };