@getmicdrop/svelte-components 1.0.1 → 1.0.3

package/dist/components/Input/Input.svelte

@@ -0,0 +1,721 @@
+<script>
+  import { slide } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import WarningIcon from "../Icons/WarningIcon.svelte";
+
+  export let required = false;
+  export let disabled = false;
+  export let optional = false;
+  export let icon = null;
+  export let buttonIcon = null;
+  export let buttonText = null;
+  export let maxlength = null;
+  export let minlength = null;
+  export let type = "text";
+  export let placeholder = "";
+  export let label = "";
+  export let id = "";
+  export let name = "";
+  export let className = "";
+  export let size = "full"; // Changed default from "" to "full"
+  export let textareaSize = ""; // sm, md, lg for textarea height variants
+  export let errorText = "";
+  export let helperText = "";
+  export let helperIcon = "";
+  // Deprecated: use helperText/helperIcon instead
+  export let hintText = "";
+  export let hintIcon = "";
+  export let contentFloat = "left";
+  export let readonly = false;
+  export let controlled = false;
+  export let onButtonClick = null;
+  export let value = "";
+  export let autocomplete = null;
+  export let autofocus = false;
+  export let showPasswordToggle = true; // Default to showing toggle on password fields
+  export let animateFocus = true; // Enable focus animation effect (auto-disabled when disabled/readonly)
+  export let statusText = ""; // Status text to show next to label (e.g., "verified", "unverified")
+  export let statusType = ""; // "success" | "error" | "" - determines status text color
+  export let buttonDisabled = false; // Explicitly disable the controlled button
+  export let inputmode = null; // Override inputmode attribute (tel, email, numeric, etc.)
+  export let showErrors = false; // Show errors immediately (bypass touched requirement)
+  export let disableBuiltInValidation = false; // When true, disables the built-in blur validation (use for custom validation)
+
+  let inputValue = value;
+  let inputElement;
+
+  // Derive inputmode from type if not explicitly set
+  $: computedInputmode = inputmode || getInputmodeFromType(type);
+
+  function getInputmodeFromType(inputType) {
+    switch (inputType) {
+      case 'phoneNumber':
+      case 'creditCardNumber':
+        return 'tel';
+      case 'email':
+        return 'email';
+      default:
+        return null;
+    }
+  }
+
+  // Sync from parent: when external value prop changes, update internal inputValue
+  $: if (value !== inputValue) {
+    inputValue = value;
+  }
+
+  // Check for autofill changes (password managers like 1Password)
+  // This handles both change events and animationstart events triggered by browser autofill
+  function checkForAutofill() {
+    if (inputElement && inputElement.value !== inputValue) {
+      inputValue = inputElement.value;
+      value = inputValue;
+    }
+  }
+
+  // Handle animation start - browsers use CSS animations to detect autofill
+  function handleAnimationStart(event) {
+    if (event.animationName === 'onAutoFillStart') {
+      checkForAutofill();
+    }
+  }
+
+  // Sync from parent: when external value prop changes, update internal inputValue
+  $: if (value !== inputValue) {
+    inputValue = value;
+  }
+  let touched = false;
+  let displayErrorText = "";
+  let isPasswordVisible = false;
+
+  $: inputType = showPasswordToggle && isPasswordVisible ? "text" : type;
+  $: shouldAnimate = animateFocus && !disabled && !readonly;
+
+  const togglePasswordVisibility = () => {
+    isPasswordVisible = !isPasswordVisible;
+  };
+
+  const handleInput = (event) => {
+    inputValue = event.target.value;
+    let rawInput = inputValue;
+
+    if (type === "creditCardNumber") {
+      rawInput = inputValue.replace(/\D/g, "");
+      inputValue = formatCreditCardNumber(rawInput);
+      event.target.value = inputValue;
+    }
+
+    if (type === "phoneNumber") {
+      rawInput = inputValue.replace(/\D/g, "");
+      inputValue = formatPhoneNumber(rawInput);
+      event.target.value = inputValue;
+    }
+
+    if (type === "username") {
+      let sanitized = inputValue.trim();
+
+      // Extract username from full URLs (e.g., https://instagram.com/username, twitter.com/username)
+      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];
+      }
+
+      // Strip leading @ symbols
+      sanitized = sanitized.replace(/^@+/, "");
+
+      // Only allow valid username characters
+      sanitized = sanitized.replace(/[^A-Za-z0-9._]/g, "");
+
+      inputValue = sanitized;
+      event.target.value = inputValue;
+      rawInput = sanitized;
+    }
+
+    if (type === "email") {
+      if (!isValidEmail(inputValue)) {
+        displayErrorText = errorText;
+      } else {
+        displayErrorText = "";
+      }
+    }
+
+    if (type === "password") {
+      if (!isStrongPassword(inputValue)) {
+        displayErrorText =
+          "Password must be at least 8 characters long and include uppercase, lowercase, a number, and a special character.";
+      } else {
+        displayErrorText = "";
+      }
+    }
+
+    if (minlength !== null && rawInput.length < minlength) {
+      displayErrorText = errorText;
+    } else {
+      displayErrorText = "";
+    }
+
+    if (!disableBuiltInValidation && required && !inputValue.trim()) {
+      displayErrorText = "This field is required.";
+    } else if (!disableBuiltInValidation) {
+      displayErrorText = "";
+    }
+
+    // Update exported value for parent bind:value
+    value = inputValue;
+  };
+
+  const isStrongPassword = (password) => {
+    const minLength = 8;
+    const hasUpperCase = /[A-Z]/.test(password);
+    const hasLowerCase = /[a-z]/.test(password);
+    const hasNumber = /[0-9]/.test(password);
+    const hasSpecialChar = /[!@#$%^&*]/.test(password);
+
+    return (
+      password.length >= minLength &&
+      hasUpperCase &&
+      hasLowerCase &&
+      hasNumber &&
+      hasSpecialChar
+    );
+  };
+
+  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 = () => {
+    touched = true;
+
+    // Skip built-in validation if disabled (for custom validation handling)
+    if (disableBuiltInValidation) {
+      return;
+    }
+
+    if (required && !inputValue.trim()) {
+      displayErrorText = "This field is required.";
+    } else if (type === "email" && !isValidEmail(inputValue)) {
+      displayErrorText = errorText;
+    } else if (minlength !== null && inputValue.length < minlength) {
+      displayErrorText = errorText;
+    } else {
+      displayErrorText = "";
+    }
+  };
+
+  const isValidEmail = (email) => {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return re.test(String(email).toLowerCase());
+  };
+
+  const getSizeClass = () => {
+    switch (size) {
+      case "full":
+        return "w-full";
+      case "large":
+        return "w-96";
+      case "medium":
+        return "w-64";
+      case "small":
+        return "w-52";
+      default:
+        return "w-44";
+    }
+  };
+
+  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"; // ~4 rows
+      case "md":
+        return "h-36"; // ~6 rows
+      case "lg":
+        return "h-44"; // ~8 rows (previously h-44 via className)
+      default:
+        return ""; // Use default rows="4"
+    }
+  };
+
+  const handleButtonClick = () => {
+    if (typeof onButtonClick === "function") {
+      onButtonClick(inputValue);
+    } else {
+      console.log("Button clicked, input value:", inputValue);
+    }
+  };
+
+  // $: displayErrorText = errorText || (touched && required && !inputValue.trim() ? "This field is required." : "");
+  $: displayErrorText =
+    errorText ||
+    (touched &&
+      !disableBuiltInValidation &&
+      (errorText ||
+        (required && !inputValue.trim() ? "This field is required." : "")));
+</script>
+
+<div class="input-wrapper flex flex-col gap-2 {className}">
+  {#if label}
+    <div class="flex justify-start items-center gap-1">
+      <label
+        for={id}
+        class="input-label"
+      >
+        {label}{#if required}<span class="input-required">*</span>{/if}
+      </label>
+      {#if statusText}
+        <span class="input-status {statusType === 'success' ? 'input-status-success' : statusType === 'error' ? 'input-status-error' : ''}">({statusText})</span>
+      {/if}
+      {#if optional}
+        <span class="input-optional">(optional)</span>
+      {/if}
+    </div>
+  {/if}
+  <div class="relative {getSizeClass()}">
+    {#if type === "textarea"}
+      <textarea
+        {id}
+        {name}
+        {placeholder}
+        value={inputValue}
+        on:input={handleInput}
+        on:blur={handleBlur}
+        {maxlength}
+        {minlength}
+        class="input-field input-textarea resize-y {getContentFloatClass()} {displayErrorText
+          ? 'input-error'
+          : ''} {getSizeClass()} {getTextareaSizeClass()} {shouldAnimate ? 'input-animate-focus' : ''} {className}"
+        required={false}
+        {disabled}
+        {readonly}
+        rows="4"
+        aria-required={required}
+      ></textarea>
+    {:else if type === "password" && showPasswordToggle}
+      <!-- Password input with show/hide toggle -->
+      <div
+        class="input-password-wrapper {displayErrorText
+          ? 'input-error'
+          : ''} {getSizeClass()} {shouldAnimate ? 'input-animate-focus' : ''} {className}"
+      >
+        <input
+          bind:this={inputElement}
+          {id}
+          type={inputType}
+          {name}
+          {placeholder}
+          value={inputValue}
+          on:input={handleInput}
+          on:change={checkForAutofill}
+          on:animationstart={handleAnimationStart}
+          on:blur={handleBlur}
+          {maxlength}
+          {minlength}
+          class="input-password-field {getContentFloatClass()}"
+          required={false}
+          {disabled}
+          {readonly}
+          aria-required={required}
+          {autocomplete}
+          {autofocus}
+          inputmode={computedInputmode}
+        />
+
+        <button
+          type="button"
+          on:click={togglePasswordVisibility}
+          class="input-password-toggle"
+          tabindex="-1"
+          aria-label={isPasswordVisible ? "Hide password" : "Show password"}
+        >
+          {#if isPasswordVisible}
+            <!-- Eye Off Icon -->
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="w-5 h-5"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+              />
+            </svg>
+          {:else}
+            <!-- Eye Icon -->
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="w-5 h-5"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+              />
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+              />
+            </svg>
+          {/if}
+        </button>
+      </div>
+    {:else}
+      <!-- Standard Input Layout -->
+      <div class="flex items-center">
+        <input
+          bind:this={inputElement}
+          {id}
+          type={inputType}
+          {name}
+          {placeholder}
+          value={inputValue}
+          on:input={handleInput}
+          on:change={checkForAutofill}
+          on:animationstart={handleAnimationStart}
+          on:blur={handleBlur}
+          {maxlength}
+          {minlength}
+          class="input-field {icon
+            ? 'pr-10'
+            : ''} {getContentFloatClass()} {displayErrorText
+            ? 'input-error'
+            : ''} {getSizeClass()} {shouldAnimate ? 'input-animate-focus' : ''} {className}"
+          required={false}
+          {disabled}
+          {readonly}
+          aria-required={required}
+          {autocomplete}
+          {autofocus}
+          inputmode={computedInputmode}
+        />
+        {#if controlled && (buttonIcon || buttonText)}
+          <button
+            type="button"
+            on:click={handleButtonClick}
+            disabled={buttonDisabled}
+            class="absolute inset-y-0 right-0 gap-1 flex items-center justify-center px-4 input-controlled-button {helperText ||
+            hintText ||
+            displayErrorText
+              ? '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}
+      </div>
+    {/if}
+
+    {#if displayErrorText && (touched || showErrors)}
+      <div
+        transition:slide={{ duration: 300, easing: cubicOut }}
+        class="validation-error flex items-start gap-1.5 mt-2"
+        role="alert"
+        aria-live="assertive"
+      >
+        <WarningIcon className="shrink-0 text-red-500 mt-[1px]" />
+        <p class="input-error-text">
+          {displayErrorText}
+        </p>
+      </div>
+    {:else if helperText || hintText}
+      <div class="input-helper">
+        {#if helperIcon || hintIcon}
+          <img src={helperIcon || hintIcon} alt="Helper icon" class="w-4 h-4 mr-2" />
+        {/if}
+        <span>{helperText || hintText}</span>
+      </div>
+    {/if}
+
+    {#if icon && type !== "textarea"}
+      <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 text-Text-Primary"
+      />
+    {/if}
+  </div>
+</div>
+
+<style>
+  /* CSS Variables for dark mode support */
+  .input-wrapper {
+    --input-bg: #f9fafb;
+    --input-text: #0d1526;
+    --input-text-placeholder: #6b7280;
+    --input-border: #e5e7eb;
+    --input-border-error: #ff6666;
+    --input-focus-ring: #3b82f6;
+    --input-label-text: #0d1526;
+    --input-optional-text: #6b7280;
+  }
+
+  .input-label {
+    color: var(--input-label-text);
+    font-size: 0.875rem;
+    font-style: normal;
+    line-height: 1.25;
+    font-weight: 500;
+  }
+
+  @media (min-width: 640px) {
+    .input-label {
+      line-height: 14px;
+    }
+  }
+
+  .input-required {
+    color: var(--input-border-error);
+    font-weight: 500;
+    font-size: 0.875rem;
+    margin-left: 0.125rem;
+  }
+
+  .input-optional {
+    color: var(--input-optional-text);
+  }
+
+  .input-status {
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .input-status-success {
+    color: #16a34a;
+  }
+
+  .input-status-error {
+    color: var(--input-border-error);
+  }
+
+  .input-controlled-button {
+    color: #1a56db;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.15s ease;
+  }
+
+  .input-controlled-button:hover:not(:disabled) {
+    opacity: 0.8;
+  }
+
+  .input-controlled-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input-field {
+    padding: 0.25rem 0.625rem;
+    height: 40px;
+    background-color: var(--input-bg);
+    color: var(--input-text);
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 0.75rem;
+    border: 1px solid var(--input-border);
+    border-radius: 0.5rem;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  }
+
+  @media (min-width: 640px) {
+    .input-field {
+      padding: 0.25rem 0.75rem;
+    }
+  }
+
+  .input-field:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--input-focus-ring);
+    border-color: var(--input-focus-ring);
+  }
+
+  .input-field:hover:not(:focus):not(:disabled) {
+    border-color: var(--input-focus-ring);
+  }
+
+  .input-field:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input-field.input-error {
+    border-color: var(--input-border-error);
+  }
+
+  .input-field::-moz-placeholder {
+    color: var(--input-text-placeholder);
+  }
+
+  .input-field::placeholder {
+    color: var(--input-text-placeholder);
+  }
+
+  .input-textarea {
+    padding: 0.75rem;
+    height: auto;
+    border-radius: 0.375rem;
+    line-height: calc(1em + 4px);
+  }
+
+  /* Password toggle wrapper */
+  .input-password-wrapper {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    background-color: var(--input-bg);
+    border: 1px solid var(--input-border);
+    border-radius: 0.5rem;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  }
+
+  .input-password-wrapper:focus-within {
+    box-shadow: 0 0 0 2px var(--input-focus-ring);
+    border-color: var(--input-focus-ring);
+  }
+
+  .input-password-wrapper:hover:not(:focus-within) {
+    border-color: var(--input-focus-ring);
+  }
+
+  .input-password-wrapper.input-error {
+    border-color: var(--input-border-error);
+  }
+
+  .input-password-field {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    border: none;
+    color: var(--input-text);
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 0.75rem;
+    padding: 0.25rem 0.625rem;
+  }
+
+  @media (min-width: 640px) {
+    .input-password-field {
+      padding: 0.25rem 0.75rem;
+    }
+  }
+
+  .input-password-field:focus {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .input-password-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-right: 0.75rem;
+    padding-left: 0.25rem;
+    height: 100%;
+    color: var(--input-text);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+  }
+
+  .input-password-toggle:hover {
+    color: var(--input-label-text);
+  }
+
+  .input-password-toggle:focus {
+    outline: none;
+  }
+
+  /* Error, hint, helper text */
+  .input-error-text {
+    margin: 0;
+    color: var(--input-border-error);
+    font-size: 0.875rem;
+    line-height: 1.25;
+  }
+
+  .input-helper {
+    margin-top: 0.5rem;
+    display: flex;
+    align-items: center;
+    color: var(--input-optional-text);
+    opacity: 0.65;
+    font-size: 0.75rem;
+  }
+
+  /* Animate focus effect */
+  .input-animate-focus {
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.15s ease;
+  }
+
+  .input-animate-focus:focus {
+    transform: scale(1.01);
+  }
+
+  /* Dark mode overrides via .dark class */
+  :global(.dark) .input-wrapper {
+    --input-bg: #111827;
+    --input-text: #f7f7f8;
+    --input-text-placeholder: #9ca3af;
+    --input-border: #374151;
+    --input-label-text: #f7f7f8;
+    --input-optional-text: #9ca3af;
+  }
+
+  /* Autofill detection via CSS animation - triggers animationstart event */
+  @keyframes onAutoFillStart {
+    from { /* empty */ }
+    to { /* empty */ }
+  }
+
+  .input-field:-webkit-autofill,
+  .input-password-field:-webkit-autofill {
+    animation-name: onAutoFillStart;
+    animation-duration: 0.001s;
+  }
+</style>