@etus/ui 0.1.0

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

@@ -0,0 +1,1684 @@
+import type { DateRange } from "../../advanced/Calendar"
+import type { DateRangePreset } from "./DateRangePicker.types"
+
+import { render, screen, waitFor, within } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe, toHaveNoViolations } from "jest-axe"
+// DateRangePicker/DateRangePicker.test.tsx
+import * as React from "react"
+import { beforeAll, describe, expect, it, vi } from "vitest"
+
+import { DateRangePicker } from "./DateRangePicker"
+import { DateRangePresets } from "./DateRangePresets"
+import { defaultPresets } from "./presets"
+
+expect.extend(toHaveNoViolations)
+
+// Mock pointer capture methods for JSDOM (Radix Popover uses them)
+beforeAll(() => {
+  Element.prototype.hasPointerCapture = vi.fn(() => false)
+  Element.prototype.setPointerCapture = vi.fn()
+  Element.prototype.releasePointerCapture = vi.fn()
+})
+
+// Helper to open the date range picker using click
+async function openDateRangePicker(user: ReturnType<typeof userEvent.setup>) {
+  const trigger = screen.getByRole("combobox")
+  await user.click(trigger)
+}
+
+// Helper to find a day button in the calendar
+function findDayButton(container: HTMLElement, day: number): HTMLElement | null {
+  const buttons = container.querySelectorAll('button[data-day]')
+  for (const button of buttons) {
+    const dateStr = button.getAttribute('data-day')
+    if (dateStr && new Date(dateStr).getDate() === day) {
+      return button as HTMLElement
+    }
+  }
+  return null
+}
+
+// Test dates
+const testRange: DateRange = {
+  from: new Date(2024, 0, 10), // January 10, 2024
+  to: new Date(2024, 0, 20),   // January 20, 2024
+}
+const minDate = new Date(2024, 0, 5)   // January 5, 2024
+const maxDate = new Date(2024, 0, 25)  // January 25, 2024
+
+// ============================================
+// RENDERING TESTS
+// ============================================
+describe("DateRangePicker", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<DateRangePicker aria-label="Select date range" />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(<DateRangePicker aria-label="Select date range" className="custom-class" />)
+      const wrapper = screen.getByRole("combobox").closest('[data-slot="date-range-picker"]')
+      expect(wrapper).toHaveClass("custom-class")
+    })
+
+    it("renders with placeholder", () => {
+      render(<DateRangePicker aria-label="Select date range" placeholder="Pick a range" />)
+      expect(screen.getByText("Pick a range")).toBeInTheDocument()
+    })
+
+    it("renders with default value", () => {
+      render(<DateRangePicker aria-label="Select date range" defaultValue={testRange} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("Jan 10, 2024")
+      expect(screen.getByRole("combobox")).toHaveTextContent("Jan 20, 2024")
+    })
+
+    it("renders with controlled value", () => {
+      render(<DateRangePicker aria-label="Select date range" value={testRange} onChange={() => {}} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("Jan 10, 2024")
+    })
+
+    it("has data-slot attribute on wrapper", () => {
+      render(<DateRangePicker aria-label="Select date range" />)
+      const wrapper = screen.getByRole("combobox").closest('[data-slot="date-range-picker"]')
+      expect(wrapper).toHaveAttribute("data-slot", "date-range-picker")
+    })
+
+    it("has data-slot attribute on trigger", () => {
+      render(<DateRangePicker aria-label="Select date range" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-slot", "date-range-picker-trigger")
+    })
+
+    it("renders calendar icon", () => {
+      render(<DateRangePicker aria-label="Select date range" />)
+      const trigger = screen.getByRole("combobox")
+      expect(trigger.querySelector("svg")).toBeInTheDocument()
+    })
+
+    it("renders with single calendar when numberOfMonths=1", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" numberOfMonths={1} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        const calendar = document.querySelector('[data-slot="calendar"]')
+        expect(calendar).not.toHaveAttribute("data-multiple-months", "true")
+      })
+    })
+
+    it("renders with dual calendar by default", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        const calendar = document.querySelector('[data-slot="calendar"]')
+        expect(calendar).toHaveAttribute("data-multiple-months", "true")
+      })
+    })
+
+    it("renders with custom format", () => {
+      render(<DateRangePicker aria-label="Select date range" defaultValue={testRange} format="MM/dd/yyyy" />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("01/10/2024")
+      expect(screen.getByRole("combobox")).toHaveTextContent("01/20/2024")
+    })
+  })
+
+  // ============================================
+  // STATE TESTS
+  // ============================================
+  describe("States", () => {
+    it("handles disabled state", () => {
+      render(<DateRangePicker disabled aria-label="Select date range" />)
+      expect(screen.getByRole("combobox")).toBeDisabled()
+    })
+
+    it("applies disabled styling", () => {
+      render(<DateRangePicker disabled aria-label="Select date range" />)
+      expect(screen.getByRole("combobox")).toHaveClass("disabled:opacity-50")
+    })
+
+    it("handles aria-invalid state", () => {
+      render(<DateRangePicker invalid aria-label="Select date range" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-invalid", "true")
+    })
+
+    it("handles required state", () => {
+      render(<DateRangePicker required aria-label="Select date range" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-required", "true")
+    })
+
+    it("shows placeholder when no value selected", () => {
+      render(<DateRangePicker aria-label="Select date range" placeholder="Choose range" />)
+      expect(screen.getByText("Choose range")).toBeInTheDocument()
+    })
+
+    it("shows selected range instead of placeholder", () => {
+      render(<DateRangePicker aria-label="Select date range" defaultValue={testRange} placeholder="Choose range" />)
+      expect(screen.queryByText("Choose range")).not.toBeInTheDocument()
+    })
+
+    it("applies muted color when no range selected", () => {
+      render(<DateRangePicker aria-label="Select date range" />)
+      expect(screen.getByRole("combobox")).toHaveClass("text-muted-foreground")
+    })
+
+    it("removes muted color when range is selected", () => {
+      render(<DateRangePicker aria-label="Select date range" defaultValue={testRange} />)
+      expect(screen.getByRole("combobox")).not.toHaveClass("text-muted-foreground")
+    })
+  })
+
+  // ============================================
+  // RANGE SELECTION TESTS
+  // ============================================
+  describe("Range Selection", () => {
+    it("opens calendar when trigger is clicked", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+    })
+
+    it("shows calendar when opened", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" defaultValue={testRange} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        const dialog = screen.getByRole("dialog")
+        expect(dialog.querySelector('[data-slot="calendar"]')).toBeInTheDocument()
+      })
+    })
+
+    it("selects start date on first click", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<DateRangePicker aria-label="Select date range" onChange={handleChange} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+      const day15Button = findDayButton(dialog, 15)
+      await user.click(day15Button as Element)
+
+      expect(handleChange).toHaveBeenCalled()
+      const range = handleChange.mock.calls[0]?.[0] as DateRange
+      expect(range.from).toBeInstanceOf(Date)
+    })
+
+    it("selects end date on second click", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<DateRangePicker aria-label="Select date range" onChange={handleChange} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+      const day10Button = findDayButton(dialog, 10)
+      await user.click(day10Button as Element)
+
+      const day20Button = findDayButton(dialog, 20)
+      await user.click(day20Button as Element)
+
+      expect(handleChange).toHaveBeenCalledTimes(2)
+      const range = handleChange.mock.calls[1]?.[0] as DateRange
+      expect(range.from).toBeInstanceOf(Date)
+      expect(range.to).toBeInstanceOf(Date)
+    })
+
+    it("handles selecting same day for start and end", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<DateRangePicker aria-label="Select date range" onChange={handleChange} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+      const day15Button = findDayButton(dialog, 15)
+      await user.click(day15Button as Element)
+      await user.click(day15Button as Element)
+
+      expect(handleChange).toHaveBeenCalled()
+    })
+
+    it("allows reverse selection (end before start)", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<DateRangePicker aria-label="Select date range" onChange={handleChange} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+      // Select day 20 first
+      const day20Button = findDayButton(dialog, 20)
+      await user.click(day20Button as Element)
+
+      // Then select day 10
+      const day10Button = findDayButton(dialog, 10)
+      await user.click(day10Button as Element)
+
+      expect(handleChange).toHaveBeenCalled()
+    })
+
+    it("displays partial range (only start date)", () => {
+      const partialRange: DateRange = { from: new Date(2024, 0, 15) }
+      render(<DateRangePicker aria-label="Select date range" defaultValue={partialRange} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("Jan 15, 2024")
+    })
+
+    it("clears selection when new start date is picked after complete range", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<DateRangePicker aria-label="Select date range" defaultValue={testRange} onChange={handleChange} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      // Click a new day to start a new selection
+      const dialog = screen.getByRole("dialog")
+      const day5Button = findDayButton(dialog, 5)
+      await user.click(day5Button as Element)
+
+      expect(handleChange).toHaveBeenCalled()
+    })
+  })
+
+  // ============================================
+  // PRESETS TESTS
+  // ============================================
+  describe("Presets", () => {
+    it("shows presets sidebar by default", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        const presets = document.querySelector('[data-slot="date-range-presets"]')
+        expect(presets).toBeInTheDocument()
+      })
+    })
+
+    it("hides presets when showPresets is false", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" showPresets={false} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const presets = document.querySelector('[data-slot="date-range-presets"]')
+      expect(presets).not.toBeInTheDocument()
+    })
+
+    it("displays all default presets", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      // Check some default presets exist (role="option" because they're in a listbox)
+      expect(screen.getByRole("option", { name: "Today" })).toBeInTheDocument()
+      expect(screen.getByRole("option", { name: "Yesterday" })).toBeInTheDocument()
+      expect(screen.getByRole("option", { name: "Last 7 days" })).toBeInTheDocument()
+    })
+
+    it("accepts custom presets", async () => {
+      const user = userEvent.setup()
+      const customPresets: DateRangePreset[] = [
+        { label: "Custom Range", getValue: () => testRange },
+      ]
+      render(<DateRangePicker aria-label="Select date range" presets={customPresets} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      expect(screen.getByRole("option", { name: "Custom Range" })).toBeInTheDocument()
+      expect(screen.queryByRole("option", { name: "Today" })).not.toBeInTheDocument()
+    })
+
+    it("applies preset when clicked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<DateRangePicker aria-label="Select date range" onChange={handleChange} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      await user.click(screen.getByRole("option", { name: "Today" }))
+
+      expect(handleChange).toHaveBeenCalled()
+      const range = handleChange.mock.calls[0]?.[0] as DateRange
+      expect(range.from).toBeInstanceOf(Date)
+      expect(range.to).toBeInstanceOf(Date)
+    })
+
+    it("closes calendar after preset selection (no confirmation mode)", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      await user.click(screen.getByRole("option", { name: "Today" }))
+
+      await waitFor(() => {
+        expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+      })
+    })
+
+    it("highlights selected preset", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker requireConfirmation aria-label="Select date range" />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const todayPreset = screen.getByRole("option", { name: "Today" })
+      await user.click(todayPreset)
+
+      // Check that preset has data-selected attribute
+      expect(todayPreset).toHaveAttribute("data-selected")
+    })
+
+    it("hides presets when empty array provided", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" presets={[]} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const presets = document.querySelector('[data-slot="date-range-presets"]')
+      expect(presets).not.toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // CONFIRMATION MODE TESTS
+  // ============================================
+  describe("Confirmation Mode", () => {
+    it("shows Apply and Cancel buttons when requireConfirmation is true", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker requireConfirmation aria-label="Select date range" />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      expect(screen.getByRole("button", { name: "Apply" })).toBeInTheDocument()
+      expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument()
+    })
+
+    it("does not show Apply/Cancel buttons by default", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      expect(screen.queryByRole("button", { name: "Apply" })).not.toBeInTheDocument()
+      expect(screen.queryByRole("button", { name: "Cancel" })).not.toBeInTheDocument()
+    })
+
+    it("does not call onChange until Apply is clicked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<DateRangePicker requireConfirmation aria-label="Select date range" onChange={handleChange} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      // Select a preset
+      await user.click(screen.getByRole("option", { name: "Today" }))
+
+      // onChange should not have been called yet
+      expect(handleChange).not.toHaveBeenCalled()
+    })
+
+    it("calls onChange when Apply is clicked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<DateRangePicker requireConfirmation aria-label="Select date range" onChange={handleChange} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      await user.click(screen.getByRole("option", { name: "Today" }))
+      await user.click(screen.getByRole("button", { name: "Apply" }))
+
+      expect(handleChange).toHaveBeenCalled()
+    })
+
+    it("reverts changes when Cancel is clicked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<DateRangePicker requireConfirmation aria-label="Select date range" defaultValue={testRange} onChange={handleChange} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      await user.click(screen.getByRole("option", { name: "Today" }))
+      await user.click(screen.getByRole("button", { name: "Cancel" }))
+
+      // onChange should not have been called
+      expect(handleChange).not.toHaveBeenCalled()
+
+      // Dialog should be closed
+      await waitFor(() => {
+        expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+      })
+
+      // Original value should be preserved
+      expect(screen.getByRole("combobox")).toHaveTextContent("Jan 10, 2024")
+    })
+
+    it("closes calendar after Apply", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker requireConfirmation aria-label="Select date range" />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      await user.click(screen.getByRole("option", { name: "Today" }))
+      await user.click(screen.getByRole("button", { name: "Apply" }))
+
+      await waitFor(() => {
+        expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+      })
+    })
+
+    it("disables Apply button when no selection", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker requireConfirmation aria-label="Select date range" />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      expect(screen.getByRole("button", { name: "Apply" })).toBeDisabled()
+    })
+
+    it("reverts changes when closing without Apply", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<DateRangePicker requireConfirmation aria-label="Select date range" defaultValue={testRange} onChange={handleChange} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      await user.click(screen.getByRole("option", { name: "Today" }))
+      await user.keyboard("{Escape}")
+
+      expect(handleChange).not.toHaveBeenCalled()
+    })
+
+    it("has data-slot on footer", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker requireConfirmation aria-label="Select date range" />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const footer = document.querySelector('[data-slot="date-range-picker-footer"]')
+      expect(footer).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // CONSTRAINTS TESTS
+  // ============================================
+  describe("Constraints", () => {
+    it("disables dates before minDate", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" defaultValue={testRange} minDate={minDate} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+      const day3Button = findDayButton(dialog, 3)
+      expect(day3Button).toBeDisabled()
+    })
+
+    it("disables dates after maxDate", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" defaultValue={testRange} maxDate={maxDate} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+      const day30Button = findDayButton(dialog, 30)
+      expect(day30Button).toBeDisabled()
+    })
+
+    it("allows dates within range", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" defaultValue={testRange} maxDate={maxDate} minDate={minDate} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+      const day15Button = findDayButton(dialog, 15)
+      expect(day15Button).not.toBeDisabled()
+    })
+
+    it("respects disabledDates function", async () => {
+      const user = userEvent.setup()
+      render(
+        <DateRangePicker
+          aria-label="Select date range"
+          defaultValue={testRange}
+          disabledDates={(date) => date.getDay() === 0 || date.getDay() === 6}
+        />
+      )
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+      // January 13, 2024 is a Saturday
+      const saturdayButton = findDayButton(dialog, 13)
+      expect(saturdayButton).toBeDisabled()
+    })
+
+    it("combines minDate, maxDate, and disabledDates", async () => {
+      const user = userEvent.setup()
+      render(
+        <DateRangePicker
+          aria-label="Select date range"
+          defaultValue={testRange}
+          disabledDates={(date) => date.getDate() === 16}
+          maxDate={maxDate}
+          minDate={minDate}
+        />
+      )
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+
+      // Day 3 disabled by minDate
+      const day3Button = findDayButton(dialog, 3)
+      expect(day3Button).toBeDisabled()
+
+      // Day 16 disabled by function
+      const day16Button = findDayButton(dialog, 16)
+      expect(day16Button).toBeDisabled()
+
+      // Day 15 should be enabled
+      const day15Button = findDayButton(dialog, 15)
+      expect(day15Button).not.toBeDisabled()
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations", async () => {
+      const { container } = render(
+        <label>
+          Date range
+          <DateRangePicker id="daterange" />
+        </label>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("trigger has combobox role", () => {
+      render(<DateRangePicker aria-label="Select date range" />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    it("trigger has aria-haspopup", () => {
+      render(<DateRangePicker aria-label="Select date range" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-haspopup", "dialog")
+    })
+
+    it("trigger has aria-expanded=false when closed", () => {
+      render(<DateRangePicker aria-label="Select date range" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-expanded", "false")
+    })
+
+    it("trigger has aria-expanded=true when open", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("combobox")).toHaveAttribute("aria-expanded", "true")
+      })
+    })
+
+    it("supports aria-label prop", () => {
+      render(<DateRangePicker aria-label="Select your dates" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-label", "Select your dates")
+    })
+
+    it("supports aria-labelledby", () => {
+      render(
+        <>
+          <span id="my-label">Pick dates</span>
+          <DateRangePicker aria-labelledby="my-label" />
+        </>
+      )
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-labelledby", "my-label")
+    })
+
+    it("supports aria-describedby", () => {
+      render(
+        <>
+          <DateRangePicker aria-describedby="help" aria-label="Select date range" />
+          <span id="help">Select a start and end date</span>
+        </>
+      )
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-describedby", "help")
+    })
+
+    it("clear button has accessible label", () => {
+      render(<DateRangePicker clearable aria-label="Select date range" defaultValue={testRange} />)
+      expect(screen.getByLabelText("Clear date range")).toBeInTheDocument()
+    })
+
+    it("presets are keyboard accessible", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      // Tab to presets
+      await user.tab()
+
+      const focusedPreset = document.activeElement
+      expect(focusedPreset).toHaveRole("option")
+    })
+  })
+
+  // ============================================
+  // KEYBOARD NAVIGATION TESTS
+  // ============================================
+  describe("Keyboard Navigation", () => {
+    it("opens calendar with Enter key", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" />)
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+    })
+
+    it("opens calendar with Space key", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" />)
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard(" ")
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+    })
+
+    it("closes calendar with Escape key", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      await user.keyboard("{Escape}")
+
+      await waitFor(() => {
+        expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  // ============================================
+  // CONTROLLED/UNCONTROLLED TESTS
+  // ============================================
+  describe("Controlled State", () => {
+    it("respects controlled value", () => {
+      const { rerender } = render(
+        <DateRangePicker aria-label="Select date range" value={testRange} onChange={() => {}} />
+      )
+
+      expect(screen.getByRole("combobox")).toHaveTextContent("Jan 10, 2024")
+
+      const newRange: DateRange = {
+        from: new Date(2024, 1, 1),
+        to: new Date(2024, 1, 14),
+      }
+      rerender(<DateRangePicker aria-label="Select date range" value={newRange} onChange={() => {}} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("Feb 1, 2024")
+    })
+
+    it("reports new value via onChange", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<DateRangePicker aria-label="Select date range" value={testRange} onChange={handleChange} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+      const day25Button = findDayButton(dialog, 25)
+      await user.click(day25Button as Element)
+
+      expect(handleChange).toHaveBeenCalled()
+    })
+
+    it("works in uncontrolled mode with defaultValue", () => {
+      render(<DateRangePicker aria-label="Select date range" defaultValue={testRange} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("Jan 10, 2024")
+    })
+
+    it("works in uncontrolled mode without defaultValue", () => {
+      render(<DateRangePicker aria-label="Select date range" placeholder="Select range" />)
+      expect(screen.getByText("Select range")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // EVENTS TESTS
+  // ============================================
+  describe("Events", () => {
+    it("calls onChange when range changes", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<DateRangePicker aria-label="Select date range" onChange={handleChange} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      await user.click(screen.getByRole("option", { name: "Today" }))
+
+      expect(handleChange).toHaveBeenCalled()
+    })
+
+    it("calls onOpenChange when calendar opens", async () => {
+      const user = userEvent.setup()
+      const handleOpenChange = vi.fn()
+      render(<DateRangePicker aria-label="Select date range" onOpenChange={handleOpenChange} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(handleOpenChange).toHaveBeenCalledWith(true)
+      })
+    })
+
+    it("calls onOpenChange when calendar closes", async () => {
+      const user = userEvent.setup()
+      const handleOpenChange = vi.fn()
+      render(<DateRangePicker aria-label="Select date range" onOpenChange={handleOpenChange} />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      await user.keyboard("{Escape}")
+
+      await waitFor(() => {
+        expect(handleOpenChange).toHaveBeenCalledWith(false)
+      })
+    })
+
+    it("calls onClear when cleared", async () => {
+      const user = userEvent.setup()
+      const handleClear = vi.fn()
+      render(<DateRangePicker clearable aria-label="Select date range" defaultValue={testRange} onClear={handleClear} />)
+
+      await user.click(screen.getByLabelText("Clear date range"))
+
+      expect(handleClear).toHaveBeenCalled()
+    })
+
+    it("does not open when disabled", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker disabled aria-label="Select date range" />)
+
+      const trigger = screen.getByRole("combobox")
+      await user.click(trigger)
+
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies default size (md)", () => {
+      render(<DateRangePicker aria-label="Select date range" />)
+      expect(screen.getByRole("combobox")).toHaveClass("h-[var(--date-picker-trigger-height-md)]")
+    })
+
+    it("applies sm size", () => {
+      render(<DateRangePicker aria-label="Select date range" size="sm" />)
+      expect(screen.getByRole("combobox")).toHaveClass("h-[var(--date-picker-trigger-height-sm)]")
+    })
+
+    it("applies lg size", () => {
+      render(<DateRangePicker aria-label="Select date range" size="lg" />)
+      expect(screen.getByRole("combobox")).toHaveClass("h-[var(--date-picker-trigger-height-lg)]")
+    })
+
+    it("has data-size attribute", () => {
+      render(<DateRangePicker aria-label="Select date range" size="sm" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-size", "sm")
+    })
+  })
+
+  // ============================================
+  // VISUAL VARIANT TESTS
+  // ============================================
+  describe("Visual Variants", () => {
+    it("applies default variant", () => {
+      render(<DateRangePicker aria-label="Select date range" />)
+      expect(screen.getByRole("combobox")).toHaveClass("border-input")
+    })
+
+    it("applies outline variant", () => {
+      render(<DateRangePicker aria-label="Select date range" variant="outline" />)
+      expect(screen.getByRole("combobox")).toHaveClass("border-input")
+    })
+
+    it("applies ghost variant", () => {
+      render(<DateRangePicker aria-label="Select date range" variant="ghost" />)
+      expect(screen.getByRole("combobox")).toHaveClass("border-transparent")
+    })
+
+    it("has data-variant attribute", () => {
+      render(<DateRangePicker aria-label="Select date range" variant="ghost" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-variant", "ghost")
+    })
+  })
+
+  // ============================================
+  // CLEARABLE TESTS
+  // ============================================
+  describe("Clearable", () => {
+    it("does not show clear button by default", () => {
+      render(<DateRangePicker aria-label="Select date range" defaultValue={testRange} />)
+      expect(screen.queryByLabelText("Clear date range")).not.toBeInTheDocument()
+    })
+
+    it("shows clear button when clearable and has value", () => {
+      render(<DateRangePicker clearable aria-label="Select date range" defaultValue={testRange} />)
+      expect(screen.getByLabelText("Clear date range")).toBeInTheDocument()
+    })
+
+    it("does not show clear button when clearable but no value", () => {
+      render(<DateRangePicker clearable aria-label="Select date range" />)
+      expect(screen.queryByLabelText("Clear date range")).not.toBeInTheDocument()
+    })
+
+    it("does not show clear button when disabled", () => {
+      render(<DateRangePicker clearable disabled aria-label="Select date range" defaultValue={testRange} />)
+      expect(screen.queryByLabelText("Clear date range")).not.toBeInTheDocument()
+    })
+
+    it("does not show clear button when readOnly", () => {
+      render(<DateRangePicker clearable readOnly aria-label="Select date range" defaultValue={testRange} />)
+      expect(screen.queryByLabelText("Clear date range")).not.toBeInTheDocument()
+    })
+
+    it("clears range when clear button is clicked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<DateRangePicker clearable aria-label="Select date range" defaultValue={testRange} onChange={handleChange} />)
+
+      await user.click(screen.getByLabelText("Clear date range"))
+
+      expect(handleChange).toHaveBeenCalledTimes(1)
+      expect(handleChange.mock.calls[0]).toHaveLength(0)
+    })
+
+    it("clears range with keyboard (Enter)", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<DateRangePicker clearable aria-label="Select date range" defaultValue={testRange} onChange={handleChange} />)
+
+      const clearButton = screen.getByLabelText("Clear date range")
+      clearButton.focus()
+      await user.keyboard("{Enter}")
+
+      expect(handleChange).toHaveBeenCalledTimes(1)
+      expect(handleChange.mock.calls[0]).toHaveLength(0)
+    })
+
+    it("has data-slot on clear button", () => {
+      render(<DateRangePicker clearable aria-label="Select date range" defaultValue={testRange} />)
+      expect(screen.getByLabelText("Clear date range")).toHaveAttribute("data-slot", "date-range-picker-clear")
+    })
+  })
+
+  // ============================================
+  // READ-ONLY TESTS
+  // ============================================
+  describe("ReadOnly", () => {
+    it("applies aria-readonly when readOnly", () => {
+      render(<DateRangePicker readOnly aria-label="Select date range" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-readonly", "true")
+    })
+
+    it("applies data-readonly when readOnly", () => {
+      render(<DateRangePicker readOnly aria-label="Select date range" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-readonly")
+    })
+
+    it("does not open calendar when readOnly", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker readOnly aria-label="Select date range" />)
+
+      await user.click(screen.getByRole("combobox"))
+
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    })
+
+    it("is still focusable when readOnly", () => {
+      render(<DateRangePicker readOnly aria-label="Select date range" />)
+      const trigger = screen.getByRole("combobox")
+      trigger.focus()
+      expect(trigger).toHaveFocus()
+    })
+
+    it("displays value when readOnly", () => {
+      render(<DateRangePicker readOnly aria-label="Select date range" defaultValue={testRange} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("Jan 10, 2024")
+    })
+  })
+
+  // ============================================
+  // FORM INTEGRATION TESTS
+  // ============================================
+  describe("Form Integration", () => {
+    it("renders hidden inputs with name", () => {
+      const { container } = render(<DateRangePicker aria-label="Select date range" name="daterange" />)
+      const fromInput = container.querySelector('input[type="hidden"][name="daterange-from"]')
+      const toInput = container.querySelector('input[type="hidden"][name="daterange-to"]')
+      expect(fromInput).toBeInTheDocument()
+      expect(toInput).toBeInTheDocument()
+    })
+
+    it("hidden inputs have ISO date values", () => {
+      const { container } = render(<DateRangePicker aria-label="Select date range" defaultValue={testRange} name="daterange" />)
+      const fromInput = container.querySelector<HTMLInputElement>('input[name="daterange-from"]')
+      const toInput = container.querySelector<HTMLInputElement>('input[name="daterange-to"]')
+      expect(fromInput).toBeInTheDocument()
+      expect(toInput).toBeInTheDocument()
+      expect(fromInput?.value).toBe(testRange.from?.toISOString())
+      expect(toInput?.value).toBe(testRange.to?.toISOString())
+    })
+
+    it("hidden inputs are empty when no range selected", () => {
+      const { container } = render(<DateRangePicker aria-label="Select date range" name="daterange" />)
+      const fromInput = container.querySelector<HTMLInputElement>('input[name="daterange-from"]')
+      const toInput = container.querySelector<HTMLInputElement>('input[name="daterange-to"]')
+      expect(fromInput).toBeInTheDocument()
+      expect(toInput).toBeInTheDocument()
+      expect(fromInput?.value).toBe("")
+      expect(toInput?.value).toBe("")
+    })
+
+    it("supports id for label association", () => {
+      render(<DateRangePicker aria-label="Select date range" id="daterange-input" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("id", "daterange-input")
+    })
+  })
+
+  // ============================================
+  // REF FORWARDING TESTS
+  // ============================================
+  describe("Ref Forwarding", () => {
+    it("forwards ref to trigger button", () => {
+      const ref = React.createRef<HTMLButtonElement>()
+      render(<DateRangePicker ref={ref} aria-label="Select date range" />)
+
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement)
+      expect(ref.current).toBe(screen.getByRole("combobox"))
+    })
+
+    it("allows programmatic focus via ref", () => {
+      const ref = React.createRef<HTMLButtonElement>()
+      render(<DateRangePicker ref={ref} aria-label="Select date range" />)
+
+      ref.current?.focus()
+      expect(screen.getByRole("combobox")).toHaveFocus()
+    })
+  })
+
+  // ============================================
+  // DATA ATTRIBUTE TESTS
+  // ============================================
+  describe("Data Attributes", () => {
+    it("has data-slot on wrapper", () => {
+      render(<DateRangePicker aria-label="Select date range" />)
+      const wrapper = screen.getByRole("combobox").closest('[data-slot="date-range-picker"]')
+      expect(wrapper).toBeInTheDocument()
+    })
+
+    it("has data-slot on trigger", () => {
+      render(<DateRangePicker aria-label="Select date range" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-slot", "date-range-picker-trigger")
+    })
+
+    it("has data-state on trigger", () => {
+      render(<DateRangePicker aria-label="Select date range" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-state", "closed")
+    })
+
+    it("has data-state=open when opened", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("combobox")).toHaveAttribute("data-state", "open")
+      })
+    })
+
+    it("has data-slot on content when opened", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" />)
+
+      await openDateRangePicker(user)
+
+      await waitFor(() => {
+        const content = document.querySelector('[data-slot="date-range-picker-content"]')
+        expect(content).toBeInTheDocument()
+      })
+    })
+  })
+
+  // ============================================
+  // EDGE CASES TESTS
+  // ============================================
+  describe("Edge Cases", () => {
+    it("handles empty className", () => {
+      render(<DateRangePicker aria-label="Select date range" className="" />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    it("handles rapid open/close correctly", async () => {
+      const user = userEvent.setup()
+      render(<DateRangePicker aria-label="Select date range" />)
+
+      const trigger = screen.getByRole("combobox")
+      await user.click(trigger)
+      await user.keyboard("{Escape}")
+      await user.click(trigger)
+      await user.keyboard("{Escape}")
+      await user.click(trigger)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+    })
+
+    it("maintains state through re-renders", () => {
+      const { rerender } = render(<DateRangePicker aria-label="Select date range" defaultValue={testRange} />)
+
+      expect(screen.getByRole("combobox")).toHaveTextContent("Jan 10, 2024")
+
+      rerender(<DateRangePicker aria-label="Select date range" defaultValue={testRange} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("Jan 10, 2024")
+    })
+
+    it("handles undefined range gracefully", () => {
+      render(<DateRangePicker aria-label="Select date range" value={undefined} onChange={() => {}} />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // TYPE SAFETY TESTS
+  // ============================================
+  describe("Type Safety", () => {
+    it("accepts valid size prop values", () => {
+      const sizes = ["sm", "md", "lg"] as const
+      sizes.forEach((size) => {
+        const { unmount } = render(<DateRangePicker aria-label="Select date range" size={size} />)
+        expect(screen.getByRole("combobox")).toBeInTheDocument()
+        unmount()
+      })
+    })
+
+    it("accepts valid variant prop values", () => {
+      const variants = ["default", "outline", "ghost"] as const
+      variants.forEach((variant) => {
+        const { unmount } = render(<DateRangePicker aria-label="Select date range" variant={variant} />)
+        expect(screen.getByRole("combobox")).toBeInTheDocument()
+        unmount()
+      })
+    })
+  })
+})
+
+// ============================================
+// DATERANGEPRESETS TESTS
+// ============================================
+describe("DateRangePresets", () => {
+  const mockPresets: DateRangePreset[] = [
+    { label: "Today", getValue: () => ({ from: new Date(), to: new Date() }) },
+    { label: "Yesterday", getValue: () => ({ from: new Date(), to: new Date() }) },
+  ]
+
+  it("renders all presets", () => {
+    const handleSelect = vi.fn()
+    render(<DateRangePresets presets={mockPresets} onSelect={handleSelect} />)
+
+    expect(screen.getByRole("option", { name: "Today" })).toBeInTheDocument()
+    expect(screen.getByRole("option", { name: "Yesterday" })).toBeInTheDocument()
+  })
+
+  it("calls onSelect with range and label when preset clicked", async () => {
+    const user = userEvent.setup()
+    const handleSelect = vi.fn()
+    render(<DateRangePresets presets={mockPresets} onSelect={handleSelect} />)
+
+    await user.click(screen.getByRole("option", { name: "Today" }))
+
+    expect(handleSelect).toHaveBeenCalled()
+    expect(handleSelect.mock.calls[0]?.[1]).toBe("Today")
+  })
+
+  it("highlights selected preset", () => {
+    const handleSelect = vi.fn()
+    render(<DateRangePresets presets={mockPresets} selectedPreset="Today" onSelect={handleSelect} />)
+
+    expect(screen.getByRole("option", { name: "Today" })).toHaveAttribute("data-selected")
+    expect(screen.getByRole("option", { name: "Yesterday" })).not.toHaveAttribute("data-selected")
+  })
+
+  it("has data-slot attribute", () => {
+    const handleSelect = vi.fn()
+    const { container } = render(<DateRangePresets presets={mockPresets} onSelect={handleSelect} />)
+
+    expect(container.querySelector('[data-slot="date-range-presets"]')).toBeInTheDocument()
+  })
+})
+
+// ============================================
+// DEFAULT PRESETS TESTS
+// ============================================
+describe("Default Presets", () => {
+  it("has correct number of presets", () => {
+    expect(defaultPresets.length).toBeGreaterThan(0)
+  })
+
+  it("each preset has label and getValue", () => {
+    defaultPresets.forEach((preset) => {
+      expect(preset.label).toBeTruthy()
+      expect(typeof preset.getValue).toBe("function")
+    })
+  })
+
+  it("each preset returns valid DateRange (except All time)", () => {
+    defaultPresets
+      .filter((preset) => preset.label !== "All time")
+      .forEach((preset) => {
+        const range = preset.getValue()
+        expect(range.from).toBeInstanceOf(Date)
+        expect(range.to).toBeInstanceOf(Date)
+      })
+  })
+
+  it("Today preset returns today's date", () => {
+    const todayPreset = defaultPresets.find((p) => p.label === "Today")
+    if (!todayPreset) throw new Error("Today preset not found")
+
+    const range = todayPreset.getValue()
+    const today = new Date()
+    expect(range.from?.getDate()).toBe(today.getDate())
+  })
+
+  it("Yesterday preset returns yesterday's date", () => {
+    const yesterdayPreset = defaultPresets.find((p) => p.label === "Yesterday")
+    if (!yesterdayPreset) throw new Error("Yesterday preset not found")
+
+    const range = yesterdayPreset.getValue()
+    const yesterday = new Date()
+    yesterday.setDate(yesterday.getDate() - 1)
+    expect(range.from?.getDate()).toBe(yesterday.getDate())
+  })
+
+  it("This year preset returns current year range", () => {
+    const thisYearPreset = defaultPresets.find((p) => p.label === "This year")
+    if (!thisYearPreset) throw new Error("This year preset not found")
+
+    const range = thisYearPreset.getValue()
+    const currentYear = new Date().getFullYear()
+    expect(range.from?.getFullYear()).toBe(currentYear)
+    expect(range.from?.getMonth()).toBe(0) // January
+    expect(range.from?.getDate()).toBe(1)
+    expect(range.to?.getFullYear()).toBe(currentYear)
+    expect(range.to?.getMonth()).toBe(11) // December
+    expect(range.to?.getDate()).toBe(31)
+  })
+
+  it("Last year preset returns previous year range", () => {
+    const lastYearPreset = defaultPresets.find((p) => p.label === "Last year")
+    if (!lastYearPreset) throw new Error("Last year preset not found")
+
+    const range = lastYearPreset.getValue()
+    const lastYear = new Date().getFullYear() - 1
+    expect(range.from?.getFullYear()).toBe(lastYear)
+    expect(range.from?.getMonth()).toBe(0) // January
+    expect(range.from?.getDate()).toBe(1)
+    expect(range.to?.getFullYear()).toBe(lastYear)
+    expect(range.to?.getMonth()).toBe(11) // December
+    expect(range.to?.getDate()).toBe(31)
+  })
+
+  it("All time preset returns undefined dates", () => {
+    const allTimePreset = defaultPresets.find((p) => p.label === "All time")
+    if (!allTimePreset) throw new Error("All time preset not found")
+
+    const range = allTimePreset.getValue()
+    expect(range.from).toBeUndefined()
+    expect(range.to).toBeUndefined()
+  })
+})
+
+// ============================================
+// TODAY BUTTON TESTS
+// ============================================
+describe("Today Button", () => {
+  it("shows Today button by default", async () => {
+    const user = userEvent.setup()
+    render(<DateRangePicker aria-label="Select date range" />)
+
+    await openDateRangePicker(user)
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument()
+    })
+
+    expect(screen.getByRole("button", { name: "Today" })).toBeInTheDocument()
+  })
+
+  it("hides Today button when showTodayButton is false", async () => {
+    const user = userEvent.setup()
+    render(<DateRangePicker aria-label="Select date range" showTodayButton={false} />)
+
+    await openDateRangePicker(user)
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument()
+    })
+
+    // Should not have the Today button (the one in header, not the preset option)
+    const header = document.querySelector('[data-slot="date-range-picker-header"]')
+    expect(header).not.toBeInTheDocument()
+  })
+
+  it("has header with data-slot attribute", async () => {
+    const user = userEvent.setup()
+    render(<DateRangePicker aria-label="Select date range" />)
+
+    await openDateRangePicker(user)
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument()
+    })
+
+    const header = document.querySelector('[data-slot="date-range-picker-header"]')
+    expect(header).toBeInTheDocument()
+  })
+
+  it("Today button navigates calendar to current month", async () => {
+    const user = userEvent.setup()
+    // Start with a date in a different month/year
+    const pastDate = new Date(2020, 5, 15) // June 15, 2020
+    render(
+      <DateRangePicker
+        aria-label="Select date range"
+        defaultValue={{ from: pastDate, to: pastDate }}
+      />
+    )
+
+    await openDateRangePicker(user)
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument()
+    })
+
+    // Click the Today button (in header, not the preset)
+    const header = document.querySelector('[data-slot="date-range-picker-header"]')
+    const todayButton = within(header as HTMLElement).getByRole("button", { name: "Today" })
+    await user.click(todayButton)
+
+    // After clicking, the calendar should show the current month
+    const currentMonth = new Date().toLocaleString("default", { month: "long" })
+    const currentYear = new Date().getFullYear()
+
+    await waitFor(() => {
+      // The calendar should now show the current month/year
+      const calendarText = document.querySelector('[data-slot="date-range-picker-content"]')?.textContent
+      expect(calendarText).toContain(currentMonth)
+      expect(calendarText).toContain(String(currentYear))
+    })
+  })
+})
+
+// ============================================
+// MODAL VARIANT TESTS
+// ============================================
+describe("Modal Variant", () => {
+  it("renders in popover mode by default", () => {
+    render(<DateRangePicker aria-label="Select date range" />)
+    const wrapper = screen.getByRole("combobox").closest('[data-slot="date-range-picker"]')
+    expect(wrapper).toHaveAttribute("data-mode", "popover")
+  })
+
+  it("renders in modal mode when displayMode is modal", () => {
+    render(<DateRangePicker aria-label="Select date range" displayMode="modal" />)
+    const wrapper = screen.getByRole("combobox").closest('[data-slot="date-range-picker"]')
+    expect(wrapper).toHaveAttribute("data-mode", "modal")
+  })
+
+  it("opens modal dialog when displayMode is modal", async () => {
+    const user = userEvent.setup()
+    render(<DateRangePicker aria-label="Select date range" displayMode="modal" />)
+
+    await user.click(screen.getByRole("combobox"))
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument()
+    })
+  })
+
+  it("shows modal title when displayMode is modal", async () => {
+    const user = userEvent.setup()
+    render(
+      <DateRangePicker
+        aria-label="Select date range"
+        displayMode="modal"
+        modalTitle="Choose your dates"
+      />
+    )
+
+    await user.click(screen.getByRole("combobox"))
+
+    await waitFor(() => {
+      expect(screen.getByText("Choose your dates")).toBeInTheDocument()
+    })
+  })
+
+  it("uses default modal title when not specified", async () => {
+    const user = userEvent.setup()
+    render(<DateRangePicker aria-label="Select date range" displayMode="modal" />)
+
+    await user.click(screen.getByRole("combobox"))
+
+    await waitFor(() => {
+      expect(screen.getByText("Select Date Range")).toBeInTheDocument()
+    })
+  })
+
+  it("modal mode supports presets", async () => {
+    const user = userEvent.setup()
+    render(<DateRangePicker aria-label="Select date range" displayMode="modal" />)
+
+    await user.click(screen.getByRole("combobox"))
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument()
+    })
+
+    expect(screen.getByRole("option", { name: "Today" })).toBeInTheDocument()
+  })
+
+  it("modal mode supports confirmation buttons", async () => {
+    const user = userEvent.setup()
+    render(
+      <DateRangePicker
+        requireConfirmation
+        aria-label="Select date range"
+        displayMode="modal"
+      />
+    )
+
+    await user.click(screen.getByRole("combobox"))
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument()
+    })
+
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Apply" })).toBeInTheDocument()
+  })
+
+  it("closes modal with Cancel button", async () => {
+    const user = userEvent.setup()
+    render(
+      <DateRangePicker
+        requireConfirmation
+        aria-label="Select date range"
+        displayMode="modal"
+      />
+    )
+
+    await user.click(screen.getByRole("combobox"))
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument()
+    })
+
+    await user.click(screen.getByRole("button", { name: "Cancel" }))
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    })
+  })
+})
+
+// ============================================
+// ACTIVE DATES TESTS
+// ============================================
+describe("Active Dates", () => {
+  const activeDatesArray = [
+    new Date(2024, 0, 15), // January 15, 2024
+    new Date(2024, 0, 20), // January 20, 2024
+  ]
+
+  it("accepts activeDates as array", async () => {
+    const user = userEvent.setup()
+    render(
+      <DateRangePicker
+        activeDates={activeDatesArray}
+        aria-label="Select date range"
+        defaultValue={{ from: new Date(2024, 0, 1), to: new Date(2024, 0, 10) }}
+      />
+    )
+
+    await openDateRangePicker(user)
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument()
+    })
+
+    // Component should render without errors
+    expect(screen.getByRole("dialog")).toBeInTheDocument()
+  })
+
+  it("accepts activeDates as function", async () => {
+    const user = userEvent.setup()
+    const isActive = (date: Date) => date.getDay() === 0 // Sundays
+
+    render(
+      <DateRangePicker
+        activeDates={isActive}
+        aria-label="Select date range"
+        defaultValue={{ from: new Date(2024, 0, 1), to: new Date(2024, 0, 10) }}
+      />
+    )
+
+    await openDateRangePicker(user)
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument()
+    })
+
+    // Component should render without errors
+    expect(screen.getByRole("dialog")).toBeInTheDocument()
+  })
+
+  it("renders active indicator on active dates", async () => {
+    const user = userEvent.setup()
+    render(
+      <DateRangePicker
+        activeDates={activeDatesArray}
+        aria-label="Select date range"
+        defaultValue={{ from: new Date(2024, 0, 1), to: new Date(2024, 0, 10) }}
+      />
+    )
+
+    await openDateRangePicker(user)
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument()
+    })
+
+    // Check for active indicators - they are rendered with data-slot="active-indicator"
+    const dialog = screen.getByRole("dialog")
+    const day15Button = findDayButton(dialog, 15)
+    expect(day15Button).toHaveAttribute("data-active")
+  })
+
+  it("does not show active indicator on non-active dates", async () => {
+    const user = userEvent.setup()
+    render(
+      <DateRangePicker
+        activeDates={activeDatesArray}
+        aria-label="Select date range"
+        defaultValue={{ from: new Date(2024, 0, 1), to: new Date(2024, 0, 10) }}
+      />
+    )
+
+    await openDateRangePicker(user)
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument()
+    })
+
+    const dialog = screen.getByRole("dialog")
+    const day16Button = findDayButton(dialog, 16)
+    expect(day16Button).toHaveAttribute("data-active", "false")
+  })
+})