flowbite-svelte 0.36.4 → 0.37.1

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

@@ -8,17 +8,31 @@ export let unit = '%';
 </script>
 
 {#if $$slots.rating}
-	<slot name="rating" />
+  <slot name="rating" />
 {/if}
 {#if $$slots.globalText}
-	<slot name="globalText" />
+  <slot name="globalText" />
 {/if}
 {#each ratings as { label, rating }}
-	<div class={divClass}>
-		<span class={labelClass}>{label}</span>
-		<div class={ratingDivClass}>
-			<div class={ratingClass} style="width: {rating}%" />
-		</div>
-		<span class={rightLabelClass}>{rating}{unit}</span>
-	</div>
+  <div class={divClass}>
+    <span class={labelClass}>{label}</span>
+    <div class={ratingDivClass}>
+      <div class={ratingClass} style="width: {rating}%" />
+    </div>
+    <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

@@ -16,26 +16,39 @@ export let id = 'heart';
   stroke-width="1.5"
   stroke="currentColor"
   fill="none"
-  on:click
->
+  on:click>
   <defs>
     <linearGradient {id}>
       {#if fillPercent !== 100}
-        <stop offset="0%" stop-color="{fillColor}" />
-        <stop offset="{fillPercent}%" stop-color="{fillColor}" />
+        <stop offset="0%" stop-color={fillColor} />
+        <stop offset="{fillPercent}%" stop-color={fillColor} />
         <stop offset="{fillPercent}%" stop-color="transparent" />
         <stop offset="100%" stop-color="transparent" />
       {:else}
-        <stop offset="0%" stop-color="{fillColor}" />
-        <stop offset="100%" stop-color="{fillColor}" />
+        <stop offset="0%" stop-color={fillColor} />
+        <stop offset="100%" stop-color={fillColor} />
       {/if}
     </linearGradient>
   </defs>
   <path
     fill="url(#{id})"
-    stroke="{strokeColor}"
+    stroke={strokeColor}
     stroke-linecap="round"
     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"
-  />
+    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

@@ -20,21 +20,57 @@ let grayStars = total - (fullStars + Math.ceil(rateDiffence));
 
 <div class={classNames(divClass, $$props.class)}>
   {#if count}
-  <svelte:component this={icon} fillPercent={100} {size} />
+    <svelte:component this={icon} fillPercent={100} {size} />
     <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>
     <slot />
   {:else}
     {#each Array(fullStars) as star}
-      <svelte:component this={icon} {size} fillPercent={100} id="{fullStarId}"/>
+      <svelte:component this={icon} {size} fillPercent={100} id={fullStarId} />
     {/each}
-    {#if percentRating }
-      <svelte:component this={icon}  {size} fillPercent={percentRating} id={partialId}/>
+    {#if percentRating}
+      <svelte:component this={icon} {size} fillPercent={percentRating} id={partialId} />
     {/if}
     {#each Array(grayStars) as star}
-      <svelte:component this={icon}  {size} fillPercent={0} id="{grayStarId}"/>
+      <svelte:component this={icon} {size} fillPercent={0} id={grayStarId} />
     {/each}
     {#if $$slots.text}
       <slot name="text" />
     {/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>
+  ```
+-->

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

@@ -22,6 +22,40 @@ declare const __propDef: {
 export type RatingProps = typeof __propDef.props;
 export type RatingEvents = typeof __propDef.events;
 export type RatingSlots = typeof __propDef.slots;
+/**
+ * ## 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>
+ * ```
+ */
 export default class Rating extends SvelteComponentTyped<RatingProps, RatingEvents, RatingSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Rating.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/Rating.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAID,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAiD5C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,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":"Rating.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/Rating.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAID,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAmD5C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}