odj-svelte-ui 0.1.0

package/dist/elements/modal/Modal.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import Frame from '../utils/Frame.svelte';
+  import { createEventDispatcher, type ComponentProps } from 'svelte';
+  import CloseButton from '../utils/CloseButton.svelte';
+  import focusTrap from '../utils/focusTrap';
+  import type { Dismissable, SizeType } from '../types';
+  import type { ModalPlacementType } from '../types';
+
+  // propagate props type from underlying Frame
+  interface $$Props extends ComponentProps<Frame>, Dismissable {
+    open?: boolean;
+    title?: string;
+    size?: SizeType;
+    placement?: 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+    autoclose?: boolean;
+    backdropClass?: string;
+    defaultClass?: string;
+    outsideclose?: boolean;
+  }
+
+  export let open: boolean = false;
+  export let title: string = '';
+  export let size: SizeType = 'md';
+  export let placement: ModalPlacementType = 'center';
+  export let autoclose: boolean = false;
+  export let dismissable: boolean = true;
+  export let backdropClass: string = 'fixed inset-0 z-40 bg-neutral-900 bg-opacity-50 dark:bg-opacity-80';
+  export let defaultClass: string = 'relative flex flex-col mx-auto';
+  export let outsideclose: boolean = false;
+  export let dialogClass: string = 'fixed top-0 left-0 right-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
+
+  const dispatch = createEventDispatcher();
+  $: dispatch(open ? 'open' : 'close');
+
+  function prepareFocus(node: HTMLElement) {
+    const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);
+    let n: Node | null;
+    while ((n = walker.nextNode())) {
+      if (n instanceof HTMLElement) {
+        const el = n as HTMLElement;
+        const [x, y] = isScrollable(el);
+        if (x || y) el.tabIndex = 0;
+      }
+    }
+    node.focus();
+  }
+
+  const getPlacementClasses = () => {
+    switch (placement) {
+      // top
+      case 'top-left':
+        return ['justify-start', 'items-start'];
+      case 'top-center':
+        return ['justify-center', 'items-start'];
+      case 'top-right':
+        return ['justify-end', 'items-start'];
+
+      // center
+      case 'center-left':
+        return ['justify-start', 'items-center'];
+      case 'center':
+        return ['justify-center', 'items-center'];
+      case 'center-right':
+        return ['justify-end', 'items-center'];
+
+      // bottom
+      case 'bottom-left':
+        return ['justify-start', 'items-end'];
+      case 'bottom-center':
+        return ['justify-center', 'items-end'];
+      case 'bottom-right':
+        return ['justify-end', 'items-end'];
+
+      default:
+        return ['justify-center', 'items-center'];
+    }
+  };
+
+  const sizes = {
+    xs: 'max-w-md',
+    sm: 'max-w-lg',
+    md: 'max-w-2xl',
+    lg: 'max-w-4xl',
+    xl: 'max-w-7xl'
+  };
+
+  const onAutoClose = (e: MouseEvent) => {
+    const target: Element = e.target as Element;
+    if (autoclose && target?.tagName === 'BUTTON') hide(e); // close on any button click
+    if (outsideclose && target === e.currentTarget) hide(e); // close on click outside
+  };
+
+  const hide = (e: Event) => {
+    e.preventDefault();
+    open = false;
+  };
+
+  let frameClass: string;
+  $: frameClass = twMerge(defaultClass, 'w-full', $$props.class);
+
+  const isScrollable = (e: HTMLElement): boolean[] => [e.scrollWidth > e.clientWidth && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowX) >= 0, e.scrollHeight > e.clientHeight && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowY) >= 0];
+
+  let backdropCls: string = twMerge(backdropClass, $$props.classBackdrop);
+
+  function handleKeys(e: KeyboardEvent) {
+    if (e.key === 'Escape' && dismissable) return hide(e);
+  }
+</script>
+
+{#if open}
+  <!-- backdrop -->
+  <div class={backdropCls} />
+  <!-- dialog -->
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <div on:keydown={handleKeys} on:wheel|preventDefault|nonpassive use:prepareFocus use:focusTrap on:click={onAutoClose} class={twMerge(dialogClass, $$props.classDialog, ...getPlacementClasses())} tabindex="-1" aria-modal="true" role="dialog">
+    <div class="flex relative {sizes[size]} w-full max-h-full">
+      <!-- Modal content -->
+      <Frame rounded shadow {...$$restProps} class={frameClass}>
+        <!-- Modal header -->
+        {#if $$slots.header || title}
+          <Frame color={$$restProps.color} class="flex justify-between items-center p-4 pb-0 rounded-t-lg">
+            <slot name="header">
+              <h3 class="text-xl font-medium {$$restProps.color ? '' : 'text-neutral-900 dark:text-white'}">
+                {title}
+              </h3>
+            </slot>
+            {#if dismissable}<CloseButton name="Close modal" on:click={hide} color={$$restProps.color} />{/if}
+          </Frame>
+        {:else if dismissable}
+          <CloseButton name="Close modal" class="absolute top-3 right-2.5" on:click={hide} color={$$restProps.color} />
+        {/if}
+        <!-- Modal body -->
+        <div class={twMerge('p-4 space-y-4 flex-1 overflow-y-auto overscroll-contain', $$props.bodyClass)} on:keydown|stopPropagation={handleKeys} role="document" on:wheel|stopPropagation|passive>
+          <slot />
+        </div>
+        <!-- Modal footer -->
+        {#if $$slots.footer}
+          <Frame color={$$restProps.color} class="flex items-center p-4 space-x-2 rounded-b border-t">
+            <slot name="footer" />
+          </Frame>
+        {/if}
+      </Frame>
+    </div>
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let open: boolean = false;
+@prop export let title: string = '';
+@prop export let size: SizeType = 'md';
+@prop export let placement: ModalPlacementType = 'center';
+@prop export let autoclose: boolean = false;
+@prop export let dismissable: boolean = true;
+@prop export let backdropClass: string = 'fixed inset-0 z-40 bg-neutral-900 bg-opacity-50 dark:bg-opacity-80';
+@prop export let defaultClass: string = 'relative flex flex-col mx-auto';
+@prop export let outsideclose: boolean = false;
+@prop export let dialogClass: string = 'fixed top-0 left-0 right-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
+-->

package/dist/elements/modal/Modal.svelte.d.ts

@@ -0,0 +1,72 @@
+import type { Dismissable, SizeType } 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 open: boolean = false;
+ * @prop export let title: string = '';
+ * @prop export let size: SizeType = 'md';
+ * @prop export let placement: ModalPlacementType = 'center';
+ * @prop export let autoclose: boolean = false;
+ * @prop export let dismissable: boolean = true;
+ * @prop export let backdropClass: string = 'fixed inset-0 z-40 bg-neutral-900 bg-opacity-50 dark:bg-opacity-80';
+ * @prop export let defaultClass: string = 'relative flex flex-col mx-auto';
+ * @prop export let outsideclose: boolean = false;
+ * @prop export let dialogClass: string = 'fixed top-0 left-0 right-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
+ */
+declare const Modal: $$__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;
+} & Dismissable & {
+    open?: boolean;
+    title?: string;
+    size?: SizeType;
+    placement?: "top-left" | "top-center" | "top-right" | "center-left" | "center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right";
+    autoclose?: boolean;
+    backdropClass?: string;
+    defaultClass?: string;
+    outsideclose?: boolean;
+}, {
+    header: {};
+    default: {};
+    footer: {};
+}>, {
+    wheel: WheelEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+    footer: {};
+}, {}, string>;
+type Modal = InstanceType<typeof Modal>;
+export default Modal;

package/dist/elements/navbar/Menu.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  export let size = '24';
+  export let color = 'currentColor';
+  export let variation: 'solid' | 'outline' = 'outline';
+  export let ariaLabel = 'bars 3';
+
+  let viewBox: string;
+  let svgpath: string;
+  let svgoutline = `<path stroke="${color}" stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path> `;
+  let svgsolid = `<path fill="${color}" clip-rule="evenodd" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"></path> `;
+  $: switch (variation) {
+    case 'outline':
+      svgpath = svgoutline;
+      viewBox = '0 0 24 24';
+      break;
+    case 'solid':
+      svgpath = svgsolid;
+      viewBox = '0 0 24 24';
+      break;
+    default:
+      svgpath = svgoutline;
+      viewBox = '0 0 24 24';
+  }
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" role="button" tabindex="0" width={size} height={size} class={$$props.class} {...$$restProps} aria-label={ariaLabel} fill="none" {viewBox} stroke-width="2" on:click>
+  {@html svgpath}
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let size = '24';
+@prop export let color = 'currentColor';
+@prop export let variation: 'solid' | 'outline' = 'outline';
+@prop export let ariaLabel = 'bars 3';
+-->

package/dist/elements/navbar/Menu.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 size = '24';
+ * @prop export let color = 'currentColor';
+ * @prop export let variation: 'solid' | 'outline' = 'outline';
+ * @prop export let ariaLabel = 'bars 3';
+ */
+declare const Menu: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    size?: string | undefined;
+    color?: string | undefined;
+    variation?: "solid" | "outline" | undefined;
+    ariaLabel?: string | undefined;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Menu = InstanceType<typeof Menu>;
+export default Menu;

package/dist/elements/navbar/NavBrand.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let href: string = '';
+</script>
+
+<a {href} {...$$restProps} class={twMerge('flex items-center', $$props.class)}>
+  <slot />
+</a>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let href: string = '';
+-->

package/dist/elements/navbar/NavBrand.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 href: string = '';
+ */
+declare const NavBrand: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    href?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type NavBrand = InstanceType<typeof NavBrand>;
+export default NavBrand;

package/dist/elements/navbar/NavHamburger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import ToolbarButton from '../toolbar/ToolbarButton.svelte';
+  import { twMerge } from 'tailwind-merge';
+  import Menu from './Menu.svelte';
+
+  export let btnClass: string = 'ml-3 md:hidden';
+  export let menuClass: string = 'h-6 w-6 shrink-0 md:hidden';
+</script>
+
+<ToolbarButton name="Open main menu" on:click {...$$restProps} class={twMerge(btnClass, $$props.class)}>
+  <Menu class={twMerge(menuClass, $$props.classMenu)} />
+</ToolbarButton>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let btnClass: string = 'ml-3 md:hidden';
+@prop export let menuClass: string = 'h-6 w-6 shrink-0';
+-->

package/dist/elements/navbar/NavHamburger.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 btnClass: string = 'ml-3 md:hidden';
+ * @prop export let menuClass: string = 'h-6 w-6 shrink-0';
+ */
+declare const NavHamburger: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    btnClass?: string | undefined;
+    menuClass?: string | undefined;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NavHamburger = InstanceType<typeof NavHamburger>;
+export default NavHamburger;

package/dist/elements/navbar/NavLi.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+  import type { NavbarLiType } from './NavUl.svelte';
+
+  export let href: string = '';
+  export let activeClass: string | undefined = undefined;
+  export let nonActiveClass: string | undefined = undefined;
+
+  const context = getContext<NavbarLiType>('navbarContext') ?? {};
+  const activeUrlStore = getContext('activeUrl') as { subscribe: (callback: (value: string) => void) => void };
+
+  let navUrl = '';
+  activeUrlStore.subscribe((value) => {
+    navUrl = value;
+  });
+
+  $: active = navUrl ? href === navUrl : false;
+
+  $: liClass = twMerge('block py-2 pr-4 pl-3 md:p-0 rounded md:border-0', active ? activeClass ?? context.activeClass : nonActiveClass ?? context.nonActiveClass, $$props.class);
+  // $: console.log()
+</script>
+
+<li>
+  <svelte:element this={href ? 'a' : 'div'} role={href ? undefined : 'link'} {href} {...$$restProps} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover class={liClass}>
+    <slot />
+  </svelte:element>
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let href: string = '';
+@prop export let activeClass: string | undefined = undefined;
+@prop export let nonActiveClass: string | undefined = undefined;
+-->

package/dist/elements/navbar/NavLi.svelte.d.ts

@@ -0,0 +1,50 @@
+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 href: string = '';
+ * @prop export let activeClass: string | undefined = undefined;
+ * @prop export let nonActiveClass: string | undefined = undefined;
+ */
+declare const NavLi: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    href?: string | undefined;
+    activeClass?: string | undefined | undefined;
+    nonActiveClass?: string | undefined | undefined;
+}, {
+    default: {};
+}>, {
+    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: {};
+}, {}, string>;
+type NavLi = InstanceType<typeof NavLi>;
+export default NavLi;

package/dist/elements/navbar/NavUl.svelte

@@ -0,0 +1,68 @@
+<script lang="ts" context="module">
+  export type NavbarLiType = {
+    activeClass: string;
+    nonActiveClass: string;
+  };
+</script>
+
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { slide, type SlideParams } from 'svelte/transition';
+  import { quintOut } from 'svelte/easing';
+  import Frame from '../utils/Frame.svelte';
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+
+  const activeUrlStore = writable('');
+
+  export let activeUrl: string = '';
+  export let divClass: string = 'w-full md:block md:w-auto';
+  export let ulClass: string = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
+  export let hidden: boolean = true;
+  export let slideParams: SlideParams = { delay: 250, duration: 500, easing: quintOut };
+  export let activeClass: string = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
+  export let nonActiveClass: string = 'text-neutral-700 hover:bg-neutral-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-neutral-400 md:dark:hover:text-white dark:hover:bg-neutral-700 dark:hover:text-white md:dark:hover:bg-transparent';
+
+  setContext<NavbarLiType>('navbarContext', { activeClass, nonActiveClass });
+  $: {
+    activeUrlStore.set(activeUrl);
+  }
+  setContext('activeUrl', activeUrlStore);
+
+  let _divClass: string;
+  $: _divClass = twMerge(divClass, $$props.class);
+
+  let _ulClass: string;
+  $: _ulClass = twMerge(
+    ulClass,
+    // 'divide-y md:divide-y-0 divide-neutral-100 dark:divide-neutral-700',
+    $$props.classUl
+  );
+</script>
+
+{#if !hidden}
+  <div {...$$restProps} class={_divClass} transition:slide={slideParams} on:click role="button" tabindex="0">
+    <Frame tag="ul" border rounded color="navbarUl" class={_ulClass}>
+      <slot />
+    </Frame>
+  </div>
+{:else}
+  <div {...$$restProps} class={_divClass} {hidden}>
+    <ul class={_ulClass}>
+      <slot />
+    </ul>
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let activeUrl: string = '';
+@prop export let divClass: string = 'w-full md:block md:w-auto';
+@prop export let ulClass: string = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
+@prop export let hidden: boolean = true;
+@prop export let slideParams: SlideParams = { delay: 250, duration: 500, easing: quintOut };
+@prop export let activeClass: string = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
+@prop export let nonActiveClass: string = 'text-neutral-700 hover:bg-neutral-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-neutral-400 md:dark:hover:text-white dark:hover:bg-neutral-700 dark:hover:text-white md:dark:hover:bg-transparent';
+-->

package/dist/elements/navbar/NavUl.svelte.d.ts

@@ -0,0 +1,54 @@
+export type NavbarLiType = {
+    activeClass: string;
+    nonActiveClass: string;
+};
+import { type SlideParams } 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;
+}
+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 activeUrl: string = '';
+ * @prop export let divClass: string = 'w-full md:block md:w-auto';
+ * @prop export let ulClass: string = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
+ * @prop export let hidden: boolean = true;
+ * @prop export let slideParams: SlideParams = { delay: 250, duration: 500, easing: quintOut };
+ * @prop export let activeClass: string = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
+ * @prop export let nonActiveClass: string = 'text-neutral-700 hover:bg-neutral-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-neutral-400 md:dark:hover:text-white dark:hover:bg-neutral-700 dark:hover:text-white md:dark:hover:bg-transparent';
+ */
+declare const NavUl: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    activeUrl?: string | undefined;
+    divClass?: string | undefined;
+    ulClass?: string | undefined;
+    hidden?: boolean | undefined;
+    slideParams?: SlideParams | undefined;
+    activeClass?: string | undefined;
+    nonActiveClass?: string | undefined;
+}, {
+    default: {};
+}>, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type NavUl = InstanceType<typeof NavUl>;
+export default NavUl;

package/dist/elements/navbar/Navbar.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import Frame from '../utils/Frame.svelte';
+  import { twMerge } from 'tailwind-merge';
+
+  // propagate props type from underlying Frame
+  interface $$Props extends ComponentProps<Frame> {
+    navClass?: string;
+    navDivClass?: string;
+    fluid?: boolean;
+    classNavDiv?: string;
+  }
+
+  export let navClass: string = 'px-2 sm:px-4 py-2.5 w-full';
+  export let navDivClass: string = 'mx-auto flex flex-wrap justify-between items-center ';
+  export let fluid: boolean = false;
+
+  $: {
+    // override default Frame value
+    $$restProps.color = $$restProps.color ?? 'navbar';
+  }
+
+  let hidden = true;
+  let toggle = () => {
+    hidden = !hidden;
+  };
+</script>
+
+<Frame tag="nav" {...$$restProps} class={twMerge(navClass, $$props.class)}>
+  <div class={twMerge(navDivClass, $$props.classNavDiv, (fluid && 'w-full') || 'container')}>
+    <slot {hidden} {toggle} />
+  </div>
+</Frame>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let navClass: string = 'px-2 sm:px-4 py-2.5 w-full';
+@prop export let navDivClass: string = 'mx-auto flex flex-wrap justify-between items-center ';
+@prop export let fluid: boolean = false;
+-->