@getmicdrop/svelte-components 3.1.0 → 4.1.0

package/dist/recipes/inputs/PasswordInput.svelte.d.ts

@@ -0,0 +1,65 @@
+export default PasswordInput;
+type PasswordInput = SvelteComponent<{
+    class?: string | undefined;
+    size?: string | undefined;
+    name?: string | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    label?: string | undefined;
+    id?: string | undefined;
+    required?: boolean | undefined;
+    maxlength?: null | undefined;
+    minlength?: null | undefined;
+    placeholder?: string | undefined;
+    autocomplete?: string | undefined;
+    showPasswordToggle?: boolean | undefined;
+    hint?: string | undefined;
+    showStrength?: boolean | undefined;
+}, {
+    input: CustomEvent<any>;
+    blur: CustomEvent<any>;
+    focus: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const PasswordInput: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    size?: string | undefined;
+    name?: string | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    label?: string | undefined;
+    id?: string | undefined;
+    required?: boolean | undefined;
+    maxlength?: null | undefined;
+    minlength?: null | undefined;
+    placeholder?: string | undefined;
+    autocomplete?: string | undefined;
+    showPasswordToggle?: boolean | undefined;
+    hint?: string | undefined;
+    showStrength?: boolean | undefined;
+}, {
+    input: CustomEvent<any>;
+    blur: CustomEvent<any>;
+    focus: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, 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=PasswordInput.svelte.d.ts.map

package/dist/recipes/inputs/PasswordInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/PasswordInput.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAwHA;;;;;;;;;;;;;;;;;;;;;;;mBAAqS;6CATxP,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/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.spec.d.ts.map

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

package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordStrengthIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAyHA;;;;;;;;;;;eAA4L;sCATtJ,KAAK,EAAE,KAAK;;;;;6CALL,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/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.spec.d.ts.map

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

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaceAutocomplete.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAmIA;;;;mBAA6H;8BA9H3F,4BAA4B;6CAqHjB,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;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;IACtG,eAAe,QAAQ,CAAC"}

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte

@@ -0,0 +1,321 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { SearchOutline } from "../Icons";
+  import * as GMaps from '@googlemaps/js-api-loader';
+  import { PUBLIC_GOOGLE_MAPS_API_KEY } from '../../../config.js';
+  const { Loader } = GMaps;
+
+  export let fetchFields: string[] = ['formattedAddress', 'addressComponents'];
+  export let placeholder: string = 'Search for location...';
+  export let language: string = 'en-US';
+  export let region: string = 'US';
+  export let autocomplete: string = 'off';
+  export let initialValue: string = '';
+  export let onResponse: (data: any) => void = () => {};
+  export let onError: (error: string) => void = () => {};
+  export let mode: 'full' | 'cityState' = 'full';
+  export let animateFocus: boolean = true;
+  export let disabled: boolean = false;
+
+  $: shouldAnimate = animateFocus && !disabled;
+
+  let inputRef: HTMLInputElement;
+  let containerRef: HTMLDivElement;
+  let currentSuggestion: number = -1;
+  let title: string = '';
+  let results: any[] = [];
+  let token;
+  let loader: GMaps.Loader;
+  let placesApi: { [key: string]: any } = {};
+
+  let request: {
+    input: string;
+    language: string;
+    region: string;
+    sessionToken: any;
+  } = {
+    input: initialValue,
+    language,
+    region,
+    sessionToken: '',
+  };
+
+  let isInitialized = false;
+  $: if (initialValue && !isInitialized) {
+    request.input = initialValue;
+    title = initialValue;
+    isInitialized = true;
+  }
+
+  $: if (mode === 'cityState' && placeholder === 'Search for location...') {
+    placeholder = 'Search for city, state...';
+  }
+
+  const reset = () => {
+    currentSuggestion = -1;
+    results = [];
+    refreshToken(request).catch(() => {});
+  };
+
+  const makeAcRequest = async (
+    event: Event & { currentTarget: HTMLInputElement }
+  ): Promise<void> => {
+    const target = event.currentTarget as HTMLInputElement;
+    if (target?.value === '') {
+      title = '';
+      request.input = '';
+      results = [];
+      return;
+    }
+
+    title = target.value;
+    request.input = target.value;
+
+    try {
+      const { suggestions } =
+        await placesApi.AutocompleteSuggestion.fetchAutocompleteSuggestions(
+          request
+        );
+
+      if (mode === 'cityState') {
+        results = suggestions
+          .filter(s => {
+            const types = s.placePrediction.types || [];
+
+            // Accept cities (locality) and city-level neighborhoods (sublocality)
+            // like Van Nuys, North Hollywood - but not states or counties
+            return types.some(
+              type =>
+                type === 'locality' ||
+                type === 'sublocality' ||
+                type === 'sublocality_level_1'
+            );
+          })
+          .map(s => {
+            let displayText = s.placePrediction.text.toString();
+
+            // Format as "City, State" (first two parts)
+            const parts = displayText.split(', ');
+            if (parts.length >= 2) {
+              displayText = parts.slice(0, 2).join(', ');
+            }
+
+            return {
+              to_place: s.placePrediction.toPlace(),
+              text: displayText,
+              originalText: s.placePrediction.text.toString(),
+            };
+          });
+      } else {
+        results = suggestions.map(s => ({
+          to_place: s.placePrediction.toPlace(),
+          text: s.placePrediction.text.toString(),
+        }));
+      }
+    } catch (e: any) {
+      onError(
+        (e.name || 'An error occurred') +
+          ' - ' +
+          (e.message || 'see console for details.')
+      );
+    }
+  };
+
+  const onPlaceSelected = async (
+    place: any,
+    originalText?: string
+  ): Promise<void> => {
+    results = [];
+    currentSuggestion = -1;
+
+    try {
+      await place.fetchFields({
+        fields: fetchFields,
+      });
+      let placeData = place.toJSON();
+      request.input = originalText || placeData.text || '';
+      title = originalText || placeData.text || '';
+      onResponse(placeData);
+    } catch (e: any) {
+      onError(
+        (e.name || 'An error occurred') +
+          ' - ' +
+          (e.message || 'error fetching place details')
+      );
+    }
+
+    setTimeout(() => {
+      refreshToken(request).catch(() => {});
+    }, 100);
+  };
+
+  const refreshToken = async (req: any) => {
+    try {
+      token = new placesApi.AutocompleteSessionToken();
+      req.sessionToken = token;
+      return req;
+    } catch (e: any) {
+      onError(
+        (e.name || 'An error occurred') +
+          ' - ' +
+          (e.message || 'error fetch token')
+      );
+      return req;
+    }
+  };
+
+  onMount(() => {
+    if (initialValue) {
+      request.input = initialValue;
+      title = initialValue;
+    }
+
+    // Add click outside listener
+    document.addEventListener('click', handleClickOutside);
+
+    // Initialize Google Maps API
+    const initGoogleMaps = async () => {
+      if (!PUBLIC_GOOGLE_MAPS_API_KEY) {
+        onError('Google Maps API key is required');
+        return;
+      }
+
+      try {
+        loader = new Loader({
+          apiKey: PUBLIC_GOOGLE_MAPS_API_KEY,
+          version: 'weekly',
+          libraries: ['places'],
+        });
+
+        const { AutocompleteSessionToken, AutocompleteSuggestion } =
+          await loader.importLibrary('places');
+        placesApi.AutocompleteSessionToken = AutocompleteSessionToken;
+        placesApi.AutocompleteSuggestion = AutocompleteSuggestion;
+        token = new placesApi.AutocompleteSessionToken();
+        request.sessionToken = token;
+      } catch (e: any) {
+        onError(
+          (e.name || 'An error occurred') +
+            ' - ' +
+            (e.message || 'Error loading Google Maps API')
+        );
+      }
+    };
+
+    initGoogleMaps();
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  });
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (results.length === 0) {
+      return;
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (currentSuggestion === -1) {
+        currentSuggestion = 0;
+      } else {
+        currentSuggestion =
+          currentSuggestion < results.length - 1 ? currentSuggestion + 1 : 0;
+      }
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (currentSuggestion === -1) {
+        currentSuggestion = results.length - 1;
+      } else {
+        currentSuggestion =
+          currentSuggestion > 0 ? currentSuggestion - 1 : results.length - 1;
+      }
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (currentSuggestion >= 0 && currentSuggestion < results.length) {
+        onPlaceSelected(
+          results[currentSuggestion].to_place,
+          results[currentSuggestion].text
+        );
+      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      reset();
+    }
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (containerRef && !containerRef.contains(event.target as Node)) {
+      reset();
+    }
+  }
+</script>
+
+<div class="w-full">
+  <div
+    bind:this={containerRef}
+    class="relative rounded-lg {shouldAnimate ? 'transition-transform duration-200 focus-within:scale-[1.01]' : ''}"
+  >
+    <!-- Search icon -->
+    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 z-10">
+      <SearchOutline class="w-5 h-5 text-gray-500 dark:text-gray-400" />
+    </div>
+
+    <!-- Input field - Flowbite native pattern with left icon -->
+    <input
+      bind:this={inputRef}
+      type="text"
+      name="location"
+      class="block w-full h-10 pl-10 pr-2.5 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm font-medium rounded-lg
+             focus:ring-blue-500 focus:border-blue-500 focus:outline-none
+             hover:border-blue-500
+             disabled:opacity-50 disabled:cursor-not-allowed
+             placeholder:text-gray-500
+             dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400
+             dark:focus:ring-blue-500 dark:focus:border-blue-500
+             dark:hover:border-blue-500"
+      {placeholder}
+      {autocomplete}
+      {disabled}
+      aria-controls="options"
+      bind:value={title}
+      on:input={makeAcRequest}
+      on:keydown={onKeyDown}
+    />
+
+    {#if results.length > 0}
+      <!-- Keyboard hints - hidden on mobile -->
+      <div class="absolute inset-y-0 right-0 hidden md:flex items-center p-1.5 gap-1">
+        <kbd class="inline-flex items-center justify-center px-1 border border-gray-300 rounded text-xs text-gray-500 bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">Esc</kbd>
+        <kbd class="inline-flex items-center justify-center w-6 border border-gray-300 rounded text-xs text-gray-500 bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">&uArr;</kbd>
+        <kbd class="inline-flex items-center justify-center w-6 border border-gray-300 rounded text-xs text-gray-500 bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">&dArr;</kbd>
+      </div>
+
+      <!-- Dropdown - Flowbite native pattern -->
+      <ul
+        class="absolute top-full left-0 right-0 z-50 mt-1 py-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto
+               dark:bg-gray-800 dark:border-gray-600"
+        id="options"
+      >
+        {#each results as place, i}
+          <li
+            class="cursor-pointer text-gray-900 transition-colors duration-100
+                   dark:text-white
+                   {i === currentSuggestion ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-100 dark:hover:bg-gray-700'}"
+            id="option-{i + 1}"
+          >
+            <button
+              type="button"
+              class="block w-full text-left px-4 py-3 text-sm bg-transparent border-none cursor-pointer
+                     focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-700"
+              tabindex={i + 1}
+              on:click={() => onPlaceSelected(place.to_place, place.text)}
+            >
+              <span class="font-medium">{place.text}</span>
+            </button>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+</div>

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaceAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.ts"],"names":[],"mappings":"AAkTA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,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,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,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,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,iBAAiB;kBAV4Q,MAAM,EAAE;kBAAgB,MAAM;eAAa,MAAM;aAAW,MAAM;mBAAiB,MAAM;mBAAiB,MAAM;iBAAe,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI;cAAY,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;WAAS,MAAM,GAAG,WAAW;mBAAiB,OAAO;eAAa,OAAO;;;kBAU3b,CAAC;AACrF,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAClE,eAAe,iBAAiB,CAAC"}

package/dist/recipes/inputs/Search.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/Search.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA;;;;;;;;;;;;;;;;;;;;;;eAAgM;sCAT1J,KAAK,EAAE,KAAK;;;;;6CALL,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/recipes/inputs/SelectDropdown.svelte.d.ts

@@ -0,0 +1,51 @@
+export default SelectDropdown;
+type SelectDropdown = SvelteComponent<{
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    placeholder?: string | undefined;
+    options?: {
+        label: string;
+        value: string;
+    }[] | undefined;
+    selected?: {
+        label: string;
+        value: string;
+    } | null | undefined;
+}, {
+    select: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const SelectDropdown: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    placeholder?: string | undefined;
+    options?: {
+        label: string;
+        value: string;
+    }[] | undefined;
+    selected?: {
+        label: string;
+        value: string;
+    } | null | undefined;
+}, {
+    select: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, 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=SelectDropdown.svelte.d.ts.map

package/dist/recipes/inputs/SelectDropdown.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectDropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/SelectDropdown.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAmLA;;;;;eAdyB,MAAM;eAAS,MAAM;;;eAC3B,MAAM;eAAS,MAAM;;;;;;mBAa2I;6CATtI,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/recipes/modals/AlertModal.svelte

@@ -0,0 +1,130 @@
+<script>
+  /**
+   * AlertModal - Simple alert with single action and optional auto-close
+   *
+   * A lighter alternative to StatusModal for simple notifications.
+   * Supports auto-close after a delay.
+   *
+   * @example
+   * <AlertModal
+   *   bind:show={showAlert}
+   *   variant="success"
+   *   title="Changes saved"
+   *   message="Your changes have been saved successfully."
+   *   autoClose={3000}
+   * />
+   */
+  import { createEventDispatcher, onDestroy } from 'svelte';
+  import Modal from '../../primitives/Modal/Modal.svelte';
+  import Button from '../../primitives/Button/Button.svelte';
+  import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from '../../primitives/Icons';
+
+  /** Whether the modal is visible */
+  export let show = false;
+
+  /** Alert variant */
+  export let variant = 'info';
+
+  /** Alert title */
+  export let title = '';
+
+  /** Alert message */
+  export let message = '';
+
+  /** Button text */
+  export let buttonText = 'OK';
+
+  /** Auto-close delay in milliseconds (0 to disable) */
+  export let autoClose = 0;
+
+  /** Modal size */
+  export let size = 'small';
+
+  const dispatch = createEventDispatcher();
+  let autoCloseTimer;
+
+  // Start auto-close timer when modal opens
+  $: if (show && autoClose > 0) {
+    clearTimeout(autoCloseTimer);
+    autoCloseTimer = setTimeout(() => {
+      closeModal();
+    }, autoClose);
+  }
+
+  onDestroy(() => {
+    clearTimeout(autoCloseTimer);
+  });
+
+  function closeModal() {
+    show = false;
+    dispatch('close');
+  }
+
+  function handleConfirm() {
+    dispatch('confirm');
+    closeModal();
+  }
+
+  // Variant styles
+  const variantStyles = {
+    success: {
+      bg: 'bg-green-100 dark:bg-green-900/30',
+      icon: 'text-green-600 dark:text-green-400',
+      button: 'default'
+    },
+    error: {
+      bg: 'bg-red-100 dark:bg-red-900/30',
+      icon: 'text-red-600 dark:text-red-400',
+      button: 'red'
+    },
+    warning: {
+      bg: 'bg-amber-100 dark:bg-amber-900/30',
+      icon: 'text-amber-600 dark:text-amber-400',
+      button: 'default'
+    },
+    info: {
+      bg: 'bg-blue-100 dark:bg-blue-900/30',
+      icon: 'text-blue-600 dark:text-blue-400',
+      button: 'default'
+    }
+  };
+
+  $: styles = variantStyles[variant] || variantStyles.info;
+</script>
+
+<Modal bind:show {size}>
+  <div slot="header" class="text-center">
+    <div class="flex justify-center items-center">
+      <div class="w-14 h-14 rounded-full {styles.bg} flex items-center justify-center">
+        {#if variant === 'success'}
+          <CheckOutline class="w-7 h-7 {styles.icon}" />
+        {:else if variant === 'error'}
+          <CloseOutline class="w-7 h-7 {styles.icon}" />
+        {:else if variant === 'warning'}
+          <ExclamationTriangleOutline class="w-7 h-7 {styles.icon}" />
+        {:else}
+          <InfoCircleOutline class="w-7 h-7 {styles.icon}" />
+        {/if}
+      </div>
+    </div>
+    {#if title}
+      <h2 class="text-xl font-medium text-gray-900 dark:text-white mt-4">{title}</h2>
+    {/if}
+  </div>
+
+  <div slot="body" class="text-center mt-4">
+    {#if message}
+      <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{message}</p>
+    {/if}
+  </div>
+
+  <div slot="footer" class="w-full">
+    <Button
+      size="full"
+      variant={styles.button}
+      on:click={handleConfirm}
+    >
+      {buttonText}
+    </Button>
+  </div>
+</Modal>

package/dist/recipes/modals/AlertModal.svelte.d.ts

@@ -0,0 +1,45 @@
+export default AlertModal;
+type AlertModal = SvelteComponent<{
+    size?: string | undefined;
+    title?: string | undefined;
+    message?: string | undefined;
+    variant?: string | undefined;
+    show?: boolean | undefined;
+    buttonText?: string | undefined;
+    autoClose?: number | undefined;
+}, {
+    close: CustomEvent<any>;
+    confirm: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const AlertModal: $$__sveltets_2_IsomorphicComponent<{
+    size?: string | undefined;
+    title?: string | undefined;
+    message?: string | undefined;
+    variant?: string | undefined;
+    show?: boolean | undefined;
+    buttonText?: string | undefined;
+    autoClose?: number | undefined;
+}, {
+    close: CustomEvent<any>;
+    confirm: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, 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=AlertModal.svelte.d.ts.map

package/dist/recipes/modals/AlertModal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/AlertModal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA0JA;;;;;;;;;;;;;mBAA4L;6CAT/I,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/recipes/modals/ConfirmationModal.spec.d.ts.map

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

package/dist/recipes/modals/ConfirmationModal.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationModal.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/ConfirmationModal.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAoHA;;;;mBAA6H;6CAThF,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;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;IACtG,eAAe,QAAQ,CAAC"}

package/dist/recipes/modals/ConfirmationModal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/ConfirmationModal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoKA;;;;;;;;;;;;;;;;;;;;;mBAAoS;6CATvP,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/recipes/modals/InputModal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/InputModal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAka;6CATrX,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/recipes/modals/ModalStateManager.spec.d.ts.map

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