flowbite-svelte 0.36.5 → 0.37.1

package/dist/bottom-nav/BottomNav.svelte

@@ -4,6 +4,8 @@ export let position = 'fixed';
 export let navType = 'default';
 export let outerDefault = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
 export let innerDefault = 'grid h-full max-w-lg mx-auto';
+export let outerCustom = '';
+export let innerCustom = '';
 setContext('navType', navType);
 const outerDivClasses = {
     default: 'bottom-0 left-0 h-16 bg-white border-t',
@@ -14,7 +16,7 @@ const outerDivClasses = {
     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',
-    custom: ''
+    custom: outerCustom
 };
 const innerDivClasses = {
     default: '',
@@ -25,15 +27,64 @@ const innerDivClasses = {
     card: '',
     meeting: 'flex items-center justify-center mx-auto',
     video: 'flex items-center w-full',
-    custom: ''
+    custom: innerCustom
 };
 $: outerClass = classNames(position, outerDefault, outerDivClasses[navType], $$props.outerDiv);
 $: innerClass = classNames(innerDefault, innerDivClasses[navType], $$props.innerDiv);
 </script>
 
-<div class={outerClass} {...$$restProps}>
+<div {...$$restProps} class={outerClass}>
   <slot name="header" />
   <div class={innerClass}>
     <slot />
   </div>
 </div>
+
+<!--
+  @component
+  ## Features
+  [Go to Bottom Navigation](https://flowbite-svelte.com/docs/components/bottom-navigation)
+  - Default bottom navigation
+  - Menu items with border
+  - Application bar example
+  - Example with pagination
+  - Button group bottom bar
+  - Card with bottom bar
+  ## Props
+  @prop position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'fixed';
+  @prop navType:| 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' | 'custom' = 'default';
+  @prop outerDefault: string = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
+  @prop innerDefault: string = 'grid h-full max-w-lg mx-auto';
+  @prop outerCustom: string = '';
+  @prop innerCustom: string = '';
+  ## Example
+  ```
+  <script>
+    import { BottomNav, BottomNavItem } from "flowbite-svelte"
+  </script>
+
+  <BottomNav position="absolute" innerDiv="grid-cols-4">
+    <BottomNavItem btnName="Home">
+      <svg class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
+      </svg>
+    </BottomNavItem>
+    <BottomNavItem btnName="Wallet">
+        <svg class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"></path>
+          <path clip-rule="evenodd" fill-rule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"></path>
+        </svg>
+    </BottomNavItem>
+    <BottomNavItem btnName="Settings">
+        <svg class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path>
+        </svg>
+    </BottomNavItem>
+    <BottomNavItem btnName="Profile">
+        <svg class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <path clip-rule="evenodd" fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"></path>
+        </svg>
+    </BottomNavItem>
+  </BottomNav>
+  ```
+-->

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

@@ -6,6 +6,8 @@ declare const __propDef: {
         navType?: "default" | "border" | "application" | "group" | "custom" | "pagination" | "card" | "meeting" | "video" | undefined;
         outerDefault?: string | undefined;
         innerDefault?: string | undefined;
+        outerCustom?: string | undefined;
+        innerCustom?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -18,6 +20,53 @@ declare const __propDef: {
 export type BottomNavProps = typeof __propDef.props;
 export type BottomNavEvents = typeof __propDef.events;
 export type BottomNavSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Bottom Navigation](https://flowbite-svelte.com/docs/components/bottom-navigation)
+ * - Default bottom navigation
+ * - Menu items with border
+ * - Application bar example
+ * - Example with pagination
+ * - Button group bottom bar
+ * - Card with bottom bar
+ * ## Props
+ * @prop position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'fixed';
+ * @prop navType:| 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' | 'custom' = 'default';
+ * @prop outerDefault: string = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
+ * @prop innerDefault: string = 'grid h-full max-w-lg mx-auto';
+ * @prop outerCustom: string = '';
+ * @prop innerCustom: string = '';
+ * ## Example
+ * ```
+ * <script>
+ *   import { BottomNav, BottomNavItem } from "flowbite-svelte"
+ * </script>
+ *
+ * <BottomNav position="absolute" innerDiv="grid-cols-4">
+ *   <BottomNavItem btnName="Home">
+ *     <svg class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+ *       <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
+ *     </svg>
+ *   </BottomNavItem>
+ *   <BottomNavItem btnName="Wallet">
+ *       <svg class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+ *         <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"></path>
+ *         <path clip-rule="evenodd" fill-rule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"></path>
+ *       </svg>
+ *   </BottomNavItem>
+ *   <BottomNavItem btnName="Settings">
+ *       <svg class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+ *         <path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path>
+ *       </svg>
+ *   </BottomNavItem>
+ *   <BottomNavItem btnName="Profile">
+ *       <svg class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+ *         <path clip-rule="evenodd" fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"></path>
+ *       </svg>
+ *   </BottomNavItem>
+ * </BottomNav>
+ * ```
+ */
 export default class BottomNav extends SvelteComponentTyped<BottomNavProps, BottomNavEvents, BottomNavSlots> {
 }
 export {};

package/dist/bottom-nav/BottomNav.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNav.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqED,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNav.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA0ED,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/bottom-nav/BottomNavHeader.svelte

@@ -7,3 +7,23 @@ export let innerClass = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gra
     <slot />
   </div>
 </div>
+
+<!--
+  @component
+  ## Features
+  [Go to Bottom Navigation](https://flowbite-svelte.com/docs/components/bottom-navigation)
+  ## Props
+  @prop outerClass: string = 'w-full';
+  @prop innerClass: string = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600';
+  ## Example
+  ```
+  <BottomNav position="absolute" navType="group" innerDiv="grid-cols-5">
+    <BottomNavHeader slot="header">
+        <BottomNavHeaderItem itemName="New" />
+        <BottomNavHeaderItem itemName="Popular" active={true}/>
+        <BottomNavHeaderItem itemName="Following" />
+    </BottomNavHeader>
+    ...
+  </BottomNav> 
+  ```
+-->

package/dist/bottom-nav/BottomNavHeader.svelte.d.ts

@@ -15,6 +15,24 @@ declare const __propDef: {
 export type BottomNavHeaderProps = typeof __propDef.props;
 export type BottomNavHeaderEvents = typeof __propDef.events;
 export type BottomNavHeaderSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Bottom Navigation](https://flowbite-svelte.com/docs/components/bottom-navigation)
+ * ## Props
+ * @prop outerClass: string = 'w-full';
+ * @prop innerClass: string = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600';
+ * ## Example
+ * ```
+ * <BottomNav position="absolute" navType="group" innerDiv="grid-cols-5">
+ *   <BottomNavHeader slot="header">
+ *       <BottomNavHeaderItem itemName="New" />
+ *       <BottomNavHeaderItem itemName="Popular" active={true}/>
+ *       <BottomNavHeaderItem itemName="Following" />
+ *   </BottomNavHeader>
+ *   ...
+ * </BottomNav>
+ * ```
+ */
 export default class BottomNavHeader extends SvelteComponentTyped<BottomNavHeaderProps, BottomNavHeaderEvents, BottomNavHeaderSlots> {
 }
 export {};

package/dist/bottom-nav/BottomNavHeader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavHeader.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAeD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}
+{"version":3,"file":"BottomNavHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavHeader.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}

package/dist/bottom-nav/BottomNavHeaderItem.svelte

@@ -9,3 +9,15 @@ $: btnClass = classNames(active ? activeClass : defaultClass);
 <button class={btnClass} {...$$restProps}>
   {itemName}
 </button>
+
+<!--
+  @component
+  ## Features
+  [Go to Bottom Navigation](https://flowbite-svelte.com/docs/components/bottom-navigation)
+  ## Props
+  @prop itemName: string = '';
+  @prop active: boolean = false;
+  @prop defaultClass: string = 'px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-lg';
+  @prop activeClass: string = 'px-5 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900 rounded-lg';
+  
+-->

package/dist/bottom-nav/BottomNavHeaderItem.svelte.d.ts

@@ -15,6 +15,15 @@ declare const __propDef: {
 export type BottomNavHeaderItemProps = typeof __propDef.props;
 export type BottomNavHeaderItemEvents = typeof __propDef.events;
 export type BottomNavHeaderItemSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Bottom Navigation](https://flowbite-svelte.com/docs/components/bottom-navigation)
+ * ## Props
+ * @prop itemName: string = '';
+ * @prop active: boolean = false;
+ * @prop defaultClass: string = 'px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-lg';
+ * @prop activeClass: string = 'px-5 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900 rounded-lg';
+ */
 export default class BottomNavHeaderItem extends SvelteComponentTyped<BottomNavHeaderItemProps, BottomNavHeaderItemEvents, BottomNavHeaderItemSlots> {
 }
 export {};

package/dist/bottom-nav/BottomNavHeaderItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavHeaderItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavHeaderItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9D,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9D,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB,CAAC,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,CAAC;CACnJ"}
+{"version":3,"file":"BottomNavHeaderItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavHeaderItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9D,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9D;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB,CAAC,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,CAAC;CACnJ"}

package/dist/bottom-nav/BottomNavItem.svelte

@@ -4,6 +4,9 @@ export let btnName = '';
 export let appBtnPosition = 'custom';
 export let btnDefault = '';
 export let spanDefault = '';
+export let btnCustom = '';
+export let spanCustom = '';
+export let appCustom = '';
 const navType = getContext('navType');
 const btnClasses = {
     default: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
@@ -14,7 +17,7 @@ const btnClasses = {
     card: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
     meeting: '',
     video: '',
-    custom: ''
+    custom: btnCustom
 };
 const spanClasses = {
     default: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500',
@@ -25,22 +28,22 @@ const spanClasses = {
     card: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500',
     meeting: '',
     video: '',
-    custom: ''
+    custom: spanCustom
 };
 const appBtnClasses = {
     left: 'inline-flex flex-col items-center justify-center px-5 rounded-l-full hover:bg-gray-50 dark:hover:bg-gray-800 group',
     middle: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
     right: 'inline-flex flex-col items-center justify-center px-5 rounded-r-full hover:bg-gray-50 dark:hover:bg-gray-800 group',
-    custom: ''
+    custom: appCustom
 };
 $: btnClass = classNames(btnDefault, btnClasses[navType], appBtnClasses[appBtnPosition], $$props.btnClass);
 $: spanClass = classNames(spanDefault, spanClasses[navType], $$props.spanClass);
 </script>
 
 <button
+  {...$$restProps}
   class={btnClass}
   aria-label={btnName}
-  {...$$restProps}
   on:click
   on:change
   on:keydown
@@ -52,3 +55,27 @@ $: spanClass = classNames(spanDefault, spanClasses[navType], $$props.spanClass);
   <slot />
   <span class={spanClass}>{btnName}</span>
 </button>
+
+<!--
+  @component
+  ## Features
+  [Go to Bottom Navigation](https://flowbite-svelte.com/docs/components/bottom-navigation)
+  ## Props
+  @prop btnName: string = '';
+  @prop appBtnPosition: 'left' | 'middle' | 'right' | 'custom' = 'custom';
+  @prop btnDefault: string = '';
+  @prop spanDefault: string = '';
+  @prop btnCustom: string = '';
+  @prop spanCustom: string = '';
+  @prop appCustom: string = '';
+  ## event
+  - on:click
+  - on:change
+  - on:keydown
+  - on:keyup
+  - on:focus
+  - on:blur
+  - on:mouseenter
+  - on:mouseleave
+
+-->

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

@@ -6,6 +6,9 @@ declare const __propDef: {
         appBtnPosition?: "custom" | "left" | "middle" | "right" | undefined;
         btnDefault?: string | undefined;
         spanDefault?: string | undefined;
+        btnCustom?: string | undefined;
+        spanCustom?: string | undefined;
+        appCustom?: string | undefined;
     };
     events: {
         click: MouseEvent;
@@ -26,6 +29,27 @@ declare const __propDef: {
 export type BottomNavItemProps = typeof __propDef.props;
 export type BottomNavItemEvents = typeof __propDef.events;
 export type BottomNavItemSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Bottom Navigation](https://flowbite-svelte.com/docs/components/bottom-navigation)
+ * ## Props
+ * @prop btnName: string = '';
+ * @prop appBtnPosition: 'left' | 'middle' | 'right' | 'custom' = 'custom';
+ * @prop btnDefault: string = '';
+ * @prop spanDefault: string = '';
+ * @prop btnCustom: string = '';
+ * @prop spanCustom: string = '';
+ * @prop appCustom: string = '';
+ * ## event
+ * - on:click
+ * - on:change
+ * - on:keydown
+ * - on:keyup
+ * - on:focus
+ * - on:blur
+ * - on:mouseenter
+ * - on:mouseleave
+ */
 export default class BottomNavItem extends SvelteComponentTyped<BottomNavItemProps, BottomNavItemEvents, BottomNavItemSlots> {
 }
 export {};

package/dist/bottom-nav/BottomNavItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyED,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"BottomNavItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgFD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/breadcrumbs/Breadcrumb.svelte

@@ -11,3 +11,30 @@ let classNav = solid ? solidClass : navClass;
     <slot />
   </ol>
 </nav>
+
+<!--
+  @component
+  ## Features
+  [Go to Breadcrumb](https://flowbite-svelte.com/docs/components/breadcrumb)
+  - Setup
+  - Default Breadcrumb
+  - Solid Breadcrumb
+  - Icons
+  ## Props
+  @prop solid: boolean = false;
+  @prop navClass: string = 'flex';
+  @prop solidClass: string = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
+  @prop olClass: string = 'inline-flex items-center space-x-1 md:space-x-3'; 
+  ## Example
+  ```
+  <script>
+    import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
+  </script>
+  
+  <Breadcrumb aria-label="Default breadcrumb example">
+    <BreadcrumbItem href="/" home>Home</BreadcrumbItem>
+    <BreadcrumbItem href="/">Projects</BreadcrumbItem>
+    <BreadcrumbItem>Flowbite Svelte</BreadcrumbItem>
+  </Breadcrumb>
+  ```
+-->

package/dist/breadcrumbs/Breadcrumb.svelte.d.ts

@@ -17,6 +17,31 @@ declare const __propDef: {
 export type BreadcrumbProps = typeof __propDef.props;
 export type BreadcrumbEvents = typeof __propDef.events;
 export type BreadcrumbSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Breadcrumb](https://flowbite-svelte.com/docs/components/breadcrumb)
+ * - Setup
+ * - Default Breadcrumb
+ * - Solid Breadcrumb
+ * - Icons
+ * ## Props
+ * @prop solid: boolean = false;
+ * @prop navClass: string = 'flex';
+ * @prop solidClass: string = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
+ * @prop olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
+ * </script>
+ *
+ * <Breadcrumb aria-label="Default breadcrumb example">
+ *   <BreadcrumbItem href="/" home>Home</BreadcrumbItem>
+ *   <BreadcrumbItem href="/">Projects</BreadcrumbItem>
+ *   <BreadcrumbItem>Flowbite Svelte</BreadcrumbItem>
+ * </Breadcrumb>
+ * ```
+ */
 export default class Breadcrumb extends SvelteComponentTyped<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
 }
 export {};

package/dist/breadcrumbs/Breadcrumb.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/breadcrumbs/Breadcrumb.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAsBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}
+{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/breadcrumbs/Breadcrumb.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/breadcrumbs/BreadcrumbItem.svelte

@@ -42,3 +42,20 @@ export let homeClass = 'inline-flex items-center text-sm font-medium text-gray-7
     {/if}
   {/if}
 </li>
+
+<!--
+  @component
+  ## Features
+  [Go to Breadcrumb](https://flowbite-svelte.com/docs/components/breadcrumb)
+  - Setup
+  - Default Breadcrumb
+  - Solid Breadcrumb
+  - Icons
+  ## Props
+  @prop home: boolean = false;
+  @prop href: string | undefined = undefined;
+  @prop linkClass: string = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
+  @prop spanClass: string = 'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400';
+  @prop homeClass: string = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
+  
+-->

package/dist/breadcrumbs/BreadcrumbItem.svelte.d.ts

@@ -19,6 +19,20 @@ declare const __propDef: {
 export type BreadcrumbItemProps = typeof __propDef.props;
 export type BreadcrumbItemEvents = typeof __propDef.events;
 export type BreadcrumbItemSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Breadcrumb](https://flowbite-svelte.com/docs/components/breadcrumb)
+ * - Setup
+ * - Default Breadcrumb
+ * - Solid Breadcrumb
+ * - Icons
+ * ## Props
+ * @prop home: boolean = false;
+ * @prop href: string | undefined = undefined;
+ * @prop linkClass: string = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
+ * @prop spanClass: string = 'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400';
+ * @prop homeClass: string = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
+ */
 export default class BreadcrumbItem extends SvelteComponentTyped<BreadcrumbItemProps, BreadcrumbItemEvents, BreadcrumbItemSlots> {
 }
 export {};

package/dist/breadcrumbs/BreadcrumbItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/breadcrumbs/BreadcrumbItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyCD,QAAA,MAAM,SAAS;;;;eAD2H,MAAM,GAAG,SAAS;;;;;;;;;;;;CAC9E,CAAC;AAC/E,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEzD,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}
+{"version":3,"file":"BreadcrumbItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/breadcrumbs/BreadcrumbItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2CD,QAAA,MAAM,SAAS;;;;eAD2H,MAAM,GAAG,SAAS;;;;;;;;;;;;CAC9E,CAAC;AAC/E,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEzD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}

package/dist/buttongroups/ButtonGroup.svelte

@@ -8,3 +8,12 @@ setContext('group', { size });
 <div {...$$restProps} class={classNames(divClass, $$props.class)} role="group">
   <slot />
 </div>
+
+<!--
+  @component
+  ## Features
+  [Go to Button Group](https://flowbite-svelte.com/docs/components/button-group)
+  ## Props
+  @prop size: SizeType = 'md';
+  @prop divClass: string = 'inline-flex rounded-lg shadow-sm';  
+-->

package/dist/buttongroups/ButtonGroup.svelte.d.ts

@@ -16,6 +16,13 @@ declare const __propDef: {
 export type ButtonGroupProps = typeof __propDef.props;
 export type ButtonGroupEvents = typeof __propDef.events;
 export type ButtonGroupSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Button Group](https://flowbite-svelte.com/docs/components/button-group)
+ * ## Props
+ * @prop size: SizeType = 'md';
+ * @prop divClass: string = 'inline-flex rounded-lg shadow-sm';
+ */
 export default class ButtonGroup extends SvelteComponentTyped<ButtonGroupProps, ButtonGroupEvents, ButtonGroupSlots> {
 }
 export {};

package/dist/buttongroups/ButtonGroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttongroups/ButtonGroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAmB3C,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}
+{"version":3,"file":"ButtonGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttongroups/ButtonGroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAqB3C,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/buttons/Button.svelte

@@ -92,3 +92,51 @@ $: buttonClass = btnClass
   on:mouseleave>
   <slot />
 </svelte:element>
+
+<!--
+  @component
+  ## Features
+  [Go to Button](https://flowbite-svelte.com/docs/components/button)
+  - Setup
+  - Default button
+  - Button with link
+  - Button pills
+  - Gradient monochrome
+  - Gradient duotone
+  - Gradient outline
+  - Colored shadows
+  - Outline buttons
+  - Button sizes
+  - Buttons with icon
+  - Button with label
+  - Icon buttons
+  - Loader
+  - Disabled  
+  ## Props
+  @prop pill: boolean = false;
+  @prop outline: boolean = false;
+  @prop size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
+  @prop href: string | undefined = undefined;
+  @prop btnClass: string | undefined = undefined;
+  @prop type: ButtonType = 'button';
+  @prop color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
+  @prop shadow: boolean = false;
+  ## Event
+  - on:click
+  - on:change
+  - on:keydown
+  - on:keyup
+  - on:mouseenter
+  - on:mouseleave
+  ## Example
+  ```
+  <script>
+    import { Button } from 'flowbite-svelte';
+  </script>
+
+  <Button>Default</Button>
+  <Button color="alternative">Alternative</Button>
+  <Button color="dark">Dark</Button>
+  <Button color="light">Light</Button>  
+  ```
+-->

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

@@ -29,6 +29,52 @@ declare const __propDef: {
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
 export type ButtonSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Button](https://flowbite-svelte.com/docs/components/button)
+ * - Setup
+ * - Default button
+ * - Button with link
+ * - Button pills
+ * - Gradient monochrome
+ * - Gradient duotone
+ * - Gradient outline
+ * - Colored shadows
+ * - Outline buttons
+ * - Button sizes
+ * - Buttons with icon
+ * - Button with label
+ * - Icon buttons
+ * - Loader
+ * - Disabled
+ * ## Props
+ * @prop pill: boolean = false;
+ * @prop outline: boolean = false;
+ * @prop size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
+ * @prop href: string | undefined = undefined;
+ * @prop btnClass: string | undefined = undefined;
+ * @prop type: ButtonType = 'button';
+ * @prop color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
+ * @prop shadow: boolean = false;
+ * ## Event
+ * - on:click
+ * - on:change
+ * - on:keydown
+ * - on:keyup
+ * - on:mouseenter
+ * - on:mouseleave
+ * ## Example
+ * ```
+ * <script>
+ *   import { Button } from 'flowbite-svelte';
+ * </script>
+ *
+ * <Button>Default</Button>
+ * <Button color="alternative">Alternative</Button>
+ * <Button color="dark">Dark</Button>
+ * <Button color="light">Light</Button>
+ * ```
+ */
 export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttons/Button.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA8H3C,QAAA,MAAM,SAAS;;;;;;eADoN,MAAM,GAAG,SAAS;mBAAa,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;CACtM,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttons/Button.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA+H3C,QAAA,MAAM,SAAS;;;;;;eADoN,MAAM,GAAG,SAAS;mBAAa,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;CACtM,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}