radio component

dist/cjs/types/lib/RadioGroup/index.d.ts

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import "./index.css";
+interface RadioOption {
+    value: string;
+    label: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    defaultValue?: string;
+    value?: string;
+    onChange?: (option: RadioOption) => void;
+    options: RadioOption[];
+    className?: string;
+}
+declare const RadioGroup: FC<RadioGroupProps>;
+export type { RadioOption, RadioGroupProps };
+export { RadioGroup };

dist/cjs/types/lib/index.d.ts

@@ -6,3 +6,4 @@ export * from "./Dropdown";
 export * from "./Avatar";
 export * from "./Slider";
 export * from "./Accordion";
+export * from "./RadioGroup";

dist/esm/types/lib/RadioGroup/index.d.ts

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import "./index.css";
+interface RadioOption {
+    value: string;
+    label: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    defaultValue?: string;
+    value?: string;
+    onChange?: (option: RadioOption) => void;
+    options: RadioOption[];
+    className?: string;
+}
+declare const RadioGroup: FC<RadioGroupProps>;
+export type { RadioOption, RadioGroupProps };
+export { RadioGroup };

dist/esm/types/lib/index.d.ts

@@ -6,3 +6,4 @@ export * from "./Dropdown";
 export * from "./Avatar";
 export * from "./Slider";
 export * from "./Accordion";
+export * from "./RadioGroup";

dist/index.d.ts

@@ -158,4 +158,22 @@ type AccordionItem = {
 };
 declare const Accordion: React__default.FC<AccordionProps>;
 
-export { Accordion, type AccordionItem, type AccordionProps, type AllowedInputTypes, Avatar, type AvatarProps, Button, type ButtonProps, type Direction, type DropDownMenuItem, Dropdown, type DropdownProps, type IOrientation, type IPlacement, type ImageLoadingStatus, Input, type InputProps, OTPInput, type OTPInputProps, Slider, type SliderProps, Tooltip, type TooltipProps };
+interface RadioOption {
+    value: string;
+    label: React__default.ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    defaultValue?: string;
+    value?: string;
+    onChange?: (option: RadioOption) => void;
+    options: RadioOption[];
+    className?: string;
+}
+declare const RadioGroup: FC<RadioGroupProps>;
+
+export { Accordion, type AccordionItem, type AccordionProps, type AllowedInputTypes, Avatar, type AvatarProps, Button, type ButtonProps, type Direction, type DropDownMenuItem, Dropdown, type DropdownProps, type IOrientation, type IPlacement, type ImageLoadingStatus, Input, type InputProps, OTPInput, type OTPInputProps, RadioGroup, type RadioGroupProps, type RadioOption, Slider, type SliderProps, Tooltip, type TooltipProps };

src/lib/RadioGroup/index.css

@@ -0,0 +1,11 @@
+/* Basic styles */
+.radio-group-item {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    margin-bottom: 8px;
+}
+
+.radio-group-item:last-child {
+    margin-bottom: 0;
+}

src/lib/RadioGroup/index.tsx

@@ -0,0 +1,68 @@
+import React, { FC, useEffect, useState } from 'react';
+import "./index.css";
+
+interface RadioOption {
+    value: string;
+    label: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+
+interface RadioGroupProps {
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    defaultValue?: string;
+    value?: string;
+    onChange?: (option: RadioOption) => void;
+    options: RadioOption[];
+    className?: string;
+}
+
+const RadioGroup: FC<RadioGroupProps> = ({
+    name,
+    required = false,
+    disabled = false,
+    defaultValue,
+    value: valueProp,
+    onChange,
+    options,
+    className = "",
+}) => {
+    const [value, setValue] = useState<string | undefined>(defaultValue);
+
+    useEffect(() => {
+        if (valueProp !== undefined) {
+            setValue(valueProp);
+        }
+    }, [valueProp]);
+
+    const handleChange = (option: RadioOption) => {
+        setValue(option?.value);
+        onChange?.(option);
+    };
+
+    return (
+        <div role="radiogroup" aria-required={required} data-disabled={disabled ? '' : undefined} className={`radio-group ${className}`}>
+            {options.map((option) => (
+                <label key={option.value} className={`radio-group-item ${option?.className ?? ""}`}>
+                    <input
+                        type="radio"
+                        name={name}
+                        value={option.value}
+                        checked={value === option.value}
+                        required={required}
+                        disabled={disabled || option.disabled}
+                        onChange={() => handleChange(option)}
+                        className="radio-input"
+                    />
+                    <span className="radio-custom"></span> {/* Custom span for design */}
+                    {option.label}
+                </label>
+            ))}
+        </div>
+    );
+};
+
+export type { RadioOption, RadioGroupProps };
+export { RadioGroup };

src/lib/index.ts

@@ -6,3 +6,4 @@ export * from "./Dropdown";
 export * from "./Avatar";
 export * from "./Slider";
 export * from "./Accordion";
+export * from "./RadioGroup";