svelora 3.0.6 → 3.0.7

package/dist/NumberTicker/NumberTicker.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { onMount } from "svelte";
+import { numberTickerVariants } from "./number-ticker.variants.js";
+let { value, duration = 2e3, decimals = 0, delay = 0, class: className, ...restProps } = $props();
+let styles = $derived(numberTickerVariants());
+let displayValue = $state(0);
+let isVisible = $state(false);
+let nodeRef = $state(null);
+// Easing function (easeOutExpo)
+const easeOutExpo = (x) => {
+	return x === 1 ? 1 : 1 - 2 ** (-10 * x);
+};
+onMount(() => {
+	if (!nodeRef) return;
+	let startTime = null;
+	let animationFrame;
+	const animate = (timestamp) => {
+		if (!startTime) startTime = timestamp;
+		const progress = timestamp - startTime;
+		if (progress < duration) {
+			const percentage = progress / duration;
+			const easedProgress = easeOutExpo(percentage);
+			displayValue = value * easedProgress;
+			animationFrame = requestAnimationFrame(animate);
+		} else {
+			displayValue = value;
+		}
+	};
+	const observer = new IntersectionObserver((entries) => {
+		if (entries[0].isIntersecting && !isVisible) {
+			isVisible = true;
+			setTimeout(() => {
+				animationFrame = requestAnimationFrame(animate);
+			}, delay);
+		}
+	}, { threshold: .1 });
+	observer.observe(nodeRef);
+	return () => {
+		observer.disconnect();
+		if (animationFrame) cancelAnimationFrame(animationFrame);
+	};
+});
+// Re-animate if value changes significantly (optional)
+$effect(() => {
+	if (isVisible && value !== undefined) {}
+});
+let formattedValue = $derived(new Intl.NumberFormat("en-US", {
+	minimumFractionDigits: decimals,
+	maximumFractionDigits: decimals
+}).format(displayValue));
+</script>
+
+<span 
+    bind:this={nodeRef}
+    class={twMerge(styles.base() as string, className)} 
+    {...restProps}
+>
+    {formattedValue}
+</span>

package/dist/NumberTicker/NumberTicker.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NumberTickerProps } from './number-ticker.types.js';
+declare const NumberTicker: import("svelte").Component<NumberTickerProps, {}, "">;
+type NumberTicker = ReturnType<typeof NumberTicker>;
+export default NumberTicker;

package/dist/NumberTicker/index.d.ts

@@ -0,0 +1,4 @@
+import NumberTicker from './NumberTicker.svelte';
+export { NumberTicker };
+export * from './number-ticker.types.js';
+export * from './number-ticker.variants.js';

package/dist/NumberTicker/index.js

@@ -0,0 +1,4 @@
+import NumberTicker from './NumberTicker.svelte';
+export { NumberTicker };
+export * from './number-ticker.types.js';
+export * from './number-ticker.variants.js';

package/dist/NumberTicker/number-ticker.types.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface NumberTickerProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The target number to animate to.
+     */
+    value: number;
+    /**
+     * Duration of the animation in milliseconds.
+     * @default 2000
+     */
+    duration?: number;
+    /**
+     * Whether to show decimal places.
+     * @default 0
+     */
+    decimals?: number;
+    /**
+     * Start delay in milliseconds.
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+}

package/dist/NumberTicker/number-ticker.types.js

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

package/dist/NumberTicker/number-ticker.variants.d.ts

@@ -0,0 +1,27 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const numberTickerVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+}, undefined, unknown, unknown, undefined>>;
+export type NumberTickerVariantProps = VariantProps<typeof numberTickerVariants>;

package/dist/NumberTicker/number-ticker.variants.js

@@ -0,0 +1,6 @@
+import { tv } from 'tailwind-variants';
+export const numberTickerVariants = tv({
+    slots: {
+        base: 'inline-block font-mono tracking-wider tabular-nums text-surface-900 dark:text-surface-50'
+    }
+});

package/dist/PasswordInput/PasswordInput.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import Icon from "../Icon/Icon.svelte";
+import Input from "../Input/Input.svelte";
+import { passwordInputVariants } from "./password-input.variants.js";
+let { value = $bindable(""), showStrength = false, strengthFn, strengthLabels = [
+	"Very Weak",
+	"Weak",
+	"Fair",
+	"Good",
+	"Strong"
+], class: className, ...restProps } = $props();
+let styles = $derived(passwordInputVariants());
+let isVisible = $state(false);
+function toggleVisibility() {
+	isVisible = !isVisible;
+}
+// Basic strength calculation if none provided
+function calculateStrength(pwd) {
+	if (!pwd) return -1;
+	let score = 0;
+	if (pwd.length > 8) score += 1;
+	if (/[A-Z]/.test(pwd) && /[a-z]/.test(pwd)) score += 1;
+	if (/[0-9]/.test(pwd)) score += 1;
+	if (/[^A-Za-z0-9]/.test(pwd)) score += 1;
+	return score;
+}
+let strength = $derived(strengthFn ? strengthFn(String(value ?? "")) : calculateStrength(String(value ?? "")));
+// Colors for the 4 segments based on current strength
+function getSegmentColor(index, currentStrength) {
+	if (currentStrength === -1 || index > currentStrength) return "bg-surface-200 dark:bg-surface-700";
+	if (currentStrength === 0) return "bg-error-500";
+	if (currentStrength === 1) return "bg-warning-500";
+	if (currentStrength === 2) return "bg-success-400";
+	return "bg-success-500";
+}
+</script>
+
+<div class={twMerge(styles.wrapper() as string, className)}>
+    <div class={styles.inputWrapper() as string}>
+        <Input 
+            {...restProps as any}
+            bind:value 
+            type={isVisible ? 'text' : 'password'}
+            class="w-full pr-10"
+        />
+        
+        <button
+            type="button"
+            class={styles.toggleBtn() as string}
+            onclick={toggleVisibility}
+            tabindex="-1"
+            aria-label={isVisible ? 'Hide password' : 'Show password'}
+        >
+            {#if isVisible}
+                <Icon name="lucide:eye-off" class="w-5 h-5" />
+            {:else}
+                <Icon name="lucide:eye" class="w-5 h-5" />
+            {/if}
+        </button>
+    </div>
+
+    {#if showStrength && String(value ?? '').length > 0}
+        <div>
+            <div class={styles.meterWrapper() as string}>
+                {#each Array(4) as _, i}
+                    <div class={twMerge(styles.meterSegment() as string, getSegmentColor(i, strength))}></div>
+                {/each}
+            </div>
+            <div class={styles.strengthText() as string}>
+                {strengthLabels[Math.max(0, strength)]}
+            </div>
+        </div>
+    {/if}
+</div>

package/dist/PasswordInput/PasswordInput.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PasswordInputProps } from './password-input.types.js';
+declare const PasswordInput: import("svelte").Component<PasswordInputProps, {}, "value">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;

package/dist/PasswordInput/index.d.ts

@@ -0,0 +1,4 @@
+import PasswordInput from './PasswordInput.svelte';
+export { PasswordInput };
+export * from './password-input.types.js';
+export * from './password-input.variants.js';

package/dist/PasswordInput/index.js

@@ -0,0 +1,4 @@
+import PasswordInput from './PasswordInput.svelte';
+export { PasswordInput };
+export * from './password-input.types.js';
+export * from './password-input.variants.js';

package/dist/PasswordInput/password-input.types.d.ts

@@ -0,0 +1,18 @@
+import type { InputProps } from '../Input/input.types.js';
+export interface PasswordInputProps extends Omit<InputProps, 'type'> {
+    /**
+     * Whether to show the password strength meter.
+     * @default false
+     */
+    showStrength?: boolean;
+    /**
+     * Custom function to calculate password strength (0 to 4).
+     * 0 = Very Weak, 4 = Very Strong.
+     */
+    strengthFn?: (password: string) => number;
+    /**
+     * Labels for the strength levels (0-4).
+     * @default ['Very Weak', 'Weak', 'Fair', 'Good', 'Strong']
+     */
+    strengthLabels?: [string, string, string, string, string];
+}

package/dist/PasswordInput/password-input.types.js

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

package/dist/PasswordInput/password-input.variants.d.ts

@@ -0,0 +1,57 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const passwordInputVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            wrapper?: import("tailwind-merge").ClassNameValue;
+            inputWrapper?: import("tailwind-merge").ClassNameValue;
+            toggleBtn?: import("tailwind-merge").ClassNameValue;
+            meterWrapper?: import("tailwind-merge").ClassNameValue;
+            meterSegment?: import("tailwind-merge").ClassNameValue;
+            strengthText?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            wrapper?: import("tailwind-merge").ClassNameValue;
+            inputWrapper?: import("tailwind-merge").ClassNameValue;
+            toggleBtn?: import("tailwind-merge").ClassNameValue;
+            meterWrapper?: import("tailwind-merge").ClassNameValue;
+            meterSegment?: import("tailwind-merge").ClassNameValue;
+            strengthText?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    wrapper: string;
+    inputWrapper: string;
+    toggleBtn: string;
+    meterWrapper: string;
+    meterSegment: string;
+    strengthText: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            wrapper?: import("tailwind-merge").ClassNameValue;
+            inputWrapper?: import("tailwind-merge").ClassNameValue;
+            toggleBtn?: import("tailwind-merge").ClassNameValue;
+            meterWrapper?: import("tailwind-merge").ClassNameValue;
+            meterSegment?: import("tailwind-merge").ClassNameValue;
+            strengthText?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    wrapper: string;
+    inputWrapper: string;
+    toggleBtn: string;
+    meterWrapper: string;
+    meterSegment: string;
+    strengthText: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    wrapper: string;
+    inputWrapper: string;
+    toggleBtn: string;
+    meterWrapper: string;
+    meterSegment: string;
+    strengthText: string;
+}, undefined, unknown, unknown, undefined>>;
+export type PasswordInputVariantProps = VariantProps<typeof passwordInputVariants>;

package/dist/PasswordInput/password-input.variants.js

@@ -0,0 +1,11 @@
+import { tv } from 'tailwind-variants';
+export const passwordInputVariants = tv({
+    slots: {
+        wrapper: 'relative flex flex-col gap-2 w-full',
+        inputWrapper: 'relative flex items-center w-full',
+        toggleBtn: 'absolute right-3 text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm transition-colors',
+        meterWrapper: 'flex gap-1 h-1.5 w-full mt-1',
+        meterSegment: 'flex-1 rounded-full transition-colors duration-300',
+        strengthText: 'text-xs text-surface-500 dark:text-surface-400 mt-1 text-right'
+    }
+});

package/dist/Prose/Prose.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { proseVariants } from "./prose.variants.js";
+let { size = "base", html, class: className, children, ...restProps } = $props();
+let styles = $derived(proseVariants({ size }));
+</script>
+
+<div class={twMerge(styles.base() as string, className)} {...restProps}>
+    {#if html}
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html html}
+    {/if}
+    {@render children?.()}
+</div>

package/dist/Prose/Prose.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ProseProps } from './prose.types.js';
+declare const Prose: import("svelte").Component<ProseProps, {}, "">;
+type Prose = ReturnType<typeof Prose>;
+export default Prose;

package/dist/Prose/index.d.ts

@@ -0,0 +1,4 @@
+import Prose from './Prose.svelte';
+export { Prose };
+export * from './prose.types.js';
+export * from './prose.variants.js';

package/dist/Prose/index.js

@@ -0,0 +1,4 @@
+import Prose from './Prose.svelte';
+export { Prose };
+export * from './prose.types.js';
+export * from './prose.variants.js';

package/dist/Prose/prose.types.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ProseVariantProps } from './prose.variants.js';
+export interface ProseProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Size of the typography text.
+     * @default 'base'
+     */
+    size?: ProseVariantProps['size'];
+    /**
+     * Html string to render. Usually coming from a markdown parser.
+     */
+    html?: string;
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * Content inside the prose container.
+     */
+    children?: Snippet;
+}

package/dist/Prose/prose.types.js

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

package/dist/Prose/prose.variants.d.ts

@@ -0,0 +1,45 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const proseVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            base: string;
+        };
+        base: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, {
+    size: {
+        sm: {
+            base: string;
+        };
+        base: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            base: string;
+        };
+        base: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type ProseVariantProps = VariantProps<typeof proseVariants>;

package/dist/Prose/prose.variants.js

@@ -0,0 +1,45 @@
+import { tv } from 'tailwind-variants';
+export const proseVariants = tv({
+    slots: {
+        base: [
+            'text-surface-900 dark:text-surface-50 max-w-none',
+            // Paragraphs
+            '[&_p]:leading-7 [&_p]:mb-6 [&_p:last-child]:mb-0',
+            // Headings
+            '[&_h1]:text-4xl [&_h1]:font-extrabold [&_h1]:tracking-tight [&_h1]:mt-0 [&_h1]:mb-6',
+            '[&_h2]:text-3xl [&_h2]:font-semibold [&_h2]:tracking-tight [&_h2]:mt-10 [&_h2]:mb-4',
+            '[&_h3]:text-2xl [&_h3]:font-semibold [&_h3]:tracking-tight [&_h3]:mt-8 [&_h3]:mb-4',
+            '[&_h4]:text-xl [&_h4]:font-semibold [&_h4]:tracking-tight [&_h4]:mt-8 [&_h4]:mb-4',
+            // Links
+            '[&_a]:font-medium [&_a]:text-primary-600 dark:[&_a]:text-primary-400 [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary-500',
+            // Blockquotes
+            '[&_blockquote]:mt-6 [&_blockquote]:mb-6 [&_blockquote]:border-l-4 [&_blockquote]:border-primary-500 [&_blockquote]:pl-6 [&_blockquote]:italic [&_blockquote]:text-surface-700 dark:[&_blockquote]:text-surface-300',
+            // Lists
+            '[&_ul]:my-6 [&_ul]:ml-6 [&_ul]:list-disc [&_ul>li]:mt-2',
+            '[&_ol]:my-6 [&_ol]:ml-6 [&_ol]:list-decimal [&_ol>li]:mt-2',
+            // Code & Pre
+            '[&_code]:relative [&_code]:rounded [&_code]:bg-surface-200 dark:[&_code]:bg-surface-800 [&_code]:px-[0.3rem] [&_code]:py-[0.2rem] [&_code]:font-mono [&_code]:text-sm [&_code]:font-semibold',
+            '[&_pre]:mb-6 [&_pre]:mt-6 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-surface-900 [&_pre]:py-4 [&_pre]:dark:bg-surface-800',
+            '[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-surface-50 [&_pre_code]:font-normal',
+            // Images & Media
+            '[&_img]:rounded-lg [&_img]:border [&_img]:border-outline-variant [&_video]:rounded-lg',
+            // Tables
+            '[&_table]:w-full [&_table]:my-6 [&_table]:overflow-y-auto [&_table]:text-left',
+            '[&_th]:border [&_th]:border-outline-variant [&_th]:px-4 [&_th]:py-2 [&_th]:font-semibold [&_th]:bg-surface-100 dark:[&_th]:bg-surface-800',
+            '[&_td]:border [&_td]:border-outline-variant [&_td]:px-4 [&_td]:py-2',
+            '[&_tr:nth-child(even)]:bg-surface-50 dark:[&_tr:nth-child(even)]:bg-surface-900/50',
+            // HR
+            '[&_hr]:my-8 [&_hr]:border-outline-variant'
+        ]
+    },
+    variants: {
+        size: {
+            sm: { base: 'text-sm [&_h1]:text-3xl [&_h2]:text-2xl [&_h3]:text-xl' },
+            base: { base: 'text-base' },
+            lg: { base: 'text-lg [&_h1]:text-5xl [&_h2]:text-4xl [&_h3]:text-3xl' }
+        }
+    },
+    defaultVariants: {
+        size: 'base'
+    }
+});

package/dist/Rating/Rating.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import Icon from "../Icon/Icon.svelte";
+import { ratingVariants } from "./rating.variants.js";
+let { value = $bindable(0), max = 5, size = "md", allowHalf = false, disabled = false, readonly = false, iconFull = "lucide:star", iconEmpty = "lucide:star", activeColor = "text-warning-500 fill-warning-500", inactiveColor = "text-surface-300 dark:text-surface-600", class: className, onchange, ...restProps } = $props();
+let styles = $derived(ratingVariants({
+	size,
+	disabled,
+	readonly
+}));
+let hoverValue = $state(null);
+// Calculate array of stars
+let stars = $derived(Array.from({ length: max }, (_, i) => i + 1));
+function handleMouseMove(e, index) {
+	if (disabled || readonly) return;
+	if (allowHalf) {
+		const rect = e.currentTarget.getBoundingClientRect();
+		const x = e.clientX - rect.left;
+		const isHalf = x < rect.width / 2;
+		hoverValue = isHalf ? index - .5 : index;
+	} else {
+		hoverValue = index;
+	}
+}
+function handleMouseLeave() {
+	if (disabled || readonly) return;
+	hoverValue = null;
+}
+function handleClick(index) {
+	if (disabled || readonly) return;
+	value = hoverValue ?? index;
+	onchange?.(value);
+}
+function handleKeyDown(e, index) {
+	if (disabled || readonly) return;
+	let newValue = value;
+	if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+		newValue = Math.min(max, value + (allowHalf ? .5 : 1));
+	} else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+		newValue = Math.max(0, value - (allowHalf ? .5 : 1));
+	} else if (e.key === "Enter" || e.key === " ") {
+		newValue = index;
+	} else {
+		return;
+	}
+	e.preventDefault();
+	value = newValue;
+	onchange?.(value);
+}
+function getStarState(index) {
+	const currentValue = hoverValue ?? value;
+	if (currentValue >= index) return "full";
+	if (allowHalf && currentValue >= index - .5) return "half";
+	return "empty";
+}
+</script>
+
+<div 
+    class={twMerge(styles.base() as string, className)} 
+    onmouseleave={handleMouseLeave}
+    {...restProps}
+    role="radiogroup"
+>
+    {#each stars as starIndex}
+        {@const state = getStarState(starIndex)}
+        
+        <button
+            type="button"
+            role="radio"
+            aria-checked={value >= starIndex}
+            aria-label={`Rate ${starIndex} out of ${max} stars`}
+            class={styles.starWrapper() as string}
+            disabled={disabled || readonly}
+            tabindex={disabled || readonly ? -1 : 0}
+            onmousemove={(e) => handleMouseMove(e, starIndex)}
+            onclick={() => handleClick(starIndex)}
+            onkeydown={(e) => handleKeyDown(e, starIndex)}
+        >
+            {#if state === 'full'}
+                <Icon name={iconFull} class={twMerge(styles.star() as string, activeColor)} />
+            {:else if state === 'half'}
+                <!-- Simple half star implementation using CSS clip-path or two icons -->
+                <div class="relative">
+                    <Icon name={iconEmpty} class={twMerge(styles.star() as string, inactiveColor)} />
+                    <div class="absolute inset-0 overflow-hidden w-1/2">
+                        <Icon name={iconFull} class={twMerge(styles.star() as string, activeColor)} />
+                    </div>
+                </div>
+            {:else}
+                <Icon name={iconEmpty} class={twMerge(styles.star() as string, inactiveColor)} />
+            {/if}
+        </button>
+    {/each}
+</div>

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

@@ -0,0 +1,4 @@
+import type { RatingProps } from './rating.types.js';
+declare const Rating: import("svelte").Component<RatingProps, {}, "value">;
+type Rating = ReturnType<typeof Rating>;
+export default Rating;

package/dist/Rating/index.d.ts

@@ -0,0 +1,4 @@
+import Rating from './Rating.svelte';
+export { Rating };
+export * from './rating.types.js';
+export * from './rating.variants.js';

package/dist/Rating/index.js

@@ -0,0 +1,4 @@
+import Rating from './Rating.svelte';
+export { Rating };
+export * from './rating.types.js';
+export * from './rating.variants.js';

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

@@ -0,0 +1,59 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { RatingVariantProps } from './rating.variants.js';
+export interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
+    /**
+     * The current rating value.
+     */
+    value?: number;
+    /**
+     * The maximum rating value (number of stars).
+     * @default 5
+     */
+    max?: number;
+    /**
+     * Size of the stars.
+     * @default 'md'
+     */
+    size?: RatingVariantProps['size'];
+    /**
+     * Whether the rating allows half-star selection.
+     * @default false
+     */
+    allowHalf?: boolean;
+    /**
+     * Whether the rating is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the rating is read-only (cannot be changed by user).
+     */
+    readonly?: boolean;
+    /**
+     * Icon to use for the full star.
+     * @default 'lucide:star'
+     */
+    iconFull?: string;
+    /**
+     * Icon to use for the empty star.
+     * @default 'lucide:star'
+     */
+    iconEmpty?: string;
+    /**
+     * Color class for the active/filled stars.
+     * @default 'text-warning-500 fill-warning-500'
+     */
+    activeColor?: string;
+    /**
+     * Color class for the inactive/empty stars.
+     * @default 'text-surface-300 dark:text-surface-600'
+     */
+    inactiveColor?: string;
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * Event fired when the rating changes.
+     */
+    onchange?: (value: number) => void;
+}

package/dist/Rating/rating.types.js

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