@yamada-ui/rating/dist/use-rating.d.ts

Yamada UI rating component

import * as _yamada_ui_core from '@yamada-ui/core';
import { HTMLUIProps, CSSUIProps, PropGetter, RequiredPropGetter } from '@yamada-ui/core';
import * as react from 'react';
import { ReactNode } from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { FormControlOptions } from '@yamada-ui/form-control';
import { MotionProps } from '@yamada-ui/motion';
import { Merge } from '@yamada-ui/utils';
import { RatingGroupProps } from './rating-group.js';
import { RatingItemProps } from './rating-item.js';
import './use-rating-item.js';

type OmittedGroupProps = Omit<RatingGroupProps, "children" | "items" | "value">;
type OmittedItemProps = Omit<RatingItemProps, "children" | "fractionValue" | "groupValue" | "value">;
type OmittedInputProps = Omit<HTMLUIProps<"input">, "checked" | "defaultValue" | "value">;
type GroupProps = ((value: number) => OmittedGroupProps) | OmittedGroupProps;
type ItemProps = ((value: number) => OmittedItemProps) | OmittedItemProps;
type InputProps = ((value: number) => OmittedInputProps) | OmittedInputProps;
interface UseRatingOptions {
    /**
     * The top-level id string that will be applied to the rating.
     * The index of the rating item will be appended to this top-level id.
     */
    id?: string;
    /**
     * The name of the input element.
     */
    name?: string;
    /**
     * The color of the filled icons.
     */
    color?: ((value: number) => CSSUIProps["color"]) | CSSUIProps["color"];
    /**
     * The initial value of the rating.
     *
     * @default 0
     */
    defaultValue?: number;
    /**
     * The empty icon for the rating.
     */
    emptyIcon?: ((value: number) => ReactNode) | ReactNode;
    /**
     * The filled icon for the rating.
     */
    filledIcon?: ((value: number) => ReactNode) | ReactNode;
    /**
     * Number of fractions each item can be divided into,
     *
     * @default 1
     */
    fractions?: number;
    /**
     * If `true`, only the selected icons will be filled.
     *
     * @default false
     */
    highlightSelectedOnly?: boolean;
    /**
     * Number of controls that should be rendered.
     *
     * @default 5
     */
    items?: number;
    /**
     * The value of the rating.
     */
    value?: number;
    /**
     * Props for the rating group.
     */
    groupProps?: GroupProps;
    /**
     * Props for the input element.
     */
    inputProps?: InputProps;
    /**
     * Props for the rating item.
     */
    itemProps?: ItemProps;
    /**
     * The callback invoked when value state changes.
     */
    onChange?: (value: number) => void;
    /**
     * The callback invoked when hovering over the rating.
     */
    onHover?: (value: number) => void;
}
type UseRatingProps = FormControlOptions & Omit<HTMLUIProps, "color" | "defaultValue" | "id" | "onChange"> & UseRatingOptions;
declare const useRating: ({ name, color, defaultValue, emptyIcon, filledIcon, fractions, highlightSelectedOnly, items, value: valueProp, groupProps, inputProps, itemProps, onChange: onChangeProp, onHover, onMouseEnter: onMouseEnterProp, onMouseLeave: onMouseLeaveProp, onMouseMove: onMouseMoveProp, onTouchEnd: onTouchEndProp, onTouchStart: onTouchStartProp, ...props }: UseRatingProps) => {
    id: string;
    name: string;
    children: react_jsx_runtime.JSX.Element[];
    decimal: number;
    emptyIcon: ReactNode | ((value: number) => ReactNode);
    filledIcon: ReactNode | ((value: number) => ReactNode);
    highlightSelectedOnly: boolean;
    hoveredValue: number;
    outside: boolean;
    resolvedValue: number;
    roundedValue: number;
    setHoveredValue: react.Dispatch<react.SetStateAction<number>>;
    setValue: react.Dispatch<react.SetStateAction<number>>;
    value: number;
    formControlProps: {
        disabled: boolean | undefined;
        "aria-disabled": boolean | undefined;
        _active?: ({} & _yamada_ui_core.CSSUIObject) | undefined;
        _focus?: ({} & _yamada_ui_core.CSSUIObject) | undefined;
        _focusVisible?: ({} & _yamada_ui_core.CSSUIObject) | undefined;
        _hover?: ({} & _yamada_ui_core.CSSUIObject) | undefined;
        _invalid?: ({} & _yamada_ui_core.CSSUIObject) | undefined;
        "aria-invalid": boolean | undefined;
        "aria-readonly": boolean | undefined;
        "aria-required": boolean | undefined;
        onFocus: (event: react.FocusEvent<HTMLDivElement, Element>) => void;
        onBlur: (event: react.FocusEvent<HTMLDivElement, Element>) => void;
        readOnly: boolean | undefined;
        required: boolean | undefined;
        "data-readonly": boolean | "false" | "true";
    };
    getContainerProps: PropGetter<"div", undefined>;
    getGroupProps: RequiredPropGetter<Merge<MotionProps, {
        value: number;
    }>, MotionProps>;
    groupProps: GroupProps | undefined;
    inputProps: InputProps | undefined;
    itemProps: ItemProps | undefined;
};
type UseRatingReturn = ReturnType<typeof useRating>;

export { type GroupProps, type InputProps, type ItemProps, type UseRatingProps, type UseRatingReturn, useRating };