odj-svelte-ui 0.1.0

package/dist/elements/navbar/Navbar.svelte.d.ts

@@ -0,0 +1,60 @@
+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 navClass: string = 'px-2 sm:px-4 py-2.5 w-full';
+ * @prop export let navDivClass: string = 'mx-auto flex flex-wrap justify-between items-center ';
+ * @prop export let fluid: boolean = false;
+ */
+declare const Navbar: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<import("svelte/elements").HTMLAnchorAttributes & {
+    tag?: string;
+    color?: "primary" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink" | "dark" | "default" | "none" | "form" | "light" | "neutral" | "dropdown" | "navbar" | "navbarUl";
+    rounded?: boolean;
+    border?: boolean;
+    shadow?: boolean;
+    transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
+    params?: object;
+    node?: HTMLElement | undefined;
+    use?: import("svelte/action").Action<HTMLElement, any>;
+    options?: object;
+    class?: string;
+    role?: string;
+} & {
+    children?: any;
+} & {
+    navClass?: string;
+    navDivClass?: string;
+    fluid?: boolean;
+    classNavDiv?: string;
+}, {
+    default: {
+        hidden: boolean;
+        toggle: () => void;
+    };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        hidden: boolean;
+        toggle: () => void;
+    };
+}, {}, string>;
+type Navbar = InstanceType<typeof Navbar>;
+export default Navbar;

package/dist/elements/pagination/Pagination.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { twMerge, twJoin } from 'tailwind-merge';
+  import { createEventDispatcher, setContext } from 'svelte';
+  import type { LinkType } from '../types';
+  import PaginationItem from './PaginationItem.svelte';
+
+  export let pages: LinkType[] = [];
+  export let activeClass: string = 'text-blue-600 border border-neutral-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-neutral-700 dark:bg-neutral-700 dark:text-white';
+  export let normalClass: string = 'text-neutral-500 bg-white hover:bg-neutral-100 hover:text-neutral-700 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-white';
+  export let ulClass: string = 'inline-flex -space-x-px items-center';
+  export let table: boolean = false;
+  export let large: boolean = false;
+  export let ariaLabel: string = 'Page navigation';
+
+  const dispatch = createEventDispatcher();
+
+  setContext<boolean>('group', true);
+  setContext<boolean>('table', table);
+
+  const previous = () => {
+    dispatch('previous');
+  };
+  const next = () => {
+    dispatch('next');
+  };
+</script>
+
+<nav aria-label={ariaLabel}>
+  <ul class={twMerge(ulClass, table && 'divide-x dark divide-neutral-700 dark:divide-neutral-700', $$props.class)}>
+    <li>
+      <PaginationItem {large} on:click={previous} {normalClass} class={table ? 'rounded-l' : 'rounded-l-lg'}>
+        <slot name="prev">Previous</slot>
+      </PaginationItem>
+    </li>
+    {#each pages as { name, href, active }}
+      <li>
+        <PaginationItem {large} {active} {activeClass} {normalClass} {href} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
+          {name}
+        </PaginationItem>
+      </li>
+    {/each}
+    <li>
+      <PaginationItem {large} on:click={next} {normalClass} class={table ? 'rounded-r' : 'rounded-r-lg'}>
+        <slot name="next">Next</slot>
+      </PaginationItem>
+    </li>
+  </ul>
+</nav>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let pages: LinkType[] = [];
+@prop export let activeClass: string = 'text-blue-600 border border-neutral-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-neutral-700 dark:bg-neutral-700 dark:text-white';
+@prop export let normalClass: string = 'text-neutral-500 bg-white hover:bg-neutral-100 hover:text-neutral-700 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-white';
+@prop export let ulClass: string = 'inline-flex -space-x-px items-center';
+@prop export let table: boolean = false;
+@prop export let large: boolean = false;
+@prop export let ariaLabel: string = 'Page navigation';
+-->

package/dist/elements/pagination/Pagination.svelte.d.ts

@@ -0,0 +1,55 @@
+import type { LinkType } 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;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let pages: LinkType[] = [];
+ * @prop export let activeClass: string = 'text-blue-600 border border-neutral-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-neutral-700 dark:bg-neutral-700 dark:text-white';
+ * @prop export let normalClass: string = 'text-neutral-500 bg-white hover:bg-neutral-100 hover:text-neutral-700 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-white';
+ * @prop export let ulClass: string = 'inline-flex -space-x-px items-center';
+ * @prop export let table: boolean = false;
+ * @prop export let large: boolean = false;
+ * @prop export let ariaLabel: string = 'Page navigation';
+ */
+declare const Pagination: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    pages?: LinkType[] | undefined;
+    activeClass?: string | undefined;
+    normalClass?: string | undefined;
+    ulClass?: string | undefined;
+    table?: boolean | undefined;
+    large?: boolean | undefined;
+    ariaLabel?: string | undefined;
+}, {
+    blur: FocusEvent;
+    change: Event;
+    click: MouseEvent;
+    focus: FocusEvent;
+    keydown: KeyboardEvent;
+    keypress: KeyboardEvent;
+    keyup: KeyboardEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    mouseover: MouseEvent;
+    previous: CustomEvent<any>;
+    next: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    prev: {};
+    next: {};
+}, {}, string>;
+type Pagination = InstanceType<typeof Pagination>;
+export default Pagination;

package/dist/elements/pagination/PaginationItem.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { getContext } from 'svelte';
+
+  export let href: string | undefined = undefined;
+  export let active: boolean = false;
+  export let activeClass: string = 'text-blue-600 border border-neutral-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-neutral-700 dark:bg-neutral-700 dark:text-white';
+  export let normalClass: string = 'text-neutral-500 bg-white hover:bg-neutral-100 hover:text-neutral-700 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-white';
+  export let large: boolean = false;
+
+  const group = getContext<boolean>('group');
+  const table = getContext<boolean>('table');
+
+  let defaultClass: string;
+  $: defaultClass = twMerge(
+    'flex items-center font-medium',
+    large ? 'h-10 px-4 text-base' : 'h-8 px-3 text-sm',
+    group ? '' : table ? 'rounded' : 'rounded-lg',
+    // table || 'border border-neutral-300 dark:border-neutral-700 dark:bg-neutral-800',
+    table ? '' : 'border',
+    active ? activeClass : normalClass,
+    $$props.class
+  );
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<svelte:element this={href ? 'a' : 'button'} {href} class={defaultClass} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover role={href ? 'button' : undefined}>
+  <slot />
+</svelte:element>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let href: string | undefined = undefined;
+@prop export let active: boolean = false;
+@prop export let activeClass: string = 'text-blue-600 border border-neutral-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-neutral-700 dark:bg-neutral-700 dark:text-white';
+@prop export let normalClass: string = 'text-neutral-500 bg-white hover:bg-neutral-100 hover:text-neutral-700 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-white';
+@prop export let large: boolean = false;
+-->

package/dist/elements/pagination/PaginationItem.svelte.d.ts

@@ -0,0 +1,54 @@
+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 href: string | undefined = undefined;
+ * @prop export let active: boolean = false;
+ * @prop export let activeClass: string = 'text-blue-600 border border-neutral-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-neutral-700 dark:bg-neutral-700 dark:text-white';
+ * @prop export let normalClass: string = 'text-neutral-500 bg-white hover:bg-neutral-100 hover:text-neutral-700 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-white';
+ * @prop export let large: boolean = false;
+ */
+declare const PaginationItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    href?: string | undefined | undefined;
+    active?: boolean | undefined;
+    activeClass?: string | undefined;
+    normalClass?: string | undefined;
+    large?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    blur: FocusEvent;
+    change: Event;
+    click: MouseEvent;
+    focus: FocusEvent;
+    keydown: KeyboardEvent;
+    keypress: KeyboardEvent;
+    keyup: KeyboardEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    mouseover: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type PaginationItem = InstanceType<typeof PaginationItem>;
+export default PaginationItem;

package/dist/elements/popover/Popover.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import Popper from '../utils/Popper.svelte';
+
+  // propagate props type from underlying Frame
+  interface $$Props extends ComponentProps<Popper> {
+    title?: string;
+    defaultClass?: string;
+  }
+
+  export let title: string = '';
+  export let defaultClass: string = 'py-2 px-3';
+</script>
+
+<Popper activeContent border shadow rounded {...$$restProps} class="dark:!border-neutral-600 {$$props.class}" on:show>
+  {#if $$slots.title || title}
+    <div class="py-2 px-3 bg-neutral-100 rounded-t-md border-b border-neutral-200 dark:border-neutral-600 dark:bg-neutral-700">
+      <slot name="title">
+        <h3 class="font-semibold text-neutral-900 dark:text-white">{title}</h3>
+      </slot>
+    </div>
+  {/if}
+  <div class={defaultClass}>
+    <slot />
+  </div>
+</Popper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let title: string = '';
+@prop export let defaultClass: string = 'py-2 px-3';
+-->

package/dist/elements/popover/Popover.svelte.d.ts

@@ -0,0 +1,68 @@
+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 title: string = '';
+ * @prop export let defaultClass: string = 'py-2 px-3';
+ */
+declare const Popover: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<import("svelte/elements").HTMLAnchorAttributes & {
+    tag?: string;
+    color?: "primary" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink" | "dark" | "default" | "none" | "form" | "light" | "neutral" | "dropdown" | "navbar" | "navbarUl";
+    rounded?: boolean;
+    border?: boolean;
+    shadow?: boolean;
+    transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
+    params?: object;
+    node?: HTMLElement | undefined;
+    use?: import("svelte/action").Action<HTMLElement, any>;
+    options?: object;
+    class?: string;
+    role?: string;
+} & {
+    children?: any;
+} & {
+    activeContent?: boolean;
+    arrow?: boolean;
+    offset?: number;
+    placement?: import("@floating-ui/utils").Placement;
+    trigger?: "hover" | "click";
+    triggeredBy?: string;
+    reference?: string;
+    strategy?: "absolute" | "fixed";
+    open?: boolean;
+    yOnly?: boolean;
+} & {
+    children?: any;
+} & {
+    title?: string;
+    defaultClass?: string;
+}, {
+    title: {};
+    default: {};
+}>, {
+    show: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    title: {};
+    default: {};
+}, {}, string>;
+type Popover = InstanceType<typeof Popover>;
+export default Popover;

package/dist/elements/progress/Progressbar.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { cubicOut } from 'svelte/easing';
+  import { tweened } from 'svelte/motion';
+  import type { EasingFunction } from 'svelte/transition';
+  import { twMerge, twJoin } from 'tailwind-merge';
+
+  export let progress: string | number = '45';
+  export let precision: number = 0
+  export let tweenDuration: number = 400;
+  export let animate: boolean = false;
+  export let size: string = 'h-2.5';
+  export let labelInside: boolean = false;
+  export let labelOutside: string = '';
+  export let easing: EasingFunction = cubicOut;
+  export let color: 'primary' | 'blue' | 'neutral' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'primary';
+  export let labelInsideClass: string = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
+  export let divClass: string = 'w-full bg-neutral-200 rounded-full dark:bg-neutral-700';
+
+  const _progress = tweened(0, {
+    duration: animate ? tweenDuration : 0,
+    easing
+  });
+
+  // let barColor: string;
+  const barColors = {
+    primary: 'bg-primary-600',
+    blue: 'bg-blue-600',
+    neutral: 'bg-neutral-600 dark:bg-neutral-300',
+    red: 'bg-red-600 dark:bg-red-500',
+    green: 'bg-green-600 dark:bg-green-500',
+    yellow: 'bg-yellow-400',
+    purple: 'bg-purple-600 dark:bg-purple-500',
+    indigo: 'bg-indigo-600 dark:bg-indigo-500'
+  };
+
+  $: _progress.set(Number(progress));
+</script>
+
+{#if labelOutside}
+  <div {...$$restProps} class={twMerge('flex justify-between mb-1', $$props.classLabelOutside)}>
+    <span class="text-base font-medium text-blue-700 dark:text-white">{labelOutside}</span>
+    <span class="text-sm font-medium text-blue-700 dark:text-white">{progress}%</span>
+  </div>
+{/if}
+<div class={twMerge(divClass, size, $$props.class)}>
+  {#if labelInside}
+    <div class={twJoin(labelInsideClass, barColors[color])} style="width: {$_progress}%">
+      {$_progress.toFixed(precision)}%
+    </div>
+  {:else}
+    <div class={twJoin(barColors[color], size, 'rounded-full')} style="width: {$_progress}%" />
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let progress: string | number = '45';
+@prop export let precision: number = 0
+  export let tweenDuration: number = 400;
+@prop export let animate: boolean = false;
+@prop export let size: string = 'h-2.5';
+@prop export let labelInside: boolean = false;
+@prop export let labelOutside: string = '';
+@prop export let easing: EasingFunction = cubicOut;
+@prop export let color: 'primary' | 'blue' | 'neutral' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'primary';
+@prop export let labelInsideClass: string = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
+@prop export let divClass: string = 'w-full bg-neutral-200 rounded-full dark:bg-neutral-700';
+-->

package/dist/elements/progress/Progressbar.svelte.d.ts

@@ -0,0 +1,47 @@
+import type { EasingFunction } from 'svelte/transition';
+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 progress: string | number = '45';
+ * @prop export let precision: number = 0
+ * export let tweenDuration: number = 400;
+ * @prop export let animate: boolean = false;
+ * @prop export let size: string = 'h-2.5';
+ * @prop export let labelInside: boolean = false;
+ * @prop export let labelOutside: string = '';
+ * @prop export let easing: EasingFunction = cubicOut;
+ * @prop export let color: 'primary' | 'blue' | 'neutral' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo' = 'primary';
+ * @prop export let labelInsideClass: string = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
+ * @prop export let divClass: string = 'w-full bg-neutral-200 rounded-full dark:bg-neutral-700';
+ */
+declare const Progressbar: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    progress?: string | number | undefined;
+    precision?: number | undefined;
+    tweenDuration?: number | undefined;
+    animate?: boolean | undefined;
+    size?: string | undefined;
+    labelInside?: boolean | undefined;
+    labelOutside?: string | undefined;
+    easing?: EasingFunction | undefined;
+    color?: "primary" | "blue" | "neutral" | "red" | "green" | "yellow" | "purple" | "indigo" | undefined;
+    labelInsideClass?: string | undefined;
+    divClass?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Progressbar = InstanceType<typeof Progressbar>;
+export default Progressbar;

package/dist/elements/rating/AdvancedRating.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let ratings: { label: string; rating: number }[] = [];
+  export let divClass: string = 'flex items-center mt-4';
+  export let labelClass: string = 'text-sm font-medium text-neutral-600 dark:text-neutral-500';
+  export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-neutral-200 rounded dark:bg-neutral-700';
+  export let ratingClass: string = 'h-5 bg-yellow-400 rounded';
+  export let rightLabelClass: string = 'text-sm font-medium text-neutral-600 dark:text-neutral-500';
+  export let unit: string = '%';
+
+  let divCls: string = twMerge(divClass, $$props.classDiv);
+  let labelCls: string = twMerge(labelClass, $$props.classLabel);
+  let ratingDivCls: string = twMerge(ratingDivClass, $$props.classRatingDiv);
+  let ratingCls: string = twMerge(ratingClass, $$props.classRating);
+  let rightLabelCls: string = twMerge(rightLabelClass, $$props.classRightLabel);
+</script>
+
+{#if $$slots.rating}
+  <slot name="rating" />
+{/if}
+{#if $$slots.globalText}
+  <slot name="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>
+    <span class={rightLabelCls}>{rating}{unit}</span>
+  </div>
+{/each}
+
+<!--
+@component
+[Go to docs](https://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-neutral-600 dark:text-neutral-500';
+@prop export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-neutral-200 rounded dark:bg-neutral-700';
+@prop export let ratingClass: string = 'h-5 bg-yellow-400 rounded';
+@prop export let rightLabelClass: string = 'text-sm font-medium text-neutral-600 dark:text-neutral-500';
+@prop export let unit: string = '%';
+-->

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

@@ -0,0 +1,44 @@
+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 divClass: string = 'flex items-center mt-4';
+ * @prop export let labelClass: string = 'text-sm font-medium text-neutral-600 dark:text-neutral-500';
+ * @prop export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-neutral-200 rounded dark:bg-neutral-700';
+ * @prop export let ratingClass: string = 'h-5 bg-yellow-400 rounded';
+ * @prop export let rightLabelClass: string = 'text-sm font-medium text-neutral-600 dark:text-neutral-500';
+ * @prop export let unit: string = '%';
+ */
+declare const AdvancedRating: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    ratings?: {
+        label: string;
+        rating: number;
+    }[] | undefined;
+    divClass?: string | undefined;
+    labelClass?: string | undefined;
+    ratingDivClass?: string | undefined;
+    ratingClass?: string | undefined;
+    rightLabelClass?: string | undefined;
+    unit?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    rating: {};
+    globalText: {};
+}, {}, string>;
+type AdvancedRating = InstanceType<typeof AdvancedRating>;
+export default AdvancedRating;

package/dist/elements/rating/Heart.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  export let fillPercent: number = 100;
+  export let fillColor: string = '#ff0000';
+  export let strokeColor: string = '#ff0000';
+  export let size: number = 24;
+  export let ariaLabel: string = 'heart';
+  export let id: string = 'heart';
+  export let role = 'img';
+</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>
+  <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="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/)
+## Props
+@prop export let fillPercent: number = 100;
+@prop export let fillColor: string = '#ff0000';
+@prop export let strokeColor: string = '#ff0000';
+@prop export let size: number = 24;
+@prop export let ariaLabel: string = 'heart';
+@prop export let id: string = 'heart';
+@prop export let role = 'img';
+-->

package/dist/elements/rating/Heart.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 = '#ff0000';
+ * @prop export let strokeColor: string = '#ff0000';
+ * @prop export let size: number = 24;
+ * @prop export let ariaLabel: string = 'heart';
+ * @prop export let id: string = 'heart';
+ * @prop export let role = 'img';
+ */
+declare const Heart: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    fillPercent?: number | undefined;
+    fillColor?: string | undefined;
+    strokeColor?: string | undefined;
+    size?: number | undefined;
+    ariaLabel?: string | undefined;
+    id?: string | undefined;
+    role?: string | undefined;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Heart = InstanceType<typeof Heart>;
+export default Heart;