odj-svelte-ui 0.1.0

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

@@ -0,0 +1,38 @@
+<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 rating}
+  {@render rating()}
+{/if}
+{#if globalText}
+  {@render globalText()}
+{/if}
+{#each ratings as { label, rating }}
+  <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={span2({ class: span2Class })}>{rating}{unit}</span>
+  </div>
+{/each}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@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

@@ -0,0 +1,17 @@
+import { type AdvancedRatingProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @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;
+ */
+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://svelte-5-ui-lib.codewithshin.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://svelte-5-ui-lib.codewithshin.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

@@ -0,0 +1,39 @@
+<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={svgClass} {...restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none">
+  <defs>
+    <linearGradient id={uniqueId}>
+      {#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(#{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://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@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

@@ -0,0 +1,17 @@
+import { type RatingIconProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @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;
+ */
+declare const Heart: import("svelte").Component<Props, {}, "">;
+type Heart = ReturnType<typeof Heart>;
+export default Heart;

package/dist/rating/Rating.svelte

@@ -0,0 +1,51 @@
+<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={base({ class: divClass })}>
+  {#if count && children}
+    <Icon fillPercent={100} {size} iconIndex={0} groupId={ratingGroupId} />
+    <p class={p({ class: pClass })}>{rating}</p>
+    {@render children()}
+  {:else}
+    <!-- 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}
+      <Icon {size} fillPercent={percentRating} iconIndex={fullStars} groupId={`rating-${ratingGroupId}-partial`} />
+    {/if}
+    <!-- eslint-disable @typescript-eslint/no-unused-vars-->
+    {#each Array(grayStars) as _, index}
+      <Icon {size} fillPercent={0} iconIndex={index} groupId={`rating-${ratingGroupId}-empty`} />
+    {/each}
+    {#if text}
+      {@render text()}
+    {/if}
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@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

@@ -0,0 +1,17 @@
+import { type RatingProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @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;
+ */
+declare const Rating: import("svelte").Component<Props, {}, "">;
+type Rating = ReturnType<typeof Rating>;
+export default Rating;

package/dist/rating/RatingComment.svelte

@@ -0,0 +1,71 @@
+<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="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}
+        <time datetime="2014-08-16 19:00" class="block text-sm text-gray-500 dark:text-gray-400">
+          {comment.user.joined}
+        </time>
+      </p>
+    </div>
+  </div>
+  <div class="mb-1 flex items-center">
+    <Rating total={comment.total} rating={comment.rating}>
+      {#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">
+        {comment.heading}
+      </h3>
+    {/if}
+  </div>
+  {#if comment.address || comment.datetime}
+    <footer class="mb-5 text-sm text-gray-500 dark:text-gray-400">
+      <p>Reviewed in {comment.address} on {comment.datetime}</p>
+    </footer>
+  {/if}
+
+  {@render children()}
+
+  <aside>
+    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+      {#if evaluation}
+        {@render evaluation()}
+      {/if}
+    </p>
+    {#if helpfullink || abuselink}
+      <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="/" 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>
+        {/if}
+      </div>
+    {/if}
+  </aside>
+</article>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:evaluation: any;
+@props:helpfullink: any;
+@props:abuselink: any;
+@props:comment: any;
+-->

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

@@ -0,0 +1,13 @@
+import { type RatingCommentProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:evaluation: any;
+ * @props:helpfullink: any;
+ * @props:abuselink: any;
+ * @props:comment: any;
+ */
+declare const RatingComment: import("svelte").Component<Props, {}, "">;
+type RatingComment = ReturnType<typeof RatingComment>;
+export default RatingComment;

package/dist/rating/Review.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { twMerge } from "tailwind-merge";
+  import { type ReviewProps as Props, review as reviewVariants } from ".";
+
+  let { children, address, item1, item2, item3, review, articleClass, divClass, div2Class, div3Class, imgClass, ulClass, liClass }: Props = $props();
+
+  const { article, div, div2, div3, img, ul, li } = $derived(reviewVariants());
+</script>
+
+{#if review}
+  <article class={article({ class: articleClass })}>
+    <div>
+      <div class={div({ class: divClass })}>
+        <img class={img({ class: imgClass })} src={review.imgSrc} alt={review.imgAlt} />
+        <div class={div2({ class: div2Class })}>
+          <p>{review.name}</p>
+          {#if review.address}
+            {#if address}
+              <div class={div3({ class: div3Class })}>
+                {@render address()}
+              </div>
+            {/if}
+          {/if}
+        </div>
+      </div>
+      {#if review.item1 || review.item2 || review.item3}
+        <ul class={ul({ class: ulClass })}>
+          {#if review.item1}
+            <li class={twMerge(li({ class: liClass }))}>
+              {#if item1}
+                {@render item1()}
+              {/if}
+            </li>
+          {/if}
+          {#if review.item2}
+            <li class={liClass}>
+              {#if item2}
+                {@render item2()}
+              {/if}
+            </li>
+          {/if}
+          {#if review.item3}
+            <li class={twMerge(liClass)}>
+              {#if item3}
+                {@render item3()}
+              {/if}
+            </li>
+          {/if}
+        </ul>
+      {/if}
+    </div>
+
+    <div class="col-span-2 mt-6 md:mt-0">
+      <div class="mb-5 flex items-start">
+        <div class="pe-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="inline-flex items-center rounded bg-primary-700 p-1.5 text-sm font-semibold text-white">
+          {review.rating}
+        </p>
+      </div>
+      {@render children()}
+    </div>
+  </article>
+{/if}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:address: any;
+@props:item1: any;
+@props:item2: any;
+@props:item3: any;
+@props:review: any;
+@props:articleClass: any;
+@props:divClass: any;
+@props:div2Class: any;
+@props:div3Class: any;
+@props:imgClass: any;
+@props:ulClass: any;
+@props:liClass: any;
+-->

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

@@ -0,0 +1,21 @@
+import { type ReviewProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:address: any;
+ * @props:item1: any;
+ * @props:item2: any;
+ * @props:item3: any;
+ * @props:review: any;
+ * @props:articleClass: any;
+ * @props:divClass: any;
+ * @props:div2Class: any;
+ * @props:div3Class: any;
+ * @props:imgClass: any;
+ * @props:ulClass: any;
+ * @props:liClass: any;
+ */
+declare const Review: import("svelte").Component<Props, {}, "">;
+type Review = ReturnType<typeof Review>;
+export default Review;

package/dist/rating/ScoreRating.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { type ScoreRatingProps as Props, scorerating } from ".";
+
+  let { ratings, ratings2, headerLabel }: Props = $props();
+
+  const { desc1, desc2, desc3span, desc3p, link, bar } = $derived(scorerating());
+</script>
+
+<div class="mb-5 flex items-center">
+  {#if headerLabel}
+    {#if headerLabel.desc1}
+      <p class={desc1()}>{headerLabel.desc1}</p>
+    {/if}
+    {#if headerLabel.desc2}
+      <p class={desc2()}>{headerLabel.desc2}</p>
+    {/if}
+    {#if headerLabel.desc3}
+      <span class={desc3span()}></span>
+      <p class={desc3p()}>{headerLabel.desc3}</p>
+    {/if}
+    {#if headerLabel.link}
+      <a href={headerLabel.link.url} class={link()}>{headerLabel.link.label}</a>
+    {/if}
+  {/if}
+</div>
+<div class="gap-8 sm:grid sm:grid-cols-2">
+  <div>
+    {#if ratings}
+      {#each ratings as { label, rating }}
+        <dl>
+          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
+            {label}
+          </dt>
+          <dd class="mb-3 flex items-center">
+            <div class="me-2 h-2.5 w-full rounded bg-gray-200 dark:bg-gray-700">
+              <div class={bar()} style="width: {rating * 10}%"></div>
+            </div>
+            <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
+          </dd>
+        </dl>
+      {/each}
+    {/if}
+  </div>
+  <div>
+    {#if ratings2}
+      {#each ratings2 as { label, rating }}
+        <dl>
+          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
+            {label}
+          </dt>
+          <dd class="mb-3 flex items-center">
+            <div class="me-2 h-2.5 w-full rounded bg-gray-200 dark:bg-gray-700">
+              <div class={bar()} style="width: {rating * 10}%"></div>
+            </div>
+            <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
+          </dd>
+        </dl>
+      {/each}
+    {/if}
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: ratings: any;
+@props:ratings2: any;
+@props:headerLabel: any;
+-->

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

@@ -0,0 +1,11 @@
+import { type ScoreRatingProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: ratings: any;
+ * @props:ratings2: any;
+ * @props:headerLabel: any;
+ */
+declare const ScoreRating: import("svelte").Component<Props, {}, "">;
+type ScoreRating = ReturnType<typeof ScoreRating>;
+export default ScoreRating;

package/dist/rating/Star.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { type RatingIconProps as Props } from ".";
+
+  let { fillPercent = 100, fillColor = "#F5CA14", strokeColor = "#F5CA14", size = 24, ariaLabel = "star", iconIndex = 0, groupId = "star", role = "img", svgClass, ...restProps }: Props = $props();
+
+  const uniqueId = `${groupId}-${iconIndex}`;
+</script>
+
+<svg width={size} height={size} {...restProps} class={svgClass} aria-label={ariaLabel} viewBox="100 100 120 120" {role}>
+  <defs>
+    <linearGradient id={uniqueId}>
+      {#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(#{uniqueId})" 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>
+</svg>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: fillPercent: any = 100;
+@props:fillColor: any = "#F5CA14";
+@props:strokeColor: any = "#F5CA14";
+@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/Star.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type RatingIconProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: fillPercent: any = 100;
+ * @props:fillColor: any = "#F5CA14";
+ * @props:strokeColor: any = "#F5CA14";
+ * @props:size: any = 24;
+ * @props:ariaLabel: any = "star";
+ * @props:iconIndex: any = 0;
+ * @props:groupId: any = "star";
+ * @props:role: any = "img";
+ * @props:svgClass: any;
+ */
+declare const Star: import("svelte").Component<Props, {}, "">;
+type Star = ReturnType<typeof Star>;
+export default Star;

package/dist/rating/Thumbup.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { type RatingIconProps as Props } from ".";
+
+  let { fillPercent = 100, fillColor = "#00b500", strokeColor = "#00b500", size = 24, ariaLabel = "thumbup", iconIndex = 0, groupId = "star", role = "img", svgClass, ...restProps }: Props = $props();
+
+  const uniqueId = `${groupId}-${iconIndex}`;
+</script>
+
+<svg width={size} height={size} {...restProps} class={svgClass} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none">
+  <defs>
+    <linearGradient id={uniqueId}>
+      {#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(#{uniqueId})" 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://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: fillPercent: any = 100;
+@props:fillColor: any = "#00b500";
+@props:strokeColor: any = "#00b500";
+@props:size: any = 24;
+@props:ariaLabel: any = "thumbup";
+@props:iconIndex: any = 0;
+@props:groupId: any = "star";
+@props:role: any = "img";
+@props:svgClass: any;
+-->