flowbite-svelte 0.36.5 → 0.37.2

package/dist/navbar/NavUl.svelte

@@ -34,3 +34,33 @@ $$props.class);
     </ul>
   </div>
 {/if}
+
+<!--
+  @component
+  ## Features
+  [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+  ## Props
+  @prop divClass: string = 'w-full md:block md:w-auto';
+  @prop 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 hidden: boolean = true;
+  @prop slideParams: SlideParams = { delay: 250, duration: 500, easing: quintOut };
+  @prop activeClass: string = 'text-white bg-blue-700 md:bg-transparent md:text-blue-700 md:dark:text-white dark:bg-blue-600 md:dark:bg-transparent';
+  @prop nonActiveClass: string = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
+  ## Example
+  ```
+  <Navbar let:hidden let:toggle>
+    <NavBrand href="/">
+      <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+      <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"> Flowbite </span>
+    </NavBrand>
+    <NavHamburger on:click={toggle} />
+    <NavUl {hidden}>
+      <NavLi href="/" active={true}>Home</NavLi>
+      <NavLi href="/about">About</NavLi>
+      <NavLi href="/services">Services</NavLi>
+      <NavLi href="/pricing">Pricing</NavLi>
+      <NavLi href="/contact">Contact</NavLi>
+    </NavUl>
+  </Navbar>
+  ```
+-->

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

@@ -26,6 +26,34 @@ declare const __propDef: {
 export type NavUlProps = typeof __propDef.props;
 export type NavUlEvents = typeof __propDef.events;
 export type NavUlSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+ * ## Props
+ * @prop divClass: string = 'w-full md:block md:w-auto';
+ * @prop 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 hidden: boolean = true;
+ * @prop slideParams: SlideParams = { delay: 250, duration: 500, easing: quintOut };
+ * @prop activeClass: string = 'text-white bg-blue-700 md:bg-transparent md:text-blue-700 md:dark:text-white dark:bg-blue-600 md:dark:bg-transparent';
+ * @prop nonActiveClass: string = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
+ * ## Example
+ * ```
+ * <Navbar let:hidden let:toggle>
+ *   <NavBrand href="/">
+ *     <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+ *     <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"> Flowbite </span>
+ *   </NavBrand>
+ *   <NavHamburger on:click={toggle} />
+ *   <NavUl {hidden}>
+ *     <NavLi href="/" active={true}>Home</NavLi>
+ *     <NavLi href="/about">About</NavLi>
+ *     <NavLi href="/services">Services</NavLi>
+ *     <NavLi href="/pricing">Pricing</NavLi>
+ *     <NavLi href="/contact">Contact</NavLi>
+ *   </NavUl>
+ * </Navbar>
+ * ```
+ */
 export default class NavUl extends SvelteComponentTyped<NavUlProps, NavUlEvents, NavUlSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"NavUl.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavUl.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAIJ,OAAO,EAAS,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAqD5D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"NavUl.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavUl.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAIJ,OAAO,EAAS,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAuD5D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/navbar/Navbar.svelte

@@ -18,3 +18,39 @@ let toggle = () => {
     <slot {hidden} {toggle} />
   </div>
 </Frame>
+
+<!--
+  @component
+  [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+  ## Props
+  @prop navClass: string = 'px-2 sm:px-4 py-2.5 w-full';
+  @prop navDivClass: string = 'mx-auto flex flex-wrap justify-between items-center ';
+  @prop fluid: boolean = false;
+  ## Example
+  ```
+  <script>
+    import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+  </script>
+
+  <Navbar let:hidden let:toggle>
+    <NavBrand href="/">
+      <img
+        src="/images/flowbite-svelte-icon-logo.svg"
+        class="mr-3 h-6 sm:h-9"
+        alt="Flowbite Logo"
+      />
+      <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+        Flowbite
+      </span>
+    </NavBrand>
+    <NavHamburger on:click={toggle} />
+    <NavUl {hidden}>
+      <NavLi href="/" active={true}>Home</NavLi>
+      <NavLi href="/about">About</NavLi>
+      <NavLi href="/services">Services</NavLi>
+      <NavLi href="/pricing">Pricing</NavLi>
+      <NavLi href="/contact">Contact</NavLi>
+    </NavUl>
+  </Navbar>
+  ```
+-->

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

@@ -259,6 +259,40 @@ declare const __propDef: {
 export type NavbarProps = typeof __propDef.props;
 export type NavbarEvents = typeof __propDef.events;
 export type NavbarSlots = typeof __propDef.slots;
+/**
+ * [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+ * ## Props
+ * @prop navClass: string = 'px-2 sm:px-4 py-2.5 w-full';
+ * @prop navDivClass: string = 'mx-auto flex flex-wrap justify-between items-center ';
+ * @prop fluid: boolean = false;
+ * ## Example
+ * ```
+ * <script>
+ *   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Navbar let:hidden let:toggle>
+ *   <NavBrand href="/">
+ *     <img
+ *       src="/images/flowbite-svelte-icon-logo.svg"
+ *       class="mr-3 h-6 sm:h-9"
+ *       alt="Flowbite Logo"
+ *     />
+ *     <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+ *       Flowbite
+ *     </span>
+ *   </NavBrand>
+ *   <NavHamburger on:click={toggle} />
+ *   <NavUl {hidden}>
+ *     <NavLi href="/" active={true}>Home</NavLi>
+ *     <NavLi href="/about">About</NavLi>
+ *     <NavLi href="/services">Services</NavLi>
+ *     <NavLi href="/pricing">Pricing</NavLi>
+ *     <NavLi href="/contact">Contact</NavLi>
+ *   </NavUl>
+ * </Navbar>
+ * ```
+ */
 export default class Navbar extends SvelteComponentTyped<NavbarProps, NavbarEvents, NavbarSlots> {
 }
 export {};

package/dist/navbar/Navbar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/Navbar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,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":"Navbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/Navbar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA0CD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/navbar/SidebarMenu.svelte

@@ -34,3 +34,39 @@ export let ariaLabel = 'bars 3';
   on:click>
   {@html svgpath}
 </svg>
+
+<!--
+  @component
+  [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+  ## Props
+  @prop size = '20';
+  @prop color = 'currentColor';
+  @prop variation: 'solid' | 'outline' = 'outline';  
+  ## Example
+  ```
+  <script>
+    import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+  </script>
+
+  <Navbar let:hidden let:toggle>
+    <NavBrand href="/">
+      <img
+        src="/images/flowbite-svelte-icon-logo.svg"
+        class="mr-3 h-6 sm:h-9"
+        alt="Flowbite Logo"
+      />
+      <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+        Flowbite
+      </span>
+    </NavBrand>
+    <NavHamburger on:click={toggle} />
+    <NavUl {hidden}>
+      <NavLi href="/" active={true}>Home</NavLi>
+      <NavLi href="/about">About</NavLi>
+      <NavLi href="/services">Services</NavLi>
+      <NavLi href="/pricing">Pricing</NavLi>
+      <NavLi href="/contact">Contact</NavLi>
+    </NavUl>
+  </Navbar>
+  ```
+-->

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

@@ -17,6 +17,40 @@ declare const __propDef: {
 export type SidebarMenuProps = typeof __propDef.props;
 export type SidebarMenuEvents = typeof __propDef.events;
 export type SidebarMenuSlots = typeof __propDef.slots;
+/**
+ * [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+ * ## Props
+ * @prop size = '20';
+ * @prop color = 'currentColor';
+ * @prop variation: 'solid' | 'outline' = 'outline';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Navbar let:hidden let:toggle>
+ *   <NavBrand href="/">
+ *     <img
+ *       src="/images/flowbite-svelte-icon-logo.svg"
+ *       class="mr-3 h-6 sm:h-9"
+ *       alt="Flowbite Logo"
+ *     />
+ *     <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+ *       Flowbite
+ *     </span>
+ *   </NavBrand>
+ *   <NavHamburger on:click={toggle} />
+ *   <NavUl {hidden}>
+ *     <NavLi href="/" active={true}>Home</NavLi>
+ *     <NavLi href="/about">About</NavLi>
+ *     <NavLi href="/services">Services</NavLi>
+ *     <NavLi href="/pricing">Pricing</NavLi>
+ *     <NavLi href="/contact">Contact</NavLi>
+ *   </NavUl>
+ * </Navbar>
+ * ```
+ */
 export default class SidebarMenu extends SvelteComponentTyped<SidebarMenuProps, SidebarMenuEvents, SidebarMenuSlots> {
 }
 export {};

package/dist/navbar/SidebarMenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/SidebarMenu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+BD,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":"SidebarMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/SidebarMenu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiCD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/paginations/Pagination.svelte

@@ -52,3 +52,74 @@ const next = () => {
     </li>
   </ul>
 </nav>
+
+<!--
+  @component
+  ## Features
+  [Go to Pagination](https://flowbite-svelte.com/docs/components/pagination)
+  - Setup
+  - Default pagination
+  - Pagination with icons
+  - Previous and next
+  - Previous and next with icons
+  - Table data pagination
+  - Table data pagination with icons
+  - Event example
+  ## Props
+  @prop pages: LinkType[] = [];
+  @prop activeClass: string = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
+  @prop normalClass: string = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+  @prop ulClass: string = 'inline-flex -space-x-px items-center';
+  @prop table: boolean = false;
+  ## Event
+  - on:blur
+  - on:change
+  - on:click
+  - on:focus
+  - on:keydown
+  - on:keypress
+  - on:keyup
+  - on:mouseenter
+  - on:mouseleave
+  - on:mouseover
+  ## Example
+  ```
+  <script>
+    import { page } from '$app/stores';
+    import { Pagination } from 'flowbite-svelte'
+
+    $: activeUrl = $page.url.searchParams.get('page')
+    let pages = [
+      { name: 1, href: '/components/pagination?page=1'},
+      { name: 2, href: '/components/pagination?page=2'},
+      { name: 3, href: '/components/pagination?page=3'},
+      { name: 4, href: '/components/pagination?page=4'},
+      { name: 5, href: '/components/pagination?page=5'}
+    ];
+
+    $:{ 
+        pages.forEach((page)=>{
+        let splitUrl = page.href.split('?');
+        let queryString = splitUrl.slice(1).join('?');
+        const hrefParams = new URLSearchParams(queryString);
+        let hrefValue = hrefParams.get('page');
+        if ( hrefValue === activeUrl){
+          page.active=true
+        }else{
+          page.active=false
+        }
+      })
+        pages=pages
+    }
+
+    const previous = () => {
+      alert('Previous btn clicked. Make a call to your server to fetch data.');
+    };
+    const next = () => {
+      alert('Next btn clicked. Make a call to your server to fetch data.');
+    };
+  </script>
+
+  <Pagination {pages} on:previous={previous} on:next={next} />
+  ```
+-->

package/dist/paginations/Pagination.svelte.d.ts

@@ -33,6 +33,75 @@ declare const __propDef: {
 export type PaginationProps = typeof __propDef.props;
 export type PaginationEvents = typeof __propDef.events;
 export type PaginationSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Pagination](https://flowbite-svelte.com/docs/components/pagination)
+ * - Setup
+ * - Default pagination
+ * - Pagination with icons
+ * - Previous and next
+ * - Previous and next with icons
+ * - Table data pagination
+ * - Table data pagination with icons
+ * - Event example
+ * ## Props
+ * @prop pages: LinkType[] = [];
+ * @prop activeClass: string = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
+ * @prop normalClass: string = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+ * @prop ulClass: string = 'inline-flex -space-x-px items-center';
+ * @prop table: boolean = false;
+ * ## Event
+ * - on:blur
+ * - on:change
+ * - on:click
+ * - on:focus
+ * - on:keydown
+ * - on:keypress
+ * - on:keyup
+ * - on:mouseenter
+ * - on:mouseleave
+ * - on:mouseover
+ * ## Example
+ * ```
+ * <script>
+ *   import { page } from '$app/stores';
+ *   import { Pagination } from 'flowbite-svelte'
+ *
+ *   $: activeUrl = $page.url.searchParams.get('page')
+ *   let pages = [
+ *     { name: 1, href: '/components/pagination?page=1'},
+ *     { name: 2, href: '/components/pagination?page=2'},
+ *     { name: 3, href: '/components/pagination?page=3'},
+ *     { name: 4, href: '/components/pagination?page=4'},
+ *     { name: 5, href: '/components/pagination?page=5'}
+ *   ];
+ *
+ *   $:{
+ *       pages.forEach((page)=>{
+ *       let splitUrl = page.href.split('?');
+ *       let queryString = splitUrl.slice(1).join('?');
+ *       const hrefParams = new URLSearchParams(queryString);
+ *       let hrefValue = hrefParams.get('page');
+ *       if ( hrefValue === activeUrl){
+ *         page.active=true
+ *       }else{
+ *         page.active=false
+ *       }
+ *     })
+ *       pages=pages
+ *   }
+ *
+ *   const previous = () => {
+ *     alert('Previous btn clicked. Make a call to your server to fetch data.');
+ *   };
+ *   const next = () => {
+ *     alert('Next btn clicked. Make a call to your server to fetch data.');
+ *   };
+ * </script>
+ *
+ * <Pagination {pages} on:previous={previous} on:next={next} />
+ * ```
+ */
 export default class Pagination extends SvelteComponentTyped<PaginationProps, PaginationEvents, PaginationSlots> {
 }
 export {};

package/dist/paginations/Pagination.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/paginations/Pagination.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAoDzC,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":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/paginations/Pagination.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAsDzC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/paginations/PaginationItem.svelte

@@ -26,3 +26,65 @@ $: defaultClass = classNames('block py-2', group ? 'px-3' : 'px-4', 'text-sm fon
   on:mouseover>
   <slot />
 </svelte:element>
+
+<!--
+  @component
+  ## Features
+  [Go to Pagination](https://flowbite-svelte.com/docs/components/pagination)
+  ## Props
+  @prop href: string | undefined = undefined;
+  @prop active: boolean = false;
+  @prop activeClass: string = '';
+  @prop normalClass: string = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+  ## Event
+  - on:blur
+  - on:change
+  - on:click
+  - on:focus
+  - on:keydown
+  - on:keypress
+  - on:keyup
+  - on:mouseenter
+  - on:mouseleave
+  - on:mouseover
+  ## Example
+  ```
+  <script>
+    import { page } from '$app/stores';
+    import { Pagination } from 'flowbite-svelte'
+
+    $: activeUrl = $page.url.searchParams.get('page')
+    let pages = [
+      { name: 1, href: '/components/pagination?page=1'},
+      { name: 2, href: '/components/pagination?page=2'},
+      { name: 3, href: '/components/pagination?page=3'},
+      { name: 4, href: '/components/pagination?page=4'},
+      { name: 5, href: '/components/pagination?page=5'}
+    ];
+
+    $:{ 
+        pages.forEach((page)=>{
+        let splitUrl = page.href.split('?');
+        let queryString = splitUrl.slice(1).join('?');
+        const hrefParams = new URLSearchParams(queryString);
+        let hrefValue = hrefParams.get('page');
+        if ( hrefValue === activeUrl){
+          page.active=true
+        }else{
+          page.active=false
+        }
+      })
+        pages=pages
+    }
+
+    const previous = () => {
+      alert('Previous btn clicked. Make a call to your server to fetch data.');
+    };
+    const next = () => {
+      alert('Next btn clicked. Make a call to your server to fetch data.');
+    };
+  </script>
+
+  <Pagination {pages} on:previous={previous} on:next={next} />
+  ```
+-->

package/dist/paginations/PaginationItem.svelte.d.ts

@@ -28,6 +28,66 @@ declare const __propDef: {
 export type PaginationItemProps = typeof __propDef.props;
 export type PaginationItemEvents = typeof __propDef.events;
 export type PaginationItemSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Pagination](https://flowbite-svelte.com/docs/components/pagination)
+ * ## Props
+ * @prop href: string | undefined = undefined;
+ * @prop active: boolean = false;
+ * @prop activeClass: string = '';
+ * @prop normalClass: string = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+ * ## Event
+ * - on:blur
+ * - on:change
+ * - on:click
+ * - on:focus
+ * - on:keydown
+ * - on:keypress
+ * - on:keyup
+ * - on:mouseenter
+ * - on:mouseleave
+ * - on:mouseover
+ * ## Example
+ * ```
+ * <script>
+ *   import { page } from '$app/stores';
+ *   import { Pagination } from 'flowbite-svelte'
+ *
+ *   $: activeUrl = $page.url.searchParams.get('page')
+ *   let pages = [
+ *     { name: 1, href: '/components/pagination?page=1'},
+ *     { name: 2, href: '/components/pagination?page=2'},
+ *     { name: 3, href: '/components/pagination?page=3'},
+ *     { name: 4, href: '/components/pagination?page=4'},
+ *     { name: 5, href: '/components/pagination?page=5'}
+ *   ];
+ *
+ *   $:{
+ *       pages.forEach((page)=>{
+ *       let splitUrl = page.href.split('?');
+ *       let queryString = splitUrl.slice(1).join('?');
+ *       const hrefParams = new URLSearchParams(queryString);
+ *       let hrefValue = hrefParams.get('page');
+ *       if ( hrefValue === activeUrl){
+ *         page.active=true
+ *       }else{
+ *         page.active=false
+ *       }
+ *     })
+ *       pages=pages
+ *   }
+ *
+ *   const previous = () => {
+ *     alert('Previous btn clicked. Make a call to your server to fetch data.');
+ *   };
+ *   const next = () => {
+ *     alert('Next btn clicked. Make a call to your server to fetch data.');
+ *   };
+ * </script>
+ *
+ * <Pagination {pages} on:previous={previous} on:next={next} />
+ * ```
+ */
 export default class PaginationItem extends SvelteComponentTyped<PaginationItemProps, PaginationItemEvents, PaginationItemSlots> {
 }
 export {};

package/dist/paginations/PaginationItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/paginations/PaginationItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmCD,QAAA,MAAM,SAAS;;;eADgG,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;CACnD,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":"PaginationItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/paginations/PaginationItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqCD,QAAA,MAAM,SAAS;;;eADgG,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;CACnD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}

package/dist/popover/Popover.svelte

@@ -16,3 +16,23 @@ export let defaultClass = 'py-2 px-3';
     <slot />
   </div>
 </Popper>
+
+<!--
+  @component
+  ## Features
+  [Go to Popover](https://flowbite-svelte.com/docs/components/popover)
+  ## Props
+  @prop title: string = '';
+  @prop defaultClass: string = 'py-2 px-3';
+  ## Example
+  ```
+  <script>
+    import { Popover, Button } from 'flowbite-svelte'
+  </script>
+
+  <Button  id="b1">Default popover</Button>
+  <Popover class="w-64 text-sm font-light " title="Popover title" triggeredBy="#b1">
+      And here's some amazing content. It's very engaging. Right?
+  </Popover>
+  ```
+-->

package/dist/popover/Popover.svelte.d.ts

@@ -266,6 +266,24 @@ declare const __propDef: {
 export type PopoverProps = typeof __propDef.props;
 export type PopoverEvents = typeof __propDef.events;
 export type PopoverSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Popover](https://flowbite-svelte.com/docs/components/popover)
+ * ## Props
+ * @prop title: string = '';
+ * @prop defaultClass: string = 'py-2 px-3';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Popover, Button } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Button  id="b1">Default popover</Button>
+ * <Popover class="w-64 text-sm font-light " title="Popover title" triggeredBy="#b1">
+ *     And here's some amazing content. It's very engaging. Right?
+ * </Popover>
+ * ```
+ */
 export default class Popover extends SvelteComponentTyped<PopoverProps, PopoverEvents, PopoverSlots> {
 }
 export {};

package/dist/popover/Popover.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/popover/Popover.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
+{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/popover/Popover.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/progressbars/Progressbar.svelte

@@ -3,10 +3,11 @@ export let progress = '45';
 export let size = 'h-2.5';
 export let labelInside = false;
 export let labelOutside = '';
-export let color = 'blue';
+export let color = 'primary';
 export let labelInsideClass = 'text-blue-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
 // let barColor: string;
 const barColors = {
+    primary: 'bg-primary-600',
     blue: 'bg-blue-600',
     gray: 'bg-gray-600 dark:bg-gray-300',
     red: 'bg-red-600 dark:bg-red-500',
@@ -32,3 +33,24 @@ const barColors = {
     <div class={classNames(barColors[color], size, 'rounded-full')} style="width: {progress}%" />
   {/if}
 </div>
+
+<!--
+  @component
+  ## Features
+  [Go to Progress Bar](https://flowbite-svelte.com/docs/components/progress)
+  ## Props
+  @prop progress: string = '45';
+  @prop size: string = 'h-2.5';
+  @prop labelInside: boolean = false;
+  @prop labelOutside: string = '';
+  @prop color: 'primary'| 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'primary';
+  @prop labelInsideClass: string = 'text-blue-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
+  ## Example
+  ```
+  <script>
+    import { Progressbar } from 'flowbite-svelte'
+  </script>
+
+  <Progressbar progress="50" />
+  ```
+-->