@flikk/ui 1.0.0-beta.1

package/dist/components/core/ProgressiveBlur/ProgressiveBlur.js

@@ -0,0 +1,218 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useRef, useState, useMemo, useEffect } from 'react';
+
+const DEFAULT_CONFIG = {
+    position: "bottom",
+    strength: 2,
+    height: "6rem",
+    divCount: 5,
+    exponential: false,
+    zIndex: 1000,
+    animated: false,
+    duration: "0.3s",
+    easing: "ease-out",
+    opacity: 1,
+    curve: "linear",
+    responsive: false,
+    target: "parent",
+    className: "",
+    style: {},
+};
+const PRESETS = {
+    top: { position: "top", height: "6rem" },
+    bottom: { position: "bottom", height: "6rem" },
+    left: { position: "left", height: "6rem" },
+    right: { position: "right", height: "6rem" },
+    subtle: { height: "4rem", strength: 1, opacity: 0.8, divCount: 3 },
+    intense: { height: "10rem", strength: 4, divCount: 8, exponential: true },
+    smooth: { height: "8rem", curve: "bezier", divCount: 10 },
+    sharp: { height: "5rem", curve: "linear", divCount: 4 },
+    header: { position: "top", height: "8rem", curve: "ease-out" },
+    footer: { position: "bottom", height: "8rem", curve: "ease-out" },
+    sidebar: { position: "left", height: "6rem", strength: 2.5 },
+    "page-header": {
+        position: "top",
+        height: "10rem",
+        target: "page",
+        strength: 3,
+    },
+    "page-footer": {
+        position: "bottom",
+        height: "10rem",
+        target: "page",
+        strength: 3,
+    },
+};
+const CURVE_FUNCTIONS = {
+    linear: (p) => p,
+    bezier: (p) => p * p * (3 - 2 * p),
+    "ease-in": (p) => p * p,
+    "ease-out": (p) => 1 - Math.pow(1 - p, 2),
+    "ease-in-out": (p) => (p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2),
+};
+const mergeConfigs = (...configs) => {
+    return configs.reduce((acc, config) => ({ ...acc, ...config }), {});
+};
+const getGradientDirection = (position) => {
+    const directions = {
+        top: "to top",
+        bottom: "to bottom",
+        left: "to left",
+        right: "to right",
+    };
+    return directions[position] || "to bottom";
+};
+const debounce = (fn, wait) => {
+    let t;
+    return (...a) => {
+        clearTimeout(t);
+        t = setTimeout(() => fn(...a), wait);
+    };
+};
+const useResponsiveDimension = (responsive, config, key) => {
+    const [val, setVal] = useState(config[key]);
+    useEffect(() => {
+        if (!responsive)
+            return;
+        const calc = () => {
+            const w = window.innerWidth;
+            let v = config[key];
+            const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+            const k = cap(key);
+            if (w <= 480 && config["mobile" + k])
+                v = config["mobile" + k];
+            else if (w <= 768 && config["tablet" + k])
+                v = config["tablet" + k];
+            else if (w <= 1024 && config["desktop" + k])
+                v = config["desktop" + k];
+            setVal(v);
+        };
+        const deb = debounce(calc, 100);
+        calc();
+        window.addEventListener("resize", deb);
+        return () => window.removeEventListener("resize", deb);
+    }, [responsive, config, key]);
+    return responsive ? val : config[key];
+};
+const useIntersectionObserver = (ref, shouldObserve = false) => {
+    const [isVisible, setIsVisible] = useState(!shouldObserve);
+    useEffect(() => {
+        if (!shouldObserve || !ref.current)
+            return;
+        const observer = new IntersectionObserver(([entry]) => setIsVisible(entry.isIntersecting), { threshold: 0.1 });
+        observer.observe(ref.current);
+        return () => observer.disconnect();
+    }, [ref, shouldObserve]);
+    return isVisible;
+};
+const ProgressiveBlurBase = (props) => {
+    const containerRef = useRef(null);
+    const [isHovered, setIsHovered] = useState(false);
+    const config = useMemo(() => {
+        const presetConfig = props.preset && PRESETS[props.preset] ? PRESETS[props.preset] : {};
+        return mergeConfigs(DEFAULT_CONFIG, presetConfig, props);
+    }, [props]);
+    const responsiveHeight = useResponsiveDimension(config.responsive, config, "height");
+    const responsiveWidth = useResponsiveDimension(config.responsive, config, "width");
+    const isVisible = useIntersectionObserver(containerRef, config.animated === "scroll");
+    const blurDivs = useMemo(() => {
+        const divs = [];
+        const increment = 100 / config.divCount;
+        const currentStrength = isHovered && config.hoverIntensity
+            ? config.strength * config.hoverIntensity
+            : config.strength;
+        const curveFunc = CURVE_FUNCTIONS[config.curve] || CURVE_FUNCTIONS.linear;
+        for (let i = 1; i <= config.divCount; i++) {
+            let progress = i / config.divCount;
+            progress = curveFunc(progress);
+            let blurValue;
+            if (config.exponential) {
+                blurValue =
+                    Math.pow(2, progress * 4) * 0.0625 * currentStrength;
+            }
+            else {
+                blurValue = 0.0625 * (progress * config.divCount + 1) * currentStrength;
+            }
+            const p1 = Math.round((increment * i - increment) * 10) / 10;
+            const p2 = Math.round(increment * i * 10) / 10;
+            const p3 = Math.round((increment * i + increment) * 10) / 10;
+            const p4 = Math.round((increment * i + increment * 2) * 10) / 10;
+            let gradient = `transparent ${p1}%, black ${p2}%`;
+            if (p3 <= 100)
+                gradient += `, black ${p3}%`;
+            if (p4 <= 100)
+                gradient += `, transparent ${p4}%`;
+            const direction = getGradientDirection(config.position);
+            const divStyle = {
+                maskImage: `linear-gradient(${direction}, ${gradient})`,
+                WebkitMaskImage: `linear-gradient(${direction}, ${gradient})`,
+                backdropFilter: `blur(${blurValue.toFixed(3)}rem)`,
+                opacity: config.opacity,
+                transition: config.animated && config.animated !== "scroll"
+                    ? `backdrop-filter ${config.duration} ${config.easing}`
+                    : undefined,
+            };
+            divs.push(jsx("div", { className: "absolute inset-0", style: divStyle }, i));
+        }
+        return divs;
+    }, [config, isHovered]);
+    const containerStyle = useMemo(() => {
+        const isVertical = ["top", "bottom"].includes(config.position);
+        const isHorizontal = ["left", "right"].includes(config.position);
+        const isPageTarget = config.target === "page";
+        const baseStyle = {
+            position: isPageTarget ? "fixed" : "absolute",
+            pointerEvents: config.hoverIntensity ? "auto" : "none",
+            opacity: isVisible ? 1 : 0,
+            transition: config.animated
+                ? `opacity ${config.duration} ${config.easing}`
+                : undefined,
+            zIndex: isPageTarget ? config.zIndex + 100 : config.zIndex,
+            ...config.style,
+        };
+        if (isVertical) {
+            baseStyle.height = responsiveHeight;
+            baseStyle.width = responsiveWidth || "100%";
+            baseStyle[config.position] = 0;
+            baseStyle.left = 0;
+            baseStyle.right = 0;
+        }
+        else if (isHorizontal) {
+            baseStyle.width = responsiveWidth || responsiveHeight;
+            baseStyle.height = "100%";
+            baseStyle[config.position] = 0;
+            baseStyle.top = 0;
+            baseStyle.bottom = 0;
+        }
+        return baseStyle;
+    }, [config, responsiveHeight, responsiveWidth, isVisible]);
+    const { hoverIntensity, animated, onAnimationComplete, duration } = config;
+    useEffect(() => {
+        if (isVisible && animated === "scroll" && onAnimationComplete) {
+            const t = setTimeout(() => onAnimationComplete(), parseFloat(duration) * 1000);
+            return () => clearTimeout(t);
+        }
+    }, [isVisible, animated, onAnimationComplete, duration]);
+    return (jsxs("div", { ref: containerRef, className: `gradual-blur relative isolate ${config.target === "page" ? "gradual-blur-page" : "gradual-blur-parent"} ${config.className}`, style: containerStyle, onMouseEnter: hoverIntensity ? () => setIsHovered(true) : undefined, onMouseLeave: hoverIntensity ? () => setIsHovered(false) : undefined, children: [jsx("div", { className: "relative w-full h-full", children: blurDivs }), props.children && jsx("div", { className: "relative", children: props.children })] }));
+};
+const ProgressiveBlur = Object.assign(React__default.memo(ProgressiveBlurBase), {
+    displayName: "ProgressiveBlur",
+    PRESETS,
+    CURVE_FUNCTIONS,
+});
+const injectStyles = () => {
+    if (typeof document === "undefined")
+        return;
+    const id = "gradual-blur-styles";
+    if (document.getElementById(id))
+        return;
+    const el = document.createElement("style");
+    el.id = id;
+    el.textContent = `.gradual-blur{pointer-events:none;transition:opacity .3s ease-out}.gradual-blur-inner{pointer-events:none}`;
+    document.head.appendChild(el);
+};
+if (typeof document !== "undefined") {
+    injectStyles();
+}
+
+export { ProgressiveBlur };

package/dist/components/core/ProgressiveBlur/ProgressiveBlur.theme.d.ts

@@ -0,0 +1,9 @@
+export declare const progressiveBlurTheme: {
+    readonly baseStyle: "absolute pointer-events-none z-10";
+    readonly positions: {
+        readonly top: "top-0 left-0 right-0";
+        readonly bottom: "bottom-0 left-0 right-0";
+        readonly left: "left-0 top-0 bottom-0";
+        readonly right: "right-0 top-0 bottom-0";
+    };
+};

package/dist/components/core/ProgressiveBlur/ProgressiveBlur.types.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+export type ProgressiveBlurPosition = "top" | "bottom" | "left" | "right";
+export interface ProgressiveBlurProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Position(s) where the blur effect should be applied
+     * Can be a single position or array of positions
+     */
+    position: ProgressiveBlurPosition | ProgressiveBlurPosition[];
+    /**
+     * Blur intensity in pixels
+     * @default 8
+     */
+    blurIntensity?: number;
+    /**
+     * Custom blur levels array for more control
+     * If provided, overrides blurIntensity
+     */
+    blurLevels?: number[];
+    /**
+     * Number of blur layers to generate for the gradient effect
+     * Higher numbers result in smoother gradients but may impact performance
+     * @default 8
+     */
+    layers?: number;
+    /**
+     * Size of the blur region (height for top/bottom, width for left/right)
+     * @default "40px"
+     */
+    size?: string;
+    /**
+     * Custom className for styling overrides
+     */
+    className?: string;
+    /**
+     * Theme overrides
+     */
+    theme?: ProgressiveBlurThemeOverrides;
+}
+export interface ProgressiveBlurThemeOverrides {
+    /**
+     * Base styles for the blur container
+     */
+    baseStyle?: string;
+    /**
+     * Position-specific styles
+     */
+    positions?: Partial<Record<ProgressiveBlurPosition, string>>;
+}

package/dist/components/core/ProgressiveBlur/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressiveBlur } from "./ProgressiveBlur";
+export type { ProgressiveBlurProps } from "./ProgressiveBlur";

package/dist/components/core/Rating/Rating.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { RatingProps } from "./Rating.types";
+/**
+ * Rating component for displaying and collecting star-based ratings.
+ *
+ * Supports controlled and uncontrolled modes, half-star increments,
+ * read-only display, keyboard navigation, and custom icons.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Rating defaultValue={3} />
+ * <Rating value={3.5} allowHalf onChange={setRating} />
+ * <Rating value={4} readOnly />
+ * <Rating defaultValue={4} size="lg" color="primary" />
+ * ```
+ */
+export declare const Rating: React.NamedExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Rating/Rating.js

@@ -0,0 +1,171 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useState, useMemo, useCallback } from 'react';
+import { StarIcon } from '@heroicons/react/24/solid';
+import { StarIcon as StarIcon$1 } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { ratingTheme } from './Rating.theme.js';
+
+/**
+ * Rating component for displaying and collecting star-based ratings.
+ *
+ * Supports controlled and uncontrolled modes, half-star increments,
+ * read-only display, keyboard navigation, and custom icons.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Rating defaultValue={3} />
+ * <Rating value={3.5} allowHalf onChange={setRating} />
+ * <Rating value={4} readOnly />
+ * <Rating defaultValue={4} size="lg" color="primary" />
+ * ```
+ */
+const Rating = React__default.memo(React__default.forwardRef(({ value: controlledValue, defaultValue = 0, max = 5, size = "md", color = "warning", readOnly = false, disabled = false, allowHalf = false, onChange, iconFilled, iconEmpty, className, theme: customTheme = {}, ...props }, ref) => {
+    var _a, _b, _c;
+    // Determine controlled vs uncontrolled mode
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const currentValue = isControlled ? controlledValue : internalValue;
+    // Hover state for preview
+    const [hoverValue, setHoverValue] = useState(null);
+    // Merge default theme with custom theme overrides
+    const theme = useMemo(() => ({
+        ...ratingTheme,
+        ...customTheme,
+        starSizes: {
+            ...ratingTheme.starSizes,
+            ...customTheme.starSizes,
+        },
+        gapSizes: {
+            ...ratingTheme.gapSizes,
+            ...customTheme.gapSizes,
+        },
+        filledColors: {
+            ...ratingTheme.filledColors,
+            ...customTheme.filledColors,
+        },
+        states: {
+            ...ratingTheme.states,
+            ...customTheme.states,
+        },
+    }), [customTheme]);
+    const isInteractive = !readOnly && !disabled;
+    // Set rating value
+    const handleSetValue = useCallback((newValue) => {
+        if (!isInteractive)
+            return;
+        // Clamp the value between 0 and max
+        const clampedValue = Math.min(Math.max(0, newValue), max);
+        if (!isControlled) {
+            setInternalValue(clampedValue);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(clampedValue);
+    }, [isInteractive, isControlled, max, onChange]);
+    // Handle click on a star
+    const handleStarClick = useCallback((starIndex, event) => {
+        if (!isInteractive)
+            return;
+        if (allowHalf) {
+            const rect = event.currentTarget.getBoundingClientRect();
+            const clickX = event.clientX - rect.left;
+            const isLeftHalf = clickX < rect.width / 2;
+            const newValue = isLeftHalf ? starIndex - 0.5 : starIndex;
+            handleSetValue(newValue);
+        }
+        else {
+            handleSetValue(starIndex);
+        }
+    }, [isInteractive, allowHalf, handleSetValue]);
+    // Handle mouse move over a star (hover preview)
+    const handleStarMouseMove = useCallback((starIndex, event) => {
+        if (!isInteractive)
+            return;
+        if (allowHalf) {
+            const rect = event.currentTarget.getBoundingClientRect();
+            const mouseX = event.clientX - rect.left;
+            const isLeftHalf = mouseX < rect.width / 2;
+            setHoverValue(isLeftHalf ? starIndex - 0.5 : starIndex);
+        }
+        else {
+            setHoverValue(starIndex);
+        }
+    }, [isInteractive, allowHalf]);
+    // Clear hover state
+    const handleMouseLeave = useCallback(() => {
+        if (!isInteractive)
+            return;
+        setHoverValue(null);
+    }, [isInteractive]);
+    // Keyboard navigation
+    const handleKeyDown = useCallback((event) => {
+        if (!isInteractive)
+            return;
+        const step = allowHalf ? 0.5 : 1;
+        let newValue = currentValue;
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                event.preventDefault();
+                newValue = Math.min(currentValue + step, max);
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                event.preventDefault();
+                newValue = Math.max(currentValue - step, 0);
+                break;
+            case "Home":
+                event.preventDefault();
+                newValue = 0;
+                break;
+            case "End":
+                event.preventDefault();
+                newValue = max;
+                break;
+            default:
+                return;
+        }
+        handleSetValue(newValue);
+    }, [isInteractive, allowHalf, currentValue, max, handleSetValue]);
+    // Determine the display value (hover preview takes precedence)
+    const displayValue = hoverValue !== null ? hoverValue : currentValue;
+    // Determine fill state for a given star index (1-based)
+    const getStarFillState = (starIndex) => {
+        if (displayValue >= starIndex)
+            return "full";
+        if (displayValue >= starIndex - 0.5)
+            return "half";
+        return "empty";
+    };
+    // Render a single star
+    const renderStar = (starIndex) => {
+        var _a, _b;
+        const fillState = getStarFillState(starIndex);
+        const starSizeClass = ((_a = theme.starSizes) === null || _a === void 0 ? void 0 : _a[size]) || "";
+        const filledColorClass = ((_b = theme.filledColors) === null || _b === void 0 ? void 0 : _b[color]) || "";
+        const emptyColorClass = theme.emptyColor || "";
+        // Determine which icon to render based on fill state
+        const renderStarIcon = () => {
+            if (fillState === "full") {
+                return iconFilled ? (jsx("span", { className: cn(starSizeClass, filledColorClass), "aria-hidden": "true", children: iconFilled })) : (jsx(StarIcon, { className: cn(starSizeClass, filledColorClass), "aria-hidden": "true" }));
+            }
+            if (fillState === "half") {
+                // Half star: clip a filled star to the left half, overlay on empty star
+                return (jsxs("span", { className: cn("relative inline-flex", starSizeClass), "aria-hidden": "true", children: [iconEmpty ? (jsx("span", { className: cn("absolute inset-0", emptyColorClass), children: iconEmpty })) : (jsx(StarIcon$1, { className: cn("absolute inset-0", starSizeClass, emptyColorClass) })), jsx("span", { className: "absolute inset-0 overflow-hidden", style: { width: "50%" }, children: iconFilled ? (jsx("span", { className: cn(filledColorClass), children: iconFilled })) : (jsx(StarIcon, { className: cn(starSizeClass, filledColorClass) })) })] }));
+            }
+            // Empty star
+            return iconEmpty ? (jsx("span", { className: cn(starSizeClass, emptyColorClass), "aria-hidden": "true", children: iconEmpty })) : (jsx(StarIcon$1, { className: cn(starSizeClass, emptyColorClass), "aria-hidden": "true" }));
+        };
+        if (!isInteractive) {
+            // Read-only or disabled: render as a span
+            return (jsx("span", { className: "inline-flex items-center justify-center", children: renderStarIcon() }, starIndex));
+        }
+        // Interactive: render as a button
+        return (jsx("button", { type: "button", className: cn(theme.starStyle, "hover:scale-110 active:scale-95"), onClick: (e) => handleStarClick(starIndex, e), onMouseMove: (e) => handleStarMouseMove(starIndex, e), "aria-label": `Rate ${starIndex} out of ${max}`, tabIndex: -1, children: renderStarIcon() }, starIndex));
+    };
+    // Build array of star indices (1-based)
+    const stars = useMemo(() => Array.from({ length: max }, (_, i) => i + 1), [max]);
+    return (jsx("div", { ref: ref, role: isInteractive ? "slider" : "img", "aria-label": `Rating: ${currentValue} out of ${max} stars`, "aria-valuenow": isInteractive ? currentValue : undefined, "aria-valuemin": isInteractive ? 0 : undefined, "aria-valuemax": isInteractive ? max : undefined, "aria-readonly": readOnly || undefined, "aria-disabled": disabled || undefined, tabIndex: isInteractive ? 0 : undefined, onKeyDown: isInteractive ? handleKeyDown : undefined, onMouseLeave: handleMouseLeave, "data-rating-value": currentValue, "data-state": disabled ? "disabled" : readOnly ? "readonly" : "interactive", ...props, className: cn(theme.baseStyle, (_a = theme.gapSizes) === null || _a === void 0 ? void 0 : _a[size], disabled && ((_b = theme.states) === null || _b === void 0 ? void 0 : _b.disabled), readOnly && ((_c = theme.states) === null || _c === void 0 ? void 0 : _c.readOnly), className), children: stars.map(renderStar) }));
+}));
+Rating.displayName = "Rating";
+
+export { Rating };

package/dist/components/core/Rating/Rating.theme.d.ts

@@ -0,0 +1,6 @@
+import { RatingTheme } from "./Rating.types";
+/**
+ * Default theme configuration for Rating component
+ * Uses CSS variables for theming consistency with the design system
+ */
+export declare const ratingTheme: RatingTheme;

package/dist/components/core/Rating/Rating.theme.js

@@ -0,0 +1,38 @@
+/**
+ * Default theme configuration for Rating component
+ * Uses CSS variables for theming consistency with the design system
+ */
+const ratingTheme = {
+    // Base container styles
+    baseStyle: "inline-flex items-center",
+    // Individual star button styles
+    starStyle: "relative inline-flex items-center justify-center shrink-0 transition-transform duration-150 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-1 rounded-sm",
+    // Star icon sizes per rating size
+    starSizes: {
+        sm: "size-4",
+        md: "size-5",
+        lg: "size-7",
+    },
+    // Gap between stars per rating size
+    gapSizes: {
+        sm: "gap-0.5",
+        md: "gap-0.5",
+        lg: "gap-1",
+    },
+    // Filled star colors using CSS variables
+    filledColors: {
+        warning: "text-[var(--color-warning-400)]",
+        primary: "text-[var(--color-primary)]",
+        success: "text-[var(--color-success)]",
+        danger: "text-[var(--color-danger)]",
+    },
+    // Empty star color
+    emptyColor: "text-[var(--color-neutral-300)]",
+    // State styles
+    states: {
+        disabled: "opacity-50 cursor-not-allowed pointer-events-none",
+        readOnly: "pointer-events-none",
+    },
+};
+
+export { ratingTheme };

package/dist/components/core/Rating/Rating.types.d.ts

@@ -0,0 +1,115 @@
+import { ReactNode } from "react";
+export type RatingSize = "sm" | "md" | "lg";
+export type RatingColor = "primary" | "warning" | "success" | "danger";
+/**
+ * Theme configuration for Rating component
+ */
+export interface RatingTheme {
+    /**
+     * Base styles applied to the rating container
+     */
+    baseStyle: string;
+    /**
+     * Styles for each individual star button
+     */
+    starStyle: string;
+    /**
+     * Star icon sizes for each rating size
+     */
+    starSizes: Record<RatingSize, string>;
+    /**
+     * Gap between stars for each rating size
+     */
+    gapSizes: Record<RatingSize, string>;
+    /**
+     * Filled star color styles for each color variant
+     */
+    filledColors: Record<RatingColor, string>;
+    /**
+     * Empty star color style
+     */
+    emptyColor: string;
+    /**
+     * State styles (disabled, readOnly)
+     */
+    states: {
+        disabled: string;
+        readOnly: string;
+    };
+}
+/**
+ * Theme overrides for Rating component
+ */
+export interface RatingThemeOverrides {
+    baseStyle?: string;
+    starStyle?: string;
+    starSizes?: Partial<Record<RatingSize, string>>;
+    gapSizes?: Partial<Record<RatingSize, string>>;
+    filledColors?: Partial<Record<RatingColor, string>>;
+    emptyColor?: string;
+    states?: Partial<{
+        disabled: string;
+        readOnly: string;
+    }>;
+}
+export interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /**
+     * Controlled rating value (0 to max)
+     */
+    value?: number;
+    /**
+     * Default rating value for uncontrolled mode (0 to max)
+     * @default 0
+     */
+    defaultValue?: number;
+    /**
+     * Maximum number of stars
+     * @default 5
+     */
+    max?: number;
+    /**
+     * The size of the rating stars
+     * @default 'md'
+     */
+    size?: RatingSize;
+    /**
+     * The semantic color of the filled stars
+     * @default 'warning'
+     */
+    color?: RatingColor;
+    /**
+     * Whether the rating is read-only (display only, no interaction)
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the rating is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Enable half-step rating increments
+     * @default false
+     */
+    allowHalf?: boolean;
+    /**
+     * Callback when rating value changes
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Custom filled star icon (defaults to Heroicons StarIcon solid)
+     */
+    iconFilled?: ReactNode;
+    /**
+     * Custom empty star icon (defaults to Heroicons StarIcon outline)
+     */
+    iconEmpty?: ReactNode;
+    /**
+     * Custom class name for the rating container
+     */
+    className?: string;
+    /**
+     * Component-level theme overrides
+     */
+    theme?: RatingThemeOverrides;
+}

package/dist/components/core/Rating/index.d.ts

@@ -0,0 +1,2 @@
+export { Rating } from "./Rating";
+export type { RatingProps, RatingSize, RatingColor, RatingTheme, RatingThemeOverrides, } from "./Rating.types";

package/dist/components/core/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ScrollAreaProps, ScrollAreaRef } from './ScrollArea.types';
+/**
+ * ScrollArea provides a custom scrollable container with styled scrollbars.
+ * Supports vertical, horizontal, or both scroll directions with configurable
+ * scrollbar visibility behavior.
+ *
+ * Enhanced with optional smooth momentum-based scrolling via the `smooth` prop.
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea className="h-72">
+ *   <div className="p-4">
+ *     {items.map(item => <div key={item.id}>{item.name}</div>)}
+ *   </div>
+ * </ScrollArea>
+ *
+ * // With smooth scrolling
+ * <ScrollArea smooth smoothConfig={{ lerp: 0.1, elasticEdges: true }}>
+ *   {content}
+ * </ScrollArea>
+ * ```
+ */
+export declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<ScrollAreaRef>>;