Radio group

1"use client";
2 
3import { Radio as RadioPrimitive } from "@base-ui/react/radio";
4import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
5import { DirectionProvider } from "@base-ui/react/direction-provider";
6import { mergeProps } from "@base-ui/react/merge-props";
7import * as React from "react";
8 
9import { cn } from "@/lib/utils";
10 
11type RadioGroupProps = Omit<
12  RadioGroupPrimitive.Props<string>,
13  "dir" | "onValueChange" | "value"
14> & {
15  asChild?: boolean;
16  children?: React.ReactNode;
17  dir?: "ltr" | "rtl";
18  loop?: boolean;
19  onValueChange?: (value: string, eventDetails: RadioGroupPrimitive.ChangeEventDetails) => void;
20  orientation?: "horizontal" | "vertical";
21  value?: string | null;
22};
23 
24type RenderProps = React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> };
25 
26function mergeRefs(...refs: (React.Ref<HTMLElement> | undefined)[]) {
27  return (element: HTMLElement | null) => {
28    refs.forEach((ref) => {
29      if (typeof ref === "function") {
30        ref(element);
31      } else if (ref) {
32        ref.current = element;
33      }
34    });
35  };
36}
37 
38function preserveRadixEventCancellation(
39  child: React.ReactElement<{ [key: string]: unknown; children?: React.ReactNode }>,
40) {
41  const eventProps: Record<string, unknown> = {};
42 
43  for (const [name, handler] of Object.entries(child.props)) {
44    if (/^on[A-Z]/.test(name) && typeof handler === "function") {
45      eventProps[name] = (...args: unknown[]) => {
46        (handler as (...handlerArgs: unknown[]) => void)(...args);
47        const event = args[0] as
48          | { defaultPrevented?: boolean; preventBaseUIHandler?: () => void }
49          | undefined;
50        if (event?.defaultPrevented) event.preventBaseUIHandler?.();
51      };
52    }
53  }
54 
55  return React.cloneElement(child, eventProps);
56}
57 
58function renderWithAliases<State>(
59  render:
60    | React.ReactElement
61    | ((props: RenderProps, state: State) => React.ReactElement)
62    | undefined,
63  fallback: React.ReactElement,
64  getAliases: (state: State) => Record<string, string | undefined>,
65) {
66  return (elementProps: RenderProps, state: State) => {
67    const aliasedProps = mergeProps(
68      elementProps as React.ComponentPropsWithRef<"button">,
69      getAliases(state) as React.ComponentPropsWithRef<"button">,
70    ) as RenderProps;
71 
72    if (typeof render === "function") {
73      return render(aliasedProps, state);
74    }
75 
76    const element = (render ?? fallback) as React.ReactElement<RenderProps>;
77    const mergedProps = mergeProps(
78// … truncated