flowbite-svelte 0.44.8 → 0.44.9

package/src/lib/charts/Chart.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { ApexOptions } from 'apexcharts';
+
+  export let options: ApexOptions;
+
+  function initChart(node: HTMLElement, options: ApexOptions) {
+    let chart: ApexCharts;
+
+    async function asyncInitChart() {
+      const ApexCharts = (await import('apexcharts')).default;
+      chart = new ApexCharts(node, options);
+      chart.render();
+    }
+
+    asyncInitChart();
+
+    return {
+      update(options: ApexOptions) {
+        chart && chart.updateOptions(options);
+      },
+      destroy() {
+        chart && chart.destroy();
+      }
+    };
+  }
+</script>
+
+<div use:initChart={options} class={$$props.class} />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let options: ApexOptions;
+-->

package/src/lib/darkmode/DarkMode.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  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';
+  export let size: 'sm' | 'md' | 'lg' = 'md';
+
+  const sizes = {
+    sm: 'w-4 h-4',
+    md: 'w-5 h-5',
+    lg: 'w-6 h-6'
+  };
+
+  const toggleTheme = () => {
+    const isDark = window.document.documentElement.classList.toggle('dark');
+    localStorage.setItem('color-theme', isDark ? 'dark' : 'light');
+  };
+</script>
+
+<svelte:head>
+  <script>
+    if ('color-theme' in localStorage) {
+      // explicit preference - overrides author's choice
+      localStorage.getItem('color-theme') === 'dark' ? window.document.documentElement.classList.add('dark') : window.document.documentElement.classList.remove('dark');
+    } else {
+      // browser preference - does not overrides
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) window.document.documentElement.classList.add('dark');
+    }
+  </script>
+</svelte:head>
+
+<button on:click={toggleTheme} aria-label="Dark mode" type="button" {...$$restProps} class={twMerge(btnClass, $$props.class)}>
+  <span class="hidden dark:block">
+    <slot name="lightIcon">
+      <svg class={sizes[size]} 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>
+    </slot>
+  </span>
+  <span class="block dark:hidden">
+    <slot name="darkIcon">
+      <svg class={sizes[size]} 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>
+    </slot>
+  </span>
+</button>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop 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';
+@prop export let size: 'sm' | 'md' | 'lg' = 'md';
+-->

package/src/lib/datepicker/Calender.svelte

@@ -0,0 +1,3 @@
+<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
+</svg>

package/src/lib/datepicker/Datepicker.svelte

@@ -0,0 +1,66 @@
+<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: HTMLElement, params: any) => {
+    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}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let range: boolean = false;
+@prop export let autoHide: boolean = false;
+@prop export let datepickerButtons: boolean = false;
+@prop export let datepickerFormat: string = 'mm/dd/yyyy';
+@prop export let datepickerOrientation: string = 'bottom';
+@prop export let datepickerTitle: string = 'Flowbite datepicker';
+@prop export let attribute: string = '';
+@prop 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';
+-->

package/src/lib/device-mockup/Android.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  export let androidTop: string;
+  export let androidLeftTop: string;
+  export let androidLeftMid: string;
+  export let androidLeftBot: string;
+  export let androidRight: string;
+</script>
+
+<div class={androidTop} />
+<div class={androidLeftTop} />
+<div class={androidLeftMid} />
+<div class={androidLeftBot} />
+<div class={androidRight} />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let androidTop: string;
+@prop export let androidLeftTop: string;
+@prop export let androidLeftMid: string;
+@prop export let androidLeftBot: string;
+@prop export let androidRight: string;
+-->

package/src/lib/device-mockup/DefaultMockup.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  export let defaultTop: string;
+  export let defaultLeftTop: string;
+  export let defaultLeftBot: string;
+  export let defaultRight: string;
+</script>
+
+<div class={defaultTop} />
+<div class={defaultLeftTop} />
+<div class={defaultLeftBot} />
+<div class={defaultRight} />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let defaultTop: string;
+@prop export let defaultLeftTop: string;
+@prop export let defaultLeftBot: string;
+@prop export let defaultRight: string;
+-->

package/src/lib/device-mockup/DeviceMockup.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+  import { twJoin, twMerge } from 'tailwind-merge';
+  import DefaultMockup from './DefaultMockup.svelte';
+  import Ios from './Ios.svelte';
+  import Android from './Android.svelte';
+  import Tablet from './Tablet.svelte';
+  import Smartwatch from './Smartwatch.svelte';
+
+  export let device: 'default' | 'ios' | 'android' | 'tablet' | 'laptop' | 'desktop' | 'smartwatch' = 'default';
+
+  // android
+  export let androidDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl';
+  export let androidSlot: string = 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+  export let androidTop: string = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
+  export let androidLeftTop: string = 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+  export let androidLeftMid: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+  export let androidLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+  export let androidRight: string = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+
+  // default
+  export let defaultDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]';
+  export let defaultSlot: string = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+  export let defaultTop: string = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+  export let defaultLeftTop: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+  export let defaultLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+  export let defaultRight: string = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+
+  // desktop
+  export let desktopInner: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+  export let desktopBot: string = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]';
+  export let desktopBotUnder: string = 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
+  export let destopDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+  export let desktopSlot: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+
+  // ios
+  export let iosDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl';
+  export let iosSlot: string = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+  export let iosTop: string = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
+  export let iosLeftTop: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+  export let iosLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+  export let iosRight: string = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+
+  // laptop
+  export let laptopDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[8px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+  export let laptopSlot: string = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
+  export let laptopInner: string = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
+  export let laptopBot: string = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]';
+  export let laptopBotCen: string = 'absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56px] h-[5px] md:w-[96px] md:h-[8px] bg-gray-800';
+
+  // smartwatch
+  export let smartwatchDiv: string = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
+  export let smartwatchSlot: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
+  export let smartRightTop: string = 'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
+  export let smartRightBot: string = 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
+  export let smartTop: string = 'relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]';
+  export let smartBot: string = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
+  export let smartwatchInner: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
+
+  // tablet
+  export let tabletDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[454px] max-w-[341px] md:h-[682px] md:max-w-[512px]';
+  export let tabletSlot: string = 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800';
+  export let tabletLeftTop: string = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+  export let tabletLeftMid: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+  export let tabletLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+  export let tabletRight: string = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+
+  // android
+  let androidDivCls: string = twMerge(androidDiv, $$props.classAndroidDiv);
+  let androidSlotCls: string = twMerge(androidSlot, $$props.classAndroidSlot);
+  let androidTopCls: string = twMerge(androidTop, $$props.classAndroidTop);
+  let androidLeftTopCls: string = twMerge(androidLeftTop, $$props.classAndroidLeftTop);
+  let androidLeftMidCls: string = twMerge(androidLeftMid, $$props.classAndroidLeftMid);
+  let androidLeftBotCls: string = twMerge(androidLeftBot, $$props.classAndroidLeftBot);
+  let androidRightCls: string = twMerge(androidRight, $$props.classAndroidRight);
+
+  //default
+  let defaultDivCls: string = twMerge(defaultDiv, $$props.classDefaultDiv);
+  let defaultSlotCls: string = twMerge(defaultSlot, $$props.classDefaultSlot);
+  let defaultTopCls: string = twMerge(defaultTop, $$props.classDefaultTop);
+  let defaultLeftTopCls: string = twMerge(defaultLeftTop, $$props.classDefaultLeftTop);
+  let defaultLeftBotCls: string = twMerge(defaultLeftBot, $$props.classDefaultLeftBot);
+  let defaultRightCls: string = twMerge(defaultRight, $$props.classDefaultRight);
+
+  // desktop
+  let desktopInnerCls: string = twMerge(desktopInner, $$props.classDesktopInner);
+  let desktopBotCls: string = twMerge(desktopBot, $$props.classDesktopBot);
+  let desktopBotUnderCls: string = twMerge(desktopBotUnder, $$props.classDesktopBotUnder);
+  let destopDivCls: string = twMerge(destopDiv, $$props.classDestopDiv);
+  let desktopSlotCls: string = twMerge(desktopSlot, $$props.classDesktopSlot);
+
+  // ios
+  let iosDivCls: string = twMerge(iosDiv, $$props.classIosDiv);
+  let iosSlotCls: string = twMerge(iosSlot, $$props.classIosSlot);
+  let iosTopCls: string = twMerge(iosTop, $$props.classIosTop);
+  let iosLeftTopCls: string = twMerge(iosLeftTop, $$props.classIosLeftTop);
+  let iosLeftBotCls: string = twMerge(iosLeftBot, $$props.classIosLeftBot);
+  let iosRightCls: string = twMerge(iosRight, $$props.classIosRight);
+
+  // laptop
+  let laptopDivCls: string = twMerge(laptopDiv, $$props.classLaptopDiv);
+  let laptopSlotCls: string = twMerge(laptopSlot, $$props.classLaptopSlot);
+  let laptopInnerCls: string = twMerge(laptopInner, $$props.classLaptopInner);
+  let laptopBotCls: string = twMerge(laptopBot, $$props.classLaptopBot);
+  let laptopBotCenCls: string = twMerge(laptopBotCen, $$props.classLaptopBotCen);
+
+  // smartwatch
+  let smartwatchDivCls: string = twMerge(smartwatchDiv, $$props.classSmartwatchDiv);
+  let smartwatchSlotCls: string = twMerge(smartwatchSlot, $$props.classSmartwatchSlot);
+  let smartRightTopCls: string = twMerge(smartRightTop, $$props.classSmartRightTop);
+  let smartRightBotCls: string = twMerge(smartRightBot, $$props.classSmartRightBot);
+  let smartTopCls: string = twMerge(smartTop, $$props.classSmartTop);
+  let smartBotCls: string = twMerge(smartBot, $$props.classSmartBot);
+  let smartwatchInnerCls: string = twMerge(smartwatchInner, $$props.classSmartwatchInner);
+
+  // tablet
+
+  let tabletDivCls: string = twMerge(tabletDiv, $$props.classTabletDiv);
+  let tabletSlotCls: string = twMerge(tabletSlot, $$props.classTabletSlot);
+  let tabletLeftTopCls: string = twMerge(tabletLeftTop, $$props.classTabletLeftTop);
+  let tabletLeftMidCls: string = twMerge(tabletLeftMid, $$props.classTabletLeftMid);
+  let tabletLeftBotCls: string = twMerge(tabletLeftBot, $$props.classTabletLeftBot);
+  let tabletRightCls: string = twMerge(tabletRight, $$props.classTabletRight);
+
+  const divClasses = {
+    default: defaultDivCls,
+    ios: iosDivCls,
+    android: androidDivCls,
+    tablet: tabletDivCls,
+    laptop: laptopDivCls,
+    desktop: destopDivCls,
+    smartwatch: smartwatchDivCls
+  };
+
+  const slotClasses = {
+    default: defaultSlotCls,
+    ios: iosSlotCls,
+    android: androidSlotCls,
+    tablet: tabletSlotCls,
+    laptop: laptopSlotCls,
+    desktop: desktopSlotCls,
+    smartwatch: smartwatchSlotCls
+  };
+</script>
+
+<div class={twMerge(divClasses[device], $$props.class)}>
+  {#if device === 'default'}
+    <DefaultMockup defaultTop={defaultTopCls} defaultLeftTop={defaultLeftTopCls} defaultLeftBot={defaultLeftBotCls} defaultRight={defaultRightCls} />
+  {:else if device === 'ios'}
+    <Ios iosTop={iosTopCls} iosLeftTop={iosLeftTopCls} iosLeftBot={iosLeftBotCls} iosRight={iosRightCls} />
+  {:else if device === 'android'}
+    <Android androidTop={androidTopCls} androidLeftTop={androidLeftTopCls} androidLeftMid={androidLeftMidCls} androidLeftBot={androidLeftBotCls} androidRight={androidRightCls} />
+  {:else if device === 'tablet'}
+    <Tablet tabletLeftTop={tabletLeftTopCls} tabletLeftMid={tabletLeftMidCls} tabletLeftBot={tabletLeftBotCls} tabletRight={tabletRightCls} />
+  {/if}
+  {#if device === 'laptop'}
+    <div class={laptopInnerCls}>
+      <slot />
+    </div>
+  {:else if device === 'desktop'}
+    <div class={desktopInnerCls}>
+      <slot />
+    </div>
+  {:else if device === 'smartwatch'}
+    <!-- No code -->
+  {:else}
+    <div class={slotClasses[device]}>
+      <slot />
+    </div>
+  {/if}
+</div>
+{#if device === 'laptop'}
+  <div class={laptopBotCls}>
+    <div class={laptopBotCenCls} />
+  </div>
+{:else if device === 'desktop'}
+  <div class={desktopBotCls} />
+  <div class={desktopBotUnderCls} />
+{:else if device === 'smartwatch'}
+  <div class={smartTopCls}>
+    <Smartwatch smartRightTop={smartRightTopCls} smartRightBot={smartRightBotCls} />
+    <div class={smartwatchInnerCls}>
+      <slot />
+    </div>
+  </div>
+  <div class={smartBotCls} />
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let device: 'default' | 'ios' | 'android' | 'tablet' | 'laptop' | 'desktop' | 'smartwatch' = 'default';
+@prop export let androidDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl';
+@prop export let androidSlot: string = 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+@prop export let androidTop: string = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
+@prop export let androidLeftTop: string = 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+@prop export let androidLeftMid: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+@prop export let androidLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+@prop export let androidRight: string = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+@prop export let defaultDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]';
+@prop export let defaultSlot: string = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+@prop export let defaultTop: string = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+@prop export let defaultLeftTop: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+@prop export let defaultLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+@prop export let defaultRight: string = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+@prop export let desktopInner: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+@prop export let desktopBot: string = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]';
+@prop export let desktopBotUnder: string = 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
+@prop export let destopDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+@prop export let desktopSlot: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+@prop export let iosDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl';
+@prop export let iosSlot: string = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+@prop export let iosTop: string = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
+@prop export let iosLeftTop: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+@prop export let iosLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+@prop export let iosRight: string = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+@prop export let laptopDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[8px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+@prop export let laptopSlot: string = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
+@prop export let laptopInner: string = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
+@prop export let laptopBot: string = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]';
+@prop export let laptopBotCen: string = 'absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56px] h-[5px] md:w-[96px] md:h-[8px] bg-gray-800';
+@prop export let smartwatchDiv: string = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
+@prop export let smartwatchSlot: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
+@prop export let smartRightTop: string = 'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
+@prop export let smartRightBot: string = 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
+@prop export let smartTop: string = 'relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]';
+@prop export let smartBot: string = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
+@prop export let smartwatchInner: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
+@prop export let tabletDiv: string = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[454px] max-w-[341px] md:h-[682px] md:max-w-[512px]';
+@prop export let tabletSlot: string = 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800';
+@prop export let tabletLeftTop: string = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+@prop export let tabletLeftMid: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+@prop export let tabletLeftBot: string = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+@prop export let tabletRight: string = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+-->

package/src/lib/device-mockup/Ios.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  export let iosTop: string;
+  export let iosLeftTop: string;
+  export let iosLeftBot: string;
+  export let iosRight: string;
+</script>
+
+<div class={iosTop} />
+<div class={iosLeftTop} />
+<div class={iosLeftBot} />
+<div class={iosRight} />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let iosTop: string;
+@prop export let iosLeftTop: string;
+@prop export let iosLeftBot: string;
+@prop export let iosRight: string;
+-->

package/src/lib/device-mockup/Smartwatch.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  export let smartRightTop: string;
+  export let smartRightBot: string;
+</script>
+
+<div class={smartRightTop} />
+<div class={smartRightBot} />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let smartRightTop: string;
+@prop export let smartRightBot: string;
+-->

package/src/lib/device-mockup/Tablet.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  export let tabletLeftTop: string;
+  export let tabletLeftMid: string;
+  export let tabletLeftBot: string;
+  export let tabletRight: string;
+</script>
+
+<div class={tabletLeftTop} />
+<div class={tabletLeftMid} />
+<div class={tabletLeftBot} />
+<div class={tabletRight} />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let tabletLeftTop: string;
+@prop export let tabletLeftMid: string;
+@prop export let tabletLeftBot: string;
+@prop export let tabletRight: string;
+-->

package/src/lib/drawer/Drawer.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  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 = twMerge('fixed top-0 left-0 z-50 w-full h-full', backdrop && bgColor, backdrop && bgOpacity);
+
+  function clickOutsideWrapper(node: HTMLElement, callback: () => void) {
+    return activateClickOutside ? clickOutside(node, callback) : undefined;
+  }
+</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}
+
+  <div use:clickOutsideWrapper={() => !hidden && handleDrawer()} {id} {...$$restProps} class={twMerge(divClass, width, position, placements[placement], $$props.class)} transition:multiple={transitionParams} tabindex="-1" aria-controls={id} aria-labelledby={id}>
+    <slot {hidden} />
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let activateClickOutside: boolean = true;
+@prop export let hidden: boolean = true;
+@prop export let position: 'fixed' | 'absolute' = 'fixed';
+@prop export let leftOffset: string = 'inset-y-0 left-0';
+@prop export let rightOffset: string = 'inset-y-0 right-0';
+@prop export let topOffset: string = 'inset-x-0 top-0';
+@prop export let bottomOffset: string = 'inset-x-0 bottom-0';
+@prop export let width: string = 'w-80';
+@prop export let backdrop: boolean = true;
+@prop export let bgColor: string = 'bg-gray-900';
+@prop export let bgOpacity: string = 'bg-opacity-75';
+@prop export let placement: 'left' | 'right' | 'top' | 'bottom' = 'left';
+@prop export let id: string = 'drawer-example';
+@prop export let divClass: string = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
+@prop export let transitionParams: drawerTransitionParamTypes = {};
+@prop export let transitionType: drawerTransitionTypes = 'fly';
+-->