flowbite-svelte 0.46.20 → 0.46.21

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

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 export type BottomNavType = {
     activeClass: string;
+    btnClass?: string;
+    spanClass?: string;
 };
 import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -15,12 +15,12 @@ activeUrlStore.subscribe((value) => {
 });
 $: active = navUrl && exact ? href === navUrl : navUrl ? navUrl.startsWith(href) : false;
 const btnClasses = {
-  default: "inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group",
-  border: "inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600",
+  default: "inline-flex flex-col items-center justify-center px-5 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 group",
+  border: "inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x text-gray-500 dark:text-gray-400  hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600",
   application: "",
-  pagination: "inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group",
-  group: "inline-flex flex-col items-center justify-center p-4 hover:bg-gray-50 dark:hover:bg-gray-800 group",
-  card: "inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group",
+  pagination: "inline-flex flex-col items-center justify-center px-5 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 group",
+  group: "inline-flex flex-col items-center justify-center p-4 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 group",
+  card: "inline-flex flex-col items-center justify-center px-5 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 group",
   meeting: "",
   video: ""
 };
@@ -57,7 +57,7 @@ $: spanCls = twMerge(spanClasses[navType], active && (activeClass ?? context.act
 @prop export let btnName: $$Props['btnName'] = '';
 @prop export let appBtnPosition: NonNullable<$$Props['appBtnPosition']> = 'middle';
 @prop export let activeClass: $$Props['activeClass'] = undefined;
-@prop export let href: NonNullable<$$Props['href']> = '';
+@prop export let href: string = '';
 @prop export let exact: $$Props['exact'] = true;
 @prop export let spanClass: $$Props['spanClass'] = '';
 -->

package/dist/bottom-navigation/BottomNavItem.svelte.d.ts

@@ -1,14 +1,23 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+    props: ({
         btnName?: string;
         appBtnPosition?: "left" | "middle" | "right";
         activeClass?: string;
-        href?: string;
         exact?: boolean;
         spanClass?: string;
-    };
+    } & Omit<HTMLAnchorAttributes, "type"> & {
+        href?: string | undefined;
+    }) | ({
+        btnName?: string;
+        appBtnPosition?: "left" | "middle" | "right";
+        activeClass?: string;
+        exact?: boolean;
+        spanClass?: string;
+    } & HTMLButtonAttributes & {
+        disabled?: HTMLButtonAttributes["disabled"];
+    });
     events: {
         click: MouseEvent;
         change: Event;
@@ -34,7 +43,7 @@ export type BottomNavItemSlots = typeof __propDef.slots;
  * @prop export let btnName: $$Props['btnName'] = '';
  * @prop export let appBtnPosition: NonNullable<$$Props['appBtnPosition']> = 'middle';
  * @prop export let activeClass: $$Props['activeClass'] = undefined;
- * @prop export let href: NonNullable<$$Props['href']> = '';
+ * @prop export let href: string = '';
  * @prop export let exact: $$Props['exact'] = true;
  * @prop export let spanClass: $$Props['spanClass'] = '';
  */

package/dist/buttons/Button.svelte

@@ -124,11 +124,11 @@ $: buttonClass = twMerge(
 @prop export let pill: $$Props['pill'] = false;
 @prop export let outline: $$Props['outline'] = false;
 @prop export let size: NonNullable<$$Props['size']> = group ? 'sm' : 'md';
-@prop export let href: $$Props['href'] = undefined;
-@prop export let type: $$Props['type'] = 'button';
+@prop export let href: string | undefined = undefined;
+@prop export let type: HTMLButtonAttributes['type'] = 'button';
 @prop export let color: NonNullable<$$Props['color']> = group ? (outline ? 'dark' : 'alternative') : 'primary';
 @prop export let shadow: $$Props['shadow'] = false;
 @prop export let tag: $$Props['tag'] = 'button';
 @prop export let checked: $$Props['checked'] = undefined;
-@prop export let disabled: $$Props['disabled'] = false;
+@prop export let disabled: HTMLButtonAttributes['disabled'] = false;
 -->

package/dist/buttons/Button.svelte.d.ts

@@ -1,21 +1,28 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLButtonAttributes, HTMLAttributes } from 'svelte/elements';
+import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+    props: ({
         pill?: boolean;
         outline?: boolean;
         size?: "xs" | "sm" | "md" | "lg" | "xl";
-        href?: string;
-        type?: HTMLButtonAttributes["type"];
         color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
         shadow?: boolean;
-        tag?: string;
+        tag?: "a" | "button";
         checked?: boolean;
-        disabled?: boolean;
-        target?: string;
-        rel?: string;
-        name?: string;
-    };
+    } & Omit<HTMLAnchorAttributes, "type"> & {
+        href?: string | undefined;
+    }) | ({
+        pill?: boolean;
+        outline?: boolean;
+        size?: "xs" | "sm" | "md" | "lg" | "xl";
+        color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
+        shadow?: boolean;
+        tag?: "a" | "button";
+        checked?: boolean;
+    } & HTMLButtonAttributes & {
+        disabled?: HTMLButtonAttributes["disabled"];
+        type?: HTMLButtonAttributes["type"];
+    });
     events: {
         click: MouseEvent;
         change: Event;
@@ -33,7 +40,8 @@ declare const __propDef: {
         default: {};
     };
 };
-export type ButtonProps = typeof __propDef.props;
+type ButtonProps_ = typeof __propDef.props;
+export { ButtonProps_ as ButtonProps };
 export type ButtonEvents = typeof __propDef.events;
 export type ButtonSlots = typeof __propDef.slots;
 /**
@@ -42,14 +50,13 @@ export type ButtonSlots = typeof __propDef.slots;
  * @prop export let pill: $$Props['pill'] = false;
  * @prop export let outline: $$Props['outline'] = false;
  * @prop export let size: NonNullable<$$Props['size']> = group ? 'sm' : 'md';
- * @prop export let href: $$Props['href'] = undefined;
- * @prop export let type: $$Props['type'] = 'button';
+ * @prop export let href: string | undefined = undefined;
+ * @prop export let type: HTMLButtonAttributes['type'] = 'button';
  * @prop export let color: NonNullable<$$Props['color']> = group ? (outline ? 'dark' : 'alternative') : 'primary';
  * @prop export let shadow: $$Props['shadow'] = false;
  * @prop export let tag: $$Props['tag'] = 'button';
  * @prop export let checked: $$Props['checked'] = undefined;
- * @prop export let disabled: $$Props['disabled'] = false;
+ * @prop export let disabled: HTMLButtonAttributes['disabled'] = false;
  */
-export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+export default class Button extends SvelteComponentTyped<ButtonProps_, ButtonEvents, ButtonSlots> {
 }
-export {};

package/dist/buttons/GradientButton.svelte

@@ -1,5 +1,6 @@
 <script>import { twMerge } from "tailwind-merge";
 import Button from "./Button.svelte";
+import ButtonProps from "./Button.svelte";
 import { getContext } from "svelte";
 const group = getContext("group");
 export let color = "blue";

package/dist/buttons/GradientButton.svelte.d.ts

@@ -1,20 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
+import Button from './Button.svelte';
 declare const __propDef: {
-    props: Omit<import("svelte/elements").HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
-        pill?: boolean;
-        outline?: boolean;
-        size?: "xs" | "sm" | "md" | "lg" | "xl";
-        href?: string;
-        type?: import("svelte/elements").HTMLButtonAttributes["type"];
-        color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
-        shadow?: boolean;
-        tag?: string;
-        checked?: boolean;
-        disabled?: boolean;
-        target?: string;
-        rel?: string;
-        name?: string;
-    }, "color"> & {
+    props: Omit<Button, "color"> & {
         color?: "red" | "green" | "purple" | "pink" | "blue" | "teal" | "cyan" | "lime" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow";
         shadow?: boolean;
     };

package/dist/forms/Checkbox.svelte

@@ -1,7 +1,6 @@
 <script>import { getContext } from "svelte";
 import { labelClass, inputClass } from "./Radio.svelte";
 import Label from "./Label.svelte";
-export let name = void 0;
 export let color = "primary";
 export let custom = false;
 export let inline = false;
@@ -17,13 +16,13 @@ let background = getContext("background");
 {#if choices.length > 0}
   {#each choices as {value, label}, i}
     <Label class={labelClass(inline, groupLabelClass)} show={$$slots.default} for={`checkbox-${i}`}>{ label }
-      <input {name} id={`checkbox-${i}`} type="checkbox" value={ value } bind:group {...$$restProps}  class={inputClass(custom, color, true, background, spacing, groupInputClass)} />
+      <input id={`checkbox-${i}`} type="checkbox" value={ value } bind:group {...$$restProps}  class={inputClass(custom, color, true, background, spacing, groupInputClass)} />
       <slot />
     </Label>
   {/each}
 {:else}
 <Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
-  <input {name} type="checkbox" bind:checked on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste on:change {value} {...$$restProps} class={inputClass(custom, color, true, background, spacing, $$slots.default || $$props.class)} />
+  <input type="checkbox" bind:checked on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste on:change {value} {...$$restProps} class={inputClass(custom, color, true, background, spacing, $$slots.default || $$props.class)} />
   <slot />
 </Label>
 {/if}

package/dist/forms/Checkbox.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HTMLInputAttributes } from 'svelte/elements';
 import type { FormColorType } from '../types';
 import type { CheckboxItem } from '../types';
 declare const __propDef: {
-    props: {
-        name?: string;
+    props: HTMLInputAttributes & {
         color?: FormColorType;
         custom?: boolean;
         inline?: boolean;

package/dist/forms/CheckboxButton.svelte

@@ -37,7 +37,7 @@ let buttonClass;
 $: buttonClass = twMerge(inline ? "inline-flex" : "flex", $$props.class);
 </script>
 
-<Button tag="label" {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
+<Button {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
   <input
     use:init={group}
     type="checkbox"

package/dist/forms/CheckboxButton.svelte.d.ts

@@ -1,21 +1,28 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ButtonColorType, SizeType } from '../types';
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+    props: (({
         pill?: boolean;
         outline?: boolean;
         size?: "xs" | "sm" | "md" | "lg" | "xl";
-        href?: string;
-        type?: import("svelte/elements").HTMLButtonAttributes["type"];
         color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
         shadow?: boolean;
-        tag?: string;
+        tag?: "a" | "button";
         checked?: boolean;
-        disabled?: boolean;
-        target?: string;
-        rel?: string;
-        name?: string;
-    } & {
+    } & Omit<import("svelte/elements").HTMLAnchorAttributes, "type"> & {
+        href?: string | undefined;
+    }) | ({
+        pill?: boolean;
+        outline?: boolean;
+        size?: "xs" | "sm" | "md" | "lg" | "xl";
+        color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
+        shadow?: boolean;
+        tag?: "a" | "button";
+        checked?: boolean;
+    } & import("svelte/elements").HTMLButtonAttributes & {
+        disabled?: import("svelte/elements").HTMLButtonAttributes["disabled"];
+        type?: import("svelte/elements").HTMLButtonAttributes["type"];
+    })) & {
         group: (string | number)[];
         value: string | number;
         checked?: boolean;

package/dist/forms/RadioButton.svelte

@@ -12,7 +12,7 @@ let buttonClass;
 $: buttonClass = twMerge(inline ? "inline-flex" : "flex", $$props.class);
 </script>
 
-<Button tag="label" checked={value === group} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
+<Button checked={value === group} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
   <input
     type="radio"
     bind:group

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

@@ -4,7 +4,7 @@ import type { SelectOptionType } from '../types';
 declare const __propDef: {
     props: Omit<HTMLSelectAttributes, "size"> & {
         items: SelectOptionType<any>[];
-        value: any;
+        value?: any;
         placeholder?: string;
         underline?: boolean;
         size?: "sm" | "md" | "lg";

package/dist/forms/Toggle.svelte.d.ts

@@ -1,8 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { FormColorType } from '../types';
 declare const __propDef: {
-    props: {
-        name?: string;
+    props: import("svelte/elements").HTMLInputAttributes & {
         color?: FormColorType;
         custom?: boolean;
         inline?: boolean;

package/dist/modal/Modal.svelte

@@ -133,23 +133,23 @@ $: footerCls = twMerge(footerClass, classFooter);
 @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 color: ComponentProps<Frame>['color'] = 'default';
-@prop export let placement: ModalPlacementType = 'center';
-@prop export let autoclose: boolean = false;
-@prop export let outsideclose: boolean = false;
-@prop export let dismissable: boolean = true;
-@prop export let backdropClass: string = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
-@prop export let classBackdrop: string | undefined = undefined;
-@prop export let dialogClass: string = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
-@prop export let classDialog: string | undefined = undefined;
-@prop export let defaultClass: string = 'relative flex flex-col mx-auto';
-@prop export let headerClass: string = 'flex justify-between items-center p-4 md:p-5 rounded-t-lg';
-@prop export let classHeader: string | undefined = undefined;
-@prop export let bodyClass: string = 'p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain';
-@prop export let classBody: string | undefined = undefined;
-@prop export let footerClass: string = 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg';
-@prop export let classFooter: string | undefined = undefined;
+@prop export let open: $$Props['open'] = false;
+@prop export let title: $$Props['title'] = '';
+@prop export let size: NonNullable<$$Props['size']> = 'md';
+@prop export let color: $$Props['color'] = 'default';
+@prop export let placement: NonNullable<$$Props['placement']> = 'center';
+@prop export let autoclose: $$Props['autoclose'] = false;
+@prop export let outsideclose: $$Props['outsideclose'] = false;
+@prop export let dismissable: $$Props['dismissable'] = true;
+@prop export let backdropClass: $$Props['backdropClass'] = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+@prop export let classBackdrop: $$Props['classBackdrop'] = undefined;
+@prop export let dialogClass: $$Props['dialogClass'] = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
+@prop export let classDialog: $$Props['classDialog'] = undefined;
+@prop export let defaultClass: $$Props['defaultClass'] = 'relative flex flex-col mx-auto';
+@prop export let headerClass: $$Props['headerClass'] = 'flex justify-between items-center p-4 md:p-5 rounded-t-lg';
+@prop export let classHeader: $$Props['classHeader'] = undefined;
+@prop export let bodyClass: $$Props['bodyClass'] = 'p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain';
+@prop export let classBody: $$Props['classBody'] = undefined;
+@prop export let footerClass: $$Props['footerClass'] = 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg';
+@prop export let classFooter: $$Props['classFooter'] = undefined;
 -->

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

@@ -52,25 +52,25 @@ export type ModalSlots = typeof __propDef.slots;
 /**
  * [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 color: ComponentProps<Frame>['color'] = 'default';
- * @prop export let placement: ModalPlacementType = 'center';
- * @prop export let autoclose: boolean = false;
- * @prop export let outsideclose: boolean = false;
- * @prop export let dismissable: boolean = true;
- * @prop export let backdropClass: string = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
- * @prop export let classBackdrop: string | undefined = undefined;
- * @prop export let dialogClass: string = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
- * @prop export let classDialog: string | undefined = undefined;
- * @prop export let defaultClass: string = 'relative flex flex-col mx-auto';
- * @prop export let headerClass: string = 'flex justify-between items-center p-4 md:p-5 rounded-t-lg';
- * @prop export let classHeader: string | undefined = undefined;
- * @prop export let bodyClass: string = 'p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain';
- * @prop export let classBody: string | undefined = undefined;
- * @prop export let footerClass: string = 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg';
- * @prop export let classFooter: string | undefined = undefined;
+ * @prop export let open: $$Props['open'] = false;
+ * @prop export let title: $$Props['title'] = '';
+ * @prop export let size: NonNullable<$$Props['size']> = 'md';
+ * @prop export let color: $$Props['color'] = 'default';
+ * @prop export let placement: NonNullable<$$Props['placement']> = 'center';
+ * @prop export let autoclose: $$Props['autoclose'] = false;
+ * @prop export let outsideclose: $$Props['outsideclose'] = false;
+ * @prop export let dismissable: $$Props['dismissable'] = true;
+ * @prop export let backdropClass: $$Props['backdropClass'] = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+ * @prop export let classBackdrop: $$Props['classBackdrop'] = undefined;
+ * @prop export let dialogClass: $$Props['dialogClass'] = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
+ * @prop export let classDialog: $$Props['classDialog'] = undefined;
+ * @prop export let defaultClass: $$Props['defaultClass'] = 'relative flex flex-col mx-auto';
+ * @prop export let headerClass: $$Props['headerClass'] = 'flex justify-between items-center p-4 md:p-5 rounded-t-lg';
+ * @prop export let classHeader: $$Props['classHeader'] = undefined;
+ * @prop export let bodyClass: $$Props['bodyClass'] = 'p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain';
+ * @prop export let classBody: $$Props['classBody'] = undefined;
+ * @prop export let footerClass: $$Props['footerClass'] = 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg';
+ * @prop export let classFooter: $$Props['classFooter'] = undefined;
  */
 export default class Modal extends SvelteComponentTyped<ModalProps, ModalEvents, ModalSlots> {
 }

package/dist/navbar/Menu.svelte

@@ -29,8 +29,8 @@ $: switch (variation) {
 @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';
+@prop export let size: $$Props['size'] = '24';
+@prop export let color: $$Props['color'] = 'currentColor';
+@prop export let variation: $$Props['variation'] = 'outline';
+@prop export let ariaLabel: $$Props['ariaLabel'] = 'bars 3';
 -->

package/dist/navbar/Menu.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
+import type { SVGAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        size?: string | undefined;
-        color?: string | undefined;
-        variation?: ("solid" | "outline") | undefined;
-        ariaLabel?: string | undefined;
+    props: SVGAttributes<SVGSVGElement> & {
+        size?: string;
+        color?: string;
+        variation?: "solid" | "outline";
+        ariaLabel?: string;
     };
     events: {
         click: MouseEvent;
@@ -20,10 +20,10 @@ export type MenuSlots = typeof __propDef.slots;
 /**
  * [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';
+ * @prop export let size: $$Props['size'] = '24';
+ * @prop export let color: $$Props['color'] = 'currentColor';
+ * @prop export let variation: $$Props['variation'] = 'outline';
+ * @prop export let ariaLabel: $$Props['ariaLabel'] = 'bars 3';
  */
 export default class Menu extends SvelteComponentTyped<MenuProps, MenuEvents, MenuSlots> {
 }

package/dist/navbar/NavBrand.svelte

@@ -10,5 +10,5 @@ export let href = "";
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let href: string = '';
+@prop export let href: $$Props['href'] = '';
 -->

package/dist/navbar/NavBrand.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HTMLAreaAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        href?: string | undefined;
+    props: HTMLAreaAttributes & {
+        href?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -17,7 +17,7 @@ export type NavBrandSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let href: string = '';
+ * @prop export let href: $$Props['href'] = '';
  */
 export default class NavBrand extends SvelteComponentTyped<NavBrandProps, NavBrandEvents, NavBrandSlots> {
 }

package/dist/navbar/NavContainer.svelte

@@ -2,7 +2,7 @@
 export let fluid = false;
 </script>
 
-<div class={twMerge('mx-auto flex flex-wrap justify-between items-center ', fluid ? 'w-full' : 'container', $$props.class)}>
+<div class={twMerge('mx-auto flex flex-wrap justify-between items-center ', fluid ? 'w-full' : 'container', $$props.class)} {...$$restProps}>
   <slot />
 </div>
 

package/dist/navbar/NavHamburger.svelte

@@ -18,6 +18,6 @@ const toggle = (ev) => hiddenStore.update((h) => !h);
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let menuClass: string = 'h-6 w-6 shrink-0';
-@prop export let onClick: (() => void) | undefined = undefined;
+@prop export let menuClass: $$Props['menuClass'] = 'h-6 w-6 shrink-0';
+@prop export let onClick: $$Props['onClick'] = undefined;
 -->

package/dist/navbar/NavHamburger.svelte.d.ts

@@ -1,8 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        menuClass?: string | undefined;
+    props: (({
+        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "dark" | "default" | "primary";
+        name?: string;
+        ariaLabel?: string;
+        size?: "xs" | "sm" | "lg" | "md";
+    } & import("svelte/elements").HTMLAnchorAttributes & {
+        href: string;
+    }) | ({
+        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "dark" | "default" | "primary";
+        name?: string;
+        ariaLabel?: string;
+        size?: "xs" | "sm" | "lg" | "md";
+    } & import("svelte/elements").HTMLButtonAttributes)) & {
+        menuClass?: string;
         onClick?: (() => void) | undefined;
     };
     events: {
@@ -16,8 +27,8 @@ export type NavHamburgerSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let menuClass: string = 'h-6 w-6 shrink-0';
- * @prop export let onClick: (() => void) | undefined = undefined;
+ * @prop export let menuClass: $$Props['menuClass'] = 'h-6 w-6 shrink-0';
+ * @prop export let onClick: $$Props['onClick'] = undefined;
  */
 export default class NavHamburger extends SvelteComponentTyped<NavHamburgerProps, NavHamburgerEvents, NavHamburgerSlots> {
 }

package/dist/navbar/NavLi.svelte

@@ -23,7 +23,7 @@ $: liClass = twMerge("block py-2 pe-4 ps-3 md:p-0 rounded md:border-0", active ?
 @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;
+@prop export let href: $$Props['href'] = '';
+@prop export let activeClass: $$Props['activeClass'] = undefined;
+@prop export let nonActiveClass: $$Props['nonActiveClass'] = undefined;
 -->

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

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        href?: string | undefined;
-        activeClass?: string | undefined;
-        nonActiveClass?: string | undefined;
+    props: HTMLAttributes<HTMLAnchorElement | HTMLDivElement> & {
+        href?: string;
+        activeClass?: string;
+        nonActiveClass?: string;
     };
     events: {
         blur: FocusEvent;
@@ -30,9 +30,9 @@ export type NavLiSlots = typeof __propDef.slots;
 /**
  * [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;
+ * @prop export let href: $$Props['href'] = '';
+ * @prop export let activeClass: $$Props['activeClass'] = undefined;
+ * @prop export let nonActiveClass: $$Props['nonActiveClass'] = undefined;
  */
 export default class NavLi extends SvelteComponentTyped<NavLiProps, NavLiEvents, NavLiSlots> {
 }

package/dist/navbar/NavUl.svelte

@@ -6,7 +6,6 @@ import { writable } from "svelte/store";
 import { slide } from "svelte/transition";
 import { twMerge } from "tailwind-merge";
 import Frame from "../utils/Frame.svelte";
-const activeUrlStore = writable("");
 export let activeUrl = "";
 export let divClass = "w-full md:block md:w-auto";
 export let ulClass = "flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-sm md:font-medium";
@@ -14,6 +13,7 @@ export let hidden = void 0;
 export let slideParams = { delay: 250, duration: 500, easing: sineIn };
 export let activeClass = "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 = "text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent";
+const activeUrlStore = writable("");
 setContext("navbarContext", { activeClass, nonActiveClass });
 $: {
   activeUrlStore.set(activeUrl);
@@ -50,11 +50,11 @@ $: _ulClass = twMerge(
 @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 rtl:space-x-reverse md:mt-0 md:text-sm md:font-medium';
-@prop export let hidden: boolean | undefined = undefined;
-@prop export let slideParams: SlideParams = { delay: 250, duration: 500, easing: sineIn };
-@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-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
+@prop export let activeUrl: NonNullable<$$Props['activeUrl']> = '';
+@prop export let divClass: $$Props['divClass'] = 'w-full md:block md:w-auto';
+@prop export let ulClass: $$Props['ulClass'] = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-sm md:font-medium';
+@prop export let hidden: $$Props['hidden'] = undefined;
+@prop export let slideParams: $$Props['slideParams'] = { delay: 250, duration: 500, easing: sineIn };
+@prop export let activeClass: NonNullable<$$Props['activeClass']> = '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: NonNullable<$$Props['nonActiveClass']> = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
 -->