radio-group

1import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2import * as RadioGroupPrimitive from "@kobalte/core/radio-group";
3 
4import { cn } from "~/lib/utils.ts";
5import type { JSX, ValidComponent } from "solid-js";
6 
7import { splitProps } from "solid-js";
8 
9type RadioGroupRootProps<T extends ValidComponent = "div"> =
10  & RadioGroupPrimitive.RadioGroupRootProps<T>
11  & { class?: string | undefined };
12 
13const 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 w-full", local.class)}
21      {...others}
22    />
23  );
24};
25 
26type RadioGroupItemProps<T extends ValidComponent = "div"> =
27  & RadioGroupPrimitive.RadioGroupItemProps<T>
28  & {
29    class?: string | undefined;
30    children?: JSX.Element;
31  };
32 
33const RadioGroupItem = <T extends ValidComponent = "div">(
34  props: PolymorphicProps<T, RadioGroupItemProps<T>>,
35) => {
36  const [local, others] = splitProps(props as RadioGroupItemProps, [
37    "class",
38    "children",
39  ]);
40  return (
41    <RadioGroupPrimitive.Item
42      data-slot="radio-group-item"
43      class="peer flex items-center gap-2"
44      {...others}
45    >
46      <RadioGroupPrimitive.ItemInput class="peer" />
47      <RadioGroupPrimitive.ItemControl
48        class={cn(
49          "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary data-invalid:data-checked:border-primary data-invalid:border-destructive peer-focus-visible:border-ring peer-focus-visible:ring-ring/50 data-invalid:ring-destructive/20 dark:data-invalid:ring-destructive/40 dark:data-invalid:border-destructive/50 flex size-4 rounded-full peer-focus-visible:ring-3 data-invalid:ring-3 group/radio-group-item relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
50          local.class,
51        )}
52      >
53        <RadioGroupPrimitive.ItemIndicator
54          data-slot="radio-group-indicator"
55          class="flex size-4 items-center justify-center"
56        >
57          <span class="bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full" />
58        </RadioGroupPrimitive.ItemIndicator>
59      </RadioGroupPrimitive.ItemControl>
60// … truncated