its-just-ui/dist/components/Rating/Rating.d.ts

ITS Just UI - The easiest and best React UI component library. Modern, accessible, and customizable components built with TypeScript and Tailwind CSS. Simple to use, production-ready components for building beautiful user interfaces with ease.

import { default as React } from 'react';

export interface RatingContextValue {
    value: number;
    hoverValue: number | null;
    maxValue: number;
    precision: number;
    size: RatingSize;
    variant: RatingVariant;
    status: RatingStatus;
    isDisabled: boolean;
    isReadOnly: boolean;
    isRequired: boolean;
    hasError: boolean;
    onChange: (value: number) => void;
    onHoverChange: (value: number | null) => void;
    onFocus: () => void;
    onBlur: () => void;
    iconSpacing?: string;
    iconSize?: string;
    filledColor?: string;
    emptyColor?: string;
    hoverColor?: string;
    disabledColor?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    labelColor?: string;
    labelFontSize?: string;
    labelFontWeight?: string;
    labelMarginBottom?: string;
    descriptionColor?: string;
    descriptionFontSize?: string;
    descriptionFontWeight?: string;
    descriptionMarginTop?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    gap?: string;
    padding?: string;
    renderIcon?: (props: IconRenderProps) => React.ReactNode;
    renderLabel?: (props: LabelRenderProps) => React.ReactNode;
    renderDescription?: (props: DescriptionRenderProps) => React.ReactNode;
}
export type RatingVariant = 'default' | 'soft' | 'minimal' | 'outlined' | 'compact' | 'emoji';
export type RatingSize = 'sm' | 'md' | 'lg';
export type RatingStatus = 'default' | 'success' | 'warning' | 'error' | 'info';
export type RatingTransition = 'none' | 'fade' | 'scale' | 'grow' | 'bounce';
export interface IconRenderProps {
    index: number;
    value: number;
    hoverValue: number | null;
    isFilled: boolean;
    isPartial: boolean;
    partialValue: number;
    isHovered: boolean;
    isDisabled: boolean;
    isReadOnly: boolean;
    size: RatingSize;
    variant: RatingVariant;
    status: RatingStatus;
}
export interface LabelRenderProps {
    value: number;
    maxValue: number;
    isDisabled: boolean;
    isReadOnly: boolean;
    size: RatingSize;
    variant: RatingVariant;
    status: RatingStatus;
}
export interface DescriptionRenderProps {
    value: number;
    maxValue: number;
    isDisabled: boolean;
    isReadOnly: boolean;
    size: RatingSize;
    variant: RatingVariant;
    status: RatingStatus;
}
export interface RatingBaseProps {
    value?: number;
    defaultValue?: number;
    maxValue?: number;
    precision?: number;
    onChange?: (value: number) => void;
    onHoverChange?: (value: number | null) => void;
    disabled?: boolean;
    readOnly?: boolean;
    required?: boolean;
    label?: React.ReactNode;
    description?: React.ReactNode;
    helperText?: React.ReactNode;
    errorMessage?: string;
    variant?: RatingVariant;
    size?: RatingSize;
    status?: RatingStatus;
    transition?: RatingTransition;
    transitionDuration?: number;
    renderIcon?: (props: IconRenderProps) => React.ReactNode;
    renderLabel?: (props: LabelRenderProps) => React.ReactNode;
    renderDescription?: (props: DescriptionRenderProps) => React.ReactNode;
    emptyIcon?: React.ReactNode;
    filledIcon?: React.ReactNode;
    hoverIcon?: React.ReactNode;
    partialIcon?: React.ReactNode;
    readOnlyIcon?: React.ReactNode;
    name?: string;
    form?: string;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    textColor?: string;
    backgroundColor?: string;
    hoverBackgroundColor?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    focusBorderColor?: string;
    focusBackgroundColor?: string;
    boxShadow?: string;
    focusBoxShadow?: string;
    hoverBoxShadow?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
    gap?: string;
    iconSpacing?: string;
    iconSize?: string;
    iconColor?: string;
    filledColor?: string;
    emptyColor?: string;
    hoverColor?: string;
    disabledColor?: string;
    partialColor?: string;
    labelColor?: string;
    labelFontSize?: string;
    labelFontWeight?: string;
    labelMarginBottom?: string;
    descriptionColor?: string;
    descriptionFontSize?: string;
    descriptionFontWeight?: string;
    descriptionMarginTop?: string;
    helperTextFontSize?: string;
    helperTextColor?: string;
    helperTextMarginTop?: string;
    requiredColor?: string;
    onFocus?: () => void;
    onBlur?: () => void;
    onMouseEnter?: () => void;
    onMouseLeave?: () => void;
    onKeyDown?: (event: React.KeyboardEvent) => void;
    'aria-label'?: string;
    'aria-describedby'?: string;
    'aria-invalid'?: boolean;
    'aria-required'?: boolean;
    'aria-valuenow'?: number;
    'aria-valuemin'?: number;
    'aria-valuemax'?: number;
    'aria-valuetext'?: string;
}
export interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof RatingBaseProps>, RatingBaseProps {
    children?: React.ReactNode;
}
export declare const useRatingContext: () => RatingContextValue;
export declare const RatingStar: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
    index: number;
    children?: React.ReactNode;
    className?: string;
    style?: React.CSSProperties;
} & React.RefAttributes<HTMLButtonElement>>>;
export declare const RatingLabel: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
    children?: React.ReactNode;
    className?: string;
} & React.RefAttributes<HTMLSpanElement>>>;
export declare const RatingDescription: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
    children?: React.ReactNode;
    className?: string;
} & React.RefAttributes<HTMLSpanElement>>>;
export declare const RatingInput: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>>;
export declare const RatingIcon: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
    children: React.ReactNode;
    className?: string;
} & React.RefAttributes<HTMLSpanElement>>>;
interface RatingComponent extends React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>> {
    Star: typeof RatingStar;
    Label: typeof RatingLabel;
    Description: typeof RatingDescription;
    Input: typeof RatingInput;
    Icon: typeof RatingIcon;
}
declare const Rating: RatingComponent;
export { Rating };
export default Rating;