flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/device-mockups/Tablet.svelte

@@ -1,24 +1,20 @@
-<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-[454px] max-w-[341px] md:h-[682px] md:max-w-[512px]";
-export let slot = "rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800";
-export let leftTop = "h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg";
-export let leftMid = "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 classLeftTop = "";
-export let classLeftMid = "";
-export let classLeftBot = "";
-export let classRight = "";
-export let classSlot = "";
+<script lang="ts">
+  import { type TabletProps as Props, tablet } from ".";
+
+  let { children, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: Props = $props();
+
+  const { div, leftTop, leftMid, leftBot, right, slot } = tablet();
 </script>
 
-<div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(leftTop, classLeftTop)}></div>
-  <div class={twMerge(leftMid, classLeftMid)}></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={leftTop({ class: div2Class })}></div>
+  <div class={leftMid({ 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>
 
@@ -26,15 +22,11 @@ export let classSlot = "";
 @component
 [Go to docs](https://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-[454px] max-w-[341px] md:h-[682px] md:max-w-[512px]';
-@prop export let slot: $$Props['slot'] = 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800';
-@prop export let leftTop: $$Props['leftTop'] = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-@prop export let leftMid: $$Props['leftMid'] = '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 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;
 -->

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

@@ -1,44 +1,25 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        div?: string;
-        slot?: string;
-        leftTop?: string;
-        leftMid?: string;
-        leftBot?: string;
-        right?: string;
-        classLeftTop?: string;
-        classLeftMid?: string;
-        classLeftBot?: string;
-        classRight?: string;
-        classSlot?: string;
-        class?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type TabletProps = typeof __propDef.props;
+type TabletProps_ = typeof __propDef.props;
+export { TabletProps_ as TabletProps };
 export type TabletEvents = typeof __propDef.events;
 export type TabletSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://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-[454px] max-w-[341px] md:h-[682px] md:max-w-[512px]';
- * @prop export let slot: $$Props['slot'] = 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800';
- * @prop export let leftTop: $$Props['leftTop'] = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
- * @prop export let leftMid: $$Props['leftMid'] = '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 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;
  */
-export default class Tablet extends SvelteComponentTyped<TabletProps, TabletEvents, TabletSlots> {
+export default class Tablet extends SvelteComponentTyped<TabletProps_, TabletEvents, TabletSlots> {
 }
-export {};

package/dist/device-mockups/index.d.ts

@@ -0,0 +1,11 @@
+import type { AndroidProps, DefaultMockupProps, DeviceMockupProps, IosProps, SmartwatchProps, TabletProps, MockupBaseProps } from "./type";
+import Android from "./Android.svelte";
+import DefaultMockup from "./DefaultMockup.svelte";
+import Desktop from "./Desktop.svelte";
+import DeviceMockup from "./DeviceMockup.svelte";
+import Ios from "./Ios.svelte";
+import Laptop from "./Laptop.svelte";
+import Smartwatch from "./Smartwatch.svelte";
+import Tablet from "./Tablet.svelte";
+import { android, defaultMockup, desktop, ios, laptop, smartwatch, tablet } from "./theme";
+export { Android, DefaultMockup, Desktop, DeviceMockup, type DeviceMockupProps, Ios, Laptop, Smartwatch, Tablet, android, defaultMockup, desktop, ios, laptop, smartwatch, tablet, type AndroidProps, type DefaultMockupProps, type IosProps, type SmartwatchProps, type TabletProps, type MockupBaseProps };

package/dist/device-mockups/index.js

@@ -0,0 +1,10 @@
+import Android from "./Android.svelte";
+import DefaultMockup from "./DefaultMockup.svelte";
+import Desktop from "./Desktop.svelte";
+import DeviceMockup from "./DeviceMockup.svelte";
+import Ios from "./Ios.svelte";
+import Laptop from "./Laptop.svelte";
+import Smartwatch from "./Smartwatch.svelte";
+import Tablet from "./Tablet.svelte";
+import { android, defaultMockup, desktop, ios, laptop, smartwatch, tablet } from "./theme";
+export { Android, DefaultMockup, Desktop, DeviceMockup, Ios, Laptop, Smartwatch, Tablet, android, defaultMockup, desktop, ios, laptop, smartwatch, tablet };

package/dist/device-mockups/theme.d.ts

@@ -0,0 +1,368 @@
+declare const android: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            right?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            right?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftMid: string;
+    leftBot: string;
+    right: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            right?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftMid: string;
+    leftBot: string;
+    right: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    div: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftMid: string;
+    leftBot: string;
+    right: string;
+}, undefined, unknown, unknown, undefined>>;
+declare const defaultMockup: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            right?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            right?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftBot: string;
+    right: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            right?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftBot: string;
+    right: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    div: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftBot: string;
+    right: string;
+}, undefined, unknown, unknown, undefined>>;
+declare const desktop: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            inner?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botUnder?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            inner?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botUnder?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    inner: string;
+    bot: string;
+    botUnder: string;
+    div: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            inner?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botUnder?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    inner: string;
+    bot: string;
+    botUnder: string;
+    div: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    inner: string;
+    bot: string;
+    botUnder: string;
+    div: string;
+}, undefined, unknown, unknown, undefined>>;
+declare const ios: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            right?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            right?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftBot: string;
+    right: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            right?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftBot: string;
+    right: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    div: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftBot: string;
+    right: string;
+}, undefined, unknown, unknown, undefined>>;
+declare const laptop: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            inner?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botCen?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            inner?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botCen?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    inner: string;
+    bot: string;
+    botCen: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            inner?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botCen?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    inner: string;
+    bot: string;
+    botCen: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    div: string;
+    inner: string;
+    bot: string;
+    botCen: string;
+}, undefined, unknown, unknown, undefined>>;
+declare const smartwatch: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            rightTop?: import("tailwind-merge").ClassNameValue;
+            rightBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            rightTop?: import("tailwind-merge").ClassNameValue;
+            rightBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    rightTop: string;
+    rightBot: string;
+    top: string;
+    bot: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            rightTop?: import("tailwind-merge").ClassNameValue;
+            rightBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    rightTop: string;
+    rightBot: string;
+    top: string;
+    bot: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    div: string;
+    slot: string;
+    rightTop: string;
+    rightBot: string;
+    top: string;
+    bot: string;
+}, undefined, unknown, unknown, undefined>>;
+declare const tablet: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            right?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            right?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    leftTop: string;
+    leftMid: string;
+    leftBot: string;
+    right: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            right?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    div: string;
+    slot: string;
+    leftTop: string;
+    leftMid: string;
+    leftBot: string;
+    right: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    div: string;
+    slot: string;
+    leftTop: string;
+    leftMid: string;
+    leftBot: string;
+    right: string;
+}, undefined, unknown, unknown, undefined>>;
+export { android, defaultMockup, desktop, ios, laptop, smartwatch, tablet };

package/dist/device-mockups/theme.js

@@ -0,0 +1,76 @@
+import { tv } from "tailwind-variants";
+// Android
+const android = tv({
+    slots: {
+        div: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl",
+        slot: "rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800",
+        top: "w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute",
+        leftTop: "h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg",
+        leftMid: "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg",
+        leftBot: "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg",
+        right: "h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"
+    }
+});
+// DefaultMockup
+const defaultMockup = tv({
+    slots: {
+        div: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]",
+        slot: "rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800",
+        top: "h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg",
+        leftTop: "h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg",
+        leftBot: "h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg",
+        right: "h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"
+    }
+});
+// Desktop
+const desktop = tv({
+    slots: {
+        inner: "rounded-xl overflow-hidden h-[140px] md:h-[262px]",
+        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]",
+        botUnder: "relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]",
+        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]"
+    }
+});
+// ios
+const ios = tv({
+    slots: {
+        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",
+        slot: "rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800",
+        top: "w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute",
+        leftTop: "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg",
+        leftBot: "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg",
+        right: "h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"
+    }
+});
+// laptop
+const laptop = tv({
+    slots: {
+        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]",
+        inner: "rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800",
+        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]",
+        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"
+    }
+});
+// smartwatch
+const smartwatch = tv({
+    slots: {
+        div: "relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]",
+        slot: "rounded-[2rem] overflow-hidden h-[193px] w-[188px]",
+        rightTop: "h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg",
+        rightBot: "h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg",
+        top: "relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]",
+        bot: "relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]"
+    }
+});
+// tablet
+const tablet = tv({
+    slots: {
+        div: "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]",
+        slot: "rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800",
+        leftTop: "h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg",
+        leftMid: "h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg",
+        leftBot: "h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg",
+        right: "h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"
+    }
+});
+export { android, defaultMockup, desktop, ios, laptop, smartwatch, tablet };

package/dist/device-mockups/type.d.ts

@@ -0,0 +1,61 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { DeviceVariantType } from "../types";
+interface DeviceMockupProps {
+    children: Snippet;
+    device?: DeviceVariantType;
+}
+interface MockupBaseProps extends HTMLAttributes<HTMLElement> {
+    children?: Snippet;
+    divClass?: string;
+    div2Class?: string;
+    div3Class?: string;
+    div4Class?: string;
+}
+interface AndroidProps {
+    children?: Snippet;
+    divClass?: string;
+    div2Class?: string;
+    div3Class?: string;
+    div4Class?: string;
+    div5Class?: string;
+    div6Class?: string;
+    div7Class?: string;
+}
+interface DefaultMockupProps {
+    children?: Snippet;
+    divClass?: string;
+    div2Class?: string;
+    div3Class?: string;
+    div4Class?: string;
+    div5Class?: string;
+    div6Class?: string;
+}
+interface IosProps {
+    children?: Snippet;
+    divClass?: string;
+    div2Class?: string;
+    div3Class?: string;
+    div4Class?: string;
+    div5Class?: string;
+    div6Class?: string;
+}
+interface SmartwatchProps {
+    children?: Snippet;
+    divClass?: string;
+    div2Class?: string;
+    div3Class?: string;
+    div4Class?: string;
+    div5Class?: string;
+    div6Class?: string;
+}
+interface TabletProps {
+    children?: Snippet;
+    divClass?: string;
+    div2Class?: string;
+    div3Class?: string;
+    div4Class?: string;
+    div5Class?: string;
+    div6Class?: string;
+}
+export { type DeviceMockupProps, type AndroidProps, type DefaultMockupProps, type IosProps, type SmartwatchProps, type TabletProps, type MockupBaseProps };

package/dist/device-mockups/type.js

@@ -0,0 +1 @@
+export {};