flowbite-svelte 0.44.8 → 0.44.9

package/src/lib/accordion/AccordionItem.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { getContext, onMount } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { fade, blur, fly, slide } from 'svelte/transition';
+  import type { TransitionTypes, TransitionParamTypes } from '../types';
+  import type { AccordionCtxType } from './Accordion.svelte';
+
+  export let open: boolean = false;
+  export let activeClass: string | undefined = undefined;
+  export let inactiveClass: string | undefined = undefined;
+  export let defaultClass: string = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700';
+  export let transitionType: TransitionTypes = 'slide';
+  export let transitionParams: TransitionParamTypes = {};
+  export let paddingFlush: string = 'py-5';
+  export let paddingDefault: string = 'p-5';
+  export let textFlushOpen: string = 'text-gray-900 dark:text-white';
+  export let textFlushDefault: string = 'text-gray-500 dark:text-gray-400';
+  export let borderClass: string = 'border-l border-r group-first:border-t';
+  export let borderOpenClass: string = 'border-l border-r';
+  export let borderBottomClass: string = 'border-b';
+  export let borderSharedClass: string = 'border-gray-200 dark:border-gray-700';
+
+  export let classActive: string | undefined = undefined;
+  export let classInactive: string | undefined = undefined;
+
+  let activeCls = twMerge(activeClass, classActive);
+  let inactiveCls = twMerge(inactiveClass, classInactive);
+
+  // make a custom transition function that returns the desired transition
+  const multiple = (node: HTMLElement, params: any) => {
+    switch (transitionType) {
+      case 'blur':
+        return blur(node, params);
+      case 'fly':
+        return fly(node, params);
+      case 'fade':
+        return fade(node, params);
+      default:
+        return slide(node, params);
+    }
+  };
+
+  const ctx = getContext<AccordionCtxType>('ctx') ?? {};
+
+  // single selection
+  const self = {};
+  const selected = ctx.selected ?? writable();
+
+  let _open: boolean = open;
+  open = false;
+
+  onMount(() => {
+    if (_open) $selected = self;
+
+    // this will trigger unsubscribe on destroy
+    return selected.subscribe((x) => (open = x === self));
+  });
+
+  const handleToggle = (_: Event) => selected.set(open ? {} : self);
+
+  let buttonClass: string;
+  $: buttonClass = twMerge([defaultClass, ctx.flush || borderClass, borderBottomClass, borderSharedClass, ctx.flush ? paddingFlush : paddingDefault, open && (ctx.flush ? textFlushOpen : activeCls || ctx.activeClass), !open && (ctx.flush ? textFlushDefault : inactiveCls || ctx.inactiveClass), $$props.class]);
+
+  $: contentClass = twMerge([ctx.flush ? paddingFlush : paddingDefault, ctx.flush ? '' : borderOpenClass, borderBottomClass, borderSharedClass]);
+</script>
+
+<h2 class="group">
+  <button on:click={handleToggle} type="button" class={buttonClass} aria-expanded={open}>
+    <slot name="header" />
+    {#if open}
+      <slot name="arrowup">
+        <svg class="w-3 h-3 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="M9 5 5 1 1 5" />
+        </svg>
+      </slot>
+    {:else}
+      <slot name="arrowdown">
+        <svg class="w-3 h-3 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="m1 1 4 4 4-4" />
+        </svg>
+      </slot>
+    {/if}
+  </button>
+</h2>
+{#if open}
+  <div transition:multiple={transitionParams}>
+    <div class={contentClass}>
+      <slot />
+    </div>
+  </div>
+{:else}
+  <div class="hidden">
+    <div class={contentClass}>
+      <slot />
+    </div>
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let open: boolean = false;
+@prop export let activeClass: string | undefined = undefined;
+@prop export let inactiveClass: string | undefined = undefined;
+@prop export let defaultClass: string = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700';
+@prop export let transitionType: TransitionTypes = 'slide';
+@prop export let transitionParams: TransitionParamTypes = {};
+@prop export let paddingFlush: string = 'py-5';
+@prop export let paddingDefault: string = 'p-5';
+@prop export let textFlushOpen: string = 'text-gray-900 dark:text-white';
+@prop export let textFlushDefault: string = 'text-gray-500 dark:text-gray-400';
+@prop export let borderClass: string = 'border-l border-r group-first:border-t';
+@prop export let borderOpenClass: string = 'border-l border-r';
+@prop export let borderBottomClass: string = 'border-b';
+@prop export let borderSharedClass: string = 'border-gray-200 dark:border-gray-700';
+@prop export let classActive: string | undefined = undefined;
+@prop export let classInactive: string | undefined = undefined;
+-->

package/src/lib/alerts/Alert.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { createEventDispatcher, type ComponentProps } from 'svelte';
+  import CloseButton from '../utils/CloseButton.svelte';
+  import Frame from '../utils/Frame.svelte';
+  import { fade } from 'svelte/transition';
+  import type { Dismissable } from '$lib/types';
+
+  interface $$Props extends ComponentProps<Frame>, Dismissable {}
+
+  export let dismissable: boolean = false;
+  export let defaultClass: string = 'p-4 gap-3 text-sm';
+
+  let open = true;
+  const dispatch = createEventDispatcher();
+  $: dispatch(open ? 'open' : 'close');
+
+  function close(e: MouseEvent) {
+    e.stopPropagation();
+    open = false;
+  }
+
+  let divClass: string;
+  $: divClass = twMerge(defaultClass, ($$slots.icon || dismissable) && 'flex items-center', $$props.class);
+
+  $: {
+    // set default values
+    $$restProps.color = $$restProps.color ?? 'primary';
+    $$restProps.rounded = $$restProps.rounded ?? true;
+    if (dismissable) $$restProps.transition = $$restProps.transition ?? fade;
+  }
+</script>
+
+{#if open}
+  <Frame {...$$restProps} class={divClass} role="alert">
+    {#if $$slots.icon}
+      <slot name="icon" />
+    {/if}
+
+    {#if $$slots.icon || dismissable}
+      <div><slot /></div>
+    {:else}
+      <slot />
+    {/if}
+
+    {#if dismissable}
+      <slot name="close-button" {close}>
+        <CloseButton class="-my-1.5 dark:hover:bg-gray-700" color={$$restProps.color} on:click={close} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave />
+      </slot>
+    {/if}
+  </Frame>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let dismissable: boolean = false;
+@prop export let defaultClass: string = 'p-4 gap-3 text-sm';
+-->

package/src/lib/avatar/Avatar.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import AvatarPlaceholder from './Placeholder.svelte';
+  import Indicator from '$lib/indicators/Indicator.svelte';
+
+  export let src: string = '';
+  export let href: string | undefined = undefined;
+  export let rounded: boolean = false;
+  export let border: boolean = false;
+  export let stacked: boolean = false;
+  export let dot: object | undefined = undefined;
+  export let alt: string = '';
+  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+
+  $: dot = dot && { placement: 'top-right', color: 'gray', size: 'lg', ...dot };
+
+  const sizes = {
+    xs: 'w-6 h-6',
+    sm: 'w-8 h-8',
+    md: 'w-10 h-10',
+    lg: 'w-20 h-20',
+    xl: 'w-36 h-36'
+  };
+
+  let avatarClass: string;
+  $: avatarClass = twMerge(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500', sizes[size], stacked && 'border-2 -ml-4 border-white dark:border-gray-800', 'bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300', $$props.class);
+</script>
+
+{#if !src || !!href || $$slots.default || dot}
+  <svelte:element this={href ? 'a' : 'div'} {href} {...$$restProps} class="relative flex justify-center items-center {avatarClass}">
+    {#if src}
+      <img {alt} {src} class={rounded ? 'rounded' : 'rounded-full'} />
+    {:else}
+      <slot><AvatarPlaceholder {rounded} class={twMerge($$props.classPlaceholder)} /></slot>
+    {/if}
+    {#if dot}
+      <Indicator border offset={rounded} {...dot} />
+    {/if}
+  </svelte:element>
+{:else}
+  <img {alt} {src} {...$$restProps} class={avatarClass} />
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let src: string = '';
+@prop export let href: string | undefined = undefined;
+@prop export let rounded: boolean = false;
+@prop export let border: boolean = false;
+@prop export let stacked: boolean = false;
+@prop export let dot: object | undefined = undefined;
+@prop export let alt: string = '';
+@prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+-->

package/src/lib/avatar/Placeholder.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let rounded: boolean = false;
+  let svgClass: string = twMerge('text-gray-400 bg-gray-100 dark:bg-gray-600', rounded ? 'rounded' : 'rounded-full', $$props.class);
+</script>
+
+<svg class={svgClass} fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let rounded: boolean = false;
+-->

package/src/lib/badges/Badge.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import { createEventDispatcher, type ComponentProps } from 'svelte';
+  import { twMerge, twJoin } from 'tailwind-merge';
+  import CloseButton from '../utils/CloseButton.svelte';
+  import { fade } from 'svelte/transition';
+  import Frame from '$lib/utils/Frame.svelte';
+  import type { Dismissable } from '$lib/types';
+
+  interface $$Props extends Omit<ComponentProps<Frame>, 'color'>, Dismissable {
+    color?: 'primary' | 'blue' | 'dark' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' | 'none';
+    large?: boolean;
+  }
+
+  export let color: 'primary' | 'blue' | 'dark' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' | 'none' = 'primary';
+  export let large: boolean = false;
+  export let dismissable: boolean = false;
+
+  const colors = {
+    primary: 'bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300',
+    blue: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
+    dark: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+    gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+    red: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
+    green: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
+    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
+    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
+    purple: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
+    pink: 'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300',
+    none: ''
+  };
+
+  const borderedColors = {
+    primary: 'bg-primary-100 text-primary-800 dark:bg-gray-700 dark:text-primary-400 border-primary-400 dark:border-primary-400',
+    blue: 'bg-blue-100 text-blue-800 dark:bg-gray-700 dark:text-blue-400 border-blue-400 dark:border-blue-400',
+    dark: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400 border-gray-500 dark:border-gray-500',
+    red: 'bg-red-100 text-red-800 dark:bg-gray-700 dark:text-red-400 border-red-400 dark:border-red-400',
+    green: 'bg-green-100 text-green-800 dark:bg-gray-700 dark:text-green-400 border-green-400 dark:border-green-400',
+    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-gray-700 dark:text-yellow-300 border-yellow-300 dark:border-yellow-300',
+    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-gray-700 dark:text-indigo-400 border-indigo-400 dark:border-indigo-400',
+    purple: 'bg-purple-100 text-purple-800 dark:bg-gray-700 dark:text-purple-400 border-purple-400 dark:border-purple-400',
+    pink: 'bg-pink-100 text-pink-800 dark:bg-gray-700 dark:text-pink-400 border-pink-400 dark:border-pink-400',
+    none: ''
+  };
+
+  const hoverColors = {
+    primary: 'hover:bg-primary-200',
+    blue: 'hover:bg-blue-200',
+    dark: 'hover:bg-gray-200',
+    red: 'hover:bg-red-200',
+    green: 'hover:bg-green-200',
+    yellow: 'hover:bg-yellow-200',
+    indigo: 'hover:bg-indigo-200',
+    purple: 'hover:bg-purple-200',
+    pink: 'hover:bg-pink-200',
+    none: ''
+  };
+
+  const baseClass: string = 'font-medium inline-flex items-center justify-center px-2.5 py-0.5';
+
+  let badgeClass: string;
+  $: badgeClass = twMerge(baseClass, large ? 'text-sm' : 'text-xs', $$restProps.border ? `border ${borderedColors[color]}` : colors[color], $$restProps.href && hoverColors[color], $$restProps.rounded ? 'rounded-full' : 'rounded', $$props.class);
+
+  // only overwrite necessary colors (<CloseButton> v0.29.10)
+  const closeBtnColors = {
+    primary: 'text-primary-400 hover:text-primary-900 dark:hover:bg-primary-800 dark:hover:text-primary-300',
+    blue: 'text-blue-400 hover:text-blue-900 dark:hover:bg-blue-800 dark:hover:text-blue-300',
+    dark: 'text-gray-400 hover:text-gray-400 hover:bg-gray-600 dark:hover:text-gray-300',
+    red: 'text-red-400 hover:text-red-900 dark:hover:bg-red-800 dark:hover:text-red-300',
+    green: 'text-green-400 hover:text-green-900 dark:hover:bg-green-800 dark:hover:text-green-300',
+    yellow: 'text-yellow-400 hover:text-yellow-900 dark:hover:bg-yellow-800 dark:hover:text-yellow-300',
+    indigo: 'text-indigo-400 hover:text-indigo-900 dark:hover:bg-indigo-800 dark:hover:text-indigo-300',
+    purple: 'text-purple-400 hover:text-purple-900 dark:hover:bg-purple-800 dark:hover:text-purple-300',
+    pink: 'text-pink-400 hover:text-pink-900 dark:hover:bg-pink-800 dark:hover:text-pink-300',
+    none: ''
+  };
+
+  $: {
+    if (dismissable) $$restProps.transition = $$restProps.transition ?? fade;
+  }
+
+  let open = true;
+  const dispatch = createEventDispatcher();
+  $: dispatch(open ? 'open' : 'close');
+  const close = (e: MouseEvent) => {
+    e.stopPropagation();
+    open = false;
+  };
+</script>
+
+{#if open}
+  <Frame {...$$restProps} class={badgeClass}>
+    <slot />
+    {#if dismissable}
+      <slot name="close-button" {close}>
+        <CloseButton {color} on:click={close} size={large ? 'sm' : 'xs'} name="Remove badge" class="ml-1.5 -mr-1.5" />
+      </slot>
+    {/if}
+  </Frame>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let color: 'primary' | 'blue' | 'dark' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' | 'none' = 'primary';
+@prop export let large: boolean = false;
+@prop export let dismissable: boolean = false;
+-->

package/src/lib/banner/Banner.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import CloseButton from '../utils/CloseButton.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  export let position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'sticky';
+  export let dismissable: boolean = true;
+  export let bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' = 'default';
+  export let divClass: string = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
+  export let innerClass: string = 'flex';
+
+  let open = true;
+  const dispatch = createEventDispatcher();
+  $: dispatch(open ? 'open' : 'close');
+
+  const divClasses = {
+    default: 'top-0 left-0 w-full border-b border-gray-200 bg-gray-50',
+    bottom: 'bottom-0 left-0 w-full border-t border-gray-200 bg-gray-50',
+    cta: 'flex-col md:flex-row  w-[calc(100%-2rem)] -translate-x-1/2 bg-white border border-gray-100 rounded-lg shadow-sm lg:max-w-7xl left-1/2 top-6',
+    signup: 'top-0 left-0 w-full border-b border-gray-200 bg-gray-50',
+    info: 'top-0 left-0 flex-col w-full border-b border-gray-200 md:flex-row bg-gray-50'
+  };
+
+  const insideDivClasses = {
+    default: 'items-center mx-auto',
+    bottom: 'items-center mx-auto',
+    cta: 'flex-col items-start mb-3 mr-4 md:items-center md:flex-row md:mb-0',
+    signup: 'items-center flex-shrink-0 w-full mx-auto sm:w-auto',
+    info: 'items-center flex-shrink-0'
+  };
+
+  $: divClass = twMerge(position, divClass, divClasses[bannerType], $$props.classDiv);
+  $: div2Class = twMerge(innerClass, insideDivClasses[bannerType], $$props.classInner);
+
+  function close(e: MouseEvent) {
+    e.preventDefault();
+    open = false;
+  }
+</script>
+
+{#if open}
+  <div tabindex="-1" class={divClass} {...$$restProps}>
+    <slot name="header" />
+    <div class={div2Class}>
+      <slot />
+    </div>
+    {#if dismissable}
+      <div class="flex items-center">
+        <CloseButton class="-mx-1.5 -my-1.5" color={$$restProps.color} on:click={close} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave />
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'sticky';
+@prop export let dismissable: boolean = true;
+@prop export let bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' = 'default';
+@prop export let divClass: string = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
+@prop export let innerClass: string = 'flex';
+-->

package/src/lib/bottom-nav/BottomNav.svelte

@@ -0,0 +1,76 @@
+<script lang="ts" context="module">
+  export type BottomNavType = {
+    activeClass: string;
+  };
+</script>
+
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { twMerge } from 'tailwind-merge';
+
+  export let activeUrl: string = '';
+  export let position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'fixed';
+  export let navType: 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' = 'default';
+  export let outerClass: string = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
+  export let innerClass: string = 'grid h-full max-w-lg mx-auto';
+  export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
+  // export let activeUrl: string = '';
+  let activeCls = '';
+
+  const activeUrlStore = writable('');
+
+  activeCls = twMerge(activeClass, $$props.classActive);
+  setContext('navType', navType);
+  setContext<BottomNavType>('bottomNavType', { activeClass: activeCls });
+
+  $: {
+    activeUrlStore.set(activeUrl);
+  }
+  setContext('activeUrl', activeUrlStore);
+
+  const outerDivClasses = {
+    default: 'bottom-0 left-0 h-16 bg-white border-t',
+    border: 'bottom-0 left-0 h-16 bg-white border-t',
+    application: 'h-16 max-w-lg -translate-x-1/2 bg-white border rounded-full bottom-4 left-1/2',
+    pagination: 'bottom-0 h-16 -translate-x-1/2 bg-white border-t left-1/2',
+    group: 'bottom-0 -translate-x-1/2 bg-white border-t left-1/2',
+    card: 'bottom-0 left-0 h-16 bg-white border-t',
+    meeting: 'bottom-0 left-0 grid h-16 grid-cols-1 px-8 bg-white border-t md:grid-cols-3',
+    video: 'bottom-0 left-0 grid h-24 grid-cols-1 px-8 bg-white border-t md:grid-cols-3'
+  };
+
+  const innerDivClasses = {
+    default: '',
+    border: '',
+    application: '',
+    pagination: '',
+    group: '',
+    card: '',
+    meeting: 'flex items-center justify-center mx-auto',
+    video: 'flex items-center w-full'
+  };
+
+  $: outerCls = twMerge(position, outerClass, outerDivClasses[navType], $$props.classOuter);
+  $: innerCls = twMerge(innerClass, innerDivClasses[navType], $$props.classInner);
+</script>
+
+<div {...$$restProps} class={outerCls}>
+  <slot name="header" />
+  <div class={innerCls}>
+    <slot />
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let activeUrl: string = '';
+@prop export let position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'fixed';
+@prop export let navType: 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' = 'default';
+@prop export let outerClass: string = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
+@prop export let innerClass: string = 'grid h-full max-w-lg mx-auto';
+@prop export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
+@prop export let activeUrl: string = '';
+-->

package/src/lib/bottom-nav/BottomNavHeader.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let outerClass: string = 'w-full';
+  export let innerClass: string = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600';
+</script>
+
+<div class={twMerge(outerClass, $$props.classOuter)} {...$$restProps}>
+  <div class={twMerge(innerClass, $$props.classInner)} role="group">
+    <slot />
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let outerClass: string = 'w-full';
+@prop export let innerClass: string = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600';
+-->

package/src/lib/bottom-nav/BottomNavHeaderItem.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let itemName: string = '';
+  export let active: boolean = false;
+  export let defaultClass: string = 'px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-lg';
+  export let activeClass: string = 'px-5 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900 rounded-lg';
+
+  $: btnClass = active ? activeClass : defaultClass;
+</script>
+
+<button class={twMerge(btnClass, $$props.class)} {...$$restProps} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
+  {itemName}
+</button>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let itemName: string = '';
+@prop export let active: boolean = false;
+@prop export let defaultClass: string = 'px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-lg';
+@prop export let activeClass: string = 'px-5 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900 rounded-lg';
+-->

package/src/lib/bottom-nav/BottomNavItem.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { ButtonClassesTypes } from '../types';
+  import type { BottomNavType } from './BottomNav.svelte';
+  import { twMerge } from 'tailwind-merge';
+
+  export let btnName: string = '';
+  export let appBtnPosition: 'left' | 'middle' | 'right' = 'middle';
+  export let activeClass: string | undefined = undefined;
+  export let href: string = '';
+  export let exact: boolean = true;
+
+  const navType: 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' = getContext('navType');
+
+  const context = getContext<BottomNavType>('bottomNavType') ?? {};
+  const activeUrlStore = getContext('activeUrl') as { subscribe: (callback: (value: string) => void) => void };
+
+  let navUrl = '';
+  activeUrlStore.subscribe((value) => {
+    navUrl = value;
+  });
+
+  $: active = navUrl && exact ? href === navUrl : navUrl ? navUrl.startsWith(href) : false;
+  const btnClasses: ButtonClassesTypes = {
+    default: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    border: 'inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600',
+    application: '',
+    pagination: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    group: 'inline-flex flex-col items-center justify-center p-4 hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    card: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    meeting: '',
+    video: ''
+  };
+
+  const spanClasses: ButtonClassesTypes = {
+    default: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500',
+    border: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500',
+    application: 'sr-only',
+    pagination: 'sr-only',
+    group: 'sr-only',
+    card: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500',
+    meeting: '',
+    video: ''
+  };
+
+  const appBtnClasses = {
+    left: 'inline-flex flex-col items-center justify-center px-5 rounded-l-full hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    middle: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    right: 'inline-flex flex-col items-center justify-center px-5 rounded-r-full hover:bg-gray-50 dark:hover:bg-gray-800 group'
+  };
+  let btnClass: string;
+
+  // let active = navUrl ? href === navUrl : false;
+
+  $: btnClass = twMerge(btnClasses[navType], appBtnClasses[appBtnPosition], active && (activeClass ?? context.activeClass), $$props.btnClass);
+
+  let spanClass: string;
+
+  $: spanClass = twMerge(spanClasses[navType], active && (activeClass ?? context.activeClass), $$props.spanClass);
+</script>
+
+<svelte:element this={href ? 'a' : 'button'} aria-label={btnName} {href} role={href ? 'link' : 'button'} {...$$restProps} class={btnClass} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
+  <slot />
+  <span class={spanClass}>{btnName}</span>
+</svelte:element>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let btnName: string = '';
+@prop export let appBtnPosition: 'left' | 'middle' | 'right' = 'middle';
+@prop export let activeClass: string | undefined = undefined;
+@prop export let href: string = '';
+@prop export let exact: boolean = true;
+-->

package/src/lib/breadcrumbs/Breadcrumb.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let solid: boolean = false;
+  export let navClass: string = 'flex';
+  export let solidClass: string = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
+  export let olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
+  let classNav: string = solid ? solidClass : navClass;
+</script>
+
+<nav aria-label="Breadcrumb" {...$$restProps} class={twMerge(classNav, $$props.class)}>
+  <ol class={twMerge(olClass, $$props.classOl)}>
+    <slot />
+  </ol>
+</nav>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let solid: boolean = false;
+@prop export let navClass: string = 'flex';
+@prop export let solidClass: string = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
+@prop export let olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
+-->