@getmicdrop/svelte-components 5.21.0 → 5.21.2

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":"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"}
+{"version":3,"file":"PlaceAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.ts"],"names":[],"mappings":"AA2UA,QAAA,MAAM,iBAAiB;kBAhTL,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;qBAqSqB,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/recipes/inputs/Search.spec.js

@@ -109,7 +109,7 @@ describe('Search Input Styling', () => {
   test('has gray background', () => {
     const { container } = render(Search);
     const input = container.querySelector('input');
-    expect(input).toHaveClass('bg-gray-50');
+    expect(input).toHaveClass('bg-bg-secondary');
   });
 
   test('has rounded corners', () => {
@@ -122,14 +122,14 @@ describe('Search Input Styling', () => {
     const { container } = render(Search);
     const input = container.querySelector('input');
     expect(input).toHaveClass('border');
-    expect(input).toHaveClass('border-gray-300');
+    expect(input).toHaveClass('border-stroke-primary');
   });
 
   test('has focus ring', () => {
     const { container } = render(Search);
     const input = container.querySelector('input');
     expect(input).toHaveClass('focus:ring-4');
-    expect(input).toHaveClass('focus:ring-blue-300');
+    expect(input).toHaveClass('focus:ring-focus-ring');
   });
 });
 

package/dist/recipes/inputs/Search.svelte

@@ -1,110 +1,110 @@
-<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>
+<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-bg-secondary font-medium border border-stroke-primary rounded-lg transition-colors focus:outline-hidden focus:ring-4 focus:ring-focus-ring focus:border-interactive-border hover:border-interactive-border placeholder-muted-foreground [&::-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/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';