flowbite-svelte 0.36.4 → 0.37.1

package/dist/ratings/RatingComment.svelte

@@ -23,7 +23,9 @@ let grayStars = comment.total - roundedRating;
   </div>
   <div class="flex items-center mb-1">
     <Rating total={comment.total} rating={comment.rating}>
-      <p slot="text" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">{comment.rating} out of {comment.total}</p>
+      <p slot="text" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+        {comment.rating} out of {comment.total}
+      </p>
     </Rating>
     {#if comment.heading}
       <h3 class="ml-2 text-sm font-semibold text-gray-900 dark:text-white">
@@ -56,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;AA8FD,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

@@ -8,57 +8,112 @@ export let liClass = 'flex items-center';
 </script>
 
 <article class={classNames(articleClass, $$props.classArticle)}>
-	<div>
-		<div class={classNames(divClass, $$props.classDiv)}>
-			<img class={classNames(imgClass, $$props.classImg)} src={review.imgSrc} alt={review.imgAlt} />
-			<div class="space-y-1 font-medium dark:text-white">
-				<p>{review.name}</p>
-				{#if review.address}
-					<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
-						<slot name="address" />
-					</div>
-				{/if}
-			</div>
-		</div>
-		{#if $$slots.item1 || $$slots.item2 || $$slots.item3}
-			<ul class={classNames(ulClass, $$props.classUl)}>
-				{#if $$slots.item1}
-					<li class={classNames(liClass, $$props.classLi)}>
-						<slot name="item1" />
-					</li>
-				{/if}
-				{#if $$slots.item2}
-					<li class={classNames(liClass, $$props.classLi)}>
-						<slot name="item2" />
-					</li>
-				{/if}
-				{#if $$slots.item3}
-					<li class={classNames(liClass, $$props.classLi)}>
-						<slot name="item3" />
-					</li>
-				{/if}
-			</ul>
-		{/if}
-	</div>
-	<div class="col-span-2 mt-6 md:mt-0">
-		<div class="flex items-start mb-5">
-			<div class="pr-4">
-				{#if review.reviewDate}
-					<footer>
-						<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
-							Reviewed: {review.reviewDate}
-						</p>
-					</footer>
-				{/if}
-				<h4 class="text-xl font-bold text-gray-900 dark:text-white">
-					{review.title}
-				</h4>
-			</div>
-			<p
-				class="bg-blue-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded">
-				{review.rating}
-			</p>
-		</div>
-		<slot />
-	</div>
+  <div>
+    <div class={classNames(divClass, $$props.classDiv)}>
+      <img class={classNames(imgClass, $$props.classImg)} src={review.imgSrc} alt={review.imgAlt} />
+      <div class="space-y-1 font-medium dark:text-white">
+        <p>{review.name}</p>
+        {#if review.address}
+          <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
+            <slot name="address" />
+          </div>
+        {/if}
+      </div>
+    </div>
+    {#if $$slots.item1 || $$slots.item2 || $$slots.item3}
+      <ul class={classNames(ulClass, $$props.classUl)}>
+        {#if $$slots.item1}
+          <li class={classNames(liClass, $$props.classLi)}>
+            <slot name="item1" />
+          </li>
+        {/if}
+        {#if $$slots.item2}
+          <li class={classNames(liClass, $$props.classLi)}>
+            <slot name="item2" />
+          </li>
+        {/if}
+        {#if $$slots.item3}
+          <li class={classNames(liClass, $$props.classLi)}>
+            <slot name="item3" />
+          </li>
+        {/if}
+      </ul>
+    {/if}
+  </div>
+  <div class="col-span-2 mt-6 md:mt-0">
+    <div class="flex items-start mb-5">
+      <div class="pr-4">
+        {#if review.reviewDate}
+          <footer>
+            <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
+              Reviewed: {review.reviewDate}
+            </p>
+          </footer>
+        {/if}
+        <h4 class="text-xl font-bold text-gray-900 dark:text-white">
+          {review.title}
+        </h4>
+      </div>
+      <p class="bg-blue-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded">
+        {review.rating}
+      </p>
+    </div>
+    <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

@@ -8,45 +8,89 @@ export let desc3pClass = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray
 </script>
 
 <div class="flex items-center mb-5">
-	{#if headerLabel.desc1}
-		<p class={desc1Class}>{headerLabel.desc1}</p>
-	{/if}
-	{#if headerLabel.desc2}
-		<p class={desc2Class}>{headerLabel.desc2}</p>
-	{/if}
-	{#if headerLabel.desc3}
-		<span class={desc3spanClass} />
-		<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>
-	{/if}
+  {#if headerLabel.desc1}
+    <p class={desc1Class}>{headerLabel.desc1}</p>
+  {/if}
+  {#if headerLabel.desc2}
+    <p class={desc2Class}>{headerLabel.desc2}</p>
+  {/if}
+  {#if headerLabel.desc3}
+    <span class={desc3spanClass} />
+    <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>
+  {/if}
 </div>
 <div class="gap-8 sm:grid sm:grid-cols-2">
-	<div>
-		{#each ratings as { label, rating }}
-			<dl>
-				<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>
-					<span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
-				</dd>
-			</dl>
-		{/each}
-	</div>
-	<div>
-		{#each ratings2 as { label, rating }}
-			<dl>
-				<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>
-					<span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
-				</dd>
-			</dl>
-		{/each}
-	</div>
+  <div>
+    {#each ratings as { label, rating }}
+      <dl>
+        <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>
+          <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
+        </dd>
+      </dl>
+    {/each}
+  </div>
+  <div>
+    {#each ratings2 as { label, rating }}
+      <dl>
+        <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>
+          <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
+        </dd>
+      </dl>
+    {/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-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';
+  @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';
+  ## 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

@@ -31,6 +31,45 @@ 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-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';
+ * @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';
+ * ## 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;AAyDD,QAAA,MAAM,SAAS;;;mBADyM,MAAM;oBAAU,MAAM;;;mBAA0B,MAAM;oBAAU,MAAM;;qBAAmB;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,GAAG,EAAE,MAAM,CAAA;aAAE,CAAA;SAAE;;;;;;;;;;CAC/U,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;AAsED,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/ratings/Star.svelte

@@ -1,37 +1,62 @@
-<script>export let fillPercent = 100;
+<script>import generateId from '../utils/generateId';
+export let fillPercent = 100;
 export let fillColor = '#F5CA14';
 export let strokeColor = '#F5CA14';
 export let size = 24;
 export let ariaLabel = 'star';
-export let id = "star";
+export let id = generateId();
 </script>
 
-<svg 
-width={size}
-height={size}
-class={$$props.class}
-{...$$restProps}
-aria-label={ariaLabel}
-viewBox="100 100 120 120"
-on:click
->
+<svg
+  width={size}
+  height={size}
+  class={$$props.class}
+  {...$$restProps}
+  aria-label={ariaLabel}
+  viewBox="100 100 120 120"
+  on:click>
   <defs>
     <linearGradient {id}>
       {#if fillPercent !== 100}
-      <stop offset="0%" stop-color="{fillColor}" />
-      <stop offset="{fillPercent}%" stop-color="{fillColor}" />
-      <stop offset="{fillPercent}%" stop-color="transparent" />
-      <stop offset="100%" stop-color="transparent" />
+        <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>
-  <g fill="url(#{id})" stroke="{strokeColor}" stroke-width="2">
-    <polygon points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180, 
+  <g fill="url(#{id})" stroke={strokeColor} stroke-width="2">
+    <polygon
+      points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180, 
     203.042, 152.639, 176.756, 148.820, 165.000, 125.000, 
     153.244, 148.820, 126.958, 152.639, 145.979, 171.180,
-    141.489, 197.361, 165.000, 185.000"/>
+    141.489, 197.361, 165.000, 185.000" />
   </g>
-</svg>
+</svg>
+
+<!--
+  @component
+  ## Features
+  [Go to Rating](https://flowbite-svelte.com/docs/components/rating)
+  ## Props
+  @prop fillPercent: number = 100;
+  @prop fillColor: string = '#F5CA14';
+  @prop strokeColor: string = '#F5CA14';
+  @prop size: number = 24;
+  @prop ariaLabel: string = 'star';
+  @prop id: string = generateId();
+  ## Event
+  - on:click
+  ## Example
+  ```
+  <script>
+    import { Rating } from 'flowbite-svelte';
+  </script>
+
+  <Rating id="example-1" total={5} size={50} rating={1.4} />
+  <Rating id="example-1b" total={5} size={50} rating={4.66} />
+  ```
+-->