flowbite-svelte 0.44.10 → 0.44.12

package/src/lib/footer/FooterIcon.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  export let href: string = '';
-  export let ariaLabel: string = '';
-  export let aClass: string = 'text-gray-500 hover:text-gray-900 dark:hover:text-white';
-  export let target: string | undefined = undefined;
-</script>
-
-{#if href}
-  <a {...$$restProps} {href} {target} aria-label={ariaLabel} class={twMerge(aClass, $$props.class)}>
-    <slot />
-  </a>
-{:else}
-  <slot />
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let href: string = '';
-@prop export let ariaLabel: string = '';
-@prop export let aClass: string = 'text-gray-500 hover:text-gray-900 dark:hover:text-white';
-@prop export let target: string | undefined = undefined;
--->

package/src/lib/footer/FooterLink.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  export let liClass: string = 'mr-4 last:mr-0 md:mr-6';
-  export let aClass: string = 'hover:underline';
-  export let href: string = '';
-  export let target: string | undefined = undefined;
-
-  let liCls: string = twMerge(liClass, $$props.classLi);
-  let aCls: string = twMerge(aClass, $$props.classA);
-</script>
-
-<li class={liCls}>
-  <a {...$$restProps} {href} class={aCls} {target}>
-    <slot />
-  </a>
-</li>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let liClass: string = 'mr-4 last:mr-0 md:mr-6';
-@prop export let aClass: string = 'hover:underline';
-@prop export let href: string = '';
-@prop export let target: string | undefined = undefined;
--->

package/src/lib/footer/FooterLinkGroup.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  export let ulClass: string = 'text-gray-600 dark:text-gray-400';
-</script>
-
-<ul class={twMerge(ulClass, $$props.class)}>
-  <slot />
-</ul>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let ulClass: string = 'text-gray-600 dark:text-gray-400';
--->

package/src/lib/forms/Checkbox.svelte

@@ -1,70 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import { getContext } from 'svelte';
-  import type { FormColorType } from '../types';
-  import { labelClass, inputClass } from './Radio.svelte';
-  import Label from './Label.svelte';
-
-  // properties forwarding
-  export let color: FormColorType = 'primary';
-  export let custom: boolean = false;
-  export let inline: boolean = false;
-  export let group: (string | number)[] = [];
-  export let value: string | number = 'on';
-  export let checked: boolean | undefined = undefined;
-  export let spacing: string = 'mr-2';
-
-  // tinted if put in component having its own background
-  let background: boolean = getContext('background');
-
-  // react on external group changes
-  function init(_: HTMLElement, _group: (string | number)[]) {
-    if (checked === undefined) checked = _group.includes(value);
-    onChange();
-
-    return {
-      update(_group: (string | number)[]) {
-        checked = _group.includes(value);
-      }
-    };
-  }
-
-  function onChange() {
-    // There's a bug in Svelte and bind:group is not working with wrapped checkbox
-    // This workaround is taken from:
-    // https://svelte.dev/repl/de117399559f4e7e9e14e2fc9ab243cc?version=3.12.1
-    const index = group.indexOf(value);
-
-    if (checked === undefined) checked = index >= 0;
-
-    if (checked) {
-      if (index < 0) {
-        group.push(value);
-        group = group;
-      }
-    } else {
-      if (index >= 0) {
-        group.splice(index, 1);
-        group = group;
-      }
-    }
-  }
-</script>
-
-<Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
-  <input use:init={group} type="checkbox" bind:checked on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste on:change={onChange} on:change {value} {...$$restProps} class={twMerge(spacing, inputClass(custom, color, true, background, $$slots.default || $$props.class))} />
-  <slot />
-</Label>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let color: FormColorType = 'primary';
-@prop export let custom: boolean = false;
-@prop export let inline: boolean = false;
-@prop export let group: (string | number)[] = [];
-@prop export let value: string | number = 'on';
-@prop export let checked: boolean | undefined = undefined;
-@prop export let spacing: string = 'mr-2';
--->

package/src/lib/forms/Dropzone.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-
-  export let value: string = '';
-  export let files: FileList | undefined = undefined;
-  export let defaultClass: string = 'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';
-
-  let input: HTMLInputElement;
-
-  function keydown(ev: KeyboardEvent) {
-    if ([' ', 'Enter'].includes(ev.key)) {
-      ev.preventDefault();
-      input.click();
-    }
-  }
-</script>
-
-<button class={twMerge(defaultClass, $$props.class)} on:keydown={keydown} on:focus on:blur on:mouseenter on:mouseleave on:mouseover on:dragenter on:dragleave on:dragover on:drop type="button">
-  <label class="flex flex-col items-center" tabIndex="0">
-    <slot />
-    <input {...$$restProps} bind:value bind:files bind:this={input} on:change on:click type="file" class="hidden" />
-  </label>
-</button>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let value: string = '';
-@prop export let files: FileList | undefined = undefined;
-@prop export let defaultClass: string = 'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';
--->

package/src/lib/forms/Fileupload.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import Input from './Input.svelte';
-
-  export let value: string = '';
-  export let files: FileList | undefined = undefined;
-  export let inputClass: string = 'border !p-0 dark:text-gray-400';
-</script>
-
-<Input {...$$restProps} class={twMerge(inputClass, $$props.class)} let:props>
-  <input type="file" on:change on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste bind:value bind:files {...props} />
-</Input>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let value: string = '';
-@prop export let files: FileList | undefined = undefined;
-@prop export let inputClass: string = 'border !p-0 dark:text-gray-400';
--->

package/src/lib/forms/FloatingLabelInput.svelte

@@ -1,94 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import generateId from '../utils/generateId.js';
-  import type { InputType } from '../types';
-
-  export let id: string = generateId();
-  export let style: 'filled' | 'outlined' | 'standard' = 'standard';
-  export let type: InputType = 'text';
-  export let size: 'small' | 'default' = 'default';
-  export let color: 'base' | 'green' | 'red' = 'base';
-  export let value: any = undefined;
-  export let label: string = '';
-
-  const divClasses = {
-    filled: 'relative',
-    outlined: 'relative',
-    standard: 'relative z-0'
-  };
-
-  const inputSizes = {
-    filled: {
-      small: 'px-2.5 pb-1.5 pt-4',
-      default: 'px-2.5 pb-2.5 pt-5'
-    },
-    outlined: {
-      small: 'px-2.5 pb-1.5 pt-3',
-      default: 'px-2.5 pb-2.5 pt-4'
-    },
-    standard: {
-      small: 'py-2 px-0',
-      default: 'py-2.5 px-0'
-    }
-  };
-
-  const labelSizes = {
-    filled: {
-      small: 'top-3',
-      default: 'top-4'
-    },
-    outlined: {
-      small: 'top-1',
-      default: 'top-2'
-    },
-    standard: {
-      small: 'top-3',
-      default: 'top-3'
-    }
-  };
-
-  const inputClasses = {
-    filled: 'block rounded-t-lg w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 appearance-none dark:text-white focus:outline-none focus:ring-0 peer',
-    outlined: 'block w-full text-sm text-gray-900 bg-transparent rounded-lg border-1 appearance-none dark:text-white  focus:outline-none focus:ring-0 peer',
-    standard: 'block w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 appearance-none dark:text-white  focus:outline-none focus:ring-0 peer'
-  };
-
-  const labelClasses = {
-    filled: 'absolute text-sm duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4',
-    outlined: 'absolute text-sm duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white dark:bg-gray-900 px-2 peer-focus:px-2  peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1',
-    standard: 'absolute text-sm duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6'
-  };
-
-  const inputColorClasses = {
-    base: 'border-gray-300 dark:border-gray-600 dark:focus:border-primary-500 focus:border-primary-600',
-    green: 'border-green-600 dark:border-green-500 dark:focus:border-green-500 focus:border-green-600',
-    red: 'border-red-600 dark:border-red-500 dark:focus:border-red-500  focus:border-red-600'
-  };
-
-  const labelColorClasses = {
-    base: 'text-gray-500 dark:text-gray-400 peer-focus:text-primary-600 peer-focus:dark:text-primary-500',
-    green: 'text-green-600 dark:text-green-500',
-    red: 'text-red-600 dark:text-red-500'
-  };
-</script>
-
-<div class={twMerge(divClasses[style], $$props.classDiv)}>
-  <input {id} {...$$restProps} bind:value on:blur on:change on:click on:focus on:input on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {...{ type }} placeholder=" " class={twMerge(inputClasses[style], inputColorClasses[color], inputSizes[style][size], $$props.classInput)} />
-
-  <label for={id} class={twMerge(labelClasses[style], labelColorClasses[color], labelSizes[style][size], $$props.classLabel)}>
-    {label}
-  </label>
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let id: string = generateId();
-@prop export let style: 'filled' | 'outlined' | 'standard' = 'standard';
-@prop export let type: InputType = 'text';
-@prop export let size: 'small' | 'default' = 'default';
-@prop export let color: 'base' | 'green' | 'red' = 'base';
-@prop export let value: any = undefined;
-@prop export let label: string = '';
--->

package/src/lib/forms/Helper.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  export let helperClass: string = 'text-xs font-normal text-gray-500 dark:text-gray-300';
-  export let color: 'gray' | 'green' | 'red' | 'disabled' = 'gray';
-  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'
-  };
-</script>
-
-<p {...$$restProps} class={twMerge(helperClass, colorClasses[color], $$props.class)}>
-  <slot />
-</p>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let helperClass: string = 'text-xs font-normal text-gray-500 dark:text-gray-300';
-@prop export let color: 'gray' | 'green' | 'red' | 'disabled' = 'gray';
--->

package/src/lib/forms/Input.svelte

@@ -1,83 +0,0 @@
-<script context="module" lang="ts">
-  import type { SizeType, FormSizeType } from '$lib/types';
-  export function clampSize(s: SizeType) {
-    return s && s === 'xs' ? 'sm' : s === 'xl' ? 'lg' : s;
-  }
-</script>
-
-<script lang="ts">
-  import Wrapper from '$lib/utils/Wrapper.svelte';
-  import { twMerge } from 'tailwind-merge';
-  import { getContext } from 'svelte';
-  import type { InputType } from '../types';
-
-  export let type: InputType = 'text';
-  export let value: any = undefined;
-  export let size: FormSizeType | undefined = undefined;
-  export let defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50';
-  export let color: 'base' | 'green' | 'red' = 'base';
-  export let floatClass: string = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';
-
-  const borderClasses = {
-    base: 'border-gray-300 dark:border-gray-600',
-    tinted: 'border-gray-300 dark:border-gray-500',
-    green: 'border-green-500 dark:border-green-400',
-    red: 'border-red-500 dark:border-red-400'
-  };
-
-  const ringClasses = {
-    base: 'focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500',
-    green: 'focus:ring-green-500 focus:border-green-500 dark:focus:border-green-500 dark:focus:ring-green-500',
-    red: 'focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500'
-  };
-
-  const colorClasses = {
-    base: 'bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400',
-    tinted: 'bg-gray-50 text-gray-900 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400',
-    green: 'bg-green-50 text-green-900 placeholder-green-700 dark:text-green-400 dark:placeholder-green-500 dark:bg-gray-700',
-    red: 'bg-red-50 text-red-900 placeholder-red-700 dark:text-red-500 dark:placeholder-red-500 dark:bg-gray-700'
-  };
-
-  // tinted if put in component having its own background
-  let background: boolean = getContext('background');
-
-  let group: { size: SizeType } = getContext('group');
-
-  const textSizes = { sm: 'sm:text-xs', md: 'text-sm', lg: 'sm:text-base' };
-  const leftPadding = { sm: 'pl-9', md: 'pl-10', lg: 'pl-11' };
-  const rightPadding = { sm: 'pr-9', md: 'pr-10', lg: 'pr-11' };
-  const inputPadding = { sm: 'p-2', md: 'p-2.5', lg: 'p-3' };
-
-  $: _size = size || clampSize(group?.size) || 'md';
-  let inputClass: string;
-  $: {
-    const _color = color === 'base' && background ? 'tinted' : color;
-    inputClass = twMerge([defaultClass, ($$slots.left && leftPadding[_size]) || ($$slots.right && rightPadding[_size]) || inputPadding[_size], ringClasses[color], colorClasses[_color], borderClasses[_color], textSizes[_size], group || 'rounded-lg', group && 'first:rounded-l-lg last:rounded-r-lg', group && 'border-l-0 first:border-l last:border-r', $$props.class]);
-  }
-</script>
-
-<Wrapper class="relative w-full" show={$$slots.left || $$slots.right}>
-  {#if $$slots.left}
-    <div class="{twMerge(floatClass, $$props.classLeft)} left-0 pl-2.5 pointer-events-none">
-      <slot name="left" />
-    </div>
-  {/if}
-  <slot props={{ ...$$restProps, class: inputClass }}>
-    <input {...$$restProps} 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 {...{ type }} class={inputClass} />
-  </slot>
-  {#if $$slots.right}
-    <div class="{twMerge(floatClass, $$props.classRight)} right-0 pr-2.5"><slot name="right" /></div>
-  {/if}
-</Wrapper>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let type: InputType = 'text';
-@prop export let value: any = undefined;
-@prop export let size: FormSizeType | undefined = undefined;
-@prop export let defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50';
-@prop export let color: 'base' | 'green' | 'red' = 'base';
-@prop export let floatClass: string = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';
--->

package/src/lib/forms/InputAddon.svelte

@@ -1,47 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-<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

@@ -1,126 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-<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;
--->