@getmicdrop/svelte-components 5.18.0 → 5.19.0

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

@@ -1,28 +1,33 @@
-/** Google Places API address component */ interface AddressComponent {
-    longText: string;
-    shortText: string;
-    types: string[];
-}
-/** Google Places API response data */ interface PlaceData {
-    formattedAddress?: string;
-    addressComponents?: AddressComponent[];
-    text?: string;
-    [key: string]: unknown;
-}
-interface Props {
+declare const PlaceAutocomplete: import("svelte").Component<{
     fetchFields?: string[];
     placeholder?: string;
     language?: string;
     region?: string;
     autocomplete?: string;
     initialValue?: string;
-    onResponse?: (data: PlaceData) => void;
+    onResponse?: (data: {
+        [key: string]: unknown;
+        formattedAddress?: string;
+        addressComponents?: {
+            longText: string;
+            shortText: string;
+            types: string[];
+        }[];
+        text?: string;
+    }) => void;
     onError?: (error: string) => void;
-    mode?: 'full' | 'cityState';
+    mode?: "full" | "cityState";
     animateFocus?: boolean;
     disabled?: boolean;
-}
-declare const PlaceAutocomplete: import("svelte").Component<Props, {}, "placeholder">;
+    labels?: Partial<{
+        anErrorOccurred: string;
+        seeConsoleForDetails: string;
+        errorFetchingPlaceDetails: string;
+        errorFetchToken: string;
+        errorLoadingGoogleMapsApi: string;
+        googleMapsApiKeyRequired: string;
+    }>;
+}, {}, "placeholder">;
 type PlaceAutocomplete = ReturnType<typeof PlaceAutocomplete>;
 export default PlaceAutocomplete;
 //# sourceMappingURL=PlaceAutocomplete.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlaceAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.ts"],"names":[],"mappings":"AASA,0CAA0C,CAAE,UAAU,gBAAgB;IAAM,QAAQ,EAAE,MAAM,CAAC;IAAI,SAAS,EAAE,MAAM,CAAC;IAAI,KAAK,EAAE,MAAM,EAAE,CAAC;CAAG;AACzI,sCAAsC,CAAE,UAAU,SAAS;IAAM,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAAI,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAAI,IAAI,CAAC,EAAE,MAAM,CAAC;IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAAG;AAMrL,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8SH,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"PlaceAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.ts"],"names":[],"mappings":"AA8UA,QAAA,MAAM,iBAAiB;kBAnTL,MAAM,EAAE;kBACR,MAAM;eACT,MAAM;aACR,MAAM;mBACA,MAAM;mBACN,MAAM;iBACR,CAAC,IAAI;;2BATkM,MAAM;4BAAyB;sBAArK,MAAM;uBAAgB,MAAM;mBAAY,MAAM,EAAE;WAAuI;eAAY,MAAM;KAS1P,KAAK,IAAI;cAC5B,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;WAC1B,MAAM,GAAG,WAAW;mBACZ,OAAO;eACX,OAAO;aACT,OAAO;;;;;;;MAAsB;qBAwSqB,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/recipes/inputs/Search.svelte

@@ -1,102 +1,110 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { SearchOutline } from "../../primitives/Icons";
-  import { typography } from '../../tokens/typography';
-
-  interface Props {
-    value?: unknown;
-    placeholder?: string;
-    size?: 'sm' | 'md' | 'lg';
-    disabled?: boolean;
-    id?: string;
-    name?: string;
-    class?: string;
-    oninput?: (event: Event) => void;
-    onchange?: (event: Event) => void;
-    onkeydown?: (event: KeyboardEvent) => void;
-    onkeyup?: (event: KeyboardEvent) => void;
-    onfocus?: (event: FocusEvent) => void;
-    onblur?: (event: FocusEvent) => void;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  // API compatible with flowbite-svelte Search
-  let {
-    value = $bindable(""),
-    placeholder = "Search",
-    size = "lg",
-    disabled = false,
-    id = "",
-    name = "",
-    class: className = "",
-    oninput,
-    onchange,
-    onkeydown,
-    onkeyup,
-    onfocus,
-    onblur,
-    children,
-    ...restProps
-  }: Props = $props();
-
-  const sizes = {
-    sm: { icon: "w-3.5 h-3.5", input: `h-8 ${typography.xs} pl-8`, wrapper: "h-8" },
-    md: { icon: "w-4 h-4", input: `h-10 ${typography.sm} pl-9`, wrapper: "h-10" },
-    lg: { icon: "w-5 h-5", input: `h-11 ${typography.sm} pl-10`, wrapper: "h-11" }
-  };
-
-  let sizeConfig = $derived(sizes[size] || sizes.lg);
-
-  function handleInput(event: Event) {
-    value = (event.target as HTMLInputElement).value;
-    oninput?.(event);
-  }
-
-  function handleChange(event: Event) {
-    onchange?.(event);
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    onkeydown?.(event);
-  }
-
-  function handleKeyup(event: KeyboardEvent) {
-    onkeyup?.(event);
-  }
-
-  function handleFocus(event: FocusEvent) {
-    onfocus?.(event);
-  }
-
-  function handleBlur(event: FocusEvent) {
-    onblur?.(event);
-  }
-</script>
-
-<div class="relative w-full {sizeConfig.wrapper} {className}">
-  <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-    <SearchOutline class={`${typography.iconMuted} ${sizeConfig.icon}`} />
-  </div>
-  <input
-    type="search"
-    {id}
-    {name}
-    {placeholder}
-    {disabled}
-    class="w-full pr-3 bg-gray-50 dark:bg-gray-700 font-medium border border-gray-300 dark:border-gray-600 rounded-lg transition-colors focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:border-blue-500 hover:border-blue-500 placeholder-gray-500 dark:placeholder-gray-400 [&::-webkit-search-cancel-button]:appearance-none {sizeConfig.input} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
-    bind:value
-    oninput={handleInput}
-    onchange={handleChange}
-    onkeydown={handleKeydown}
-    onkeyup={handleKeyup}
-    onfocus={handleFocus}
-    onblur={handleBlur}
-    {...restProps}
-  />
-  {#if children}
-    <div class={`absolute inset-y-0 right-0 flex items-center ${typography.iconMuted}`}>
-      {@render children()}
-    </div>
-  {/if}
-</div>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { SearchOutline } from "../../primitives/Icons";
+  import { typography } from '../../tokens/typography';
+
+  const defaultLabels = {
+    placeholder: 'Search',
+  };
+
+  interface Props {
+    value?: unknown;
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    class?: string;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    onkeyup?: (event: KeyboardEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+    children?: Snippet;
+    labels?: Partial<typeof defaultLabels>;
+    [key: string]: unknown;
+  }
+
+  // API compatible with flowbite-svelte Search
+  let {
+    value = $bindable(""),
+    placeholder = undefined,
+    size = "lg",
+    disabled = false,
+    id = "",
+    name = "",
+    class: className = "",
+    oninput,
+    onchange,
+    onkeydown,
+    onkeyup,
+    onfocus,
+    onblur,
+    children,
+    labels: userLabels = {},
+    ...restProps
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  const sizes = {
+    sm: { icon: "w-3.5 h-3.5", input: `h-8 ${typography.xs} pl-8`, wrapper: "h-8" },
+    md: { icon: "w-4 h-4", input: `h-10 ${typography.sm} pl-9`, wrapper: "h-10" },
+    lg: { icon: "w-5 h-5", input: `h-11 ${typography.sm} pl-10`, wrapper: "h-11" }
+  };
+
+  let sizeConfig = $derived(sizes[size] || sizes.lg);
+
+  function handleInput(event: Event) {
+    value = (event.target as HTMLInputElement).value;
+    oninput?.(event);
+  }
+
+  function handleChange(event: Event) {
+    onchange?.(event);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    onkeydown?.(event);
+  }
+
+  function handleKeyup(event: KeyboardEvent) {
+    onkeyup?.(event);
+  }
+
+  function handleFocus(event: FocusEvent) {
+    onfocus?.(event);
+  }
+
+  function handleBlur(event: FocusEvent) {
+    onblur?.(event);
+  }
+</script>
+
+<div class="relative w-full {sizeConfig.wrapper} {className}">
+  <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+    <SearchOutline class={`${typography.iconMuted} ${sizeConfig.icon}`} />
+  </div>
+  <input
+    type="search"
+    {id}
+    {name}
+    placeholder={placeholder ?? labels.placeholder}
+    {disabled}
+    class="w-full pr-3 bg-gray-50 dark:bg-gray-700 font-medium border border-gray-300 dark:border-gray-600 rounded-lg transition-colors focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:border-blue-500 hover:border-blue-500 placeholder-gray-500 dark:placeholder-gray-400 [&::-webkit-search-cancel-button]:appearance-none {sizeConfig.input} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+    bind:value
+    oninput={handleInput}
+    onchange={handleChange}
+    onkeydown={handleKeydown}
+    onkeyup={handleKeyup}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    {...restProps}
+  />
+  {#if children}
+    <div class={`absolute inset-y-0 right-0 flex items-center ${typography.iconMuted}`}>
+      {@render children()}
+    </div>
+  {/if}
+</div>

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

@@ -1,8 +1,9 @@
 import type { Snippet } from 'svelte';
-interface Props {
+declare const Search: import("svelte").Component<{
+    [key: string]: unknown;
     value?: unknown;
     placeholder?: string;
-    size?: 'sm' | 'md' | 'lg';
+    size?: "sm" | "md" | "lg";
     disabled?: boolean;
     id?: string;
     name?: string;
@@ -14,9 +15,10 @@ interface Props {
     onfocus?: (event: FocusEvent) => void;
     onblur?: (event: FocusEvent) => void;
     children?: Snippet;
-    [key: string]: unknown;
-}
-declare const Search: import("svelte").Component<Props, {}, "value">;
+    labels?: Partial<{
+        placeholder: string;
+    }>;
+}, {}, "value">;
 type Search = ReturnType<typeof Search>;
 export default Search;
 //# sourceMappingURL=Search.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/Search.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA0EH,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/Search.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAsGtC,QAAA,MAAM,MAAM;;YAxFA,OAAO;kBACD,MAAM;WACb,IAAI,GAAG,IAAI,GAAG,IAAI;eACd,OAAO;SACb,MAAM;WACJ,MAAM;YACL,MAAM;cACJ,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;eACrB,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;gBACrB,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI;cAChC,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI;cAC9B,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI;aAC5B,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI;eACzB,OAAO;aACT,OAAO;;MAAsB;eA0EU,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/recipes/inputs/index.js

@@ -1,8 +1,8 @@
-// Composite input components - built on primitives
-export { default as MultiSelect } from './MultiSelect.svelte';
-export { default as OTPInput } from './OTPInput.svelte';
-export { default as PasswordInput } from './PasswordInput.svelte';
-export { default as PasswordStrengthIndicator } from './PasswordStrengthIndicator/PasswordStrengthIndicator.svelte';
-export { default as PlaceAutocomplete } from './PlaceAutocomplete/PlaceAutocomplete.svelte';
-export { default as PhoneInput } from './PhoneInput.svelte';
-export { default as Search } from './Search.svelte';
+// Composite input components - built on primitives
+export { default as MultiSelect } from './MultiSelect.svelte';
+export { default as OTPInput } from './OTPInput.svelte';
+export { default as PasswordInput } from './PasswordInput.svelte';
+export { default as PasswordStrengthIndicator } from './PasswordStrengthIndicator/PasswordStrengthIndicator.svelte';
+export { default as PlaceAutocomplete } from './PlaceAutocomplete/PlaceAutocomplete.svelte';
+export { default as PhoneInput } from './PhoneInput.svelte';
+export { default as Search } from './Search.svelte';