flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/device-mockups/Smartwatch.svelte

@@ -1,40 +1,34 @@
-<script>import { twMerge } from "tailwind-merge";
-export let div = "relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]";
-export let slot = "rounded-[2rem] overflow-hidden h-[193px] w-[188px]";
-export let rightTop = "h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg";
-export let rightBot = "h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg";
-export let top = "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 bot = "relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]";
-export let classTop = "";
-export let classRightTop = "";
-export let classRightBot = "";
-export let classSlot = "";
-export let classBot = "";
+<script lang="ts">
+  import { type SmartwatchProps as Props, smartwatch } from ".";
+
+  let { children, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: Props = $props();
+
+  const { div, top, rightTop, rightBot, bot, slot } = smartwatch();
 </script>
 
-<div class={twMerge(div, $$props.class)}></div>
-<div class={twMerge(top, classTop)}>
-  <div class={twMerge(rightTop, classRightTop)}></div>
-  <div class={twMerge(rightBot, classRightBot)}></div>
-  <div class={twMerge(slot, classSlot)}>
-    <slot></slot>
+<div {...restProps}>
+  <div class={div({ class: divClass })}></div>
+  <div class={top({ class: div2Class })}>
+    <div class={rightTop({ class: div3Class })}></div>
+    <div class={rightBot({ class: div4Class })}></div>
+    <div class={slot({ class: div5Class })}>
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
   </div>
+  <div class={bot({ class: div6Class })}></div>
 </div>
-<div class={twMerge(bot, classBot)}></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 bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
-@prop export let slot: $$Props['slot'] = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
-@prop export let rightTop: $$Props['rightTop'] = 'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
-@prop export let rightBot: $$Props['rightBot'] = 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
-@prop export let top: $$Props['top'] = 'relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]';
-@prop export let bot: $$Props['bot'] = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
-@prop export let classTop: $$Props['classTop'] = '';
-@prop export let classRightTop: $$Props['classRightTop'] = '';
-@prop export let classRightBot: $$Props['classRightBot'] = '';
-@prop export let classSlot: $$Props['classSlot'] = '';
-@prop export let classBot: $$Props['classBot'] = '';
+@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/Smartwatch.svelte.d.ts

@@ -1,43 +1,15 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        div?: string;
-        slot?: string;
-        rightTop?: string;
-        rightBot?: string;
-        top?: string;
-        bot?: string;
-        classTop?: string;
-        classRightTop?: string;
-        classRightBot?: string;
-        classSlot?: string;
-        classBot?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type SmartwatchProps = typeof __propDef.props;
-export type SmartwatchEvents = typeof __propDef.events;
-export type SmartwatchSlots = typeof __propDef.slots;
+import { type SmartwatchProps 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 bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
- * @prop export let slot: $$Props['slot'] = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
- * @prop export let rightTop: $$Props['rightTop'] = 'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
- * @prop export let rightBot: $$Props['rightBot'] = 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
- * @prop export let top: $$Props['top'] = 'relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]';
- * @prop export let bot: $$Props['bot'] = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
- * @prop export let classTop: $$Props['classTop'] = '';
- * @prop export let classRightTop: $$Props['classRightTop'] = '';
- * @prop export let classRightBot: $$Props['classRightBot'] = '';
- * @prop export let classSlot: $$Props['classSlot'] = '';
- * @prop export let classBot: $$Props['classBot'] = '';
+ * @props: children: any;
+ * @props:divClass: any;
+ * @props:div2Class: any;
+ * @props:div3Class: any;
+ * @props:div4Class: any;
+ * @props:div5Class: any;
+ * @props:div6Class: any;
  */
-export default class Smartwatch extends SvelteComponentTyped<SmartwatchProps, SmartwatchEvents, SmartwatchSlots> {
-}
-export {};
+declare const Smartwatch: import("svelte").Component<Props, {}, "">;
+type Smartwatch = ReturnType<typeof Smartwatch>;
+export default Smartwatch;

package/dist/device-mockups/Tablet.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-[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>
 
 <!--
 @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-[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,43 +1,15 @@
-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;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TabletProps = typeof __propDef.props;
-export type TabletEvents = typeof __propDef.events;
-export type TabletSlots = typeof __propDef.slots;
+import { type TabletProps 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-[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 {};
+declare const Tablet: import("svelte").Component<Props, {}, "">;
+type Tablet = ReturnType<typeof Tablet>;
+export default Tablet;

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 };