odj-svelte-ui 0.1.0

package/dist/elements/forms/Range.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let value: number;
+  export let size: 'sm' | 'md' | 'lg' = 'md';
+
+  const sizes = {
+    sm: 'h-1 range-sm',
+    md: 'h-2',
+    lg: 'h-3 range-lg'
+  };
+  let inputClass: string;
+  $: inputClass = twMerge('w-full bg-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-neutral-700', sizes[size] ?? sizes.md, $$props.class);
+</script>
+
+<input type="range" bind:value {...$$restProps} class={inputClass} on:change on:click on:keydown on:keypress on:keyup />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let value: number;
+@prop export let size: 'sm' | 'md' | 'lg' = 'md';
+-->

package/dist/elements/forms/Range.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;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let value: number;
+ * @prop export let size: 'sm' | 'md' | 'lg' = 'md';
+ */
+declare const Range: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    value: number;
+    size?: "sm" | "md" | "lg" | undefined;
+}, {
+    change: Event;
+    click: MouseEvent;
+    keydown: KeyboardEvent;
+    keypress: KeyboardEvent;
+    keyup: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Range = InstanceType<typeof Range>;
+export default Range;

package/dist/elements/forms/Search.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { FormSizeType } from '../types';
+  import Wrapper from '../utils/Wrapper.svelte';
+  import Input from './Input.svelte';
+
+  export let size: FormSizeType = 'lg';
+  export let placeholder: string = 'Search';
+  export let value: any = undefined;
+
+  const sizes = {
+    sm: 'w-3.5 h-3.5',
+    md: 'w-5 h-5',
+    lg: 'w-6 h-6'
+  };
+</script>
+
+<Wrapper class="relative w-full" show={$$slots.default}>
+  <Input bind:value on:blur on:change on:input on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste type="search" {placeholder} {size} {...$$restProps} class={$$props.class}>
+    <svg slot="left" class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+    </svg>
+    <!-- We can use it here. See below. This will trigger right padding
+      <slot slot="right" />
+    -->
+  </Input>
+  <!-- This slot should be within Input as a slot='right'
+    Svelete has an issue with forwarded slots and even empty slot here will appear as existing slot in Input.
+    Due to that we need the below slot and Wrapper around
+  -->
+  {#if $$slots.default}
+    <div class="flex absolute inset-y-0 right-0 items-center text-neutral-500 dark:text-neutral-400">
+      <slot />
+    </div>
+  {/if}
+</Wrapper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let size: FormSizeType = 'lg';
+@prop export let placeholder: string = 'Search';
+@prop export let value: any = undefined;
+-->

package/dist/elements/forms/Search.svelte.d.ts

@@ -0,0 +1,53 @@
+import type { FormSizeType } 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 size: FormSizeType = 'lg';
+ * @prop export let placeholder: string = 'Search';
+ * @prop export let value: any = undefined;
+ */
+declare const Search: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    size?: FormSizeType | undefined;
+    placeholder?: string | undefined;
+    value?: any;
+}, {
+    default: {};
+}>, {
+    blur: FocusEvent;
+    change: Event;
+    input: Event;
+    click: MouseEvent;
+    focus: FocusEvent;
+    keydown: KeyboardEvent;
+    keypress: KeyboardEvent;
+    keyup: KeyboardEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    mouseover: MouseEvent;
+    paste: ClipboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Search = InstanceType<typeof Search>;
+export default Search;

package/dist/elements/forms/Select.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import type { SelectOptionType } from '../types';
+
+  export let items: SelectOptionType<any>[] = [];
+  export let value: any = undefined;
+  export let placeholder: string = 'Choose option ...';
+  export let underline: boolean = false;
+  export let size: 'sm' | 'md' | 'lg' = 'md';
+
+  export let defaultClass: string = 'text-neutral-900 bg-neutral-50 border border-neutral-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
+
+  export let underlineClass: string = 'text-neutral-500 bg-transparent border-0 border-b-2 border-neutral-200 appearance-none dark:text-neutral-400 dark:border-neutral-700 focus:outline-none focus:ring-0 focus:border-neutral-200 peer';
+
+  const common = 'block w-full';
+  const sizes = {
+    sm: 'text-sm p-2',
+    md: 'text-sm p-2.5',
+    lg: 'text-base py-3 px-4'
+  };
+
+  let selectClass: string;
+  $: selectClass = twMerge(common, underline ? underlineClass : defaultClass, sizes[size], underline && '!px-0', $$props.class);
+</script>
+
+<select {...$$restProps} bind:value class={selectClass} on:change on:contextmenu on:input>
+  {#if placeholder}
+    <option disabled selected value="">{placeholder}</option>
+  {/if}
+
+  {#each items as { value, name }}
+    <option {value}>{name}</option>
+  {:else}
+    <slot />
+  {/each}
+</select>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let items: SelectOptionType<any>[] = [];
+@prop export let value: any = undefined;
+@prop export let placeholder: string = 'Choose option ...';
+@prop export let underline: boolean = false;
+@prop export let size: 'sm' | 'md' | 'lg' = 'md';
+@prop export let defaultClass: string = 'text-neutral-900 bg-neutral-50 border border-neutral-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
+@prop export let underlineClass: string = 'text-neutral-500 bg-transparent border-0 border-b-2 border-neutral-200 appearance-none dark:text-neutral-400 dark:border-neutral-700 focus:outline-none focus:ring-0 focus:border-neutral-200 peer';
+-->

package/dist/elements/forms/Select.svelte.d.ts

@@ -0,0 +1,52 @@
+import type { SelectOptionType } 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 items: SelectOptionType<any>[] = [];
+ * @prop export let value: any = undefined;
+ * @prop export let placeholder: string = 'Choose option ...';
+ * @prop export let underline: boolean = false;
+ * @prop export let size: 'sm' | 'md' | 'lg' = 'md';
+ * @prop export let defaultClass: string = 'text-neutral-900 bg-neutral-50 border border-neutral-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
+ * @prop export let underlineClass: string = 'text-neutral-500 bg-transparent border-0 border-b-2 border-neutral-200 appearance-none dark:text-neutral-400 dark:border-neutral-700 focus:outline-none focus:ring-0 focus:border-neutral-200 peer';
+ */
+declare const Select: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    items?: SelectOptionType<any>[] | undefined;
+    value?: any;
+    placeholder?: string | undefined;
+    underline?: boolean | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    defaultClass?: string | undefined;
+    underlineClass?: string | undefined;
+}, {
+    default: {};
+}>, {
+    change: Event;
+    contextmenu: MouseEvent;
+    input: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Select = InstanceType<typeof Select>;
+export default Select;

package/dist/elements/forms/Textarea.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { getContext } from 'svelte';
+  import Wrapper from '../utils/Wrapper.svelte';
+
+  const background = getContext('background');
+
+  export let value: any = undefined;
+  export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
+  export let unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
+  export let innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-neutral-800';
+  let wrapped: boolean;
+  $: wrapped = $$slots.header || $$slots.footer;
+
+  let wrapperClass: string;
+  $: wrapperClass = twMerge('w-full rounded-lg', background ? 'bg-white dark:bg-neutral-800' : 'bg-neutral-50 dark:bg-neutral-700', 'text-neutral-900 dark:placeholder-neutral-400 dark:text-white ', 'border border-neutral-200 dark:border-neutral-600', $$props.class);
+
+  let textareaClass: string;
+  $: textareaClass = wrapped ? wrappedClass : twMerge(wrapperClass, unWrappedClass);
+
+  const headerClass = (header: boolean) => twMerge(header ? 'border-b' : 'border-t', 'py-2 px-3 border-neutral-200 dark:border-neutral-600');
+
+  let innerWrapperClass: string;
+  $: innerWrapperClass = twMerge(innerWrappedClass, $$slots.footer ? 'rounded-b-lg' : '', $$slots.header ? 'rounded-t-lg' : '');
+</script>
+
+<Wrapper show={wrapped} class={wrapperClass}>
+  {#if $$slots.header}
+    <div class={headerClass(true)}>
+      <slot name="header" />
+    </div>
+  {/if}
+  <Wrapper show={wrapped} class={innerWrapperClass}>
+    <textarea bind:value on:blur on:change on:click on:contextmenu on:focus on:input on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {...$$restProps} class={textareaClass} />
+  </Wrapper>
+  {#if $$slots.footer}
+    <div class={headerClass(false)}>
+      <slot name="footer" />
+    </div>
+  {/if}
+</Wrapper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let value: any = undefined;
+@prop export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
+@prop export let unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
+@prop export let innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-neutral-800';
+-->

package/dist/elements/forms/Textarea.svelte.d.ts

@@ -0,0 +1,49 @@
+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 value: any = undefined;
+ * @prop export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
+ * @prop export let unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
+ * @prop export let innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-neutral-800';
+ */
+declare const Textarea: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    value?: any;
+    wrappedClass?: string | undefined;
+    unWrappedClass?: string | undefined;
+    innerWrappedClass?: string | undefined;
+}, {
+    blur: FocusEvent;
+    change: Event;
+    click: MouseEvent;
+    contextmenu: MouseEvent;
+    focus: FocusEvent;
+    input: Event;
+    keydown: KeyboardEvent;
+    keypress: KeyboardEvent;
+    keyup: KeyboardEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    mouseover: MouseEvent;
+    paste: ClipboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    footer: {};
+}, {}, string>;
+type Textarea = InstanceType<typeof Textarea>;
+export default Textarea;

package/dist/elements/forms/Toggle.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+  import Checkbox from './Checkbox.svelte';
+  import type { FormColorType } from '../types';
+
+  export let disabled: boolean;
+  export let size: 'small' | 'default' | 'large' | 'custom' = 'default';
+  export let group: (string | number)[] = [];
+  export let value: string | number = '';
+  export let checked: boolean | undefined = undefined;
+  export let customSize: string = '';
+
+  // tinted if put in component having its own background
+  let background: boolean = getContext('background');
+
+  $: common = `shrink-0 bg-neutral-200 rounded-full peer-focus-visible:ring-4 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-neutral-300 after:border after:rounded-full after:transition-all ${disabled ? 'opacity-40 cursor-default' : 'opacity-100 cursor-pointer'}`;
+
+  const colors = {
+    primary: 'peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600',
+    secondary: 'peer-focus:ring-secondary-300 dark:peer-focus:ring-secondary-800 peer-checked:bg-secondary-600',
+    red: 'peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600',
+    green: 'peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600',
+    purple: 'peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600',
+    yellow: 'peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400',
+    teal: 'peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600',
+    orange: 'peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500',
+    blue: 'peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600'
+  };
+
+  const sizes = {
+    small: 'w-9 h-5 after:top-[2px] after:left-[2px] after:h-4 after:w-4',
+    default: 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5',
+    large: 'w-14 h-7 after:top-0.5 after:left-[4px]  after:h-6 after:w-6',
+    custom: customSize
+  };
+
+  let divClass: string;
+
+  $: divClass = twMerge(common, background ? 'dark:bg-neutral-600 dark:border-neutral-500' : 'dark:bg-neutral-700 dark:border-neutral-600', colors[($$restProps.color as FormColorType) ?? 'primary'], sizes[size], 'relative', $$props.classDiv);
+</script>
+
+<Checkbox custom {...$$restProps} class={$$props.class} {disabled} {value} bind:checked bind:group on:click on:change>
+  <span class={divClass} />
+  <slot />
+</Checkbox>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let size: 'small' | 'default' | 'large' | 'custom' = 'default';
+@prop export let group: (string | number)[] = [];
+@prop export let value: string | number = '';
+@prop export let checked: boolean | undefined = undefined;
+@prop export let customSize: string = '';
+-->

package/dist/elements/forms/Toggle.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 size: 'small' | 'default' | 'large' | 'custom' = 'default';
+ * @prop export let group: (string | number)[] = [];
+ * @prop export let value: string | number = '';
+ * @prop export let checked: boolean | undefined = undefined;
+ * @prop export let customSize: string = '';
+ */
+declare const Toggle: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    disabled: boolean;
+    size?: "small" | "default" | "large" | "custom" | undefined;
+    group?: (string | number)[] | undefined;
+    value?: string | number | undefined;
+    checked?: boolean | undefined | undefined;
+    customSize?: string | undefined;
+}, {
+    default: {};
+}>, {
+    click: MouseEvent;
+    change: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Toggle = InstanceType<typeof Toggle>;
+export default Toggle;

package/dist/elements/gallery/Gallery.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { ImgType } from '../types';
+  import { twMerge } from 'tailwind-merge';
+
+  export let items: ImgType[] = [];
+  export let imgClass: string = 'h-auto max-w-full rounded-lg';
+
+  $: divClass = twMerge('grid', $$props.class);
+
+  function init(node: HTMLElement) {
+    if (getComputedStyle(node).gap === 'normal') node.style.gap = 'inherit';
+  }
+</script>
+
+<div {...$$restProps} class={divClass} use:init>
+  {#each items as item}
+    <slot {item}>
+      <div><img src={item.src} alt={item.alt} class={twMerge(imgClass, $$props.classImg)} /></div>
+    </slot>
+  {:else}
+    <slot item={items[0]} />
+  {/each}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let items: ImgType[] = [];
+@prop export let imgClass: string = 'h-auto max-w-full rounded-lg';
+-->

package/dist/elements/gallery/Gallery.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { ImgType } 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 items: ImgType[] = [];
+ * @prop export let imgClass: string = 'h-auto max-w-full rounded-lg';
+ */
+declare const Gallery: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    items?: ImgType[] | undefined;
+    imgClass?: string | undefined;
+}, {
+    default: {
+        item: ImgType;
+    };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        item: ImgType;
+    };
+}, {}, string>;
+type Gallery = InstanceType<typeof Gallery>;
+export default Gallery;