odj-svelte-ui 0.1.0

package/dist/elements/alert/Alert.svelte.d.ts

@@ -0,0 +1,66 @@
+import type { Dismissable } 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 dismissable: boolean = false;
+ * @prop export let defaultClass: string = 'p-4 gap-3 text-sm';
+ */
+declare const Alert: $$__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, {
+    icon: {};
+    default: {};
+    'close-button': {
+        close: (e: MouseEvent) => void;
+    };
+}>, {
+    click: MouseEvent;
+    change: CustomEvent<any>;
+    keydown: CustomEvent<any>;
+    keyup: CustomEvent<any>;
+    focus: CustomEvent<any>;
+    blur: CustomEvent<any>;
+    mouseenter: CustomEvent<any>;
+    mouseleave: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+    default: {};
+    'close-button': {
+        close: (e: MouseEvent) => void;
+    };
+}, {}, string>;
+type Alert = InstanceType<typeof Alert>;
+export default Alert;

package/dist/elements/avatar/Avatar.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import AvatarPlaceholder from './Placeholder.svelte';
+  import Indicator from '../indicators/Indicator.svelte';
+
+  export let src: string = '';
+  export let href: string | undefined = undefined;
+  export let rounded: boolean = false;
+  export let border: boolean = false;
+  export let stacked: boolean = false;
+  export let dot: object | undefined = undefined;
+  export let alt: string = '';
+  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+
+  $: dot = dot && { placement: 'top-right', color: 'neutral', size: 'lg', ...dot };
+
+  const sizes = {
+    xs: 'w-6 h-6',
+    sm: 'w-8 h-8',
+    md: 'w-10 h-10',
+    lg: 'w-20 h-20',
+    xl: 'w-28 h-28 md:w-36 md:h-36'
+  };
+
+  let avatarClass: string;
+  $: avatarClass = twMerge(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ring-2 ring-neutral-50 dark:ring-neutral-800', sizes[size], stacked && 'border-2 -ml-4 border-white dark:border-neutral-800', 'bg-neutral-50 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-300', $$props.class);
+</script>
+
+{#if !src || !!href || $$slots.default || dot}
+  <svelte:element this={href ? 'a' : 'div'} {href} {...$$restProps} class="relative flex justify-center items-center {avatarClass}">
+    {#if src}
+      <img {alt} {src} class={rounded ? 'rounded' : 'rounded-full'} />
+    {:else}
+      <slot><AvatarPlaceholder {rounded} {size} {border} class={twMerge($$props.classPlaceholder)} /></slot>
+    {/if}
+    {#if dot}
+      <Indicator border offset={rounded} {...dot} />
+    {/if}
+  </svelte:element>
+{:else}
+  <img {alt} {src} {...$$restProps} class={avatarClass} />
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let src: string = '';
+@prop export let href: string | undefined = undefined;
+@prop export let rounded: boolean = false;
+@prop export let border: boolean = false;
+@prop export let stacked: boolean = false;
+@prop export let dot: object | undefined = undefined;
+@prop export let alt: string = '';
+@prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+-->

package/dist/elements/avatar/Avatar.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;
+}
+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 src: string = '';
+ * @prop export let href: string | undefined = undefined;
+ * @prop export let rounded: boolean = false;
+ * @prop export let border: boolean = false;
+ * @prop export let stacked: boolean = false;
+ * @prop export let dot: object | undefined = undefined;
+ * @prop export let alt: string = '';
+ * @prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+ */
+declare const Avatar: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    src?: string | undefined;
+    href?: string | undefined | undefined;
+    rounded?: boolean | undefined;
+    border?: boolean | undefined;
+    stacked?: boolean | undefined;
+    dot?: object | undefined | undefined;
+    alt?: string | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Avatar = InstanceType<typeof Avatar>;
+export default Avatar;

package/dist/elements/avatar/Placeholder.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let rounded: boolean = false;
+  export let border: boolean = false;
+  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+
+  const sizes = {
+    xs: 'w-6 h-6',
+    sm: 'w-8 h-8',
+    md: 'w-10 h-10',
+    lg: 'w-20 h-20',
+    xl: 'w-28 h-28 md:w-36 md:h-36'
+  };
+
+  const borderedSizes = {
+    xs: 'w-6 h-6',
+    sm: 'w-8 h-8',
+    md: 'w-10 h-10',
+    lg: 'w-14 h-14',
+    xl: 'w-22 h-22 md:w-26 md:h-26'
+  };
+
+  let svgClass: string = twMerge('text-neutral-400 bg-neutral-100 dark:bg-neutral-600', rounded ? 'rounded' : 'rounded-full', border ? borderedSizes[size] : sizes[size], $$props.class);
+</script>
+
+<svg class={svgClass} fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let rounded: boolean = false;
+@prop export let border: boolean = false;
+@prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+-->

package/dist/elements/avatar/Placeholder.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 rounded: boolean = false;
+ * @prop export let border: boolean = false;
+ * @prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+ */
+declare const Placeholder: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    rounded?: boolean | undefined;
+    border?: boolean | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Placeholder = InstanceType<typeof Placeholder>;
+export default Placeholder;

package/dist/elements/badge/Badge.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import { createEventDispatcher, type ComponentProps } from 'svelte';
+  import { twMerge, twJoin } from 'tailwind-merge';
+  import CloseButton from '../utils/CloseButton.svelte';
+  import { fade } from 'svelte/transition';
+  import Frame from '../utils/Frame.svelte';
+  import type { Dismissable } from '../types';
+
+  interface $$Props extends Omit<ComponentProps<Frame>, 'color'>, Dismissable {
+    color?: 'primary' | 'blue' | 'dark' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' | 'none';
+    large?: boolean;
+  }
+
+  export let color: 'primary' | 'blue' | 'dark' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' | 'none' = 'primary';
+  export let large: boolean = false;
+  export let dismissable: boolean = false;
+
+  const colors = {
+    primary: 'bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300',
+    blue: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
+    dark: 'bg-neutral-100 text-neutral-800 dark:bg-neutral-700 dark:text-neutral-300',
+    neutral: 'bg-neutral-100 text-neutral-800 dark:bg-neutral-700 dark:text-neutral-300',
+    red: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
+    green: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
+    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
+    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
+    purple: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
+    pink: 'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300',
+    none: ''
+  };
+
+  const borderedColors = {
+    primary: 'bg-primary-100 text-primary-800 dark:bg-neutral-700 dark:text-primary-400 border-primary-400 dark:border-primary-400',
+    blue: 'bg-blue-100 text-blue-800 dark:bg-neutral-700 dark:text-blue-400 border-blue-400 dark:border-blue-400',
+    dark: 'bg-neutral-100 text-neutral-800 dark:bg-neutral-700 dark:text-neutral-400 border-neutral-500 dark:border-neutral-500',
+    red: 'bg-red-100 text-red-800 dark:bg-neutral-700 dark:text-red-400 border-red-400 dark:border-red-400',
+    green: 'bg-green-100 text-green-800 dark:bg-neutral-700 dark:text-green-400 border-green-400 dark:border-green-400',
+    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-neutral-700 dark:text-yellow-300 border-yellow-300 dark:border-yellow-300',
+    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-neutral-700 dark:text-indigo-400 border-indigo-400 dark:border-indigo-400',
+    purple: 'bg-purple-100 text-purple-800 dark:bg-neutral-700 dark:text-purple-400 border-purple-400 dark:border-purple-400',
+    pink: 'bg-pink-100 text-pink-800 dark:bg-neutral-700 dark:text-pink-400 border-pink-400 dark:border-pink-400',
+    none: ''
+  };
+
+  const hoverColors = {
+    primary: 'hover:bg-primary-200',
+    blue: 'hover:bg-blue-200',
+    dark: 'hover:bg-neutral-200',
+    red: 'hover:bg-red-200',
+    green: 'hover:bg-green-200',
+    yellow: 'hover:bg-yellow-200',
+    indigo: 'hover:bg-indigo-200',
+    purple: 'hover:bg-purple-200',
+    pink: 'hover:bg-pink-200',
+    none: ''
+  };
+
+  const baseClass: string = 'font-medium inline-flex items-center justify-center px-2.5 py-0.5';
+
+  let badgeClass: string;
+  $: badgeClass = twMerge(baseClass, large ? 'text-sm' : 'text-xs', $$restProps.border ? `border ${borderedColors[color]}` : colors[color], $$restProps.href && hoverColors[color], $$restProps.rounded ? 'rounded-full' : 'rounded', $$props.class);
+
+  // only overwrite necessary colors (<CloseButton> v0.29.10)
+  const closeBtnColors = {
+    primary: 'text-primary-400 hover:text-primary-900 dark:hover:bg-primary-800 dark:hover:text-primary-300',
+    blue: 'text-blue-400 hover:text-blue-900 dark:hover:bg-blue-800 dark:hover:text-blue-300',
+    dark: 'text-neutral-400 hover:text-neutral-400 hover:bg-neutral-600 dark:hover:text-neutral-300',
+    red: 'text-red-400 hover:text-red-900 dark:hover:bg-red-800 dark:hover:text-red-300',
+    green: 'text-green-400 hover:text-green-900 dark:hover:bg-green-800 dark:hover:text-green-300',
+    yellow: 'text-yellow-400 hover:text-yellow-900 dark:hover:bg-yellow-800 dark:hover:text-yellow-300',
+    indigo: 'text-indigo-400 hover:text-indigo-900 dark:hover:bg-indigo-800 dark:hover:text-indigo-300',
+    purple: 'text-purple-400 hover:text-purple-900 dark:hover:bg-purple-800 dark:hover:text-purple-300',
+    pink: 'text-pink-400 hover:text-pink-900 dark:hover:bg-pink-800 dark:hover:text-pink-300',
+    none: ''
+  };
+
+  $: {
+    if (dismissable) $$restProps.transition = $$restProps.transition ?? fade;
+  }
+
+  let open = true;
+  const dispatch = createEventDispatcher();
+  $: dispatch(open ? 'open' : 'close');
+  const close = (e: MouseEvent) => {
+    e.stopPropagation();
+    open = false;
+  };
+</script>
+
+{#if open}
+  <Frame {...$$restProps} class={badgeClass}>
+    <slot />
+    {#if dismissable}
+      <slot name="close-button" {close}>
+        <CloseButton {color} on:click={close} size={large ? 'sm' : 'xs'} name="Remove badge" class="ml-1.5 -mr-1.5" />
+      </slot>
+    {/if}
+  </Frame>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let color: 'primary' | 'blue' | 'dark' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' | 'none' = 'primary';
+@prop export let large: boolean = false;
+@prop export let dismissable: boolean = false;
+-->

package/dist/elements/badge/Badge.svelte.d.ts

@@ -0,0 +1,59 @@
+import type { Dismissable } 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 color: 'primary' | 'blue' | 'dark' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' | 'none' = 'primary';
+ * @prop export let large: boolean = false;
+ * @prop export let dismissable: boolean = false;
+ */
+declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Omit<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;
+}, "color"> & Dismissable & {
+    color?: "primary" | "blue" | "dark" | "red" | "green" | "yellow" | "indigo" | "purple" | "pink" | "none";
+    large?: boolean;
+}, {
+    default: {};
+    'close-button': {
+        close: (e: MouseEvent) => void;
+    };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    'close-button': {
+        close: (e: MouseEvent) => void;
+    };
+}, {}, string>;
+type Badge = InstanceType<typeof Badge>;
+export default Badge;

package/dist/elements/banner/Banner.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import CloseButton from '../utils/CloseButton.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  export let position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'sticky';
+  export let dismissable: boolean = true;
+  export let bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' = 'default';
+  export let divClass: string = 'z-10 flex justify-between p-4 dark:bg-neutral-700 dark:border-neutral-600';
+  export let innerClass: string = 'flex';
+
+  let open = true;
+  const dispatch = createEventDispatcher();
+  $: dispatch(open ? 'open' : 'close');
+
+  const divClasses = {
+    default: 'top-0 left-0 w-full border-b border-neutral-200 bg-neutral-50',
+    bottom: 'bottom-0 left-0 w-full border-t border-neutral-200 bg-neutral-50',
+    cta: 'flex-col md:flex-row  w-[calc(100%-2rem)] -translate-x-1/2 bg-white border border-neutral-100 rounded-lg shadow-sm lg:max-w-7xl left-1/2 top-6',
+    signup: 'top-0 left-0 w-full border-b border-neutral-200 bg-neutral-50',
+    info: 'top-0 left-0 flex-col w-full border-b border-neutral-200 md:flex-row bg-neutral-50'
+  };
+
+  const insideDivClasses = {
+    default: 'items-center mx-auto',
+    bottom: 'items-center mx-auto',
+    cta: 'flex-col items-start mb-3 mr-4 md:items-center md:flex-row md:mb-0',
+    signup: 'items-center flex-shrink-0 w-full mx-auto sm:w-auto',
+    info: 'items-center flex-shrink-0'
+  };
+
+  $: divClass = twMerge(position, divClass, divClasses[bannerType], $$props.classDiv);
+  $: div2Class = twMerge(innerClass, insideDivClasses[bannerType], $$props.classInner);
+
+  function close(e: MouseEvent) {
+    e.preventDefault();
+    open = false;
+  }
+</script>
+
+{#if open}
+  <div tabindex="-1" class={divClass} {...$$restProps}>
+    <slot name="header" />
+    <div class={div2Class}>
+      <slot />
+    </div>
+    {#if dismissable}
+      <div class="flex items-center">
+        <CloseButton class="-mx-1.5 -my-1.5" color={$$restProps.color} on:click={close} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave />
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'sticky';
+@prop export let dismissable: boolean = true;
+@prop export let bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' = 'default';
+@prop export let divClass: string = 'z-10 flex justify-between p-4 dark:bg-neutral-700 dark:border-neutral-600';
+@prop export let innerClass: string = 'flex';
+-->

package/dist/elements/banner/Banner.svelte.d.ts

@@ -0,0 +1,54 @@
+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 position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'sticky';
+ * @prop export let dismissable: boolean = true;
+ * @prop export let bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' = 'default';
+ * @prop export let divClass: string = 'z-10 flex justify-between p-4 dark:bg-neutral-700 dark:border-neutral-600';
+ * @prop export let innerClass: string = 'flex';
+ */
+declare const Banner: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
+    dismissable?: boolean | undefined;
+    bannerType?: "default" | "bottom" | "cta" | "signup" | "info" | undefined;
+    divClass?: string | undefined;
+    innerClass?: string | undefined;
+}, {
+    header: {};
+    default: {};
+}>, {
+    click: MouseEvent;
+    change: CustomEvent<any>;
+    keydown: CustomEvent<any>;
+    keyup: CustomEvent<any>;
+    focus: CustomEvent<any>;
+    blur: CustomEvent<any>;
+    mouseenter: CustomEvent<any>;
+    mouseleave: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+}, {}, string>;
+type Banner = InstanceType<typeof Banner>;
+export default Banner;

package/dist/elements/bottom-navigation/BottomNav.svelte

@@ -0,0 +1,76 @@
+<script lang="ts" context="module">
+  export type BottomNavType = {
+    activeClass: string;
+  };
+</script>
+
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { twMerge } from 'tailwind-merge';
+
+  export let activeUrl: string = '';
+  export let position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'fixed';
+  export let navType: 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' = 'default';
+  export let outerClass: string = 'w-full z-50 border-neutral-200 dark:bg-neutral-700 dark:border-neutral-600';
+  export let innerClass: string = 'grid h-full max-w-lg mx-auto';
+  export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
+  // export let activeUrl: string = '';
+  let activeCls = '';
+
+  const activeUrlStore = writable('');
+
+  activeCls = twMerge(activeClass, $$props.classActive);
+  setContext('navType', navType);
+  setContext<BottomNavType>('bottomNavType', { activeClass: activeCls });
+
+  $: {
+    activeUrlStore.set(activeUrl);
+  }
+  setContext('activeUrl', activeUrlStore);
+
+  const outerDivClasses = {
+    default: 'bottom-0 left-0 h-16 bg-white border-t',
+    border: 'bottom-0 left-0 h-16 bg-white border-t',
+    application: 'h-16 max-w-lg -translate-x-1/2 bg-white border rounded-full bottom-4 left-1/2',
+    pagination: 'bottom-0 h-16 -translate-x-1/2 bg-white border-t left-1/2',
+    group: 'bottom-0 -translate-x-1/2 bg-white border-t left-1/2',
+    card: 'bottom-0 left-0 h-16 bg-white border-t',
+    meeting: 'bottom-0 left-0 grid h-16 grid-cols-1 px-8 bg-white border-t md:grid-cols-3',
+    video: 'bottom-0 left-0 grid h-24 grid-cols-1 px-8 bg-white border-t md:grid-cols-3'
+  };
+
+  const innerDivClasses = {
+    default: '',
+    border: '',
+    application: '',
+    pagination: '',
+    group: '',
+    card: '',
+    meeting: 'flex items-center justify-center mx-auto',
+    video: 'flex items-center w-full'
+  };
+
+  $: outerCls = twMerge(position, outerClass, outerDivClasses[navType], $$props.classOuter);
+  $: innerCls = twMerge(innerClass, innerDivClasses[navType], $$props.classInner);
+</script>
+
+<div {...$$restProps} class={outerCls}>
+  <slot name="header" />
+  <div class={innerCls}>
+    <slot />
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let activeUrl: string = '';
+@prop export let position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'fixed';
+@prop export let navType: 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' = 'default';
+@prop export let outerClass: string = 'w-full z-50 border-neutral-200 dark:bg-neutral-700 dark:border-neutral-600';
+@prop export let innerClass: string = 'grid h-full max-w-lg mx-auto';
+@prop export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
+@prop export let activeUrl: string = '';
+-->

package/dist/elements/bottom-navigation/BottomNav.svelte.d.ts

@@ -0,0 +1,51 @@
+export type BottomNavType = {
+    activeClass: 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: 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 position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'fixed';
+ * @prop export let navType: 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' = 'default';
+ * @prop export let outerClass: string = 'w-full z-50 border-neutral-200 dark:bg-neutral-700 dark:border-neutral-600';
+ * @prop export let innerClass: string = 'grid h-full max-w-lg mx-auto';
+ * @prop export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
+ * @prop export let activeUrl: string = '';
+ */
+declare const BottomNav: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    activeUrl?: string | undefined;
+    position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
+    navType?: "default" | "border" | "application" | "pagination" | "group" | "card" | "meeting" | "video" | undefined;
+    outerClass?: string | undefined;
+    innerClass?: string | undefined;
+    activeClass?: string | undefined;
+}, {
+    header: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+}, {}, string>;
+type BottomNav = InstanceType<typeof BottomNav>;
+export default BottomNav;