flowbite-svelte 0.44.7 → 0.44.9

package/src/lib/modals/Modal.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import Frame from '../utils/Frame.svelte';
+  import { createEventDispatcher, type ComponentProps } from 'svelte';
+  import CloseButton from '../utils/CloseButton.svelte';
+  import focusTrap from '../utils/focusTrap';
+  import type { Dismissable, SizeType } from '$lib/types';
+  import type { ModalPlacementType } from '../types';
+
+  // propagate props type from underlying Frame
+  interface $$Props extends ComponentProps<Frame>, Dismissable {
+    open?: boolean;
+    title?: string;
+    size?: SizeType;
+    placement?: 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+    autoclose?: boolean;
+    backdropClass?: string;
+    defaultClass?: string;
+    outsideclose?: boolean;
+  }
+
+  export let open: boolean = false;
+  export let title: string = '';
+  export let size: SizeType = 'md';
+  export let placement: ModalPlacementType = 'center';
+  export let autoclose: boolean = false;
+  export let dismissable: boolean = true;
+  export let backdropClass: string = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+  export let defaultClass: string = 'relative flex flex-col mx-auto';
+  export let outsideclose: boolean = false;
+  export let dialogClass: string = 'fixed top-0 left-0 right-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
+
+  const dispatch = createEventDispatcher();
+  $: dispatch(open ? 'open' : 'close');
+
+  function prepareFocus(node: HTMLElement) {
+    const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);
+    let n: Node | null;
+    while ((n = walker.nextNode())) {
+      if (n instanceof HTMLElement) {
+        const el = n as HTMLElement;
+        const [x, y] = isScrollable(el);
+        if (x || y) el.tabIndex = 0;
+      }
+    }
+    node.focus();
+  }
+
+  const getPlacementClasses = () => {
+    switch (placement) {
+      // top
+      case 'top-left':
+        return ['justify-start', 'items-start'];
+      case 'top-center':
+        return ['justify-center', 'items-start'];
+      case 'top-right':
+        return ['justify-end', 'items-start'];
+
+      // center
+      case 'center-left':
+        return ['justify-start', 'items-center'];
+      case 'center':
+        return ['justify-center', 'items-center'];
+      case 'center-right':
+        return ['justify-end', 'items-center'];
+
+      // bottom
+      case 'bottom-left':
+        return ['justify-start', 'items-end'];
+      case 'bottom-center':
+        return ['justify-center', 'items-end'];
+      case 'bottom-right':
+        return ['justify-end', 'items-end'];
+
+      default:
+        return ['justify-center', 'items-center'];
+    }
+  };
+
+  const sizes = {
+    xs: 'max-w-md',
+    sm: 'max-w-lg',
+    md: 'max-w-2xl',
+    lg: 'max-w-4xl',
+    xl: 'max-w-7xl'
+  };
+
+  const onAutoClose = (e: MouseEvent) => {
+    const target: Element = e.target as Element;
+    if (autoclose && target?.tagName === 'BUTTON') hide(e); // close on any button click
+    if (outsideclose && target === e.currentTarget) hide(e); // close on click outside
+  };
+
+  const hide = (e: Event) => {
+    e.preventDefault();
+    open = false;
+  };
+
+  let frameClass: string;
+  $: frameClass = twMerge(defaultClass, 'w-full', $$props.class);
+
+  const isScrollable = (e: HTMLElement): boolean[] => [e.scrollWidth > e.clientWidth && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowX) >= 0, e.scrollHeight > e.clientHeight && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowY) >= 0];
+
+  let backdropCls: string = twMerge(backdropClass, $$props.classBackdrop);
+
+  function handleKeys(e: KeyboardEvent) {
+    if (e.key === 'Escape' && dismissable) return hide(e);
+  }
+</script>
+
+{#if open}
+  <!-- backdrop -->
+  <div class={backdropCls} />
+  <!-- dialog -->
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <div on:keydown={handleKeys} on:wheel|preventDefault|nonpassive use:prepareFocus use:focusTrap on:click={onAutoClose} class={twMerge(dialogClass, $$props.classDialog, ...getPlacementClasses())} tabindex="-1" aria-modal="true" role="dialog">
+    <div class="flex relative {sizes[size]} w-full max-h-full">
+      <!-- Modal content -->
+      <Frame rounded shadow {...$$restProps} class={frameClass}>
+        <!-- Modal header -->
+        {#if $$slots.header || title}
+          <Frame color={$$restProps.color} class="flex justify-between items-center p-4 rounded-t border-b">
+            <slot name="header">
+              <h3 class="text-xl font-semibold {$$restProps.color ? '' : 'text-gray-900 dark:text-white'} p-0">
+                {title}
+              </h3>
+            </slot>
+            {#if dismissable}<CloseButton name="Close modal" on:click={hide} color={$$restProps.color} />{/if}
+          </Frame>
+        {:else if dismissable}
+          <CloseButton name="Close modal" class="absolute top-3 right-2.5" on:click={hide} color={$$restProps.color} />
+        {/if}
+        <!-- Modal body -->
+        <div class={twMerge('p-6 space-y-6 flex-1 overflow-y-auto overscroll-contain', $$props.bodyClass)} on:keydown|stopPropagation={handleKeys} role="document" on:wheel|stopPropagation|passive>
+          <slot />
+        </div>
+        <!-- Modal footer -->
+        {#if $$slots.footer}
+          <Frame color={$$restProps.color} class="flex items-center p-6 space-x-2 rounded-b border-t">
+            <slot name="footer" />
+          </Frame>
+        {/if}
+      </Frame>
+    </div>
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let open: boolean = false;
+@prop export let title: string = '';
+@prop export let size: SizeType = 'md';
+@prop export let placement: ModalPlacementType = 'center';
+@prop export let autoclose: boolean = false;
+@prop export let dismissable: boolean = true;
+@prop export let backdropClass: string = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+@prop export let defaultClass: string = 'relative flex flex-col mx-auto';
+@prop export let outsideclose: boolean = false;
+@prop export let dialogClass: string = 'fixed top-0 left-0 right-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
+-->

package/src/lib/navbar/Menu.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  export let size = '24';
+  export let color = 'currentColor';
+  export let variation: 'solid' | 'outline' = 'outline';
+  export let ariaLabel = 'bars 3';
+
+  let viewBox: string;
+  let svgpath: string;
+  let svgoutline = `<path stroke="${color}" stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path> `;
+  let svgsolid = `<path fill="${color}" clip-rule="evenodd" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"></path> `;
+  $: switch (variation) {
+    case 'outline':
+      svgpath = svgoutline;
+      viewBox = '0 0 24 24';
+      break;
+    case 'solid':
+      svgpath = svgsolid;
+      viewBox = '0 0 24 24';
+      break;
+    default:
+      svgpath = svgoutline;
+      viewBox = '0 0 24 24';
+  }
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" role="button" tabindex="0" width={size} height={size} class={$$props.class} {...$$restProps} aria-label={ariaLabel} fill="none" {viewBox} stroke-width="2" on:click>
+  {@html svgpath}
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let size = '24';
+@prop export let color = 'currentColor';
+@prop export let variation: 'solid' | 'outline' = 'outline';
+@prop export let ariaLabel = 'bars 3';
+-->

package/src/lib/navbar/NavBrand.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let href: string = '';
+</script>
+
+<a {href} {...$$restProps} class={twMerge('flex items-center', $$props.class)}>
+  <slot />
+</a>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let href: string = '';
+-->

package/src/lib/navbar/NavHamburger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import ToolbarButton from '../toolbar/ToolbarButton.svelte';
+  import { twMerge } from 'tailwind-merge';
+  import Menu from './Menu.svelte';
+
+  export let btnClass: string = 'ml-3 md:hidden';
+  export let menuClass: string = 'h-6 w-6 shrink-0';
+</script>
+
+<ToolbarButton name="Open main menu" on:click {...$$restProps} class={twMerge(btnClass, $$props.class)}>
+  <Menu class={twMerge(menuClass, $$props.classMenu)} />
+</ToolbarButton>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let btnClass: string = 'ml-3 md:hidden';
+@prop export let menuClass: string = 'h-6 w-6 shrink-0';
+-->

package/src/lib/navbar/NavLi.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+  import type { NavbarLiType } from './NavUl.svelte';
+
+  export let href: string = '';
+  export let activeClass: string | undefined = undefined;
+  export let nonActiveClass: string | undefined = undefined;
+
+  const context = getContext<NavbarLiType>('navbarContext') ?? {};
+  const activeUrlStore = getContext('activeUrl') as { subscribe: (callback: (value: string) => void) => void };
+
+  let navUrl = '';
+  activeUrlStore.subscribe((value) => {
+    navUrl = value;
+  });
+
+  $: active = navUrl ? href === navUrl : false;
+
+  $: liClass = twMerge('block py-2 pr-4 pl-3 md:p-0 rounded md:border-0', active ? activeClass ?? context.activeClass : nonActiveClass ?? context.nonActiveClass, $$props.class);
+  // $: console.log()
+</script>
+
+<li>
+  <svelte:element this={href ? 'a' : 'div'} role={href ? undefined : 'link'} {href} {...$$restProps} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover class={liClass}>
+    <slot />
+  </svelte:element>
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let href: string = '';
+@prop export let activeClass: string | undefined = undefined;
+@prop export let nonActiveClass: string | undefined = undefined;
+-->

package/src/lib/navbar/NavSidebarHamburger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import ToolbarButton from '../toolbar/ToolbarButton.svelte';
+  import { twMerge } from 'tailwind-merge';
+  import SidebarMenu from './SidebarMenu.svelte';
+
+  export let btnClass: string = 'ml-3 md:hidden';
+  export let sideMenuClass: string = 'h-6 w-6 shrink-0';
+</script>
+
+<ToolbarButton name="Open main menu" on:click {...$$restProps} class={twMerge(btnClass, $$props.class)}>
+  <SidebarMenu class={twMerge(sideMenuClass, $$props.classSideMenu)} variation="solid" />
+</ToolbarButton>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let btnClass: string = 'ml-3 md:hidden';
+@prop export let sideMenuClass: string = 'h-6 w-6 shrink-0';
+-->

package/src/lib/navbar/NavUl.svelte

@@ -0,0 +1,68 @@
+<script lang="ts" context="module">
+  export type NavbarLiType = {
+    activeClass: string;
+    nonActiveClass: string;
+  };
+</script>
+
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { slide, type SlideParams } from 'svelte/transition';
+  import { quintOut } from 'svelte/easing';
+  import Frame from '../utils/Frame.svelte';
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+
+  const activeUrlStore = writable('');
+
+  export let activeUrl: string = '';
+  export let divClass: string = 'w-full md:block md:w-auto';
+  export let ulClass: string = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
+  export let hidden: boolean = true;
+  export let slideParams: SlideParams = { delay: 250, duration: 500, easing: quintOut };
+  export let activeClass: string = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
+  export let nonActiveClass: string = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
+
+  setContext<NavbarLiType>('navbarContext', { activeClass, nonActiveClass });
+  $: {
+    activeUrlStore.set(activeUrl);
+  }
+  setContext('activeUrl', activeUrlStore);
+
+  let _divClass: string;
+  $: _divClass = twMerge(divClass, $$props.class);
+
+  let _ulClass: string;
+  $: _ulClass = twMerge(
+    ulClass,
+    // 'divide-y md:divide-y-0 divide-gray-100 dark:divide-gray-700',
+    $$props.classUl
+  );
+</script>
+
+{#if !hidden}
+  <div {...$$restProps} class={_divClass} transition:slide={slideParams} on:click role="button" tabindex="0">
+    <Frame tag="ul" border rounded color="navbarUl" class={_ulClass}>
+      <slot />
+    </Frame>
+  </div>
+{:else}
+  <div {...$$restProps} class={_divClass} {hidden}>
+    <ul class={_ulClass}>
+      <slot />
+    </ul>
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let activeUrl: string = '';
+@prop export let divClass: string = 'w-full md:block md:w-auto';
+@prop export let ulClass: string = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
+@prop export let hidden: boolean = true;
+@prop export let slideParams: SlideParams = { delay: 250, duration: 500, easing: quintOut };
+@prop export let activeClass: string = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
+@prop export let nonActiveClass: string = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
+-->

package/src/lib/navbar/Navbar.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import Frame from '../utils/Frame.svelte';
+  import { twMerge } from 'tailwind-merge';
+
+  // propagate props type from underlying Frame
+  interface $$Props extends ComponentProps<Frame> {
+    navClass?: string;
+    navDivClass?: string;
+    fluid?: boolean;
+    classNavDiv?: string;
+  }
+
+  export let navClass: string = 'px-2 sm:px-4 py-2.5 w-full';
+  export let navDivClass: string = 'mx-auto flex flex-wrap justify-between items-center ';
+  export let fluid: boolean = false;
+
+  $: {
+    // override default Frame value
+    $$restProps.color = $$restProps.color ?? 'navbar';
+  }
+
+  let hidden = true;
+  let toggle = () => {
+    hidden = !hidden;
+  };
+</script>
+
+<Frame tag="nav" {...$$restProps} class={twMerge(navClass, $$props.class)}>
+  <div class={twMerge(navDivClass, $$props.classNavDiv, (fluid && 'w-full') || 'container')}>
+    <slot {hidden} {toggle} />
+  </div>
+</Frame>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let navClass: string = 'px-2 sm:px-4 py-2.5 w-full';
+@prop export let navDivClass: string = 'mx-auto flex flex-wrap justify-between items-center ';
+@prop export let fluid: boolean = false;
+-->

package/src/lib/navbar/SidebarMenu.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  export let size = '20';
+  export let color = 'currentColor';
+  export let variation: 'solid' | 'outline' = 'outline';
+  let viewBox: string;
+  let svgpath: string;
+  let svgoutline = `<path stroke="${color}" clip-rule="evenodd" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"></path> `;
+  let svgsolid = `<path fill="${color}" clip-rule="evenodd" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"></path> `;
+  $: switch (variation) {
+    case 'outline':
+      svgpath = svgoutline;
+      viewBox = '0 0 20 20';
+      break;
+    case 'solid':
+      svgpath = svgsolid;
+      viewBox = '0 0 20 20';
+      break;
+    default:
+      svgpath = svgoutline;
+      viewBox = '0 0 20 20';
+  }
+  export let ariaLabel = 'bars 3';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} {...$$restProps} class={$$props.class} aria-label={ariaLabel} fill="none" {viewBox} stroke-width="2" on:click role="button" tabindex="-1">
+  {@html svgpath}
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let size = '20';
+@prop export let color = 'currentColor';
+@prop export let variation: 'solid' | 'outline' = 'outline';
+@prop export let ariaLabel = 'bars 3';
+-->

package/src/lib/paginations/Pagination.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { twMerge, twJoin } from 'tailwind-merge';
+  import { createEventDispatcher, setContext } from 'svelte';
+  import type { LinkType } from '../types';
+  import PaginationItem from './PaginationItem.svelte';
+
+  export let pages: LinkType[] = [];
+  export let activeClass: string = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
+  export let normalClass: string = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+  export let ulClass: string = 'inline-flex -space-x-px items-center';
+  export let table: boolean = false;
+  export let large: boolean = false;
+
+  const dispatch = createEventDispatcher();
+
+  setContext<boolean>('group', true);
+  setContext<boolean>('table', table);
+
+  const previous = () => {
+    dispatch('previous');
+  };
+  const next = () => {
+    dispatch('next');
+  };
+</script>
+
+<nav aria-label="Page navigation">
+  <ul class={twMerge(ulClass, table && 'divide-x dark divide-gray-700 dark:divide-gray-700', $$props.class)}>
+    <li>
+      <PaginationItem {large} on:click={previous} {normalClass} class={table ? 'rounded-l' : 'rounded-l-lg'}>
+        <slot name="prev">Previous</slot>
+      </PaginationItem>
+    </li>
+    {#each pages as { name, href, active }}
+      <li>
+        <PaginationItem {large} {active} {activeClass} {normalClass} {href} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
+          {name}
+        </PaginationItem>
+      </li>
+    {/each}
+    <li>
+      <PaginationItem {large} on:click={next} {normalClass} class={table ? 'rounded-r' : 'rounded-r-lg'}>
+        <slot name="next">Next</slot>
+      </PaginationItem>
+    </li>
+  </ul>
+</nav>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let pages: LinkType[] = [];
+@prop export let activeClass: string = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
+@prop export let normalClass: string = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+@prop export let ulClass: string = 'inline-flex -space-x-px items-center';
+@prop export let table: boolean = false;
+@prop export let large: boolean = false;
+-->

package/src/lib/paginations/PaginationItem.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { getContext } from 'svelte';
+
+  export let href: string | undefined = undefined;
+  export let active: boolean = false;
+  export let activeClass: string = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
+  export let normalClass: string = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+  export let large: boolean = false;
+
+  const group = getContext<boolean>('group');
+  const table = getContext<boolean>('table');
+
+  let defaultClass: string;
+  $: defaultClass = twMerge(
+    'flex items-center font-medium',
+    large ? 'h-10 px-4 text-base' : 'h-8 px-3 text-sm',
+    group ? '' : table ? 'rounded' : 'rounded-lg',
+    // table || 'border border-gray-300 dark:border-gray-700 dark:bg-gray-800',
+    table ? '' : 'border',
+    active ? activeClass : normalClass,
+    $$props.class
+  );
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<svelte:element this={href ? 'a' : 'button'} {href} class={defaultClass} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover role={href ? 'button' : undefined}>
+  <slot />
+</svelte:element>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let href: string | undefined = undefined;
+@prop export let active: boolean = false;
+@prop export let activeClass: string = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
+@prop export let normalClass: string = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+@prop export let large: boolean = false;
+-->

package/src/lib/popover/Popover.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import Popper from '../utils/Popper.svelte';
+
+  // propagate props type from underlying Frame
+  interface $$Props extends ComponentProps<Popper> {
+    title?: string;
+    defaultClass?: string;
+  }
+
+  export let title: string = '';
+  export let defaultClass: string = 'py-2 px-3';
+</script>
+
+<Popper activeContent border shadow rounded {...$$restProps} class="dark:!border-gray-600 {$$props.class}" on:show>
+  {#if $$slots.title || title}
+    <div class="py-2 px-3 bg-gray-100 rounded-t-md border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700">
+      <slot name="title">
+        <h3 class="font-semibold text-gray-900 dark:text-white">{title}</h3>
+      </slot>
+    </div>
+  {/if}
+  <div class={defaultClass}>
+    <slot />
+  </div>
+</Popper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let title: string = '';
+@prop export let defaultClass: string = 'py-2 px-3';
+-->

package/src/lib/progressbars/Progressbar.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { twMerge, twJoin } from 'tailwind-merge';
+
+  export let progress: string = '45';
+  export let size: string = 'h-2.5';
+  export let labelInside: boolean = false;
+  export let labelOutside: string = '';
+  export let color: 'primary' | 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'primary';
+  export let labelInsideClass: string = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
+  export let divClass: string = 'w-full bg-gray-200 rounded-full dark:bg-gray-700';
+
+  // let barColor: string;
+  const barColors = {
+    primary: 'bg-primary-600',
+    blue: 'bg-blue-600',
+    gray: 'bg-gray-600 dark:bg-gray-300',
+    red: 'bg-red-600 dark:bg-red-500',
+    green: 'bg-green-600 dark:bg-green-500',
+    yellow: 'bg-yellow-400',
+    purple: 'bg-purple-600 dark:bg-purple-500',
+    indigo: 'bg-indigo-600 dark:bg-indigo-500'
+  };
+</script>
+
+{#if labelOutside}
+  <div {...$$restProps} class={twMerge('flex justify-between mb-1', $$props.classLabelOutside)}>
+    <span class="text-base font-medium text-blue-700 dark:text-white">{labelOutside}</span>
+    <span class="text-sm font-medium text-blue-700 dark:text-white">{progress}%</span>
+  </div>
+{/if}
+<div class={twMerge(divClass, size, $$props.class)}>
+  {#if labelInside}
+    <div class={twJoin(labelInsideClass, barColors[color])} style="width: {progress}%">
+      {progress}%
+    </div>
+  {:else}
+    <div class={twJoin(barColors[color], size, 'rounded-full')} style="width: {progress}%" />
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let progress: string = '45';
+@prop export let size: string = 'h-2.5';
+@prop export let labelInside: boolean = false;
+@prop export let labelOutside: string = '';
+@prop export let color: 'primary' | 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'primary';
+@prop export let labelInsideClass: string = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
+@prop export let divClass: string = 'w-full bg-gray-200 rounded-full dark:bg-gray-700';
+-->