flowbite-svelte 0.44.11 → 0.44.12

package/src/lib/indicators/Indicator.svelte

@@ -1,86 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import type { PlacementType } from '../types';
-
-  export let color: IndicatorColorType = 'gray';
-  export let rounded: boolean = false;
-  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
-  export let border: boolean = false;
-  export let placement: PlacementType | undefined = undefined;
-  export let offset: boolean = true;
-
-  const colors = {
-    gray: 'bg-gray-200',
-    dark: 'bg-gray-900 dark:bg-gray-700',
-    blue: 'bg-blue-600',
-    orange: 'bg-orange-600',
-    green: 'bg-green-500',
-    red: 'bg-red-500',
-    purple: 'bg-purple-500',
-    indigo: 'bg-indigo-500',
-    yellow: 'bg-yellow-300',
-    teal: 'bg-teal-500',
-    none: ''
-  };
-
-  type IndicatorColorType = keyof typeof colors;
-
-  const sizes = {
-    xs: 'w-2 h-2',
-    sm: 'w-2.5 h-2.5',
-    md: 'w-3 h-3',
-    lg: 'w-3.5 h-3.5',
-    xl: 'w-6 h-6'
-  };
-
-  const placements = {
-    // top
-    'top-left': 'top-0 left-0',
-    'top-center': 'top-0 left-1/2 -translate-x-1/2',
-    'top-right': 'top-0 right-0',
-
-    // center
-    'center-left': 'top-1/2 -translate-y-1/2 left-0',
-    center: 'top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2',
-    'center-right': 'top-1/2 -translate-y-1/2 right-0',
-
-    // bottom
-    'bottom-left': 'bottom-0 left-0',
-    'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
-    'bottom-right': 'bottom-0 right-0'
-  };
-
-  const offsets = {
-    // top
-    'top-left': '-translate-x-1/3 -translate-y-1/3',
-    'top-center': '-translate-y-1/3',
-    'top-right': 'translate-x-1/3 -translate-y-1/3',
-
-    // center
-    'center-left': '-translate-x-1/3',
-    center: '',
-    'center-right': 'translate-x-1/3',
-
-    // bottom
-    'bottom-left': '-translate-x-1/3 translate-y-1/3',
-    'bottom-center': 'translate-y-1/3',
-    'bottom-right': 'translate-x-1/3 translate-y-1/3'
-  };
-
-  let dotClass: string;
-  $: dotClass = twMerge('flex-shrink-0', rounded ? 'rounded' : 'rounded-full', border && 'border-2 border-white dark:border-gray-800', sizes[size], colors[color], $$slots.default && 'inline-flex items-center justify-center', placement && 'absolute ' + placements[placement], placement && offset && offsets[placement], $$props.class);
-</script>
-
-<div class={dotClass}><slot /></div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let color: IndicatorColorType = 'gray';
-@prop export let rounded: boolean = false;
-@prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
-@prop export let border: boolean = false;
-@prop export let placement: PlacementType | undefined = undefined;
-@prop export let offset: boolean = true;
--->

package/src/lib/kbd/ArrowKeyDown.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  export let svgClass: string = 'w-4 h-4';
-</script>
-
-<svg {...$$restProps} class={twMerge(svgClass, $$props.class)} aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-  <path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z" />
-</svg>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let svgClass: string = 'w-4 h-4';
--->

package/src/lib/kbd/ArrowKeyLeft.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  export let svgClass: string = 'w-4 h-4';
-</script>
-
-<svg {...$$restProps} class={twMerge(svgClass, $$props.class)} aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-  <path d="M137.4 406.6l-128-127.1C3.125 272.4 0 264.2 0 255.1s3.125-16.38 9.375-22.63l128-127.1c9.156-9.156 22.91-11.9 34.88-6.943S192 115.1 192 128v255.1c0 12.94-7.781 24.62-19.75 29.58S146.5 415.8 137.4 406.6z" />
-</svg>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let svgClass: string = 'w-4 h-4';
--->

package/src/lib/kbd/ArrowKeyRight.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  export let svgClass: string = 'w-4 h-4';
-</script>
-
-<svg {...$$restProps} class={twMerge(svgClass, $$props.class)} aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-  <path d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z" />
-</svg>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let svgClass: string = 'w-4 h-4';
--->

package/src/lib/kbd/ArrowKeyUp.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  export let svgClass: string = 'w-4 h-4';
-</script>
-
-<svg {...$$restProps} class={twMerge(svgClass, $$props.class)} aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-  <path d="M9.39 265.4l127.1-128C143.6 131.1 151.8 128 160 128s16.38 3.125 22.63 9.375l127.1 128c9.156 9.156 11.9 22.91 6.943 34.88S300.9 320 287.1 320H32.01c-12.94 0-24.62-7.781-29.58-19.75S.2333 274.5 9.39 265.4z" />
-</svg>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let svgClass: string = 'w-4 h-4';
--->

package/src/lib/kbd/Kbd.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  export let kbdClass: string = 'text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500';
-</script>
-
-<kbd class={twMerge(kbdClass, $$props.class)}>
-  <slot />
-</kbd>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let kbdClass: string = 'text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500';
--->

package/src/lib/list-group/Listgroup.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-  import { setContext, type ComponentProps, createEventDispatcher } from 'svelte';
-  import { twMerge } from 'tailwind-merge';
-  import type { ListGroupItemType } from '../types';
-  import ListgroupItem from './ListgroupItem.svelte';
-  import Frame from '../utils/Frame.svelte';
-
-  const dispatch = createEventDispatcher();
-
-  // propagate props type from underlying Frame
-  interface $$Props extends ComponentProps<Frame> {
-    items?: ListGroupItemType[] | string[];
-    active?: boolean;
-  }
-
-  export let items: ListGroupItemType[] | string[] = [];
-  export let active: boolean = false;
-  export let defaultClass: string = 'divide-y divide-gray-200 dark:divide-gray-600';
-
-  $: setContext('active', active);
-
-  let groupClass: string;
-  $: groupClass = twMerge(defaultClass, $$props.class);
-</script>
-
-<Frame tag={active ? 'div' : 'ul'} {...$$restProps} rounded border class={groupClass}>
-  {#each items as item, index}
-    {#if typeof item === 'object'}
-      <ListgroupItem {active} {...item} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
-    {:else}
-      <ListgroupItem {active} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
-    {/if}
-  {:else}
-    <slot item={items[0]} />
-  {/each}
-</Frame>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let items: ListGroupItemType[] | string[] = [];
-@prop export let active: boolean = false;
-@prop export let defaultClass: string = 'divide-y divide-gray-200 dark:divide-gray-600';
--->

package/src/lib/list-group/ListgroupItem.svelte

@@ -1,57 +0,0 @@
-<script lang="ts">
-  import { getContext } from 'svelte';
-  import { twMerge } from 'tailwind-merge';
-
-  export let active: boolean = getContext('active');
-  export let current: boolean = false;
-  export let disabled: boolean = false;
-  export let href: string = '';
-  export let currentClass: string = 'text-white bg-primary-700 dark:text-white dark:bg-gray-800';
-  export let normalClass: string = '';
-  export let disabledClass: string = 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400';
-  export let focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
-  export let hoverClass: string = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
-  export let itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
-
-  const states = {
-    current: currentClass,
-    normal: normalClass,
-    disabled: disabledClass
-  };
-
-  let state: 'disabled' | 'current' | 'normal';
-  $: state = disabled ? 'disabled' : current ? 'current' : 'normal';
-
-  let itemClass: string;
-  $: itemClass = twMerge(itemDefaultClass, states[state], active && state === 'disabled' && 'cursor-not-allowed', active && state === 'normal' && hoverClass, active && state === 'normal' && focusClass, $$props.class);
-</script>
-
-{#if !active}
-  <li class={itemClass}>
-    <slot item={$$props} />
-  </li>
-{:else if href}
-  <a {href} class="block {itemClass}" aria-current={current} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
-    <slot item={$$props} />
-  </a>
-{:else}
-  <button type="button" class="flex items-center text-left {itemClass}" {disabled} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover aria-current={current}>
-    <slot item={$$props} />
-  </button>
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let active: boolean = getContext('active');
-@prop export let current: boolean = false;
-@prop export let disabled: boolean = false;
-@prop export let href: string = '';
-@prop export let currentClass: string = 'text-white bg-primary-700 dark:text-white dark:bg-gray-800';
-@prop export let normalClass: string = '';
-@prop export let disabledClass: string = 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400';
-@prop export let focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
-@prop export let hoverClass: string = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
-@prop export let itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
--->

package/src/lib/megamenu/MegaMenu.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import type { LinkType } from '../types';
-  import Popper from '../utils/Popper.svelte';
-  import type { ComponentProps } from 'svelte';
-
-  interface $$Props extends ComponentProps<Popper> {
-    items: LinkTypeLike[];
-    full: boolean;
-    ulClass: string;
-  }
-
-  export let items: LinkTypeLike[] = [];
-  export let full: boolean = false;
-  export let open: boolean = false;
-  export let ulClass: string = 'grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max';
-
-  interface LinkTypeLike extends LinkType {
-    [propName: string]: any;
-  }
-
-  let wrapperClass: string;
-  $: wrapperClass = twMerge(full && 'border-y w-full', $$props.class);
-
-  let ulCls: string;
-  $: ulCls = twMerge(ulClass, full && $$slots.extra ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-3', 'text-sm font-medium', full && $$slots.extra && 'md:w-2/3', $$props.classUl);
-</script>
-
-<Popper color={full ? 'default' : 'dropdown'} border={!full} rounded={!full} activeContent arrow={false} trigger="click" placement="bottom" yOnly={full} {...$$restProps} class={wrapperClass} on:show bind:open>
-  <div class="flex flex-col md:flex-row p-4 max-w-screen-md justify-center mx-auto mt-2">
-    <ul class={ulCls}>
-      {#each items as item, index}
-        <li>
-          <slot {item} {index} />
-        </li>
-      {:else}
-        <slot item={items[0]} />
-      {/each}
-    </ul>
-    {#if full && $$slots.extra}<div class="md:w-1/3 mt-4 md:mt-0"><slot name="extra" /></div>{/if}
-  </div>
-</Popper>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let items: LinkTypeLike[] = [];
-@prop export let full: boolean = false;
-@prop export let open: boolean = false;
-@prop export let ulClass: string = 'grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max';
--->

package/src/lib/modals/Modal.svelte

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

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

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

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

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

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