Radio Group

1import { RadioGroup as KobalteRadioGroup } from "@kobalte/core/radio-group";
2import type { Component, ComponentProps } from "solid-js";
3import { splitProps } from "solid-js";
4import { cn } from "~/lib/utils";
5 
6const RadioGroup: Component<ComponentProps<typeof KobalteRadioGroup> & { class?: string }> = (
7  props,
8) => {
9  const [local, rest] = splitProps(props, ["class"]);
10  return <KobalteRadioGroup class={cn("grid gap-2", local.class)} {...rest} />;
11};
12 
13const RadioGroupLabel: Component<
14  ComponentProps<typeof KobalteRadioGroup.Label> & { class?: string }
15> = (props) => {
16  const [local, rest] = splitProps(props, ["class"]);
17  return (
18    <KobalteRadioGroup.Label
19      class={cn("text-sm font-medium leading-none", local.class)}
20      {...rest}
21    />
22  );
23};
24 
25const RadioGroupItem: Component<
26  ComponentProps<typeof KobalteRadioGroup.Item> & { class?: string }
27> = (props) => {
28  const [local, rest] = splitProps(props, ["class"]);
29  return (
30    <KobalteRadioGroup.Item class={cn("flex items-center space-x-2", local.class)} {...rest}>
31      <KobalteRadioGroup.ItemInput class="sr-only" />
32      <KobalteRadioGroup.ItemControl
33        class={cn(
34          "aspect-square h-4 w-4 rounded-full border border-primary",
35          "text-primary ring-offset-background",
36          "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
37          "disabled:cursor-not-allowed disabled:opacity-50",
38          "data-[checked]:bg-primary",
39        )}
40      >
41        <KobalteRadioGroup.ItemIndicator class="flex items-center justify-center">
42          <div class="h-2 w-2 rounded-full bg-background" />
43        </KobalteRadioGroup.ItemIndicator>
44      </KobalteRadioGroup.ItemControl>
45    </KobalteRadioGroup.Item>
46  );
47};
48 
49const RadioGroupItemLabel: Component<
50  ComponentProps<typeof KobalteRadioGroup.ItemLabel> & { class?: string }
51> = (props) => {
52  const [local, rest] = splitProps(props, ["class"]);
53  return (
54    <KobalteRadioGroup.ItemLabel
55      class={cn(
56        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
57        local.class,
58      )}
59      {...rest}
60    />
61  );
62};
63 
64export { RadioGroup, RadioGroupLabel, RadioGroupItem, RadioGroupItemLabel };