@getmicdrop/svelte-components 5.3.14 → 5.4.0

package/dist/primitives/Input/Input.svelte

@@ -1,444 +1,444 @@
-<script>
-  /**
-   * Input Component - Flowbite Native
-   * Migrated to Svelte 5 runes
-   *
-   * NOTE: This component does NOT perform any validation.
-   * All validation should be handled externally (e.g., via Zod schemas).
-   * Use the `errorText` prop to display validation errors.
-   * Use the `color` prop ('red' | 'base') to style the border.
-   */
-  import { slide } from "svelte/transition";
-  import { cubicOut } from "svelte/easing";
-  import { onDestroy } from "svelte";
-  import { EyeOutline, EyeSlashOutline, CloseCircleOutline, ExclamationCircleOutline } from "../Icons";
-  import { typography } from "../../tokens/typography";
-
-  /** @type {{
-    required?: boolean,
-    disabled?: boolean,
-    optional?: boolean,
-    icon?: string | null,
-    buttonIcon?: string | null,
-    buttonText?: string | null,
-    maxlength?: number | null,
-    minlength?: number | null,
-    type?: string,
-    placeholder?: string,
-    label?: string,
-    id?: string,
-    name?: string,
-    className?: string,
-    size?: 'sm' | 'md' | 'lg',
-    textareaSize?: string,
-    errorText?: string,
-    color?: 'base' | 'red',
-    helperText?: string,
-    helperIcon?: string,
-    hintText?: string,
-    hintIcon?: string,
-    contentFloat?: string,
-    readonly?: boolean,
-    controlled?: boolean,
-    onButtonClick?: ((value: string) => void) | null,
-    value?: string | number | null,
-    autocomplete?: string | null,
-    autofocus?: boolean,
-    showPasswordToggle?: boolean,
-    animateFocus?: boolean,
-    statusText?: string,
-    statusType?: string,
-    buttonDisabled?: boolean,
-    inputmode?: string | null,
-    instantSearch?: boolean,
-    debounceMs?: number,
-    minSearchChars?: number,
-    showClearButton?: boolean,
-    onsearch?: (detail: { query: string }) => void,
-    onfocus?: () => void,
-    onblur?: () => void,
-    oninputchange?: (value: string) => void,
-    leftIcon?: any,
-    [key: string]: any
-  }} */
-  let {
-    required = false,
-    disabled = false,
-    optional = false,
-    icon = null,
-    buttonIcon = null,
-    buttonText = null,
-    maxlength = null,
-    minlength = null,
-    type = "text",
-    placeholder = "",
-    label = "",
-    id = "",
-    name = "",
-    className = "",
-    size = "md",
-    textareaSize = "",
-    errorText = "",
-    color = "base",
-    helperText = "",
-    helperIcon = "",
-    hintText = "",
-    hintIcon = "",
-    contentFloat = "left",
-    readonly = false,
-    controlled = false,
-    onButtonClick = null,
-    value = $bindable(""),
-    autocomplete = null,
-    autofocus = false,
-    showPasswordToggle = true,
-    animateFocus = true,
-    statusText = "",
-    statusType = "",
-    buttonDisabled = false,
-    inputmode = null,
-    instantSearch = false,
-    debounceMs = 250,
-    minSearchChars = 2,
-    showClearButton = false,
-    onsearch,
-    onfocus,
-    onblur,
-    oninputchange,
-    leftIcon,
-    ...restProps
-  } = $props();
-
-  let inputValue = $state(value);
-  let inputElement = $state(null);
-  let debounceTimer;
-
-  let computedInputmode = $derived(inputmode || getInputmodeFromType(type));
-
-  function getInputmodeFromType(inputType) {
-    switch (inputType) {
-      case 'phoneNumber':
-      case 'creditCardNumber':
-        return 'tel';
-      case 'email':
-        return 'email';
-      default:
-        return null;
-    }
-  }
-
-  $effect(() => {
-    if (value !== inputValue) {
-      inputValue = value;
-    }
-  });
-
-  function checkForAutofill() {
-    if (inputElement && inputElement.value !== inputValue) {
-      inputValue = inputElement.value;
-      value = inputValue;
-    }
-  }
-
-  let isPasswordVisible = $state(false);
-
-  // Error state derived from color prop or errorText
-  let hasError = $derived(color === 'red' || Boolean(errorText));
-
-  let inputType = $derived(showPasswordToggle && isPasswordVisible ? "text" : type);
-  let shouldAnimate = $derived(animateFocus && !disabled && !readonly);
-
-  const sizeClasses = {
-    sm: "py-2 px-3 text-sm h-9",
-    md: "py-2.5 px-4 text-sm h-10",
-    lg: "py-3 px-4 text-base h-12"
-  };
-
-  let sizeClass = $derived(sizeClasses[size] || sizeClasses.md);
-
-  const togglePasswordVisibility = () => {
-    isPasswordVisible = !isPasswordVisible;
-  };
-
-  const handleInput = (event) => {
-    inputValue = event.target.value;
-
-    // Format special input types
-    if (type === "creditCardNumber") {
-      const rawInput = inputValue.replace(/\D/g, "");
-      inputValue = formatCreditCardNumber(rawInput);
-      event.target.value = inputValue;
-    }
-
-    if (type === "phoneNumber") {
-      const rawInput = inputValue.replace(/\D/g, "");
-      inputValue = formatPhoneNumber(rawInput);
-      event.target.value = inputValue;
-    }
-
-    if (type === "username") {
-      let sanitized = inputValue.trim();
-      const urlPattern = /(?:https?:\/\/)?(?:www\.)?(?:instagram\.com|twitter\.com|x\.com|facebook\.com|fb\.com|tiktok\.com|linkedin\.com)\/(?:@)?([A-Za-z0-9._]+)\/?/i;
-      const urlMatch = sanitized.match(urlPattern);
-      if (urlMatch) {
-        sanitized = urlMatch[1];
-      }
-      sanitized = sanitized.replace(/^@+/, "");
-      sanitized = sanitized.replace(/[^A-Za-z0-9._]/g, "");
-      inputValue = sanitized;
-      event.target.value = inputValue;
-    }
-
-    value = inputValue;
-
-    // Call oninputchange callback if provided
-    oninputchange?.(inputValue);
-
-    // Handle instant search
-    if (instantSearch) {
-      const inputValueStr = inputValue ?? '';
-      clearTimeout(debounceTimer);
-      if (inputValueStr.length === 0) {
-        onsearch?.({ query: '' });
-        return;
-      }
-      if (inputValueStr.length >= minSearchChars) {
-        debounceTimer = setTimeout(() => {
-          onsearch?.({ query: inputValue });
-        }, debounceMs);
-      }
-    }
-  };
-
-  function clearInput() {
-    inputValue = '';
-    value = '';
-    clearTimeout(debounceTimer);
-    if (instantSearch) {
-      onsearch?.({ query: '' });
-    }
-    if (inputElement) {
-      inputElement.focus();
-    }
-  }
-
-  function handleSearchKeyDown(event) {
-    if (instantSearch) {
-      if (event.key === 'Enter') {
-        clearTimeout(debounceTimer);
-        onsearch?.({ query: inputValue });
-      }
-      if (event.key === 'Escape') {
-        clearInput();
-      }
-    }
-  }
-
-  onDestroy(() => {
-    clearTimeout(debounceTimer);
-  });
-
-  const formatCreditCardNumber = (value) => {
-    return value.replace(/\D/g, "").replace(/(.{4})/g, "$1 ").trim();
-  };
-
-  const formatPhoneNumber = (value) => {
-    const cleanedValue = value.replace(/\D/g, "");
-    let formattedValue = "";
-    if (cleanedValue.length > 0) formattedValue += cleanedValue.substring(0, 3);
-    if (cleanedValue.length >= 4) formattedValue += "-" + cleanedValue.substring(3, 6);
-    if (cleanedValue.length >= 7) formattedValue += "-" + cleanedValue.substring(6, 10);
-    return formattedValue;
-  };
-
-  const handleBlur = () => {
-    onblur?.();
-  };
-
-  const handleFocus = () => {
-    onfocus?.();
-  };
-
-  const getContentFloatClass = () => {
-    switch (contentFloat) {
-      case "center": return "text-center";
-      case "right": return "text-right";
-      default: return "text-left";
-    }
-  };
-
-  const getTextareaSizeClass = () => {
-    switch (textareaSize) {
-      case "sm": return "h-24";
-      case "md": return "h-36";
-      case "lg": return "h-44";
-      default: return "";
-    }
-  };
-
-  const handleButtonClick = () => {
-    if (typeof onButtonClick === "function") {
-      onButtonClick(inputValue);
-    }
-  };
-</script>
-
-<div class="flex flex-col gap-2 {className}" {...restProps}>
-  {#if label}
-    <div class="flex justify-start items-center gap-1">
-      <label for={id} class={`${typography.label} leading-tight sm:leading-none`}>
-        {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
-      </label>
-      {#if statusText}
-        <span class="text-sm font-medium {statusType === 'success' ? 'text-green-600' : statusType === 'error' ? 'text-red-500' : ''}">({statusText})</span>
-      {/if}
-      {#if optional}
-        <span class={typography.smMuted}>(optional)</span>
-      {/if}
-    </div>
-  {/if}
-  <div class="relative w-full">
-    {#if type === "textarea"}
-      <textarea
-        {id}
-        {name}
-        {placeholder}
-        value={inputValue}
-        oninput={handleInput}
-        onblur={handleBlur}
-        onfocus={handleFocus}
-        {maxlength}
-        {minlength}
-        class="{typography.sm} w-full px-3 py-2 bg-gray-50 dark:bg-gray-800 border rounded-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 resize-y {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {getContentFloatClass()} {getTextareaSizeClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''}"
-        required={false}
-        {disabled}
-        {readonly}
-        rows="4"
-        aria-required={required}
-      ></textarea>
-    {:else if type === "password" && showPasswordToggle}
-      <div class="flex items-center w-full bg-gray-50 dark:bg-gray-800 border rounded-lg transition-all outline-none focus-within:ring-4 focus-within:ring-blue-300 dark:focus-within:ring-blue-800 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus-within:border-blue-500'} {shouldAnimate ? 'focus-within:scale-[1.01]' : ''}">
-        <input
-          bind:this={inputElement}
-          {id}
-          type={inputType}
-          {name}
-          {placeholder}
-          value={inputValue}
-          oninput={handleInput}
-          onchange={checkForAutofill}
-          onblur={handleBlur}
-          onfocus={handleFocus}
-          {maxlength}
-          {minlength}
-          class="{typography.sm} flex-1 w-full {sizeClass} bg-transparent border-none font-medium placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0 {getContentFloatClass()}"
-          required={false}
-          {disabled}
-          {readonly}
-          aria-required={required}
-          {autocomplete}
-          {autofocus}
-          inputmode={computedInputmode}
-        />
-        <button
-          type="button"
-          onclick={togglePasswordVisibility}
-          class="flex items-center justify-center px-3 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none"
-          tabindex="-1"
-          aria-label={isPasswordVisible ? "Hide password" : "Show password"}
-        >
-          {#if isPasswordVisible}
-            <EyeSlashOutline class="w-5 h-5" />
-          {:else}
-            <EyeOutline class="w-5 h-5" />
-          {/if}
-        </button>
-      </div>
-    {:else}
-      <div class="relative flex items-center w-full">
-        {#if leftIcon}
-          <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10 pointer-events-none">
-            {@render leftIcon()}
-          </div>
-        {/if}
-        <input
-          bind:this={inputElement}
-          {id}
-          type={inputType}
-          {name}
-          {placeholder}
-          value={inputValue}
-          oninput={handleInput}
-          onchange={checkForAutofill}
-          onblur={handleBlur}
-          onfocus={handleFocus}
-          onkeydown={handleSearchKeyDown}
-          {maxlength}
-          {minlength}
-          class="{typography.body} w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {icon || (showClearButton && inputValue) ? 'pr-10' : ''} {leftIcon ? 'pl-10' : ''} {getContentFloatClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
-          required={false}
-          {disabled}
-          {readonly}
-          aria-required={required}
-          {autocomplete}
-          {autofocus}
-          inputmode={computedInputmode}
-        />
-        {#if showClearButton && inputValue}
-          <button
-            type="button"
-            onclick={clearInput}
-            class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
-            aria-label="Clear input"
-            tabindex="-1"
-          >
-            <CloseCircleOutline class="w-4 h-4" />
-          </button>
-        {:else if controlled && (buttonIcon || buttonText)}
-          <button
-            type="button"
-            onclick={handleButtonClick}
-            disabled={buttonDisabled}
-            class="absolute inset-y-0 right-0 gap-1 flex items-center justify-center px-4 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 disabled:opacity-50 disabled:cursor-not-allowed {helperText || hintText || errorText ? 'mb-7' : ''}"
-          >
-            {#if buttonIcon}
-              <img src={buttonIcon} alt="Button Icon" class="w-5 h-5" />
-            {/if}
-            {#if buttonText}
-              <span class="text-sm font-medium">{buttonText}</span>
-            {/if}
-          </button>
-        {/if}
-        {#if icon && type !== "textarea" && !(showClearButton && inputValue)}
-          <img src={icon} alt="Input icon" class="absolute inset-y-0 right-0 w-5 h-5 mr-3 top-1/2 transform -translate-y-1/2" />
-        {/if}
-      </div>
-    {/if}
-
-    {#if errorText}
-      <div transition:slide={{ duration: 300, easing: cubicOut }} class="flex items-start gap-1.5 mt-2" role="alert" aria-live="assertive">
-        <ExclamationCircleOutline class="w-4 h-4 shrink-0 text-red-500 mt-0.5" />
-        <p class={typography.error}>{errorText}</p>
-      </div>
-    {:else if helperText || hintText}
-      <div class={`mt-2 flex items-center ${typography.xsMuted} opacity-65`}>
-        {#if helperIcon || hintIcon}
-          <img src={helperIcon || hintIcon} alt="Helper icon" class="w-4 h-4 mr-2" />
-        {/if}
-        <span>{@html helperText || hintText}</span>
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style>
-  /* Hide number input spinners globally */
-  :global(input[type="number"]::-webkit-outer-spin-button),
-  :global(input[type="number"]::-webkit-inner-spin-button) {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  :global(input[type="number"]) {
-    -moz-appearance: textfield;
-  }
-</style>
+<script>
+  /**
+   * Input Component - Flowbite Native
+   * Migrated to Svelte 5 runes
+   *
+   * NOTE: This component does NOT perform any validation.
+   * All validation should be handled externally (e.g., via Zod schemas).
+   * Use the `errorText` prop to display validation errors.
+   * Use the `color` prop ('red' | 'base') to style the border.
+   */
+  import { slide } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import { onDestroy } from "svelte";
+  import { EyeOutline, EyeSlashOutline, CloseCircleOutline, ExclamationCircleOutline } from "../Icons";
+  import { typography } from "../../tokens/typography";
+
+  /** @type {{
+    required?: boolean,
+    disabled?: boolean,
+    optional?: boolean,
+    icon?: string | null,
+    buttonIcon?: string | null,
+    buttonText?: string | null,
+    maxlength?: number | null,
+    minlength?: number | null,
+    type?: string,
+    placeholder?: string,
+    label?: string,
+    id?: string,
+    name?: string,
+    className?: string,
+    size?: 'sm' | 'md' | 'lg',
+    textareaSize?: string,
+    errorText?: string,
+    color?: 'base' | 'red',
+    helperText?: string,
+    helperIcon?: string,
+    hintText?: string,
+    hintIcon?: string,
+    contentFloat?: string,
+    readonly?: boolean,
+    controlled?: boolean,
+    onButtonClick?: ((value: string) => void) | null,
+    value?: string | number | null,
+    autocomplete?: string | null,
+    autofocus?: boolean,
+    showPasswordToggle?: boolean,
+    animateFocus?: boolean,
+    statusText?: string,
+    statusType?: string,
+    buttonDisabled?: boolean,
+    inputmode?: string | null,
+    instantSearch?: boolean,
+    debounceMs?: number,
+    minSearchChars?: number,
+    showClearButton?: boolean,
+    onsearch?: (detail: { query: string }) => void,
+    onfocus?: () => void,
+    onblur?: () => void,
+    oninputchange?: (value: string) => void,
+    leftIcon?: any,
+    [key: string]: any
+  }} */
+  let {
+    required = false,
+    disabled = false,
+    optional = false,
+    icon = null,
+    buttonIcon = null,
+    buttonText = null,
+    maxlength = null,
+    minlength = null,
+    type = "text",
+    placeholder = "",
+    label = "",
+    id = "",
+    name = "",
+    className = "",
+    size = "md",
+    textareaSize = "",
+    errorText = "",
+    color = "base",
+    helperText = "",
+    helperIcon = "",
+    hintText = "",
+    hintIcon = "",
+    contentFloat = "left",
+    readonly = false,
+    controlled = false,
+    onButtonClick = null,
+    value = $bindable(""),
+    autocomplete = null,
+    autofocus = false,
+    showPasswordToggle = true,
+    animateFocus = true,
+    statusText = "",
+    statusType = "",
+    buttonDisabled = false,
+    inputmode = null,
+    instantSearch = false,
+    debounceMs = 250,
+    minSearchChars = 2,
+    showClearButton = false,
+    onsearch,
+    onfocus,
+    onblur,
+    oninputchange,
+    leftIcon,
+    ...restProps
+  } = $props();
+
+  let inputValue = $state(value);
+  let inputElement = $state(null);
+  let debounceTimer;
+
+  let computedInputmode = $derived(inputmode || getInputmodeFromType(type));
+
+  function getInputmodeFromType(inputType) {
+    switch (inputType) {
+      case 'phoneNumber':
+      case 'creditCardNumber':
+        return 'tel';
+      case 'email':
+        return 'email';
+      default:
+        return null;
+    }
+  }
+
+  $effect(() => {
+    if (value !== inputValue) {
+      inputValue = value;
+    }
+  });
+
+  function checkForAutofill() {
+    if (inputElement && inputElement.value !== inputValue) {
+      inputValue = inputElement.value;
+      value = inputValue;
+    }
+  }
+
+  let isPasswordVisible = $state(false);
+
+  // Error state derived from color prop or errorText
+  let hasError = $derived(color === 'red' || Boolean(errorText));
+
+  let inputType = $derived(showPasswordToggle && isPasswordVisible ? "text" : type);
+  let shouldAnimate = $derived(animateFocus && !disabled && !readonly);
+
+  const sizeClasses = {
+    sm: "py-2 px-3 text-sm h-9",
+    md: "py-2.5 px-4 text-sm h-10",
+    lg: "py-3 px-4 text-base h-12"
+  };
+
+  let sizeClass = $derived(sizeClasses[size] || sizeClasses.md);
+
+  const togglePasswordVisibility = () => {
+    isPasswordVisible = !isPasswordVisible;
+  };
+
+  const handleInput = (event) => {
+    inputValue = event.target.value;
+
+    // Format special input types
+    if (type === "creditCardNumber") {
+      const rawInput = inputValue.replace(/\D/g, "");
+      inputValue = formatCreditCardNumber(rawInput);
+      event.target.value = inputValue;
+    }
+
+    if (type === "phoneNumber") {
+      const rawInput = inputValue.replace(/\D/g, "");
+      inputValue = formatPhoneNumber(rawInput);
+      event.target.value = inputValue;
+    }
+
+    if (type === "username") {
+      let sanitized = inputValue.trim();
+      const urlPattern = /(?:https?:\/\/)?(?:www\.)?(?:instagram\.com|twitter\.com|x\.com|facebook\.com|fb\.com|tiktok\.com|linkedin\.com)\/(?:@)?([A-Za-z0-9._]+)\/?/i;
+      const urlMatch = sanitized.match(urlPattern);
+      if (urlMatch) {
+        sanitized = urlMatch[1];
+      }
+      sanitized = sanitized.replace(/^@+/, "");
+      sanitized = sanitized.replace(/[^A-Za-z0-9._]/g, "");
+      inputValue = sanitized;
+      event.target.value = inputValue;
+    }
+
+    value = inputValue;
+
+    // Call oninputchange callback if provided
+    oninputchange?.(inputValue);
+
+    // Handle instant search
+    if (instantSearch) {
+      const inputValueStr = inputValue ?? '';
+      clearTimeout(debounceTimer);
+      if (inputValueStr.length === 0) {
+        onsearch?.({ query: '' });
+        return;
+      }
+      if (inputValueStr.length >= minSearchChars) {
+        debounceTimer = setTimeout(() => {
+          onsearch?.({ query: inputValue });
+        }, debounceMs);
+      }
+    }
+  };
+
+  function clearInput() {
+    inputValue = '';
+    value = '';
+    clearTimeout(debounceTimer);
+    if (instantSearch) {
+      onsearch?.({ query: '' });
+    }
+    if (inputElement) {
+      inputElement.focus();
+    }
+  }
+
+  function handleSearchKeyDown(event) {
+    if (instantSearch) {
+      if (event.key === 'Enter') {
+        clearTimeout(debounceTimer);
+        onsearch?.({ query: inputValue });
+      }
+      if (event.key === 'Escape') {
+        clearInput();
+      }
+    }
+  }
+
+  onDestroy(() => {
+    clearTimeout(debounceTimer);
+  });
+
+  const formatCreditCardNumber = (value) => {
+    return value.replace(/\D/g, "").replace(/(.{4})/g, "$1 ").trim();
+  };
+
+  const formatPhoneNumber = (value) => {
+    const cleanedValue = value.replace(/\D/g, "");
+    let formattedValue = "";
+    if (cleanedValue.length > 0) formattedValue += cleanedValue.substring(0, 3);
+    if (cleanedValue.length >= 4) formattedValue += "-" + cleanedValue.substring(3, 6);
+    if (cleanedValue.length >= 7) formattedValue += "-" + cleanedValue.substring(6, 10);
+    return formattedValue;
+  };
+
+  const handleBlur = () => {
+    onblur?.();
+  };
+
+  const handleFocus = () => {
+    onfocus?.();
+  };
+
+  const getContentFloatClass = () => {
+    switch (contentFloat) {
+      case "center": return "text-center";
+      case "right": return "text-right";
+      default: return "text-left";
+    }
+  };
+
+  const getTextareaSizeClass = () => {
+    switch (textareaSize) {
+      case "sm": return "h-24";
+      case "md": return "h-36";
+      case "lg": return "h-44";
+      default: return "";
+    }
+  };
+
+  const handleButtonClick = () => {
+    if (typeof onButtonClick === "function") {
+      onButtonClick(inputValue);
+    }
+  };
+</script>
+
+<div class="flex flex-col gap-2 {className}" {...restProps}>
+  {#if label}
+    <div class="flex justify-start items-center gap-1">
+      <label for={id} class={`${typography.label} leading-tight sm:leading-none`}>
+        {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
+      </label>
+      {#if statusText}
+        <span class="text-sm font-medium {statusType === 'success' ? 'text-green-600' : statusType === 'error' ? 'text-red-500' : ''}">({statusText})</span>
+      {/if}
+      {#if optional}
+        <span class={typography.smMuted}>(optional)</span>
+      {/if}
+    </div>
+  {/if}
+  <div class="relative w-full">
+    {#if type === "textarea"}
+      <textarea
+        {id}
+        {name}
+        {placeholder}
+        value={inputValue}
+        oninput={handleInput}
+        onblur={handleBlur}
+        onfocus={handleFocus}
+        {maxlength}
+        {minlength}
+        class="{typography.sm} w-full px-3 py-2 bg-gray-50 dark:bg-gray-800 border rounded-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 resize-y {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {getContentFloatClass()} {getTextareaSizeClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''}"
+        required={false}
+        {disabled}
+        {readonly}
+        rows="4"
+        aria-required={required}
+      ></textarea>
+    {:else if type === "password" && showPasswordToggle}
+      <div class="flex items-center w-full bg-gray-50 dark:bg-gray-800 border rounded-lg transition-all outline-none focus-within:ring-4 focus-within:ring-blue-300 dark:focus-within:ring-blue-800 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus-within:border-blue-500'} {shouldAnimate ? 'focus-within:scale-[1.01]' : ''}">
+        <input
+          bind:this={inputElement}
+          {id}
+          type={inputType}
+          {name}
+          {placeholder}
+          value={inputValue}
+          oninput={handleInput}
+          onchange={checkForAutofill}
+          onblur={handleBlur}
+          onfocus={handleFocus}
+          {maxlength}
+          {minlength}
+          class="{typography.sm} flex-1 w-full {sizeClass} bg-transparent border-none font-medium placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0 {getContentFloatClass()}"
+          required={false}
+          {disabled}
+          {readonly}
+          aria-required={required}
+          {autocomplete}
+          {autofocus}
+          inputmode={computedInputmode}
+        />
+        <button
+          type="button"
+          onclick={togglePasswordVisibility}
+          class="flex items-center justify-center px-3 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none"
+          tabindex="-1"
+          aria-label={isPasswordVisible ? "Hide password" : "Show password"}
+        >
+          {#if isPasswordVisible}
+            <EyeSlashOutline class="w-5 h-5" />
+          {:else}
+            <EyeOutline class="w-5 h-5" />
+          {/if}
+        </button>
+      </div>
+    {:else}
+      <div class="relative flex items-center w-full">
+        {#if leftIcon}
+          <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10 pointer-events-none">
+            {@render leftIcon()}
+          </div>
+        {/if}
+        <input
+          bind:this={inputElement}
+          {id}
+          type={inputType}
+          {name}
+          {placeholder}
+          value={inputValue}
+          oninput={handleInput}
+          onchange={checkForAutofill}
+          onblur={handleBlur}
+          onfocus={handleFocus}
+          onkeydown={handleSearchKeyDown}
+          {maxlength}
+          {minlength}
+          class="{typography.body} w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {icon || (showClearButton && inputValue) ? 'pr-10' : ''} {leftIcon ? 'pl-10' : ''} {getContentFloatClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+          required={false}
+          {disabled}
+          {readonly}
+          aria-required={required}
+          {autocomplete}
+          {autofocus}
+          inputmode={computedInputmode}
+        />
+        {#if showClearButton && inputValue}
+          <button
+            type="button"
+            onclick={clearInput}
+            class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+            aria-label="Clear input"
+            tabindex="-1"
+          >
+            <CloseCircleOutline class="w-4 h-4" />
+          </button>
+        {:else if controlled && (buttonIcon || buttonText)}
+          <button
+            type="button"
+            onclick={handleButtonClick}
+            disabled={buttonDisabled}
+            class="absolute inset-y-0 right-0 gap-1 flex items-center justify-center px-4 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 disabled:opacity-50 disabled:cursor-not-allowed {helperText || hintText || errorText ? 'mb-7' : ''}"
+          >
+            {#if buttonIcon}
+              <img src={buttonIcon} alt="Button Icon" class="w-5 h-5" />
+            {/if}
+            {#if buttonText}
+              <span class="text-sm font-medium">{buttonText}</span>
+            {/if}
+          </button>
+        {/if}
+        {#if icon && type !== "textarea" && !(showClearButton && inputValue)}
+          <img src={icon} alt="Input icon" class="absolute inset-y-0 right-0 w-5 h-5 mr-3 top-1/2 transform -translate-y-1/2" />
+        {/if}
+      </div>
+    {/if}
+
+    {#if errorText}
+      <div transition:slide={{ duration: 300, easing: cubicOut }} class="flex items-start gap-1.5 mt-2" role="alert" aria-live="assertive">
+        <ExclamationCircleOutline class="w-4 h-4 shrink-0 text-red-500 mt-0.5" />
+        <p class={typography.error}>{errorText}</p>
+      </div>
+    {:else if helperText || hintText}
+      <div class={`mt-2 flex items-center ${typography.xsMuted} opacity-65`}>
+        {#if helperIcon || hintIcon}
+          <img src={helperIcon || hintIcon} alt="Helper icon" class="w-4 h-4 mr-2" />
+        {/if}
+        <span>{@html helperText || hintText}</span>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  /* Hide number input spinners globally */
+  :global(input[type="number"]::-webkit-outer-spin-button),
+  :global(input[type="number"]::-webkit-inner-spin-button) {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  :global(input[type="number"]) {
+    -moz-appearance: textfield;
+  }
+</style>