init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import React from "react";
import { cn } from "../../../utils/bem";
import "./RadioGroup.scss";
 
const RadioContext = React.createContext();
 
export const RadioGroup = ({ size, value, onChange, children, ...rest }) => {
  const onRadioChange = (e) => {
    onChange?.(e);
  };
 
  return (
    <RadioContext.Provider
      value={{
        value,
        onChange: onRadioChange,
      }}
    >
      <div className={cn("radio-group-dm").mod({ size }).toClassName()} {...rest}>
        <div className={cn("radio-group-dm").elem("buttons").toClassName()}>{children}</div>
      </div>
    </RadioContext.Provider>
  );
};
 
const RadioButton = ({ value, disabled, children, ...props }) => {
  const { onChange, value: currentValue } = React.useContext(RadioContext);
  const checked = value === currentValue;
 
  return (
    <label {...props} className={cn("radio-group-dm").elem("button").mod({ checked, disabled }).toClassName()}>
      <input
        className={cn("radio-group-dm").elem("input").toClassName()}
        type="radio"
        value={value}
        checked={value === currentValue}
        onChange={onChange}
        disabled={disabled}
      />
      {children}
    </label>
  );
};
 
RadioGroup.Button = RadioButton;