@etus/ui 0.1.0

package/src/components/forms/RadioButton/RadioButton.test.tsx

@@ -0,0 +1,583 @@
+// RadioButton/RadioButton.test.tsx
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { describe, expect, it, vi } from "vitest"
+
+import { RadioButton } from "./RadioButton"
+
+expect.extend(toHaveNoViolations)
+
+// ============================================
+// RENDERING TESTS
+// ============================================
+describe("RadioButton", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<RadioButton aria-label="Test radio" />)
+      expect(screen.getByRole("radio")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(<RadioButton aria-label="Test" className="custom-class" />)
+      expect(screen.getByRole("radio")).toHaveClass("custom-class")
+    })
+
+        it("has data-slot attribute on wrapper", () => {
+
+          render(<RadioButton aria-label="Test" />)
+
+          expect(
+
+            screen.getByRole("radio").closest("[data-slot='radio-button-wrapper']")
+
+          ).toBeInTheDocument()
+
+        })
+
+    
+
+    it("passes through data-* attributes", () => {
+      render(<RadioButton aria-label="Test" data-custom="value" />)
+      expect(screen.getByRole("radio")).toHaveAttribute("data-custom", "value")
+    })
+
+    it("forwards ref correctly", () => {
+      const ref = { current: null }
+      render(<RadioButton ref={ref} aria-label="Test" />)
+      expect(ref.current).toBeInstanceOf(HTMLInputElement)
+    })
+
+    it("renders with label", () => {
+      render(<RadioButton label="Accept terms" />)
+      expect(screen.getByText("Accept terms")).toBeInTheDocument()
+      expect(screen.getByLabelText("Accept terms")).toBeInTheDocument()
+    })
+
+    it("associates label with input correctly", () => {
+      render(<RadioButton id="test-id" label="Accept terms" />)
+      const radio = screen.getByRole("radio")
+      const label = screen.getByText("Accept terms")
+      expect(radio).toHaveAttribute("id", "test-id")
+      expect(label).toHaveAttribute("for", "test-id")
+    })
+
+    it("generates id when not provided", () => {
+      render(<RadioButton label="Accept terms" />)
+      const radio = screen.getByRole("radio")
+      expect(radio).toHaveAttribute("id")
+    })
+  })
+
+  // ============================================
+  // STATE TESTS
+  // ============================================
+  describe("States", () => {
+    it("is unchecked by default", () => {
+      render(<RadioButton aria-label="Test" />)
+      expect(screen.getByRole("radio")).not.toBeChecked()
+    })
+
+    it("can be checked", () => {
+      render(<RadioButton checked aria-label="Test" onChange={() => {}} />)
+      expect(screen.getByRole("radio")).toBeChecked()
+    })
+
+    it("supports default checked state", () => {
+      render(<RadioButton defaultChecked aria-label="Test" />)
+      expect(screen.getByRole("radio")).toBeChecked()
+    })
+
+    it("handles disabled state", () => {
+      render(<RadioButton disabled aria-label="Test" />)
+      expect(screen.getByRole("radio")).toBeDisabled()
+    })
+
+    it("handles required state", () => {
+      render(<RadioButton required aria-label="Test" />)
+      expect(screen.getByRole("radio")).toBeRequired()
+    })
+
+    it("handles aria-invalid state", () => {
+      render(<RadioButton aria-invalid="true" aria-label="Test" />)
+      expect(screen.getByRole("radio")).toHaveAttribute("aria-invalid", "true")
+    })
+
+    it("applies disabled styling", () => {
+      render(<RadioButton disabled label="Test" />)
+      const input = screen.getByRole("radio")
+      expect(input).toHaveClass("disabled:cursor-not-allowed")
+      const wrapper = input.closest("[data-slot='radio-button-wrapper']")
+      expect(wrapper?.querySelector("label")).toHaveClass("peer-disabled:opacity-50")
+    })
+
+    it("applies aria-invalid styling", () => {
+      render(<RadioButton aria-invalid="true" aria-label="Test" />)
+      const visual = document.querySelector("[data-slot='radio-button-visual']")
+      expect(visual).toHaveClass("aria-invalid:border-destructive")
+    })
+  })
+
+  // ============================================
+  // EVENT TESTS
+  // ============================================
+  describe("Events", () => {
+    it("calls onChange when clicked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<RadioButton aria-label="Test" onChange={handleChange} />)
+
+      await user.click(screen.getByRole("radio"))
+      expect(handleChange).toHaveBeenCalledTimes(1)
+    })
+
+    it("does not call onChange when disabled", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<RadioButton disabled aria-label="Test" onChange={handleChange} />)
+
+      await user.click(screen.getByRole("radio"))
+      expect(handleChange).not.toHaveBeenCalled()
+    })
+
+    it("calls onChange when label is clicked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<RadioButton label="Click me" onChange={handleChange} />)
+
+      await user.click(screen.getByText("Click me"))
+      expect(handleChange).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANT TESTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies default size (md)", () => {
+      render(<RadioButton aria-label="Test" />)
+      const visual = document.querySelector("[data-slot='radio-button-visual']")
+      expect(visual).toHaveClass("size-[var(--radio-root-size-md)]")
+    })
+
+    it("applies sm size", () => {
+      render(<RadioButton aria-label="Test" size="sm" />)
+      const visual = document.querySelector("[data-slot='radio-button-visual']")
+      expect(visual).toHaveClass("size-[var(--radio-root-size-sm)]")
+    })
+
+    it("applies md size", () => {
+      render(<RadioButton aria-label="Test" size="md" />)
+      const visual = document.querySelector("[data-slot='radio-button-visual']")
+      expect(visual).toHaveClass("size-[var(--radio-root-size-md)]")
+    })
+
+    it("applies lg size", () => {
+      render(<RadioButton aria-label="Test" size="lg" />)
+      const visual = document.querySelector("[data-slot='radio-button-visual']")
+      expect(visual).toHaveClass("size-[var(--radio-root-size-lg)]")
+    })
+
+    it("applies correct label size for sm", () => {
+      render(<RadioButton label="Small" size="sm" />)
+      expect(screen.getByText("Small")).toHaveClass("text-xs")
+    })
+
+    it("applies correct label size for lg", () => {
+      render(<RadioButton label="Large" size="lg" />)
+      expect(screen.getByText("Large")).toHaveClass("text-base")
+    })
+  })
+
+  // ============================================
+  // INTERACTION TESTS
+  // ============================================
+  describe("Interactions", () => {
+    it("selects when clicked", async () => {
+      const user = userEvent.setup()
+      render(<RadioButton aria-label="Test" />)
+
+      const radio = screen.getByRole("radio")
+      expect(radio).not.toBeChecked()
+
+      await user.click(radio)
+      expect(radio).toBeChecked()
+    })
+
+    it("can be selected with Space key", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<RadioButton aria-label="Test" onChange={handleChange} />)
+
+      screen.getByRole("radio").focus()
+      await user.keyboard(" ")
+
+      expect(handleChange).toHaveBeenCalled()
+    })
+
+    it("does not toggle when disabled", async () => {
+      const user = userEvent.setup()
+      render(<RadioButton disabled aria-label="Test" />)
+
+      const radio = screen.getByRole("radio")
+      expect(radio).not.toBeChecked()
+
+      await user.click(radio)
+      expect(radio).not.toBeChecked()
+    })
+
+    it("works with radio group behavior", async () => {
+      const user = userEvent.setup()
+      render(
+        <form>
+          <RadioButton label="Option 1" name="option" value="1" />
+          <RadioButton label="Option 2" name="option" value="2" />
+        </form>
+      )
+
+      const radio1 = screen.getByLabelText("Option 1")
+      const radio2 = screen.getByLabelText("Option 2")
+
+      await user.click(radio1)
+      expect(radio1).toBeChecked()
+      expect(radio2).not.toBeChecked()
+
+      await user.click(radio2)
+      expect(radio1).not.toBeChecked()
+      expect(radio2).toBeChecked()
+    })
+  })
+
+  // ============================================
+  // CONTROLLED STATE TESTS
+  // ============================================
+  describe("Controlled State", () => {
+    it("respects controlled checked state", () => {
+      const { rerender } = render(
+        <RadioButton aria-label="Controlled" checked={false} onChange={() => {}} />
+      )
+
+      expect(screen.getByRole("radio")).not.toBeChecked()
+
+      rerender(<RadioButton aria-label="Controlled" checked={true} onChange={() => {}} />)
+      expect(screen.getByRole("radio")).toBeChecked()
+    })
+
+    it("calls onChange with event", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(
+        <RadioButton aria-label="Controlled" onChange={handleChange} />
+      )
+
+      await user.click(screen.getByRole("radio"))
+      expect(handleChange).toHaveBeenCalledTimes(1)
+      // Verify the event object has the expected structure
+      const firstCall = handleChange.mock.calls[0]
+      expect(firstCall).toBeDefined()
+      expect((firstCall as unknown[])[0]).toHaveProperty("type", "change")
+      expect((firstCall as unknown[])[0]).toHaveProperty("target")
+      expect(((firstCall as unknown[])[0] as { target: unknown }).target).toBeInstanceOf(HTMLInputElement)
+    })
+  })
+
+  // ============================================
+  // FOCUS TESTS
+  // ============================================
+  describe("Focus", () => {
+    it("is focusable", () => {
+      render(<RadioButton aria-label="Test" />)
+      const radio = screen.getByRole("radio")
+      radio.focus()
+      expect(radio).toHaveFocus()
+    })
+
+    it("is not focusable when disabled", () => {
+      render(<RadioButton disabled aria-label="Test" />)
+      const radio = screen.getByRole("radio")
+      radio.focus()
+      expect(radio).not.toHaveFocus()
+    })
+
+    it("handles onFocus callback", async () => {
+      const user = userEvent.setup()
+      const handleFocus = vi.fn()
+      render(<RadioButton aria-label="Test" onFocus={handleFocus} />)
+
+      await user.tab()
+      expect(handleFocus).toHaveBeenCalledTimes(1)
+    })
+
+    it("handles onBlur callback", async () => {
+      const user = userEvent.setup()
+      const handleBlur = vi.fn()
+      render(<RadioButton aria-label="Test" onBlur={handleBlur} />)
+
+      await user.tab()
+      await user.tab()
+      expect(handleBlur).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // ============================================
+  // FORM INTEGRATION TESTS
+  // ============================================
+  describe("Form Integration", () => {
+    it("accepts name prop for form submission", () => {
+      render(<RadioButton aria-label="Test" name="agree" />)
+      expect(screen.getByRole("radio")).toHaveAttribute("name", "agree")
+    })
+
+    it("has correct id attribute", () => {
+      render(<RadioButton aria-label="Test" id="radio-id" />)
+      expect(screen.getByRole("radio")).toHaveAttribute("id", "radio-id")
+    })
+
+    it("accepts value prop for form submission", () => {
+      render(<RadioButton aria-label="Test" value="yes" />)
+      expect(screen.getByRole("radio")).toHaveAttribute("value", "yes")
+    })
+
+    it("submits correct value in form", async () => {
+      const user = userEvent.setup()
+      const handleSubmit = vi.fn((e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        const formData = new FormData(e.currentTarget)
+        return formData.get("choice")
+      })
+
+      render(
+        <form onSubmit={handleSubmit}>
+          <RadioButton label="Option A" name="choice" value="a" />
+          <RadioButton label="Option B" name="choice" value="b" />
+          <button type="submit">Submit</button>
+        </form>
+      )
+
+      await user.click(screen.getByLabelText("Option B"))
+      await user.click(screen.getByRole("button", { name: "Submit" }))
+
+      expect(handleSubmit).toHaveBeenCalled()
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations", async () => {
+      const { container } = render(
+        <RadioButton label="Accept terms" />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all size variants", async () => {
+      const { container } = render(
+        <div>
+          <RadioButton label="Small" name="size" size="sm" value="sm" />
+          <RadioButton label="Medium" name="size" size="md" value="md" />
+          <RadioButton label="Large" name="size" size="lg" value="lg" />
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations when checked", async () => {
+      const { container } = render(
+        <RadioButton defaultChecked label="Checked" />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations when disabled", async () => {
+      const { container } = render(
+        <RadioButton disabled label="Disabled" />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations when required", async () => {
+      const { container } = render(
+        <RadioButton required label="Required" />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with aria-invalid", async () => {
+      const { container } = render(
+        <div>
+          <RadioButton aria-describedby="error" aria-invalid="true" label="Invalid" />
+          <span id="error">This field has an error</span>
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("supports aria-label", () => {
+      render(<RadioButton aria-label="Accept terms" />)
+      expect(screen.getByRole("radio")).toHaveAccessibleName("Accept terms")
+    })
+
+    it("supports aria-describedby", () => {
+      render(
+        <>
+          <RadioButton aria-describedby="help" aria-label="Test" />
+          <span id="help">Help text</span>
+        </>
+      )
+      expect(screen.getByRole("radio")).toHaveAttribute("aria-describedby", "help")
+    })
+
+    it("supports aria-labelledby", () => {
+      render(
+        <>
+          <span id="label">Accept Terms</span>
+          <RadioButton aria-labelledby="label" />
+        </>
+      )
+      expect(screen.getByRole("radio")).toHaveAttribute("aria-labelledby", "label")
+    })
+
+    it("has correct role", () => {
+      render(<RadioButton aria-label="Test" />)
+      expect(screen.getByRole("radio")).toBeInTheDocument()
+    })
+
+    it("has hidden indicator for screen readers", () => {
+      render(<RadioButton aria-label="Test" />)
+      const indicator = document.querySelector("[data-slot='radio-button-indicator']")
+      expect(indicator).toHaveClass("hidden")
+    })
+  })
+
+  // ============================================
+  // EDGE CASES TESTS
+  // ============================================
+  describe("Edge Cases", () => {
+    it("maintains state through re-renders", () => {
+      const { rerender } = render(
+        <RadioButton defaultChecked aria-label="Test" />
+      )
+
+      expect(screen.getByRole("radio")).toBeChecked()
+
+      rerender(
+        <RadioButton defaultChecked aria-label="Test" className="new-class" />
+      )
+
+      expect(screen.getByRole("radio")).toBeChecked()
+    })
+
+    it("handles empty className", () => {
+      render(<RadioButton aria-label="Test" className="" />)
+      expect(screen.getByRole("radio")).toBeInTheDocument()
+    })
+
+    it("handles whitespace-only className", () => {
+      render(<RadioButton aria-label="Test" className="   " />)
+      expect(screen.getByRole("radio")).toBeInTheDocument()
+    })
+
+    it("handles undefined label", () => {
+      render(<RadioButton aria-label="Test" label={undefined} />)
+      expect(screen.getByRole("radio")).toBeInTheDocument()
+      expect(screen.queryByRole("label")).not.toBeInTheDocument()
+    })
+
+    it("handles empty string label", () => {
+      render(<RadioButton aria-label="Test" label="" />)
+      expect(screen.getByRole("radio")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // DATA ATTRIBUTE TESTS
+  // ============================================
+  describe("Data Attributes", () => {
+        it("has data-slot on wrapper", () => {
+          render(<RadioButton aria-label="Test" />)
+          const wrapper = screen
+            .getByRole("radio")
+            .closest("[data-slot='radio-button-wrapper']")
+          expect(wrapper).toBeInTheDocument()
+        })
+    
+
+    it("has data-slot on indicator", () => {
+      render(<RadioButton aria-label="Test" />)
+      const indicator = document.querySelector("[data-slot='radio-button-indicator']")
+      expect(indicator).toBeInTheDocument()
+    })
+
+    it("has data-slot on label", () => {
+      render(<RadioButton label="Test Label" />)
+      const label = document.querySelector("[data-slot='radio-button-label']")
+      expect(label).toBeInTheDocument()
+    })
+
+    it("preserves custom data attributes", () => {
+      render(<RadioButton aria-label="Test" data-field="terms" data-form="signup" />)
+      expect(screen.getByRole("radio")).toHaveAttribute("data-field", "terms")
+      expect(screen.getByRole("radio")).toHaveAttribute("data-form", "signup")
+    })
+  })
+
+  // ============================================
+  // KEYBOARD NAVIGATION TESTS
+  // ============================================
+  describe("Keyboard Navigation", () => {
+    it("can be tabbed to", async () => {
+      const user = userEvent.setup()
+      render(
+        <>
+          <button>Before</button>
+          <RadioButton aria-label="Test" />
+          <button>After</button>
+        </>
+      )
+
+      await user.tab() // Focus "Before" button
+      await user.tab() // Focus radio
+      expect(screen.getByRole("radio")).toHaveFocus()
+    })
+
+    it("can be activated with Space", async () => {
+      const user = userEvent.setup()
+      render(<RadioButton aria-label="Test" />)
+
+      const radio = screen.getByRole("radio")
+      radio.focus()
+
+      expect(radio).not.toBeChecked()
+      await user.keyboard(" ")
+      expect(radio).toBeChecked()
+    })
+
+    it("supports arrow key navigation in group", () => {
+      const _user = userEvent.setup()
+      render(
+        <fieldset>
+          <RadioButton label="First" name="nav" value="1" />
+          <RadioButton label="Second" name="nav" value="2" />
+          <RadioButton label="Third" name="nav" value="3" />
+        </fieldset>
+      )
+
+      const radios = screen.getAllByRole("radio")
+      const firstRadio = radios[0]
+      if (!firstRadio) {
+        throw new Error("Expected first radio button to exist.")
+      }
+      firstRadio.focus()
+
+      expect(firstRadio).toHaveFocus()
+    })
+  })
+})

package/src/components/forms/RadioButton/RadioButton.tsx

@@ -0,0 +1,82 @@
+import type { RadioButtonProps } from "./RadioButton.types"
+
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+import {
+  radioGroupIndicatorVariants,
+  radioGroupItemVariants,
+} from "../RadioGroup/RadioGroup.variants"
+
+/**
+ * A standalone radio button component using native HTML input.
+ * For simple use cases without RadioGroup.
+ * Visuals are consistent with RadioGroup.
+ *
+ * @example
+ * ```tsx
+ * <RadioButton name="option" value="1" label="Option 1" />
+ * <RadioButton name="option" value="2" label="Option 2" />
+ * ```
+ */
+function RadioButton({
+  className,
+  size = "md",
+  label,
+  id,
+  ref,
+  ...props
+}: RadioButtonProps) {
+  const generatedId = React.useId()
+  const inputId = id ?? generatedId
+
+  return (
+    <div className="inline-flex items-center gap-2" data-slot="radio-button-wrapper">
+      <div className="relative inline-flex items-center justify-center">
+        <input
+          ref={ref}
+          className={cn(
+            "peer absolute inset-0 z-10 cursor-pointer opacity-0 disabled:cursor-not-allowed",
+            className
+          )}
+          id={inputId}
+          type="radio"
+          {...props}
+        />
+        <div
+          className={cn(
+            radioGroupItemVariants({ size }),
+            "peer-checked:border-primary peer-focus-visible:border-ring peer-focus-visible:ring-ring/50 peer-focus-visible:ring-[3px]"
+          )}
+          data-slot="radio-button-visual"
+        >
+          <div
+            className={cn(
+              radioGroupIndicatorVariants({ size }),
+              "hidden peer-checked:flex h-full w-full items-center justify-center"
+            )}
+            data-slot="radio-button-indicator"
+          >
+            <div className="size-[50%] rounded-full bg-primary" />
+          </div>
+        </div>
+      </div>
+      {label && (
+        <label
+          className={cn(
+            "text-sm font-medium leading-none cursor-pointer select-none",
+            "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+            size === "lg" && "text-base",
+            size === "sm" && "text-xs"
+          )}
+          data-slot="radio-button-label"
+          htmlFor={inputId}
+        >
+          {label}
+        </label>
+      )}
+    </div>
+  )
+}
+
+export { RadioButton }

package/src/components/forms/RadioButton/RadioButton.types.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react"
+
+/**
+ * RadioButton sizes
+ */
+export type RadioButtonSize = "lg" | "md" | "sm"
+
+/**
+ * RadioButton component props
+ */
+export interface RadioButtonProps
+  extends Omit<ComponentProps<"input">, "size" | "type"> {
+  /**
+   * Label text displayed next to the radio button
+   */
+  label?: string
+
+  /**
+   * Visual size of the radio button
+   * @default "md"
+   */
+  size?: RadioButtonSize
+}