flowbite-svelte 0.36.5 → 0.37.2

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

@@ -6,7 +6,7 @@ declare const __propDef: {
         size?: string | undefined;
         labelInside?: boolean | undefined;
         labelOutside?: string | undefined;
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "blue" | undefined;
+        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "blue" | "primary" | undefined;
         labelInsideClass?: string | undefined;
     };
     events: {
@@ -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: '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" />
+ * ```
+ */
 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;AAgDD,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>
+  ```
+-->

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"}

package/dist/ratings/RatingComment.svelte

@@ -58,3 +58,50 @@ let grayStars = comment.total - roundedRating;
     {/if}
   </aside>
 </article>
+
+<!--
+  @component
+  ## Features
+  [Go to Rating](https://flowbite-svelte.com/docs/components/rating)
+  ## Props
+  @prop ceil: boolean = false;
+  @prop helpfullink: string = '';
+  @prop abuselink: string = '';
+  @prop comment: {
+    id: string;
+    user: {
+      name: string;
+      img: {
+        src: string;
+        alt: string;
+      };
+      joined: string;
+    };
+    total: number;
+    rating: number;
+    heading: string;
+    address: string;
+    datetime: string;
+  };
+  ## Example
+  ```
+  <script>
+    import { RatingComment } from 'flowbite-svelte';
+  </script>
+
+  <RatingComment {comment} helpfullink="/" abuselink="/">
+    <p class="mb-2 font-light text-gray-500 dark:text-gray-400">
+      This is my third Invicta Pro Diver. They are just fantastic value.
+    </p>
+    <p class="mb-3 font-light text-gray-500 dark:text-gray-400">
+      It is obviously not the same build quality as those very expensive watches.
+    </p>
+    <a
+      href="/"
+      class="block mb-5 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+      >Read more</a
+    >
+    <svelte:fragment slot="evaluation">19 people found this helpful</svelte:fragment>
+  </RatingComment>
+  ```
+-->

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

@@ -32,6 +32,51 @@ declare const __propDef: {
 export type RatingCommentProps = typeof __propDef.props;
 export type RatingCommentEvents = typeof __propDef.events;
 export type RatingCommentSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Rating](https://flowbite-svelte.com/docs/components/rating)
+ * ## Props
+ * @prop ceil: boolean = false;
+ * @prop helpfullink: string = '';
+ * @prop abuselink: string = '';
+ * @prop comment: {
+ *   id: string;
+ *   user: {
+ *     name: string;
+ *     img: {
+ *       src: string;
+ *       alt: string;
+ *     };
+ *     joined: string;
+ *   };
+ *   total: number;
+ *   rating: number;
+ *   heading: string;
+ *   address: string;
+ *   datetime: string;
+ * };
+ * ## Example
+ * ```
+ * <script>
+ *   import { RatingComment } from 'flowbite-svelte';
+ * </script>
+ *
+ * <RatingComment {comment} helpfullink="/" abuselink="/">
+ *   <p class="mb-2 font-light text-gray-500 dark:text-gray-400">
+ *     This is my third Invicta Pro Diver. They are just fantastic value.
+ *   </p>
+ *   <p class="mb-3 font-light text-gray-500 dark:text-gray-400">
+ *     It is obviously not the same build quality as those very expensive watches.
+ *   </p>
+ *   <a
+ *     href="/"
+ *     class="block mb-5 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+ *     >Read more</a
+ *   >
+ *   <svelte:fragment slot="evaluation">19 people found this helpful</svelte:fragment>
+ * </RatingComment>
+ * ```
+ */
 export default class RatingComment extends SvelteComponentTyped<RatingCommentProps, RatingCommentEvents, RatingCommentSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"RatingComment.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/RatingComment.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgGD,QAAA,MAAM,SAAS;;;;;iBAhB0J;YACrK,EAAE,EAAE,MAAM,CAAC;YACX,IAAI,EAAE;gBACJ,MAAM,MAAM,CAAC;gBACb,GAAG,EAAE;oBACH,GAAG,EAAE,MAAM,CAAC;oBACZ,GAAG,EAAE,MAAM,CAAC;iBACb,CAAC;gBACF,MAAM,EAAE,MAAM,CAAC;aAChB,CAAC;YACF,KAAK,EAAE,MAAM,CAAC;YACd,MAAM,EAAE,MAAM,CAAC;YACf,OAAO,EAAE,MAAM,CAAC;YAChB,OAAO,EAAE,MAAM,CAAC;YAChB,QAAQ,EAAE,MAAM,CAAC;SAClB;;;;;;;;;CACoD,CAAC;AACxD,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":"RatingComment.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/RatingComment.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAkGD,QAAA,MAAM,SAAS;;;;;iBAhB0J;YACrK,EAAE,EAAE,MAAM,CAAC;YACX,IAAI,EAAE;gBACJ,MAAM,MAAM,CAAC;gBACb,GAAG,EAAE;oBACH,GAAG,EAAE,MAAM,CAAC;oBACZ,GAAG,EAAE,MAAM,CAAC;iBACb,CAAC;gBACF,MAAM,EAAE,MAAM,CAAC;aAChB,CAAC;YACF,KAAK,EAAE,MAAM,CAAC;YACd,MAAM,EAAE,MAAM,CAAC;YACf,OAAO,EAAE,MAAM,CAAC;YAChB,OAAO,EAAE,MAAM,CAAC;YAChB,QAAQ,EAAE,MAAM,CAAC;SAClB;;;;;;;;;CACoD,CAAC;AACxD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/ratings/Review.svelte

@@ -61,3 +61,59 @@ export let liClass = 'flex items-center';
     <slot />
   </div>
 </article>
+
+<!--
+  @component
+  ## Features
+  [Go to Rating](https://flowbite-svelte.com/docs/components/rating)
+  ## Props
+  @prop review: ReviewType;
+  @prop articleClass: string = 'md:gap-8 md:grid md:grid-cols-3';
+  @prop divClass: string = 'flex items-center mb-6 space-x-4';
+  @prop imgClass: string = 'w-10 h-10 rounded-full';
+  @prop ulClass: string = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
+  @prop liClass: string = 'flex items-center';
+  ## Example
+  ```
+  <script>
+    import { Review } from 'flowbite-svelte';
+  </script>
+
+  <Review {review}>
+    <p class="mb-2 font-light text-gray-500 dark:text-gray-400">
+      The flat was spotless, very comfortable, and the host was amazing..
+    </p>
+    <p class="mb-5 font-light text-gray-500 dark:text-gray-400">
+      It is obviously not the same build quality as those very expensive watches.
+    </p>
+    <svelte:fragment slot="item1">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 mr-2"><path fill-rule="evenodd" d="M4.5 2.25a.75.75 0 000 1.5v16.5h-.75a.75.75 0 000 1.5h16.5a.75.75 0 000-1.5h-.75V3.75a.75.75 0 000-1.5h-15zM9 6a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5H9zm-.75 3.75A.75.75 0 019 9h1.5a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75zM9 12a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5H9zm3.75-5.25A.75.75 0 0113.5 6H15a.75.75 0 010 1.5h-1.5a.75.75 0 01-.75-.75zM13.5 9a.75.75 0 000 1.5H15A.75.75 0 0015 9h-1.5zm-.75 3.75a.75.75 0 01.75-.75H15a.75.75 0 010 1.5h-1.5a.75.75 0 01-.75-.75zM9 19.5v-2.25a.75.75 0 01.75-.75h4.5a.75.75 0 01.75.75v2.25a.75.75 0 01-.75.75h-4.5A.75.75 0 019 19.5z" clip-rule="evenodd" /></svg>
+      {review.item1}
+    </svelte:fragment>
+    <svelte:fragment slot="item2">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 mr-2"><path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z" clip-rule="evenodd" /></svg>
+      {review.item2}
+    </svelte:fragment>
+    <svelte:fragment slot="item3">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 mr-2"><path fill-rule="evenodd" d="M8.25 6.75a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0zM15.75 9.75a3 3 0 116 0 3 3 0 01-6 0zM2.25 9.75a3 3 0 116 0 3 3 0 01-6 0zM6.31 15.117A6.745 6.745 0 0112 12a6.745 6.745 0 016.709 7.498.75.75 0 01-.372.568A12.696 12.696 0 0112 21.75c-2.305 0-4.47-.612-6.337-1.684a.75.75 0 01-.372-.568 6.787 6.787 0 011.019-4.38z" clip-rule="evenodd" /><path d="M5.082 14.254a8.287 8.287 0 00-1.308 5.135 9.687 9.687 0 01-1.764-.44l-.115-.04a.563.563 0 01-.373-.487l-.01-.121a3.75 3.75 0 013.57-4.047zM20.226 19.389a8.287 8.287 0 00-1.308-5.135 3.75 3.75 0 013.57 4.047l-.01.121a.563.563 0 01-.373.486l-.115.04c-.567.2-1.156.349-1.764.441z" /></svg>
+      {review.item3}
+    </svelte:fragment>
+    <aside class="flex items-center mt-3 space-x-5">
+      <a
+        href="/"
+        class="inline-flex items-center text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-1"><path d="M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 016 15.375c0-1.75.599-3.358 1.602-4.634.151-.192.373-.309.6-.397.473-.183.89-.514 1.212-.924a9.042 9.042 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75 2.25 2.25 0 012.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23h-.777zM2.331 10.977a11.969 11.969 0 00-.831 4.398 12 12 0 00.52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 01-.924-3.977c0-1.708.476-3.305 1.302-4.666.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227z" /></svg>
+        Helpful
+      </a>
+      <a
+        href="/"
+        class="inline-flex items-center text-sm font-medium text-blue-600 hover:underline dark:text-blue-500 group"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-1"><path d="M15.73 5.25h1.035A7.465 7.465 0 0118 9.375a7.465 7.465 0 01-1.235 4.125h-.148c-.806 0-1.534.446-2.031 1.08a9.04 9.04 0 01-2.861 2.4c-.723.384-1.35.956-1.653 1.715a4.498 4.498 0 00-.322 1.672V21a.75.75 0 01-.75.75 2.25 2.25 0 01-2.25-2.25c0-1.152.26-2.243.723-3.218C7.74 15.724 7.366 15 6.748 15H3.622c-1.026 0-1.945-.694-2.054-1.715A12.134 12.134 0 011.5 12c0-2.848.992-5.464 2.649-7.521.388-.482.987-.729 1.605-.729H9.77a4.5 4.5 0 011.423.23l3.114 1.04a4.5 4.5 0 001.423.23zM21.669 13.773c.536-1.362.831-2.845.831-4.398 0-1.22-.182-2.398-.52-3.507-.26-.85-1.084-1.368-1.973-1.368H19.1c-.445 0-.72.498-.523.898.591 1.2.924 2.55.924 3.977a8.959 8.959 0 01-1.302 4.666c-.245.403.028.959.5.959h1.053c.832 0 1.612-.453 1.918-1.227z" /></svg>
+        Not helpful
+      </a>
+    </aside>
+  </Review>
+  ```
+-->

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

@@ -24,6 +24,60 @@ declare const __propDef: {
 export type ReviewProps = typeof __propDef.props;
 export type ReviewEvents = typeof __propDef.events;
 export type ReviewSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Rating](https://flowbite-svelte.com/docs/components/rating)
+ * ## Props
+ * @prop review: ReviewType;
+ * @prop articleClass: string = 'md:gap-8 md:grid md:grid-cols-3';
+ * @prop divClass: string = 'flex items-center mb-6 space-x-4';
+ * @prop imgClass: string = 'w-10 h-10 rounded-full';
+ * @prop ulClass: string = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
+ * @prop liClass: string = 'flex items-center';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Review } from 'flowbite-svelte';
+ * </script>
+ *
+ * <Review {review}>
+ *   <p class="mb-2 font-light text-gray-500 dark:text-gray-400">
+ *     The flat was spotless, very comfortable, and the host was amazing..
+ *   </p>
+ *   <p class="mb-5 font-light text-gray-500 dark:text-gray-400">
+ *     It is obviously not the same build quality as those very expensive watches.
+ *   </p>
+ *   <svelte:fragment slot="item1">
+ *     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 mr-2"><path fill-rule="evenodd" d="M4.5 2.25a.75.75 0 000 1.5v16.5h-.75a.75.75 0 000 1.5h16.5a.75.75 0 000-1.5h-.75V3.75a.75.75 0 000-1.5h-15zM9 6a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5H9zm-.75 3.75A.75.75 0 019 9h1.5a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75zM9 12a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5H9zm3.75-5.25A.75.75 0 0113.5 6H15a.75.75 0 010 1.5h-1.5a.75.75 0 01-.75-.75zM13.5 9a.75.75 0 000 1.5H15A.75.75 0 0015 9h-1.5zm-.75 3.75a.75.75 0 01.75-.75H15a.75.75 0 010 1.5h-1.5a.75.75 0 01-.75-.75zM9 19.5v-2.25a.75.75 0 01.75-.75h4.5a.75.75 0 01.75.75v2.25a.75.75 0 01-.75.75h-4.5A.75.75 0 019 19.5z" clip-rule="evenodd" /></svg>
+ *     {review.item1}
+ *   </svelte:fragment>
+ *   <svelte:fragment slot="item2">
+ *     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 mr-2"><path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z" clip-rule="evenodd" /></svg>
+ *     {review.item2}
+ *   </svelte:fragment>
+ *   <svelte:fragment slot="item3">
+ *     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 mr-2"><path fill-rule="evenodd" d="M8.25 6.75a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0zM15.75 9.75a3 3 0 116 0 3 3 0 01-6 0zM2.25 9.75a3 3 0 116 0 3 3 0 01-6 0zM6.31 15.117A6.745 6.745 0 0112 12a6.745 6.745 0 016.709 7.498.75.75 0 01-.372.568A12.696 12.696 0 0112 21.75c-2.305 0-4.47-.612-6.337-1.684a.75.75 0 01-.372-.568 6.787 6.787 0 011.019-4.38z" clip-rule="evenodd" /><path d="M5.082 14.254a8.287 8.287 0 00-1.308 5.135 9.687 9.687 0 01-1.764-.44l-.115-.04a.563.563 0 01-.373-.487l-.01-.121a3.75 3.75 0 013.57-4.047zM20.226 19.389a8.287 8.287 0 00-1.308-5.135 3.75 3.75 0 013.57 4.047l-.01.121a.563.563 0 01-.373.486l-.115.04c-.567.2-1.156.349-1.764.441z" /></svg>
+ *     {review.item3}
+ *   </svelte:fragment>
+ *   <aside class="flex items-center mt-3 space-x-5">
+ *     <a
+ *       href="/"
+ *       class="inline-flex items-center text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+ *     >
+ *       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-1"><path d="M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 016 15.375c0-1.75.599-3.358 1.602-4.634.151-.192.373-.309.6-.397.473-.183.89-.514 1.212-.924a9.042 9.042 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75 2.25 2.25 0 012.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23h-.777zM2.331 10.977a11.969 11.969 0 00-.831 4.398 12 12 0 00.52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 01-.924-3.977c0-1.708.476-3.305 1.302-4.666.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227z" /></svg>
+ *       Helpful
+ *     </a>
+ *     <a
+ *       href="/"
+ *       class="inline-flex items-center text-sm font-medium text-blue-600 hover:underline dark:text-blue-500 group"
+ *     >
+ *       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-1"><path d="M15.73 5.25h1.035A7.465 7.465 0 0118 9.375a7.465 7.465 0 01-1.235 4.125h-.148c-.806 0-1.534.446-2.031 1.08a9.04 9.04 0 01-2.861 2.4c-.723.384-1.35.956-1.653 1.715a4.498 4.498 0 00-.322 1.672V21a.75.75 0 01-.75.75 2.25 2.25 0 01-2.25-2.25c0-1.152.26-2.243.723-3.218C7.74 15.724 7.366 15 6.748 15H3.622c-1.026 0-1.945-.694-2.054-1.715A12.134 12.134 0 011.5 12c0-2.848.992-5.464 2.649-7.521.388-.482.987-.729 1.605-.729H9.77a4.5 4.5 0 011.423.23l3.114 1.04a4.5 4.5 0 001.423.23zM21.669 13.773c.536-1.362.831-2.845.831-4.398 0-1.22-.182-2.398-.52-3.507-.26-.85-1.084-1.368-1.973-1.368H19.1c-.445 0-.72.498-.523.898.591 1.2.924 2.55.924 3.977a8.959 8.959 0 01-1.302 4.666c-.245.403.028.959.5.959h1.053c.832 0 1.612-.453 1.918-1.227z" /></svg>
+ *       Not helpful
+ *     </a>
+ *   </aside>
+ * </Review>
+ * ```
+ */
 export default class Review extends SvelteComponentTyped<ReviewProps, ReviewEvents, ReviewSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Review.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/Review.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAuE3C,QAAA,MAAM,SAAS;;;gBAD2I,UAAU;;;;;;;;;;;;;;;;;CACtF,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":"Review.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/Review.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA0E3C,QAAA,MAAM,SAAS;;;gBAD2I,UAAU;;;;;;;;;;;;;;;;;CACtF,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/ratings/ScoreRating.svelte

@@ -1,10 +1,12 @@
 <script>export let ratings = [];
 export let ratings2 = [];
 export let headerLabel;
-export let desc1Class = 'bg-blue-100 w-8 text-blue-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-blue-200 dark:text-blue-800';
+export let desc1Class = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800';
 export let desc2Class = 'ml-2 w-24 font-medium text-gray-900 dark:text-white';
 export let desc3spanClass = 'mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500';
 export let desc3pClass = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray-400';
+export let linkClass = 'ml-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
+export let barColor = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
 </script>
 
 <div class="flex items-center mb-5">
@@ -19,10 +21,7 @@ export let desc3pClass = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray
     <p class={desc3pClass}>{headerLabel.desc3}</p>
   {/if}
   {#if headerLabel.link}
-    <a
-      href={headerLabel.link.url}
-      class="ml-auto w-32 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
-      >{headerLabel.link.label}</a>
+    <a href={headerLabel.link.url} class={linkClass}>{headerLabel.link.label}</a>
   {/if}
 </div>
 <div class="gap-8 sm:grid sm:grid-cols-2">
@@ -32,7 +31,7 @@ export let desc3pClass = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray
         <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{label}</dt>
         <dd class="flex items-center mb-3">
           <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 mr-2">
-            <div class="bg-blue-600 h-2.5 rounded dark:bg-blue-500" style="width: {rating * 10}%" />
+            <div class={barColor} style="width: {rating * 10}%" />
           </div>
           <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
         </dd>
@@ -45,7 +44,7 @@ export let desc3pClass = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray
         <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{label}</dt>
         <dd class="flex items-center mb-3">
           <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 mr-2">
-            <div class="bg-blue-600 h-2.5 rounded dark:bg-blue-500" style="width: {rating * 10}%" />
+            <div class={barColor} style="width: {rating * 10}%" />
           </div>
           <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
         </dd>
@@ -53,3 +52,46 @@ export let desc3pClass = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray
     {/each}
   </div>
 </div>
+
+<!--
+  @component
+  ## Features
+  [Go to Rating](https://flowbite-svelte.com/docs/components/rating)
+  ## Props
+  @prop ratings: { label: string; rating: number }[] = [];
+  @prop ratings2: { label: string; rating: number }[] = [];
+  @prop headerLabel: {
+    desc1: string;
+    desc2: string;
+    desc3: string;
+    link: { label: string; url: string };
+  };
+  @prop desc1Class: string =
+    'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800';
+  @prop desc2Class: string = 'ml-2 w-24 font-medium text-gray-900 dark:text-white';
+  @prop desc3spanClass: string = 'mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500';
+  @prop desc3pClass: string = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray-400';
+  @prop linkClass: string = 'ml-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
+  @prop barColor: string = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
+  ## Example
+  ```
+  <script>
+    import { ScoreRating } from 'flowbite-svelte';
+  </script>
+
+  <ScoreRating
+    {headerLabel}
+    ratings={[
+      { label: 'Staff', rating: 8.8 },
+      { label: 'Comfort', rating: 8.9 },
+      { label: 'Free WiFi', rating: 8.8 },
+      { label: 'Facilities', rating: 5.4 }
+    ]}
+    ratings2={[
+      { label: 'Value for money', rating: 8.9 },
+      { label: 'Cleanliness', rating: 7.0 },
+      { label: 'Location', rating: 8.0 }
+    ]}
+  />
+  ```
+-->

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

@@ -22,6 +22,8 @@ declare const __propDef: {
         desc2Class?: string | undefined;
         desc3spanClass?: string | undefined;
         desc3pClass?: string | undefined;
+        linkClass?: string | undefined;
+        barColor?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -31,6 +33,47 @@ declare const __propDef: {
 export type ScoreRatingProps = typeof __propDef.props;
 export type ScoreRatingEvents = typeof __propDef.events;
 export type ScoreRatingSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Rating](https://flowbite-svelte.com/docs/components/rating)
+ * ## Props
+ * @prop ratings: { label: string; rating: number }[] = [];
+ * @prop ratings2: { label: string; rating: number }[] = [];
+ * @prop headerLabel: {
+ *   desc1: string;
+ *   desc2: string;
+ *   desc3: string;
+ *   link: { label: string; url: string };
+ * };
+ * @prop desc1Class: string =
+ *   'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800';
+ * @prop desc2Class: string = 'ml-2 w-24 font-medium text-gray-900 dark:text-white';
+ * @prop desc3spanClass: string = 'mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500';
+ * @prop desc3pClass: string = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray-400';
+ * @prop linkClass: string = 'ml-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
+ * @prop barColor: string = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
+ * ## Example
+ * ```
+ * <script>
+ *   import { ScoreRating } from 'flowbite-svelte';
+ * </script>
+ *
+ * <ScoreRating
+ *   {headerLabel}
+ *   ratings={[
+ *     { label: 'Staff', rating: 8.8 },
+ *     { label: 'Comfort', rating: 8.9 },
+ *     { label: 'Free WiFi', rating: 8.8 },
+ *     { label: 'Facilities', rating: 5.4 }
+ *   ]}
+ *   ratings2={[
+ *     { label: 'Value for money', rating: 8.9 },
+ *     { label: 'Cleanliness', rating: 7.0 },
+ *     { label: 'Location', rating: 8.0 }
+ *   ]}
+ * />
+ * ```
+ */
 export default class ScoreRating extends SvelteComponentTyped<ScoreRatingProps, ScoreRatingEvents, ScoreRatingSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"ScoreRating.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/ScoreRating.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAoED,QAAA,MAAM,SAAS;;;mBANyM,MAAM;oBAAU,MAAM;;;mBAA0B,MAAM;oBAAU,MAAM;;qBAAmB;YAC7S,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;YACd,IAAI,EAAE;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,GAAG,EAAE,MAAM,CAAA;aAAE,CAAC;SACtC;;;;;;;;;;CACoD,CAAC;AACxD,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":"ScoreRating.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/ScoreRating.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyED,QAAA,MAAM,SAAS;;;mBANqP,MAAM;oBAAU,MAAM;;;mBAA0B,MAAM;oBAAU,MAAM;;qBAAmB;YACzV,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;YACd,IAAI,EAAE;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,GAAG,EAAE,MAAM,CAAA;aAAE,CAAC;SACtC;;;;;;;;;;;;CACoD,CAAC;AACxD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}