flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/progress/type.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { EasingFunction } from "svelte/transition";
+type ColorType = "primary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | undefined;
+interface ProgressbarProps extends HTMLAttributes<HTMLDivElement> {
+    progress?: string | number;
+    precision?: number;
+    tweenDuration?: number;
+    animate?: boolean;
+    size?: string;
+    labelInside?: boolean;
+    labelOutside?: string;
+    easing?: EasingFunction;
+    color?: ColorType;
+    div2Class?: string;
+    oustsideSpanClass?: string;
+    oustsideProgressClass?: string;
+    labeloutsidedivClass?: string;
+    divClass?: string;
+}
+export { type ProgressbarProps };

package/dist/progress/type.js

@@ -0,0 +1 @@
+export {};

package/dist/rating/AdvancedRating.svelte

@@ -1,53 +1,38 @@
-<script>import { twMerge } from "tailwind-merge";
-export let ratings = [];
-export let divClass = "flex items-center mt-4";
-export let labelClass = "text-sm font-medium text-gray-600 dark:text-gray-500";
-export let ratingDivClass = "mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700";
-export let ratingClass = "h-5 bg-yellow-400 rounded";
-export let rightLabelClass = "text-sm font-medium text-gray-600 dark:text-gray-500";
-export let unit = "%";
-export let classDiv = "";
-export let classLabel = "";
-export let classRatingDiv = "";
-export let classRating = "";
-export let classRightLabel = "";
-let divCls = twMerge(divClass, classDiv);
-let labelCls = twMerge(labelClass, classLabel);
-let ratingDivCls = twMerge(ratingDivClass, classRatingDiv);
-let ratingCls = twMerge(ratingClass, classRating);
-let rightLabelCls = twMerge(rightLabelClass, classRightLabel);
+<script lang="ts">
+  import { type AdvancedRatingProps as Props, advancedrating } from ".";
+
+  let { rating, globalText, ratings, divClass, spanClass, div2Class, div3Class, span2Class, unit }: Props = $props();
+
+  const { base, span, div2, div3, span2 } = $derived(advancedrating());
 </script>
 
-{#if $$slots.rating}
-  <slot name="rating"></slot>
+{#if rating}
+  {@render rating()}
 {/if}
-{#if $$slots.globalText}
-  <slot name="globalText"></slot>
+{#if globalText}
+  {@render globalText()}
 {/if}
 {#each ratings as { label, rating }}
-  <div class={divCls}>
-    <span class={labelCls}>{label}</span>
-    <div class={ratingDivCls}>
-      <div class={ratingCls} style="width: {rating}%"></div>
+  <div class={base({ class: divClass })}>
+    <span class={span({ class: spanClass })}>{label}</span>
+    <div class={div2({ class: div2Class })}>
+      <div class={div3({ class: div3Class })} style="width: {rating}%"></div>
     </div>
-    <span class={rightLabelCls}>{rating}{unit}</span>
+    <span class={span2({ class: span2Class })}>{rating}{unit}</span>
   </div>
 {/each}
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let ratings: { label: string;
-@prop export let divClass: string = 'flex items-center mt-4';
-@prop export let labelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
-@prop export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700';
-@prop export let ratingClass: string = 'h-5 bg-yellow-400 rounded';
-@prop export let rightLabelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
-@prop export let unit: string = '%';
-@prop export let classDiv: string = '';
-@prop export let classLabel: string = '';
-@prop export let classRatingDiv: string = '';
-@prop export let classRating: string = '';
-@prop export let classRightLabel: string = '';
+@props: rating: any;
+@props:globalText: any;
+@props:ratings: any;
+@props:divClass: any;
+@props:spanClass: any;
+@props:div2Class: any;
+@props:div3Class: any;
+@props:span2Class: any;
+@props:unit: any;
 -->

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

@@ -1,49 +1,17 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        ratings?: {
-            label: string;
-            rating: number;
-        }[];
-        divClass?: string;
-        labelClass?: string;
-        ratingDivClass?: string;
-        ratingClass?: string;
-        rightLabelClass?: string;
-        unit?: string;
-        classDiv?: string;
-        classLabel?: string;
-        classRatingDiv?: string;
-        classRating?: string;
-        classRightLabel?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        rating: {};
-        globalText: {};
-    };
-};
-export type AdvancedRatingProps = typeof __propDef.props;
-export type AdvancedRatingEvents = typeof __propDef.events;
-export type AdvancedRatingSlots = typeof __propDef.slots;
+import { type AdvancedRatingProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let ratings: { label: string;
- * @prop export let divClass: string = 'flex items-center mt-4';
- * @prop export let labelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
- * @prop export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700';
- * @prop export let ratingClass: string = 'h-5 bg-yellow-400 rounded';
- * @prop export let rightLabelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
- * @prop export let unit: string = '%';
- * @prop export let classDiv: string = '';
- * @prop export let classLabel: string = '';
- * @prop export let classRatingDiv: string = '';
- * @prop export let classRating: string = '';
- * @prop export let classRightLabel: string = '';
+ * @props: rating: any;
+ * @props:globalText: any;
+ * @props:ratings: any;
+ * @props:divClass: any;
+ * @props:spanClass: any;
+ * @props:div2Class: any;
+ * @props:div3Class: any;
+ * @props:span2Class: any;
+ * @props:unit: any;
  */
-export default class AdvancedRating extends SvelteComponentTyped<AdvancedRatingProps, AdvancedRatingEvents, AdvancedRatingSlots> {
-}
-export {};
+declare const AdvancedRating: import("svelte").Component<Props, {}, "">;
+type AdvancedRating = ReturnType<typeof AdvancedRating>;
+export default AdvancedRating;

package/dist/rating/CustomIcon.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { type RatingIconProps as Props } from ".";
+
+  let { fillPercent = 100, fillColor = "#00ff00", strokeColor = "#00ff00", size = 24, ariaLabel = "custom icon", iconIndex = 0, groupId = "custom", role = "img", svgClass, pathd = "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", ...restProps }: Props = $props();
+
+  const uniqueId = `${groupId}-${iconIndex}`;
+</script>
+
+<svg width={size} height={size} class={svgClass} {...restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5">
+  <defs>
+    <linearGradient id={uniqueId} x1="0%" y1="0%" x2="100%" y2="0%">
+      {#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" />
+      {:else}
+        <stop offset="0%" stop-color={fillColor} />
+        <stop offset="100%" stop-color={fillColor} />
+      {/if}
+    </linearGradient>
+  </defs>
+
+  <path d={pathd} fill="url(#{uniqueId})" stroke={strokeColor} stroke-linecap="round" stroke-linejoin="round" />
+</svg>
+
+<!--
+@component
+[Go to docs](https://preview.flowbite-svelte.com/)
+## Props
+@props: fillPercent: any = 100;
+@props:fillColor: any = "#00ff00";
+@props:strokeColor: any = "#00ff00";
+@props:size: any = 24;
+@props:ariaLabel: any = "custom icon";
+@props:iconIndex: any = 0;
+@props:groupId: any = "custom";
+@props:role: any = "img";
+@props:svgClass: any;
+@props:pathd: any = "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";
+-->

package/dist/rating/CustomIcon.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type RatingIconProps as Props } from ".";
+/**
+ * [Go to docs](https://preview.flowbite-svelte.com/)
+ * ## Props
+ * @props: fillPercent: any = 100;
+ * @props:fillColor: any = "#00ff00";
+ * @props:strokeColor: any = "#00ff00";
+ * @props:size: any = 24;
+ * @props:ariaLabel: any = "custom icon";
+ * @props:iconIndex: any = 0;
+ * @props:groupId: any = "custom";
+ * @props:role: any = "img";
+ * @props:svgClass: any;
+ * @props:pathd: any = "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";
+ */
+declare const CustomIcon: import("svelte").Component<Props, {}, "">;
+type CustomIcon = ReturnType<typeof CustomIcon>;
+export default CustomIcon;

package/dist/rating/Heart.svelte

@@ -1,15 +1,14 @@
-<script>export let fillPercent = 100;
-export let fillColor = "#ff0000";
-export let strokeColor = "#ff0000";
-export let size = 24;
-export let ariaLabel = "heart";
-export let id = "heart";
-export let role = "img";
+<script lang="ts">
+  import { type RatingIconProps as Props } from ".";
+
+  let { fillPercent = 100, fillColor = "#ff0000", strokeColor = "#ff0000", size = 24, ariaLabel = "star", iconIndex = 0, groupId = "star", role = "img", svgClass, ...restProps }: Props = $props();
+
+  const uniqueId = `${groupId}-${iconIndex}`;
 </script>
 
-<svg width={size} height={size} class={$$props.class} {...$$restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none" on:click>
+<svg width={size} height={size} class={svgClass} {...restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none">
   <defs>
-    <linearGradient {id}>
+    <linearGradient id={uniqueId}>
       {#if fillPercent !== 100}
         <stop offset="0%" stop-color={fillColor} />
         <stop offset="{fillPercent}%" stop-color={fillColor} />
@@ -21,18 +20,20 @@ export let role = "img";
       {/if}
     </linearGradient>
   </defs>
-  <path fill="url(#{id})" stroke={strokeColor} stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
+  <path fill="url(#{uniqueId})" stroke={strokeColor} stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
 </svg>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let fillPercent: $$Props['fillPercent'] = 100;
-@prop export let fillColor: $$Props['fillColor'] = '#ff0000';
-@prop export let strokeColor: $$Props['strokeColor'] = '#ff0000';
-@prop export let size: $$Props['size'] = 24;
-@prop export let ariaLabel: $$Props['ariaLabel'] = 'heart';
-@prop export let id: $$Props['id'] = 'heart';
-@prop export let role: $$Props['role'] = 'img';
+@props: fillPercent: any = 100;
+@props:fillColor: any = "#ff0000";
+@props:strokeColor: any = "#ff0000";
+@props:size: any = 24;
+@props:ariaLabel: any = "star";
+@props:iconIndex: any = 0;
+@props:groupId: any = "star";
+@props:role: any = "img";
+@props:svgClass: any;
 -->

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

@@ -1,36 +1,17 @@
-import { SvelteComponentTyped } from "svelte";
-import type { SVGAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: SVGAttributes<SVGSVGElement> & {
-        fillPercent?: number;
-        fillColor?: string;
-        strokeColor?: string;
-        size?: number;
-        ariaLabel?: string;
-        id?: string;
-        role?: string;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type HeartProps = typeof __propDef.props;
-export type HeartEvents = typeof __propDef.events;
-export type HeartSlots = typeof __propDef.slots;
+import { type RatingIconProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let fillPercent: $$Props['fillPercent'] = 100;
- * @prop export let fillColor: $$Props['fillColor'] = '#ff0000';
- * @prop export let strokeColor: $$Props['strokeColor'] = '#ff0000';
- * @prop export let size: $$Props['size'] = 24;
- * @prop export let ariaLabel: $$Props['ariaLabel'] = 'heart';
- * @prop export let id: $$Props['id'] = 'heart';
- * @prop export let role: $$Props['role'] = 'img';
+ * @props: fillPercent: any = 100;
+ * @props:fillColor: any = "#ff0000";
+ * @props:strokeColor: any = "#ff0000";
+ * @props:size: any = 24;
+ * @props:ariaLabel: any = "star";
+ * @props:iconIndex: any = 0;
+ * @props:groupId: any = "star";
+ * @props:role: any = "img";
+ * @props:svgClass: any;
  */
-export default class Heart extends SvelteComponentTyped<HeartProps, HeartEvents, HeartSlots> {
-}
-export {};
+declare const Heart: import("svelte").Component<Props, {}, "">;
+type Heart = ReturnType<typeof Heart>;
+export default Heart;

package/dist/rating/Rating.svelte

@@ -1,55 +1,51 @@
-<script>import Star from "./Star.svelte";
-import { twMerge } from "tailwind-merge";
-import generateId from "../utils/generateId.js";
-export let divClass = "flex items-center";
-export let size = 24;
-export let total = 5;
-export let rating = 4;
-export let partialId = "partialStar" + generateId();
-export let icon = Star;
-export let count = false;
-export let iconFillColor = "#F5CA14";
-export let iconStrokeColor = "#F5CA14";
-const fullStarId = generateId();
-const grayStarId = generateId();
-$: fullStars = Math.floor(rating);
-$: rateDiffence = rating - fullStars;
-$: percentRating = Math.round(rateDiffence * 100);
-$: grayStars = total - (fullStars + Math.ceil(rateDiffence));
+<script lang="ts">
+  import Star from "./Star.svelte";
+  import { type RatingProps as Props, rating as ratingVariants } from ".";
+
+  let { children, text, divClass, size = 24, total = 5, rating = 4, Icon = Star, count = false, pClass }: Props = $props();
+
+  const { base, p } = $derived(ratingVariants());
+  const ratingGroupId = crypto.randomUUID();
+  let fullStars: number = Math.floor(rating);
+  let rateDiffence = rating - fullStars;
+  let percentRating = Math.round(rateDiffence * 100);
+  let grayStars: number = total - (fullStars + Math.ceil(rateDiffence));
 </script>
 
-<div class={twMerge(divClass, $$props.class)}>
-  {#if count}
-    <svelte:component this={icon} fillColor={iconFillColor} strokeColor={iconStrokeColor} fillPercent={100} {size} />
-    <p class="ms-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>
-    <slot />
+<div class={base({ class: divClass })}>
+  {#if count && children}
+    <Icon fillPercent={100} {size} iconIndex={0} groupId={ratingGroupId} />
+    <p class={p({ class: pClass })}>{rating}</p>
+    {@render children()}
   {:else}
-    {#each Array(fullStars) as star}
-      <svelte:component this={icon} fillColor={iconFillColor} strokeColor={iconStrokeColor} {size} fillPercent={100} id={fullStarId} />
+    <!-- eslint-disable @typescript-eslint/no-unused-vars-->
+    {#each Array(fullStars) as _, index}
+      <Icon {size} fillPercent={100} iconIndex={index} groupId={`rating-${ratingGroupId}-full`} />
     {/each}
     {#if percentRating}
-      <svelte:component this={icon} fillColor={iconFillColor} strokeColor={iconStrokeColor} {size} fillPercent={percentRating} id={partialId} />
+      <Icon {size} fillPercent={percentRating} iconIndex={fullStars} groupId={`rating-${ratingGroupId}-partial`} />
     {/if}
-    {#each Array(grayStars) as star}
-      <svelte:component this={icon} fillColor={iconFillColor} strokeColor={iconStrokeColor} {size} fillPercent={0} id={grayStarId} />
+    <!-- eslint-disable @typescript-eslint/no-unused-vars-->
+    {#each Array(grayStars) as _, index}
+      <Icon {size} fillPercent={0} iconIndex={index} groupId={`rating-${ratingGroupId}-empty`} />
     {/each}
-    {#if $$slots.text}
-      <slot name="text" />
+    {#if text}
+      {@render text()}
     {/if}
   {/if}
 </div>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let divClass: $$Props['divClass'] = 'flex items-center';
-@prop export let size: $$Props['size'] = 24;
-@prop export let total: NonNullable<$$Props['total']> = 5;
-@prop export let rating: $$Props['rating'] = 4;
-@prop export let partialId: $$Props['partialId'] = 'partialStar' + generateId();
-@prop export let icon: $$Props['icon'] = Star;
-@prop export let count: $$Props['count'] = false;
-@prop export let iconFillColor: $$Props['iconFillColor'] = '#F5CA14';
-@prop export let iconStrokeColor: $$Props['iconStrokeColor'] = '#F5CA14';
+@props: children: any;
+@props:text: any;
+@props:divClass: any;
+@props:size: any = 24;
+@props:total: any = 5;
+@props:rating: any = 4;
+@props:Icon: any = Star;
+@props:count: any = false;
+@props:pClass: any;
 -->

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

@@ -1,42 +1,17 @@
-import { SvelteComponentTyped } from "svelte";
-import type { ComponentType } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: HTMLAttributes<HTMLDivElement> & {
-        divClass?: string;
-        size?: number;
-        total?: number;
-        rating: number;
-        partialId?: string;
-        icon?: ComponentType;
-        count?: boolean;
-        iconFillColor?: string | undefined;
-        iconStrokeColor?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        text: {};
-    };
-};
-export type RatingProps = typeof __propDef.props;
-export type RatingEvents = typeof __propDef.events;
-export type RatingSlots = typeof __propDef.slots;
+import { type RatingProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: $$Props['divClass'] = 'flex items-center';
- * @prop export let size: $$Props['size'] = 24;
- * @prop export let total: NonNullable<$$Props['total']> = 5;
- * @prop export let rating: $$Props['rating'] = 4;
- * @prop export let partialId: $$Props['partialId'] = 'partialStar' + generateId();
- * @prop export let icon: $$Props['icon'] = Star;
- * @prop export let count: $$Props['count'] = false;
- * @prop export let iconFillColor: $$Props['iconFillColor'] = '#F5CA14';
- * @prop export let iconStrokeColor: $$Props['iconStrokeColor'] = '#F5CA14';
+ * @props: children: any;
+ * @props:text: any;
+ * @props:divClass: any;
+ * @props:size: any = 24;
+ * @props:total: any = 5;
+ * @props:rating: any = 4;
+ * @props:Icon: any = Star;
+ * @props:count: any = false;
+ * @props:pClass: any;
  */
-export default class Rating extends SvelteComponentTyped<RatingProps, RatingEvents, RatingSlots> {
-}
-export {};
+declare const Rating: import("svelte").Component<Props, {}, "">;
+type Rating = ReturnType<typeof Rating>;
+export default Rating;

package/dist/rating/RatingComment.svelte

@@ -1,13 +1,14 @@
-<script>import Button from "../buttons/Button.svelte";
-import Rating from "./Rating.svelte";
-export let helpfullink = "";
-export let abuselink = "";
-export let comment;
+<script lang="ts">
+  import Button from "../buttons/Button.svelte";
+  import Rating from "./Rating.svelte";
+  import { type RatingCommentProps as Props } from ".";
+
+  let { children, evaluation, helpfullink, abuselink, comment }: Props = $props();
 </script>
 
 <article>
-  <div class="flex items-center mb-4 space-x-4 rtl:space-x-reverse">
-    <img class="w-10 h-10 rounded-full" src={comment.user.img.src} alt={comment.user.img.alt} />
+  <div class="mb-4 flex items-center space-x-4 rtl:space-x-reverse">
+    <img class="h-10 w-10 rounded-full" src={comment.user.img.src} alt={comment.user.img.alt} />
     <div class="space-y-1 font-medium dark:text-white">
       <p>
         {comment.user.name}
@@ -17,11 +18,13 @@ export let comment;
       </p>
     </div>
   </div>
-  <div class="flex items-center mb-1">
+  <div class="mb-1 flex items-center">
     <Rating total={comment.total} rating={comment.rating}>
-      <p slot="text" class="ms-2 text-sm font-medium text-gray-500 dark:text-gray-400">
-        {comment.rating} out of {comment.total}
-      </p>
+      {#snippet text()}
+        <p class="ms-2 pt-1 text-sm font-medium text-gray-500 dark:text-gray-400">
+          {comment.rating} out of {comment.total}
+        </p>
+      {/snippet}
     </Rating>
     {#if comment.heading}
       <h3 class="ms-2 text-sm font-semibold text-gray-900 dark:text-white">
@@ -34,18 +37,22 @@ export let comment;
       <p>Reviewed in {comment.address} on {comment.datetime}</p>
     </footer>
   {/if}
-  <slot />
+
+  {@render children()}
+
   <aside>
     <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-      <slot name="evaluation" />
+      {#if evaluation}
+        {@render evaluation()}
+      {/if}
     </p>
     {#if helpfullink || abuselink}
-      <div class="flex items-center mt-3 space-x-3 rtl:space-x-reverse divide-x rtl:divide-x-reverse divide-gray-200 dark:divide-gray-600">
+      <div class="mt-3 flex items-center space-x-3 divide-x divide-gray-200 rtl:space-x-reverse rtl:divide-x-reverse dark:divide-gray-600">
         {#if helpfullink}
-          <Button size="xs" href={helpfullink} color="dark">Helpful</Button>
+          <Button size="xs" href="/" color="dark">Helpful</Button>
         {/if}
         {#if abuselink}
-          <a href={abuselink} class="ps-4 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"> Report abuse </a>
+          <a href={abuselink} class="ps-4 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500">Report abuse</a>
         {/if}
       </div>
     {/if}
@@ -54,10 +61,11 @@ export let comment;
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let ceil: $$Props['ceil'] = false;
-@prop export let helpfullink: $$Props['helpfullink'] = '';
-@prop export let abuselink: $$Props['abuselink'] = '';
-@prop export let comment: $$Props['comment'];
+@props: children: any;
+@props:evaluation: any;
+@props:helpfullink: any;
+@props:abuselink: any;
+@props:comment: any;
 -->

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

@@ -1,44 +1,13 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        helpfullink?: string;
-        abuselink?: string;
-        comment: {
-            id: string;
-            user: {
-                name: string;
-                img: {
-                    src: string;
-                    alt: string;
-                };
-                joined: string;
-            };
-            total: number;
-            rating: number;
-            heading: string;
-            address: string;
-            datetime: string;
-        };
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        evaluation: {};
-    };
-};
-export type RatingCommentProps = typeof __propDef.props;
-export type RatingCommentEvents = typeof __propDef.events;
-export type RatingCommentSlots = typeof __propDef.slots;
+import { type RatingCommentProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let ceil: $$Props['ceil'] = false;
- * @prop export let helpfullink: $$Props['helpfullink'] = '';
- * @prop export let abuselink: $$Props['abuselink'] = '';
- * @prop export let comment: $$Props['comment'];
+ * @props: children: any;
+ * @props:evaluation: any;
+ * @props:helpfullink: any;
+ * @props:abuselink: any;
+ * @props:comment: any;
  */
-export default class RatingComment extends SvelteComponentTyped<RatingCommentProps, RatingCommentEvents, RatingCommentSlots> {
-}
-export {};
+declare const RatingComment: import("svelte").Component<Props, {}, "">;
+type RatingComment = ReturnType<typeof RatingComment>;
+export default RatingComment;