flowbite-svelte 0.36.5 → 0.37.1

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="https://flowbite.com/docs/images/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="https://flowbite.com/docs/images/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

@@ -32,3 +32,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: 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'blue';
+  @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" />
+  ```
+-->

package/dist/progressbars/Progressbar.svelte.d.ts

@@ -17,6 +17,25 @@ declare const __propDef: {
 export type ProgressbarProps = typeof __propDef.props;
 export type ProgressbarEvents = typeof __propDef.events;
 export type ProgressbarSlots = typeof __propDef.slots;
+/**
+ * ## 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: 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'blue';
+ * @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" />
+ * ```
+ */
 export default class Progressbar extends SvelteComponentTyped<ProgressbarProps, ProgressbarEvents, ProgressbarSlots> {
 }
 export {};

package/dist/progressbars/Progressbar.svelte.d.ts.map

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

package/dist/ratings/AdvancedRating.svelte

@@ -22,3 +22,17 @@ export let unit = '%';
     <span class={rightLabelClass}>{rating}{unit}</span>
   </div>
 {/each}
+
+<!--
+  @component
+  ## Features
+  [Go to Rating](https://flowbite-svelte.com/docs/components/rating)
+  ## Props
+  @prop ratings: { label: string; rating: number }[] = [];
+  @prop divClass: string = 'flex items-center mt-4';
+  @prop labelClass: string = 'text-sm font-medium text-blue-600 dark:text-blue-500';
+  @prop ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700';
+  @prop ratingClass: string = 'h-5 bg-yellow-400 rounded';
+  @prop rightLabelClass: string = 'text-sm font-medium text-blue-600 dark:text-blue-500';
+  @prop unit: string = '%';
+-->

package/dist/ratings/AdvancedRating.svelte.d.ts

@@ -23,6 +23,18 @@ declare const __propDef: {
 export type AdvancedRatingProps = typeof __propDef.props;
 export type AdvancedRatingEvents = typeof __propDef.events;
 export type AdvancedRatingSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Rating](https://flowbite-svelte.com/docs/components/rating)
+ * ## Props
+ * @prop ratings: { label: string; rating: number }[] = [];
+ * @prop divClass: string = 'flex items-center mt-4';
+ * @prop labelClass: string = 'text-sm font-medium text-blue-600 dark:text-blue-500';
+ * @prop ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700';
+ * @prop ratingClass: string = 'h-5 bg-yellow-400 rounded';
+ * @prop rightLabelClass: string = 'text-sm font-medium text-blue-600 dark:text-blue-500';
+ * @prop unit: string = '%';
+ */
 export default class AdvancedRating extends SvelteComponentTyped<AdvancedRatingProps, AdvancedRatingEvents, AdvancedRatingSlots> {
 }
 export {};

package/dist/ratings/AdvancedRating.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdvancedRating.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/AdvancedRating.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA6BD,QAAA,MAAM,SAAS;;;mBADqM,MAAM;oBAAU,MAAM;;;;;;;;;;;;;;;;CACnL,CAAC;AACxD,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":"AdvancedRating.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/AdvancedRating.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+BD,QAAA,MAAM,SAAS;;;mBADqM,MAAM;oBAAU,MAAM;;;;;;;;;;;;;;;;CACnL,CAAC;AACxD,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;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}

package/dist/ratings/Heart.svelte

@@ -37,3 +37,18 @@ export let id = 'heart';
     stroke-linejoin="round"
     d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
 </svg>
+
+<!--
+  @component
+  ## Features
+  [Go to Rating](https://flowbite-svelte.com/docs/components/rating)
+  ## Props
+  @prop fillPercent: number = 100;
+  @prop fillColor: string = '#ff0000';
+  @prop strokeColor: string = '#ff0000';
+  @prop size: number = 24;
+  @prop ariaLabel: string = 'heart';
+  @prop id: string = 'heart';
+  ## Event
+  - on:click
+-->

package/dist/ratings/Heart.svelte.d.ts

@@ -19,6 +19,19 @@ declare const __propDef: {
 export type HeartProps = typeof __propDef.props;
 export type HeartEvents = typeof __propDef.events;
 export type HeartSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Rating](https://flowbite-svelte.com/docs/components/rating)
+ * ## Props
+ * @prop fillPercent: number = 100;
+ * @prop fillColor: string = '#ff0000';
+ * @prop strokeColor: string = '#ff0000';
+ * @prop size: number = 24;
+ * @prop ariaLabel: string = 'heart';
+ * @prop id: string = 'heart';
+ * ## Event
+ * - on:click
+ */
 export default class Heart extends SvelteComponentTyped<HeartProps, HeartEvents, HeartSlots> {
 }
 export {};

package/dist/ratings/Heart.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heart.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/Heart.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA6BD,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":"Heart.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/Heart.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+BD,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;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/ratings/Rating.svelte

@@ -38,3 +38,39 @@ let grayStars = total - (fullStars + Math.ceil(rateDiffence));
     {/if}
   {/if}
 </div>
+
+<!--
+  @component
+  ## Features
+  [Go to Rating](https://flowbite-svelte.com/docs/components/rating)
+  - Setup
+  - Default rating
+  - Stars
+  - Rating with text
+  - Rating count
+  - Icon size and color
+  - Size and color
+  - AdvancedRating component
+  - Different icon
+  - Score rating
+  - Rating comment
+  - Review content
+  ## Props
+  @prop divClass: string = 'flex items-center';
+  @prop size: number = 24;
+  @prop total: number = 5;
+  @prop rating: number = 4;
+  @prop partialId: string = 'partialStar' + generateId();
+  @prop icon: ComponentType = Star;
+  @prop count: boolean = false;  
+  ## Example
+  ```
+  <script>
+    import { Rating } from 'flowbite-svelte';
+  </script>
+
+  <Rating id="example-3" total={5} rating={3.4}>
+    <p slot="text" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">3.4 out of 5</p>
+  </Rating>
+  ```
+-->