import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; import type { EventData } from '@fluentui/react-utilities'; import type { EventHandler } from '@fluentui/react-utilities'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import type { JSXElement } from '@fluentui/react-utilities'; import * as React_2 from 'react'; import type { Slot } from '@fluentui/react-utilities'; import type { SlotClassNames } from '@fluentui/react-utilities'; /** * Rating is a wrapper for one or more rating items that will be used to set a rating value. */ export declare const Rating: ForwardRefComponent; /** * Rating base props — excludes design props (color, size). */ export declare type RatingBaseProps = Omit; /** * Rating base state — excludes design props (color, size). */ export declare type RatingBaseState = Omit; export declare const ratingClassNames: SlotClassNames; export declare type RatingContextValues = { ratingItem: RatingItemContextValue; }; /** * RatingDisplay is a wrapper for one or more rating items that will be used to display a rating value * as well as the label for the rating. */ export declare const RatingDisplay: ForwardRefComponent; /** * RatingDisplay base props — excludes design props (color, size). */ export declare type RatingDisplayBaseProps = Omit; /** * RatingDisplay base state — excludes design props (color, size). */ export declare type RatingDisplayBaseState = Omit & Pick; export declare const ratingDisplayClassNames: SlotClassNames; export declare type RatingDisplayContextValues = { ratingItem: RatingItemContextValue; }; /** * RatingDisplay Props */ export declare type RatingDisplayProps = ComponentProps & { /** * Color of the rating items (stars). * @default neutral */ color?: 'brand' | 'marigold' | 'neutral'; /** * Renders a single filled star, with the value written next to it. * @default false */ compact?: boolean; /** * The number of ratings represented by the rating value. * This will be formatted with a thousands separator (if applicable) and displayed next to the value. */ count?: number; /** * The icon used for rating items. * @default StarFilled */ icon?: React_2.ElementType; /** * The max value of the rating. This controls the number of rating items displayed. * Must be a whole number greater than 1. * @default 5 */ max?: number; /** * Sets the size of the RatingDisplay items. * @default medium */ size?: 'small' | 'medium' | 'large' | 'extra-large'; /** * The value of the rating */ value?: number; }; export declare type RatingDisplaySlots = { root: NonNullable>; valueText?: Slot<'span'>; countText?: Slot<'span'>; }; /** * State used in rendering RatingDisplay */ export declare type RatingDisplayState = ComponentState & Required> & Pick; /** * RatingItem is an item that will be used to set or display a rating value. */ export declare const RatingItem: ForwardRefComponent; /** * RatingItem base props — same as RatingItemProps (no design-only props at this level). */ export declare type RatingItemBaseProps = RatingItemProps; /** * RatingItem base state — excludes design props (color, size) from context. */ export declare type RatingItemBaseState = Omit; export declare const ratingItemClassNames: SlotClassNames; declare type RatingItemContextValue = Partial> & Pick & Partial> & { interactive?: boolean; }; /** * RatingItem Props */ export declare type RatingItemProps = ComponentProps> & { /** * The positive whole number value that is displayed by this RatingItem */ value?: number; }; export declare const RatingItemProvider: React_2.Provider; export declare type RatingItemSlots = { /** * The root slot of the RatingItem. * Default html element is span */ root: NonNullable>; /** * Icon displayed when the rating value is greater than or equal to the item's value. */ selectedIcon?: NonNullable>; /** * Icon displayed when the rating value is less than the item's value. */ unselectedIcon?: NonNullable>; /** * Radio input slot used for half star precision */ halfValueInput?: NonNullable>; /** * Radio input slot used for full star precision */ fullValueInput?: NonNullable>; }; /** * State used in rendering RatingItem */ export declare type RatingItemState = ComponentState & Required> & Pick & { iconFillWidth: number; appearance: 'outline' | 'filled'; }; /** * Data for the onChange event for Rating. */ export declare type RatingOnChangeEventData = EventData<'change', React_2.FormEvent> & { /** * The new value of the rating. */ value: number; }; /** * Rating Props */ export declare type RatingProps = Omit>, 'onChange'> & { /** * Controls the color of the Rating. * @default neutral */ color?: 'brand' | 'marigold' | 'neutral'; /** * Default value of the Rating */ defaultValue?: number; /** * The icon to display when the rating value is greater than or equal to the item's value. */ iconFilled?: React_2.ElementType; /** * The icon to display when the rating value is less than the item's value. */ iconOutline?: React_2.ElementType; /** * Prop to generate the aria-label for the rating inputs. * @default (rating) =\> `${rating}` */ itemLabel?: (rating: number) => string; /** * The max value of the rating. This controls the number of rating items displayed. * Must be a whole number greater than 1. * @default 5 */ max?: number; /** * Name for the Radio inputs. If not provided, one will be automatically generated */ name?: string; /** * Callback when the rating value is changed by the user. */ onChange?: EventHandler; /** * Sets the precision to allow half-filled shapes in Rating * @default 1 */ step?: 0.5 | 1; /** * Sets the size of the Rating items. * @default extra-large */ size?: 'small' | 'medium' | 'large' | 'extra-large'; /** * The value of the rating */ value?: number; }; export declare type RatingSlots = { root: NonNullable>; }; /** * State used in rendering Rating */ export declare type RatingState = ComponentState & Required> & Pick & { hoveredValue?: number | undefined; }; /** * Render the final JSX of Rating */ export declare const renderRating_unstable: (state: RatingBaseState, contextValues: RatingContextValues) => JSXElement; /** * Render the final JSX of RatingDisplay */ export declare const renderRatingDisplay_unstable: (state: RatingDisplayBaseState, contextValues: RatingDisplayContextValues) => JSXElement; /** * Render the final JSX of RatingItem */ export declare const renderRatingItem_unstable: (state: RatingItemBaseState) => JSXElement; /** * Create the state required to render Rating. * * The returned state can be modified with hooks such as useRatingStyles_unstable, * before being passed to renderRating_unstable. * * @param props - props from this instance of Rating * @param ref - reference to root HTMLElement of Rating */ export declare const useRating_unstable: (props: RatingProps, ref: React_2.Ref) => RatingState; /** * Base hook for Rating component. Manages state related to controlled/uncontrolled * rating value, hover state, radiogroup ARIA role, and keyboard/mouse interaction — * without design props (color, size). * * @param props - props from this instance of Rating (without color, size) * @param ref - reference to root HTMLElement of Rating */ export declare const useRatingBase_unstable: (props: RatingBaseProps, ref: React_2.Ref) => RatingBaseState; export declare const useRatingContextValues: (ratingState: RatingState) => RatingContextValues; /** * Create the state required to render RatingDisplay. * * The returned state can be modified with hooks such as useRatingDisplayStyles_unstable, * before being passed to renderRatingDisplay_unstable. * * @param props - props from this instance of RatingDisplay * @param ref - reference to root HTMLDivElement of RatingDisplay */ export declare const useRatingDisplay_unstable: (props: RatingDisplayProps, ref: React_2.Ref) => RatingDisplayState; /** * Base hook for RatingDisplay component. Manages state related to ARIA img role, * aria-labelledby composition from valueText/countText IDs, slot structure, and * compact/full display modes — without design props (color, size). * * @param props - props from this instance of RatingDisplay (without color, size) * @param ref - reference to root HTMLDivElement of RatingDisplay */ export declare const useRatingDisplayBase_unstable: (props: RatingDisplayBaseProps, ref: React_2.Ref) => RatingDisplayBaseState; export declare const useRatingDisplayContextValues: (state: RatingDisplayState) => RatingDisplayContextValues; /** * Apply styling to the RatingDisplay slots based on the state */ export declare const useRatingDisplayStyles_unstable: (state: RatingDisplayState) => RatingDisplayState; /** * Create the state required to render RatingItem. * * The returned state can be modified with hooks such as useRatingItemStyles_unstable, * before being passed to renderRatingItem_unstable. * * @param props - props from this instance of RatingItem * @param ref - reference to root HTMLElement of RatingItem */ export declare const useRatingItem_unstable: (props: RatingItemProps, ref: React_2.Ref) => RatingItemState; /** * Get the value of the RatingContext. */ export declare const useRatingItemContextValue_unstable: () => RatingItemContextValue; /** * Apply styling to the RatingItem slots based on the state */ export declare const useRatingItemStyles_unstable: (state: RatingItemState) => RatingItemState; /** * Apply styling to the Rating slots based on the state */ export declare const useRatingStyles_unstable: (state: RatingState) => RatingState; export { }