@spark-ui/components/dist/rating/index.d.mts

Spark (Leboncoin design system) components.

import * as react_jsx_runtime from 'react/jsx-runtime';
import { MouseEvent, Ref, PropsWithChildren, ComponentPropsWithRef } from 'react';
import * as class_variance_authority_types from 'class-variance-authority/types';
import { VariantProps } from 'class-variance-authority';

declare const ratingStarStyles: (props?: ({
    disabled?: boolean | null | undefined;
    readOnly?: boolean | null | undefined;
    gap?: "sm" | "md" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
declare const ratingStarIconStyles: (props?: ({
    size?: "sm" | "md" | "lg" | null | undefined;
    design?: "filled" | "outlined" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
type RatingStarstylesProps = Omit<VariantProps<typeof ratingStarStyles>, 'gap'>;
type RatingStarIconStylesProps = Omit<VariantProps<typeof ratingStarIconStyles>, 'design'>;

type StarValue = 0 | 0.5 | 1;

interface RatingStarProps extends RatingStarstylesProps, RatingStarIconStylesProps {
    value: StarValue;
    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
    onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
    ref?: Ref<HTMLDivElement>;
}

interface RatingProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {
    /**
     * Use the `defaultValue` prop to set the default value of the input, on a from 0 to 5.
     *
     * Use this when you want to use it in an uncontrolled manner
     */
    defaultValue?: number;
    /**
     * The value is the number of the rating selected, on a scale from 0 to 5.
     *
     * Use this when you want to use it in a controlled manner,
     * in conjunction with the `onValueChange` prop
     */
    value?: number;
    /**
     * Event handler called when the value changes.
     */
    onValueChange?: (value: number) => void;
    /**
     * Sets the component as interactive or not.
     * @default undefined
     */
    readOnly?: boolean;
    /**
     * When `true`, prevents the user from interacting.
     * @default false
     */
    disabled?: boolean;
    /**
     * Sets the size of the stars.
     * @default 'md'
     */
    size?: RatingStarProps['size'];
    /**
     * Name of the underlying input.
     * @default undefined
     */
    name?: string;
    /**
     * id of the underlying input.
     * @default undefined
     */
    id?: string;
    /**
     * aria-label of the underlying input.
     * @default undefined
     */
    'aria-label': string;
}
declare const Rating: ({ defaultValue, value: propValue, onValueChange, size, disabled, readOnly, name, id, "aria-label": ariaLabel, ref, ...rest }: RatingProps) => react_jsx_runtime.JSX.Element;

export { Rating, type RatingProps };