odj-svelte-ui 0.1.0

package/dist/elements/device-mockups/Desktop.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let inner: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+  export let bot: string = 'relative mx-auto bg-neutral-900 dark:bg-neutral-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]';
+  export let botUnder: string = 'relative mx-auto bg-neutral-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
+  export let div: string = 'relative mx-auto border-neutral-800 dark:border-neutral-800 bg-neutral-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+</script>
+
+<div class={twMerge(div, $$props.class)}>
+  <div class={twMerge(inner, $$props.classInner)}>
+    <slot />
+  </div>
+</div>
+<div class={twMerge(bot, $$props.classBot)} />
+<div class={twMerge(botUnder, $$props.classBotUnder)} />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let inner: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+@prop export let bot: string = 'relative mx-auto bg-neutral-900 dark:bg-neutral-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]';
+@prop export let botUnder: string = 'relative mx-auto bg-neutral-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
+@prop export let div: string = 'relative mx-auto border-neutral-800 dark:border-neutral-800 bg-neutral-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+-->

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

@@ -0,0 +1,41 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let inner: string = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
+ * @prop export let bot: string = 'relative mx-auto bg-neutral-900 dark:bg-neutral-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]';
+ * @prop export let botUnder: string = 'relative mx-auto bg-neutral-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
+ * @prop export let div: string = 'relative mx-auto border-neutral-800 dark:border-neutral-800 bg-neutral-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+ */
+declare const Desktop: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    inner?: string | undefined;
+    bot?: string | undefined;
+    botUnder?: string | undefined;
+    div?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Desktop = InstanceType<typeof Desktop>;
+export default Desktop;

package/dist/elements/device-mockups/DeviceMockup.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { ComponentType } 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';
+
+  export let device: 'default' | 'ios' | 'android' | 'tablet' | 'laptop' | 'desktop' | 'smartwatch' = 'default';
+
+  const componets = {
+    android: Android,
+    ios: Ios,
+    tablet: Tablet,
+    default: DefaultMockup,
+    smartwatch: Smartwatch,
+    laptop: Laptop,
+    desktop: Desktop
+  };
+
+  let component: ComponentType;
+  $: component = componets[device];
+</script>
+
+{#if component}
+  <svelte:component this={component}><slot /></svelte:component>
+{:else}
+  <div class="border p-3 text-xl">Unknow device</div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let device: 'default' | 'ios' | 'android' | 'tablet' | 'laptop' | 'desktop' | 'smartwatch' = 'default';
+-->

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

@@ -0,0 +1,34 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let device: 'default' | 'ios' | 'android' | 'tablet' | 'laptop' | 'desktop' | 'smartwatch' = 'default';
+ */
+declare const DeviceMockup: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    device?: "default" | "ios" | "android" | "tablet" | "laptop" | "desktop" | "smartwatch";
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type DeviceMockup = InstanceType<typeof DeviceMockup>;
+export default DeviceMockup;

package/dist/elements/device-mockups/Ios.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let div: string = 'relative mx-auto border-neutral-800 dark:border-neutral-800 bg-neutral-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl';
+  export let slot: string = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-neutral-800';
+  export let top: string = 'w-[148px] h-[18px] bg-neutral-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
+  export let leftTop: string = 'h-[46px] w-[3px] bg-neutral-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+  export let leftBot: string = 'h-[46px] w-[3px] bg-neutral-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+  export let right: string = 'h-[64px] w-[3px] bg-neutral-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+</script>
+
+<div class={twMerge(div, $$props.class)}>
+  <div class={twMerge(top, $$props.classTop)} />
+  <div class={twMerge(leftTop, $$props.classLeftTop)} />
+  <div class={twMerge(leftBot, $$props.classLeftBot)} />
+  <div class={twMerge(right, $$props.classRight)} />
+  <div class={twMerge(slot, $$props.classSlot)}>
+    <slot />
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let div: string = 'relative mx-auto border-neutral-800 dark:border-neutral-800 bg-neutral-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl';
+@prop export let slot: string = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-neutral-800';
+@prop export let top: string = 'w-[148px] h-[18px] bg-neutral-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
+@prop export let leftTop: string = 'h-[46px] w-[3px] bg-neutral-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+@prop export let leftBot: string = 'h-[46px] w-[3px] bg-neutral-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+@prop export let right: string = 'h-[64px] w-[3px] bg-neutral-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+-->

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

@@ -0,0 +1,45 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let div: string = 'relative mx-auto border-neutral-800 dark:border-neutral-800 bg-neutral-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl';
+ * @prop export let slot: string = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-neutral-800';
+ * @prop export let top: string = 'w-[148px] h-[18px] bg-neutral-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
+ * @prop export let leftTop: string = 'h-[46px] w-[3px] bg-neutral-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+ * @prop export let leftBot: string = 'h-[46px] w-[3px] bg-neutral-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+ * @prop export let right: string = 'h-[64px] w-[3px] bg-neutral-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+ */
+declare const Ios: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    div?: string | undefined;
+    slot?: string | undefined;
+    top?: string | undefined;
+    leftTop?: string | undefined;
+    leftBot?: string | undefined;
+    right?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Ios = InstanceType<typeof Ios>;
+export default Ios;

package/dist/elements/device-mockups/Laptop.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let div: string = 'relative mx-auto border-neutral-800 dark:border-neutral-800 bg-neutral-800 border-[8px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+  export let inner: string = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-neutral-800';
+  export let bot: string = 'relative mx-auto bg-neutral-900 dark:bg-neutral-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]';
+  export let botCen: 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-neutral-800';
+</script>
+
+<div class={twMerge(div, $$props.class)}>
+  <div class={twMerge(inner, $$props.classInner)}>
+    <slot />
+  </div>
+</div>
+
+<div class={twMerge(bot, $$props.classBot)}>
+  <div class={twMerge(botCen, $$props.classBotCen)} />
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let div: string = 'relative mx-auto border-neutral-800 dark:border-neutral-800 bg-neutral-800 border-[8px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+@prop export let inner: string = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-neutral-800';
+@prop export let bot: string = 'relative mx-auto bg-neutral-900 dark:bg-neutral-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]';
+@prop export let botCen: 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-neutral-800';
+-->

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

@@ -0,0 +1,41 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let div: string = 'relative mx-auto border-neutral-800 dark:border-neutral-800 bg-neutral-800 border-[8px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+ * @prop export let inner: string = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-neutral-800';
+ * @prop export let bot: string = 'relative mx-auto bg-neutral-900 dark:bg-neutral-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]';
+ * @prop export let botCen: 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-neutral-800';
+ */
+declare const Laptop: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    div?: string | undefined;
+    inner?: string | undefined;
+    bot?: string | undefined;
+    botCen?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Laptop = InstanceType<typeof Laptop>;
+export default Laptop;

package/dist/elements/device-mockups/Smartwatch.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let div: string = 'relative mx-auto bg-neutral-800 dark:bg-neutral-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
+  export let slot: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
+  export let rightTop: string = 'h-[41px] w-[6px] bg-neutral-800 dark:bg-neutral-800 absolute -right-[16px] top-[40px] rounded-r-lg';
+  export let rightBot: string = 'h-[32px] w-[6px] bg-neutral-800 dark:bg-neutral-800 absolute -right-[16px] top-[88px] rounded-r-lg';
+  export let top: string = 'relative mx-auto border-neutral-900 dark:bg-neutral-800 dark:border-neutral-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]';
+  export let bot: string = 'relative mx-auto bg-neutral-800 dark:bg-neutral-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
+</script>
+
+<div class={twMerge(div, $$props.class)} />
+<div class={twMerge(top, $$props.classTop)}>
+  <div class={twMerge(rightTop, $$props.classRightTop)} />
+  <div class={twMerge(rightBot, $$props.classRightBot)} />
+  <div class={twMerge(slot, $$props.classSlot)}>
+    <slot />
+  </div>
+</div>
+<div class={twMerge(bot, $$props.classBot)} />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let div: string = 'relative mx-auto bg-neutral-800 dark:bg-neutral-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
+@prop export let slot: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
+@prop export let rightTop: string = 'h-[41px] w-[6px] bg-neutral-800 dark:bg-neutral-800 absolute -right-[16px] top-[40px] rounded-r-lg';
+@prop export let rightBot: string = 'h-[32px] w-[6px] bg-neutral-800 dark:bg-neutral-800 absolute -right-[16px] top-[88px] rounded-r-lg';
+@prop export let top: string = 'relative mx-auto border-neutral-900 dark:bg-neutral-800 dark:border-neutral-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]';
+@prop export let bot: string = 'relative mx-auto bg-neutral-800 dark:bg-neutral-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
+-->

package/dist/elements/device-mockups/Smartwatch.svelte.d.ts

@@ -0,0 +1,45 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let div: string = 'relative mx-auto bg-neutral-800 dark:bg-neutral-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
+ * @prop export let slot: string = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
+ * @prop export let rightTop: string = 'h-[41px] w-[6px] bg-neutral-800 dark:bg-neutral-800 absolute -right-[16px] top-[40px] rounded-r-lg';
+ * @prop export let rightBot: string = 'h-[32px] w-[6px] bg-neutral-800 dark:bg-neutral-800 absolute -right-[16px] top-[88px] rounded-r-lg';
+ * @prop export let top: string = 'relative mx-auto border-neutral-900 dark:bg-neutral-800 dark:border-neutral-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]';
+ * @prop export let bot: string = 'relative mx-auto bg-neutral-800 dark:bg-neutral-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
+ */
+declare const Smartwatch: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    div?: string | undefined;
+    slot?: string | undefined;
+    rightTop?: string | undefined;
+    rightBot?: string | undefined;
+    top?: string | undefined;
+    bot?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Smartwatch = InstanceType<typeof Smartwatch>;
+export default Smartwatch;

package/dist/elements/device-mockups/Tablet.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let div: string = 'relative mx-auto border-neutral-800 dark:border-neutral-800 bg-neutral-800 border-[14px] rounded-[2.5rem] h-[454px] max-w-[341px] md:h-[682px] md:max-w-[512px]';
+  export let slot: string = 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-neutral-800';
+  export let leftTop: string = 'h-[32px] w-[3px] bg-neutral-800 dark:bg-neutral-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+  export let leftMid: string = 'h-[46px] w-[3px] bg-neutral-800 dark:bg-neutral-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+  export let leftBot: string = 'h-[46px] w-[3px] bg-neutral-800 dark:bg-neutral-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+  export let right: string = 'h-[64px] w-[3px] bg-neutral-800 dark:bg-neutral-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+</script>
+
+<div class={twMerge(div, $$props.class)}>
+  <div class={twMerge(leftTop, $$props.classLeftTop)} />
+  <div class={twMerge(leftMid, $$props.classLeftMid)} />
+  <div class={twMerge(leftBot, $$props.classLeftBot)} />
+  <div class={twMerge(right, $$props.classRight)} />
+  <div class={twMerge(slot, $$props.classSlot)}>
+    <slot />
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let div: string = 'relative mx-auto border-neutral-800 dark:border-neutral-800 bg-neutral-800 border-[14px] rounded-[2.5rem] h-[454px] max-w-[341px] md:h-[682px] md:max-w-[512px]';
+@prop export let slot: string = 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-neutral-800';
+@prop export let leftTop: string = 'h-[32px] w-[3px] bg-neutral-800 dark:bg-neutral-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+@prop export let leftMid: string = 'h-[46px] w-[3px] bg-neutral-800 dark:bg-neutral-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+@prop export let leftBot: string = 'h-[46px] w-[3px] bg-neutral-800 dark:bg-neutral-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+@prop export let right: string = 'h-[64px] w-[3px] bg-neutral-800 dark:bg-neutral-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+-->

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

@@ -0,0 +1,45 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let div: string = 'relative mx-auto border-neutral-800 dark:border-neutral-800 bg-neutral-800 border-[14px] rounded-[2.5rem] h-[454px] max-w-[341px] md:h-[682px] md:max-w-[512px]';
+ * @prop export let slot: string = 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-neutral-800';
+ * @prop export let leftTop: string = 'h-[32px] w-[3px] bg-neutral-800 dark:bg-neutral-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+ * @prop export let leftMid: string = 'h-[46px] w-[3px] bg-neutral-800 dark:bg-neutral-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+ * @prop export let leftBot: string = 'h-[46px] w-[3px] bg-neutral-800 dark:bg-neutral-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+ * @prop export let right: string = 'h-[64px] w-[3px] bg-neutral-800 dark:bg-neutral-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+ */
+declare const Tablet: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    div?: string | undefined;
+    slot?: string | undefined;
+    leftTop?: string | undefined;
+    leftMid?: string | undefined;
+    leftBot?: string | undefined;
+    right?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Tablet = InstanceType<typeof Tablet>;
+export default Tablet;

package/dist/elements/drawer/Drawer.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import type { drawerTransitionParamTypes, drawerTransitionTypes } from '../types';
+  import { fly, slide, blur, fade } from 'svelte/transition';
+  import { clickOutside } from '../utils/clickOutside';
+
+  export let activateClickOutside: boolean = true;
+  export let hidden: boolean = true;
+  export let position: 'fixed' | 'absolute' = 'fixed';
+  export let leftOffset: string = 'inset-y-0 left-0';
+  export let rightOffset: string = 'inset-y-0 right-0';
+  export let topOffset: string = 'inset-x-0 top-0';
+  export let bottomOffset: string = 'inset-x-0 bottom-0';
+  export let width: string = 'w-80';
+  export let backdrop: boolean = true;
+  export let bgColor: string = 'bg-neutral-900';
+  export let bgOpacity: string = 'bg-opacity-75';
+  export let placement: 'left' | 'right' | 'top' | 'bottom' = 'left';
+  export let id: string = 'drawer-example';
+  export let divClass: string = 'overflow-y-auto z-50 p-4 bg-white dark:bg-neutral-800';
+  export let transitionParams: drawerTransitionParamTypes = {};
+  export let transitionType: drawerTransitionTypes = 'fly';
+
+  function multiple(node: HTMLElement, params: any) {
+    switch (transitionType) {
+      case 'slide':
+        return slide(node, params);
+      case 'blur':
+        return blur(node, params);
+      case 'fade':
+        return fade(node, params);
+      default:
+        return fly(node, params);
+    }
+  }
+
+  const placements = {
+    left: leftOffset,
+    right: rightOffset,
+    top: topOffset,
+    bottom: bottomOffset
+  };
+
+  const handleDrawer = () => {
+    hidden = !hidden;
+  };
+
+  const handleClickOutside = () => activateClickOutside && !hidden && handleDrawer();
+
+  let backdropDivClass = twMerge('fixed top-0 left-0 z-50 w-full h-full', backdrop && bgColor, backdrop && bgOpacity);
+
+  function clickOutsideWrapper(node: HTMLElement, callback: () => void) {
+    return activateClickOutside ? clickOutside(node, callback) : undefined;
+  }
+</script>
+
+{#if !hidden}
+  {#if backdrop && activateClickOutside}
+    <div role="presentation" class={backdropDivClass} on:click={() => !hidden && handleDrawer()} />
+  {:else if backdrop && !activateClickOutside}
+    <div role="presentation" class={backdropDivClass} />
+  {/if}
+
+  <div use:clickOutsideWrapper={handleClickOutside} {id} {...$$restProps} class={twMerge(divClass, width, position, placements[placement], $$props.class)} transition:multiple={transitionParams} tabindex="-1" aria-controls={id} aria-labelledby={id}>
+    <slot {hidden} />
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let activateClickOutside: boolean = true;
+@prop export let hidden: boolean = true;
+@prop export let position: 'fixed' | 'absolute' = 'fixed';
+@prop export let leftOffset: string = 'inset-y-0 left-0';
+@prop export let rightOffset: string = 'inset-y-0 right-0';
+@prop export let topOffset: string = 'inset-x-0 top-0';
+@prop export let bottomOffset: string = 'inset-x-0 bottom-0';
+@prop export let width: string = 'w-80';
+@prop export let backdrop: boolean = true;
+@prop export let bgColor: string = 'bg-neutral-900';
+@prop export let bgOpacity: string = 'bg-opacity-75';
+@prop export let placement: 'left' | 'right' | 'top' | 'bottom' = 'left';
+@prop export let id: string = 'drawer-example';
+@prop export let divClass: string = 'overflow-y-auto z-50 p-4 bg-white dark:bg-neutral-800';
+@prop export let transitionParams: drawerTransitionParamTypes = {};
+@prop export let transitionType: drawerTransitionTypes = 'fly';
+-->

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

@@ -0,0 +1,70 @@
+import type { drawerTransitionParamTypes, drawerTransitionTypes } from '../types';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let activateClickOutside: boolean = true;
+ * @prop export let hidden: boolean = true;
+ * @prop export let position: 'fixed' | 'absolute' = 'fixed';
+ * @prop export let leftOffset: string = 'inset-y-0 left-0';
+ * @prop export let rightOffset: string = 'inset-y-0 right-0';
+ * @prop export let topOffset: string = 'inset-x-0 top-0';
+ * @prop export let bottomOffset: string = 'inset-x-0 bottom-0';
+ * @prop export let width: string = 'w-80';
+ * @prop export let backdrop: boolean = true;
+ * @prop export let bgColor: string = 'bg-neutral-900';
+ * @prop export let bgOpacity: string = 'bg-opacity-75';
+ * @prop export let placement: 'left' | 'right' | 'top' | 'bottom' = 'left';
+ * @prop export let id: string = 'drawer-example';
+ * @prop export let divClass: string = 'overflow-y-auto z-50 p-4 bg-white dark:bg-neutral-800';
+ * @prop export let transitionParams: drawerTransitionParamTypes = {};
+ * @prop export let transitionType: drawerTransitionTypes = 'fly';
+ */
+declare const Drawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    activateClickOutside?: boolean | undefined;
+    hidden?: boolean | undefined;
+    position?: "fixed" | "absolute" | undefined;
+    leftOffset?: string | undefined;
+    rightOffset?: string | undefined;
+    topOffset?: string | undefined;
+    bottomOffset?: string | undefined;
+    width?: string | undefined;
+    backdrop?: boolean | undefined;
+    bgColor?: string | undefined;
+    bgOpacity?: string | undefined;
+    placement?: "left" | "right" | "top" | "bottom" | undefined;
+    id?: string | undefined;
+    divClass?: string | undefined;
+    transitionParams?: drawerTransitionParamTypes | undefined;
+    transitionType?: drawerTransitionTypes;
+}, {
+    default: {
+        hidden: boolean;
+    };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        hidden: boolean;
+    };
+}, {}, string>;
+type Drawer = InstanceType<typeof Drawer>;
+export default Drawer;