Radio Group

1import type { JSX, ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import type { PolymorphicProps } from "@kobalte/core/polymorphic"
5import * as RadioGroupPrimitive from "@kobalte/core/radio-group"
6 
7import { cn } from "~/lib/utils"
8 
9type RadioGroupRootProps<T extends ValidComponent = "div"> =
10  RadioGroupPrimitive.RadioGroupRootProps<T> & { class?: string | undefined }
11 
12const RadioGroup = <T extends ValidComponent = "div">(
13  props: PolymorphicProps<T, RadioGroupRootProps<T>>
14) => {
15  const [local, others] = splitProps(props as RadioGroupRootProps, ["class"])
16  return <RadioGroupPrimitive.Root class={cn("grid gap-2", local.class)} {...others} />
17}
18 
19type RadioGroupItemProps<T extends ValidComponent = "div"> =
20  RadioGroupPrimitive.RadioGroupItemProps<T> & {
21    class?: string | undefined
22    children?: JSX.Element
23  }
24 
25const RadioGroupItem = <T extends ValidComponent = "div">(
26  props: PolymorphicProps<T, RadioGroupItemProps<T>>
27) => {
28  const [local, others] = splitProps(props as RadioGroupItemProps, ["class", "children"])
29  return (
30    <RadioGroupPrimitive.Item class={cn("flex items-center space-x-2", local.class)} {...others}>
31      <RadioGroupPrimitive.ItemInput />
32      <RadioGroupPrimitive.ItemControl class="aspect-square size-4 rounded-full border border-primary text-primary 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">
33        <RadioGroupPrimitive.ItemIndicator class="flex h-full items-center justify-center ">
34          <svg
35            xmlns="http://www.w3.org/2000/svg"
36            viewBox="0 0 24 24"
37            fill="none"
38            stroke="currentColor"
39            stroke-width="2"
40            stroke-linecap="round"
41            stroke-linejoin="round"
42            class="size-2.5 fill-current text-current"
43          >
44            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
45          </svg>
46        </RadioGroupPrimitive.ItemIndicator>
47      </RadioGroupPrimitive.ItemControl>
48      {local.children}
49    </RadioGroupPrimitive.Item>
50  )
51}
52 
53type RadioGroupLabelProps<T extends ValidComponent = "label"> =
54  RadioGroupPrimitive.RadioGroupLabelProps<T> & {
55    class?: string | undefined
56  }
57 
58const RadioGroupItemLabel = <T extends ValidComponent = "label">(
59  props: PolymorphicProps<T, RadioGroupLabelProps<T>>
60) => {
61  const [local, others] = splitProps(props as RadioGroupLabelProps, ["class"])
62// … truncated