dst-rg 1.0.0

package/src/components/Radio/_.stories.tsx

@@ -0,0 +1,391 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React, { useState } from "react";
+import { Radio } from ".";
+import { RadioProps } from "./_.types";
+
+const meta: Meta<typeof Radio> = {
+  title: "Components/Radio",
+  component: Radio,
+  argTypes: {
+    onChange: { action: "changed" },
+    size: {
+      control: { type: "radio" },
+      options: ["sm", "md"],
+    },
+    disabled: {
+      control: "boolean",
+    },
+    checked: {
+      control: "boolean",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<RadioProps>;
+
+// ✅ Default - Unchecked, Enabled, Small Size
+export const Default: Story = {
+  args: {
+    name: "default",
+    value: "option-1",
+    checked: false,
+    size: "sm",
+    disabled: false,
+    children: "Default Radio Option",
+    id: "radio-default",
+  },
+  render: (args) => {
+    const DefaultRadio = () => {
+      const [checked, setChecked] = useState(false);
+      return (
+        <Radio
+          {...args}
+          checked={checked}
+          onChange={(e) => {
+            setChecked(e.target.checked);
+            args.onChange?.(e);
+          }}
+        />
+      );
+    };
+    return <DefaultRadio />;
+  },
+};
+
+// ✅ Checked - Checked, Enabled, Small Size
+export const Checked: Story = {
+  args: {
+    name: "checked",
+    value: "option-1",
+    checked: true,
+    size: "sm",
+    disabled: false,
+    children: "Checked Radio Option",
+    id: "radio-checked",
+  },
+  render: (args) => {
+    const CheckedRadio = () => {
+      const [checked, setChecked] = useState(true);
+      return (
+        <Radio
+          {...args}
+          checked={checked}
+          onChange={(e) => {
+            setChecked(e.target.checked);
+            args.onChange?.(e);
+          }}
+        />
+      );
+    };
+    return <CheckedRadio />;
+  },
+};
+
+// ✅ Disabled - Unchecked, Disabled, Small Size
+export const Disabled: Story = {
+  args: {
+    name: "disabled",
+    value: "option-1",
+    checked: false,
+    size: "sm",
+    disabled: true,
+    children: "Disabled Radio Option",
+    id: "radio-disabled",
+  },
+};
+
+// ✅ CheckedDisabled - Checked, Disabled, Small Size
+export const CheckedDisabled: Story = {
+  args: {
+    name: "checked-disabled",
+    value: "option-1",
+    checked: true,
+    size: "sm",
+    disabled: true,
+    children: "Checked & Disabled Radio Option",
+    id: "radio-checked-disabled",
+  },
+};
+
+// ✅ MediumSize - Unchecked, Enabled, Medium Size
+export const MediumSize: Story = {
+  args: {
+    name: "medium-size",
+    value: "option-1",
+    checked: false,
+    size: "md",
+    disabled: false,
+    children: "Medium Size Radio Option",
+    id: "radio-medium-size",
+  },
+  render: (args) => {
+    const MediumSizeRadio = () => {
+      const [checked, setChecked] = useState(false);
+      return (
+        <Radio
+          {...args}
+          checked={checked}
+          onChange={(e) => {
+            setChecked(e.target.checked);
+            args.onChange?.(e);
+          }}
+        />
+      );
+    };
+    return <MediumSizeRadio />;
+  },
+};
+
+// ✅ MediumSizeChecked - Checked, Enabled, Medium Size
+export const MediumSizeChecked: Story = {
+  args: {
+    name: "medium-size-checked",
+    value: "option-1",
+    checked: true,
+    size: "md",
+    disabled: false,
+    children: "Medium Size Checked Radio Option",
+    id: "radio-medium-size-checked",
+  },
+  render: (args) => {
+    const MediumSizeCheckedRadio = () => {
+      const [checked, setChecked] = useState(true);
+      return (
+        <Radio
+          {...args}
+          checked={checked}
+          onChange={(e) => {
+            setChecked(e.target.checked);
+            args.onChange?.(e);
+          }}
+        />
+      );
+    };
+    return <MediumSizeCheckedRadio />;
+  },
+};
+
+// ✅ MediumSizeDisabled - Unchecked, Disabled, Medium Size
+export const MediumSizeDisabled: Story = {
+  args: {
+    name: "medium-size-disabled",
+    value: "option-1",
+    checked: false,
+    size: "md",
+    disabled: true,
+    children: "Medium Size Disabled Radio Option",
+    id: "radio-medium-size-disabled",
+  },
+};
+
+// ✅ MediumSizeCheckedDisabled - Checked, Disabled, Medium Size
+export const MediumSizeCheckedDisabled: Story = {
+  args: {
+    name: "medium-size-checked-disabled",
+    value: "option-1",
+    checked: true,
+    size: "md",
+    disabled: true,
+    children: "Medium Size Checked & Disabled Radio Option",
+    id: "radio-medium-size-checked-disabled",
+  },
+};
+
+// ✅ RadioGroup - Multiple options in a group
+export const RadioGroup: Story = {
+  args: {
+    size: "sm",
+    disabled: false,
+  },
+  render: (args) => {
+    const RadioGroupComponent = () => {
+      const [selectedValue, setSelectedValue] = useState("option-1");
+
+      const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSelectedValue(e.target.value);
+        args.onChange?.(e);
+      };
+
+      return (
+        <div className="flex flex-col gap-2">
+          <Radio
+            {...args}
+            name="radio-group"
+            value="option-1"
+            checked={selectedValue === "option-1"}
+            onChange={handleChange}
+            id="radio-group-1"
+          >
+            Option 1
+          </Radio>
+          <Radio
+            {...args}
+            name="radio-group"
+            value="option-2"
+            checked={selectedValue === "option-2"}
+            onChange={handleChange}
+            id="radio-group-2"
+          >
+            Option 2
+          </Radio>
+          <Radio
+            {...args}
+            name="radio-group"
+            value="option-3"
+            checked={selectedValue === "option-3"}
+            onChange={handleChange}
+            id="radio-group-3"
+          >
+            Option 3
+          </Radio>
+        </div>
+      );
+    };
+    return <RadioGroupComponent />;
+  },
+};
+
+// ✅ RadioGroupWithDisabled - Radio group with some disabled options
+export const RadioGroupWithDisabled: Story = {
+  args: {
+    size: "sm",
+  },
+  render: (args) => {
+    const RadioGroupWithDisabledComponent = () => {
+      const [selectedValue, setSelectedValue] = useState("option-4");
+
+      const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSelectedValue(e.target.value);
+        args.onChange?.(e);
+      };
+
+      return (
+        <div className="flex flex-col gap-2">
+          <Radio
+            {...args}
+            name="radio-group-disabled"
+            value="option-1"
+            checked={selectedValue === "option-1"}
+            onChange={handleChange}
+            disabled={false}
+            id="radio-group-disabled-1"
+          >
+            Option 1 (Enabled)
+          </Radio>
+          <Radio
+            {...args}
+            name="radio-group-disabled"
+            value="option-2"
+            checked={selectedValue === "option-2"}
+            onChange={handleChange}
+            disabled={true}
+            id="radio-group-disabled-2"
+          >
+            Option 2 (Disabled)
+          </Radio>
+          <Radio
+            {...args}
+            name="radio-group-disabled"
+            value="option-3"
+            checked={selectedValue === "option-3"}
+            onChange={handleChange}
+            disabled={false}
+            id="radio-group-disabled-3"
+          >
+            Option 3 (Enabled)
+          </Radio>
+          <Radio
+            {...args}
+            name="radio-group-disabled"
+            value="option-4"
+            checked={selectedValue === "option-4"}
+            onChange={handleChange}
+            disabled={true}
+            id="radio-group-disabled-4"
+          >
+            Option 4 (Checked & Disabled)
+          </Radio>
+        </div>
+      );
+    };
+    return <RadioGroupWithDisabledComponent />;
+  },
+};
+
+// ✅ CustomLabel - Radio with custom label content
+export const CustomLabel: Story = {
+  args: {
+    name: "custom-label",
+    value: "option-1",
+    checked: false,
+    size: "sm",
+    disabled: false,
+    id: "radio-custom-label",
+  },
+  render: (args) => {
+    const CustomLabelRadio = () => {
+      const [checked, setChecked] = useState(false);
+      return (
+        <Radio
+          {...args}
+          checked={checked}
+          onChange={(e) => {
+            setChecked(e.target.checked);
+            args.onChange?.(e);
+          }}
+        >
+          <div className="text-xs text-gray-700">
+            <strong>Label:</strong> Select me!
+          </div>
+        </Radio>
+      );
+    };
+    return <CustomLabelRadio />;
+  },
+};
+
+// ✅ WithExternalLabel - Radio with external label using htmlFor
+export const WithExternalLabel: Story = {
+  render: () => {
+    const WithExternalLabelComponent = () => {
+      const [selectedValue, setSelectedValue] = useState("option-1");
+
+      const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSelectedValue(e.target.value);
+      };
+
+      return (
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center gap-2">
+            <Radio
+              name="external-group"
+              value="option-1"
+              checked={selectedValue === "option-1"}
+              onChange={handleChange}
+              id="radio-external-1"
+              size="sm"
+            />
+            <label htmlFor="radio-external-1" className="cursor-pointer">
+              Small radio with external label
+            </label>
+          </div>
+          <div className="flex items-center gap-2">
+            <Radio
+              name="external-group"
+              value="option-2"
+              checked={selectedValue === "option-2"}
+              onChange={handleChange}
+              id="radio-external-2"
+              size="md"
+            />
+            <label htmlFor="radio-external-2" className="cursor-pointer">
+              Medium radio with external label
+            </label>
+          </div>
+        </div>
+      );
+    };
+    return <WithExternalLabelComponent />;
+  },
+};

package/src/components/Radio/_.style.ts

@@ -0,0 +1,33 @@
+import { cva } from "class-variance-authority";
+
+const baseStyles =
+  "rounded-full border-[1px] flex items-center justify-center peer-checked:border-[5px]";
+
+const sizeStyle = {
+  sm: "w-4 h-4",
+  md: "w-5 h-5 !peer-checked:border-[6px]",
+};
+const fontSize = {
+  sm: "text-xs",
+  md: "text-sm",
+};
+const ringPadding = {
+  sm: "p-2.5",
+  md: "p-3",
+};
+const radioVariants = cva(baseStyles, {
+  variants: {
+    size: sizeStyle,
+    disabled: {
+      true: " cursor-auto bg-rbg-disabled-subtle !border-rfg-disabled-subtle !border-[1px] ",
+      false: "group cursor-pointer border-rbg-brand-solid",
+      undefined: "group cursor-pointer border-rbg-brand-solid",
+    },
+  },
+
+  defaultVariants: {
+    size: "sm",
+  },
+});
+
+export { baseStyles, sizeStyle, fontSize, ringPadding, radioVariants };

package/src/components/Radio/_.test.tsx

@@ -0,0 +1,77 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, expect, it, vi } from "vitest";
+import { Radio } from ".";
+
+describe("Radio Component", () => {
+  const defaultProps = {
+    name: "test-radio",
+    value: "option-1",
+    onChange: vi.fn(),
+    checked: false,
+  };
+
+  it("renders the radio button with label", () => {
+    render(<Radio {...defaultProps}>Label Text</Radio>);
+    const input = screen.getByRole("radio");
+    expect(input).toBeInTheDocument();
+    expect(input).not.toBeChecked();
+    expect(screen.getByText("Label Text")).toBeInTheDocument();
+  });
+
+  it("renders as checked when checked prop is true", () => {
+    render(
+      <Radio {...defaultProps} checked={true}>
+        Checked Option
+      </Radio>
+    );
+    const input = screen.getByRole("radio");
+    expect(input).toBeChecked();
+  });
+
+  it("calls onChange when clicked", () => {
+    render(<Radio {...defaultProps}>Click Me</Radio>);
+    const input = screen.getByRole("radio");
+    fireEvent.click(input);
+    expect(defaultProps.onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("is disabled when disabled prop is true", () => {
+    render(
+      <Radio {...defaultProps} disabled={true}>
+        Disabled Radio
+      </Radio>
+    );
+    const input = screen.getByRole("radio");
+    expect(input).toBeDisabled();
+  });
+
+  it("applies correct size classes for md", () => {
+    const { container } = render(
+      <Radio {...defaultProps} size="md">
+        Sized Radio
+      </Radio>
+    );
+    const radioRing = container.querySelector(".inline-flex > div");
+    expect(radioRing?.className).toMatch(/w-5/); // md size should apply w-5
+  });
+  it("renders correct classes for outer ring when checked and disabled (size: sm)", () => {
+    render(<Radio {...defaultProps} size="sm" disabled checked />);
+    const outerRing = screen.getByRole("radio").nextSibling
+      ?.nextSibling as HTMLElement;
+
+    expect(outerRing).toHaveClass("!border-4");
+    expect(outerRing).toHaveClass("!border-rfg-disabled-subtle");
+    expect(outerRing).toHaveClass("!p-0");
+  });
+
+  it("renders correct classes for outer ring when checked and disabled (size: md)", () => {
+    render(<Radio {...defaultProps} size="md" disabled checked />);
+    const outerRing = screen.getByRole("radio").nextSibling
+      ?.nextSibling as HTMLElement;
+
+    expect(outerRing).toHaveClass("!border-5");
+    expect(outerRing).toHaveClass("!border-rfg-disabled-subtle");
+    expect(outerRing).toHaveClass("!p-0");
+  });
+});

package/src/components/Radio/_.types.ts

@@ -0,0 +1,14 @@
+
+export type RadioProps = {
+  id?: string;
+  name: string;
+  className?: string;
+  value: string;
+  disabled?: boolean;
+  checked?: boolean;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  size?: "sm" | "md";
+  children?: React.ReactNode;
+  cardOnclick?: () => void;
+
+};

package/src/components/Radio/index.tsx

@@ -0,0 +1,59 @@
+import { cn } from "@/lib/utils";
+import { baseStyles, fontSize, radioVariants, ringPadding } from "./_.style";
+import { RadioProps } from "./_.types";
+
+export const Radio = ({
+  name,
+  value,
+  checked,
+  onChange,
+  size = "sm",
+  disabled,
+  className,
+  children,
+  id,
+  ...props
+}: Readonly<RadioProps>) => {
+  return (
+    <div className="flex items-start gap-2">
+      <label
+        htmlFor={id}
+        className="inline-flex w-fit items-center cursor-pointer relative"
+      >
+        <input
+          type="radio"
+          name={name}
+          value={value}
+          checked={checked}
+          onChange={onChange}
+          className="sr-only peer"
+          disabled={disabled}
+          id={id}
+          {...props}
+        />
+        <div
+          className={cn(radioVariants({ size, disabled }), baseStyles)}
+        ></div>
+        <div
+          className={`peer-focus:border-2 peer-focus-within:border-1 border-brand-500 rounded-full absolute top-1/2 left-1/2 -translate-1/2 ${
+            ringPadding[size]
+          } ${
+            checked &&
+            disabled &&
+            `${
+              size === "sm" ? "!border-4" : "!border-5"
+            }  !border-rfg-disabled-subtle !p-0 `
+          } `}
+        ></div>
+      </label>
+      {children && (
+        <label
+          htmlFor={id}
+          className={`cursor-pointer ${fontSize[size]} ${className}`}
+        >
+          {children}
+        </label>
+      )}
+    </div>
+  );
+};