@simplysm/solid 13.0.74 → 13.0.76

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

@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, fireEvent, screen } from "@solidjs/testing-library";
 import { createSignal } from "solid-js";
 import { NumberInput } from "../../../../src/components/form-control/field/NumberInput";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("NumberInput", () => {
@@ -10,42 +10,12 @@ describe("NumberInput", () => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
   });
 
-  describe("basic rendering", () => {
-    it("renders input element", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toBeInTheDocument();
-    });
-
-    it("sets inputmode to numeric", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveAttribute("inputmode", "numeric");
-    });
-
-    it("sets input type to text", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveAttribute("type", "text");
-    });
-
-    it("defaults autocomplete to one-time-code", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveAttribute("autocomplete", "one-time-code");
-    });
-  });
-
   describe("value conversion", () => {
     it("displays numeric value as string", () => {
       render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={12345} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
-      // comma is true by default, so commas are included
+      // useGrouping is true by default, so grouping separators are included
       expect(input).toHaveValue("12,345");
     });
 
@@ -113,36 +83,36 @@ describe("NumberInput", () => {
   });
 
   describe("display format", () => {
-    it("displays thousands comma when comma=true", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={1234567} comma={true} /></I18nProvider></ConfigProvider>);
+    it("displays thousands separator when useGrouping=true", () => {
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={1234567} useGrouping={true} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("1,234,567");
     });
 
-    it("displays without comma when comma=false", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={1234567} comma={false} /></I18nProvider></ConfigProvider>);
+    it("displays without separator when useGrouping=false", () => {
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={1234567} useGrouping={false} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("1234567");
     });
 
-    it("defaults comma to true", () => {
+    it("defaults useGrouping to true", () => {
       render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={1234567} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("1,234,567");
     });
 
-    it("sets minimum decimal digits with minDigits", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={100} minDigits={2} /></I18nProvider></ConfigProvider>);
+    it("sets minimum decimal digits with minimumFractionDigits", () => {
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={100} minimumFractionDigits={2} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("100.00");
     });
 
-    it("displays decimals longer than minDigits as-is", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={100.12345} minDigits={2} /></I18nProvider></ConfigProvider>);
+    it("displays decimals longer than minimumFractionDigits as-is", () => {
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={100.12345} minimumFractionDigits={2} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("100.12345");
@@ -160,58 +130,17 @@ describe("NumberInput", () => {
     });
 
     it("renders as div when readonly", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={5678} readonly /></I18nProvider></ConfigProvider>);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={5678} readOnly /></I18nProvider></ConfigProvider>);
 
       expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
       expect(screen.getByText("5,678")).toBeInTheDocument();
     });
 
-    it("applies disabled style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={100} disabled /></I18nProvider></ConfigProvider>);
-
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.className).toContain("bg-base-100");
-    });
-  });
-
-  describe("right alignment", () => {
-    it("aligns input to the right", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
-
-      const input = screen.getByRole("textbox");
-      expect(input.className).toContain("text-right");
-    });
-  });
-
-  describe("style options", () => {
-    it("applies small padding when size='sm'", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput size="sm" /></I18nProvider></ConfigProvider>);
-
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.className).toContain("px-1.5");
-    });
-
-    it("applies large padding when size='lg'", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput size="lg" /></I18nProvider></ConfigProvider>);
-
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.className).toContain("px-3");
-    });
-
-    it("applies inset style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput inset /></I18nProvider></ConfigProvider>);
-
-      // outer div is relative when inset, inner content div has border-none
-      const outer = container.firstChild as HTMLElement;
-      expect(outer.classList.contains("relative")).toBe(true);
-      const contentDiv = outer.querySelector("[data-number-field-content]") as HTMLElement;
-      expect(contentDiv.className).toContain("border-none");
-    });
   });
 
   describe("inset dual-element", () => {
     it("shows content div and no input when inset + readonly", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput inset readonly value={1234} /></I18nProvider></ConfigProvider>);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput inset readOnly value={1234} /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
 
@@ -234,15 +163,8 @@ describe("NumberInput", () => {
       expect(input).toBeTruthy();
     });
 
-    it("applies right alignment in inset + readonly", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput inset readonly value={100} /></I18nProvider></ConfigProvider>);
-      const outer = container.firstChild as HTMLElement;
-      const contentDiv = outer.querySelector("[data-number-field-content]") as HTMLElement;
-      expect(contentDiv.classList.contains("justify-end")).toBe(true);
-    });
-
     it("shows NBSP in content div when inset + empty value", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput inset readonly /></I18nProvider></ConfigProvider>);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput inset readOnly /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       const contentDiv = outer.querySelector("[data-number-field-content]") as HTMLElement;
       expect(contentDiv.textContent).toBe("\u00A0");
@@ -271,15 +193,6 @@ describe("NumberInput", () => {
     });
   });
 
-  describe("placeholder", () => {
-    it("displays placeholder", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput placeholder="숫자를 입력하세요" /></I18nProvider></ConfigProvider>);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveAttribute("placeholder", "숫자를 입력하세요");
-    });
-  });
-
   describe("validation", () => {
     it("sets error message when required and value is empty", () => {
       const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput required value={undefined} /></I18nProvider></ConfigProvider>);
@@ -318,38 +231,6 @@ describe("NumberInput", () => {
   });
 
   describe("Prefix slot", () => {
-    it("renders NumberInput.Prefix slot", () => {
-      render(() => (
-        <ConfigProvider clientName="test"><I18nProvider><NumberInput>
-          <NumberInput.Prefix>
-            <span data-testid="prefix">₩</span>
-          </NumberInput.Prefix>
-        </NumberInput></I18nProvider></ConfigProvider>
-      ));
-
-      expect(document.querySelector('[data-testid="prefix"]')).not.toBeNull();
-    });
-
-    it("applies gap class when Prefix slot is used", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider><NumberInput>
-          <NumberInput.Prefix>
-            <span>₩</span>
-          </NumberInput.Prefix>
-        </NumberInput></I18nProvider></ConfigProvider>
-      ));
-
-      const wrapper = container.querySelector("[data-number-field]") as HTMLElement;
-      expect(wrapper.className).toContain("gap-");
-    });
-
-    it("does not apply gap class without Prefix slot", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
-
-      const wrapper = container.querySelector("[data-number-field]") as HTMLElement;
-      expect(wrapper.className).not.toContain("gap-");
-    });
-
     it("renders Prefix slot when disabled", () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider><NumberInput disabled value={100}>

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

@@ -2,7 +2,7 @@ import { render, fireEvent } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createSignal } from "solid-js";
 import { TextInput } from "../../../../src/components/form-control/field/TextInput";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("TextInput component", () => {
@@ -10,63 +10,7 @@ describe("TextInput component", () => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
   });
 
-  describe("basic rendering", () => {
-    it("renders input element", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input");
-      expect(input).toBeTruthy();
-    });
-
-    it("defaults type to text", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.type).toBe("text");
-    });
-
-    it("renders password input when type=password", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput type="password" /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.type).toBe("password");
-    });
-
-    it("renders email input when type=email", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput type="email" /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.type).toBe("email");
-    });
-
-    it("applies placeholder to input", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput placeholder="Enter text" /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.placeholder).toBe("Enter text");
-    });
-
-    it("applies title to input", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput title="Input title" /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.title).toBe("Input title");
-    });
-
-    it("defaults autocomplete to one-time-code", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.autocomplete).toBe("one-time-code");
-    });
-
-    it("applies explicitly specified autocomplete value", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput autocomplete="email" /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.autocomplete).toBe("email");
-    });
-  });
-
   describe("controlled pattern", () => {
-    it("displays value prop in input", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput value="Hello" /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.value).toBe("Hello");
-    });
-
     it("calls onValueChange on input", () => {
       const handleChange = vi.fn();
       const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput value="" onValueChange={handleChange} /></I18nProvider></ConfigProvider>);
@@ -115,17 +59,11 @@ describe("TextInput component", () => {
       const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput disabled value="Disabled text" /></I18nProvider></ConfigProvider>);
       expect(getByText("Disabled text")).toBeTruthy();
     });
-
-    it("applies disabled style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput disabled value="Text" /></I18nProvider></ConfigProvider>);
-      const div = container.querySelector("div.sd-text-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><TextInput readonly value="Readonly text" /></I18nProvider></ConfigProvider>);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput readOnly value="Readonly text" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input:not([aria-hidden])");
       const div = container.querySelector("div.sd-text-field");
 
@@ -134,7 +72,7 @@ describe("TextInput component", () => {
     });
 
     it("displays value when readonly", () => {
-      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput readonly value="Readonly text" /></I18nProvider></ConfigProvider>);
+      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput readOnly value="Readonly text" /></I18nProvider></ConfigProvider>);
       expect(getByText("Readonly text")).toBeTruthy();
     });
   });
@@ -160,31 +98,9 @@ describe("TextInput component", () => {
     });
   });
 
-  describe("size option", () => {
-    it("applies small padding when size=sm", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput 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><TextInput size="lg" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("py-2")).toBe(true);
-    });
-  });
-
   describe("inset style", () => {
-    it("removes border and applies inset background when inset=true", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput inset /></I18nProvider></ConfigProvider>);
-      const outer = container.firstChild as HTMLElement;
-      const contentDiv = outer.querySelector("[data-text-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><TextInput inset readonly value="Hello" /></I18nProvider></ConfigProvider>);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput inset readOnly value="Hello" /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
 
@@ -210,7 +126,7 @@ describe("TextInput component", () => {
     });
 
     it("shows NBSP in content div when inset + empty value", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput inset readonly /></I18nProvider></ConfigProvider>);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput inset readOnly /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       const contentDiv = outer.querySelector("[data-text-field-content]") as HTMLElement;
       expect(contentDiv.textContent).toBe("\u00A0");
@@ -218,7 +134,7 @@ describe("TextInput component", () => {
 
     it("content div is always in DOM when toggling inset + readonly/editable", () => {
       const [readonly, setReadonly] = createSignal(true);
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput inset readonly={readonly()} value="Test" /></I18nProvider></ConfigProvider>);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput inset readOnly={readonly()} value="Test" /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
 
       let contentDiv = outer.querySelector("[data-text-field-content]");
@@ -232,37 +148,6 @@ describe("TextInput component", () => {
     });
   });
 
-  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><TextInput class="my-custom-class" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("my-custom-class")).toBe(true);
-    });
-  });
-
-  describe("default style", () => {
-    it("applies default border style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("border")).toBe(true);
-      expect(wrapper.classList.contains("border-base-200")).toBe(true);
-    });
-
-    it("changes border color on focus", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("focus-within:border-primary-500")).toBe(true);
-    });
-
-    it("applies dark mode style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("dark:border-base-700")).toBe(true);
-      expect(wrapper.classList.contains("dark:bg-primary-950/30")).toBe(true);
-    });
-  });
-
   describe("validation", () => {
     it("sets error message in hidden input when required and empty", () => {
       const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput required value="" /></I18nProvider></ConfigProvider>);
@@ -317,31 +202,4 @@ describe("TextInput component", () => {
       expect(hiddenInput.validationMessage).toBe("This is a required field");
     });
   });
-
-  describe("Prefix slot", () => {
-    it("renders TextInput.Prefix slot", () => {
-      render(() => (
-        <ConfigProvider clientName="test"><I18nProvider><TextInput>
-          <TextInput.Prefix>
-            <span data-testid="prefix">P</span>
-          </TextInput.Prefix>
-        </TextInput></I18nProvider></ConfigProvider>
-      ));
-
-      expect(document.querySelector('[data-testid="prefix"]')).not.toBeNull();
-    });
-
-    it("applies gap class when Prefix slot is used", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider><TextInput>
-          <TextInput.Prefix>
-            <span>P</span>
-          </TextInput.Prefix>
-        </TextInput></I18nProvider></ConfigProvider>
-      ));
-
-      const wrapper = container.querySelector("[data-text-field]") as HTMLElement;
-      expect(wrapper.className).toContain("gap-");
-    });
-  });
 });

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

@@ -2,7 +2,7 @@ import { render, fireEvent } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createSignal } from "solid-js";
 import { Textarea } from "../../../../src/components/form-control/field/Textarea";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("Textarea component", () => {
@@ -10,33 +10,7 @@ describe("Textarea component", () => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
   });
 
-  describe("basic rendering", () => {
-    it("renders textarea element", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea /></I18nProvider></ConfigProvider>);
-      const textarea = container.querySelector("textarea");
-      expect(textarea).toBeTruthy();
-    });
-
-    it("applies placeholder to textarea", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea placeholder="내용을 입력하세요" /></I18nProvider></ConfigProvider>);
-      const textarea = container.querySelector("textarea") as HTMLTextAreaElement;
-      expect(textarea.placeholder).toBe("내용을 입력하세요");
-    });
-
-    it("applies title to textarea", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea title="Textarea title" /></I18nProvider></ConfigProvider>);
-      const textarea = container.querySelector("textarea") as HTMLTextAreaElement;
-      expect(textarea.title).toBe("Textarea title");
-    });
-  });
-
   describe("controlled pattern", () => {
-    it("displays value prop in textarea", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea value="Hello" /></I18nProvider></ConfigProvider>);
-      const textarea = container.querySelector("textarea") as HTMLTextAreaElement;
-      expect(textarea.value).toBe("Hello");
-    });
-
     it("calls onValueChange on input", () => {
       const handleChange = vi.fn();
       const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea value="" onValueChange={handleChange} /></I18nProvider></ConfigProvider>);
@@ -82,53 +56,24 @@ describe("Textarea component", () => {
       const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea disabled value="Disabled text" /></I18nProvider></ConfigProvider>);
       expect(getByText("Disabled text")).toBeTruthy();
     });
-
-    it("applies disabled style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea disabled value="Text" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("bg-base-100")).toBe(true);
-    });
   });
 
   describe("readonly state", () => {
     it("does not render textarea when readonly=true", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea readonly value="Readonly text" /></I18nProvider></ConfigProvider>);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea readOnly value="Readonly text" /></I18nProvider></ConfigProvider>);
       const textarea = container.querySelector("textarea");
       expect(textarea).toBeFalsy();
     });
 
     it("displays value when readonly", () => {
-      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea readonly value="Readonly text" /></I18nProvider></ConfigProvider>);
+      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea readOnly value="Readonly text" /></I18nProvider></ConfigProvider>);
       expect(getByText("Readonly text")).toBeTruthy();
     });
   });
 
-  describe("size option", () => {
-    it("applies small padding when size=sm", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea 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><Textarea size="lg" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("py-2")).toBe(true);
-    });
-  });
-
   describe("inset style", () => {
-    it("removes border and applies inset background when inset=true", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea inset /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("relative")).toBe(true);
-      const content = wrapper.querySelector("[data-textarea-field-content]") as HTMLElement;
-      expect(content.classList.contains("border-none")).toBe(true);
-      expect(content.classList.contains("bg-primary-50")).toBe(true);
-    });
-
     it("shows content div and no textarea when inset + readonly", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea inset readonly value="Hello" /></I18nProvider></ConfigProvider>);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea inset readOnly value="Hello" /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
 
@@ -153,22 +98,13 @@ describe("Textarea component", () => {
     });
 
     it("shows NBSP in content div when inset + empty value", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea inset readonly /></I18nProvider></ConfigProvider>);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea inset readOnly /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       const contentDiv = outer.querySelector("[data-textarea-field-content]") as HTMLElement;
       expect(contentDiv.textContent).toContain("\u00A0");
     });
   });
 
-  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><Textarea class="my-custom-class" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("my-custom-class")).toBe(true);
-    });
-  });
-
   describe("auto height adjustment", () => {
     it("renders hidden div for height measurement", () => {
       const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea value="Test" /></I18nProvider></ConfigProvider>);