flowbite-svelte 0.36.4 → 0.37.1

package/dist/device-mockup/DeviceMockup.svelte.d.ts

@@ -2,6 +2,48 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         device?: "default" | "ios" | "android" | "tablet" | "laptop" | "desktop" | "smartwatch" | undefined;
+        androidDiv?: string | undefined;
+        androidSlot?: string | undefined;
+        androidTop?: string | undefined;
+        androidLeftTop?: string | undefined;
+        androidLeftMid?: string | undefined;
+        androidLeftBot?: string | undefined;
+        androidRight?: string | undefined;
+        defaultDiv?: string | undefined;
+        defaultSlot?: string | undefined;
+        defaultTop?: string | undefined;
+        defaultLeftTop?: string | undefined;
+        defaultLeftBot?: string | undefined;
+        defaultRight?: string | undefined;
+        desktopInner?: string | undefined;
+        desktopBot?: string | undefined;
+        desktopBotUnder?: string | undefined;
+        destopDiv?: string | undefined;
+        desktopSlot?: string | undefined;
+        iosDiv?: string | undefined;
+        iosSlot?: string | undefined;
+        iosTop?: string | undefined;
+        iosLeftTop?: string | undefined;
+        iosLeftBot?: string | undefined;
+        iosRight?: string | undefined;
+        laptopDiv?: string | undefined;
+        laptopSlot?: string | undefined;
+        laptopInner?: string | undefined;
+        laptopBot?: string | undefined;
+        laptopBotCen?: string | undefined;
+        smartwatchDiv?: string | undefined;
+        smartwatchSlot?: string | undefined;
+        smartRightTop?: string | undefined;
+        smartRightBot?: string | undefined;
+        smartTop?: string | undefined;
+        smartBot?: string | undefined;
+        smartwatchInner?: string | undefined;
+        tabletDiv?: string | undefined;
+        tabletSlot?: string | undefined;
+        tabletLeftTop?: string | undefined;
+        tabletLeftMid?: string | undefined;
+        tabletLeftBot?: string | undefined;
+        tabletRight?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -13,6 +55,125 @@ declare const __propDef: {
 export type DeviceMockupProps = typeof __propDef.props;
 export type DeviceMockupEvents = typeof __propDef.events;
 export type DeviceMockupSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+ * - Setup
+ * - Default mockup
+ * - iPhone 12 mockup (iOS)
+ * - Google Pixel mockup (Android)
+ * - Tablet mockup
+ * - Laptop mockup
+ * - Desktop mockup
+ * - Smartwatch mockup
+ * ## Props
+ * @prop device: 'default' | 'ios' | 'android' | 'tablet' | 'laptop' | 'desktop' | 'smartwatch' =
+ *   'default';
+ * ### Android
+ * @prop 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 androidSlot: string =
+ *   'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+ * @prop androidTop: string =
+ *   'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
+ * @prop androidLeftTop: string =
+ *   'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+ * @prop androidLeftMid: string =
+ *   'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+ * @prop androidLeftBot: string =
+ *   'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+ * @prop androidRight: string =
+ *   'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+ * ### Default
+ * @prop 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 defaultSlot: string =
+ *   'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+ * @prop defaultTop: string =
+ *   'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+ * @prop defaultLeftTop: string =
+ *   'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+ * @prop defaultLeftBot: string =
+ *   'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+ * @prop defaultRight: string =
+ *   'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+ * ### Desktop
+ * @prop desktopInner: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+ * @prop 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 desktopBotUnder: string =
+ *   'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
+ * @prop 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 desktopSlot: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+ * ### ios
+ * @prop 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 iosSlot: string =
+ *   'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+ * @prop iosTop: string =
+ *   'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
+ * @prop iosLeftTop: string =
+ *   'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+ * @prop iosLeftBot: string =
+ *   'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+ * @prop iosRight: string =
+ *   'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+ * ### Laptop
+ * @prop 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 laptopSlot: string =
+ *   'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
+ * @prop laptopInner: string =
+ *   'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
+ * @prop 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 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
+ * @prop smartwatchDiv: string =
+ *   'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
+ * @prop smartwatchSlot: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
+ * @prop smartRightTop: string =
+ *   'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
+ * @prop smartRightBot: string =
+ *   'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
+ * @prop 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 smartBot: string =
+ *   'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
+ * @prop smartwatchInner: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
+ * ### Tablet
+ * @prop 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 tabletSlot: string =
+ *   'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800';
+ * @prop tabletLeftTop: string =
+ *   'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+ * @prop tabletLeftMid: string =
+ *   'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+ * @prop tabletLeftBot: string =
+ *   'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+ * @prop tabletRight: string =
+ *   'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+ * ## Example
+ * ```
+ * <script>
+ *   import { DeviceMockup } from 'flowbite-svelte';
+ * </script>
+ *
+ * <DeviceMockup>
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png"
+ *     class="dark:hidden w-[272px] h-[572px]"
+ *     alt="default example 1" />
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-dark.png"
+ *     class="hidden dark:block w-[272px] h-[572px]"
+ *     alt="default example 2" />
+ * </DeviceMockup>
+ * ```
+ */
 export default class DeviceMockup extends SvelteComponentTyped<DeviceMockupProps, DeviceMockupEvents, DeviceMockupSlots> {
 }
 export {};

package/dist/device-mockup/DeviceMockup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceMockup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/DeviceMockup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAoFD,QAAA,MAAM,SAAS;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"DeviceMockup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/DeviceMockup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmLD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsHG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/device-mockup/Ios.svelte

@@ -1,4 +1,38 @@
-<div class="w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute"></div>
-<div class="h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg"></div>
-<div class="h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg"></div>
-<div class="h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"></div>
+<script>export let iosTop;
+export let iosLeftTop;
+export let iosLeftBot;
+export let iosRight;
+</script>
+
+<div class={iosTop} />
+<div class={iosLeftTop} />
+<div class={iosLeftBot} />
+<div class={iosRight} />
+
+<!--
+  @component
+  ## Features
+  [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+  ## Props
+  @prop iosTop: string;
+  @prop iosLeftTop: string;
+  @prop iosLeftBot: string;
+  @prop iosRight: string;
+  ## Example
+  ```
+  <script>
+    import { DeviceMockup } from 'flowbite-svelte';
+  </script>
+
+  <DeviceMockup device="ios">
+    <img
+      src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-2-light.png"
+      class="dark:hidden w-[272px] h-[572px]"
+      alt="ios example 1" />
+    <img
+      src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-2-dark.png"
+      class="hidden dark:block w-[272px] h-[572px]"
+      alt="ios example 2" />
+  </DeviceMockup>
+  ```
+-->

package/dist/device-mockup/Ios.svelte.d.ts

@@ -1,24 +1,46 @@
-/** @typedef {typeof __propDef.props}  IosProps */
-/** @typedef {typeof __propDef.events}  IosEvents */
-/** @typedef {typeof __propDef.slots}  IosSlots */
-export default class Ios extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type IosProps = typeof __propDef.props;
-export type IosEvents = typeof __propDef.events;
-export type IosSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        iosTop: string;
+        iosLeftTop: string;
+        iosLeftBot: string;
+        iosRight: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export type IosProps = typeof __propDef.props;
+export type IosEvents = typeof __propDef.events;
+export type IosSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+ * ## Props
+ * @prop iosTop: string;
+ * @prop iosLeftTop: string;
+ * @prop iosLeftBot: string;
+ * @prop iosRight: string;
+ * ## Example
+ * ```
+ * <script>
+ *   import { DeviceMockup } from 'flowbite-svelte';
+ * </script>
+ *
+ * <DeviceMockup device="ios">
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-2-light.png"
+ *     class="dark:hidden w-[272px] h-[572px]"
+ *     alt="ios example 1" />
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-2-dark.png"
+ *     class="hidden dark:block w-[272px] h-[572px]"
+ *     alt="ios example 2" />
+ * </DeviceMockup>
+ * ```
+ */
+export default class Ios extends SvelteComponentTyped<IosProps, IosEvents, IosSlots> {
+}
 export {};
 //# sourceMappingURL=Ios.svelte.d.ts.map

package/dist/device-mockup/Ios.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Ios.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Ios.svelte.js"],"names":[],"mappings":"AASA,kDAAkD;AAClD,oDAAoD;AACpD,kDAAkD;AAElD;;;;;CACC;uBALa,OAAO,UAAU,KAAK;wBACtB,OAAO,UAAU,MAAM;uBACvB,OAAO,UAAU,KAAK;qCAXC,QAAQ;AAQ7C;;;;;;;;EAA8E"}
+{"version":3,"file":"Ios.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Ios.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,QAAA,MAAM,SAAS;;gBADqG,MAAM;oBAAc,MAAM;oBAAc,MAAM;kBAAY,MAAM;;;;;;CAC7H,CAAC;AACxD,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,oBAAoB,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC;CACnF"}

package/dist/device-mockup/Smartwatch.svelte

@@ -0,0 +1,32 @@
+<script>export let smartRightTop;
+export let smartRightBot;
+</script>
+
+<div class={smartRightTop} />
+<div class={smartRightBot} />
+
+<!--
+  @component
+  ## Features
+  [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+  ## Props
+  @prop smartRightTop: string;
+  @prop smartRightBot: string;
+  ## Example
+  ```
+  <script>
+    import { DeviceMockup } from 'flowbite-svelte';
+  </script>
+
+  <DeviceMockup device="smartwatch">
+    <img
+      src="https://flowbite.s3.amazonaws.com/docs/device-mockups/watch-screen-image.png"
+      class="dark:hidden h-[193px] w-[188px"
+      alt="smartwatch example 1" />
+    <img
+      src="https://flowbite.s3.amazonaws.com/docs/device-mockups/watch-screen-image-dark.png"
+      class="hidden dark:block h-[193px] w-[188px]"
+      alt="smartwatch example 2" />
+  </DeviceMockup>
+  ```
+-->

package/dist/device-mockup/Smartwatch.svelte.d.ts

@@ -0,0 +1,42 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        smartRightTop: string;
+        smartRightBot: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SmartwatchProps = typeof __propDef.props;
+export type SmartwatchEvents = typeof __propDef.events;
+export type SmartwatchSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+ * ## Props
+ * @prop smartRightTop: string;
+ * @prop smartRightBot: string;
+ * ## Example
+ * ```
+ * <script>
+ *   import { DeviceMockup } from 'flowbite-svelte';
+ * </script>
+ *
+ * <DeviceMockup device="smartwatch">
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/docs/device-mockups/watch-screen-image.png"
+ *     class="dark:hidden h-[193px] w-[188px"
+ *     alt="smartwatch example 1" />
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/docs/device-mockups/watch-screen-image-dark.png"
+ *     class="hidden dark:block h-[193px] w-[188px]"
+ *     alt="smartwatch example 2" />
+ * </DeviceMockup>
+ * ```
+ */
+export default class Smartwatch extends SvelteComponentTyped<SmartwatchProps, SmartwatchEvents, SmartwatchSlots> {
+}
+export {};
+//# sourceMappingURL=Smartwatch.svelte.d.ts.map

package/dist/device-mockup/Smartwatch.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Smartwatch.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Smartwatch.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAaD,QAAA,MAAM,SAAS;;uBADkF,MAAM;uBAAiB,MAAM;;;;;;CACvE,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/device-mockup/Tablet.svelte

@@ -1,4 +1,38 @@
-<div class="h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg"></div>
-<div class="h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg"></div>
-<div class="h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg"></div>
-<div class="h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"></div>
+<script>export let tabletLeftTop;
+export let tabletLeftMid;
+export let tabletLeftBot;
+export let tabletRight;
+</script>
+
+<div class={tabletLeftTop} />
+<div class={tabletLeftMid} />
+<div class={tabletLeftBot} />
+<div class={tabletRight} />
+
+<!--
+  @component
+  ## Features
+  [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+  ## Props
+  @prop tabletLeftTop: string;
+  @prop tabletLeftMid: string;
+  @prop tabletLeftBot: string;
+  @prop tabletRight: string;
+  ## Example
+  ```
+  <script>
+    import { DeviceMockup } from 'flowbite-svelte';
+  </script>
+
+  <DeviceMockup device="tablet">
+    <img
+      src="https://flowbite.s3.amazonaws.com/docs/device-mockups/tablet-mockup-image.png"
+      class="dark:hidden h-[426px] md:h-[654px]"
+      alt="tablet example 1" />
+    <img
+      src="https://flowbite.s3.amazonaws.com/docs/device-mockups/tablet-mockup-image-dark.png"
+      class="hidden dark:block h-[426px] md:h-[654px]"
+      alt="tablet example 2" />
+  </DeviceMockup>
+  ```
+-->

package/dist/device-mockup/Tablet.svelte.d.ts

@@ -1,24 +1,46 @@
-/** @typedef {typeof __propDef.props}  TabletProps */
-/** @typedef {typeof __propDef.events}  TabletEvents */
-/** @typedef {typeof __propDef.slots}  TabletSlots */
-export default class Tablet extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TabletProps = typeof __propDef.props;
-export type TabletEvents = typeof __propDef.events;
-export type TabletSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        tabletLeftTop: string;
+        tabletLeftMid: string;
+        tabletLeftBot: string;
+        tabletRight: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export type TabletProps = typeof __propDef.props;
+export type TabletEvents = typeof __propDef.events;
+export type TabletSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+ * ## Props
+ * @prop tabletLeftTop: string;
+ * @prop tabletLeftMid: string;
+ * @prop tabletLeftBot: string;
+ * @prop tabletRight: string;
+ * ## Example
+ * ```
+ * <script>
+ *   import { DeviceMockup } from 'flowbite-svelte';
+ * </script>
+ *
+ * <DeviceMockup device="tablet">
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/docs/device-mockups/tablet-mockup-image.png"
+ *     class="dark:hidden h-[426px] md:h-[654px]"
+ *     alt="tablet example 1" />
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/docs/device-mockups/tablet-mockup-image-dark.png"
+ *     class="hidden dark:block h-[426px] md:h-[654px]"
+ *     alt="tablet example 2" />
+ * </DeviceMockup>
+ * ```
+ */
+export default class Tablet extends SvelteComponentTyped<TabletProps, TabletEvents, TabletSlots> {
+}
 export {};
 //# sourceMappingURL=Tablet.svelte.d.ts.map

package/dist/device-mockup/Tablet.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tablet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Tablet.svelte.js"],"names":[],"mappings":"AASA,qDAAqD;AACrD,uDAAuD;AACvD,qDAAqD;AAErD;;;;;CACC;0BALa,OAAO,UAAU,KAAK;2BACtB,OAAO,UAAU,MAAM;0BACvB,OAAO,UAAU,KAAK;qCAXC,QAAQ;AAQ7C;;;;;;;;EAA8E"}
+{"version":3,"file":"Tablet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Tablet.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,QAAA,MAAM,SAAS;;uBAD4I,MAAM;uBAAiB,MAAM;uBAAiB,MAAM;qBAAe,MAAM;;;;;;CAC7K,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/drawer/Drawer.svelte

@@ -72,3 +72,75 @@ let backdropDivClass = classNames('fixed top-0 left-0 z-50 w-full h-full', backd
     </div>
   {/if}
 {/if}
+
+<!--
+  @component
+  ## Features
+  [Go to Drawer](https://flowbite-svelte.com/docs/components/drawer)
+  - Set up
+  - Default drawer
+  - Drawer navigation
+  - Contact form
+  - Form elements
+  - Placement
+  - Backdrop
+  - Position
+  - Disabling outside click and backdrop
+  - Disabling only outside click
+  ## Props
+  @prop activateClickOutside: boolean = true;
+  @prop hidden: boolean = true;
+  @prop position: 'fixed' | 'absolute' = 'fixed';
+  @prop leftOffset: string = 'inset-y-0 left-0';
+  @prop rightOffset: string = 'inset-y-0 right-0';
+  @prop topOffset: string = 'inset-x-0 top-0';
+  @prop bottomOffset: string = 'inset-x-0 bottom-0';
+  @prop width: string = 'w-80';
+  @prop backdrop: boolean = true;
+  @prop bgColor: string = 'bg-gray-900';
+  @prop bgOpacity: string = 'bg-opacity-75';
+  @prop placement: 'left' | 'right' | 'top' | 'bottom' = 'left';
+  @prop id: string = 'drawer-example';
+  @prop divClass: string = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
+  @prop transitionParams: drawerTransitionParamTypes = {};
+  @prop transitionType: drawerTransitionTypes = 'fly';
+  ## Example
+  ```
+  <script>
+    import { Drawer, Button, CloseButton } from 'flowbite-svelte';
+    import { sineIn } from 'svelte/easing';
+    let hidden1 = true; 
+    let transitionParams = {
+      x: -320,
+      duration: 200,
+      easing: sineIn
+    };
+  </script>
+
+  <div class="text-center">
+    <Button on:click={() => (hidden1 = false)}>Show drawer</Button>
+  </div>
+
+  <Drawer transitionType="fly" {transitionParams} bind:hidden={hidden1} id='sidebar1'>
+  <div class='flex items-center'>
+    <h5
+      id="drawer-label"
+      class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
+      <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
+    </h5>
+    <CloseButton on:click={() => (hidden1 = true)} class='mb-4 dark:text-white'/>
+      </div>
+    <p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
+      Supercharge your hiring by taking advantage of our <a
+        href="/"
+        class="text-blue-600 underline dark:text-blue-500 hover:no-underline">limited-time sale</a> for
+      Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
+      job board.
+    </p>
+    <div class="grid grid-cols-2 gap-4">
+      <Button color="light" href="/">Learn more</Button>
+      <Button href="/" >Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
+    </div>
+  </Drawer>
+  ```
+-->

package/dist/drawer/Drawer.svelte.d.ts

@@ -32,6 +32,76 @@ declare const __propDef: {
 export type DrawerProps = typeof __propDef.props;
 export type DrawerEvents = typeof __propDef.events;
 export type DrawerSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Drawer](https://flowbite-svelte.com/docs/components/drawer)
+ * - Set up
+ * - Default drawer
+ * - Drawer navigation
+ * - Contact form
+ * - Form elements
+ * - Placement
+ * - Backdrop
+ * - Position
+ * - Disabling outside click and backdrop
+ * - Disabling only outside click
+ * ## Props
+ * @prop activateClickOutside: boolean = true;
+ * @prop hidden: boolean = true;
+ * @prop position: 'fixed' | 'absolute' = 'fixed';
+ * @prop leftOffset: string = 'inset-y-0 left-0';
+ * @prop rightOffset: string = 'inset-y-0 right-0';
+ * @prop topOffset: string = 'inset-x-0 top-0';
+ * @prop bottomOffset: string = 'inset-x-0 bottom-0';
+ * @prop width: string = 'w-80';
+ * @prop backdrop: boolean = true;
+ * @prop bgColor: string = 'bg-gray-900';
+ * @prop bgOpacity: string = 'bg-opacity-75';
+ * @prop placement: 'left' | 'right' | 'top' | 'bottom' = 'left';
+ * @prop id: string = 'drawer-example';
+ * @prop divClass: string = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
+ * @prop transitionParams: drawerTransitionParamTypes = {};
+ * @prop transitionType: drawerTransitionTypes = 'fly';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Drawer, Button, CloseButton } from 'flowbite-svelte';
+ *   import { sineIn } from 'svelte/easing';
+ *   let hidden1 = true;
+ *   let transitionParams = {
+ *     x: -320,
+ *     duration: 200,
+ *     easing: sineIn
+ *   };
+ * </script>
+ *
+ * <div class="text-center">
+ *   <Button on:click={() => (hidden1 = false)}>Show drawer</Button>
+ * </div>
+ *
+ * <Drawer transitionType="fly" {transitionParams} bind:hidden={hidden1} id='sidebar1'>
+ * <div class='flex items-center'>
+ *   <h5
+ *     id="drawer-label"
+ *     class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
+ *     <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
+ *   </h5>
+ *   <CloseButton on:click={() => (hidden1 = true)} class='mb-4 dark:text-white'/>
+ *     </div>
+ *   <p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
+ *     Supercharge your hiring by taking advantage of our <a
+ *       href="/"
+ *       class="text-blue-600 underline dark:text-blue-500 hover:no-underline">limited-time sale</a> for
+ *     Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
+ *     job board.
+ *   </p>
+ *   <div class="grid grid-cols-2 gap-4">
+ *     <Button color="light" href="/">Learn more</Button>
+ *     <Button href="/" >Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
+ *   </div>
+ * </Drawer>
+ * ```
+ */
 export default class Drawer extends SvelteComponentTyped<DrawerProps, DrawerEvents, DrawerSlots> {
 }
 export {};

package/dist/drawer/Drawer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/drawer/Drawer.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,0BAA0B,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AA6ElF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;yBAD6wB,qBAAqB;;;;;;;;;;CACnuB,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/drawer/Drawer.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,0BAA0B,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AA+ElF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;yBAD6wB,qBAAqB;;;;;;;;;;CACnuB,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}