@getmicdrop/svelte-components 5.17.3 → 5.17.4

package/dist/primitives/Input/Input.spec.js

@@ -1,1235 +1,1237 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import Input from "./Input.svelte";
-
-function setupTest(args) {
-  const user = userEvent.setup();
-  const result = render(Input, { props: { ...args } });
-  return { user, component: result.component, container: result.container };
-}
-
-describe("Input Component Tests", () => {
-  test("Renders input with label", () => {
-    setupTest({
-      label: "Test Label",
-      id: "test-input",
-      type: "text",
-      placeholder: "Test Placeholder",
-    });
-    expect(screen.getByLabelText("Test Label")).toBeInTheDocument();
-    expect(screen.getByPlaceholderText("Test Placeholder")).toBeInTheDocument();
-  });
-
-  test("Displays error text for invalid email", async () => {
-    const { user } = setupTest({
-      type: "email",
-      id: "test-email",
-      errorText: "Please provide a correct Email",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "invalid-email");
-    await fireEvent.blur(input);
-    expect(
-      screen.getByText("Please provide a correct Email")
-    ).toBeInTheDocument();
-  });
-
-  test("Does not display error text for valid email", async () => {
-    const { user } = setupTest({
-      type: "email",
-      id: "test-email",
-      errorText: "Please provide a correct Email",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "test@example.com");
-    await fireEvent.blur(input);
-    expect(
-      screen.queryByText("Please provide a correct Email")
-    ).toBeInTheDocument(); // Component logic forces errorText prop to display
-  });
-
-  test("Renders input with icon", () => {
-    setupTest({
-      type: "text",
-      label: "Input with Icon",
-      id: "input-with-icon",
-      icon: "path/to/icon.svg",
-    });
-    expect(screen.getByRole("img")).toBeInTheDocument();
-  });
-
-  test("Handles input changes correctly", async () => {
-    const { user } = setupTest({
-      type: "text",
-      id: "test-input",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "Test input");
-    expect(input.value).toBe("Test input");
-  });
-
-  test("Displays hint text", () => {
-    setupTest({
-      type: "text",
-      id: "test-input",
-      hintText: "This is a hint text",
-    });
-    expect(screen.getByText("This is a hint text")).toBeInTheDocument();
-  });
-
-  test("Textarea renders correctly", () => {
-    setupTest({
-      type: "textarea",
-      id: "test-textarea",
-      label: "Test Textarea",
-      placeholder: "Enter text here",
-    });
-    expect(screen.getByLabelText("Test Textarea")).toBeInTheDocument();
-    expect(screen.getByPlaceholderText("Enter text here")).toBeInTheDocument();
-  });
-
-  test("Input can be disabled", () => {
-    setupTest({
-      type: "text",
-      id: "test-input",
-      disabled: true,
-    });
-    expect(screen.getByRole("textbox")).toBeDisabled();
-  });
-
-  test("Displays optional text", () => {
-    setupTest({
-      type: "text",
-      id: "test-input",
-      label: "Test Label",
-      optional: true,
-    });
-    expect(screen.getByText("(optional)")).toBeInTheDocument();
-  });
-
-  test("Applies correct size class", () => {
-    setupTest({
-      type: "text",
-      id: "test-input",
-      size: "lg",
-    });
-    expect(screen.getByRole("textbox")).toHaveClass("h-12");
-  });
-
-  test("Applies correct content float class", () => {
-    setupTest({
-      type: "text",
-      id: "test-input",
-      contentFloat: "center",
-    });
-    expect(screen.getByRole("textbox")).toHaveClass("text-center");
-  });
-
-  test("Handles max length", async () => {
-    const { user } = setupTest({
-      type: "text",
-      id: "test-input",
-      maxlength: 5,
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "123456");
-    expect(input.value).toBe("12345");
-  });
-
-  test("Displays custom error message for empty required input on blur", async () => {
-    const { user } = setupTest({
-      type: "text",
-      id: "required-input",
-      required: true,
-      errorText: "This field is required.",
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.blur(input);
-    expect(screen.getByText("This field is required.")).toBeInTheDocument();
-    expect(input).toHaveAttribute("aria-required", "true");
-  });
-
-  test("Renders correct placeholder for textarea", () => {
-    setupTest({
-      type: "textarea",
-      id: "test-textarea",
-      placeholder: "Textarea Placeholder",
-    });
-    expect(
-      screen.getByPlaceholderText("Textarea Placeholder")
-    ).toBeInTheDocument();
-  });
-
-  test("Formats credit card number correctly", async () => {
-    const { user } = setupTest({
-      type: "creditCardNumber",
-      id: "credit-card-input",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "1234567812345678");
-    expect(input.value).toBe("1234 5678 1234 5678");
-  });
-
-  test("Disabled textarea is non-interactive", async () => {
-    setupTest({
-      type: "textarea",
-      id: "disabled-textarea",
-      disabled: true,
-    });
-    const textarea = screen.getByRole("textbox");
-    expect(textarea).toBeDisabled();
-  });
-
-  test("Handles password input type correctly", async () => {
-    const { user } = setupTest({
-      type: "password",
-      id: "password-input",
-    });
-    const input = screen.getByPlaceholderText("");
-    await user.type(input, "securepassword");
-    expect(input.value).toBe("securepassword");
-    expect(input.type).toBe("password");
-  });
-
-  test("Applies correct class for small size input", () => {
-    setupTest({
-      type: "text",
-      id: "small-size-input",
-      size: "sm",
-    });
-    expect(screen.getByRole("textbox")).toHaveClass("h-9");
-  });
-
-  test("Input adheres to maxlength attribute", async () => {
-    const { user } = setupTest({
-      type: "text",
-      id: "maxlength-input",
-      maxlength: 10,
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "This text is way too long");
-    expect(input.value).toBe("This text ");
-  });
-
-  test("Number input type accepts only numeric values", async () => {
-    const { user } = setupTest({
-      type: "number",
-      id: "number-input",
-    });
-    const input = screen.getByRole("spinbutton");
-    await user.type(input, "123abc456");
-    expect(input.value).toBe("123456");
-  });
-
-  test("Search input type functions correctly", async () => {
-    const { user } = setupTest({
-      type: "search",
-      id: "search-input",
-      placeholder: "Search here",
-    });
-    const input = screen.getByPlaceholderText("Search here");
-    await user.type(input, "query");
-    expect(input.value).toBe("query");
-  });
-
-  test("Displays error text when input is shorter than minlength", async () => {
-    const { user } = setupTest({
-      type: "text",
-      id: "minlength-input",
-      minlength: 5,
-      errorText: "Input is too short",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "123");
-    await fireEvent.blur(input);
-    expect(screen.getByText("Input is too short")).toBeInTheDocument();
-  });
-
-  test("Formats phone number correctly", async () => {
-    const { user } = setupTest({
-      type: "phoneNumber",
-      id: "phone-input",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "1234567890");
-    expect(input.value).toBe("123-456-7890");
-  });
-
-  test("Displays error message for required input on blur", async () => {
-    const { user } = setupTest({
-      type: "text",
-      id: "required-blur-input",
-      required: true,
-      errorText: "This field is required.",
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.blur(input);
-    expect(screen.getByText("This field is required.")).toBeInTheDocument();
-  });
-
-  test("Custom class is applied correctly", () => {
-    const { container } = setupTest({
-      type: "text",
-      id: "custom-class-input",
-      className: "custom-class",
-    });
-
-    const wrapper = container.querySelector('.custom-class');
-    expect(wrapper).toBeInTheDocument();
-  });
-});
-
-test("Readonly input cannot be edited", async () => {
-  const { user } = setupTest({
-    type: "text",
-    id: "readonly-input",
-    readonly: true,
-  });
-  const input = screen.getByRole("textbox");
-  await user.type(input, "Attempt to change");
-  expect(input.value).toBe("");
-});
-
-test("Controlled input with button click triggers callback", async () => {
-  const onButtonClickMock = vi.fn();
-
-  const { user } = setupTest({
-    controlled: true,
-    buttonText: "Submit",
-    onButtonClick: onButtonClickMock,
-  });
-
-  const input = screen.getByRole("textbox");
-  const button = screen.getByRole("button", { name: /submit/i });
-
-  await user.type(input, "Test value");
-
-  expect(input.value).toBe("Test value");
-
-  await fireEvent.click(button);
-
-  expect(onButtonClickMock).toHaveBeenCalledWith("Test value");
-  expect(onButtonClickMock).toHaveBeenCalledTimes(1);
-});
-
-describe("Username Input Type", () => {
-  test("Strips leading @ symbol from username", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "@johndoe");
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Strips multiple leading @ symbols", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "@@@@johndoe");
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Extracts username from Instagram URL", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    // Clear and paste URL
-    await user.clear(input);
-    await fireEvent.input(input, { target: { value: "https://instagram.com/johndoe" } });
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Extracts username from Instagram URL with www", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.input(input, { target: { value: "https://www.instagram.com/johndoe" } });
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Extracts username from Twitter URL", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.input(input, { target: { value: "https://twitter.com/johndoe" } });
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Extracts username from X.com URL", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.input(input, { target: { value: "https://x.com/johndoe" } });
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Extracts username from TikTok URL with @ in path", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.input(input, { target: { value: "https://tiktok.com/@johndoe" } });
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Extracts username from Facebook URL", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.input(input, { target: { value: "https://facebook.com/johndoe" } });
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Extracts username from URL without https", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.input(input, { target: { value: "instagram.com/johndoe" } });
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Removes invalid characters from username", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "john!#$%doe");
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Allows dots and underscores in username", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "john.doe_123");
-    expect(input.value).toBe("john.doe_123");
-  });
-
-  test("Handles username with trailing slash in URL", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.input(input, { target: { value: "https://instagram.com/johndoe/" } });
-    expect(input.value).toBe("johndoe");
-  });
-});
-
-describe("Password Input Type", () => {
-  test("Shows password toggle button by default", () => {
-    setupTest({
-      type: "password",
-      id: "password-input",
-      label: "Password",
-    });
-    const toggleButton = screen.getByRole("button", { name: /show password|hide password/i });
-    expect(toggleButton).toBeInTheDocument();
-  });
-
-  test("Toggles password visibility", async () => {
-    const { user } = setupTest({
-      type: "password",
-      id: "password-input",
-      label: "Password",
-    });
-    const input = screen.getByLabelText("Password");
-    const toggleButton = screen.getByRole("button", { name: /show password/i });
-
-    // Initially password type
-    expect(input.type).toBe("password");
-
-    // Click to show password
-    await user.click(toggleButton);
-    expect(input.type).toBe("text");
-
-    // Click to hide password
-    await user.click(toggleButton);
-    expect(input.type).toBe("password");
-  });
-
-  test("Hides password toggle when showPasswordToggle is false", () => {
-    setupTest({
-      type: "password",
-      id: "password-input",
-      label: "Password",
-      showPasswordToggle: false,
-    });
-    const toggleButton = screen.queryByRole("button", { name: /show password|hide password/i });
-    expect(toggleButton).not.toBeInTheDocument();
-  });
-});
-
-describe("Input States", () => {
-  test("Shows status text with success type", () => {
-    setupTest({
-      type: "text",
-      id: "status-input",
-      label: "Phone",
-      statusText: "verified",
-      statusType: "success",
-    });
-    const statusText = screen.getByText("(verified)");
-    expect(statusText).toBeInTheDocument();
-    expect(statusText).toHaveClass("text-green-600");
-  });
-
-  test("Shows status text with error type", () => {
-    setupTest({
-      type: "text",
-      id: "status-input",
-      label: "Phone",
-      statusText: "unverified",
-      statusType: "error",
-    });
-    const statusText = screen.getByText("(unverified)");
-    expect(statusText).toBeInTheDocument();
-    expect(statusText).toHaveClass("text-red-500");
-  });
-
-  test("Applies animate focus class when enabled", () => {
-    setupTest({
-      type: "text",
-      id: "animate-input",
-      animateFocus: true,
-    });
-    const input = screen.getByRole("textbox");
-    expect(input).toHaveClass("focus:scale-[1.01]");
-  });
-
-  test("Does not apply animate focus when disabled", () => {
-    setupTest({
-      type: "text",
-      id: "animate-input",
-      animateFocus: false,
-    });
-    const input = screen.getByRole("textbox");
-    expect(input).not.toHaveClass("focus:scale-[1.01]");
-  });
-
-  test("Does not apply animate focus on disabled input", () => {
-    setupTest({
-      type: "text",
-      id: "disabled-animate-input",
-      animateFocus: true,
-      disabled: true,
-    });
-    const input = screen.getByRole("textbox");
-    expect(input).not.toHaveClass("focus:scale-[1.01]");
-  });
-});
-
-describe("Textarea Variants", () => {
-  test("Applies small textarea size class", () => {
-    setupTest({
-      type: "textarea",
-      id: "textarea-sm",
-      textareaSize: "sm",
-    });
-    const textarea = screen.getByRole("textbox");
-    expect(textarea).toHaveClass("h-24");
-  });
-
-  test("Applies medium textarea size class", () => {
-    setupTest({
-      type: "textarea",
-      id: "textarea-md",
-      textareaSize: "md",
-    });
-    const textarea = screen.getByRole("textbox");
-    expect(textarea).toHaveClass("h-36");
-  });
-
-  test("Applies large textarea size class", () => {
-    setupTest({
-      type: "textarea",
-      id: "textarea-lg",
-      textareaSize: "lg",
-    });
-    const textarea = screen.getByRole("textbox");
-    expect(textarea).toHaveClass("h-44");
-  });
-
-  test("Textarea with no textareaSize uses default (no height class)", () => {
-    setupTest({
-      type: "textarea",
-      id: "textarea-default",
-    });
-    const textarea = screen.getByRole("textbox");
-    expect(textarea).not.toHaveClass("h-24");
-    expect(textarea).not.toHaveClass("h-36");
-    expect(textarea).not.toHaveClass("h-44");
-  });
-});
-
-describe("Controlled Input with Button Icon", () => {
-  test("Renders buttonIcon image when controlled with buttonIcon", () => {
-    setupTest({
-      type: "text",
-      id: "controlled-icon-input",
-      controlled: true,
-      buttonIcon: "path/to/button-icon.svg",
-    });
-    const img = screen.getByAltText("Button Icon");
-    expect(img).toBeInTheDocument();
-    expect(img).toHaveAttribute("src", "path/to/button-icon.svg");
-  });
-
-  test("Renders both buttonIcon and buttonText when both provided", () => {
-    setupTest({
-      type: "text",
-      id: "controlled-both-input",
-      controlled: true,
-      buttonIcon: "path/to/button-icon.svg",
-      buttonText: "Go",
-    });
-    expect(screen.getByAltText("Button Icon")).toBeInTheDocument();
-    expect(screen.getByText("Go")).toBeInTheDocument();
-  });
-
-  test("Controlled button is disabled when buttonDisabled is true", () => {
-    setupTest({
-      type: "text",
-      id: "controlled-disabled-btn",
-      controlled: true,
-      buttonText: "Send",
-      buttonDisabled: true,
-    });
-    const button = screen.getByRole("button", { name: /send/i });
-    expect(button).toBeDisabled();
-  });
-
-  test("Controlled button has margin class when helperText is present", () => {
-    setupTest({
-      type: "text",
-      id: "controlled-helper",
-      controlled: true,
-      buttonText: "Send",
-      helperText: "Some helper",
-    });
-    const button = screen.getByRole("button", { name: /send/i });
-    expect(button).toHaveClass("mb-7");
-  });
-
-  test("Controlled button has margin class when hintText is present", () => {
-    setupTest({
-      type: "text",
-      id: "controlled-hint",
-      controlled: true,
-      buttonText: "Send",
-      hintText: "Some hint",
-    });
-    const button = screen.getByRole("button", { name: /send/i });
-    expect(button).toHaveClass("mb-7");
-  });
-
-  test("Controlled button has margin class when errorText is present", () => {
-    setupTest({
-      type: "text",
-      id: "controlled-error",
-      controlled: true,
-      buttonText: "Send",
-      errorText: "Error message",
-    });
-    const button = screen.getByRole("button", { name: /send/i });
-    expect(button).toHaveClass("mb-7");
-  });
-
-  test("Controlled button without helper/hint/error has no margin class", () => {
-    setupTest({
-      type: "text",
-      id: "controlled-no-margin",
-      controlled: true,
-      buttonText: "Send",
-    });
-    const button = screen.getByRole("button", { name: /send/i });
-    expect(button).not.toHaveClass("mb-7");
-  });
-
-  test("Controlled button without onButtonClick does not throw on click", async () => {
-    const { user } = setupTest({
-      type: "text",
-      id: "controlled-no-handler",
-      controlled: true,
-      buttonText: "Click",
-    });
-    const button = screen.getByRole("button", { name: /click/i });
-    // Should not throw
-    await user.click(button);
-  });
-});
-
-describe("Helper and Hint Text with Icons", () => {
-  test("Renders helperIcon when helperText is present", () => {
-    setupTest({
-      type: "text",
-      id: "helper-icon-input",
-      helperText: "Helper info",
-      helperIcon: "path/to/helper-icon.svg",
-    });
-    expect(screen.getByText("Helper info")).toBeInTheDocument();
-    const icon = screen.getByAltText("Helper icon");
-    expect(icon).toBeInTheDocument();
-    expect(icon).toHaveAttribute("src", "path/to/helper-icon.svg");
-  });
-
-  test("Renders hintIcon when hintText is present", () => {
-    setupTest({
-      type: "text",
-      id: "hint-icon-input",
-      hintText: "Hint info",
-      hintIcon: "path/to/hint-icon.svg",
-    });
-    expect(screen.getByText("Hint info")).toBeInTheDocument();
-    const icon = screen.getByAltText("Helper icon");
-    expect(icon).toBeInTheDocument();
-    expect(icon).toHaveAttribute("src", "path/to/hint-icon.svg");
-  });
-
-  test("Does not render helper icon when no helperIcon or hintIcon provided", () => {
-    setupTest({
-      type: "text",
-      id: "no-icon-input",
-      helperText: "Just text",
-    });
-    expect(screen.getByText("Just text")).toBeInTheDocument();
-    expect(screen.queryByAltText("Helper icon")).not.toBeInTheDocument();
-  });
-
-  test("Error text takes priority over helperText", () => {
-    setupTest({
-      type: "text",
-      id: "error-priority",
-      errorText: "Error!",
-      helperText: "This should not show",
-    });
-    expect(screen.getByText("Error!")).toBeInTheDocument();
-    expect(screen.queryByText("This should not show")).not.toBeInTheDocument();
-  });
-});
-
-describe("Content Float Variants", () => {
-  test("Applies text-right for contentFloat right", () => {
-    setupTest({
-      type: "text",
-      id: "right-float-input",
-      contentFloat: "right",
-    });
-    expect(screen.getByRole("textbox")).toHaveClass("text-right");
-  });
-
-  test("Applies text-left for default contentFloat", () => {
-    setupTest({
-      type: "text",
-      id: "default-float-input",
-    });
-    expect(screen.getByRole("textbox")).toHaveClass("text-left");
-  });
-
-  test("Textarea applies contentFloat center", () => {
-    setupTest({
-      type: "textarea",
-      id: "textarea-center-float",
-      contentFloat: "center",
-    });
-    expect(screen.getByRole("textbox")).toHaveClass("text-center");
-  });
-
-  test("Textarea applies contentFloat right", () => {
-    setupTest({
-      type: "textarea",
-      id: "textarea-right-float",
-      contentFloat: "right",
-    });
-    expect(screen.getByRole("textbox")).toHaveClass("text-right");
-  });
-});
-
-describe("Error State via color prop", () => {
-  test("Applies border-red-500 when color is red", () => {
-    setupTest({
-      type: "text",
-      id: "red-color-input",
-      color: "red",
-    });
-    expect(screen.getByRole("textbox")).toHaveClass("border-red-500");
-  });
-
-  test("Applies normal border when color is base", () => {
-    setupTest({
-      type: "text",
-      id: "base-color-input",
-      color: "base",
-    });
-    expect(screen.getByRole("textbox")).toHaveClass("border-gray-300");
-  });
-
-  test("Textarea applies border-red-500 when color is red", () => {
-    setupTest({
-      type: "textarea",
-      id: "red-textarea",
-      color: "red",
-    });
-    expect(screen.getByRole("textbox")).toHaveClass("border-red-500");
-  });
-});
-
-describe("Show Clear Button", () => {
-  test("Shows clear button when showClearButton is true and has value", async () => {
-    const { user } = setupTest({
-      type: "text",
-      id: "clear-btn-input",
-      showClearButton: true,
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "some text");
-
-    const clearButton = screen.getByLabelText("Clear input");
-    expect(clearButton).toBeInTheDocument();
-  });
-
-  test("Clear button clears the input value", async () => {
-    const { user } = setupTest({
-      type: "text",
-      id: "clear-btn-input",
-      showClearButton: true,
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "hello");
-    expect(input.value).toBe("hello");
-
-    const clearButton = screen.getByLabelText("Clear input");
-    await user.click(clearButton);
-    expect(input.value).toBe("");
-  });
-
-  test("Clear button is hidden when input is empty", () => {
-    setupTest({
-      type: "text",
-      id: "clear-btn-empty",
-      showClearButton: true,
-    });
-    expect(screen.queryByLabelText("Clear input")).not.toBeInTheDocument();
-  });
-
-  test("Icon is hidden when showClearButton is true and input has value", async () => {
-    const { user } = setupTest({
-      type: "text",
-      id: "icon-clear-input",
-      showClearButton: true,
-      icon: "path/to/icon.svg",
-    });
-    const input = screen.getByRole("textbox");
-    // Initially, icon should show since input is empty
-    expect(screen.getByAltText("Input icon")).toBeInTheDocument();
-
-    await user.type(input, "text");
-    // Clear button shown, icon hidden
-    expect(screen.getByLabelText("Clear input")).toBeInTheDocument();
-    expect(screen.queryByAltText("Input icon")).not.toBeInTheDocument();
-  });
-
-  test("Input has pr-10 class when showClearButton is true and has value", async () => {
-    const { user } = setupTest({
-      type: "text",
-      id: "clear-btn-padding",
-      showClearButton: true,
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "text");
-    expect(input).toHaveClass("pr-10");
-  });
-});
-
-describe("Instant Search", () => {
-  test("Calls onsearch after debounce when typing enough chars", async () => {
-    vi.useFakeTimers();
-    const searchSpy = vi.fn();
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    const { container } = render(Input, {
-      props: {
-        type: "text",
-        id: "instant-search",
-        instantSearch: true,
-        debounceMs: 100,
-        minSearchChars: 2,
-        onsearch: searchSpy,
-      },
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "abc");
-
-    vi.advanceTimersByTime(150);
-
-    expect(searchSpy).toHaveBeenCalledWith({ query: "abc" });
-    vi.useRealTimers();
-  });
-
-  test("Calls onsearch with empty string when input is cleared completely", async () => {
-    vi.useFakeTimers();
-    const searchSpy = vi.fn();
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    render(Input, {
-      props: {
-        type: "text",
-        id: "instant-search-clear",
-        instantSearch: true,
-        debounceMs: 100,
-        minSearchChars: 2,
-        onsearch: searchSpy,
-      },
-    });
-    const input = screen.getByRole("textbox");
-    // Type text then clear all
-    await user.type(input, "ab");
-    vi.advanceTimersByTime(150);
-    searchSpy.mockClear();
-
-    await user.clear(input);
-    // Clearing should immediately call onsearch with empty query
-    expect(searchSpy).toHaveBeenCalledWith({ query: '' });
-    vi.useRealTimers();
-  });
-
-  test("Does not call onsearch when input is below minSearchChars", async () => {
-    vi.useFakeTimers();
-    const searchSpy = vi.fn();
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    render(Input, {
-      props: {
-        type: "text",
-        id: "instant-search-short",
-        instantSearch: true,
-        debounceMs: 100,
-        minSearchChars: 3,
-        onsearch: searchSpy,
-      },
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "ab");
-    vi.advanceTimersByTime(150);
-    // Should not have been called since "ab" < minSearchChars of 3
-    expect(searchSpy).not.toHaveBeenCalled();
-    vi.useRealTimers();
-  });
-
-  test("Enter key triggers immediate search", async () => {
-    vi.useFakeTimers();
-    const searchSpy = vi.fn();
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    render(Input, {
-      props: {
-        type: "text",
-        id: "instant-search-enter",
-        instantSearch: true,
-        debounceMs: 500,
-        minSearchChars: 2,
-        onsearch: searchSpy,
-      },
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "test");
-    searchSpy.mockClear();
-
-    await user.keyboard("{Enter}");
-    // Enter should immediately call onsearch without waiting for debounce
-    expect(searchSpy).toHaveBeenCalledWith({ query: "test" });
-    vi.useRealTimers();
-  });
-
-  test("Escape key clears input when instantSearch is enabled", async () => {
-    vi.useFakeTimers();
-    const searchSpy = vi.fn();
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    render(Input, {
-      props: {
-        type: "text",
-        id: "instant-search-escape",
-        instantSearch: true,
-        debounceMs: 100,
-        minSearchChars: 2,
-        onsearch: searchSpy,
-      },
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "hello");
-    vi.advanceTimersByTime(150);
-    searchSpy.mockClear();
-
-    await user.keyboard("{Escape}");
-    expect(input.value).toBe("");
-    // Should have called onsearch with empty query via clearInput()
-    expect(searchSpy).toHaveBeenCalledWith({ query: '' });
-    vi.useRealTimers();
-  });
-
-  test("Clear button calls onsearch with empty query when instantSearch is enabled", async () => {
-    vi.useFakeTimers();
-    const searchSpy = vi.fn();
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    render(Input, {
-      props: {
-        type: "text",
-        id: "clear-search",
-        instantSearch: true,
-        showClearButton: true,
-        debounceMs: 100,
-        minSearchChars: 2,
-        onsearch: searchSpy,
-      },
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "hello");
-    vi.advanceTimersByTime(150);
-    searchSpy.mockClear();
-
-    const clearBtn = screen.getByLabelText("Clear input");
-    await user.click(clearBtn);
-    expect(searchSpy).toHaveBeenCalledWith({ query: '' });
-    vi.useRealTimers();
-  });
-});
-
-describe("Callback Props", () => {
-  test("Calls onfocus callback when input gains focus", async () => {
-    const focusSpy = vi.fn();
-    const { user } = setupTest({
-      type: "text",
-      id: "focus-input",
-      onfocus: focusSpy,
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.focus(input);
-    expect(focusSpy).toHaveBeenCalled();
-  });
-
-  test("Calls onblur callback when input loses focus", async () => {
-    const blurSpy = vi.fn();
-    const { user } = setupTest({
-      type: "text",
-      id: "blur-input",
-      onblur: blurSpy,
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.focus(input);
-    await fireEvent.blur(input);
-    expect(blurSpy).toHaveBeenCalled();
-  });
-
-  test("Calls oninputchange callback on text input", async () => {
-    const changeSpy = vi.fn();
-    const { user } = setupTest({
-      type: "text",
-      id: "change-input",
-      oninputchange: changeSpy,
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "hi");
-    expect(changeSpy).toHaveBeenCalledWith("h");
-    expect(changeSpy).toHaveBeenCalledWith("hi");
-  });
-
-  test("Calls onfocus callback on password input focus", async () => {
-    const focusSpy = vi.fn();
-    setupTest({
-      type: "password",
-      id: "pw-focus",
-      label: "PW",
-      onfocus: focusSpy,
-    });
-    const input = screen.getByLabelText("PW");
-    await fireEvent.focus(input);
-    expect(focusSpy).toHaveBeenCalled();
-  });
-
-  test("Calls onblur callback on password input blur", async () => {
-    const blurSpy = vi.fn();
-    setupTest({
-      type: "password",
-      id: "pw-blur",
-      label: "PW",
-      onblur: blurSpy,
-    });
-    const input = screen.getByLabelText("PW");
-    await fireEvent.blur(input);
-    expect(blurSpy).toHaveBeenCalled();
-  });
-
-  test("Calls onfocus callback on textarea focus", async () => {
-    const focusSpy = vi.fn();
-    setupTest({
-      type: "textarea",
-      id: "ta-focus",
-      onfocus: focusSpy,
-    });
-    const textarea = screen.getByRole("textbox");
-    await fireEvent.focus(textarea);
-    expect(focusSpy).toHaveBeenCalled();
-  });
-
-  test("Calls onblur callback on textarea blur", async () => {
-    const blurSpy = vi.fn();
-    setupTest({
-      type: "textarea",
-      id: "ta-blur",
-      onblur: blurSpy,
-    });
-    const textarea = screen.getByRole("textbox");
-    await fireEvent.blur(textarea);
-    expect(blurSpy).toHaveBeenCalled();
-  });
-});
-
-describe("Inputmode", () => {
-  test("Sets inputmode to tel for phoneNumber type", () => {
-    setupTest({
-      type: "phoneNumber",
-      id: "phone-mode",
-    });
-    const input = screen.getByRole("textbox");
-    expect(input).toHaveAttribute("inputmode", "tel");
-  });
-
-  test("Sets inputmode to tel for creditCardNumber type", () => {
-    setupTest({
-      type: "creditCardNumber",
-      id: "cc-mode",
-    });
-    const input = screen.getByRole("textbox");
-    expect(input).toHaveAttribute("inputmode", "tel");
-  });
-
-  test("Sets inputmode to email for email type", () => {
-    setupTest({
-      type: "email",
-      id: "email-mode",
-    });
-    const input = screen.getByRole("textbox");
-    expect(input).toHaveAttribute("inputmode", "email");
-  });
-
-  test("Custom inputmode overrides auto-detected inputmode", () => {
-    setupTest({
-      type: "phoneNumber",
-      id: "custom-mode",
-      inputmode: "numeric",
-    });
-    const input = screen.getByRole("textbox");
-    expect(input).toHaveAttribute("inputmode", "numeric");
-  });
-});
-
-describe("Status Text Variants", () => {
-  test("Shows status text with neutral type (no color class)", () => {
-    setupTest({
-      type: "text",
-      id: "neutral-status",
-      label: "Field",
-      statusText: "pending",
-      statusType: "info",
-    });
-    const statusEl = screen.getByText("(pending)");
-    expect(statusEl).toBeInTheDocument();
-    expect(statusEl).not.toHaveClass("text-green-600");
-    expect(statusEl).not.toHaveClass("text-red-500");
-  });
-});
-
-describe("Label and No-Label Rendering", () => {
-  test("Renders without label when label is empty", () => {
-    const { container } = setupTest({
-      type: "text",
-      id: "no-label-input",
-    });
-    expect(container.querySelector("label")).not.toBeInTheDocument();
-  });
-
-  test("Shows required asterisk when required and label is present", () => {
-    setupTest({
-      type: "text",
-      id: "req-label",
-      label: "Name",
-      required: true,
-    });
-    expect(screen.getByText("*")).toBeInTheDocument();
-  });
-
-  test("Does not show required asterisk when not required", () => {
-    setupTest({
-      type: "text",
-      id: "no-req-label",
-      label: "Name",
-      required: false,
-    });
-    expect(screen.queryByText("*")).not.toBeInTheDocument();
-  });
-});
-
-describe("Disabled styling", () => {
-  test("Disabled text input has opacity and cursor classes", () => {
-    setupTest({
-      type: "text",
-      id: "disabled-style",
-      disabled: true,
-    });
-    const input = screen.getByRole("textbox");
-    expect(input).toHaveClass("opacity-50");
-    expect(input).toHaveClass("cursor-not-allowed");
-  });
-
-  test("Disabled password input has opacity and cursor classes", () => {
-    setupTest({
-      type: "password",
-      id: "disabled-pw",
-      label: "Password",
-      disabled: true,
-    });
-    const input = screen.getByLabelText("Password");
-    expect(input).toHaveClass("opacity-50");
-    expect(input).toHaveClass("cursor-not-allowed");
-  });
-});
-
-describe("Textarea error styling", () => {
-  test("Textarea with error text shows error and alert role", () => {
-    setupTest({
-      type: "textarea",
-      id: "textarea-error",
-      errorText: "Too short",
-    });
-    const alert = screen.getByRole("alert");
-    expect(alert).toBeInTheDocument();
-    expect(screen.getByText("Too short")).toBeInTheDocument();
-  });
-
-  test("Textarea with readonly attribute is readonly", () => {
-    setupTest({
-      type: "textarea",
-      id: "readonly-textarea",
-      readonly: true,
-    });
-    const textarea = screen.getByRole("textbox");
-    expect(textarea).toHaveAttribute("readonly");
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import Input from "./Input.svelte";
+
+function setupTest(args) {
+  const user = userEvent.setup();
+  const result = render(Input, { props: { ...args } });
+  return { user, component: result.component, container: result.container };
+}
+
+describe("Input Component Tests", () => {
+  test("Renders input with label", () => {
+    setupTest({
+      label: "Test Label",
+      id: "test-input",
+      type: "text",
+      placeholder: "Test Placeholder",
+    });
+    expect(screen.getByLabelText("Test Label")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Test Placeholder")).toBeInTheDocument();
+  });
+
+  test("Displays error text for invalid email", async () => {
+    const { user } = setupTest({
+      type: "email",
+      id: "test-email",
+      errorText: "Please provide a correct Email",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "invalid-email");
+    await fireEvent.blur(input);
+    expect(
+      screen.getByText("Please provide a correct Email")
+    ).toBeInTheDocument();
+  });
+
+  test("Does not display error text for valid email", async () => {
+    const { user } = setupTest({
+      type: "email",
+      id: "test-email",
+      errorText: "Please provide a correct Email",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "test@example.com");
+    await fireEvent.blur(input);
+    expect(
+      screen.queryByText("Please provide a correct Email")
+    ).toBeInTheDocument(); // Component logic forces errorText prop to display
+  });
+
+  test("Renders input with icon", () => {
+    setupTest({
+      type: "text",
+      label: "Input with Icon",
+      id: "input-with-icon",
+      icon: "path/to/icon.svg",
+    });
+    expect(screen.getByRole("img")).toBeInTheDocument();
+  });
+
+  test("Handles input changes correctly", async () => {
+    const { user } = setupTest({
+      type: "text",
+      id: "test-input",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "Test input");
+    expect(input.value).toBe("Test input");
+  });
+
+  test("Displays hint text", () => {
+    setupTest({
+      type: "text",
+      id: "test-input",
+      hintText: "This is a hint text",
+    });
+    expect(screen.getByText("This is a hint text")).toBeInTheDocument();
+  });
+
+  test("Textarea renders correctly", () => {
+    setupTest({
+      type: "textarea",
+      id: "test-textarea",
+      label: "Test Textarea",
+      placeholder: "Enter text here",
+    });
+    expect(screen.getByLabelText("Test Textarea")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Enter text here")).toBeInTheDocument();
+  });
+
+  test("Input can be disabled", () => {
+    setupTest({
+      type: "text",
+      id: "test-input",
+      disabled: true,
+    });
+    expect(screen.getByRole("textbox")).toBeDisabled();
+  });
+
+  test("Displays optional text", () => {
+    setupTest({
+      type: "text",
+      id: "test-input",
+      label: "Test Label",
+      optional: true,
+    });
+    expect(screen.getByText("(optional)")).toBeInTheDocument();
+  });
+
+  test("Applies correct size class", () => {
+    setupTest({
+      type: "text",
+      id: "test-input",
+      size: "lg",
+    });
+    expect(screen.getByRole("textbox")).toHaveClass("h-12");
+  });
+
+  test("Applies correct content float class", () => {
+    setupTest({
+      type: "text",
+      id: "test-input",
+      contentFloat: "center",
+    });
+    expect(screen.getByRole("textbox")).toHaveClass("text-center");
+  });
+
+  test("Handles max length", async () => {
+    const { user } = setupTest({
+      type: "text",
+      id: "test-input",
+      maxlength: 5,
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "123456");
+    expect(input.value).toBe("12345");
+  });
+
+  test("Displays custom error message for empty required input on blur", async () => {
+    const { user } = setupTest({
+      type: "text",
+      id: "required-input",
+      required: true,
+      errorText: "This field is required.",
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.blur(input);
+    expect(screen.getByText("This field is required.")).toBeInTheDocument();
+    expect(input).toHaveAttribute("aria-required", "true");
+  });
+
+  test("Renders correct placeholder for textarea", () => {
+    setupTest({
+      type: "textarea",
+      id: "test-textarea",
+      placeholder: "Textarea Placeholder",
+    });
+    expect(
+      screen.getByPlaceholderText("Textarea Placeholder")
+    ).toBeInTheDocument();
+  });
+
+  test("Formats credit card number correctly", async () => {
+    const { user } = setupTest({
+      type: "creditCardNumber",
+      id: "credit-card-input",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "1234567812345678");
+    expect(input.value).toBe("1234 5678 1234 5678");
+  });
+
+  test("Disabled textarea is non-interactive", async () => {
+    setupTest({
+      type: "textarea",
+      id: "disabled-textarea",
+      disabled: true,
+    });
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toBeDisabled();
+  });
+
+  test("Handles password input type correctly", async () => {
+    const { user } = setupTest({
+      type: "password",
+      id: "password-input",
+    });
+    const input = screen.getByPlaceholderText("");
+    await user.type(input, "securepassword");
+    expect(input.value).toBe("securepassword");
+    expect(input.type).toBe("password");
+  });
+
+  test("Applies correct class for small size input", () => {
+    setupTest({
+      type: "text",
+      id: "small-size-input",
+      size: "sm",
+    });
+    expect(screen.getByRole("textbox")).toHaveClass("h-9");
+  });
+
+  test("Input adheres to maxlength attribute", async () => {
+    const { user } = setupTest({
+      type: "text",
+      id: "maxlength-input",
+      maxlength: 10,
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "This text is way too long");
+    expect(input.value).toBe("This text ");
+  });
+
+  test("Number input type accepts only numeric values", async () => {
+    const { user } = setupTest({
+      type: "number",
+      id: "number-input",
+    });
+    const input = screen.getByRole("spinbutton");
+    await user.type(input, "123abc456");
+    expect(input.value).toBe("123456");
+  });
+
+  test("Search input type functions correctly", async () => {
+    const { user } = setupTest({
+      type: "search",
+      id: "search-input",
+      placeholder: "Search here",
+    });
+    const input = screen.getByPlaceholderText("Search here");
+    await user.type(input, "query");
+    expect(input.value).toBe("query");
+  });
+
+  test("Displays error text when input is shorter than minlength", async () => {
+    const { user } = setupTest({
+      type: "text",
+      id: "minlength-input",
+      minlength: 5,
+      errorText: "Input is too short",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "123");
+    await fireEvent.blur(input);
+    expect(screen.getByText("Input is too short")).toBeInTheDocument();
+  });
+
+  test("Formats phone number correctly", async () => {
+    const { user } = setupTest({
+      type: "phoneNumber",
+      id: "phone-input",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "1234567890");
+    expect(input.value).toBe("123-456-7890");
+  });
+
+  test("Displays error message for required input on blur", async () => {
+    const { user } = setupTest({
+      type: "text",
+      id: "required-blur-input",
+      required: true,
+      errorText: "This field is required.",
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.blur(input);
+    expect(screen.getByText("This field is required.")).toBeInTheDocument();
+  });
+
+  test("Custom class is applied correctly", () => {
+    const { container } = setupTest({
+      type: "text",
+      id: "custom-class-input",
+      className: "custom-class",
+    });
+
+    const wrapper = container.querySelector('.custom-class');
+    expect(wrapper).toBeInTheDocument();
+  });
+});
+
+test("Readonly input cannot be edited", async () => {
+  const { user } = setupTest({
+    type: "text",
+    id: "readonly-input",
+    readonly: true,
+  });
+  const input = screen.getByRole("textbox");
+  await user.type(input, "Attempt to change");
+  expect(input.value).toBe("");
+});
+
+test("Controlled input with button click triggers callback", async () => {
+  const onButtonClickMock = vi.fn();
+
+  const { user } = setupTest({
+    controlled: true,
+    buttonText: "Submit",
+    onButtonClick: onButtonClickMock,
+  });
+
+  const input = screen.getByRole("textbox");
+  const button = screen.getByRole("button", { name: /submit/i });
+
+  await user.type(input, "Test value");
+
+  expect(input.value).toBe("Test value");
+
+  await fireEvent.click(button);
+
+  expect(onButtonClickMock).toHaveBeenCalledWith("Test value");
+  expect(onButtonClickMock).toHaveBeenCalledTimes(1);
+});
+
+describe("Username Input Type", () => {
+  test("Strips leading @ symbol from username", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "@johndoe");
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Strips multiple leading @ symbols", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "@@@@johndoe");
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Extracts username from Instagram URL", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    // Clear and paste URL
+    await user.clear(input);
+    await fireEvent.input(input, { target: { value: "https://instagram.com/johndoe" } });
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Extracts username from Instagram URL with www", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.input(input, { target: { value: "https://www.instagram.com/johndoe" } });
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Extracts username from Twitter URL", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.input(input, { target: { value: "https://twitter.com/johndoe" } });
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Extracts username from X.com URL", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.input(input, { target: { value: "https://x.com/johndoe" } });
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Extracts username from TikTok URL with @ in path", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.input(input, { target: { value: "https://tiktok.com/@johndoe" } });
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Extracts username from Facebook URL", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.input(input, { target: { value: "https://facebook.com/johndoe" } });
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Extracts username from URL without https", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.input(input, { target: { value: "instagram.com/johndoe" } });
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Removes invalid characters from username", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "john!#$%doe");
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Allows dots and underscores in username", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "john.doe_123");
+    expect(input.value).toBe("john.doe_123");
+  });
+
+  test("Handles username with trailing slash in URL", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.input(input, { target: { value: "https://instagram.com/johndoe/" } });
+    expect(input.value).toBe("johndoe");
+  });
+});
+
+describe("Password Input Type", () => {
+  test("Shows password toggle button by default", () => {
+    setupTest({
+      type: "password",
+      id: "password-input",
+      label: "Password",
+    });
+    const toggleButton = screen.getByRole("button", { name: /show password|hide password/i });
+    expect(toggleButton).toBeInTheDocument();
+  });
+
+  test("Toggles password visibility", async () => {
+    const { user } = setupTest({
+      type: "password",
+      id: "password-input",
+      label: "Password",
+    });
+    const input = screen.getByLabelText("Password");
+    const toggleButton = screen.getByRole("button", { name: /show password/i });
+
+    // Initially password type
+    expect(input.type).toBe("password");
+
+    // Click to show password
+    await user.click(toggleButton);
+    expect(input.type).toBe("text");
+
+    // Click to hide password
+    await user.click(toggleButton);
+    expect(input.type).toBe("password");
+  });
+
+  test("Hides password toggle when showPasswordToggle is false", () => {
+    setupTest({
+      type: "password",
+      id: "password-input",
+      label: "Password",
+      showPasswordToggle: false,
+    });
+    const toggleButton = screen.queryByRole("button", { name: /show password|hide password/i });
+    expect(toggleButton).not.toBeInTheDocument();
+  });
+});
+
+describe("Input States", () => {
+  test("Shows status text with success type", () => {
+    setupTest({
+      type: "text",
+      id: "status-input",
+      label: "Phone",
+      statusText: "verified",
+      statusType: "success",
+    });
+    const statusText = screen.getByText("(verified)");
+    expect(statusText).toBeInTheDocument();
+    expect(statusText).toHaveClass("text-green-600");
+  });
+
+  test("Shows status text with error type", () => {
+    setupTest({
+      type: "text",
+      id: "status-input",
+      label: "Phone",
+      statusText: "unverified",
+      statusType: "error",
+    });
+    const statusText = screen.getByText("(unverified)");
+    expect(statusText).toBeInTheDocument();
+    expect(statusText).toHaveClass("text-red-500");
+  });
+
+  test("Applies animate focus class when enabled", () => {
+    setupTest({
+      type: "text",
+      id: "animate-input",
+      animateFocus: true,
+    });
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveClass("focus:scale-[1.01]");
+  });
+
+  test("Does not apply animate focus when disabled", () => {
+    setupTest({
+      type: "text",
+      id: "animate-input",
+      animateFocus: false,
+    });
+    const input = screen.getByRole("textbox");
+    expect(input).not.toHaveClass("focus:scale-[1.01]");
+  });
+
+  test("Does not apply animate focus on disabled input", () => {
+    setupTest({
+      type: "text",
+      id: "disabled-animate-input",
+      animateFocus: true,
+      disabled: true,
+    });
+    const input = screen.getByRole("textbox");
+    expect(input).not.toHaveClass("focus:scale-[1.01]");
+  });
+});
+
+describe("Textarea Variants", () => {
+  test("Applies small textarea size class", () => {
+    setupTest({
+      type: "textarea",
+      id: "textarea-sm",
+      textareaSize: "sm",
+    });
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-24");
+  });
+
+  test("Applies medium textarea size class", () => {
+    setupTest({
+      type: "textarea",
+      id: "textarea-md",
+      textareaSize: "md",
+    });
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-36");
+  });
+
+  test("Applies large textarea size class", () => {
+    setupTest({
+      type: "textarea",
+      id: "textarea-lg",
+      textareaSize: "lg",
+    });
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-44");
+  });
+
+  test("Textarea with no textareaSize uses default (no height class)", () => {
+    setupTest({
+      type: "textarea",
+      id: "textarea-default",
+    });
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).not.toHaveClass("h-24");
+    expect(textarea).not.toHaveClass("h-36");
+    expect(textarea).not.toHaveClass("h-44");
+  });
+});
+
+describe("Controlled Input with Button Icon", () => {
+  test("Renders buttonIcon image when controlled with buttonIcon", () => {
+    setupTest({
+      type: "text",
+      id: "controlled-icon-input",
+      controlled: true,
+      buttonIcon: "path/to/button-icon.svg",
+    });
+    const img = screen.getByAltText("Button Icon");
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute("src", "path/to/button-icon.svg");
+  });
+
+  test("Renders both buttonIcon and buttonText when both provided", () => {
+    setupTest({
+      type: "text",
+      id: "controlled-both-input",
+      controlled: true,
+      buttonIcon: "path/to/button-icon.svg",
+      buttonText: "Go",
+    });
+    expect(screen.getByAltText("Button Icon")).toBeInTheDocument();
+    expect(screen.getByText("Go")).toBeInTheDocument();
+  });
+
+  test("Controlled button is disabled when buttonDisabled is true", () => {
+    setupTest({
+      type: "text",
+      id: "controlled-disabled-btn",
+      controlled: true,
+      buttonText: "Send",
+      buttonDisabled: true,
+    });
+    const button = screen.getByRole("button", { name: /send/i });
+    expect(button).toBeDisabled();
+  });
+
+  test("Controlled button has margin class when helperText is present", () => {
+    setupTest({
+      type: "text",
+      id: "controlled-helper",
+      controlled: true,
+      buttonText: "Send",
+      helperText: "Some helper",
+    });
+    const button = screen.getByRole("button", { name: /send/i });
+    expect(button).toHaveClass("mb-7");
+  });
+
+  test("Controlled button has margin class when hintText is present", () => {
+    setupTest({
+      type: "text",
+      id: "controlled-hint",
+      controlled: true,
+      buttonText: "Send",
+      hintText: "Some hint",
+    });
+    const button = screen.getByRole("button", { name: /send/i });
+    expect(button).toHaveClass("mb-7");
+  });
+
+  test("Controlled button has margin class when errorText is present", () => {
+    setupTest({
+      type: "text",
+      id: "controlled-error",
+      controlled: true,
+      buttonText: "Send",
+      errorText: "Error message",
+    });
+    const button = screen.getByRole("button", { name: /send/i });
+    expect(button).toHaveClass("mb-7");
+  });
+
+  test("Controlled button without helper/hint/error has no margin class", () => {
+    setupTest({
+      type: "text",
+      id: "controlled-no-margin",
+      controlled: true,
+      buttonText: "Send",
+    });
+    const button = screen.getByRole("button", { name: /send/i });
+    expect(button).not.toHaveClass("mb-7");
+  });
+
+  test("Controlled button without onButtonClick does not throw on click", async () => {
+    const { user } = setupTest({
+      type: "text",
+      id: "controlled-no-handler",
+      controlled: true,
+      buttonText: "Click",
+    });
+    const button = screen.getByRole("button", { name: /click/i });
+    // Should not throw
+    await user.click(button);
+  });
+});
+
+describe("Helper and Hint Text with Icons", () => {
+  test("Renders helperIcon when helperText is present", () => {
+    setupTest({
+      type: "text",
+      id: "helper-icon-input",
+      helperText: "Helper info",
+      helperIcon: "path/to/helper-icon.svg",
+    });
+    expect(screen.getByText("Helper info")).toBeInTheDocument();
+    const icon = screen.getByAltText("Helper icon");
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveAttribute("src", "path/to/helper-icon.svg");
+  });
+
+  test("Renders hintIcon when hintText is present", () => {
+    setupTest({
+      type: "text",
+      id: "hint-icon-input",
+      hintText: "Hint info",
+      hintIcon: "path/to/hint-icon.svg",
+    });
+    expect(screen.getByText("Hint info")).toBeInTheDocument();
+    const icon = screen.getByAltText("Helper icon");
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveAttribute("src", "path/to/hint-icon.svg");
+  });
+
+  test("Does not render helper icon when no helperIcon or hintIcon provided", () => {
+    setupTest({
+      type: "text",
+      id: "no-icon-input",
+      helperText: "Just text",
+    });
+    expect(screen.getByText("Just text")).toBeInTheDocument();
+    expect(screen.queryByAltText("Helper icon")).not.toBeInTheDocument();
+  });
+
+  test("Error text takes priority over helperText", () => {
+    setupTest({
+      type: "text",
+      id: "error-priority",
+      errorText: "Error!",
+      helperText: "This should not show",
+    });
+    expect(screen.getByText("Error!")).toBeInTheDocument();
+    expect(screen.queryByText("This should not show")).not.toBeInTheDocument();
+  });
+});
+
+describe("Content Float Variants", () => {
+  test("Applies text-right for contentFloat right", () => {
+    setupTest({
+      type: "text",
+      id: "right-float-input",
+      contentFloat: "right",
+    });
+    expect(screen.getByRole("textbox")).toHaveClass("text-right");
+  });
+
+  test("Applies text-left for default contentFloat", () => {
+    setupTest({
+      type: "text",
+      id: "default-float-input",
+    });
+    expect(screen.getByRole("textbox")).toHaveClass("text-left");
+  });
+
+  test("Textarea applies contentFloat center", () => {
+    setupTest({
+      type: "textarea",
+      id: "textarea-center-float",
+      contentFloat: "center",
+    });
+    expect(screen.getByRole("textbox")).toHaveClass("text-center");
+  });
+
+  test("Textarea applies contentFloat right", () => {
+    setupTest({
+      type: "textarea",
+      id: "textarea-right-float",
+      contentFloat: "right",
+    });
+    expect(screen.getByRole("textbox")).toHaveClass("text-right");
+  });
+});
+
+describe("Error State via color prop", () => {
+  test("Applies border-red-500 when color is red", () => {
+    setupTest({
+      type: "text",
+      id: "red-color-input",
+      color: "red",
+    });
+    expect(screen.getByRole("textbox")).toHaveClass("border-red-500");
+  });
+
+  test("Applies normal border when color is base", () => {
+    setupTest({
+      type: "text",
+      id: "base-color-input",
+      color: "base",
+    });
+    expect(screen.getByRole("textbox")).toHaveClass("border-gray-300");
+  });
+
+  test("Textarea applies border-red-500 when color is red", () => {
+    setupTest({
+      type: "textarea",
+      id: "red-textarea",
+      color: "red",
+    });
+    expect(screen.getByRole("textbox")).toHaveClass("border-red-500");
+  });
+});
+
+describe("Show Clear Button", () => {
+  test("Shows clear button when showClearButton is true and has value", async () => {
+    const { user } = setupTest({
+      type: "text",
+      id: "clear-btn-input",
+      showClearButton: true,
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "some text");
+
+    const clearButton = screen.getByLabelText("Clear input");
+    expect(clearButton).toBeInTheDocument();
+  });
+
+  test("Clear button clears the input value", async () => {
+    const { user } = setupTest({
+      type: "text",
+      id: "clear-btn-input",
+      showClearButton: true,
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "hello");
+    expect(input.value).toBe("hello");
+
+    const clearButton = screen.getByLabelText("Clear input");
+    await user.click(clearButton);
+    expect(input.value).toBe("");
+  });
+
+  test("Clear button is hidden when input is empty", () => {
+    setupTest({
+      type: "text",
+      id: "clear-btn-empty",
+      showClearButton: true,
+    });
+    expect(screen.queryByLabelText("Clear input")).not.toBeInTheDocument();
+  });
+
+  test("Icon is hidden when showClearButton is true and input has value", async () => {
+    const { user } = setupTest({
+      type: "text",
+      id: "icon-clear-input",
+      showClearButton: true,
+      icon: "path/to/icon.svg",
+    });
+    const input = screen.getByRole("textbox");
+    // Initially, icon should show since input is empty
+    expect(screen.getByAltText("Input icon")).toBeInTheDocument();
+
+    await user.type(input, "text");
+    // Clear button shown, icon hidden
+    expect(screen.getByLabelText("Clear input")).toBeInTheDocument();
+    expect(screen.queryByAltText("Input icon")).not.toBeInTheDocument();
+  });
+
+  test("Input has pr-10 class when showClearButton is true and has value", async () => {
+    const { user } = setupTest({
+      type: "text",
+      id: "clear-btn-padding",
+      showClearButton: true,
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "text");
+    expect(input).toHaveClass("pr-10");
+  });
+});
+
+describe("Instant Search", () => {
+  test("Calls onsearch after debounce when typing enough chars", async () => {
+    vi.useFakeTimers();
+    const searchSpy = vi.fn();
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    const { container } = render(Input, {
+      props: {
+        type: "text",
+        id: "instant-search",
+        instantSearch: true,
+        debounceMs: 100,
+        minSearchChars: 2,
+        onsearch: searchSpy,
+      },
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "abc");
+
+    vi.advanceTimersByTime(150);
+
+    expect(searchSpy).toHaveBeenCalledWith({ query: "abc" });
+    vi.useRealTimers();
+  });
+
+  test("Calls onsearch with empty string when input is cleared completely", async () => {
+    vi.useFakeTimers();
+    const searchSpy = vi.fn();
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    render(Input, {
+      props: {
+        type: "text",
+        id: "instant-search-clear",
+        instantSearch: true,
+        debounceMs: 100,
+        minSearchChars: 2,
+        onsearch: searchSpy,
+      },
+    });
+    const input = screen.getByRole("textbox");
+    // Type text then clear all
+    await user.type(input, "ab");
+    vi.advanceTimersByTime(150);
+    searchSpy.mockClear();
+
+    await user.clear(input);
+    // Clearing should immediately call onsearch with empty query
+    expect(searchSpy).toHaveBeenCalledWith({ query: '' });
+    vi.useRealTimers();
+  });
+
+  test("Does not call onsearch when input is below minSearchChars", async () => {
+    vi.useFakeTimers();
+    const searchSpy = vi.fn();
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    render(Input, {
+      props: {
+        type: "text",
+        id: "instant-search-short",
+        instantSearch: true,
+        debounceMs: 100,
+        minSearchChars: 3,
+        onsearch: searchSpy,
+      },
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "ab");
+    vi.advanceTimersByTime(150);
+    // Should not have been called since "ab" < minSearchChars of 3
+    expect(searchSpy).not.toHaveBeenCalled();
+    vi.useRealTimers();
+  });
+
+  test("Enter key triggers immediate search", async () => {
+    vi.useFakeTimers();
+    const searchSpy = vi.fn();
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    render(Input, {
+      props: {
+        type: "text",
+        id: "instant-search-enter",
+        instantSearch: true,
+        debounceMs: 500,
+        minSearchChars: 2,
+        onsearch: searchSpy,
+      },
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "test");
+    searchSpy.mockClear();
+
+    await user.keyboard("{Enter}");
+    // Enter should immediately call onsearch without waiting for debounce
+    expect(searchSpy).toHaveBeenCalledWith({ query: "test" });
+    vi.useRealTimers();
+  });
+
+  test("Escape key clears input when instantSearch is enabled", async () => {
+    vi.useFakeTimers();
+    const searchSpy = vi.fn();
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    render(Input, {
+      props: {
+        type: "text",
+        id: "instant-search-escape",
+        instantSearch: true,
+        debounceMs: 100,
+        minSearchChars: 2,
+        onsearch: searchSpy,
+      },
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "hello");
+    vi.advanceTimersByTime(150);
+    searchSpy.mockClear();
+
+    await user.keyboard("{Escape}");
+    expect(input.value).toBe("");
+    // Should have called onsearch with empty query via clearInput()
+    expect(searchSpy).toHaveBeenCalledWith({ query: '' });
+    vi.useRealTimers();
+  });
+
+  test("Clear button calls onsearch with empty query when instantSearch is enabled", async () => {
+    vi.useFakeTimers();
+    const searchSpy = vi.fn();
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    render(Input, {
+      props: {
+        type: "text",
+        id: "clear-search",
+        instantSearch: true,
+        showClearButton: true,
+        debounceMs: 100,
+        minSearchChars: 2,
+        onsearch: searchSpy,
+      },
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "hello");
+    vi.advanceTimersByTime(150);
+    searchSpy.mockClear();
+
+    const clearBtn = screen.getByLabelText("Clear input");
+    await user.click(clearBtn);
+    expect(searchSpy).toHaveBeenCalledWith({ query: '' });
+    vi.useRealTimers();
+  });
+});
+
+describe("Callback Props", () => {
+  test("Calls onfocus callback when input gains focus", async () => {
+    const focusSpy = vi.fn();
+    const { user } = setupTest({
+      type: "text",
+      id: "focus-input",
+      onfocus: focusSpy,
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.focus(input);
+    expect(focusSpy).toHaveBeenCalled();
+  });
+
+  test("Calls onblur callback when input loses focus", async () => {
+    const blurSpy = vi.fn();
+    const { user } = setupTest({
+      type: "text",
+      id: "blur-input",
+      onblur: blurSpy,
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.focus(input);
+    await fireEvent.blur(input);
+    expect(blurSpy).toHaveBeenCalled();
+  });
+
+  test("Calls oninputchange callback on text input", async () => {
+    const changeSpy = vi.fn();
+    const { user } = setupTest({
+      type: "text",
+      id: "change-input",
+      oninputchange: changeSpy,
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "hi");
+    expect(changeSpy).toHaveBeenCalledWith("h");
+    expect(changeSpy).toHaveBeenCalledWith("hi");
+  });
+
+  test("Calls onfocus callback on password input focus", async () => {
+    const focusSpy = vi.fn();
+    setupTest({
+      type: "password",
+      id: "pw-focus",
+      label: "PW",
+      onfocus: focusSpy,
+    });
+    const input = screen.getByLabelText("PW");
+    await fireEvent.focus(input);
+    expect(focusSpy).toHaveBeenCalled();
+  });
+
+  test("Calls onblur callback on password input blur", async () => {
+    const blurSpy = vi.fn();
+    setupTest({
+      type: "password",
+      id: "pw-blur",
+      label: "PW",
+      onblur: blurSpy,
+    });
+    const input = screen.getByLabelText("PW");
+    await fireEvent.blur(input);
+    expect(blurSpy).toHaveBeenCalled();
+  });
+
+  test("Calls onfocus callback on textarea focus", async () => {
+    const focusSpy = vi.fn();
+    setupTest({
+      type: "textarea",
+      id: "ta-focus",
+      onfocus: focusSpy,
+    });
+    const textarea = screen.getByRole("textbox");
+    await fireEvent.focus(textarea);
+    expect(focusSpy).toHaveBeenCalled();
+  });
+
+  test("Calls onblur callback on textarea blur", async () => {
+    const blurSpy = vi.fn();
+    setupTest({
+      type: "textarea",
+      id: "ta-blur",
+      onblur: blurSpy,
+    });
+    const textarea = screen.getByRole("textbox");
+    await fireEvent.blur(textarea);
+    expect(blurSpy).toHaveBeenCalled();
+  });
+});
+
+describe("Inputmode", () => {
+  test("Sets inputmode to tel for phoneNumber type", () => {
+    setupTest({
+      type: "phoneNumber",
+      id: "phone-mode",
+    });
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveAttribute("inputmode", "tel");
+  });
+
+  test("Sets inputmode to tel for creditCardNumber type", () => {
+    setupTest({
+      type: "creditCardNumber",
+      id: "cc-mode",
+    });
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveAttribute("inputmode", "tel");
+  });
+
+  test("Sets inputmode to email for email type", () => {
+    setupTest({
+      type: "email",
+      id: "email-mode",
+    });
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveAttribute("inputmode", "email");
+  });
+
+  test("Custom inputmode overrides auto-detected inputmode", () => {
+    setupTest({
+      type: "phoneNumber",
+      id: "custom-mode",
+      inputmode: "numeric",
+    });
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveAttribute("inputmode", "numeric");
+  });
+});
+
+describe("Status Text Variants", () => {
+  test("Shows status text with neutral type (no color class)", () => {
+    setupTest({
+      type: "text",
+      id: "neutral-status",
+      label: "Field",
+      statusText: "pending",
+      statusType: "info",
+    });
+    const statusEl = screen.getByText("(pending)");
+    expect(statusEl).toBeInTheDocument();
+    expect(statusEl).not.toHaveClass("text-green-600");
+    expect(statusEl).not.toHaveClass("text-red-500");
+  });
+});
+
+describe("Label and No-Label Rendering", () => {
+  test("Renders without label when label is empty", () => {
+    const { container } = setupTest({
+      type: "text",
+      id: "no-label-input",
+    });
+    expect(container.querySelector("label")).not.toBeInTheDocument();
+  });
+
+  test("Shows required asterisk when required and label is present", () => {
+    setupTest({
+      type: "text",
+      id: "req-label",
+      label: "Name",
+      required: true,
+    });
+    expect(screen.getByText("*")).toBeInTheDocument();
+  });
+
+  test("Does not show required asterisk when not required", () => {
+    setupTest({
+      type: "text",
+      id: "no-req-label",
+      label: "Name",
+      required: false,
+    });
+    expect(screen.queryByText("*")).not.toBeInTheDocument();
+  });
+});
+
+describe("Disabled styling", () => {
+  test("Disabled text input has opacity and cursor classes", () => {
+    setupTest({
+      type: "text",
+      id: "disabled-style",
+      disabled: true,
+    });
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveClass("opacity-50");
+    expect(input).toHaveClass("cursor-not-allowed");
+  });
+
+  test("Disabled password input has opacity and cursor classes", () => {
+    setupTest({
+      type: "password",
+      id: "disabled-pw",
+      label: "Password",
+      disabled: true,
+    });
+    const input = screen.getByLabelText("Password");
+    // Disabled styling is on the wrapper div (password input uses container pattern)
+    const wrapper = input.closest("div");
+    expect(wrapper).toHaveClass("opacity-50");
+    expect(wrapper).toHaveClass("cursor-not-allowed");
+  });
+});
+
+describe("Textarea error styling", () => {
+  test("Textarea with error text shows error and alert role", () => {
+    setupTest({
+      type: "textarea",
+      id: "textarea-error",
+      errorText: "Too short",
+    });
+    const alert = screen.getByRole("alert");
+    expect(alert).toBeInTheDocument();
+    expect(screen.getByText("Too short")).toBeInTheDocument();
+  });
+
+  test("Textarea with readonly attribute is readonly", () => {
+    setupTest({
+      type: "textarea",
+      id: "readonly-textarea",
+      readonly: true,
+    });
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveAttribute("readonly");
+  });
+});