@furystack/shades-common-components/esm/components/rating.d.ts

Common UI components for FuryStack Shades

import type { Palette } from '../services/theme-provider-service.js';
import type { ComponentSize } from './component-size.js';
/**
 * Props for the Rating component
 */
export type RatingProps = {
    /**
     * Current rating value
     */
    value?: number;
    /**
     * Maximum number of stars (default: 5)
     */
    max?: number;
    /**
     * Rating precision - 1 for full stars, 0.5 for half stars (default: 1)
     */
    precision?: 1 | 0.5;
    /**
     * Size of the rating stars
     */
    size?: ComponentSize;
    /**
     * Whether the rating is disabled
     */
    disabled?: boolean;
    /**
     * Whether the rating is read-only (displays value but not interactive)
     */
    readOnly?: boolean;
    /**
     * Theme palette color (default: 'warning' for gold stars)
     */
    color?: keyof Palette;
    /**
     * Content used for filled stars (default: filled star icon)
     */
    icon?: JSX.Element | string;
    /**
     * Content used for empty stars (default: outlined star icon)
     */
    emptyIcon?: JSX.Element | string;
    /**
     * Callback when the rating value changes
     * @param value - The new rating value
     */
    onValueChange?: (value: number) => void;
    /**
     * The name attribute for the hidden input element (for form integration)
     */
    name?: string;
};
/**
 * Rating component for collecting user feedback with star ratings.
 * Supports full and half-star precision, custom icons, hover feedback,
 * keyboard navigation, and theme integration.
 */
export declare const Rating: (props: RatingProps & Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
//# sourceMappingURL=rating.d.ts.map