odj-svelte-ui 0.1.0

package/dist/elements/carousel/Slide.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { HTMLImgAttributes } from 'svelte/elements';
+  import { fly, type TransitionConfig } from 'svelte/transition';
+  import { twMerge } from 'tailwind-merge';
+  import { getContext } from 'svelte';
+  import type { Writable } from 'svelte/store';
+  import type { State } from './Carousel.svelte';
+
+  const state = getContext<Writable<State>>('state');
+
+  type TransitionFunc = (node: HTMLElement, params: any) => TransitionConfig;
+
+  export let image: HTMLImgAttributes;
+  export let transition: TransitionFunc | null = null; // Optional transition function, overrides default slide transition
+
+  $: transitionSlideIn = {
+    x: $state.forward ? '100%' : '-100%',
+    opacity: 1,
+    width: '100%',
+    height: '100%',
+    duration: $state.slideDuration
+  };
+
+  $: transitionSlideOut = {
+    x: $state.forward ? '-100%' : '100%',
+    opacity: 0.9,
+    width: '100%',
+    height: '100%',
+    duration: $state.slideDuration
+  };
+
+  $: imgClass = twMerge('absolute block !w-full h-full object-cover', $$props.class);
+</script>
+
+{#if transition}
+  {#key image}
+    <img alt="..." {...image} transition:transition={{}} {...$$restProps} class={imgClass} />
+  {/key}
+{:else}
+  {#key image}
+    <img alt="..." {...image} {...$$restProps} out:fly={transitionSlideOut} in:fly={transitionSlideIn} class={imgClass} />
+  {/key}
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let image: HTMLImgAttributes;
+@prop export let transition: TransitionFunc | null = null;
+-->

package/dist/elements/carousel/Slide.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { HTMLImgAttributes } from 'svelte/elements';
+import { type TransitionConfig } from 'svelte/transition';
+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;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let image: HTMLImgAttributes;
+ * @prop export let transition: TransitionFunc | null = null;
+ */
+declare const Slide: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    image: HTMLImgAttributes;
+    transition?: (((node: HTMLElement, params: any) => TransitionConfig) | null) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Slide = InstanceType<typeof Slide>;
+export default Slide;

package/dist/elements/carousel/Thumbnail.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { HTMLImgAttributes } from 'svelte/elements';
+  import { twMerge } from 'tailwind-merge';
+
+  export let selected: boolean = false;
+
+  export let activeClass = 'opacity-100 rounded-lg';
+  export let inactiveClass = 'opacity-50 rounded-lg';
+</script>
+
+<img alt="..." {...$$restProps} class={twMerge(selected ? activeClass : inactiveClass, $$props.class)} />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let selected: boolean = false;
+@prop export let activeClass = 'opacity-100';
+@prop export let inactiveClass = 'opacity-60';
+-->

package/dist/elements/carousel/Thumbnail.svelte.d.ts

@@ -0,0 +1,30 @@
+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;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let selected: boolean = false;
+ * @prop export let activeClass = 'opacity-100';
+ * @prop export let inactiveClass = 'opacity-60';
+ */
+declare const Thumbnail: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    selected?: boolean | undefined;
+    activeClass?: string | undefined;
+    inactiveClass?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Thumbnail = InstanceType<typeof Thumbnail>;
+export default Thumbnail;

package/dist/elements/carousel/Thumbnails.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { HTMLImgAttributes } from 'svelte/elements';
+  import { twMerge } from 'tailwind-merge';
+  import Thumbnail from './Thumbnail.svelte';
+
+  export let images: HTMLImgAttributes[] = [];
+  export let index: number = 0;
+  export let ariaLabel: string = 'Click to view image';
+  export let imgClass: string = '';
+  export let throttleDelay: number = 650; // ms
+
+  let lastClickedAt = new Date();
+
+  const btnClick = (idx: number) => {
+    if (new Date().getTime() - lastClickedAt.getTime() < throttleDelay) {
+      console.warn('Thumbnail action throttled');
+      return;
+    }
+    if (idx === index) {
+      return;
+    }
+
+    index = idx;
+    lastClickedAt = new Date();
+  };
+
+  $: index = (index + images.length) % images.length;
+</script>
+
+<div class={twMerge('flex flex-row gap-2 justify-center w-full', $$props.class)}>
+  {#each images as image, idx}
+    {@const selected = index === idx}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <button on:click={() => btnClick(idx)} aria-label={ariaLabel}>
+      <slot {Thumbnail} {image} {selected} {imgClass}>
+        <Thumbnail {...image} {selected} class={imgClass} />
+      </slot>
+    </button>
+  {/each}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let images: HTMLImgAttributes[] = [];
+@prop export let index: number = 0;
+@prop export let ariaLabel: string = 'Click to view image';
+@prop export let imgClass: string = '';
+@prop export let throttleDelay: number = 650;
+-->

package/dist/elements/charts/Chart.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { ApexOptions } from 'apexcharts';
+
+  export let options: ApexOptions;
+
+  function initChart(node: HTMLElement, options: ApexOptions) {
+    let chart: ApexCharts;
+
+    async function asyncInitChart() {
+      const ApexCharts = (await import('apexcharts')).default;
+      chart = new ApexCharts(node, options);
+      chart.render();
+    }
+
+    asyncInitChart();
+
+    return {
+      update(options: ApexOptions) {
+        chart && chart.updateOptions(options);
+      },
+      destroy() {
+        chart && chart.destroy();
+      }
+    };
+  }
+</script>
+
+<div use:initChart={options} class={$$props.class} />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let options: ApexOptions;
+-->

package/dist/elements/charts/Chart.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { ApexOptions } from 'apexcharts';
+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;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let options: ApexOptions;
+ */
+declare const Chart: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    options: ApexOptions;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Chart = InstanceType<typeof Chart>;
+export default Chart;

package/dist/elements/darkmode/DarkMode.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let btnClass: string = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700 focus:outline-none focus:ring-4 focus:ring-neutral-200 dark:focus:ring-neutral-700 rounded-lg text-sm p-2.5';
+  export let size: 'sm' | 'md' | 'lg' = 'md';
+  export let ariaLabel: string = 'Dark mode';
+
+  const sizes = {
+    sm: 'w-4 h-4',
+    md: 'w-5 h-5',
+    lg: 'w-6 h-6'
+  };
+
+  const toggleTheme = () => {
+    const isDark = window.document.documentElement.classList.toggle('dark');
+    localStorage.setItem('color-theme', isDark ? 'dark' : 'light');
+  };
+</script>
+
+<svelte:head>
+  <script>
+    if ('color-theme' in localStorage) {
+      // explicit preference - overrides author's choice
+      localStorage.getItem('color-theme') === 'dark' ? window.document.documentElement.classList.add('dark') : window.document.documentElement.classList.remove('dark');
+    } else {
+      // browser preference - does not overrides
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) window.document.documentElement.classList.add('dark');
+    }
+  </script>
+</svelte:head>
+
+<button on:click={toggleTheme} aria-label={ariaLabel} type="button" {...$$restProps} class={twMerge(btnClass, $$props.class)}>
+  <span class="hidden dark:block">
+    <slot name="lightIcon">
+      <svg class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1
+  0 100-2H3a1 1 0 000 2h1z"
+          fill-rule="evenodd"
+          clip-rule="evenodd" />
+      </svg>
+    </slot>
+  </span>
+  <span class="block dark:hidden">
+    <slot name="darkIcon">
+      <svg class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+      </svg>
+    </slot>
+  </span>
+</button>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let btnClass: string = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700 focus:outline-none focus:ring-4 focus:ring-neutral-200 dark:focus:ring-neutral-700 rounded-lg text-sm p-2.5';
+@prop export let size: 'sm' | 'md' | 'lg' = 'md';
+@prop export let ariaLabel: string = 'Dark mode';
+-->

package/dist/elements/darkmode/DarkMode.svelte.d.ts

@@ -0,0 +1,33 @@
+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;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let btnClass: string = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700 focus:outline-none focus:ring-4 focus:ring-neutral-200 dark:focus:ring-neutral-700 rounded-lg text-sm p-2.5';
+ * @prop export let size: 'sm' | 'md' | 'lg' = 'md';
+ * @prop export let ariaLabel: string = 'Dark mode';
+ */
+declare const DarkMode: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    btnClass?: string | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    ariaLabel?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    lightIcon: {};
+    darkIcon: {};
+}, {}, string>;
+type DarkMode = InstanceType<typeof DarkMode>;
+export default DarkMode;

package/dist/elements/datepicker/Calender.svelte

@@ -0,0 +1,3 @@
+<svg aria-hidden="true" class="w-5 h-5 text-neutral-500 dark:text-neutral-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
+</svg>

package/dist/elements/datepicker/Calender.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Calender;
+type Calender = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Calender: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/elements/datepicker/Datepicker.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import Calendar from './Calender.svelte';
+
+  export let range: boolean = false;
+  // autoHide not working
+  // export let autoHide: boolean = false;
+  export let datepickerButtons: boolean = false;
+  export let datepickerFormat: string = 'mm/dd/yyyy';
+  export let datepickerOrientation: string = 'bottom';
+  export let datepickerTitle: string = 'Flowbite datepicker';
+  export let attribute: string = '';
+  export let inputClass: string = 'bg-neutral-50 border border-neutral-300 text-neutral-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+
+  $: setAttribute = (node: HTMLElement, params: any) => {
+    if (params) {
+      node.setAttribute(params, '');
+    }
+  };
+</script>
+
+<svelte:head>
+  <link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.1/dist/flowbite.min.css" />
+  <script src="https://unpkg.com/flowbite@1.5.1/dist/datepicker.js"></script>
+</svelte:head>
+
+{#if range}
+  <div date-rangepicker class="flex items-center">
+    <div class="relative">
+      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+        <Calendar />
+      </div>
+      <input name="start" type="text" class={inputClass} placeholder="Select date start" />
+    </div>
+    <span class="mx-4 text-neutral-500">to</span>
+    <div class="relative">
+      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+        <Calendar />
+      </div>
+      <input name="end" type="text" class={inputClass} placeholder="Select date end" />
+    </div>
+  </div>
+{:else}
+  <div class="relative">
+    <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+      <Calendar />
+    </div>
+    {#if datepickerButtons}
+      <input {...$$restProps} datepicker datepicker-buttons datepicker-format={datepickerFormat} datepicker-orientation={datepickerOrientation} datepicker-title={datepickerTitle} use:setAttribute={attribute} type="text" class={inputClass} placeholder="Select date" />
+    {:else}
+      <input {...$$restProps} datepicker datepicker-format={datepickerFormat} datepicker-orientation={datepickerOrientation} datepicker-title={datepickerTitle} use:setAttribute={attribute} type="text" class={inputClass} placeholder="Select date" />
+    {/if}
+    <slot />
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let range: boolean = false;
+@prop export let autoHide: boolean = false;
+@prop export let datepickerButtons: boolean = false;
+@prop export let datepickerFormat: string = 'mm/dd/yyyy';
+@prop export let datepickerOrientation: string = 'bottom';
+@prop export let datepickerTitle: string = 'Flowbite datepicker';
+@prop export let attribute: string = '';
+@prop export let inputClass: string = 'bg-neutral-50 border border-neutral-300 text-neutral-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+-->

package/dist/elements/datepicker/Datepicker.svelte.d.ts

@@ -0,0 +1,48 @@
+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 range: boolean = false;
+ * @prop export let autoHide: boolean = false;
+ * @prop export let datepickerButtons: boolean = false;
+ * @prop export let datepickerFormat: string = 'mm/dd/yyyy';
+ * @prop export let datepickerOrientation: string = 'bottom';
+ * @prop export let datepickerTitle: string = 'Flowbite datepicker';
+ * @prop export let attribute: string = '';
+ * @prop export let inputClass: string = 'bg-neutral-50 border border-neutral-300 text-neutral-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+ */
+declare const Datepicker: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    range?: boolean | undefined;
+    datepickerButtons?: boolean | undefined;
+    datepickerFormat?: string | undefined;
+    datepickerOrientation?: string | undefined;
+    datepickerTitle?: string | undefined;
+    attribute?: string | undefined;
+    inputClass?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Datepicker = InstanceType<typeof Datepicker>;
+export default Datepicker;

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

@@ -0,0 +1,35 @@
+<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-xl h-[600px] w-[300px] shadow-xl';
+  export let slot: string = 'rounded-xl 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-[32px] w-[3px] bg-neutral-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+  export let leftMid: 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(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-xl h-[600px] w-[300px] shadow-xl';
+@prop export let slot: string = 'rounded-xl 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-[32px] w-[3px] bg-neutral-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+@prop export let leftMid: 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/Android.svelte.d.ts

@@ -0,0 +1,47 @@
+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-xl h-[600px] w-[300px] shadow-xl';
+ * @prop export let slot: string = 'rounded-xl 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-[32px] w-[3px] bg-neutral-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+ * @prop export let leftMid: 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 Android: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    div?: string | undefined;
+    slot?: string | undefined;
+    top?: string | undefined;
+    leftTop?: string | undefined;
+    leftMid?: string | undefined;
+    leftBot?: string | undefined;
+    right?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Android = InstanceType<typeof Android>;
+export default Android;

package/dist/elements/device-mockups/DefaultMockup.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]';
+  export let slot: string = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-neutral-800';
+  export let top: string = 'h-[32px] w-[3px] bg-neutral-800 dark:bg-neutral-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+  export let leftTop: 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(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]';
+@prop export let slot: string = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-neutral-800';
+@prop export let top: string = 'h-[32px] w-[3px] bg-neutral-800 dark:bg-neutral-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+@prop export let leftTop: 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/DefaultMockup.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]';
+ * @prop export let slot: string = 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-neutral-800';
+ * @prop export let top: string = 'h-[32px] w-[3px] bg-neutral-800 dark:bg-neutral-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+ * @prop export let leftTop: 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 DefaultMockup: $$__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 DefaultMockup = InstanceType<typeof DefaultMockup>;
+export default DefaultMockup;