odj-svelte-ui 0.1.0

package/dist/elements/rating/Rating.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import Star from './Star.svelte';
+  import { twMerge } from 'tailwind-merge';
+  import generateId from '../utils/generateId.js';
+  import type { ComponentType } from 'svelte';
+
+  export let divClass: string = 'flex items-center';
+  export let size: number = 24;
+  export let total: number = 5;
+  export let rating: number = 4;
+  export let partialId: string = 'partialStar' + generateId();
+  export let icon: ComponentType = Star;
+  export let count: boolean = false;
+  export let iconProps: object;
+
+  // generate unique id for full star and neutral star
+  const fullStarId: string = generateId();
+  const neutralStarId: string = generateId();
+  let fullStars: number = Math.floor(rating);
+  let rateDiffence = rating - fullStars;
+  let percentRating = Math.round(rateDiffence * 100);
+  let neutralStars: number = total - (fullStars + Math.ceil(rateDiffence));
+  // console.log(fullStars, neutralStars, rateDiffence, percentRating)
+</script>
+
+<div class={twMerge(divClass, $$props.class)}>
+  {#if count}
+    <svelte:component this={icon} fillPercent={100} {size} {...iconProps}/>
+    <p class="ml-2 text-sm font-bold text-neutral-900 dark:text-white">{rating}</p>
+    <slot />
+  {:else}
+    {#each Array(fullStars) as star}
+      <svelte:component this={icon} {size} fillPercent={100} id={fullStarId} {...iconProps}/>
+    {/each}
+    {#if percentRating}
+      <svelte:component this={icon} {size} fillPercent={percentRating} id={partialId} {...iconProps}/>
+    {/if}
+    {#each Array(neutralStars) as star}
+      <svelte:component this={icon} {size} fillPercent={0} id={neutralStarId} {...iconProps}/>
+    {/each}
+    {#if $$slots.text}
+      <slot name="text" />
+    {/if}
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let divClass: string = 'flex items-center';
+@prop export let size: number = 24;
+@prop export let total: number = 5;
+@prop export let rating: number = 4;
+@prop export let partialId: string = 'partialStar' + generateId();
+@prop export let icon: ComponentType = Star;
+@prop export let count: boolean = false;
+-->

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

@@ -0,0 +1,51 @@
+import type { ComponentType } from 'svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let divClass: string = 'flex items-center';
+ * @prop export let size: number = 24;
+ * @prop export let total: number = 5;
+ * @prop export let rating: number = 4;
+ * @prop export let partialId: string = 'partialStar' + generateId();
+ * @prop export let icon: ComponentType = Star;
+ * @prop export let count: boolean = false;
+ */
+declare const Rating: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    divClass?: string | undefined;
+    size?: number | undefined;
+    total?: number | undefined;
+    rating?: number | undefined;
+    partialId?: string | undefined;
+    icon?: ComponentType | undefined;
+    count?: boolean | undefined;
+    iconProps: object;
+}, {
+    default: {};
+    text: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    text: {};
+}, {}, string>;
+type Rating = InstanceType<typeof Rating>;
+export default Rating;

package/dist/elements/rating/RatingComment.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import Button from '../buttons/Button.svelte';
+  import Rating from './Rating.svelte';
+  // default is floor
+  export let ceil: boolean = false;
+  export let helpfullink: string = '';
+  export let abuselink: string = '';
+  export let comment: {
+    id: string;
+    user: {
+      name: string;
+      img: {
+        src: string;
+        alt: string;
+      };
+      joined: string;
+    };
+    total: number;
+    rating: number;
+    heading: string;
+    address: string;
+    datetime: string;
+  };
+
+  let roundedRating: number = ceil ? Math.ceil(comment.rating) : Math.floor(comment.rating);
+  let neutralStars: number = comment.total - roundedRating;
+</script>
+
+<article>
+  <div class="flex items-center mb-4 space-x-4">
+    <img class="w-10 h-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}
+        <time datetime="2014-08-16 19:00" class="block text-sm text-neutral-500 dark:text-neutral-400">
+          {comment.user.joined}
+        </time>
+      </p>
+    </div>
+  </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-neutral-500 dark:text-neutral-400">
+        {comment.rating} out of {comment.total}
+      </p>
+    </Rating>
+    {#if comment.heading}
+      <h3 class="ml-2 text-sm font-semibold text-neutral-900 dark:text-white">
+        {comment.heading}
+      </h3>
+    {/if}
+  </div>
+  {#if comment.address || comment.datetime}
+    <footer class="mb-5 text-sm text-neutral-500 dark:text-neutral-400">
+      <p>Reviewed in {comment.address} on {comment.datetime}</p>
+    </footer>
+  {/if}
+  <slot />
+  <aside>
+    <p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
+      <slot name="evaluation" />
+    </p>
+    {#if helpfullink || abuselink}
+      <div class="flex items-center mt-3 space-x-3 divide-x divide-neutral-200 dark:divide-neutral-600">
+        {#if helpfullink}
+          <Button size="xs" href="/" color="dark">Helpful</Button>
+        {/if}
+        {#if abuselink}
+          <a href={abuselink} class="pl-4 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"> Report abuse </a>
+        {/if}
+      </div>
+    {/if}
+  </aside>
+</article>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let ceil: boolean = false;
+@prop export let helpfullink: string = '';
+@prop export let abuselink: string = '';
+@prop export let comment: {
+    id: string;
+-->

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

@@ -0,0 +1,58 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let ceil: boolean = false;
+ * @prop export let helpfullink: string = '';
+ * @prop export let abuselink: string = '';
+ * @prop export let comment: {
+ * id: string;
+ */
+declare const RatingComment: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    ceil?: boolean;
+    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;
+    };
+}, {
+    default: {};
+    evaluation: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    evaluation: {};
+}, {}, string>;
+type RatingComment = InstanceType<typeof RatingComment>;
+export default RatingComment;

package/dist/elements/rating/Review.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import type { ReviewType } from '../types';
+  import { twMerge } from 'tailwind-merge';
+
+  export let review: ReviewType;
+  export let articleClass: string = 'md:gap-8 md:grid md:grid-cols-3';
+  export let divClass: string = 'flex items-center mb-6 space-x-4';
+  export let imgClass: string = 'w-10 h-10 rounded-full';
+  export let ulClass: string = 'space-y-4 text-sm text-neutral-500 dark:text-neutral-400';
+  export let liClass: string = 'flex items-center';
+</script>
+
+<article class={twMerge(articleClass, $$props.classArticle)}>
+  <div>
+    <div class={twMerge(divClass, $$props.classDiv)}>
+      <img class={twMerge(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-neutral-500 dark:text-neutral-400">
+            <slot name="address" />
+          </div>
+        {/if}
+      </div>
+    </div>
+    {#if $$slots.item1 || $$slots.item2 || $$slots.item3}
+      <ul class={twMerge(ulClass, $$props.classUl)}>
+        {#if $$slots.item1}
+          <li class={twMerge(liClass, $$props.classLi)}>
+            <slot name="item1" />
+          </li>
+        {/if}
+        {#if $$slots.item2}
+          <li class={twMerge(liClass, $$props.classLi)}>
+            <slot name="item2" />
+          </li>
+        {/if}
+        {#if $$slots.item3}
+          <li class={twMerge(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-neutral-500 dark:text-neutral-400">
+              Reviewed: {review.reviewDate}
+            </p>
+          </footer>
+        {/if}
+        <h4 class="text-xl font-bold text-neutral-900 dark:text-white">
+          {review.title}
+        </h4>
+      </div>
+      <p class="bg-primary-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded">
+        {review.rating}
+      </p>
+    </div>
+    <slot />
+  </div>
+</article>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let review: ReviewType;
+@prop export let articleClass: string = 'md:gap-8 md:grid md:grid-cols-3';
+@prop export let divClass: string = 'flex items-center mb-6 space-x-4';
+@prop export let imgClass: string = 'w-10 h-10 rounded-full';
+@prop export let ulClass: string = 'space-y-4 text-sm text-neutral-500 dark:text-neutral-400';
+@prop export let liClass: string = 'flex items-center';
+-->

package/dist/elements/rating/Review.svelte.d.ts

@@ -0,0 +1,54 @@
+import type { ReviewType } from '../types';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let review: ReviewType;
+ * @prop export let articleClass: string = 'md:gap-8 md:grid md:grid-cols-3';
+ * @prop export let divClass: string = 'flex items-center mb-6 space-x-4';
+ * @prop export let imgClass: string = 'w-10 h-10 rounded-full';
+ * @prop export let ulClass: string = 'space-y-4 text-sm text-neutral-500 dark:text-neutral-400';
+ * @prop export let liClass: string = 'flex items-center';
+ */
+declare const Review: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    review: ReviewType;
+    articleClass?: string | undefined;
+    divClass?: string | undefined;
+    imgClass?: string | undefined;
+    ulClass?: string | undefined;
+    liClass?: string | undefined;
+}, {
+    address: {};
+    item1: {};
+    item2: {};
+    item3: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    address: {};
+    item1: {};
+    item2: {};
+    item3: {};
+    default: {};
+}, {}, string>;
+type Review = InstanceType<typeof Review>;
+export default Review;

package/dist/elements/rating/ScoreRating.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  export let ratings: { label: string; rating: number }[] = [];
+  export let ratings2: { label: string; rating: number }[] = [];
+  export let headerLabel: {
+    desc1: string;
+    desc2: string;
+    desc3: string;
+    link: { label: string; url: string };
+  };
+  export let desc1Class: string = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800';
+  export let desc2Class: string = 'ml-2 w-24 font-medium text-neutral-900 dark:text-white';
+  export let desc3spanClass: string = 'mx-2 w-1 h-1 bg-neutral-900 rounded-full dark:bg-neutral-500';
+  export let desc3pClass: string = 'text-sm  w-24 font-medium text-neutral-500 dark:text-neutral-400';
+  export let linkClass: string = 'ml-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
+  export let barColor: string = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
+</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={linkClass}>{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-neutral-500 dark:text-neutral-400">{label}</dt>
+        <dd class="flex items-center mb-3">
+          <div class="w-full bg-neutral-200 rounded h-2.5 dark:bg-neutral-700 mr-2">
+            <div class={barColor} style="width: {rating * 10}%" />
+          </div>
+          <span class="text-sm font-medium text-neutral-500 dark:text-neutral-400">{rating}</span>
+        </dd>
+      </dl>
+    {/each}
+  </div>
+  <div>
+    {#each ratings2 as { label, rating }}
+      <dl>
+        <dt class="text-sm font-medium text-neutral-500 dark:text-neutral-400">{label}</dt>
+        <dd class="flex items-center mb-3">
+          <div class="w-full bg-neutral-200 rounded h-2.5 dark:bg-neutral-700 mr-2">
+            <div class={barColor} style="width: {rating * 10}%" />
+          </div>
+          <span class="text-sm font-medium text-neutral-500 dark:text-neutral-400">{rating}</span>
+        </dd>
+      </dl>
+    {/each}
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let ratings: { label: string;
+@prop export let ratings2: { label: string;
+@prop export let headerLabel: {
+    desc1: string;
+@prop export let desc1Class: string = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800';
+@prop export let desc2Class: string = 'ml-2 w-24 font-medium text-neutral-900 dark:text-white';
+@prop export let desc3spanClass: string = 'mx-2 w-1 h-1 bg-neutral-900 rounded-full dark:bg-neutral-500';
+@prop export let desc3pClass: string = 'text-sm  w-24 font-medium text-neutral-500 dark:text-neutral-400';
+@prop export let linkClass: string = 'ml-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
+@prop export let barColor: string = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
+-->

package/dist/elements/rating/ScoreRating.svelte.d.ts

@@ -0,0 +1,56 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let ratings: { label: string;
+ * @prop export let ratings2: { label: string;
+ * @prop export let headerLabel: {
+ * desc1: string;
+ * @prop export let desc1Class: string = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800';
+ * @prop export let desc2Class: string = 'ml-2 w-24 font-medium text-neutral-900 dark:text-white';
+ * @prop export let desc3spanClass: string = 'mx-2 w-1 h-1 bg-neutral-900 rounded-full dark:bg-neutral-500';
+ * @prop export let desc3pClass: string = 'text-sm  w-24 font-medium text-neutral-500 dark:text-neutral-400';
+ * @prop export let linkClass: string = 'ml-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
+ * @prop export let barColor: string = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
+ */
+declare const ScoreRating: $$__sveltets_2_IsomorphicComponent<{
+    ratings?: {
+        label: string;
+        rating: number;
+    }[];
+    ratings2?: {
+        label: string;
+        rating: number;
+    }[];
+    headerLabel: {
+        desc1: string;
+        desc2: string;
+        desc3: string;
+        link: {
+            label: string;
+            url: string;
+        };
+    };
+    desc1Class?: string;
+    desc2Class?: string;
+    desc3spanClass?: string;
+    desc3pClass?: string;
+    linkClass?: string;
+    barColor?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ScoreRating = InstanceType<typeof ScoreRating>;
+export default ScoreRating;

package/dist/elements/rating/Star.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import generateId from '../utils/generateId';
+
+  export let fillPercent: number = 100;
+  export let fillColor: string = '#F5CA14';
+  export let strokeColor: string = '#F5CA14';
+  export let size: string = "1.2rem";
+  export let ariaLabel: string = 'star';
+  export let id: string = generateId();
+  export let role = 'img';
+</script>
+
+<svg width={size} height={size} {...$$restProps} class={$$props.class} aria-label={ariaLabel} viewBox="0 0 512 512" {role} 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" />
+      {:else}
+        <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, 
+    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" />
+  </g> -->
+  <path fill="url(#{id})" stroke={strokeColor} stroke-width="15" d="M394,480a16,16,0,0,1-9.39-3L256,383.76,127.39,477a16,16,0,0,1-24.55-18.08L153,310.35,23,221.2A16,16,0,0,1,32,192H192.38l48.4-148.95a16,16,0,0,1,30.44,0l48.4,149H480a16,16,0,0,1,9.05,29.2L359,310.35l50.13,148.53A16,16,0,0,1,394,480Z"></path>
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let fillPercent: number = 100;
+@prop export let fillColor: string = '#F5CA14';
+@prop export let strokeColor: string = '#F5CA14';
+@prop export let size: number = 24;
+@prop export let ariaLabel: string = 'star';
+@prop export let id: string = generateId();
+@prop export let role = 'img';
+-->

package/dist/elements/rating/Star.svelte.d.ts

@@ -0,0 +1,40 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let fillPercent: number = 100;
+ * @prop export let fillColor: string = '#F5CA14';
+ * @prop export let strokeColor: string = '#F5CA14';
+ * @prop export let size: number = 24;
+ * @prop export let ariaLabel: string = 'star';
+ * @prop export let id: string = generateId();
+ * @prop export let role = 'img';
+ */
+declare const Star: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    fillPercent?: number | undefined;
+    fillColor?: string | undefined;
+    strokeColor?: string | undefined;
+    size?: string | undefined;
+    ariaLabel?: string | undefined;
+    id?: string | undefined;
+    role?: string | undefined;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Star = InstanceType<typeof Star>;
+export default Star;

package/dist/elements/rating/Thumbup.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  export let fillPercent: number = 100;
+  export let fillColor: string = '#00b500';
+  export let strokeColor: string = '#00b500';
+  export let size: number = 24;
+  export let ariaLabel: string = 'thumbup';
+  export let id: string = 'thumbup';
+  export let role = 'img';
+</script>
+
+<svg width={size} height={size} {...$$restProps} class={$$props.class} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none" 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" />
+      {:else}
+        <stop offset="0%" stop-color={fillColor} />
+        <stop offset="100%" stop-color={fillColor} />
+      {/if}
+    </linearGradient>
+  </defs>
+  <path fill="url(#{id})" stroke={strokeColor} stroke-linecap="round" 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
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let fillPercent: number = 100;
+@prop export let fillColor: string = '#00b500';
+@prop export let strokeColor: string = '#00b500';
+@prop export let size: number = 24;
+@prop export let ariaLabel: string = 'thumbup';
+@prop export let id: string = 'thumbup';
+@prop export let role = 'img';
+-->