flowbite-svelte 0.47.2 → 1.0.0-next.1

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

@@ -1,47 +1,16 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        div?: string;
-        slot?: string;
-        top?: string;
-        leftTop?: string;
-        leftMid?: string;
-        leftBot?: string;
-        right?: string;
-        classTop?: string;
-        classLeftTop?: string;
-        classLeftMid?: string;
-        classLeftBot?: string;
-        classRight?: string;
-        classSlot?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type AndroidProps = typeof __propDef.props;
-export type AndroidEvents = typeof __propDef.events;
-export type AndroidSlots = typeof __propDef.slots;
+import { type AndroidProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let div: $$Props['div'] = '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 slot: $$Props['slot'] = 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
- * @prop export let top: $$Props['top'] = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
- * @prop export let leftTop: $$Props['leftTop'] = 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
- * @prop export let leftMid: $$Props['leftMid'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
- * @prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
- * @prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
- * @prop export let classTop: $$Props['classTop'] = '';
- * @prop export let classLeftTop: $$Props['classLeftTop'] = '';
- * @prop export let classLeftMid: $$Props['classLeftMid'] = '';
- * @prop export let classLeftBot: $$Props['classLeftBot'] = '';
- * @prop export let classRight: $$Props['classRight'] = '';
- * @prop export let classSlot: $$Props['classSlot'] = '';
+ * @props: children: any;
+ * @props:divClass: any;
+ * @props:div2Class: any;
+ * @props:div3Class: any;
+ * @props:div4Class: any;
+ * @props:div5Class: any;
+ * @props:div6Class: any;
+ * @props:div7Class: any;
  */
-export default class Android extends SvelteComponentTyped<AndroidProps, AndroidEvents, AndroidSlots> {
-}
-export {};
+declare const Android: import("svelte").Component<Props, {}, "">;
+type Android = ReturnType<typeof Android>;
+export default Android;

package/dist/device-mockups/DefaultMockup.svelte

@@ -1,40 +1,32 @@
-<script>import { twMerge } from "tailwind-merge";
-export let div = "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]";
-export let slot = "rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800";
-export let top = "h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg";
-export let leftTop = "h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg";
-export let leftBot = "h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg";
-export let right = "h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg";
-export let classTop = "";
-export let classLeftTop = "";
-export let classLeftBot = "";
-export let classRight = "";
-export let classSlot = "";
+<script lang="ts">
+  import { type DefaultMockupProps as Props, defaultMockup } from ".";
+
+  let { children, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: Props = $props();
+
+  const { div, slot, top, leftTop, leftBot, right } = defaultMockup();
 </script>
 
-<div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(top, classTop)}></div>
-  <div class={twMerge(leftTop, classLeftTop)}></div>
-  <div class={twMerge(leftBot, classLeftBot)}></div>
-  <div class={twMerge(right, classRight)}></div>
-  <div class={twMerge(slot, classSlot)}>
-    <slot></slot>
+<div {...restProps} class={div({ class: divClass })}>
+  <div class={top({ class: div2Class })}></div>
+  <div class={leftTop({ class: div3Class })}></div>
+  <div class={leftBot({ class: div4Class })}></div>
+  <div class={right({ class: div5Class })}></div>
+  <div class={slot({ class: div6Class })}>
+    {#if children}
+      {@render children()}
+    {/if}
   </div>
 </div>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let div: $$Props['div'] = '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 slot: $$Props['slot'] = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-@prop export let top: $$Props['top'] = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-@prop export let leftTop: $$Props['leftTop'] = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-@prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-@prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-@prop export let classTop: $$Props['classTop'] = '';
-@prop export let classLeftTop: $$Props['classLeftTop'] = '';
-@prop export let classLeftBot: $$Props['classLeftBot'] = '';
-@prop export let classRight: $$Props['classRight'] = '';
-@prop export let classSlot: $$Props['classSlot'] = '';
+@props: children: any;
+@props:divClass: any;
+@props:div2Class: any;
+@props:div3Class: any;
+@props:div4Class: any;
+@props:div5Class: any;
+@props:div6Class: any;
 -->

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

@@ -1,43 +1,15 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        div?: string;
-        slot?: string;
-        top?: string;
-        leftTop?: string;
-        leftBot?: string;
-        right?: string;
-        classTop?: string;
-        classLeftTop?: string;
-        classLeftBot?: string;
-        classRight?: string;
-        classSlot?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type DefaultMockupProps = typeof __propDef.props;
-export type DefaultMockupEvents = typeof __propDef.events;
-export type DefaultMockupSlots = typeof __propDef.slots;
+import { type DefaultMockupProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let div: $$Props['div'] = '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 slot: $$Props['slot'] = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
- * @prop export let top: $$Props['top'] = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
- * @prop export let leftTop: $$Props['leftTop'] = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
- * @prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
- * @prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
- * @prop export let classTop: $$Props['classTop'] = '';
- * @prop export let classLeftTop: $$Props['classLeftTop'] = '';
- * @prop export let classLeftBot: $$Props['classLeftBot'] = '';
- * @prop export let classRight: $$Props['classRight'] = '';
- * @prop export let classSlot: $$Props['classSlot'] = '';
+ * @props: children: any;
+ * @props:divClass: any;
+ * @props:div2Class: any;
+ * @props:div3Class: any;
+ * @props:div4Class: any;
+ * @props:div5Class: any;
+ * @props:div6Class: any;
  */
-export default class DefaultMockup extends SvelteComponentTyped<DefaultMockupProps, DefaultMockupEvents, DefaultMockupSlots> {
-}
-export {};
+declare const DefaultMockup: import("svelte").Component<Props, {}, "">;
+type DefaultMockup = ReturnType<typeof DefaultMockup>;
+export default DefaultMockup;

package/dist/device-mockups/Desktop.svelte

@@ -1,30 +1,28 @@
-<script>import { twMerge } from "tailwind-merge";
-export let inner = "rounded-xl overflow-hidden h-[140px] md:h-[262px]";
-export let bot = "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 botUnder = "relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]";
-export let div = "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 classInner = "";
-export let classBot = "";
-export let classBotUnder = "";
+<script lang="ts">
+  import { type MockupBaseProps as Props, desktop } from ".";
+
+  let { children, divClass, div2Class, div3Class, div4Class, ...restProps }: Props = $props();
+
+  const { div, inner, bot, botUnder } = desktop();
 </script>
 
-<div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(inner, classInner)}>
-    <slot></slot>
+<div {...restProps} class={div({ class: divClass })}>
+  <div class={inner({ class: div2Class })}>
+    {#if children}
+      {@render children()}
+    {/if}
   </div>
 </div>
-<div class={twMerge(bot, classBot)}></div>
-<div class={twMerge(botUnder, classBotUnder)}></div>
+<div class={bot({ class: div3Class })}></div>
+<div class={botUnder({ class: div4Class })}></div>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let inner: $$Props['inner'] = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
-@prop export let bot: $$Props['bot'] = '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 botUnder: $$Props['botUnder'] = 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
-@prop export let div: $$Props['div'] = '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 classInner: $$Props['classInner'] = '';
-@prop export let classBot: $$Props['classBot'] = '';
-@prop export let classBotUnder: $$Props['classBotUnder'] = '';
+@props: children: any;
+@props:divClass: any;
+@props:div2Class: any;
+@props:div3Class: any;
+@props:div4Class: any;
 -->

package/dist/device-mockups/Desktop.svelte.d.ts

@@ -1,35 +1,13 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        inner?: string;
-        bot?: string;
-        botUnder?: string;
-        div?: string;
-        classInner?: string;
-        classBot?: string;
-        classBotUnder?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type DesktopProps = typeof __propDef.props;
-export type DesktopEvents = typeof __propDef.events;
-export type DesktopSlots = typeof __propDef.slots;
+import { type MockupBaseProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let inner: $$Props['inner'] = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
- * @prop export let bot: $$Props['bot'] = '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 botUnder: $$Props['botUnder'] = 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
- * @prop export let div: $$Props['div'] = '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 classInner: $$Props['classInner'] = '';
- * @prop export let classBot: $$Props['classBot'] = '';
- * @prop export let classBotUnder: $$Props['classBotUnder'] = '';
+ * @props: children: any;
+ * @props:divClass: any;
+ * @props:div2Class: any;
+ * @props:div3Class: any;
+ * @props:div4Class: any;
  */
-export default class Desktop extends SvelteComponentTyped<DesktopProps, DesktopEvents, DesktopSlots> {
-}
-export {};
+declare const Desktop: import("svelte").Component<Props, {}, "">;
+type Desktop = ReturnType<typeof Desktop>;
+export default Desktop;

package/dist/device-mockups/DeviceMockup.svelte

@@ -1,33 +1,37 @@
-<script>import Android from "./Android.svelte";
-import DefaultMockup from "./DefaultMockup.svelte";
-import Desktop from "./Desktop.svelte";
-import Ios from "./Ios.svelte";
-import Laptop from "./Laptop.svelte";
-import Smartwatch from "./Smartwatch.svelte";
-import Tablet from "./Tablet.svelte";
-export let device = "default";
-const componets = {
-  android: Android,
-  ios: Ios,
-  tablet: Tablet,
-  default: DefaultMockup,
-  smartwatch: Smartwatch,
-  laptop: Laptop,
-  desktop: Desktop
-};
-let component;
-$: component = componets[device];
+<script lang="ts">
+  import type { Component } from "svelte";
+  import Android from "./Android.svelte";
+  import DefaultMockup from "./DefaultMockup.svelte";
+  import Desktop from "./Desktop.svelte";
+  import Ios from "./Ios.svelte";
+  import Laptop from "./Laptop.svelte";
+  import Smartwatch from "./Smartwatch.svelte";
+  import Tablet from "./Tablet.svelte";
+  import { type DeviceMockupProps as Props } from ".";
+
+  let { children, device = "default" }: Props = $props();
+
+  const componets = {
+    android: Android,
+    ios: Ios,
+    tablet: Tablet,
+    default: DefaultMockup,
+    smartwatch: Smartwatch,
+    laptop: Laptop,
+    desktop: Desktop
+  };
+
+  let DeviceComponent: Component = $derived(componets[device]);
 </script>
 
-{#if component}
-  <svelte:component this={component}><slot /></svelte:component>
-{:else}
-  <div class="border p-3 text-xl">Unknow device</div>
-{/if}
+<DeviceComponent>
+  {@render children()}
+</DeviceComponent>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let device: NonNullable<$$Props['device']> = 'default';
+@props: children: any;
+@props:device: any = "default";
 -->

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

@@ -1,23 +1,11 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        device?: "default" | "ios" | "android" | "tablet" | "laptop" | "desktop" | "smartwatch";
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type DeviceMockupProps = typeof __propDef.props;
-export type DeviceMockupEvents = typeof __propDef.events;
-export type DeviceMockupSlots = typeof __propDef.slots;
+import type { Component } from "svelte";
+import { type DeviceMockupProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let device: NonNullable<$$Props['device']> = 'default';
+ * @props: children: any;
+ * @props:device: any = "default";
  */
-export default class DeviceMockup extends SvelteComponentTyped<DeviceMockupProps, DeviceMockupEvents, DeviceMockupSlots> {
-}
-export {};
+declare const DeviceMockup: Component<Props, {}, "">;
+type DeviceMockup = ReturnType<typeof DeviceMockup>;
+export default DeviceMockup;

package/dist/device-mockups/Ios.svelte

@@ -1,40 +1,32 @@
-<script>import { twMerge } from "tailwind-merge";
-export let div = "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 slot = "rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800";
-export let top = "w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute";
-export let leftTop = "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg";
-export let leftBot = "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg";
-export let right = "h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg";
-export let classTop = "";
-export let classLeftTop = "";
-export let classLeftBot = "";
-export let classRight = "";
-export let classSlot = "";
+<script lang="ts">
+  import { type IosProps as Props, ios } from ".";
+
+  let { children, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: Props = $props();
+
+  const { div, slot, top, leftTop, leftBot, right } = ios();
 </script>
 
-<div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(top, classTop)}></div>
-  <div class={twMerge(leftTop, classLeftTop)}></div>
-  <div class={twMerge(leftBot, classLeftBot)}></div>
-  <div class={twMerge(right, classRight)}></div>
-  <div class={twMerge(slot, classSlot)}>
-    <slot></slot>
+<div {...restProps} class={div({ class: divClass })}>
+  <div class={top({ class: div2Class })}></div>
+  <div class={leftTop({ class: div3Class })}></div>
+  <div class={leftBot({ class: div4Class })}></div>
+  <div class={right({ class: div5Class })}></div>
+  <div class={slot({ class: div6Class })}>
+    {#if children}
+      {@render children()}
+    {/if}
   </div>
 </div>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let div: $$Props['div'] = '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 slot: $$Props['slot'] = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
-@prop export let top: $$Props['top'] = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
-@prop export let leftTop: $$Props['leftTop'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-@prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-@prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
-@prop export let classTop: $$Props['classTop'] = '';
-@prop export let classLeftTop: $$Props['classLeftTop'] = '';
-@prop export let classLeftBot: $$Props['classLeftBot'] = '';
-@prop export let classRight: $$Props['classRight'] = '';
-@prop export let classSlot: $$Props['classSlot'] = '';
+@props: children: any;
+@props:divClass: any;
+@props:div2Class: any;
+@props:div3Class: any;
+@props:div4Class: any;
+@props:div5Class: any;
+@props:div6Class: any;
 -->

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

@@ -1,43 +1,15 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        div?: string;
-        slot?: string;
-        top?: string;
-        leftTop?: string;
-        leftBot?: string;
-        right?: string;
-        classTop?: string;
-        classLeftTop?: string;
-        classLeftBot?: string;
-        classRight?: string;
-        classSlot?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type IosProps = typeof __propDef.props;
-export type IosEvents = typeof __propDef.events;
-export type IosSlots = typeof __propDef.slots;
+import { type IosProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let div: $$Props['div'] = '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 slot: $$Props['slot'] = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800';
- * @prop export let top: $$Props['top'] = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
- * @prop export let leftTop: $$Props['leftTop'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
- * @prop export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
- * @prop export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
- * @prop export let classTop: $$Props['classTop'] = '';
- * @prop export let classLeftTop: $$Props['classLeftTop'] = '';
- * @prop export let classLeftBot: $$Props['classLeftBot'] = '';
- * @prop export let classRight: $$Props['classRight'] = '';
- * @prop export let classSlot: $$Props['classSlot'] = '';
+ * @props: children: any;
+ * @props:divClass: any;
+ * @props:div2Class: any;
+ * @props:div3Class: any;
+ * @props:div4Class: any;
+ * @props:div5Class: any;
+ * @props:div6Class: any;
  */
-export default class Ios extends SvelteComponentTyped<IosProps, IosEvents, IosSlots> {
-}
-export {};
+declare const Ios: import("svelte").Component<Props, {}, "">;
+type Ios = ReturnType<typeof Ios>;
+export default Ios;

package/dist/device-mockups/Laptop.svelte

@@ -1,32 +1,31 @@
-<script>import { twMerge } from "tailwind-merge";
-export let div = "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 inner = "rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800";
-export let bot = "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 botCen = "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 classInner = "";
-export let classBot = "";
-export let classBotCen = "";
+<script lang="ts">
+  import { type MockupBaseProps as Props, laptop } from ".";
+
+  let { children, divClass, div2Class, div3Class, div4Class, ...restProps }: Props = $props();
+  const { div, inner, bot, botCen } = laptop();
 </script>
 
-<div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(inner, classInner)}>
-    <slot></slot>
+<div {...restProps}>
+  <div class={div({ class: divClass })}>
+    <div class={inner({ class: div2Class })}>
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
   </div>
-</div>
 
-<div class={twMerge(bot, classBot)}>
-  <div class={twMerge(botCen, classBotCen)}></div>
+  <div class={bot({ class: div3Class })}>
+    <div class={botCen({ class: div4Class })}></div>
+  </div>
 </div>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let div: $$Props['div'] = '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 inner: $$Props['inner'] = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
-@prop export let bot: $$Props['bot'] = '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 botCen: $$Props['botCen'] = '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 classInner: $$Props['classInner'] = '';
-@prop export let classBot: $$Props['classBot'] = '';
-@prop export let classBotCen: $$Props['classBotCen'] = '';
+@props: children: any;
+@props:divClass: any;
+@props:div2Class: any;
+@props:div3Class: any;
+@props:div4Class: any;
 -->

package/dist/device-mockups/Laptop.svelte.d.ts

@@ -1,35 +1,13 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        div?: string;
-        inner?: string;
-        bot?: string;
-        botCen?: string;
-        classInner?: string;
-        classBot?: string;
-        classBotCen?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type LaptopProps = typeof __propDef.props;
-export type LaptopEvents = typeof __propDef.events;
-export type LaptopSlots = typeof __propDef.slots;
+import { type MockupBaseProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let div: $$Props['div'] = '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 inner: $$Props['inner'] = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
- * @prop export let bot: $$Props['bot'] = '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 botCen: $$Props['botCen'] = '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 classInner: $$Props['classInner'] = '';
- * @prop export let classBot: $$Props['classBot'] = '';
- * @prop export let classBotCen: $$Props['classBotCen'] = '';
+ * @props: children: any;
+ * @props:divClass: any;
+ * @props:div2Class: any;
+ * @props:div3Class: any;
+ * @props:div4Class: any;
  */
-export default class Laptop extends SvelteComponentTyped<LaptopProps, LaptopEvents, LaptopSlots> {
-}
-export {};
+declare const Laptop: import("svelte").Component<Props, {}, "">;
+type Laptop = ReturnType<typeof Laptop>;
+export default Laptop;