Radio Group

1
"use client";
2

3
import { Radio as RadioPrimitive } from "@base-ui/react/radio";
4
import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
5
import { cva } from "class-variance-authority";
6
import {
7
  type ComponentProps,
8
  type ComponentType,
9
  createContext,
10
  useContext,
11
} from "react";
12

13
import { cn } from "@/lib/utils";
14

15
const radioGroupVariants = cva("grid w-full gap-3", {
16
  variants: {
17
    variant: {
18
      default: "[--radio-accent:var(--foreground)]",
19
      primary: "[--radio-accent:var(--primary-foreground)]",
20
      success: "[--radio-accent:var(--success-foreground)]",
21
      warning: "[--radio-accent:var(--warning-foreground)]",
22
      info: "[--radio-accent:var(--info-foreground)]",
23
      danger: "[--radio-accent:var(--danger-foreground)]",
24
    },
25
  },
26
  defaultVariants: {
27
    variant: "default",
28
  },
29
});
30

31
const RadioGroupContext = createContext<{
32
  indicator?: ComponentType;
33
}>({});
34

35
function RadioGroupCheckIndicator() {
36
  return (
37
    <svg
38
      className="size-3.5 text-(--radio-accent)"
39
      xmlns="http://www.w3.org/2000/svg"
40
      fill="currentColor"
41
      viewBox="0 0 24 24"
42
    >
43
      <path d="M10 18H8v-2h2v2Zm-2-2H6v-2h2v2Zm4-2v2h-2v-2h2Zm-6 0H4v-2h2v2Zm8 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2Zm2-2h-2V6h2v2Z" />
44
    </svg>
45
  );
46
}
47
function RadioGroupCrossIndicator() {
48
  return (
49
    <svg
50
      className="size-3.5 text-(--radio-accent)"
51
      xmlns="http://www.w3.org/2000/svg"
52
      fill="currentColor"
53
      viewBox="0 0 24 24"
54
    >
55
      <path d="M7 19H5v-2h2v2Zm12 0h-2v-2h2v2ZM9 15v2H7v-2h2Zm8 2h-2v-2h2v2Zm-6-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-2-2h-2v-2h2v2Zm-2-2H9V9h2v2Zm4 0h-2V9h2v2ZM9 9H7V7h2v2Zm8 0h-2V7h2v2ZM7 7H5V5h2v2Zm12 0h-2V5h2v2Z" />
56
    </svg>
57
  );
58
}
59

60
function RadioGroupCircleIndicator() {
61
  return (
62
    <svg
63
      className="size-2 text-(--radio-accent)"
64
      xmlns="http://www.w3.org/2000/svg"
65
      fill="currentColor"
66
      viewBox="0 0 24 24"
67
    >
68
      <path d="M18 4h2v2h2v12h-2v2h-2v2H6v-2H4v-2H2V6h2V4h2V2h12v2Z"></path>
69
    </svg>
70
  );
71
}
72

73
function RadioGroupMinusIndicator() {
74
  return (
75
    <svg
76
      className="size-3.5 text-(--radio-accent)"
77
      xmlns="http://www.w3.org/2000/svg"
78
      fill="currentColor"
79
      viewBox="0 0 24 24"
80
    >
81
      <path d="M4 11h16v2H4z"></path>
82
    </svg>
83
  );
84
}
85

86
function RadioGroupPlusIndicator() {
87
  return (
88
    <svg
89
      className="size-3.5 text-(--radio-accent)"
90
      xmlns="http://www.w3.org/2000/svg"
91
      fill="currentColor"
92
      viewBox="0 0 24 24"
93
    >
94
      <path d="M13 11h7v2h-7v7h-2v-7H4v-2h7V4h2v7Z"></path>
95
    </svg>
96
  );
97
}
98

99
function RadioGroupSlashIndicator() {
100
  return (
101
    <svg
102
      className="size-3.5 text-(--radio-accent) -rotate-45"
103
      xmlns="http://www.w3.org/2000/svg"
104
      fill="currentColor"
105
      viewBox="0 0 24 24"
106
    >
107
      <path d="M4 11h16v2H4z"></path>
108
    </svg>
109
  );
110
}
111

112
function RadioGroup({
113
  className,
114
  variant = "default",
115
  indicator = RadioGroupCircleIndicator,
116
  ...props
117
}: RadioGroupPrimitive.Props &
118
  ComponentProps<typeof radioGroupVariants> & {
119
    indicator?: ComponentType;
120
  }) {
121
  return (
122
    <RadioGroupContext.Provider value={{ indicator }}>
123
      <RadioGroupPrimitive
124
        data-slot="radio-group"
125
        className={cn(radioGroupVariants({ variant }), className)}
126
        {...props}
127
      />
128
    </RadioGroupContext.Provider>
129
  );
130
}
131

132
function RadioGroupItem({
133
  className,
134
  indicator,
135
  ...props
136
}: RadioPrimitive.Root.Props & {
137
  indicator?: ComponentType;
138
}) {
139
  const ctx = useContext(RadioGroupContext);
140
  const Indicator = indicator ?? ctx.indicator;
141

142
  return (
143
    <RadioPrimitive.Root
144
      data-slot="radio-group-item"
145
      className={cn(
146
        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 pixel-rounded pixel-border pixel-size-md pixel-color-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:pixel-color-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:pixel-color-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20  dark:aria-invalid:pixel-color-[color-mix(in_oklab,var(--destructive)_50%,transparent)] dark:aria-invalid:ring-destructive/40",
147
        "data-checked:[--pixel-color:var(--radio-accent)]",
148
        className,
149
      )}
150
      {...props}
151
    >
152
      <RadioPrimitive.Indicator
153
        data-slot="radio-group-indicator"
154
        className="flex size-4 items-center justify-center"
155
      >
156
        {Indicator && <Indicator />}
157
      </RadioPrimitive.Indicator>
158
    </RadioPrimitive.Root>
159
  );
160
}
161

162
export {
163
  RadioGroup,
164
  RadioGroupCheckIndicator,
165
  RadioGroupCircleIndicator,
166
  RadioGroupCrossIndicator,
167
  RadioGroupItem,
168
  RadioGroupMinusIndicator,
169
  RadioGroupPlusIndicator,
170
  RadioGroupSlashIndicator,
171
};