@etus/ui 0.1.0 → 0.1.2

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

@@ -1,1684 +0,0 @@
-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")
-  })
-})