odj-svelte-ui 0.1.0

package/dist/elements/kbd/ArrowKeyUp.svelte.d.ts

@@ -0,0 +1,26 @@
+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 svgClass: string = 'w-4 h-4';
+ */
+declare const ArrowKeyUp: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    svgClass?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ArrowKeyUp = InstanceType<typeof ArrowKeyUp>;
+export default ArrowKeyUp;

package/dist/elements/kbd/Kbd.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let kbdClass: string = 'text-xs font-semibold text-neutral-800 bg-neutral-100 border border-neutral-200 rounded-lg dark:bg-neutral-600 dark:text-neutral-100 dark:border-neutral-500';
+</script>
+
+<kbd class={twMerge(kbdClass, $$props.class)}>
+  <slot />
+</kbd>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let kbdClass: string = 'text-xs font-semibold text-neutral-800 bg-neutral-100 border border-neutral-200 rounded-lg dark:bg-neutral-600 dark:text-neutral-100 dark:border-neutral-500';
+-->

package/dist/elements/kbd/Kbd.svelte.d.ts

@@ -0,0 +1,35 @@
+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 kbdClass: string = 'text-xs font-semibold text-neutral-800 bg-neutral-100 border border-neutral-200 rounded-lg dark:bg-neutral-600 dark:text-neutral-100 dark:border-neutral-500';
+ */
+declare const Kbd: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    kbdClass?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Kbd = InstanceType<typeof Kbd>;
+export default Kbd;

package/dist/elements/list-group/Listgroup.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { setContext, type ComponentProps, createEventDispatcher } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+  import type { ListGroupItemType } from '../types';
+  import ListgroupItem from './ListgroupItem.svelte';
+  import Frame from '../utils/Frame.svelte';
+
+  const dispatch = createEventDispatcher();
+
+  // propagate props type from underlying Frame
+  interface $$Props extends ComponentProps<Frame> {
+    items?: ListGroupItemType[] | string[];
+    active?: boolean;
+  }
+
+  export let items: ListGroupItemType[] | string[] = [];
+  export let active: boolean = false;
+  export let defaultClass: string = 'divide-y divide-neutral-200 dark:divide-neutral-600';
+
+  $: setContext('active', active);
+
+  let groupClass: string;
+  $: groupClass = twMerge(defaultClass, $$props.class);
+</script>
+
+<Frame tag={active ? 'div' : 'ul'} {...$$restProps} rounded border class={groupClass}>
+  {#each items as item, index}
+    {#if typeof item === 'object'}
+      <ListgroupItem {active} {...item} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
+    {:else}
+      <ListgroupItem {active} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
+    {/if}
+  {:else}
+    <slot item={items[0]} />
+  {/each}
+</Frame>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let items: ListGroupItemType[] | string[] = [];
+@prop export let active: boolean = false;
+@prop export let defaultClass: string = 'divide-y divide-neutral-200 dark:divide-neutral-600';
+-->

package/dist/elements/list-group/Listgroup.svelte.d.ts

@@ -0,0 +1,59 @@
+import type { ListGroupItemType } 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: ListGroupItemType[] | string[] = [];
+ * @prop export let active: boolean = false;
+ * @prop export let defaultClass: string = 'divide-y divide-neutral-200 dark:divide-neutral-600';
+ */
+declare const Listgroup: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<import("svelte/elements").HTMLAnchorAttributes & {
+    tag?: string;
+    color?: "primary" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink" | "dark" | "default" | "none" | "form" | "light" | "neutral" | "dropdown" | "navbar" | "navbarUl";
+    rounded?: boolean;
+    border?: boolean;
+    shadow?: boolean;
+    transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
+    params?: object;
+    node?: HTMLElement | undefined;
+    use?: import("svelte/action").Action<HTMLElement, any>;
+    options?: object;
+    class?: string;
+    role?: string;
+} & {
+    children?: any;
+} & {
+    items?: ListGroupItemType[] | string[];
+    active?: boolean;
+}, {
+    default: {
+        item: string | ListGroupItemType;
+    };
+}>, {
+    click: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        item: string | ListGroupItemType;
+    };
+}, {}, string>;
+type Listgroup = InstanceType<typeof Listgroup>;
+export default Listgroup;

package/dist/elements/list-group/ListgroupItem.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+
+  export let active: boolean = getContext('active');
+  export let current: boolean = false;
+  export let disabled: boolean = false;
+  export let href: string = '';
+  export let currentClass: string = 'text-white bg-primary-700 dark:text-white dark:bg-neutral-800';
+  export let normalClass: string = '';
+  export let disabledClass: string = 'text-neutral-900 bg-neutral-100 dark:bg-neutral-600 dark:text-neutral-400';
+  export let focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-neutral-500 dark:focus:text-white';
+  export let hoverClass: string = 'hover:bg-neutral-100 hover:text-primary-700 dark:hover:bg-neutral-600 dark:hover:text-white';
+  export let itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
+
+  const states = {
+    current: currentClass,
+    normal: normalClass,
+    disabled: disabledClass
+  };
+
+  let state: 'disabled' | 'current' | 'normal';
+  $: state = disabled ? 'disabled' : current ? 'current' : 'normal';
+
+  let itemClass: string;
+  $: itemClass = twMerge(itemDefaultClass, states[state], active && state === 'disabled' && 'cursor-not-allowed', active && state === 'normal' && hoverClass, active && state === 'normal' && focusClass, $$props.class);
+</script>
+
+{#if !active}
+  <li class={itemClass}>
+    <slot item={$$props} />
+  </li>
+{:else if href}
+  <a {href} class="block {itemClass}" aria-current={current} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
+    <slot item={$$props} />
+  </a>
+{:else}
+  <button type="button" class="flex items-center text-left {itemClass}" {disabled} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover aria-current={current}>
+    <slot item={$$props} />
+  </button>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let active: boolean = getContext('active');
+@prop export let current: boolean = false;
+@prop export let disabled: boolean = false;
+@prop export let href: string = '';
+@prop export let currentClass: string = 'text-white bg-primary-700 dark:text-white dark:bg-neutral-800';
+@prop export let normalClass: string = '';
+@prop export let disabledClass: string = 'text-neutral-900 bg-neutral-100 dark:bg-neutral-600 dark:text-neutral-400';
+@prop export let focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-neutral-500 dark:focus:text-white';
+@prop export let hoverClass: string = 'hover:bg-neutral-100 hover:text-primary-700 dark:hover:bg-neutral-600 dark:hover:text-white';
+@prop export let itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
+-->

package/dist/elements/list-group/ListgroupItem.svelte.d.ts

@@ -0,0 +1,68 @@
+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 active: boolean = getContext('active');
+ * @prop export let current: boolean = false;
+ * @prop export let disabled: boolean = false;
+ * @prop export let href: string = '';
+ * @prop export let currentClass: string = 'text-white bg-primary-700 dark:text-white dark:bg-neutral-800';
+ * @prop export let normalClass: string = '';
+ * @prop export let disabledClass: string = 'text-neutral-900 bg-neutral-100 dark:bg-neutral-600 dark:text-neutral-400';
+ * @prop export let focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-neutral-500 dark:focus:text-white';
+ * @prop export let hoverClass: string = 'hover:bg-neutral-100 hover:text-primary-700 dark:hover:bg-neutral-600 dark:hover:text-white';
+ * @prop export let itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
+ */
+declare const ListgroupItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    active?: boolean | undefined;
+    current?: boolean | undefined;
+    disabled?: boolean | undefined;
+    href?: string | undefined;
+    currentClass?: string | undefined;
+    normalClass?: string | undefined;
+    disabledClass?: string | undefined;
+    focusClass?: string | undefined;
+    hoverClass?: string | undefined;
+    itemDefaultClass?: string | undefined;
+}, {
+    default: {
+        item: SvelteAllProps;
+    };
+}>, {
+    blur: FocusEvent;
+    change: Event;
+    click: MouseEvent;
+    focus: FocusEvent;
+    keydown: KeyboardEvent;
+    keypress: KeyboardEvent;
+    keyup: KeyboardEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    mouseover: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        item: SvelteAllProps;
+    };
+}, {}, string>;
+type ListgroupItem = InstanceType<typeof ListgroupItem>;
+export default ListgroupItem;

package/dist/elements/marquee/Marquee.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+  export let speed: number = 1;
+  export let hoverSpeed: number = 1;
+  export let shadow: boolean = false;
+
+  let offset: number = 0;
+  let isHovering: boolean = false;
+  let marquee: HTMLElement;
+  let intervalId: NodeJS.Timer;
+
+  let shadowClass: string = `after:content-[''] after:absolute after:block after:z-10 after:h-full before:content-[''] before:absolute 
+    before:block before:z-10 before:h-full before:right-0 after:shadow-[10px_0_50px_65px_rgba(256,256,256,1)] 
+    before:shadow-[-10px_0_50px_65px_rgba(256,256,256,1)] dark:after:shadow-[10px_0_50px_65px_rgba(16,24,39,1)]
+    dark:before:shadow-[-10px_0_50px_65px_rgba(16,24,39,1)]`;
+
+  let divCls: string = twMerge("relative flex overflow-hidden w-[100%]", shadow ? shadowClass : '', $$props.class)
+
+  onMount(() => {
+    intervalId = setInterval(() => {
+      if (marquee && Math.abs(offset) >= marquee.offsetWidth) {
+        offset = 0;
+      } else {
+        if (isHovering) offset -= hoverSpeed;
+        else offset -= speed;
+      }
+    }, 5);
+  });
+
+  onDestroy(() => intervalId);
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<div
+  class={divCls}
+  role="banner"
+  on:mouseover={() => (isHovering = true)}
+  on:mouseleave={() => (isHovering = false)}>
+  <div
+    class="flex justify-around items-center min-w-[100%]"
+    style="transform: {`translateX(${offset}px)`}"
+    bind:this={marquee}>
+    <slot />
+  </div>
+  <div class="flex justify-around items-center min-w-[100%]" style="transform: {`translateX(${offset}px)`}">
+    <slot />
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let speed: number = 1;
+@prop export let hoverSpeed: number = 1;
+@prop export let shadow: boolean = false;
+-->

package/dist/elements/marquee/Marquee.svelte.d.ts

@@ -0,0 +1,39 @@
+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 speed: number = 1;
+ * @prop export let hoverSpeed: number = 1;
+ * @prop export let shadow: boolean = false;
+ */
+declare const Marquee: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    speed?: number | undefined;
+    hoverSpeed?: number | undefined;
+    shadow?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Marquee = InstanceType<typeof Marquee>;
+export default Marquee;

package/dist/elements/mega-menu/MegaMenu.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import type { LinkType } from '../types';
+  import Popper from '../utils/Popper.svelte';
+  import type { ComponentProps } from 'svelte';
+
+  interface $$Props extends ComponentProps<Popper> {
+    items: LinkTypeLike[];
+    full: boolean;
+    ulClass: string;
+  }
+
+  export let items: LinkTypeLike[] = [];
+  export let full: boolean = false;
+  export let open: boolean = false;
+  export let ulClass: string = 'grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max';
+
+  interface LinkTypeLike extends LinkType {
+    [propName: string]: any;
+  }
+
+  let wrapperClass: string;
+  $: wrapperClass = twMerge(full && 'border-y w-full', $$props.class);
+
+  let ulCls: string;
+  $: ulCls = twMerge(ulClass, full && $$slots.extra ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-3', 'text-sm font-medium', full && $$slots.extra && 'md:w-2/3', $$props.classUl);
+</script>
+
+<Popper color={full ? 'default' : 'dropdown'} border={!full} rounded={!full} activeContent arrow={false} trigger="click" placement="bottom" yOnly={full} {...$$restProps} class={wrapperClass} on:show bind:open>
+  <div class="flex flex-col md:flex-row p-4 max-w-screen-md justify-center mx-auto mt-2">
+    <ul class={ulCls}>
+      {#each items as item, index}
+        <li>
+          <slot {item} {index} />
+        </li>
+      {:else}
+        <slot item={items[0]} />
+      {/each}
+    </ul>
+    {#if full && $$slots.extra}<div class="md:w-1/3 mt-4 md:mt-0"><slot name="extra" /></div>{/if}
+  </div>
+</Popper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let items: LinkTypeLike[] = [];
+@prop export let full: boolean = false;
+@prop export let open: boolean = false;
+@prop export let ulClass: string = 'grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max';
+-->

package/dist/elements/mega-menu/MegaMenu.svelte.d.ts

@@ -0,0 +1,82 @@
+import type { LinkType } 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: LinkTypeLike[] = [];
+ * @prop export let full: boolean = false;
+ * @prop export let open: boolean = false;
+ * @prop export let ulClass: string = 'grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max';
+ */
+declare const MegaMenu: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<import("svelte/elements").HTMLAnchorAttributes & {
+    tag?: string;
+    color?: "primary" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink" | "dark" | "default" | "none" | "form" | "light" | "neutral" | "dropdown" | "navbar" | "navbarUl";
+    rounded?: boolean;
+    border?: boolean;
+    shadow?: boolean;
+    transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
+    params?: object;
+    node?: HTMLElement | undefined;
+    use?: import("svelte/action").Action<HTMLElement, any>;
+    options?: object;
+    class?: string;
+    role?: string;
+} & {
+    children?: any;
+} & {
+    activeContent?: boolean;
+    arrow?: boolean;
+    offset?: number;
+    placement?: import("@floating-ui/utils").Placement;
+    trigger?: "hover" | "click";
+    triggeredBy?: string;
+    reference?: string;
+    strategy?: "absolute" | "fixed";
+    open?: boolean;
+    yOnly?: boolean;
+} & {
+    children?: any;
+} & {
+    items: (LinkType & {
+        [propName: string]: any;
+    })[];
+    full: boolean;
+    ulClass: string;
+}, {
+    default: {
+        item: LinkType & {
+            [propName: string]: any;
+        };
+    };
+    extra: {};
+}>, {
+    show: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        item: LinkType & {
+            [propName: string]: any;
+        };
+    };
+    extra: {};
+}, {}, string>;
+type MegaMenu = InstanceType<typeof MegaMenu>;
+export default MegaMenu;