flowbite-svelte 0.44.8 → 0.44.10

package/src/lib/dropdowns/Dropdown.svelte

@@ -0,0 +1,81 @@
+<script lang="ts" context="module">
+  export type DropdownType = {
+    activeClass: string;
+  };
+</script>
+
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import Popper from '$lib/utils/Popper.svelte';
+  import type { ComponentProps } from 'svelte';
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+
+  const activeUrlStore = writable('');
+
+  export let activeUrl: string = '';
+  export let open: boolean = false;
+  export let containerClass: string = 'divide-y z-50';
+  export let headerClass: string = 'py-1 overflow-hidden rounded-t-lg';
+  export let footerClass: string = 'py-1 overflow-hidden rounded-b-lg';
+  export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
+
+  let activeCls = twMerge(activeClass, $$props.classActive);
+
+  setContext<DropdownType>('DropdownType', { activeClass: activeCls });
+
+  $: activeUrlStore.set(activeUrl);
+
+  setContext('activeUrl', activeUrlStore);
+  // propagate props type from underlying Frame
+  interface $$Props extends ComponentProps<Popper> {
+    open?: boolean;
+    containerClass?: string;
+    headerClass?: string;
+    footerClass?: string;
+    activeUrl?: string;
+  }
+
+  let containerCls: string = twMerge(containerClass, $$props.classContainer);
+  let headerCls: string = twMerge(headerClass, $$props.classHeader);
+  let ulCls: string = twMerge('py-1', $$props.class);
+  let footerCls: string = twMerge(footerClass, $$props.classFooter);
+
+  $: {
+    // set default values
+    $$restProps.arrow = $$restProps.arrow ?? false;
+    $$restProps.trigger = $$restProps.trigger ?? 'click';
+    $$restProps.placement = $$restProps.placement ?? 'bottom';
+    $$restProps.color = $$restProps.color ?? 'dropdown';
+    $$restProps.shadow = $$restProps.shadow ?? true;
+    $$restProps.rounded = $$restProps.rounded ?? true;
+  }
+</script>
+
+<Popper activeContent {...$$restProps} class={containerCls} on:show bind:open>
+  {#if $$slots.header}
+    <div class={headerCls}>
+      <slot name="header" />
+    </div>
+  {/if}
+  <ul class={ulCls}>
+    <slot />
+  </ul>
+  {#if $$slots.footer}
+    <div class={footerCls}>
+      <slot name="footer" />
+    </div>
+  {/if}
+</Popper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let activeUrl: string = '';
+@prop export let open: boolean = false;
+@prop export let containerClass: string = 'divide-y z-50';
+@prop export let headerClass: string = 'py-1 overflow-hidden rounded-t-lg';
+@prop export let footerClass: string = 'py-1 overflow-hidden rounded-b-lg';
+@prop export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
+-->

package/src/lib/dropdowns/DropdownDivider.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let divClass: string = 'my-1 h-px bg-gray-100 dark:bg-gray-600';
+</script>
+
+<div {...$$restProps} class={twMerge(divClass, $$props.class)} />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let divClass: string = 'my-1 h-px bg-gray-100 dark:bg-gray-600';
+-->

package/src/lib/dropdowns/DropdownHeader.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import DropdownDivider from './DropdownDivider.svelte';
+  export let divClass: string = 'py-2 px-4 text-gray-700 dark:text-white';
+  export let divider: boolean = true;
+</script>
+
+<div {...$$restProps} class={twMerge(divClass, $$props.class)}>
+  <slot />
+</div>
+{#if divider}
+  <DropdownDivider />
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let divClass: string = 'py-2 px-4 text-gray-700 dark:text-white';
+@prop export let divider: boolean = true;
+-->

package/src/lib/dropdowns/DropdownItem.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import Wrapper from '$lib/utils/Wrapper.svelte';
+  import { twMerge } from 'tailwind-merge';
+  import { getContext } from 'svelte';
+  import type { DropdownType } from './Dropdown.svelte';
+
+  export let defaultClass: string = 'font-medium py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600';
+  export let href: string | undefined = undefined;
+  export let activeClass: string | undefined = undefined;
+  // export let active: boolean = false;
+
+  const context = getContext<DropdownType>('DropdownType') ?? {};
+  const activeUrlStore = getContext('activeUrl') as { subscribe: (callback: (value: string) => void) => void };
+
+  let sidebarUrl = '';
+  activeUrlStore.subscribe((value) => {
+    // console.log('value: ', value)
+    sidebarUrl = value;
+  });
+
+  $: active = sidebarUrl ? href === sidebarUrl : false;
+
+  // let liClass: string;
+  $: liClass = twMerge(defaultClass, href ? 'block' : 'w-full text-left', active && (activeClass ?? context.activeClass), $$props.class);
+  // twMerge(active ? activeClass ?? context.activeClass : nonActiveClass ?? context.nonActiveClass, $$props.class);
+  // console.log('active: ', active)
+  let wrap: boolean = true;
+  function init(node: HTMLElement) {
+    wrap = node.parentElement?.tagName === 'UL';
+  }
+</script>
+
+<Wrapper tag="li" show={wrap} use={init}>
+  <svelte:element this={href ? 'a' : 'button'} {href} type={href ? undefined : 'button'} role={href ? 'link' : 'button'} {...$$restProps} class={liClass} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
+    <slot />
+  </svelte:element>
+</Wrapper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let defaultClass: string = 'font-medium py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600';
+@prop export let href: string | undefined = undefined;
+@prop export let activeClass: string | undefined = undefined;
+@prop export let active: boolean = false;
+-->

package/src/lib/footer/Footer.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let footerType: 'sitemap' | 'default' | 'logo' | 'socialmedia' = 'default';
+
+  let footerClass = twMerge(footerType === 'sitemap' && 'bg-gray-800', footerType === 'socialmedia' && 'p-4 bg-white sm:p-6 dark:bg-gray-800', footerType === 'logo' && 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800', footerType === 'default' && 'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800', $$props.class);
+</script>
+
+<footer {...$$restProps} class={footerClass}>
+  <slot />
+</footer>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let footerType: 'sitemap' | 'default' | 'logo' | 'socialmedia' = 'default';
+-->

package/src/lib/footer/FooterBrand.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let aClass: string = 'flex items-center';
+  export let spanClass: string = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
+  export let imgClass: string = 'mr-3 h-8';
+  export let href: string = '';
+  export let src: string = '';
+  export let alt: string = '';
+  export let name: string = '';
+  export let target: string | undefined = undefined;
+
+  let aCls: string = twMerge(aClass, $$props.classA);
+  let spanCls: string = twMerge(spanClass, $$props.classSpan);
+  let imgCls: string = twMerge(imgClass, $$props.classImg);
+</script>
+
+{#if href}
+  <a {...$$restProps} {href} {target} class={aCls}>
+    <img {src} class={imgCls} {alt} />
+    <span class={spanCls}>{name}</span>
+    <slot />
+  </a>
+{:else}
+  <img {...$$restProps} {src} class={imgCls} {alt} />
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let aClass: string = 'flex items-center';
+@prop export let spanClass: string = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
+@prop export let imgClass: string = 'mr-3 h-8';
+@prop export let href: string = '';
+@prop export let src: string = '';
+@prop export let alt: string = '';
+@prop export let name: string = '';
+@prop export let target: string | undefined = undefined;
+-->

package/src/lib/footer/FooterCopyright.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let spanClass: string = 'block text-sm text-gray-500 sm:text-center dark:text-gray-400';
+  export let aClass: string = 'hover:underline';
+  export let year: number = new Date().getFullYear();
+  export let href: string = '';
+  export let by: string = '';
+  export let target: string | undefined = undefined;
+  export let copyrightMessage: string = 'All Rights Reserved.';
+
+  let spanCls: string = twMerge(spanClass, $$props.classSpan);
+  let aCls: string = twMerge(aClass, $$props.classA);
+</script>
+
+<span class={spanCls}>
+  &copy; {year}
+  {#if href}
+    <a {...$$restProps} {href} {target} class={aCls}>
+      {by}
+    </a>
+  {:else}
+    <span class="ml-1">{by}</span>
+  {/if}
+  {copyrightMessage}
+</span>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let spanClass: string = 'block text-sm text-gray-500 sm:text-center dark:text-gray-400';
+@prop export let aClass: string = 'hover:underline';
+@prop export let year: number = new Date().getFullYear();
+@prop export let href: string = '';
+@prop export let by: string = '';
+@prop export let target: string | undefined = undefined;
+@prop export let copyrightMessage: string = 'All Rights Reserved.';
+-->

package/src/lib/footer/FooterIcon.svelte

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

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

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

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

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

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

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

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

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