@simplysm/solid 13.0.75 → 13.0.77

package/tests/components/form-control/checkbox/Radio.spec.tsx

@@ -2,30 +2,13 @@ import { render, fireEvent } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createSignal } from "solid-js";
 import { Radio } from "../../../../src/components/form-control/checkbox/Radio";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("Radio component", () => {
   beforeEach(() => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
   });
-  describe("basic rendering", () => {
-    it("renders with radio role", () => {
-      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio /></I18nProvider></ConfigProvider>);
-      expect(getByRole("radio")).toBeTruthy();
-    });
-
-    it("renders children as label", () => {
-      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio>옵션 A</Radio></I18nProvider></ConfigProvider>);
-      expect(getByText("옵션 A")).toBeTruthy();
-    });
-
-    it("defaults to unchecked", () => {
-      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio /></I18nProvider></ConfigProvider>);
-      expect(getByRole("radio").getAttribute("aria-checked")).toBe("false");
-    });
-  });
-
   describe("click behavior", () => {
     it("selects on click", () => {
       const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio /></I18nProvider></ConfigProvider>);
@@ -87,34 +70,6 @@ describe("Radio component", () => {
     });
   });
 
-  describe("style variants", () => {
-    it("indicator is circular", () => {
-      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio /></I18nProvider></ConfigProvider>);
-      const indicator = getByRole("radio").querySelector("div") as HTMLElement;
-      expect(indicator.classList.contains("rounded-full")).toBe(true);
-    });
-
-    it("applies different styles per size", () => {
-      const { getByRole: getDefault } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio /></I18nProvider></ConfigProvider>);
-      const { getByRole: getSm } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio size="sm" /></I18nProvider></ConfigProvider>);
-
-      expect(getDefault("radio").className).not.toBe(getSm("radio").className);
-    });
-
-    it("applies disabled style", () => {
-      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio disabled /></I18nProvider></ConfigProvider>);
-      expect(getByRole("radio").classList.contains("opacity-30")).toBe(true);
-    });
-  });
-
-  describe("class merging", () => {
-    it("merges custom classes", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio class="my-custom-class" /></I18nProvider></ConfigProvider>);
-      expect(getByRole("radio").classList.contains("my-custom-class")).toBe(true);
-    });
-  });
-
   describe("validation", () => {
     it("sets error message when required and not selected", () => {
       const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio required value={false} /></I18nProvider></ConfigProvider>);

package/tests/components/form-control/checkbox/RadioGroup.spec.tsx

@@ -2,38 +2,13 @@ import { render, fireEvent } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createSignal } from "solid-js";
 import { RadioGroup } from "../../../../src/components/form-control/checkbox/RadioGroup";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("RadioGroup component", () => {
   beforeEach(() => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
   });
-  describe("basic rendering", () => {
-    it("renders the container", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <RadioGroup>
-            <RadioGroup.Item value="a">A</RadioGroup.Item>
-          </RadioGroup>
-        </I18nProvider></ConfigProvider>
-      ));
-      expect(container.querySelector("div")).toBeTruthy();
-    });
-
-    it("renders items as radios", () => {
-      const { getAllByRole } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <RadioGroup>
-            <RadioGroup.Item value="a">A</RadioGroup.Item>
-            <RadioGroup.Item value="b">B</RadioGroup.Item>
-          </RadioGroup>
-        </I18nProvider></ConfigProvider>
-      ));
-      expect(getAllByRole("radio").length).toBe(2);
-    });
-  });
-
   describe("controlled pattern", () => {
     it("reflects value prop as selected state", () => {
       const { getAllByRole } = render(() => (

package/tests/components/form-control/color-picker/ColorPicker.spec.tsx

@@ -2,28 +2,13 @@ import { render, fireEvent } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createSignal } from "solid-js";
 import { ColorPicker } from "../../../../src/components/form-control/color-picker/ColorPicker";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("ColorPicker component", () => {
   beforeEach(() => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
   });
-  describe("basic rendering", () => {
-    it("renders input type=color", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><ColorPicker /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.type).toBe("color");
-    });
-
-    it("defaults to #000000", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><ColorPicker /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.value).toBe("#000000");
-    });
-  });
-
   describe("controlled pattern", () => {
     it("calls onValueChange on color change", () => {
       const handleChange = vi.fn();
@@ -57,21 +42,6 @@ describe("ColorPicker component", () => {
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.disabled).toBe(true);
     });
-
-    it("applies disabled style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><ColorPicker disabled /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.classList.contains("cursor-default")).toBe(true);
-    });
-  });
-
-  describe("class merging", () => {
-    it("merges custom classes", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><ColorPicker class="my-custom-class" /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.classList.contains("my-custom-class")).toBe(true);
-    });
   });
 
   describe("validation", () => {

package/tests/components/form-control/combobox/Combobox.spec.tsx

@@ -1,7 +1,7 @@
 import { render, fireEvent, waitFor } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { Combobox } from "../../../../src/components/form-control/combobox/Combobox";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("Combobox component", () => {
@@ -12,50 +12,6 @@ describe("Combobox component", () => {
     mockLoadItems.mockClear();
   });
 
-  describe("basic rendering", () => {
-    it("renders trigger", () => {
-      const { getByRole } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <Combobox loadItems={mockLoadItems} renderValue={(v) => <>{v}</>} />
-        </I18nProvider></ConfigProvider>
-      ));
-      expect(getByRole("combobox")).not.toBeNull();
-    });
-
-    it("displays placeholder", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <Combobox
-            loadItems={mockLoadItems}
-            placeholder="검색하세요"
-            renderValue={(v) => <>{v}</>}
-          />
-        </I18nProvider></ConfigProvider>
-      ));
-      const input = container.querySelector("input");
-      expect(input?.getAttribute("placeholder")).toBe("검색하세요");
-    });
-
-    it("defaults input autocomplete to one-time-code", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <Combobox loadItems={mockLoadItems} renderValue={(v) => <>{v}</>} />
-        </I18nProvider></ConfigProvider>
-      ));
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.autocomplete).toBe("one-time-code");
-    });
-
-    it("sets aria-disabled when disabled", () => {
-      const { getByRole } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <Combobox loadItems={mockLoadItems} disabled renderValue={(v) => <>{v}</>} />
-        </I18nProvider></ConfigProvider>
-      ));
-      expect(getByRole("combobox").getAttribute("aria-disabled")).toBe("true");
-    });
-  });
-
   describe("dropdown opening/closing", () => {
     it("opens dropdown on input", async () => {
       const loadItems = vi.fn(() => Promise.resolve([{ id: 1, name: "사과" }]));
@@ -175,8 +131,8 @@ describe("Combobox component", () => {
     });
   });
 
-  describe("allowCustomValue", () => {
-    it("allows entering custom value with Enter when allowCustomValue is true", () => {
+  describe("allowsCustomValue", () => {
+    it("allows entering custom value with Enter when allowsCustomValue and parseCustomValue are provided", () => {
       const handleChange = vi.fn();
       const loadItems = vi.fn(() => Promise.resolve([]));
 
@@ -185,7 +141,8 @@ describe("Combobox component", () => {
           <Combobox
             loadItems={loadItems}
             onValueChange={handleChange}
-            allowCustomValue
+            allowsCustomValue
+            parseCustomValue={(text) => text}
             renderValue={(v) => <>{v}</>}
           />
         </I18nProvider></ConfigProvider>
@@ -207,7 +164,7 @@ describe("Combobox component", () => {
           <Combobox
             loadItems={loadItems}
             onValueChange={handleChange}
-            allowCustomValue
+            allowsCustomValue
             parseCustomValue={(text) => ({ name: text, custom: true })}
             renderValue={(v: { name: string }) => <>{v.name}</>}
           />
@@ -220,6 +177,28 @@ describe("Combobox component", () => {
 
       expect(handleChange).toHaveBeenCalledWith({ name: "테스트", custom: true });
     });
+
+    it("sets undefined when allowsCustomValue is true without parseCustomValue", async () => {
+      const onValueChange = vi.fn();
+      const { container, getByRole } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <Combobox
+            loadItems={() => []}
+            renderValue={(v: string) => <>{v}</>}
+            allowsCustomValue
+            onValueChange={onValueChange}
+          />
+        </I18nProvider></ConfigProvider>
+      ));
+
+      const input = container.querySelector("input")!;
+      fireEvent.input(input, { target: { value: "custom text" } });
+      fireEvent.keyDown(getByRole("combobox"), { key: "Enter" });
+
+      await waitFor(() => {
+        expect(onValueChange).toHaveBeenCalledWith(undefined);
+      });
+    });
   });
 
   describe("validation", () => {

package/tests/components/form-control/combobox/ComboboxItem.spec.tsx

@@ -1,10 +1,10 @@
 import { render, fireEvent } from "@solidjs/testing-library";
 import { describe, it, expect, vi } from "vitest";
 import {
+  Combobox,
   ComboboxContext,
   type ComboboxContextValue,
-} from "../../../../src/components/form-control/combobox/ComboboxContext";
-import { ComboboxItem } from "../../../../src/components/form-control/combobox/ComboboxItem";
+} from "../../../../src/components/form-control/combobox/Combobox";
 
 const createMockContext = (
   overrides: Partial<ComboboxContextValue> = {},
@@ -17,22 +17,11 @@ const createMockContext = (
 });
 
 describe("ComboboxItem component", () => {
-  it("renders the item", () => {
-    const { getByRole } = render(() => (
-      <ComboboxContext.Provider value={createMockContext()}>
-        <ComboboxItem value="apple">사과</ComboboxItem>
-      </ComboboxContext.Provider>
-    ));
-
-    expect(getByRole("option")).not.toBeNull();
-    expect(getByRole("option").textContent).toContain("사과");
-  });
-
   it("calls selectValue on click", () => {
     const selectValue = vi.fn();
     const { getByRole } = render(() => (
       <ComboboxContext.Provider value={createMockContext({ selectValue })}>
-        <ComboboxItem value="apple">사과</ComboboxItem>
+        <Combobox.Item value="apple">사과</Combobox.Item>
       </ComboboxContext.Provider>
     ));
 
@@ -43,7 +32,7 @@ describe("ComboboxItem component", () => {
   it("sets aria-selected=true when selected", () => {
     const { getByRole } = render(() => (
       <ComboboxContext.Provider value={createMockContext({ isSelected: () => true })}>
-        <ComboboxItem value="apple">사과</ComboboxItem>
+        <Combobox.Item value="apple">사과</Combobox.Item>
       </ComboboxContext.Provider>
     ));
 
@@ -54,9 +43,9 @@ describe("ComboboxItem component", () => {
     const selectValue = vi.fn();
     const { getByRole } = render(() => (
       <ComboboxContext.Provider value={createMockContext({ selectValue })}>
-        <ComboboxItem value="apple" disabled>
+        <Combobox.Item value="apple" disabled>
           사과
-        </ComboboxItem>
+        </Combobox.Item>
       </ComboboxContext.Provider>
     ));
 
@@ -68,7 +57,7 @@ describe("ComboboxItem component", () => {
     const closeDropdown = vi.fn();
     const { getByRole } = render(() => (
       <ComboboxContext.Provider value={createMockContext({ closeDropdown })}>
-        <ComboboxItem value="apple">사과</ComboboxItem>
+        <Combobox.Item value="apple">사과</Combobox.Item>
       </ComboboxContext.Provider>
     ));
 
@@ -76,13 +65,4 @@ describe("ComboboxItem component", () => {
     expect(closeDropdown).toHaveBeenCalled();
   });
 
-  it("sets data-combobox-item attribute", () => {
-    render(() => (
-      <ComboboxContext.Provider value={createMockContext()}>
-        <ComboboxItem value="apple">사과</ComboboxItem>
-      </ComboboxContext.Provider>
-    ));
-
-    expect(document.querySelector("[data-combobox-item]")).not.toBeNull();
-  });
 });

package/tests/components/form-control/date-range-picker/DateRangePicker.spec.tsx

@@ -2,7 +2,7 @@ import { render } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { DateOnly } from "@simplysm/core-common";
 import { DateRangePicker } from "../../../../src/components/form-control/date-range-picker/DateRangePicker";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("DateRangePicker component", () => {
@@ -15,23 +15,6 @@ describe("DateRangePicker component", () => {
   });
 
   describe("basic rendering", () => {
-    it("renders Select and DatePicker", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <DateRangePicker />
-        </I18nProvider></ConfigProvider>
-      ));
-
-      const wrapper = container.querySelector("[data-date-range-picker]");
-      expect(wrapper).toBeTruthy();
-
-      const select = wrapper?.querySelector("[data-select]");
-      expect(select).toBeTruthy();
-
-      const inputs = wrapper?.querySelectorAll("input");
-      expect(inputs?.length).toBeGreaterThan(0);
-    });
-
     it("defaults periodType to 'range'", () => {
       const { container } = render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
@@ -165,44 +148,4 @@ describe("DateRangePicker component", () => {
     });
   });
 
-  describe("disabled state", () => {
-    it("applies aria-disabled to Select", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateRangePicker disabled /></I18nProvider></ConfigProvider>);
-      const wrapper = container.querySelector("[data-date-range-picker]");
-
-      const select = wrapper?.querySelector("[data-select]");
-      const combobox = select?.querySelector("[role='combobox']") ?? select;
-
-      expect(
-        combobox?.getAttribute("aria-disabled") === "true" ||
-          select?.getAttribute("aria-disabled") === "true",
-      ).toBe(true);
-    });
-  });
-
-  describe("period type labels", () => {
-    it("displays 'Range' label for default periodType 'range'", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <DateRangePicker />
-        </I18nProvider></ConfigProvider>
-      ));
-
-      const wrapper = container.querySelector("[data-date-range-picker]");
-      const select = wrapper?.querySelector("[data-select]");
-
-      expect(select?.textContent).toContain("Range");
-    });
-  });
-
-  describe("class merging", () => {
-    it("applies custom class to wrapper", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateRangePicker class="my-custom-class" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.querySelector("[data-date-range-picker]") as HTMLElement;
-
-      expect(wrapper).toBeTruthy();
-      expect(wrapper.classList.contains("my-custom-class")).toBe(true);
-    });
-  });
 });

package/tests/components/form-control/field/DatePicker.spec.tsx

@@ -3,7 +3,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createSignal } from "solid-js";
 import { DateOnly } from "@simplysm/core-common";
 import { DatePicker } from "../../../../src/components/form-control/field/DatePicker";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("DatePicker component", () => {
@@ -11,41 +11,6 @@ describe("DatePicker component", () => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
   });
 
-  describe("basic rendering", () => {
-    it("renders input type=number when unit=year", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="year" /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.type).toBe("number");
-    });
-
-    it("renders input type=month when unit=month", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="month" /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.type).toBe("month");
-    });
-
-    it("renders input type=date when unit=date", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="date" /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.type).toBe("date");
-    });
-
-    it("defaults autocomplete to one-time-code", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.autocomplete).toBe("one-time-code");
-    });
-
-    it("defaults unit to date", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.type).toBe("date");
-    });
-  });
-
   describe("value conversion", () => {
     it("displays DateOnly in yyyy format for year type", () => {
       const dateOnly = new DateOnly(2025, 3, 15);
@@ -214,16 +179,11 @@ describe("DatePicker component", () => {
       expect(getByText("2025-03-15")).toBeTruthy();
     });
 
-    it("applies disabled style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker disabled value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>);
-      const div = container.querySelector("div.sd-date-field") as HTMLElement;
-      expect(div.classList.contains("bg-base-100")).toBe(true);
-    });
   });
 
   describe("readonly state", () => {
     it("renders as div when readonly=true", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker readonly value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker readOnly value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input:not([aria-hidden])");
       const div = container.querySelector("div.sd-date-field");
 
@@ -233,41 +193,16 @@ describe("DatePicker component", () => {
 
     it("displays value when readonly", () => {
       const { getByText } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="date" readonly value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>
+        <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="date" readOnly value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>
       ));
       expect(getByText("2025-03-15")).toBeTruthy();
     });
   });
 
-  describe("size option", () => {
-    it("applies small padding when size=sm", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker size="sm" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("py-0.5")).toBe(true);
-    });
-
-    it("applies large padding when size=lg", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker size="lg" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("py-2")).toBe(true);
-    });
-  });
-
   describe("inset style", () => {
-    it("applies relative to outer and inset style to content when inset=true", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker inset /></I18nProvider></ConfigProvider>);
-      const outer = container.firstChild as HTMLElement;
-      expect(outer.classList.contains("relative")).toBe(true);
-      expect(outer.classList.contains("border-none")).toBe(false);
-
-      const contentDiv = outer.querySelector("[data-date-field-content]") as HTMLElement;
-      expect(contentDiv.classList.contains("border-none")).toBe(true);
-      expect(contentDiv.classList.contains("bg-primary-50")).toBe(true);
-    });
-
     it("shows content div and no input when inset + readonly", () => {
       const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider><DatePicker inset readonly value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>
+        <ConfigProvider clientName="test"><I18nProvider><DatePicker inset readOnly value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>
       ));
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
@@ -293,36 +228,13 @@ describe("DatePicker component", () => {
     });
 
     it("shows NBSP in content div when inset + empty value", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker inset readonly /></I18nProvider></ConfigProvider>);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker inset readOnly /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       const contentDiv = outer.querySelector("[data-date-field-content]") as HTMLElement;
       expect(contentDiv.textContent).toBe("\u00A0");
     });
   });
 
-  describe("dark mode style", () => {
-    it("applies dark mode border style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("dark:border-base-700")).toBe(true);
-    });
-
-    it("applies dark mode background style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("dark:bg-primary-950/30")).toBe(true);
-    });
-  });
-
-  describe("class merging", () => {
-    it("merges custom class with existing styles", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker class="my-custom-class" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("my-custom-class")).toBe(true);
-    });
-  });
-
   describe("validation", () => {
     it("sets error message when required and value is empty", () => {
       const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker required value={undefined} /></I18nProvider></ConfigProvider>);