flowbite-svelte 0.27.13 → 0.27.15

package/src/lib/carousels/Carousel.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import Slide from './Slide.svelte';
+	import Thumbnail from './Thumbnail.svelte';
+	import Caption from './Caption.svelte';
+	import Indicator from './Indicator.svelte';
+
+	export let showIndicators: boolean = true;
+	export let showCaptions: boolean = true;
+	export let showThumbs: boolean = true;
+	export let images: any[];
+	export let slideControls: boolean = true;
+	export let loop: boolean = false;
+	export let duration: number = 2000;
+
+	// Carousel
+	export let divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
+	export let indicatorDivClass: string =
+		'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
+	// Caption
+	export let captionClass: string =
+		'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
+	// Indicator
+	export let indicatorClass: string =
+		'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
+	// Slide
+	export let slideClass: string = '';
+
+	let imageShowingIndex: number = 0;
+	$: image = images[imageShowingIndex];
+
+	const nextSlide = () => {
+		if (imageShowingIndex === images.length - 1) {
+			imageShowingIndex = 0;
+		} else {
+			imageShowingIndex += 1;
+		}
+	};
+
+	const prevSlide = () => {
+		if (imageShowingIndex === 0) {
+			imageShowingIndex = images.length - 1;
+		} else {
+			imageShowingIndex -= 1;
+		}
+	};
+
+	const goToSlide = (number) => (imageShowingIndex = number);
+	let thumbWidth = 100 / images.length;
+
+	if (loop) {
+		setInterval(() => {
+			nextSlide();
+		}, duration);
+	}
+</script>
+
+<div id="default-carousel" class="relative">
+	<div class={divClass}>
+		<Slide image={image.imgurl} altTag={image.name} attr={image.attribution} {slideClass} />
+	</div>
+	{#if showIndicators}
+		<!-- Slider indicators -->
+		<div class={indicatorDivClass}>
+			{#each images as { id, imgurl, name, attribution }}
+				<Indicator
+					{name}
+					selected={imageShowingIndex === id}
+					on:click={() => goToSlide(id)}
+					{indicatorClass} />
+			{/each}
+		</div>
+	{/if}
+	{#if slideControls}
+		<!-- Slider controls -->
+		<button
+			on:click={prevSlide}
+			type="button"
+			class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
+			data-carousel-prev>
+			<span
+				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+				{#if $$slots.previous}
+					<slot name="previous" />
+				{:else}
+					<svg
+						aria-hidden="true"
+						class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 19l-7-7 7-7" /></svg>
+				{/if}
+				<span class="hidden">Previous</span>
+			</span>
+		</button>
+		<button
+			on:click={nextSlide}
+			type="button"
+			class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
+			data-carousel-next>
+			<span
+				class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+				{#if $$slots.next}
+					<slot name="next" />
+				{:else}
+					<svg
+						aria-hidden="true"
+						class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 5l7 7-7 7" /></svg>
+				{/if}
+				<span class="hidden">Next</span>
+			</span>
+		</button>
+	{/if}
+</div>
+
+{#if showCaptions}
+	<Caption caption={images[imageShowingIndex].name} {captionClass} />
+{/if}
+
+{#if showThumbs}
+	<div class="flex flex-row justify-center bg-gray-100">
+		{#each images as { id, imgurl, name, attribution }}
+			<Thumbnail
+				{thumbWidth}
+				thumbImg={imgurl}
+				altTag={name}
+				titleLink={attribution}
+				{id}
+				selected={imageShowingIndex === id}
+				on:click={() => goToSlide(id)} />
+		{/each}
+	</div>
+{/if}

package/src/lib/carousels/CarouselTransition.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+  import { fade, blur, fly, slide } from 'svelte/transition';
+  import type { TransitionTypes, TransitionParamTypes } from '../types';
+  import Slide from './Slide.svelte';
+  import Thumbnail from './Thumbnail.svelte';
+  import Caption from './Caption.svelte';
+  import Indicator from './Indicator.svelte';
+
+  export let showIndicators: boolean = true;
+  export let showCaptions: boolean = true;
+  export let showThumbs: boolean = true;
+  export let images: any[];
+  export let slideControls: boolean = true;
+  export let transitionType: TransitionTypes = 'fade';
+  export let transitionParams: TransitionParamTypes = {};
+  export let loop: boolean = false;
+  export let duration: number = 2000;
+
+  // Carousel
+  export let divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
+  export let indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
+
+  // Caption
+  export let captionClass: string = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
+
+  // Indicator
+  export let indicatorClass: string = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
+
+  // have a custom transition function that returns the desired transition
+  const multiple = (node: HTMLElement, params: any) => {
+    switch (transitionType) {
+      case 'slide':
+        return slide(node, params);
+      case 'blur':
+        return blur(node, params);
+      case 'fly':
+        return fly(node, params);
+      default:
+        return fade(node, params);
+    }
+  };
+  // Slide
+  // export let slideClass: string = 'hidden';
+
+  let imageShowingIndex: number = 0;
+  // $: image = images[imageShowingIndex];
+
+  const nextSlide = () => {
+    if (imageShowingIndex === images.length - 1) {
+      imageShowingIndex = 0;
+    } else {
+      imageShowingIndex += 1;
+    }
+  };
+
+  const prevSlide = () => {
+    if (imageShowingIndex === 0) {
+      imageShowingIndex = images.length - 1;
+    } else {
+      imageShowingIndex -= 1;
+    }
+  };
+
+  const goToSlide = (number: number) => (imageShowingIndex = number);
+  let thumbWidth = 100 / images.length;
+
+  if (loop) {
+    setInterval(() => {
+      nextSlide();
+    }, duration);
+  }
+</script>
+
+<div id="default-carousel" class="relative">
+  <div class={divClass}>
+    {#each images as { id, imgurl, name, attribution }}
+      {#if imageShowingIndex === id}
+        <div transition:multiple={transitionParams}>
+          <Slide image={imgurl} altTag={name} attr={attribution} />
+        </div>
+      {/if}
+    {/each}
+  </div>
+
+  {#if showIndicators}
+    <!-- Slider indicators -->
+    <div class={indicatorDivClass}>
+      {#each images as { id, imgurl, name, attribution }}
+        <Indicator
+          {name}
+          selected={imageShowingIndex === id}
+          on:click={() => goToSlide(id)}
+          {indicatorClass} />
+      {/each}
+    </div>
+  {/if}
+  {#if slideControls}
+    <!-- Slider controls -->
+    <button
+      on:click={prevSlide}
+      type="button"
+      class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
+      data-carousel-prev>
+      <span
+        class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+        {#if $$slots.previous}
+          <slot name="previous" />
+        {:else}
+          <svg
+            aria-hidden="true"
+            class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            ><path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M15 19l-7-7 7-7" /></svg>
+        {/if}
+        <span class="hidden">Previous</span>
+      </span>
+    </button>
+    <button
+      on:click={nextSlide}
+      type="button"
+      class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
+      data-carousel-next>
+      <span
+        class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+        {#if $$slots.next}
+          <slot name="next" />
+        {:else}
+          <svg
+            aria-hidden="true"
+            class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            ><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
+        {/if}
+        <span class="hidden">Next</span>
+      </span>
+    </button>
+  {/if}
+</div>
+
+{#if showCaptions}
+  <Caption caption={images[imageShowingIndex].name} {captionClass} />
+{/if}
+
+{#if showThumbs}
+  <div class="flex flex-row justify-center bg-gray-100">
+    {#each images as { id, imgurl, name, attribution }}
+      <Thumbnail
+        {thumbWidth}
+        thumbImg={imgurl}
+        altTag={name}
+        titleLink={attribution}
+        {id}
+        selected={imageShowingIndex === id}
+        on:click={() => goToSlide(id)} />
+    {/each}
+  </div>
+{/if}

package/src/lib/carousels/Indicator.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let name: string = '';
+  export let selected: boolean = false;
+  export let indicatorClass: string = '';
+</script>
+
+<button type="button" class={indicatorClass} class:active={selected} aria-label={name} on:click />
+
+<style>
+  .active {
+    opacity: 1;
+  }
+</style>

package/src/lib/carousels/Slide.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let image: string = '';
+  export let altTag: string = '';
+  export let attr: string = '';
+  export let slideClass: string = '';
+</script>
+
+<div class={slideClass}>
+  <img src={image} alt={altTag} title={attr} />
+</div>

package/src/lib/carousels/Thumbnail.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  export let thumbImg: string = '';
+  export let altTag: string = '';
+  export let titleLink: string = '';
+  export let id: number;
+  export let thumbWidth: number;
+  export let selected: boolean = false;
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<img
+  class="opacity-40"
+  class:active={selected}
+  id={id.toString()}
+  src={thumbImg}
+  alt={altTag}
+  title="Image from {titleLink}"
+  on:click
+  width="{thumbWidth}%" />
+
+<style>
+  .active {
+    opacity: 1;
+  }
+</style>

package/src/lib/darkmode/DarkMode.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  export let btnClass: string =
+    'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 fixed left-0 top-8 z-50';
+  const toggleTheme = () => {
+    const isDark = window.document.documentElement.classList.toggle('dark');
+    localStorage.setItem('color-theme', isDark ? 'dark' : 'light');
+  };
+</script>
+
+<svelte:head>
+  <script>
+    if (window) {
+      localStorage.getItem('color-theme') === 'dark' ||
+      (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+        ? window.document.documentElement.classList.add('dark')
+        : window.document.documentElement.classList.remove('dark');
+    }
+  </script>
+</svelte:head>
+
+<button on:click={toggleTheme} aria-label="Dark mode" type="button" class={btnClass}>
+  <span class="hidden dark:block">
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1
+  0 100-2H3a1 1 0 000 2h1z"
+        fill-rule="evenodd"
+        clip-rule="evenodd" />
+    </svg>
+  </span>
+  <span class="dark:hidden">
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+    </svg>
+  </span>
+</button>

package/src/lib/datepicker/Datepicker.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import Calendar from './Calender.svelte';
+
+	export let range: boolean = false;
+	// autoHide not working
+	// export let autoHide: boolean = false;
+	export let datepickerButtons: boolean = false;
+	export let datepickerFormat: string = 'mm/dd/yyyy';
+	export let datepickerOrientation: string = 'bottom';
+	export let datepickerTitle: string = 'Flowbite datepicker';
+	export let attribute: string = '';
+	export let inputClass: string =
+		'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+
+	$: setAttribute = (node, params) => {
+		node.setAttribute(params, '');
+	};
+</script>
+
+<svelte:head>
+	<link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.1/dist/flowbite.min.css" />
+	<script src="https://unpkg.com/flowbite@1.5.1/dist/datepicker.js"></script>
+</svelte:head>
+
+{#if range}
+	<div date-rangepicker class="flex items-center">
+		<div class="relative">
+			<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+				<Calendar />
+			</div>
+			<input name="start" type="text" class={inputClass} placeholder="Select date start" />
+		</div>
+		<span class="mx-4 text-gray-500">to</span>
+		<div class="relative">
+			<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+				<Calendar />
+			</div>
+			<input name="end" type="text" class={inputClass} placeholder="Select date end" />
+		</div>
+	</div>
+{:else}
+	<div class="relative">
+		<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+			<Calendar />
+		</div>
+		{#if datepickerButtons}
+			<input
+				{...$$restProps}
+				datepicker
+				datepicker-buttons
+				datepicker-format={datepickerFormat}
+				datepicker-orientation={datepickerOrientation}
+				datepicker-title={datepickerTitle}
+				use:setAttribute={attribute}
+				type="text"
+				class={inputClass}
+				placeholder="Select date"
+			/>
+		{:else}
+			<input
+				{...$$restProps}
+				datepicker
+				datepicker-format={datepickerFormat}
+				datepicker-orientation={datepickerOrientation}
+				datepicker-title={datepickerTitle}
+				use:setAttribute={attribute}
+				type="text"
+				class={inputClass}
+				placeholder="Select date"
+			/>
+		{/if}
+		<slot />
+	</div>
+{/if}

package/src/lib/drawer/Drawer.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import classNames from 'classnames';
+  import type { drawerTransitionParamTypes, drawerTransitionTypes } from '../types';
+  import { fly, slide, blur, fade } from 'svelte/transition';
+  import { clickOutside } from '../utils/clickOutside';
+  export let activateClickOutside: boolean = true;
+  export let hidden: boolean = true;
+  export let position: 'fixed' | 'absolute' = 'fixed';
+  export let leftOffset: string = 'inset-y-0 left-0';
+  export let rightOffset: string = 'inset-y-0 right-0';
+  export let topOffset: string = 'inset-x-0 top-0';
+  export let bottomOffset: string = 'inset-x-0 bottom-0';
+  export let width: string = 'w-80';
+  export let backdrop: boolean = true;
+  export let bgColor: string = 'bg-gray-900';
+  export let bgOpacity: string = 'bg-opacity-75';
+  export let placement: 'left' | 'right' | 'top' | 'bottom' = 'left';
+  export let id: string = 'drawer-example';
+  export let divClass: string = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
+
+  export let transitionParams: drawerTransitionParamTypes = {};
+  export let transitionType: drawerTransitionTypes = 'fly';
+
+  function multiple(node: HTMLElement, params: any) {
+    switch (transitionType) {
+      case 'slide':
+        return slide(node, params);
+      case 'blur':
+        return blur(node, params);
+      case 'fade':
+        return fade(node, params);
+      default:
+        return fly(node, params);
+    }
+  }
+
+  const placements = {
+    left: leftOffset,
+    right: rightOffset,
+    top: topOffset,
+    bottom: bottomOffset
+  };
+
+  const handleDrawer = () => {
+    hidden = !hidden;
+  };
+
+  let backdropDivClass = classNames(
+    'fixed top-0 left-0 z-50 w-full h-full',
+    backdrop && bgColor,
+    backdrop && bgOpacity
+  );
+</script>
+
+{#if !hidden}
+  {#if backdrop && activateClickOutside}
+    <div role="presentation" class={backdropDivClass} on:click={() => !hidden && handleDrawer()} />
+  {:else if backdrop && !activateClickOutside}
+    <div role="presentation" class={backdropDivClass} />
+  {/if}
+  {#if activateClickOutside}
+    <div
+      use:clickOutside={() => !hidden && handleDrawer()}
+      {id}
+      {...$$restProps}
+      class={classNames(divClass, width, position, placements[placement], $$props.class)}
+      transition:multiple={transitionParams}
+      tabindex="-1"
+      aria-controls={id}
+      aria-labelledby={id}>
+      <slot {hidden} />
+    </div>
+  {:else}
+    <div
+      {id}
+      {...$$restProps}
+      class={classNames(divClass, width, position, placements[placement], $$props.class)}
+      transition:multiple={transitionParams}
+      tabindex="-1"
+      aria-controls={id}
+      aria-labelledby={id}>
+      <slot {hidden} />
+    </div>
+  {/if}
+{/if}

package/src/lib/dropdowns/Dropdown.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import classNames from 'classnames';
+  import Popper from '$lib/utils/Popper.svelte';
+
+  export let open: boolean = false;
+  export let frameClass: string = '';
+
+  $: {
+    // 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;
+  }
+
+  let popoverClass: string;
+  $: popoverClass = classNames('divide-y divide-gray-100 dark:divide-gray-600', frameClass);
+</script>
+
+<Popper activeContent {...$$restProps} class={popoverClass} on:show bind:open>
+  {#if $$slots.header}
+    <div class="py-1 overflow-hidden rounded-t">
+      <slot name="header" />
+    </div>
+  {/if}
+  <ul class={$$props.class ?? 'py-1 w-44'}>
+    <slot />
+  </ul>
+  {#if $$slots.footer}
+    <div class="py-1  overflow-hidden rounded-b">
+      <slot name="footer" />
+    </div>
+  {/if}
+</Popper>

package/src/lib/dropdowns/DropdownDivider.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	export let divClass: string = 'my-1 h-px bg-gray-100 dark:bg-gray-600';
+</script>
+
+<div {...$$restProps} class={classNames(divClass, $$props.class)} />

package/src/lib/dropdowns/DropdownHeader.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	import DropdownDivider from './DropdownDivider.svelte';
+	export let divClass: string = 'py-2 px-4 text-gray-700 dark:text-white';
+	// 'block py-2 px-4 text-sm text-gray-700 dark:text-gray-200';
+	export let divider: boolean = true;
+</script>
+
+<div {...$$restProps} class={classNames(divClass, $$props.class)}>
+	<slot />
+</div>
+{#if divider}
+	<DropdownDivider />
+{/if}

package/src/lib/dropdowns/DropdownItem.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import Wrapper from '$lib/utils/Wrapper.svelte';
+  import classNames from 'classnames';
+
+  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;
+
+  let liClass: string;
+  $: liClass = classNames(defaultClass, href ? 'block' : 'w-full text-left', $$props.class);
+
+  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}
+    {...$$restProps}
+    class={liClass}
+    on:click
+    on:change
+    on:keydown
+    on:keyup
+    on:focus
+    on:blur
+    on:mouseenter
+    on:mouseleave>
+    <slot />
+  </svelte:element>
+</Wrapper>

package/src/lib/footer/Footer.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import classNames from 'classnames';
+  export let customClass: string = '';
+  export let footerType: 'custom' | 'sitemap' | 'default' | 'logo' | 'socialmedia' = 'default';
+  // using classNames dynamic class names, https://github.com/JedWatson/classnames#dynamic-class-names-with-es2015
+</script>
+
+<footer
+  {...$$restProps}
+  class={classNames(
+    {
+      'bg-gray-800': footerType === 'sitemap',
+      'p-4 bg-white sm:p-6 dark:bg-gray-800': footerType === 'socialmedia',
+      'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800': footerType === 'logo',
+      'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800':
+        footerType === 'default',
+      [`${customClass}`]: footerType === 'custom'
+    },
+    $$props.class
+  )}>
+  <slot />
+</footer>