flowbite-svelte 0.44.8 → 0.44.9

package/src/lib/forms/InputAddon.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { SizeType } from '$lib/types';
+  import { twMerge } from 'tailwind-merge';
+  import { getContext } from 'svelte';
+  import { clampSize } from '$lib/forms/Input.svelte';
+
+  export let size: 'sm' | 'md' | 'lg' | undefined = undefined;
+
+  // tinted if put in component having its own background
+  let background: boolean = getContext('background');
+
+  let group: { size: SizeType } = getContext('group');
+
+  const borderClasses = {
+    base: 'border-gray-300 dark:border-gray-600',
+    tinted: 'border-gray-300 dark:border-gray-500'
+  };
+
+  const darkBgClasses = {
+    base: 'dark:bg-gray-600 dark:text-gray-400',
+    tinted: 'dark:bg-gray-500 dark:text-gray-300'
+  };
+
+  const divider = {
+    base: 'dark:border-r-gray-700 dark:last:border-r-gray-600',
+    tinted: 'dark:border-r-gray-600 dark:last:border-r-gray-500'
+  };
+
+  const textSizes = { sm: 'sm:text-xs', md: 'text-sm', lg: 'sm:text-base' };
+  const prefixPadding = { sm: 'px-2', md: 'px-3', lg: 'px-4' };
+
+  // size: explicit, inherited, default
+  $: _size = size || clampSize(group?.size) || 'md';
+
+  $: divClass = twMerge(textSizes[_size], prefixPadding[_size], background ? borderClasses['tinted'] : borderClasses['base'], 'text-gray-500 bg-gray-200', background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, 'inline-flex items-center border-t border-b first:border-l border-r', 'first:rounded-l-lg last:rounded-r-lg', $$props.class);
+</script>
+
+<div {...$$restProps} class={divClass}>
+  <slot />
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let size: 'sm' | 'md' | 'lg' | undefined = undefined;
+-->

package/src/lib/forms/Label.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let color: 'gray' | 'green' | 'red' | 'disabled' = 'gray';
+  export let defaultClass: string = 'text-sm font-medium block';
+  export let show: boolean = true;
+
+  let node: HTMLLabelElement;
+
+  const colorClasses = {
+    gray: 'text-gray-900 dark:text-gray-300',
+    green: 'text-green-700 dark:text-green-500',
+    red: 'text-red-700 dark:text-red-500',
+    disabled: 'text-gray-400 dark:text-gray-500'
+  };
+
+  // function checkDisabled(node: HTMLLabelElement) {
+  $: {
+    const control: HTMLInputElement = node?.control as HTMLInputElement;
+    color = control?.disabled ? 'disabled' : color;
+  }
+
+  $: labelClass = twMerge(defaultClass, colorClasses[color], $$props.class);
+</script>
+
+{#if show}
+  <!-- svelte-ignore a11y-label-has-associated-control -->
+  <label bind:this={node} {...$$restProps} class={labelClass}><slot /></label>
+{:else}
+  <slot />
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let color: 'gray' | 'green' | 'red' | 'disabled' = 'gray';
+@prop export let defaultClass: string = 'text-sm font-medium block';
+@prop export let show: boolean = true;
+-->

package/src/lib/forms/MultiSelect.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+  import Badge from '$lib/badges/Badge.svelte';
+  import { twMerge } from 'tailwind-merge';
+  import type { FormSizeType, SelectOptionType } from '../types';
+  import CloseButton from '$lib/utils/CloseButton.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import { onMount } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  export let items: SelectOptionType[] = [];
+  export let value: (string | number)[] = [];
+  export let size: FormSizeType = 'md';
+  export let dropdownClass: string = '';
+
+  let selectItems: SelectOptionType[] = [];
+  let show: boolean = false;
+
+  const sizes = {
+    sm: 'px-2 py-1',
+    md: 'px-3 py-2',
+    lg: 'px-4 py-3'
+  };
+
+  // Container
+  const multiSelectClass: string = 'relative border border-gray-300 flex items-center rounded-lg gap-2 dark:border-gray-600 focus-within:ring-1 focus-within:border-primary-500 ring-primary-500 dark:focus-within:border-primary-500 dark:ring-primary-500';
+
+  // Dropdown
+  let multiSelectDropdown: string;
+  $: multiSelectDropdown = twMerge('absolute z-50 p-3 flex flex-col gap-1 max-h-64 bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-600 left-0 top-[calc(100%+1rem)] rounded-lg cursor-pointer overflow-y-scroll w-full', dropdownClass);
+
+  // Items
+  const itemsClass: string = 'py-2 px-3 rounded-lg text-gray-600 hover:text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-gray-600';
+  // Selected items
+  const itemsSelectClass: string = 'bg-gray-100 text-black hover:text-black dark:text-white dark:bg-gray-600 dark:hover:text-white';
+
+  onMount(() => {
+    if (value.length) {
+      items.map((item) => {
+        if (value.includes(item.value)) {
+          selectItems.push(item);
+        }
+      });
+    }
+  });
+
+  const selectOption = (select: SelectOptionType) => {
+    if (selectItems.includes(select)) {
+      clearThisOption(select);
+    } else {
+      selectItems.push(select);
+      value.push(select.value);
+      selectItems = selectItems;
+      value = value;
+      dispatch('selected', selectItems);
+    }
+  };
+
+  const clearAll = (e: MouseEvent) => {
+    e.stopPropagation();
+    selectItems = [];
+    value = [];
+    dispatch('selected', selectItems);
+  };
+
+  const clearThisOption = (select: SelectOptionType) => {
+    if (selectItems.includes(select)) {
+      selectItems = selectItems.filter((o) => o !== select);
+      dispatch('selected', selectItems);
+    }
+    if (value.includes(select.value)) {
+      value = value.filter((o) => o !== select.value);
+    }
+  };
+</script>
+
+<!-- Hidden select for form submission -->
+<select {...$$restProps} bind:value hidden multiple>
+  {#each items as { value, name }}
+    <option {value}>{name}</option>
+  {/each}
+</select>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div on:click={() => (show = !show)} on:focusout={() => (show = false)} tabindex="-1" role="listbox" class={twMerge(multiSelectClass, sizes[size], $$props.class)}>
+  <span class="flex gap-2 flex-wrap">
+    {#if selectItems.length}
+      {#each selectItems as item (item.name)}
+        <slot {item} clear={() => clearThisOption(item)}>
+          <Badge color="dark" large={size === 'lg'} dismissable params={{ duration: 100 }} on:close={() => clearThisOption(item)}>
+            {item.name}
+          </Badge>
+        </slot>
+      {/each}
+    {/if}
+  </span>
+  <div class="flex ml-auto gap-2 items-center">
+    {#if selectItems.length}
+      <CloseButton on:click={clearAll} color="none" class="p-0 focus:ring-gray-400" />
+    {/if}
+    <div class="w-[1px] bg-gray-300 dark:bg-gray-600" />
+    <svg class="cursor-pointer h-3 w-3 ml-1 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={show ? 'm1 5 4-4 4 4' : 'm9 1-4 4-4-4'} />
+    </svg>
+  </div>
+
+  {#if show}
+    <div on:click|stopPropagation role="presentation" class={multiSelectDropdown}>
+      {#each items as item (item.name)}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <div on:click={() => selectOption(item)} role="presentation" class={twMerge(itemsClass, selectItems.includes(item) && itemsSelectClass)}>
+          {item.name}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let items: SelectOptionType[] = [];
+@prop export let value: (string | number)[] = [];
+@prop export let size: FormSizeType = 'md';
+@prop export let dropdownClass: string = '';
+-->

package/src/lib/forms/NumberInput.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import Input from './Input.svelte';
+
+  export let value: number = 0;
+</script>
+
+<Input let:props {...$$restProps}>
+  <input {...props} type="number" bind:value on:blur on:change on:click on:contextmenu on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste on:input />
+</Input>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let value: number = 0;
+-->

package/src/lib/forms/Radio.svelte

@@ -0,0 +1,53 @@
+<script context="module" lang="ts">
+  // this part is shared between Radio and Checkbox
+  import { twMerge } from 'tailwind-merge';
+
+  const colorClasses: Record<FormColorType, string> = {
+    primary: 'text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600',
+    secondary: 'text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600',
+    red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
+    green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
+    purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
+    teal: 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600',
+    yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600',
+    orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
+    blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
+  };
+
+  export const labelClass = (inline: boolean, extraClass: string) => twMerge(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
+  export let spacing: string = 'mr-2';
+
+  export const inputClass = (custom: boolean, color: FormColorType, rounded: boolean, tinted: boolean, extraClass: string) => twMerge('w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2', spacing, tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', custom && 'sr-only peer', rounded && 'rounded', colorClasses[color], extraClass);
+</script>
+
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { FormColorType } from '../types';
+  import Label from './Label.svelte';
+
+  export let color: FormColorType = 'primary';
+  export let custom: boolean = false;
+  export let inline: boolean = false;
+  export let group: number | string = '';
+  export let value: number | string = '';
+
+  // tinted if put in component having its own background
+  let background: boolean = getContext('background');
+</script>
+
+<Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
+  <input type="radio" bind:group on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {value} {...$$restProps} class={inputClass(custom, color, false, background, $$slots.default || $$props.class)} />
+  <slot />
+</Label>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let spacing: string = 'mr-2';
+@prop export let color: FormColorType = 'primary';
+@prop export let custom: boolean = false;
+@prop export let inline: boolean = false;
+@prop export let group: number | string = '';
+@prop export let value: number | string = '';
+-->

package/src/lib/forms/RadioInline.svelte

@@ -0,0 +1,9 @@
+<div class="flex">
+  <slot />
+</div>
+
+<!--
+  @component
+  [Go to ](https://flowbite-svelte.com/docs/components/)
+  
+-->

package/src/lib/forms/Range.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let value: number;
+  export let size: 'sm' | 'md' | 'lg' = 'md';
+
+  const sizes = {
+    sm: 'h-1 range-sm',
+    md: 'h-2',
+    lg: 'h-3 range-lg'
+  };
+  let inputClass: string;
+  $: inputClass = twMerge('w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700', sizes[size] ?? sizes.md, $$props.class);
+</script>
+
+<input type="range" bind:value {...$$restProps} class={inputClass} on:change on:click on:keydown on:keypress on:keyup />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let value: number;
+@prop export let size: 'sm' | 'md' | 'lg' = 'md';
+-->

package/src/lib/forms/Search.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { FormSizeType } from '$lib/types';
+  import Wrapper from '$lib/utils/Wrapper.svelte';
+  import Input from './Input.svelte';
+
+  export let size: FormSizeType = 'lg';
+  export let placeholder: string = 'Search';
+  export let value: any = undefined;
+
+  const sizes = {
+    sm: 'w-3.5 h-3.5',
+    md: 'w-5 h-5',
+    lg: 'w-6 h-6'
+  };
+</script>
+
+<Wrapper class="relative w-full" show={$$slots.default}>
+  <Input bind:value on:blur on:change on:input on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste type="search" {placeholder} {size} {...$$restProps} class={$$props.class}>
+    <svg slot="left" class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+    </svg>
+    <!-- We can use it here. See below. This will trigger right padding
+      <slot slot="right" />
+    -->
+  </Input>
+  <!-- This slot should be within Input as a slot='right'
+    Svelete has an issue with forwarded slots and even empty slot here will appear as existing slot in Input.
+    Due to that we need the below slot and Wrapper around
+  -->
+  {#if $$slots.default}
+    <div class="flex absolute inset-y-0 right-0 items-center text-gray-500 dark:text-gray-400">
+      <slot />
+    </div>
+  {/if}
+</Wrapper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let size: FormSizeType = 'lg';
+@prop export let placeholder: string = 'Search';
+@prop export let value: any = undefined;
+-->

package/src/lib/forms/Select.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import type { SelectOptionType } from '../types';
+
+  export let items: SelectOptionType[] = [];
+  export let value: any = undefined;
+  export let placeholder: string = 'Choose option ...';
+  export let underline: boolean = false;
+  export let size: 'sm' | 'md' | 'lg' = 'md';
+
+  export let defaultClass: string = 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
+
+  export let underlineClass: string = 'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
+
+  const common = 'block w-full';
+  const sizes = {
+    sm: 'text-sm p-2',
+    md: 'text-sm p-2.5',
+    lg: 'text-base py-3 px-4'
+  };
+
+  let selectClass: string;
+  $: selectClass = twMerge(common, underline ? underlineClass : defaultClass, sizes[size], underline && '!px-0', $$props.class);
+</script>
+
+<select {...$$restProps} bind:value class={selectClass} on:change on:contextmenu on:input>
+  {#if placeholder}
+    <option disabled selected value="">{placeholder}</option>
+  {/if}
+
+  {#each items as { value, name }}
+    <option {value}>{name}</option>
+  {:else}
+    <slot />
+  {/each}
+</select>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let items: SelectOptionType[] = [];
+@prop export let value: any = undefined;
+@prop export let placeholder: string = 'Choose option ...';
+@prop export let underline: boolean = false;
+@prop export let size: 'sm' | 'md' | 'lg' = 'md';
+@prop export let defaultClass: string = 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
+@prop export let underlineClass: string = 'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
+-->

package/src/lib/forms/Textarea.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { getContext } from 'svelte';
+  import Wrapper from '../utils/Wrapper.svelte';
+
+  const background = getContext('background');
+
+  export let value: any = undefined;
+  export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
+  export let unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
+  export let innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-gray-800';
+  let wrapped: boolean;
+  $: wrapped = $$slots.header || $$slots.footer;
+
+  let wrapperClass: string;
+  $: wrapperClass = twMerge('w-full rounded-lg', background ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-700', 'text-gray-900 dark:placeholder-gray-400 dark:text-white ', 'border border-gray-200 dark:border-gray-600', $$props.class);
+
+  let textareaClass: string;
+  $: textareaClass = wrapped ? wrappedClass : twMerge(wrapperClass, unWrappedClass);
+
+  const headerClass = (header: boolean) => twMerge(header ? 'border-b' : 'border-t', 'py-2 px-3 border-gray-200 dark:border-gray-600');
+
+  let innerWrapperClass: string;
+  $: innerWrapperClass = twMerge(innerWrappedClass, $$slots.footer ? 'rounded-b-lg' : '', $$slots.header ? 'rounded-t-lg' : '');
+</script>
+
+<Wrapper show={wrapped} class={wrapperClass}>
+  {#if $$slots.header}
+    <div class={headerClass(true)}>
+      <slot name="header" />
+    </div>
+  {/if}
+  <Wrapper show={wrapped} class={innerWrapperClass}>
+    <textarea bind:value on:blur on:change on:click on:contextmenu on:focus on:input on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {...$$restProps} class={textareaClass} />
+  </Wrapper>
+  {#if $$slots.footer}
+    <div class={headerClass(false)}>
+      <slot name="footer" />
+    </div>
+  {/if}
+</Wrapper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let value: any = undefined;
+@prop export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
+@prop export let unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
+@prop export let innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-gray-800';
+-->

package/src/lib/forms/Toggle.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+  import Checkbox from './Checkbox.svelte';
+  import type { FormColorType } from '../types';
+
+  export let size: 'small' | 'default' | 'large' | 'custom' = 'default';
+  export let group: (string | number)[] = [];
+  export let value: string | number = '';
+  export let checked: boolean | undefined = undefined;
+  export let customSize: string = '';
+
+  // tinted if put in component having its own background
+  let background: boolean = getContext('background');
+
+  const common = "mr-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all";
+
+  const colors = {
+    primary: 'peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600',
+    secondary: 'peer-focus:ring-secondary-300 dark:peer-focus:ring-secondary-800 peer-checked:bg-secondary-600',
+    red: 'peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600',
+    green: 'peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600',
+    purple: 'peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600',
+    yellow: 'peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400',
+    teal: 'peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600',
+    orange: 'peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500',
+    blue: 'peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600'
+  };
+
+  const sizes = {
+    small: 'w-9 h-5 after:top-[2px] after:left-[2px] after:h-4 after:w-4',
+    default: 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5',
+    large: 'w-14 h-7 after:top-0.5 after:left-[4px]  after:h-6 after:w-6',
+    custom: customSize
+  };
+
+  let divClass: string;
+
+  $: divClass = twMerge(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[($$restProps.color as FormColorType) ?? 'primary'], sizes[size], 'relative', $$props.classDiv);
+</script>
+
+<Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click on:change>
+  <span class={divClass} />
+  <slot />
+</Checkbox>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let size: 'small' | 'default' | 'large' | 'custom' = 'default';
+@prop export let group: (string | number)[] = [];
+@prop export let value: string | number = '';
+@prop export let checked: boolean | undefined = undefined;
+@prop export let customSize: string = '';
+-->

package/src/lib/forms/VoiceSearch.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let id: string = '';
+  export let labelClass: string = 'sr-only';
+  export let iconClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
+  export let iconDivClass: string = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
+  export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+  export let btnClass: string = 'inline-flex items-center py-2.5 px-3 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+  export let voiceBtnClass: string = 'flex absolute inset-y-0 right-0 items-center pr-3';
+  export let voiceIconClass: string = 'w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white';
+  export let placeholder: string = 'Search Mockups, Logos, Design Templates...';
+
+  const dispatch = createEventDispatcher();
+
+  const handleVoiceBtn = () => {
+    dispatch('handleVoiceBtn');
+  };
+</script>
+
+<form class="flex items-center" on:submit>
+  <label for={id} class={labelClass}>Search</label>
+  <div class="relative w-full">
+    <div class={iconDivClass}>
+      <svg class={iconClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+      </svg>
+    </div>
+    <input {...$$restProps} type="text" {id} class={inputClass} {placeholder} />
+    <button type="button" class={voiceBtnClass} on:click={handleVoiceBtn}>
+      <svg class={voiceIconClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd" />
+      </svg>
+    </button>
+  </div>
+  <button type="submit" class={btnClass}>
+    <svg class="mr-2 -ml-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+    </svg>
+    Search
+  </button>
+</form>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let id: string = '';
+@prop export let labelClass: string = 'sr-only';
+@prop export let iconClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
+@prop export let iconDivClass: string = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
+@prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+@prop export let btnClass: string = 'inline-flex items-center py-2.5 px-3 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+@prop export let voiceBtnClass: string = 'flex absolute inset-y-0 right-0 items-center pr-3';
+@prop export let voiceIconClass: string = 'w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white';
+@prop export let placeholder: string = 'Search Mockups, Logos, Design Templates...';
+-->

package/src/lib/gallery/Gallery.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { ImgType } from '$lib/types';
+  import { twMerge } from 'tailwind-merge';
+
+  export let items: ImgType[] = [];
+  export let imgClass: string = 'h-auto max-w-full rounded-lg';
+
+  $: divClass = twMerge('grid', $$props.class);
+
+  function init(node: HTMLElement) {
+    if (getComputedStyle(node).gap === 'normal') node.style.gap = 'inherit';
+  }
+</script>
+
+<div {...$$restProps} class={divClass} use:init>
+  {#each items as item}
+    <slot {item}>
+      <div><img src={item.src} alt={item.alt} class={twMerge(imgClass, $$props.classImg)} /></div>
+    </slot>
+  {:else}
+    <slot item={items[0]} />
+  {/each}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let items: ImgType[] = [];
+@prop export let imgClass: string = 'h-auto max-w-full rounded-lg';
+-->