@getmicdrop/svelte-components 3.0.0 → 4.0.0

package/dist/primitives/Input/Input.svelte

@@ -0,0 +1,411 @@
+<script>
+  import { slide } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import { createEventDispatcher, onDestroy } from "svelte";
+  import { EyeOutline, EyeSlashOutline, CloseCircleOutline, ExclamationCircleOutline } from "../Icons";
+
+  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 = "";
+  /** @type {'sm' | 'md' | 'lg'} */
+  export let size = "md";
+  export let textareaSize = "";
+  export let errorText = "";
+  export let helperText = "";
+  export let helperIcon = "";
+  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;
+  export let animateFocus = true;
+  export let statusText = "";
+  export let statusType = "";
+  export let buttonDisabled = false;
+  export let inputmode = null;
+  export let showErrors = false;
+  export let disableBuiltInValidation = false;
+  export let instantSearch = false;
+  export let debounceMs = 250;
+  export let minSearchChars = 2;
+  export let showClearButton = false;
+
+  let inputValue = value;
+  let inputElement;
+  let debounceTimer;
+  const dispatch = createEventDispatcher();
+
+  $: computedInputmode = inputmode || getInputmodeFromType(type);
+
+  function getInputmodeFromType(inputType) {
+    switch (inputType) {
+      case 'phoneNumber':
+      case 'creditCardNumber':
+        return 'tel';
+      case 'email':
+        return 'email';
+      default:
+        return null;
+    }
+  }
+
+  $: if (value !== inputValue) {
+    inputValue = value;
+  }
+
+  function checkForAutofill() {
+    if (inputElement && inputElement.value !== inputValue) {
+      inputValue = inputElement.value;
+      value = inputValue;
+    }
+  }
+
+  let touched = false;
+  let displayErrorText = "";
+  let isPasswordVisible = false;
+
+  $: inputType = showPasswordToggle && isPasswordVisible ? "text" : type;
+  $: shouldAnimate = animateFocus && !disabled && !readonly;
+
+  // Size classes matching Flowbite
+  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"
+  };
+
+  $: sizeClass = sizeClasses[size] || sizeClasses.md;
+
+  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();
+      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;
+      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 = "";
+    }
+
+    value = inputValue;
+
+    if (instantSearch) {
+      clearTimeout(debounceTimer);
+      if (inputValue.length === 0) {
+        dispatch('search', { query: '' });
+        return;
+      }
+      if (inputValue.length >= minSearchChars) {
+        debounceTimer = setTimeout(() => {
+          dispatch('search', { query: inputValue });
+        }, debounceMs);
+      }
+    }
+  };
+
+  function clearInput() {
+    inputValue = '';
+    value = '';
+    clearTimeout(debounceTimer);
+    if (instantSearch) {
+      dispatch('search', { query: '' });
+    }
+    if (inputElement) {
+      inputElement.focus();
+    }
+  }
+
+  function handleSearchKeyDown(event) {
+    if (instantSearch) {
+      if (event.key === 'Enter') {
+        clearTimeout(debounceTimer);
+        dispatch('search', { query: inputValue });
+      }
+      if (event.key === 'Escape') {
+        clearInput();
+      }
+    }
+  }
+
+  onDestroy(() => {
+    clearTimeout(debounceTimer);
+  });
+
+  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;
+    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 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);
+    }
+  };
+
+  $: displayErrorText = errorText || (touched && !disableBuiltInValidation && (errorText || (required && !inputValue.trim() ? "This field is required." : "")));
+</script>
+
+<div class="flex flex-col gap-2 {className}">
+  {#if label}
+    <div class="flex justify-start items-center gap-1">
+      <label for={id} class="text-sm font-medium text-gray-900 dark:text-white 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="text-sm text-gray-500 dark:text-gray-400">(optional)</span>
+      {/if}
+    </div>
+  {/if}
+  <div class="relative w-full">
+    {#if type === "textarea"}
+      <textarea
+        {id}
+        {name}
+        {placeholder}
+        value={inputValue}
+        on:input={handleInput}
+        on:blur={handleBlur}
+        {maxlength}
+        {minlength}
+        class="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border rounded-lg text-sm font-medium text-gray-900 dark:text-white 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 {displayErrorText ? '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-700 border rounded-lg transition-all outline-none focus-within:ring-4 focus-within:ring-blue-300 dark:focus-within:ring-blue-800 {displayErrorText ? '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}
+          on:input={handleInput}
+          on:change={checkForAutofill}
+          on:blur={handleBlur}
+          {maxlength}
+          {minlength}
+          class="flex-1 w-full {sizeClass} bg-transparent border-none text-gray-900 dark:text-white font-medium text-sm 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"
+          on:click={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 $$slots.leftIcon}
+          <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10 pointer-events-none">
+            <slot name="leftIcon" />
+          </div>
+        {/if}
+        <input
+          bind:this={inputElement}
+          {id}
+          type={inputType}
+          {name}
+          {placeholder}
+          value={inputValue}
+          on:input={handleInput}
+          on:change={checkForAutofill}
+          on:blur={handleBlur}
+          on:keydown={handleSearchKeyDown}
+          {maxlength}
+          {minlength}
+          class="w-full {sizeClass} bg-gray-50 dark:bg-gray-700 border rounded-lg font-medium text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {displayErrorText ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {icon || (showClearButton && inputValue) ? 'pr-10' : ''} {$$slots.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"
+            on:click={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"
+            on:click={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 || 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}
+        {#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 displayErrorText && (touched || showErrors)}
+      <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="text-sm text-red-500">{displayErrorText}</p>
+      </div>
+    {:else if helperText || hintText}
+      <div class="mt-2 flex items-center text-xs text-gray-500 dark:text-gray-400 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>

package/dist/primitives/Input/Input.svelte.d.ts

@@ -0,0 +1,113 @@
+export default Input;
+type Input = SvelteComponent<{
+    size?: "sm" | "md" | "lg" | undefined;
+    name?: string | undefined;
+    className?: string | undefined;
+    type?: string | undefined;
+    icon?: null | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    label?: string | undefined;
+    id?: string | undefined;
+    required?: boolean | undefined;
+    optional?: boolean | undefined;
+    buttonIcon?: null | undefined;
+    buttonText?: null | undefined;
+    maxlength?: null | undefined;
+    minlength?: null | undefined;
+    placeholder?: string | undefined;
+    textareaSize?: string | undefined;
+    errorText?: string | undefined;
+    helperText?: string | undefined;
+    helperIcon?: string | undefined;
+    hintText?: string | undefined;
+    hintIcon?: string | undefined;
+    contentFloat?: string | undefined;
+    readonly?: boolean | undefined;
+    controlled?: boolean | undefined;
+    onButtonClick?: null | undefined;
+    autocomplete?: null | undefined;
+    autofocus?: boolean | undefined;
+    showPasswordToggle?: boolean | undefined;
+    animateFocus?: boolean | undefined;
+    statusText?: string | undefined;
+    statusType?: string | undefined;
+    buttonDisabled?: boolean | undefined;
+    inputmode?: null | undefined;
+    showErrors?: boolean | undefined;
+    disableBuiltInValidation?: boolean | undefined;
+    instantSearch?: boolean | undefined;
+    debounceMs?: number | undefined;
+    minSearchChars?: number | undefined;
+    showClearButton?: boolean | undefined;
+}, {
+    search: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    leftIcon: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Input: $$__sveltets_2_IsomorphicComponent<{
+    size?: "sm" | "md" | "lg" | undefined;
+    name?: string | undefined;
+    className?: string | undefined;
+    type?: string | undefined;
+    icon?: null | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    label?: string | undefined;
+    id?: string | undefined;
+    required?: boolean | undefined;
+    optional?: boolean | undefined;
+    buttonIcon?: null | undefined;
+    buttonText?: null | undefined;
+    maxlength?: null | undefined;
+    minlength?: null | undefined;
+    placeholder?: string | undefined;
+    textareaSize?: string | undefined;
+    errorText?: string | undefined;
+    helperText?: string | undefined;
+    helperIcon?: string | undefined;
+    hintText?: string | undefined;
+    hintIcon?: string | undefined;
+    contentFloat?: string | undefined;
+    readonly?: boolean | undefined;
+    controlled?: boolean | undefined;
+    onButtonClick?: null | undefined;
+    autocomplete?: null | undefined;
+    autofocus?: boolean | undefined;
+    showPasswordToggle?: boolean | undefined;
+    animateFocus?: boolean | undefined;
+    statusText?: string | undefined;
+    statusType?: string | undefined;
+    buttonDisabled?: boolean | undefined;
+    inputmode?: null | undefined;
+    showErrors?: boolean | undefined;
+    disableBuiltInValidation?: boolean | undefined;
+    instantSearch?: boolean | undefined;
+    debounceMs?: number | undefined;
+    minSearchChars?: number | undefined;
+    showClearButton?: boolean | undefined;
+}, {
+    search: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    leftIcon: {};
+}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Input.svelte.d.ts.map

package/dist/primitives/Input/Input.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Input.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4WA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAAwnB;6CAd3kB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/primitives/Input/Select.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Select.spec.js"],"names":[],"mappings":""}