flowbite-svelte 0.36.5 → 0.37.1

package/dist/device-mockup/Android.svelte

@@ -1,8 +1,8 @@
-<script>export let androidTop = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
-export let androidLeftTop = 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-export let androidLeftMid = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-export let androidLeftBot = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-export let androidRight = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+<script>export let androidTop;
+export let androidLeftTop;
+export let androidLeftMid;
+export let androidLeftBot;
+export let androidRight;
 </script>
 
 <div class={androidTop} />
@@ -10,3 +10,32 @@ export let androidRight = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] t
 <div class={androidLeftMid} />
 <div class={androidLeftBot} />
 <div class={androidRight} />
+
+<!--
+  @component
+  ## Features
+  [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+  ## Props
+  @prop androidTop: string;
+  @prop androidLeftTop: string;
+  @prop androidLeftMid: string;
+  @prop androidLeftBot: string;
+  @prop androidRight: string;
+  ## Example
+  ```
+  <script>
+    import { DeviceMockup } from 'flowbite-svelte';
+  </script>
+
+  <DeviceMockup device="android">
+    <img
+      src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png"
+      class="dark:hidden w-[272px] h-[572px]"
+      alt="android 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="android example 2" />
+  </DeviceMockup>
+  ```
+-->

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

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        androidTop?: string | undefined;
-        androidLeftTop?: string | undefined;
-        androidLeftMid?: string | undefined;
-        androidLeftBot?: string | undefined;
-        androidRight?: string | undefined;
+        androidTop: string;
+        androidLeftTop: string;
+        androidLeftMid: string;
+        androidLeftBot: string;
+        androidRight: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -15,6 +15,33 @@ declare const __propDef: {
 export type AndroidProps = typeof __propDef.props;
 export type AndroidEvents = typeof __propDef.events;
 export type AndroidSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+ * ## Props
+ * @prop androidTop: string;
+ * @prop androidLeftTop: string;
+ * @prop androidLeftMid: string;
+ * @prop androidLeftBot: string;
+ * @prop androidRight: string;
+ * ## Example
+ * ```
+ * <script>
+ *   import { DeviceMockup } from 'flowbite-svelte';
+ * </script>
+ *
+ * <DeviceMockup device="android">
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png"
+ *     class="dark:hidden w-[272px] h-[572px]"
+ *     alt="android 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="android example 2" />
+ * </DeviceMockup>
+ * ```
+ */
 export default class Android extends SvelteComponentTyped<AndroidProps, AndroidEvents, AndroidSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Android.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Android.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAsBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
+{"version":3,"file":"Android.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Android.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;oBAD0K,MAAM;wBAAkB,MAAM;wBAAkB,MAAM;wBAAkB,MAAM;sBAAgB,MAAM;;;;;;CACtO,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/device-mockup/DefaultMockup.svelte

@@ -1,10 +1,38 @@
-<script>export let defaultTop = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-export let defaultLeftTop = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-export let defaultLeftBot = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-export let defaultRight = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+<script>export let defaultTop;
+export let defaultLeftTop;
+export let defaultLeftBot;
+export let defaultRight;
 </script>
 
 <div class={defaultTop} />
 <div class={defaultLeftTop} />
 <div class={defaultLeftBot} />
 <div class={defaultRight} />
+
+<!--
+  @component
+  ## Features
+  [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+  ## Props
+  @prop defaultTop: string;
+  @prop defaultLeftTop: string;
+  @prop defaultLeftBot: string;
+  @prop defaultRight: string;
+  ## 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>
+  ```
+-->

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

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        defaultTop?: string | undefined;
-        defaultLeftTop?: string | undefined;
-        defaultLeftBot?: string | undefined;
-        defaultRight?: string | undefined;
+        defaultTop: string;
+        defaultLeftTop: string;
+        defaultLeftBot: string;
+        defaultRight: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -14,6 +14,32 @@ declare const __propDef: {
 export type DefaultMockupProps = typeof __propDef.props;
 export type DefaultMockupEvents = typeof __propDef.events;
 export type DefaultMockupSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+ * ## Props
+ * @prop defaultTop: string;
+ * @prop defaultLeftTop: string;
+ * @prop defaultLeftBot: string;
+ * @prop defaultRight: string;
+ * ## 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 DefaultMockup extends SvelteComponentTyped<DefaultMockupProps, DefaultMockupEvents, DefaultMockupSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultMockup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/DefaultMockup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"DefaultMockup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/DefaultMockup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,QAAA,MAAM,SAAS;;oBADyI,MAAM;wBAAkB,MAAM;wBAAkB,MAAM;sBAAgB,MAAM;;;;;;CAC7K,CAAC;AACxD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/device-mockup/DeviceMockup.svelte

@@ -4,48 +4,55 @@ import Android from './Android.svelte';
 import Tablet from './Tablet.svelte';
 import Smartwatch from './Smartwatch.svelte';
 export let device = 'default';
+// android
+export let androidDiv = '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 = 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+export let androidTop = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
+export let androidLeftTop = 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+export let androidLeftMid = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+export let androidLeftBot = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+export let androidRight = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+// default
 export let defaultDiv = '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 = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
+export let defaultTop = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+export let defaultLeftTop = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+export let defaultLeftBot = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+export let defaultRight = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+// desktop
+export let desktopInner = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+export let desktopBot = '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 = 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
+export let destopDiv = '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 = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+// ios
 export let iosDiv = '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 = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-export let androidDiv = '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 = 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-export let tabletDiv = '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 = 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800';
+export let iosTop = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
+export let iosLeftTop = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+export let iosLeftBot = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+export let iosRight = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+// laptop
 export let laptopDiv = '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 = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
-export let destopDiv = '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 = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+export let laptopInner = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
+export let laptopBot = '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 = '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 = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
 export let smartwatchSlot = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
-export let androidTop;
-export let androidLeftTop;
-export let androidLeftMid;
-export let androidLeftBot;
-export let androidRight;
-export let defaultTop;
-export let defaultLeftTop;
-export let defaultLeftBot;
-export let defaultRight;
-export let iosTop;
-export let iosLeftTop;
-export let iosLeftBot;
-export let iosRight;
-export let smartRightTop;
-export let smartRightBot;
+export let smartRightTop = 'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
+export let smartRightBot = 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
 export let smartTop = '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 = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
 export let smartwatchInner = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
-export let tabletLeftTop;
-export let tabletLeftMid;
-export let tabletLeftBot;
-export let tabletRight;
-export let laptopInner = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
-export let laptopBot = '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 = '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';
-export let desktopInner = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
-export let desktopBot = '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 = 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
+// tablet
+export let tabletDiv = '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 = 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800';
+export let tabletLeftTop = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+export let tabletLeftMid = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+export let tabletLeftBot = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+export let tabletRight = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
 const divClasses = {
     default: defaultDiv,
     ios: iosDiv,
@@ -108,3 +115,124 @@ const slotClasses = {
   </div>
   <div class={smartBot} />
 {/if}
+
+<!--
+  @component
+  ## 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>
+  ```
+-->

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

@@ -2,48 +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;
-        androidDiv?: string | undefined;
-        androidSlot?: string | undefined;
-        tabletDiv?: string | undefined;
-        tabletSlot?: string | undefined;
+        iosTop?: string | undefined;
+        iosLeftTop?: string | undefined;
+        iosLeftBot?: string | undefined;
+        iosRight?: string | undefined;
         laptopDiv?: string | undefined;
         laptopSlot?: string | undefined;
-        destopDiv?: string | undefined;
-        desktopSlot?: string | undefined;
+        laptopInner?: string | undefined;
+        laptopBot?: string | undefined;
+        laptopBotCen?: string | undefined;
         smartwatchDiv?: string | undefined;
         smartwatchSlot?: string | undefined;
-        androidTop: string;
-        androidLeftTop: string;
-        androidLeftMid: string;
-        androidLeftBot: string;
-        androidRight: string;
-        defaultTop: string;
-        defaultLeftTop: string;
-        defaultLeftBot: string;
-        defaultRight: string;
-        iosTop: string;
-        iosLeftTop: string;
-        iosLeftBot: string;
-        iosRight: string;
-        smartRightTop: string;
-        smartRightBot: string;
+        smartRightTop?: string | undefined;
+        smartRightBot?: string | undefined;
         smartTop?: string | undefined;
         smartBot?: string | undefined;
         smartwatchInner?: string | undefined;
-        tabletLeftTop: string;
-        tabletLeftMid: string;
-        tabletLeftBot: string;
-        tabletRight: string;
-        laptopInner?: string | undefined;
-        laptopBot?: string | undefined;
-        laptopBotCen?: string | undefined;
-        desktopInner?: string | undefined;
-        desktopBot?: string | undefined;
-        desktopBotUnder?: 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>;
@@ -55,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;AA8JD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;oBADmhD,MAAM;wBAAkB,MAAM;wBAAkB,MAAM;wBAAkB,MAAM;sBAAgB,MAAM;oBAAc,MAAM;wBAAkB,MAAM;wBAAkB,MAAM;sBAAgB,MAAM;gBAAU,MAAM;oBAAc,MAAM;oBAAc,MAAM;kBAAY,MAAM;uBAAiB,MAAM;uBAAiB,MAAM;;;;uBAAiF,MAAM;uBAAiB,MAAM;uBAAiB,MAAM;qBAAe,MAAM;;;;;;;;;;;;;;CAC37D,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"}