flowbite-svelte 0.36.5 → 0.37.1

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

@@ -53,3 +53,44 @@ 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-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;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;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,9 +1,10 @@
-<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
@@ -35,3 +36,27 @@ export let id = 'star';
     141.489, 197.361, 165.000, 185.000" />
   </g>
 </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} />
+  ```
+-->

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

@@ -19,6 +19,28 @@ declare const __propDef: {
 export type StarProps = typeof __propDef.props;
 export type StarEvents = typeof __propDef.events;
 export type StarSlots = typeof __propDef.slots;
+/**
+ * ## 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} />
+ * ```
+ */
 export default class Star extends SvelteComponentTyped<StarProps, StarEvents, StarSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Star.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/Star.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAkCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,oBAAoB,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CACvF"}
+{"version":3,"file":"Star.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/Star.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,oBAAoB,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CACvF"}

package/dist/ratings/Thumbup.svelte

@@ -37,3 +37,27 @@ export let id = 'thumbup';
     stroke-linejoin="round"
     d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 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-.75A2.25 2.25 0 0116.5 4.5c0 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.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z" />
 </svg>
+
+<!--
+  @component
+  ## Features
+  [Go to Rating](https://flowbite-svelte.com/docs/components/rating)
+  ## Props
+  @prop fillPercent: number = 100;
+  @prop fillColor: string = '#00b500';
+  @prop strokeColor: string = '#00b500';
+  @prop size: number = 24;
+  @prop ariaLabel: string = 'thumbup';
+  @prop id: string = 'thumbup';
+  ## Event
+  - on:click
+  ## Example
+  ```
+  <script>
+    import { Rating } from 'flowbite-svelte';
+  </script>
+
+  <Rating total={5} rating={4.7} id="example-5c" icon={Thumbup}/>
+  <Rating total={10} rating={8.2} id="example-5d" icon={Thumbup}/>
+  ```
+-->

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

@@ -19,6 +19,28 @@ declare const __propDef: {
 export type ThumbupProps = typeof __propDef.props;
 export type ThumbupEvents = typeof __propDef.events;
 export type ThumbupSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Rating](https://flowbite-svelte.com/docs/components/rating)
+ * ## Props
+ * @prop fillPercent: number = 100;
+ * @prop fillColor: string = '#00b500';
+ * @prop strokeColor: string = '#00b500';
+ * @prop size: number = 24;
+ * @prop ariaLabel: string = 'thumbup';
+ * @prop id: string = 'thumbup';
+ * ## Event
+ * - on:click
+ * ## Example
+ * ```
+ * <script>
+ *   import { Rating } from 'flowbite-svelte';
+ * </script>
+ *
+ * <Rating total={5} rating={4.7} id="example-5c" icon={Thumbup}/>
+ * <Rating total={10} rating={8.2} id="example-5d" icon={Thumbup}/>
+ * ```
+ */
 export default class Thumbup extends SvelteComponentTyped<ThumbupProps, ThumbupEvents, ThumbupSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Thumbup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/Thumbup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA6BD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,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":"Thumbup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ratings/Thumbup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+BD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,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;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/sidebars/Sidebar.svelte

@@ -5,3 +5,70 @@ export let asideClass = 'w-64';
 <aside {...$$restProps} class={classNames(asideClass, $$props.class)} aria-label="Sidebar">
   <slot />
 </aside>
+
+<!--
+  @component
+  ## Features
+  [Go to Sidebar](https://flowbite-svelte.com/docs/components/sidebar)
+  ## Props
+  @prop asideClass: string = 'w-64';
+  ## Example
+  ```
+  <script>
+    import { page } from '$app/stores';
+    import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper } from 'flowbite-svelte';
+    let spanClass = 'flex-1 ml-3 whitespace-nowrap';
+    $: activeUrl = $page.url.pathname
+  </script>
+
+  <Sidebar>
+    <SidebarWrapper>
+      <SidebarGroup>
+        <SidebarItem label="Dashboard">
+        <svelte:fragment slot="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" /><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" /></svg>
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Kanban" {spanClass}>
+          <svelte:fragment slot="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" /></svg>
+          </svelte:fragment>
+          <svelte:fragment slot="subtext">
+            <span
+              class="inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300"
+              >Pro</span
+            >
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Inbox" {spanClass}>
+        <svelte:fragment slot="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859M12 3v8.25m0 0l-3-3m3 3l3-3" /></svg>
+          </svelte:fragment>
+          <svelte:fragment slot="subtext">
+            <span
+              class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200"
+              >3</span
+            >
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Sidebar" href='/docs/components/sidebar' active={activeUrl === '/docs/components/sidebar'}>
+          <svelte:fragment slot="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Sign In">
+          <svelte:fragment slot="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" /></svg>
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Sign Up">
+          <svelte:fragment slot="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" /></svg>
+          </svelte:fragment>
+        </SidebarItem>
+      </SidebarGroup>
+    </SidebarWrapper>
+  </Sidebar>
+  ```
+  
+-->