@fluentui/react-rating 9.3.15 → 9.4.1

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-rating
 
-This log was last generated on Wed, 25 Feb 2026 13:28:23 GMT and should not be manually modified.
+This log was last generated on Thu, 23 Apr 2026 11:59:30 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-rating_v9.4.1)
+
+Thu, 23 Apr 2026 11:59:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-rating_v9.4.0..@fluentui/react-rating_v9.4.1)
+
+### Patches
+
+- fix: add mising base hook export ([PR #35972](https://github.com/microsoft/fluentui/pull/35972) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+
+## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-rating_v9.4.0)
+
+Thu, 26 Mar 2026 08:12:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-rating_v9.3.15..@fluentui/react-rating_v9.4.0)
+
+### Minor changes
+
+- feat: add base hooks for Rating ([PR #35823](https://github.com/microsoft/fluentui/pull/35823) by dmytrokirpa@microsoft.com)
+
 ## [9.3.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-rating_v9.3.15)
 
-Wed, 25 Feb 2026 13:28:23 GMT 
+Wed, 25 Feb 2026 13:32:28 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-rating_v9.3.14..@fluentui/react-rating_v9.3.15)
 
 ### Patches

package/dist/index.d.ts

@@ -13,6 +13,16 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
  */
 export declare const Rating: ForwardRefComponent<RatingProps>;
 
+/**
+ * Rating base props — excludes design props (color, size).
+ */
+export declare type RatingBaseProps = Omit<RatingProps, 'color' | 'size'>;
+
+/**
+ * Rating base state — excludes design props (color, size).
+ */
+export declare type RatingBaseState = Omit<RatingState, 'color' | 'size'>;
+
 export declare const ratingClassNames: SlotClassNames<RatingSlots>;
 
 export declare type RatingContextValues = {
@@ -25,6 +35,16 @@ export declare type RatingContextValues = {
  */
 export declare const RatingDisplay: ForwardRefComponent<RatingDisplayProps>;
 
+/**
+ * RatingDisplay base props — excludes design props (color, size).
+ */
+export declare type RatingDisplayBaseProps = Omit<RatingDisplayProps, 'color' | 'size'>;
+
+/**
+ * RatingDisplay base state — excludes design props (color, size).
+ */
+export declare type RatingDisplayBaseState = Omit<RatingDisplayState, 'color' | 'size' | 'icon'> & Pick<RatingDisplayProps, 'icon'>;
+
 export declare const ratingDisplayClassNames: SlotClassNames<RatingDisplaySlots>;
 
 export declare type RatingDisplayContextValues = {
@@ -88,6 +108,16 @@ export declare type RatingDisplayState = ComponentState<RatingDisplaySlots> & Re
  */
 export declare const RatingItem: ForwardRefComponent<RatingItemProps>;
 
+/**
+ * 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<RatingItemState, 'color' | 'size'>;
+
 export declare const ratingItemClassNames: SlotClassNames<RatingItemSlots>;
 
 declare type RatingItemContextValue = Partial<Pick<RatingState, 'name' | 'hoveredValue' | 'value'>> & Pick<RatingState, 'color' | 'iconFilled' | 'iconOutline' | 'itemLabel' | 'step' | 'size'> & Partial<Pick<RatingDisplayState, 'compact'>> & {
@@ -218,17 +248,17 @@ export declare type RatingState = ComponentState<RatingSlots> & Required<Pick<Ra
 /**
  * Render the final JSX of Rating
  */
-export declare const renderRating_unstable: (state: RatingState, contextValues: RatingContextValues) => JSXElement;
+export declare const renderRating_unstable: (state: RatingBaseState, contextValues: RatingContextValues) => JSXElement;
 
 /**
  * Render the final JSX of RatingDisplay
  */
-export declare const renderRatingDisplay_unstable: (state: RatingDisplayState, contextValues: RatingDisplayContextValues) => JSXElement;
+export declare const renderRatingDisplay_unstable: (state: RatingDisplayBaseState, contextValues: RatingDisplayContextValues) => JSXElement;
 
 /**
  * Render the final JSX of RatingItem
  */
-export declare const renderRatingItem_unstable: (state: RatingItemState) => JSXElement;
+export declare const renderRatingItem_unstable: (state: RatingItemBaseState) => JSXElement;
 
 /**
  * Create the state required to render Rating.
@@ -241,6 +271,16 @@ export declare const renderRatingItem_unstable: (state: RatingItemState) => JSXE
  */
 export declare const useRating_unstable: (props: RatingProps, ref: React_2.Ref<HTMLDivElement>) => 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<HTMLDivElement>) => RatingBaseState;
+
 export declare const useRatingContextValues: (ratingState: RatingState) => RatingContextValues;
 
 /**
@@ -254,6 +294,16 @@ export declare const useRatingContextValues: (ratingState: RatingState) => Ratin
  */
 export declare const useRatingDisplay_unstable: (props: RatingDisplayProps, ref: React_2.Ref<HTMLDivElement>) => 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<HTMLDivElement>) => RatingDisplayBaseState;
+
 export declare const useRatingDisplayContextValues: (state: RatingDisplayState) => RatingDisplayContextValues;
 
 /**
@@ -272,6 +322,16 @@ export declare const useRatingDisplayStyles_unstable: (state: RatingDisplayState
  */
 export declare const useRatingItem_unstable: (props: RatingItemProps, ref: React_2.Ref<HTMLSpanElement>) => RatingItemState;
 
+/**
+ * Base hook for RatingItem component. Manages state related to fill width calculation,
+ * radio input slots (for ARIA rating interaction), icon slots, and interactive mode —
+ * without design props (color, size from context).
+ *
+ * @param props - props from this instance of RatingItem
+ * @param ref - reference to root HTMLElement of RatingItem
+ */
+export declare const useRatingItemBase_unstable: (props: RatingItemBaseProps, ref: React_2.Ref<HTMLSpanElement>) => RatingItemBaseState;
+
 /**
  * Get the value of the RatingContext.
  */

package/lib/Rating.js

@@ -1 +1 @@
-export { Rating, ratingClassNames, renderRating_unstable, useRatingContextValues, useRatingStyles_unstable, useRating_unstable } from './components/Rating/index';
+export { Rating, ratingClassNames, renderRating_unstable, useRatingContextValues, useRatingStyles_unstable, useRating_unstable, useRatingBase_unstable } from './components/Rating/index';

package/lib/Rating.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Rating.ts"],"sourcesContent":["export type {\n  RatingContextValues,\n  RatingOnChangeEventData,\n  RatingProps,\n  RatingSlots,\n  RatingState,\n} from './components/Rating/index';\nexport {\n  Rating,\n  ratingClassNames,\n  renderRating_unstable,\n  useRatingContextValues,\n  useRatingStyles_unstable,\n  useRating_unstable,\n} from './components/Rating/index';\n"],"names":["Rating","ratingClassNames","renderRating_unstable","useRatingContextValues","useRatingStyles_unstable","useRating_unstable"],"mappings":"AAOA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,sBAAsB,EACtBC,wBAAwB,EACxBC,kBAAkB,QACb,4BAA4B"}
+{"version":3,"sources":["../src/Rating.ts"],"sourcesContent":["export type {\n  RatingContextValues,\n  RatingOnChangeEventData,\n  RatingProps,\n  RatingBaseProps,\n  RatingSlots,\n  RatingState,\n  RatingBaseState,\n} from './components/Rating/index';\nexport {\n  Rating,\n  ratingClassNames,\n  renderRating_unstable,\n  useRatingContextValues,\n  useRatingStyles_unstable,\n  useRating_unstable,\n  useRatingBase_unstable,\n} from './components/Rating/index';\n"],"names":["Rating","ratingClassNames","renderRating_unstable","useRatingContextValues","useRatingStyles_unstable","useRating_unstable","useRatingBase_unstable"],"mappings":"AASA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,sBAAsB,EACtBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,4BAA4B"}

package/lib/RatingDisplay.js

@@ -1 +1 @@
-export { RatingDisplay, ratingDisplayClassNames, renderRatingDisplay_unstable, useRatingDisplayContextValues, useRatingDisplayStyles_unstable, useRatingDisplay_unstable } from './components/RatingDisplay/index';
+export { RatingDisplay, ratingDisplayClassNames, renderRatingDisplay_unstable, useRatingDisplayContextValues, useRatingDisplayStyles_unstable, useRatingDisplay_unstable, useRatingDisplayBase_unstable } from './components/RatingDisplay/index';

package/lib/RatingDisplay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/RatingDisplay.ts"],"sourcesContent":["export type {\n  RatingDisplayContextValues,\n  RatingDisplayProps,\n  RatingDisplaySlots,\n  RatingDisplayState,\n} from './components/RatingDisplay/index';\nexport {\n  RatingDisplay,\n  ratingDisplayClassNames,\n  renderRatingDisplay_unstable,\n  useRatingDisplayContextValues,\n  useRatingDisplayStyles_unstable,\n  useRatingDisplay_unstable,\n} from './components/RatingDisplay/index';\n"],"names":["RatingDisplay","ratingDisplayClassNames","renderRatingDisplay_unstable","useRatingDisplayContextValues","useRatingDisplayStyles_unstable","useRatingDisplay_unstable"],"mappings":"AAMA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,6BAA6B,EAC7BC,+BAA+B,EAC/BC,yBAAyB,QACpB,mCAAmC"}
+{"version":3,"sources":["../src/RatingDisplay.ts"],"sourcesContent":["export type {\n  RatingDisplayContextValues,\n  RatingDisplayProps,\n  RatingDisplayBaseProps,\n  RatingDisplaySlots,\n  RatingDisplayState,\n  RatingDisplayBaseState,\n} from './components/RatingDisplay/index';\nexport {\n  RatingDisplay,\n  ratingDisplayClassNames,\n  renderRatingDisplay_unstable,\n  useRatingDisplayContextValues,\n  useRatingDisplayStyles_unstable,\n  useRatingDisplay_unstable,\n  useRatingDisplayBase_unstable,\n} from './components/RatingDisplay/index';\n"],"names":["RatingDisplay","ratingDisplayClassNames","renderRatingDisplay_unstable","useRatingDisplayContextValues","useRatingDisplayStyles_unstable","useRatingDisplay_unstable","useRatingDisplayBase_unstable"],"mappings":"AAQA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,6BAA6B,EAC7BC,+BAA+B,EAC/BC,yBAAyB,EACzBC,6BAA6B,QACxB,mCAAmC"}

package/lib/RatingItem.js

@@ -1 +1 @@
-export { RatingItem, ratingItemClassNames, renderRatingItem_unstable, useRatingItemStyles_unstable, useRatingItem_unstable } from './components/RatingItem/index';
+export { RatingItem, ratingItemClassNames, renderRatingItem_unstable, useRatingItemStyles_unstable, useRatingItem_unstable, useRatingItemBase_unstable } from './components/RatingItem/index';

package/lib/RatingItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/RatingItem.ts"],"sourcesContent":["export type {\n  RatingItemContextValue,\n  RatingItemProps,\n  RatingItemSlots,\n  RatingItemState,\n} from './components/RatingItem/index';\nexport {\n  RatingItem,\n  ratingItemClassNames,\n  renderRatingItem_unstable,\n  useRatingItemStyles_unstable,\n  useRatingItem_unstable,\n} from './components/RatingItem/index';\n"],"names":["RatingItem","ratingItemClassNames","renderRatingItem_unstable","useRatingItemStyles_unstable","useRatingItem_unstable"],"mappings":"AAMA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,gCAAgC"}
+{"version":3,"sources":["../src/RatingItem.ts"],"sourcesContent":["export type {\n  RatingItemContextValue,\n  RatingItemProps,\n  RatingItemBaseProps,\n  RatingItemSlots,\n  RatingItemState,\n  RatingItemBaseState,\n} from './components/RatingItem/index';\nexport {\n  RatingItem,\n  ratingItemClassNames,\n  renderRatingItem_unstable,\n  useRatingItemStyles_unstable,\n  useRatingItem_unstable,\n  useRatingItemBase_unstable,\n} from './components/RatingItem/index';\n"],"names":["RatingItem","ratingItemClassNames","renderRatingItem_unstable","useRatingItemStyles_unstable","useRatingItem_unstable","useRatingItemBase_unstable"],"mappings":"AAQA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,EACtBC,0BAA0B,QACrB,gCAAgC"}

package/lib/components/Rating/Rating.types.js

@@ -1 +1 @@
-import * as React from 'react';
+export { };

package/lib/components/Rating/Rating.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Rating/Rating.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport type RatingSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Rating Props\n */\nexport type RatingProps = Omit<ComponentProps<Partial<RatingSlots>>, 'onChange'> & {\n  /**\n   * Controls the color of the Rating.\n   * @default neutral\n   */\n  color?: 'brand' | 'marigold' | 'neutral';\n  /**\n   * Default value of the Rating\n   */\n  defaultValue?: number;\n  /**\n   * The icon to display when the rating value is greater than or equal to the item's value.\n   */\n  iconFilled?: React.ElementType;\n  /**\n   * The icon to display when the rating value is less than the item's value.\n   */\n  iconOutline?: React.ElementType;\n  /**\n   * Prop to generate the aria-label for the rating inputs.\n   * @default (rating) =\\> `${rating}`\n   */\n  itemLabel?: (rating: number) => string;\n  /**\n   * The max value of the rating. This controls the number of rating items displayed.\n   * Must be a whole number greater than 1.\n   * @default 5\n   */\n  max?: number;\n  /**\n   * Name for the Radio inputs. If not provided, one will be automatically generated\n   */\n  name?: string;\n  /**\n   * Callback when the rating value is changed by the user.\n   */\n  onChange?: EventHandler<RatingOnChangeEventData>;\n  /**\n   * Sets the precision to allow half-filled shapes in Rating\n   * @default 1\n   */\n  step?: 0.5 | 1;\n  /**\n   * Sets the size of the Rating items.\n   * @default extra-large\n   */\n  size?: 'small' | 'medium' | 'large' | 'extra-large';\n  /**\n   * The value of the rating\n   */\n  value?: number;\n};\n\n/**\n * Data for the onChange event for Rating.\n */\nexport type RatingOnChangeEventData = EventData<'change', React.FormEvent<HTMLDivElement>> & {\n  /**\n   * The new value of the rating.\n   */\n  value: number;\n};\n\n/**\n * State used in rendering Rating\n */\nexport type RatingState = ComponentState<RatingSlots> &\n  Required<Pick<RatingProps, 'color' | 'iconFilled' | 'iconOutline' | 'name' | 'step' | 'size' | 'value'>> &\n  Pick<RatingProps, 'itemLabel'> & {\n    hoveredValue?: number | undefined;\n  };\n\nexport type RatingContextValues = {\n  ratingItem: RatingItemContextValue;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/Rating/Rating.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport type { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport type RatingSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Rating Props\n */\nexport type RatingProps = Omit<ComponentProps<Partial<RatingSlots>>, 'onChange'> & {\n  /**\n   * Controls the color of the Rating.\n   * @default neutral\n   */\n  color?: 'brand' | 'marigold' | 'neutral';\n  /**\n   * Default value of the Rating\n   */\n  defaultValue?: number;\n  /**\n   * The icon to display when the rating value is greater than or equal to the item's value.\n   */\n  iconFilled?: React.ElementType;\n  /**\n   * The icon to display when the rating value is less than the item's value.\n   */\n  iconOutline?: React.ElementType;\n  /**\n   * Prop to generate the aria-label for the rating inputs.\n   * @default (rating) =\\> `${rating}`\n   */\n  itemLabel?: (rating: number) => string;\n  /**\n   * The max value of the rating. This controls the number of rating items displayed.\n   * Must be a whole number greater than 1.\n   * @default 5\n   */\n  max?: number;\n  /**\n   * Name for the Radio inputs. If not provided, one will be automatically generated\n   */\n  name?: string;\n  /**\n   * Callback when the rating value is changed by the user.\n   */\n  onChange?: EventHandler<RatingOnChangeEventData>;\n  /**\n   * Sets the precision to allow half-filled shapes in Rating\n   * @default 1\n   */\n  step?: 0.5 | 1;\n  /**\n   * Sets the size of the Rating items.\n   * @default extra-large\n   */\n  size?: 'small' | 'medium' | 'large' | 'extra-large';\n  /**\n   * The value of the rating\n   */\n  value?: number;\n};\n\n/**\n * Data for the onChange event for Rating.\n */\nexport type RatingOnChangeEventData = EventData<'change', React.FormEvent<HTMLDivElement>> & {\n  /**\n   * The new value of the rating.\n   */\n  value: number;\n};\n\n/**\n * Rating base props — excludes design props (color, size).\n */\nexport type RatingBaseProps = Omit<RatingProps, 'color' | 'size'>;\n\n/**\n * State used in rendering Rating\n */\nexport type RatingState = ComponentState<RatingSlots> &\n  Required<Pick<RatingProps, 'color' | 'iconFilled' | 'iconOutline' | 'name' | 'step' | 'size' | 'value'>> &\n  Pick<RatingProps, 'itemLabel'> & {\n    hoveredValue?: number | undefined;\n  };\n\n/**\n * Rating base state — excludes design props (color, size).\n */\nexport type RatingBaseState = Omit<RatingState, 'color' | 'size'>;\n\nexport type RatingContextValues = {\n  ratingItem: RatingItemContextValue;\n};\n"],"names":[],"mappings":"AA6FA,WAEE"}

package/lib/components/Rating/index.js

@@ -1,5 +1,5 @@
 export { Rating } from './Rating';
 export { renderRating_unstable } from './renderRating';
-export { useRating_unstable } from './useRating';
+export { useRating_unstable, useRatingBase_unstable } from './useRating';
 export { ratingClassNames, useRatingStyles_unstable } from './useRatingStyles.styles';
 export { useRatingContextValues } from './useRatingContextValues';

package/lib/components/Rating/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Rating/index.ts"],"sourcesContent":["export { Rating } from './Rating';\nexport type {\n  RatingContextValues,\n  RatingOnChangeEventData,\n  RatingProps,\n  RatingSlots,\n  RatingState,\n} from './Rating.types';\nexport { renderRating_unstable } from './renderRating';\nexport { useRating_unstable } from './useRating';\nexport { ratingClassNames, useRatingStyles_unstable } from './useRatingStyles.styles';\nexport { useRatingContextValues } from './useRatingContextValues';\n"],"names":["Rating","renderRating_unstable","useRating_unstable","ratingClassNames","useRatingStyles_unstable","useRatingContextValues"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAQlC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B;AACtF,SAASC,sBAAsB,QAAQ,2BAA2B"}
+{"version":3,"sources":["../src/components/Rating/index.ts"],"sourcesContent":["export { Rating } from './Rating';\nexport type {\n  RatingContextValues,\n  RatingOnChangeEventData,\n  RatingProps,\n  RatingBaseProps,\n  RatingSlots,\n  RatingState,\n  RatingBaseState,\n} from './Rating.types';\nexport { renderRating_unstable } from './renderRating';\nexport { useRating_unstable, useRatingBase_unstable } from './useRating';\nexport { ratingClassNames, useRatingStyles_unstable } from './useRatingStyles.styles';\nexport { useRatingContextValues } from './useRatingContextValues';\n"],"names":["Rating","renderRating_unstable","useRating_unstable","useRatingBase_unstable","ratingClassNames","useRatingStyles_unstable","useRatingContextValues"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAUlC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,cAAc;AACzE,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B;AACtF,SAASC,sBAAsB,QAAQ,2BAA2B"}

package/lib/components/Rating/renderRating.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Rating/renderRating.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { RatingState, RatingSlots, RatingContextValues } from './Rating.types';\nimport { RatingItemProvider } from '../../contexts/RatingItemContext';\n\n/**\n * Render the final JSX of Rating\n */\nexport const renderRating_unstable = (state: RatingState, contextValues: RatingContextValues): JSXElement => {\n  assertSlots<RatingSlots>(state);\n\n  return (\n    <RatingItemProvider value={contextValues.ratingItem}>\n      <state.root />\n    </RatingItemProvider>\n  );\n};\n"],"names":["assertSlots","RatingItemProvider","renderRating_unstable","state","contextValues","value","ratingItem","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAoBC;IACxDJ,YAAyBG;IAEzB,qBACE,KAACF;QAAmBI,OAAOD,cAAcE,UAAU;kBACjD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["../src/components/Rating/renderRating.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { RatingBaseState, RatingSlots, RatingContextValues } from './Rating.types';\nimport { RatingItemProvider } from '../../contexts/RatingItemContext';\n\n/**\n * Render the final JSX of Rating\n */\nexport const renderRating_unstable = (state: RatingBaseState, contextValues: RatingContextValues): JSXElement => {\n  assertSlots<RatingSlots>(state);\n\n  return (\n    <RatingItemProvider value={contextValues.ratingItem}>\n      <state.root />\n    </RatingItemProvider>\n  );\n};\n"],"names":["assertSlots","RatingItemProvider","renderRating_unstable","state","contextValues","value","ratingItem","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAwBC;IAC5DJ,YAAyBG;IAEzB,qBACE,KAACF;QAAmBI,OAAOD,cAAcE,UAAU;kBACjD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

package/lib/components/Rating/useRating.js

@@ -12,8 +12,40 @@ import { StarFilled, StarRegular } from '@fluentui/react-icons';
  * @param props - props from this instance of Rating
  * @param ref - reference to root HTMLElement of Rating
  */ export const useRating_unstable = (props, ref)=>{
+    var _state_root;
+    const { color = 'neutral', size = 'extra-large', iconFilled = StarFilled, iconOutline = StarRegular, max = 5, ...baseProps } = props;
+    const state = useRatingBase_unstable({
+        iconFilled,
+        iconOutline,
+        ...baseProps
+    }, ref);
+    // Generate the child RatingItems and memoize them to prevent unnecessary re-rendering
+    const rootChildren = React.useMemo(()=>{
+        return Array.from(Array(max), (_, i)=>/*#__PURE__*/ React.createElement(RatingItem, {
+                value: i + 1,
+                key: i + 1
+            }));
+    }, [
+        max
+    ]);
+    var _children;
+    (_children = (_state_root = state.root).children) !== null && _children !== void 0 ? _children : _state_root.children = rootChildren;
+    return {
+        ...state,
+        color,
+        size
+    };
+};
+/**
+ * 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 const useRatingBase_unstable = (props, ref)=>{
     const generatedName = useId('rating-');
-    const { color = 'neutral', iconFilled = StarFilled, iconOutline = StarRegular, max = 5, name = generatedName, onChange, step = 1, size = 'extra-large', itemLabel } = props;
+    const { iconFilled = 'span', iconOutline = 'span', name = generatedName, onChange, step = 1, itemLabel } = props;
     const [value, setValue] = useControllableState({
         state: props.value,
         defaultState: props.defaultValue,
@@ -23,22 +55,11 @@ import { StarFilled, StarRegular } from '@fluentui/react-icons';
             constructorName: 'HTMLInputElement'
         }) && target.type === 'radio' && target.name === name;
     const [hoveredValue, setHoveredValue] = React.useState(undefined);
-    // Generate the child RatingItems and memoize them to prevent unnecessary re-rendering
-    const rootChildren = React.useMemo(()=>{
-        return Array.from(Array(max), (_, i)=>/*#__PURE__*/ React.createElement(RatingItem, {
-                value: i + 1,
-                key: i + 1
-            }));
-    }, [
-        max
-    ]);
     const state = {
-        color,
         iconFilled,
         iconOutline,
         name,
         step,
-        size,
         itemLabel,
         value,
         hoveredValue,
@@ -47,7 +68,6 @@ import { StarFilled, StarRegular } from '@fluentui/react-icons';
         },
         root: slot.always(getIntrinsicElementProps('div', {
             ref,
-            children: rootChildren,
             role: 'radiogroup',
             ...props
         }, [

package/lib/components/Rating/useRating.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Rating/useRating.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  isHTMLElement,\n  mergeCallbacks,\n  slot,\n  useControllableState,\n  useId,\n} from '@fluentui/react-utilities';\nimport type { RatingProps, RatingState } from './Rating.types';\nimport { RatingItem } from '../../RatingItem';\nimport { StarFilled, StarRegular } from '@fluentui/react-icons';\n\n/**\n * Create the state required to render Rating.\n *\n * The returned state can be modified with hooks such as useRatingStyles_unstable,\n * before being passed to renderRating_unstable.\n *\n * @param props - props from this instance of Rating\n * @param ref - reference to root HTMLElement of Rating\n */\nexport const useRating_unstable = (props: RatingProps, ref: React.Ref<HTMLDivElement>): RatingState => {\n  const generatedName = useId('rating-');\n  const {\n    color = 'neutral',\n    iconFilled = StarFilled,\n    iconOutline = StarRegular,\n    max = 5,\n    name = generatedName,\n    onChange,\n    step = 1,\n    size = 'extra-large',\n    itemLabel,\n  } = props;\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: 0,\n  });\n\n  const isRatingRadioItem = (target: EventTarget): target is HTMLInputElement =>\n    isHTMLElement(target, { constructorName: 'HTMLInputElement' }) && target.type === 'radio' && target.name === name;\n\n  const [hoveredValue, setHoveredValue] = React.useState<number | undefined>(undefined);\n\n  // Generate the child RatingItems and memoize them to prevent unnecessary re-rendering\n  const rootChildren = React.useMemo(() => {\n    return Array.from(Array(max), (_, i) => <RatingItem value={i + 1} key={i + 1} />);\n  }, [max]);\n\n  const state: RatingState = {\n    color,\n    iconFilled,\n    iconOutline,\n    name,\n    step,\n    size,\n    itemLabel,\n    value,\n    hoveredValue,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps(\n        'div',\n        {\n          ref,\n          children: rootChildren,\n          role: 'radiogroup',\n          ...props,\n        },\n        ['onChange'],\n      ),\n      { elementType: 'div' },\n    ),\n  };\n\n  state.root.onChange = ev => {\n    if (isRatingRadioItem(ev.target)) {\n      const newValue = parseFloat(ev.target.value);\n      if (!isNaN(newValue)) {\n        setValue(newValue);\n        onChange?.(ev, { type: 'change', event: ev, value: newValue });\n      }\n    }\n  };\n  state.root.onMouseOver = mergeCallbacks(props.onMouseOver, ev => {\n    if (isRatingRadioItem(ev.target)) {\n      const newValue = parseFloat(ev.target.value);\n      if (!isNaN(newValue)) {\n        setHoveredValue(newValue);\n      }\n    }\n  });\n  state.root.onMouseLeave = mergeCallbacks(props.onMouseLeave, ev => {\n    setHoveredValue(undefined);\n  });\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","isHTMLElement","mergeCallbacks","slot","useControllableState","useId","RatingItem","StarFilled","StarRegular","useRating_unstable","props","ref","generatedName","color","iconFilled","iconOutline","max","name","onChange","step","size","itemLabel","value","setValue","state","defaultState","defaultValue","initialState","isRatingRadioItem","target","constructorName","type","hoveredValue","setHoveredValue","useState","undefined","rootChildren","useMemo","Array","from","_","i","key","components","root","always","children","role","elementType","ev","newValue","parseFloat","isNaN","event","onMouseOver","onMouseLeave"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,aAAa,EACbC,cAAc,EACdC,IAAI,EACJC,oBAAoB,EACpBC,KAAK,QACA,4BAA4B;AAEnC,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,UAAU,EAAEC,WAAW,QAAQ,wBAAwB;AAEhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,MAAMC,gBAAgBP,MAAM;IAC5B,MAAM,EACJQ,QAAQ,SAAS,EACjBC,aAAaP,UAAU,EACvBQ,cAAcP,WAAW,EACzBQ,MAAM,CAAC,EACPC,OAAOL,aAAa,EACpBM,QAAQ,EACRC,OAAO,CAAC,EACRC,OAAO,aAAa,EACpBC,SAAS,EACV,GAAGX;IAEJ,MAAM,CAACY,OAAOC,SAAS,GAAGnB,qBAAqB;QAC7CoB,OAAOd,MAAMY,KAAK;QAClBG,cAAcf,MAAMgB,YAAY;QAChCC,cAAc;IAChB;IAEA,MAAMC,oBAAoB,CAACC,SACzB5B,cAAc4B,QAAQ;YAAEC,iBAAiB;QAAmB,MAAMD,OAAOE,IAAI,KAAK,WAAWF,OAAOZ,IAAI,KAAKA;IAE/G,MAAM,CAACe,cAAcC,gBAAgB,GAAGlC,MAAMmC,QAAQ,CAAqBC;IAE3E,sFAAsF;IACtF,MAAMC,eAAerC,MAAMsC,OAAO,CAAC;QACjC,OAAOC,MAAMC,IAAI,CAACD,MAAMtB,MAAM,CAACwB,GAAGC,kBAAM,oBAACnC;gBAAWgB,OAAOmB,IAAI;gBAAGC,KAAKD,IAAI;;IAC7E,GAAG;QAACzB;KAAI;IAER,MAAMQ,QAAqB;QACzBX;QACAC;QACAC;QACAE;QACAE;QACAC;QACAC;QACAC;QACAU;QACAW,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzC,KAAK0C,MAAM,CACf7C,yBACE,OACA;YACEW;YACAmC,UAAUV;YACVW,MAAM;YACN,GAAGrC,KAAK;QACV,GACA;YAAC;SAAW,GAEd;YAAEsC,aAAa;QAAM;IAEzB;IAEAxB,MAAMoB,IAAI,CAAC1B,QAAQ,GAAG+B,CAAAA;QACpB,IAAIrB,kBAAkBqB,GAAGpB,MAAM,GAAG;YAChC,MAAMqB,WAAWC,WAAWF,GAAGpB,MAAM,CAACP,KAAK;YAC3C,IAAI,CAAC8B,MAAMF,WAAW;gBACpB3B,SAAS2B;gBACThC,qBAAAA,+BAAAA,SAAW+B,IAAI;oBAAElB,MAAM;oBAAUsB,OAAOJ;oBAAI3B,OAAO4B;gBAAS;YAC9D;QACF;IACF;IACA1B,MAAMoB,IAAI,CAACU,WAAW,GAAGpD,eAAeQ,MAAM4C,WAAW,EAAEL,CAAAA;QACzD,IAAIrB,kBAAkBqB,GAAGpB,MAAM,GAAG;YAChC,MAAMqB,WAAWC,WAAWF,GAAGpB,MAAM,CAACP,KAAK;YAC3C,IAAI,CAAC8B,MAAMF,WAAW;gBACpBjB,gBAAgBiB;YAClB;QACF;IACF;IACA1B,MAAMoB,IAAI,CAACW,YAAY,GAAGrD,eAAeQ,MAAM6C,YAAY,EAAEN,CAAAA;QAC3DhB,gBAAgBE;IAClB;IAEA,OAAOX;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Rating/useRating.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  isHTMLElement,\n  mergeCallbacks,\n  slot,\n  useControllableState,\n  useId,\n} from '@fluentui/react-utilities';\nimport type { RatingBaseProps, RatingBaseState, RatingProps, RatingState } from './Rating.types';\nimport { RatingItem } from '../../RatingItem';\nimport { StarFilled, StarRegular } from '@fluentui/react-icons';\n\n/**\n * Create the state required to render Rating.\n *\n * The returned state can be modified with hooks such as useRatingStyles_unstable,\n * before being passed to renderRating_unstable.\n *\n * @param props - props from this instance of Rating\n * @param ref - reference to root HTMLElement of Rating\n */\nexport const useRating_unstable = (props: RatingProps, ref: React.Ref<HTMLDivElement>): RatingState => {\n  const {\n    color = 'neutral',\n    size = 'extra-large',\n    iconFilled = StarFilled,\n    iconOutline = StarRegular,\n    max = 5,\n    ...baseProps\n  } = props;\n  const state = useRatingBase_unstable({ iconFilled, iconOutline, ...baseProps }, ref);\n\n  // Generate the child RatingItems and memoize them to prevent unnecessary re-rendering\n  const rootChildren = React.useMemo(() => {\n    return Array.from(Array(max), (_, i) => <RatingItem value={i + 1} key={i + 1} />);\n  }, [max]);\n\n  state.root.children ??= rootChildren;\n\n  return {\n    ...state,\n    color,\n    size,\n  };\n};\n\n/**\n * Base hook for Rating component. Manages state related to controlled/uncontrolled\n * rating value, hover state, radiogroup ARIA role, and keyboard/mouse interaction —\n * without design props (color, size).\n *\n * @param props - props from this instance of Rating (without color, size)\n * @param ref - reference to root HTMLElement of Rating\n */\nexport const useRatingBase_unstable = (props: RatingBaseProps, ref: React.Ref<HTMLDivElement>): RatingBaseState => {\n  const generatedName = useId('rating-');\n  const { iconFilled = 'span', iconOutline = 'span', name = generatedName, onChange, step = 1, itemLabel } = props;\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: 0,\n  });\n\n  const isRatingRadioItem = (target: EventTarget): target is HTMLInputElement =>\n    isHTMLElement(target, { constructorName: 'HTMLInputElement' }) && target.type === 'radio' && target.name === name;\n\n  const [hoveredValue, setHoveredValue] = React.useState<number | undefined>(undefined);\n  const state: RatingBaseState = {\n    iconFilled,\n    iconOutline,\n    name,\n    step,\n    itemLabel,\n    value,\n    hoveredValue,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps(\n        'div',\n        {\n          ref,\n          role: 'radiogroup',\n          ...props,\n        },\n        ['onChange'],\n      ),\n      { elementType: 'div' },\n    ),\n  };\n\n  state.root.onChange = ev => {\n    if (isRatingRadioItem(ev.target)) {\n      const newValue = parseFloat(ev.target.value);\n      if (!isNaN(newValue)) {\n        setValue(newValue);\n        onChange?.(ev, { type: 'change', event: ev, value: newValue });\n      }\n    }\n  };\n  state.root.onMouseOver = mergeCallbacks(props.onMouseOver, ev => {\n    if (isRatingRadioItem(ev.target)) {\n      const newValue = parseFloat(ev.target.value);\n      if (!isNaN(newValue)) {\n        setHoveredValue(newValue);\n      }\n    }\n  });\n  state.root.onMouseLeave = mergeCallbacks(props.onMouseLeave, ev => {\n    setHoveredValue(undefined);\n  });\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","isHTMLElement","mergeCallbacks","slot","useControllableState","useId","RatingItem","StarFilled","StarRegular","useRating_unstable","props","ref","state","color","size","iconFilled","iconOutline","max","baseProps","useRatingBase_unstable","rootChildren","useMemo","Array","from","_","i","value","key","root","children","generatedName","name","onChange","step","itemLabel","setValue","defaultState","defaultValue","initialState","isRatingRadioItem","target","constructorName","type","hoveredValue","setHoveredValue","useState","undefined","components","always","role","elementType","ev","newValue","parseFloat","isNaN","event","onMouseOver","onMouseLeave"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,aAAa,EACbC,cAAc,EACdC,IAAI,EACJC,oBAAoB,EACpBC,KAAK,QACA,4BAA4B;AAEnC,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,UAAU,EAAEC,WAAW,QAAQ,wBAAwB;AAEhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;QAgBrDC;IAfA,MAAM,EACJC,QAAQ,SAAS,EACjBC,OAAO,aAAa,EACpBC,aAAaR,UAAU,EACvBS,cAAcR,WAAW,EACzBS,MAAM,CAAC,EACP,GAAGC,WACJ,GAAGR;IACJ,MAAME,QAAQO,uBAAuB;QAAEJ;QAAYC;QAAa,GAAGE,SAAS;IAAC,GAAGP;IAEhF,sFAAsF;IACtF,MAAMS,eAAerB,MAAMsB,OAAO,CAAC;QACjC,OAAOC,MAAMC,IAAI,CAACD,MAAML,MAAM,CAACO,GAAGC,kBAAM,oBAACnB;gBAAWoB,OAAOD,IAAI;gBAAGE,KAAKF,IAAI;;IAC7E,GAAG;QAACR;KAAI;;IAERL,cAAAA,cAAAA,MAAMgB,IAAI,EAACC,yDAAXjB,YAAWiB,WAAaT;IAExB,OAAO;QACL,GAAGR,KAAK;QACRC;QACAC;IACF;AACF,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMK,yBAAyB,CAACT,OAAwBC;IAC7D,MAAMmB,gBAAgBzB,MAAM;IAC5B,MAAM,EAAEU,aAAa,MAAM,EAAEC,cAAc,MAAM,EAAEe,OAAOD,aAAa,EAAEE,QAAQ,EAAEC,OAAO,CAAC,EAAEC,SAAS,EAAE,GAAGxB;IAE3G,MAAM,CAACgB,OAAOS,SAAS,GAAG/B,qBAAqB;QAC7CQ,OAAOF,MAAMgB,KAAK;QAClBU,cAAc1B,MAAM2B,YAAY;QAChCC,cAAc;IAChB;IAEA,MAAMC,oBAAoB,CAACC,SACzBvC,cAAcuC,QAAQ;YAAEC,iBAAiB;QAAmB,MAAMD,OAAOE,IAAI,KAAK,WAAWF,OAAOT,IAAI,KAAKA;IAE/G,MAAM,CAACY,cAAcC,gBAAgB,GAAG7C,MAAM8C,QAAQ,CAAqBC;IAC3E,MAAMlC,QAAyB;QAC7BG;QACAC;QACAe;QACAE;QACAC;QACAR;QACAiB;QACAI,YAAY;YACVnB,MAAM;QACR;QACAA,MAAMzB,KAAK6C,MAAM,CACfhD,yBACE,OACA;YACEW;YACAsC,MAAM;YACN,GAAGvC,KAAK;QACV,GACA;YAAC;SAAW,GAEd;YAAEwC,aAAa;QAAM;IAEzB;IAEAtC,MAAMgB,IAAI,CAACI,QAAQ,GAAGmB,CAAAA;QACpB,IAAIZ,kBAAkBY,GAAGX,MAAM,GAAG;YAChC,MAAMY,WAAWC,WAAWF,GAAGX,MAAM,CAACd,KAAK;YAC3C,IAAI,CAAC4B,MAAMF,WAAW;gBACpBjB,SAASiB;gBACTpB,qBAAAA,+BAAAA,SAAWmB,IAAI;oBAAET,MAAM;oBAAUa,OAAOJ;oBAAIzB,OAAO0B;gBAAS;YAC9D;QACF;IACF;IACAxC,MAAMgB,IAAI,CAAC4B,WAAW,GAAGtD,eAAeQ,MAAM8C,WAAW,EAAEL,CAAAA;QACzD,IAAIZ,kBAAkBY,GAAGX,MAAM,GAAG;YAChC,MAAMY,WAAWC,WAAWF,GAAGX,MAAM,CAACd,KAAK;YAC3C,IAAI,CAAC4B,MAAMF,WAAW;gBACpBR,gBAAgBQ;YAClB;QACF;IACF;IACAxC,MAAMgB,IAAI,CAAC6B,YAAY,GAAGvD,eAAeQ,MAAM+C,YAAY,EAAEN,CAAAA;QAC3DP,gBAAgBE;IAClB;IAEA,OAAOlC;AACT,EAAE"}

package/lib/components/Rating/useRatingContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Rating/useRatingContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { RatingContextValues, RatingState } from './Rating.types';\nimport { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport const useRatingContextValues = (ratingState: RatingState): RatingContextValues => {\n  const { color, hoveredValue, iconFilled, iconOutline, itemLabel, name, step, size, value } = ratingState;\n\n  const ratingItem = React.useMemo<RatingItemContextValue>(\n    () => ({\n      color,\n      hoveredValue,\n      iconFilled,\n      iconOutline,\n      interactive: true,\n      itemLabel,\n      name,\n      step,\n      size,\n      value,\n    }),\n    [color, hoveredValue, iconFilled, iconOutline, itemLabel, name, step, size, value],\n  );\n\n  return { ratingItem };\n};\n"],"names":["React","useRatingContextValues","ratingState","color","hoveredValue","iconFilled","iconOutline","itemLabel","name","step","size","value","ratingItem","useMemo","interactive"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,yBAAyB,CAACC;IACrC,MAAM,EAAEC,KAAK,EAAEC,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAEC,SAAS,EAAEC,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGT;IAE7F,MAAMU,aAAaZ,MAAMa,OAAO,CAC9B,IAAO,CAAA;YACLV;YACAC;YACAC;YACAC;YACAQ,aAAa;YACbP;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACR;QAAOC;QAAcC;QAAYC;QAAaC;QAAWC;QAAMC;QAAMC;QAAMC;KAAM;IAGpF,OAAO;QAAEC;IAAW;AACtB,EAAE"}
+{"version":3,"sources":["../src/components/Rating/useRatingContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { RatingContextValues, RatingState } from './Rating.types';\nimport type { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport const useRatingContextValues = (ratingState: RatingState): RatingContextValues => {\n  const { color, hoveredValue, iconFilled, iconOutline, itemLabel, name, step, size, value } = ratingState;\n\n  const ratingItem = React.useMemo<RatingItemContextValue>(\n    () => ({\n      color,\n      hoveredValue,\n      iconFilled,\n      iconOutline,\n      interactive: true,\n      itemLabel,\n      name,\n      step,\n      size,\n      value,\n    }),\n    [color, hoveredValue, iconFilled, iconOutline, itemLabel, name, step, size, value],\n  );\n\n  return { ratingItem };\n};\n"],"names":["React","useRatingContextValues","ratingState","color","hoveredValue","iconFilled","iconOutline","itemLabel","name","step","size","value","ratingItem","useMemo","interactive"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,yBAAyB,CAACC;IACrC,MAAM,EAAEC,KAAK,EAAEC,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAEC,SAAS,EAAEC,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGT;IAE7F,MAAMU,aAAaZ,MAAMa,OAAO,CAC9B,IAAO,CAAA;YACLV;YACAC;YACAC;YACAC;YACAQ,aAAa;YACbP;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACR;QAAOC;QAAcC;QAAYC;QAAaC;QAAWC;QAAMC;QAAMC;QAAMC;KAAM;IAGpF,OAAO;QAAEC;IAAW;AACtB,EAAE"}

package/lib/components/RatingDisplay/RatingDisplay.types.js

@@ -1 +1 @@
-import * as React from 'react';
+export { };

package/lib/components/RatingDisplay/RatingDisplay.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/RatingDisplay/RatingDisplay.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport type RatingDisplaySlots = {\n  root: NonNullable<Slot<'div'>>;\n  valueText?: Slot<'span'>;\n  countText?: Slot<'span'>;\n};\n\n/**\n * RatingDisplay Props\n */\nexport type RatingDisplayProps = ComponentProps<RatingDisplaySlots> & {\n  /**\n   * Color of the rating items (stars).\n   * @default neutral\n   */\n  color?: 'brand' | 'marigold' | 'neutral';\n  /**\n   * Renders a single filled star, with the value written next to it.\n   * @default false\n   */\n  compact?: boolean;\n  /**\n   * The number of ratings represented by the rating value.\n   * This will be formatted with a thousands separator (if applicable) and displayed next to the value.\n   */\n  count?: number;\n  /**\n   * The icon used for rating items.\n   * @default StarFilled\n   */\n  icon?: React.ElementType;\n  /**\n   * The max value of the rating. This controls the number of rating items displayed.\n   * Must be a whole number greater than 1.\n   * @default 5\n   */\n  max?: number;\n  /**\n   * Sets the size of the RatingDisplay items.\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large' | 'extra-large';\n  /**\n   * The value of the rating\n   */\n  value?: number;\n};\n\n/**\n * State used in rendering RatingDisplay\n */\nexport type RatingDisplayState = ComponentState<RatingDisplaySlots> &\n  Required<Pick<RatingDisplayProps, 'color' | 'compact' | 'icon' | 'max' | 'size'>> &\n  Pick<RatingDisplayProps, 'value'>;\n\nexport type RatingDisplayContextValues = { ratingItem: RatingItemContextValue };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/RatingDisplay/RatingDisplay.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport type RatingDisplaySlots = {\n  root: NonNullable<Slot<'div'>>;\n  valueText?: Slot<'span'>;\n  countText?: Slot<'span'>;\n};\n\n/**\n * RatingDisplay Props\n */\nexport type RatingDisplayProps = ComponentProps<RatingDisplaySlots> & {\n  /**\n   * Color of the rating items (stars).\n   * @default neutral\n   */\n  color?: 'brand' | 'marigold' | 'neutral';\n  /**\n   * Renders a single filled star, with the value written next to it.\n   * @default false\n   */\n  compact?: boolean;\n  /**\n   * The number of ratings represented by the rating value.\n   * This will be formatted with a thousands separator (if applicable) and displayed next to the value.\n   */\n  count?: number;\n  /**\n   * The icon used for rating items.\n   * @default StarFilled\n   */\n  icon?: React.ElementType;\n  /**\n   * The max value of the rating. This controls the number of rating items displayed.\n   * Must be a whole number greater than 1.\n   * @default 5\n   */\n  max?: number;\n  /**\n   * Sets the size of the RatingDisplay items.\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large' | 'extra-large';\n  /**\n   * The value of the rating\n   */\n  value?: number;\n};\n\n/**\n * RatingDisplay base props — excludes design props (color, size).\n */\nexport type RatingDisplayBaseProps = Omit<RatingDisplayProps, 'color' | 'size'>;\n\n/**\n * State used in rendering RatingDisplay\n */\nexport type RatingDisplayState = ComponentState<RatingDisplaySlots> &\n  Required<Pick<RatingDisplayProps, 'color' | 'compact' | 'icon' | 'max' | 'size'>> &\n  Pick<RatingDisplayProps, 'value'>;\n\n/**\n * RatingDisplay base state — excludes design props (color, size).\n */\nexport type RatingDisplayBaseState = Omit<RatingDisplayState, 'color' | 'size' | 'icon'> &\n  Pick<RatingDisplayProps, 'icon'>;\n\nexport type RatingDisplayContextValues = { ratingItem: RatingItemContextValue };\n"],"names":[],"mappings":"AAqEA,WAAgF"}

package/lib/components/RatingDisplay/index.js

@@ -1,5 +1,5 @@
 export { RatingDisplay } from './RatingDisplay';
 export { renderRatingDisplay_unstable } from './renderRatingDisplay';
-export { useRatingDisplay_unstable } from './useRatingDisplay';
+export { useRatingDisplay_unstable, useRatingDisplayBase_unstable } from './useRatingDisplay';
 export { ratingDisplayClassNames, useRatingDisplayStyles_unstable } from './useRatingDisplayStyles.styles';
 export { useRatingDisplayContextValues } from './useRatingDisplayContextValues';

package/lib/components/RatingDisplay/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/RatingDisplay/index.ts"],"sourcesContent":["export { RatingDisplay } from './RatingDisplay';\nexport type {\n  RatingDisplayContextValues,\n  RatingDisplayProps,\n  RatingDisplaySlots,\n  RatingDisplayState,\n} from './RatingDisplay.types';\nexport { renderRatingDisplay_unstable } from './renderRatingDisplay';\nexport { useRatingDisplay_unstable } from './useRatingDisplay';\nexport { ratingDisplayClassNames, useRatingDisplayStyles_unstable } from './useRatingDisplayStyles.styles';\nexport { useRatingDisplayContextValues } from './useRatingDisplayContextValues';\n"],"names":["RatingDisplay","renderRatingDisplay_unstable","useRatingDisplay_unstable","ratingDisplayClassNames","useRatingDisplayStyles_unstable","useRatingDisplayContextValues"],"mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAOhD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC;AAC3G,SAASC,6BAA6B,QAAQ,kCAAkC"}
+{"version":3,"sources":["../src/components/RatingDisplay/index.ts"],"sourcesContent":["export { RatingDisplay } from './RatingDisplay';\nexport type {\n  RatingDisplayContextValues,\n  RatingDisplayProps,\n  RatingDisplayBaseProps,\n  RatingDisplaySlots,\n  RatingDisplayState,\n  RatingDisplayBaseState,\n} from './RatingDisplay.types';\nexport { renderRatingDisplay_unstable } from './renderRatingDisplay';\nexport { useRatingDisplay_unstable, useRatingDisplayBase_unstable } from './useRatingDisplay';\nexport { ratingDisplayClassNames, useRatingDisplayStyles_unstable } from './useRatingDisplayStyles.styles';\nexport { useRatingDisplayContextValues } from './useRatingDisplayContextValues';\n"],"names":["RatingDisplay","renderRatingDisplay_unstable","useRatingDisplay_unstable","useRatingDisplayBase_unstable","ratingDisplayClassNames","useRatingDisplayStyles_unstable","useRatingDisplayContextValues"],"mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAShD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,EAAEC,6BAA6B,QAAQ,qBAAqB;AAC9F,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC;AAC3G,SAASC,6BAA6B,QAAQ,kCAAkC"}

package/lib/components/RatingDisplay/renderRatingDisplay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/RatingDisplay/renderRatingDisplay.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { RatingDisplayState, RatingDisplaySlots, RatingDisplayContextValues } from './RatingDisplay.types';\nimport { RatingItemProvider } from '../../contexts/RatingItemContext';\n\n/**\n * Render the final JSX of RatingDisplay\n */\nexport const renderRatingDisplay_unstable = (\n  state: RatingDisplayState,\n  contextValues: RatingDisplayContextValues,\n): JSXElement => {\n  assertSlots<RatingDisplaySlots>(state);\n\n  return (\n    <RatingItemProvider value={contextValues.ratingItem}>\n      <state.root>\n        {state.root.children}\n        {state.valueText && <state.valueText />}\n        {state.countText && <state.countText />}\n      </state.root>\n    </RatingItemProvider>\n  );\n};\n"],"names":["assertSlots","RatingItemProvider","renderRatingDisplay_unstable","state","contextValues","value","ratingItem","root","children","valueText","countText"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEAJ,YAAgCG;IAEhC,qBACE,KAACF;QAAmBI,OAAOD,cAAcE,UAAU;kBACjD,cAAA,MAACH,MAAMI,IAAI;;gBACRJ,MAAMI,IAAI,CAACC,QAAQ;gBACnBL,MAAMM,SAAS,kBAAI,KAACN,MAAMM,SAAS;gBACnCN,MAAMO,SAAS,kBAAI,KAACP,MAAMO,SAAS;;;;AAI5C,EAAE"}
+{"version":3,"sources":["../src/components/RatingDisplay/renderRatingDisplay.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { RatingDisplayBaseState, RatingDisplaySlots, RatingDisplayContextValues } from './RatingDisplay.types';\nimport { RatingItemProvider } from '../../contexts/RatingItemContext';\n\n/**\n * Render the final JSX of RatingDisplay\n */\nexport const renderRatingDisplay_unstable = (\n  state: RatingDisplayBaseState,\n  contextValues: RatingDisplayContextValues,\n): JSXElement => {\n  assertSlots<RatingDisplaySlots>(state);\n\n  return (\n    <RatingItemProvider value={contextValues.ratingItem}>\n      <state.root>\n        {state.root.children}\n        {state.valueText && <state.valueText />}\n        {state.countText && <state.countText />}\n      </state.root>\n    </RatingItemProvider>\n  );\n};\n"],"names":["assertSlots","RatingItemProvider","renderRatingDisplay_unstable","state","contextValues","value","ratingItem","root","children","valueText","countText"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEAJ,YAAgCG;IAEhC,qBACE,KAACF;QAAmBI,OAAOD,cAAcE,UAAU;kBACjD,cAAA,MAACH,MAAMI,IAAI;;gBACRJ,MAAMI,IAAI,CAACC,QAAQ;gBACnBL,MAAMM,SAAS,kBAAI,KAACN,MAAMM,SAAS;gBACnCN,MAAMO,SAAS,kBAAI,KAACP,MAAMO,SAAS;;;;AAI5C,EAAE"}

package/lib/components/RatingDisplay/useRatingDisplay.js

@@ -12,10 +12,12 @@ import { RatingItem } from '../RatingItem/RatingItem';
  * @param props - props from this instance of RatingDisplay
  * @param ref - reference to root HTMLDivElement of RatingDisplay
  */ export const useRatingDisplay_unstable = (props, ref)=>{
-    const { color = 'neutral', count, compact = false, icon = StarFilled, max = 5, size = 'medium', value } = props;
-    const valueTextId = useId('rating-value-');
-    const countTextId = useId('rating-count-');
-    // Generate the child RatingItems and memoize them to prevent unnecessary re-rendering
+    const { color = 'neutral', size = 'medium', icon = StarFilled, ...baseProps } = props;
+    const state = useRatingDisplayBase_unstable({
+        icon,
+        ...baseProps
+    }, ref);
+    const { compact, max } = state;
     const rootChildren = React.useMemo(()=>{
         return compact ? /*#__PURE__*/ React.createElement(RatingItem, {
             value: 1,
@@ -30,12 +32,32 @@ import { RatingItem } from '../RatingItem/RatingItem';
         compact,
         max
     ]);
-    const state = {
+    return {
+        ...state,
+        root: {
+            children: rootChildren,
+            ...state.root
+        },
+        icon,
         color,
+        size
+    };
+};
+/**
+ * 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 const useRatingDisplayBase_unstable = (props, ref)=>{
+    const { count, compact = false, icon, max = 5, value } = props;
+    const valueTextId = useId('rating-value-');
+    const countTextId = useId('rating-count-');
+    const state = {
         compact,
         icon,
         max,
-        size,
         value,
         components: {
             root: 'div',
@@ -44,7 +66,6 @@ import { RatingItem } from '../RatingItem/RatingItem';
         },
         root: slot.always(getIntrinsicElementProps('div', {
             ref,
-            children: rootChildren,
             role: 'img',
             ...props
         }), {

package/lib/components/RatingDisplay/useRatingDisplay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/RatingDisplay/useRatingDisplay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId } from '@fluentui/react-utilities';\nimport type { RatingDisplayProps, RatingDisplayState } from './RatingDisplay.types';\nimport { StarFilled } from '@fluentui/react-icons';\nimport { RatingItem } from '../RatingItem/RatingItem';\n\n/**\n * Create the state required to render RatingDisplay.\n *\n * The returned state can be modified with hooks such as useRatingDisplayStyles_unstable,\n * before being passed to renderRatingDisplay_unstable.\n *\n * @param props - props from this instance of RatingDisplay\n * @param ref - reference to root HTMLDivElement of RatingDisplay\n */\nexport const useRatingDisplay_unstable = (\n  props: RatingDisplayProps,\n  ref: React.Ref<HTMLDivElement>,\n): RatingDisplayState => {\n  const { color = 'neutral', count, compact = false, icon = StarFilled, max = 5, size = 'medium', value } = props;\n\n  const valueTextId = useId('rating-value-');\n  const countTextId = useId('rating-count-');\n\n  // Generate the child RatingItems and memoize them to prevent unnecessary re-rendering\n  const rootChildren = React.useMemo(() => {\n    return compact ? (\n      <RatingItem value={1} key={1} aria-hidden={true} />\n    ) : (\n      Array.from(Array(max), (_, i) => <RatingItem value={i + 1} key={i + 1} aria-hidden={true} />)\n    );\n  }, [compact, max]);\n\n  const state: RatingDisplayState = {\n    color,\n    compact,\n    icon,\n    max,\n    size,\n    value,\n    components: {\n      root: 'div',\n      valueText: 'span',\n      countText: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        children: rootChildren,\n        role: 'img',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    valueText: slot.optional(props.valueText, {\n      renderByDefault: value !== undefined,\n      defaultProps: { children: value, id: valueTextId, 'aria-hidden': true },\n      elementType: 'span',\n    }),\n    countText: slot.optional(props.countText, {\n      renderByDefault: count !== undefined,\n      defaultProps: { children: count?.toLocaleString(), id: countTextId, 'aria-hidden': true },\n      elementType: 'span',\n    }),\n  };\n  if (!state.root['aria-label'] && !state.root['aria-labelledby']) {\n    state.root['aria-labelledby'] = [state.valueText?.id, state.countText?.id].filter(Boolean).join(' ');\n  }\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","useId","StarFilled","RatingItem","useRatingDisplay_unstable","props","ref","color","count","compact","icon","max","size","value","valueTextId","countTextId","rootChildren","useMemo","key","aria-hidden","Array","from","_","i","state","components","root","valueText","countText","always","children","role","elementType","optional","renderByDefault","undefined","defaultProps","id","toLocaleString","filter","Boolean","join"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,KAAK,QAAQ,4BAA4B;AAElF,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,UAAU,QAAQ,2BAA2B;AAEtD;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,SAAS,EAAEC,KAAK,EAAEC,UAAU,KAAK,EAAEC,OAAOR,UAAU,EAAES,MAAM,CAAC,EAAEC,OAAO,QAAQ,EAAEC,KAAK,EAAE,GAAGR;IAE1G,MAAMS,cAAcb,MAAM;IAC1B,MAAMc,cAAcd,MAAM;IAE1B,sFAAsF;IACtF,MAAMe,eAAelB,MAAMmB,OAAO,CAAC;QACjC,OAAOR,wBACL,oBAACN;YAAWU,OAAO;YAAGK,KAAK;YAAGC,eAAa;aAE3CC,MAAMC,IAAI,CAACD,MAAMT,MAAM,CAACW,GAAGC,kBAAM,oBAACpB;gBAAWU,OAAOU,IAAI;gBAAGL,KAAKK,IAAI;gBAAGJ,eAAa;;IAExF,GAAG;QAACV;QAASE;KAAI;IAEjB,MAAMa,QAA4B;QAChCjB;QACAE;QACAC;QACAC;QACAC;QACAC;QACAY,YAAY;YACVC,MAAM;YACNC,WAAW;YACXC,WAAW;QACb;QACAF,MAAM1B,KAAK6B,MAAM,CACf9B,yBAAyB,OAAO;YAC9BO;YACAwB,UAAUd;YACVe,MAAM;YACN,GAAG1B,KAAK;QACV,IACA;YAAE2B,aAAa;QAAM;QAEvBL,WAAW3B,KAAKiC,QAAQ,CAAC5B,MAAMsB,SAAS,EAAE;YACxCO,iBAAiBrB,UAAUsB;YAC3BC,cAAc;gBAAEN,UAAUjB;gBAAOwB,IAAIvB;gBAAa,eAAe;YAAK;YACtEkB,aAAa;QACf;QACAJ,WAAW5B,KAAKiC,QAAQ,CAAC5B,MAAMuB,SAAS,EAAE;YACxCM,iBAAiB1B,UAAU2B;YAC3BC,cAAc;gBAAEN,QAAQ,EAAEtB,kBAAAA,4BAAAA,MAAO8B,cAAc;gBAAID,IAAItB;gBAAa,eAAe;YAAK;YACxFiB,aAAa;QACf;IACF;IACA,IAAI,CAACR,MAAME,IAAI,CAAC,aAAa,IAAI,CAACF,MAAME,IAAI,CAAC,kBAAkB,EAAE;YAC9BF,kBAAqBA;QAAtDA,MAAME,IAAI,CAAC,kBAAkB,GAAG;aAACF,mBAAAA,MAAMG,SAAS,cAAfH,uCAAAA,iBAAiBa,EAAE;aAAEb,mBAAAA,MAAMI,SAAS,cAAfJ,uCAAAA,iBAAiBa,EAAE;SAAC,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;IAClG;IACA,OAAOjB;AACT,EAAE"}
+{"version":3,"sources":["../src/components/RatingDisplay/useRatingDisplay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId } from '@fluentui/react-utilities';\nimport type {\n  RatingDisplayBaseProps,\n  RatingDisplayBaseState,\n  RatingDisplayProps,\n  RatingDisplayState,\n} from './RatingDisplay.types';\nimport { StarFilled } from '@fluentui/react-icons';\nimport { RatingItem } from '../RatingItem/RatingItem';\n\n/**\n * Create the state required to render RatingDisplay.\n *\n * The returned state can be modified with hooks such as useRatingDisplayStyles_unstable,\n * before being passed to renderRatingDisplay_unstable.\n *\n * @param props - props from this instance of RatingDisplay\n * @param ref - reference to root HTMLDivElement of RatingDisplay\n */\nexport const useRatingDisplay_unstable = (\n  props: RatingDisplayProps,\n  ref: React.Ref<HTMLDivElement>,\n): RatingDisplayState => {\n  const { color = 'neutral', size = 'medium', icon = StarFilled, ...baseProps } = props;\n  const state = useRatingDisplayBase_unstable({ icon, ...baseProps }, ref);\n\n  const { compact, max } = state;\n\n  const rootChildren = React.useMemo(() => {\n    return compact ? (\n      <RatingItem value={1} key={1} aria-hidden={true} />\n    ) : (\n      Array.from(Array(max), (_, i) => <RatingItem value={i + 1} key={i + 1} aria-hidden={true} />)\n    );\n  }, [compact, max]);\n\n  return {\n    ...state,\n    root: {\n      children: rootChildren,\n      ...state.root,\n    },\n    icon,\n    color,\n    size,\n  };\n};\n\n/**\n * Base hook for RatingDisplay component. Manages state related to ARIA img role,\n * aria-labelledby composition from valueText/countText IDs, slot structure, and\n * compact/full display modes — without design props (color, size).\n *\n * @param props - props from this instance of RatingDisplay (without color, size)\n * @param ref - reference to root HTMLDivElement of RatingDisplay\n */\nexport const useRatingDisplayBase_unstable = (\n  props: RatingDisplayBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): RatingDisplayBaseState => {\n  const { count, compact = false, icon, max = 5, value } = props;\n\n  const valueTextId = useId('rating-value-');\n  const countTextId = useId('rating-count-');\n\n  const state: RatingDisplayBaseState = {\n    compact,\n    icon,\n    max,\n    value,\n    components: {\n      root: 'div',\n      valueText: 'span',\n      countText: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'img',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    valueText: slot.optional(props.valueText, {\n      renderByDefault: value !== undefined,\n      defaultProps: { children: value, id: valueTextId, 'aria-hidden': true },\n      elementType: 'span',\n    }),\n    countText: slot.optional(props.countText, {\n      renderByDefault: count !== undefined,\n      defaultProps: { children: count?.toLocaleString(), id: countTextId, 'aria-hidden': true },\n      elementType: 'span',\n    }),\n  };\n  if (!state.root['aria-label'] && !state.root['aria-labelledby']) {\n    state.root['aria-labelledby'] = [state.valueText?.id, state.countText?.id].filter(Boolean).join(' ');\n  }\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","useId","StarFilled","RatingItem","useRatingDisplay_unstable","props","ref","color","size","icon","baseProps","state","useRatingDisplayBase_unstable","compact","max","rootChildren","useMemo","value","key","aria-hidden","Array","from","_","i","root","children","count","valueTextId","countTextId","components","valueText","countText","always","role","elementType","optional","renderByDefault","undefined","defaultProps","id","toLocaleString","filter","Boolean","join"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,KAAK,QAAQ,4BAA4B;AAOlF,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,UAAU,QAAQ,2BAA2B;AAEtD;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,SAAS,EAAEC,OAAO,QAAQ,EAAEC,OAAOP,UAAU,EAAE,GAAGQ,WAAW,GAAGL;IAChF,MAAMM,QAAQC,8BAA8B;QAAEH;QAAM,GAAGC,SAAS;IAAC,GAAGJ;IAEpE,MAAM,EAAEO,OAAO,EAAEC,GAAG,EAAE,GAAGH;IAEzB,MAAMI,eAAejB,MAAMkB,OAAO,CAAC;QACjC,OAAOH,wBACL,oBAACV;YAAWc,OAAO;YAAGC,KAAK;YAAGC,eAAa;aAE3CC,MAAMC,IAAI,CAACD,MAAMN,MAAM,CAACQ,GAAGC,kBAAM,oBAACpB;gBAAWc,OAAOM,IAAI;gBAAGL,KAAKK,IAAI;gBAAGJ,eAAa;;IAExF,GAAG;QAACN;QAASC;KAAI;IAEjB,OAAO;QACL,GAAGH,KAAK;QACRa,MAAM;YACJC,UAAUV;YACV,GAAGJ,MAAMa,IAAI;QACf;QACAf;QACAF;QACAC;IACF;AACF,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMI,gCAAgC,CAC3CP,OACAC;IAEA,MAAM,EAAEoB,KAAK,EAAEb,UAAU,KAAK,EAAEJ,IAAI,EAAEK,MAAM,CAAC,EAAEG,KAAK,EAAE,GAAGZ;IAEzD,MAAMsB,cAAc1B,MAAM;IAC1B,MAAM2B,cAAc3B,MAAM;IAE1B,MAAMU,QAAgC;QACpCE;QACAJ;QACAK;QACAG;QACAY,YAAY;YACVL,MAAM;YACNM,WAAW;YACXC,WAAW;QACb;QACAP,MAAMxB,KAAKgC,MAAM,CACfjC,yBAAyB,OAAO;YAC9BO;YACA2B,MAAM;YACN,GAAG5B,KAAK;QACV,IACA;YAAE6B,aAAa;QAAM;QAEvBJ,WAAW9B,KAAKmC,QAAQ,CAAC9B,MAAMyB,SAAS,EAAE;YACxCM,iBAAiBnB,UAAUoB;YAC3BC,cAAc;gBAAEb,UAAUR;gBAAOsB,IAAIZ;gBAAa,eAAe;YAAK;YACtEO,aAAa;QACf;QACAH,WAAW/B,KAAKmC,QAAQ,CAAC9B,MAAM0B,SAAS,EAAE;YACxCK,iBAAiBV,UAAUW;YAC3BC,cAAc;gBAAEb,QAAQ,EAAEC,kBAAAA,4BAAAA,MAAOc,cAAc;gBAAID,IAAIX;gBAAa,eAAe;YAAK;YACxFM,aAAa;QACf;IACF;IACA,IAAI,CAACvB,MAAMa,IAAI,CAAC,aAAa,IAAI,CAACb,MAAMa,IAAI,CAAC,kBAAkB,EAAE;YAC9Bb,kBAAqBA;QAAtDA,MAAMa,IAAI,CAAC,kBAAkB,GAAG;aAACb,mBAAAA,MAAMmB,SAAS,cAAfnB,uCAAAA,iBAAiB4B,EAAE;aAAE5B,mBAAAA,MAAMoB,SAAS,cAAfpB,uCAAAA,iBAAiB4B,EAAE;SAAC,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;IAClG;IACA,OAAOhC;AACT,EAAE"}

package/lib/components/RatingDisplay/useRatingDisplayContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/RatingDisplay/useRatingDisplayContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { RatingDisplayContextValues, RatingDisplayState } from './RatingDisplay.types';\nimport { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport const useRatingDisplayContextValues = (state: RatingDisplayState): RatingDisplayContextValues => {\n  const { color, compact, icon, size, value } = state;\n\n  const ratingItem = React.useMemo<RatingItemContextValue>(\n    () => ({\n      color,\n      compact,\n      iconFilled: icon,\n      iconOutline: icon,\n      interactive: false,\n      step: 0.5,\n      size,\n      value,\n    }),\n    [color, compact, icon, size, value],\n  );\n\n  return { ratingItem };\n};\n"],"names":["React","useRatingDisplayContextValues","state","color","compact","icon","size","value","ratingItem","useMemo","iconFilled","iconOutline","interactive","step"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,gCAAgC,CAACC;IAC5C,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGL;IAE9C,MAAMM,aAAaR,MAAMS,OAAO,CAC9B,IAAO,CAAA;YACLN;YACAC;YACAM,YAAYL;YACZM,aAAaN;YACbO,aAAa;YACbC,MAAM;YACNP;YACAC;QACF,CAAA,GACA;QAACJ;QAAOC;QAASC;QAAMC;QAAMC;KAAM;IAGrC,OAAO;QAAEC;IAAW;AACtB,EAAE"}
+{"version":3,"sources":["../src/components/RatingDisplay/useRatingDisplayContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { RatingDisplayContextValues, RatingDisplayState } from './RatingDisplay.types';\nimport type { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport const useRatingDisplayContextValues = (state: RatingDisplayState): RatingDisplayContextValues => {\n  const { color, compact, icon, size, value } = state;\n\n  const ratingItem = React.useMemo<RatingItemContextValue>(\n    () => ({\n      color,\n      compact,\n      iconFilled: icon,\n      iconOutline: icon,\n      interactive: false,\n      step: 0.5,\n      size,\n      value,\n    }),\n    [color, compact, icon, size, value],\n  );\n\n  return { ratingItem };\n};\n"],"names":["React","useRatingDisplayContextValues","state","color","compact","icon","size","value","ratingItem","useMemo","iconFilled","iconOutline","interactive","step"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,gCAAgC,CAACC;IAC5C,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGL;IAE9C,MAAMM,aAAaR,MAAMS,OAAO,CAC9B,IAAO,CAAA;YACLN;YACAC;YACAM,YAAYL;YACZM,aAAaN;YACbO,aAAa;YACbC,MAAM;YACNP;YACAC;QACF,CAAA,GACA;QAACJ;QAAOC;QAASC;QAAMC;QAAMC;KAAM;IAGrC,OAAO;QAAEC;IAAW;AACtB,EAAE"}

package/lib/components/RatingItem/RatingItem.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/RatingItem/RatingItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { RatingState } from '../Rating/Rating.types';\nimport { RatingDisplayState } from '../RatingDisplay/RatingDisplay.types';\n\nexport type RatingItemSlots = {\n  /**\n   * The root slot of the RatingItem.\n   * Default html element is span\n   */\n  root: NonNullable<Slot<'span'>>;\n  /**\n   * Icon displayed when the rating value is greater than or equal to the item's value.\n   */\n  selectedIcon?: NonNullable<Slot<'div'>>;\n  /**\n   * Icon displayed when the rating value is less than the item's value.\n   */\n  unselectedIcon?: NonNullable<Slot<'div'>>;\n  /**\n   * Radio input slot used for half star precision\n   */\n  halfValueInput?: NonNullable<Slot<'input'>>;\n  /**\n   * Radio input slot used for full star precision\n   */\n  fullValueInput?: NonNullable<Slot<'input'>>;\n};\n\n/**\n * RatingItem Props\n */\nexport type RatingItemProps = ComponentProps<Partial<RatingItemSlots>> & {\n  /**\n   * The positive whole number value that is displayed by this RatingItem\n   */\n  value?: number;\n};\n\n/**\n * State used in rendering RatingItem\n */\nexport type RatingItemState = ComponentState<RatingItemSlots> &\n  Required<Pick<RatingItemProps, 'value'>> &\n  Pick<RatingState, 'color' | 'step' | 'size'> & {\n    iconFillWidth: number;\n    appearance: 'outline' | 'filled';\n  };\n\nexport type RatingItemContextValue = Partial<Pick<RatingState, 'name' | 'hoveredValue' | 'value'>> &\n  Pick<RatingState, 'color' | 'iconFilled' | 'iconOutline' | 'itemLabel' | 'step' | 'size'> &\n  Partial<Pick<RatingDisplayState, 'compact'>> & {\n    interactive?: boolean;\n  };\n"],"names":[],"mappings":"AAgDA,WAII"}
+{"version":3,"sources":["../src/components/RatingItem/RatingItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { RatingState } from '../Rating/Rating.types';\nimport type { RatingDisplayState } from '../RatingDisplay/RatingDisplay.types';\n\nexport type RatingItemSlots = {\n  /**\n   * The root slot of the RatingItem.\n   * Default html element is span\n   */\n  root: NonNullable<Slot<'span'>>;\n  /**\n   * Icon displayed when the rating value is greater than or equal to the item's value.\n   */\n  selectedIcon?: NonNullable<Slot<'div'>>;\n  /**\n   * Icon displayed when the rating value is less than the item's value.\n   */\n  unselectedIcon?: NonNullable<Slot<'div'>>;\n  /**\n   * Radio input slot used for half star precision\n   */\n  halfValueInput?: NonNullable<Slot<'input'>>;\n  /**\n   * Radio input slot used for full star precision\n   */\n  fullValueInput?: NonNullable<Slot<'input'>>;\n};\n\n/**\n * RatingItem Props\n */\nexport type RatingItemProps = ComponentProps<Partial<RatingItemSlots>> & {\n  /**\n   * The positive whole number value that is displayed by this RatingItem\n   */\n  value?: number;\n};\n\n/**\n * RatingItem base props — same as RatingItemProps (no design-only props at this level).\n */\nexport type RatingItemBaseProps = RatingItemProps;\n\n/**\n * State used in rendering RatingItem\n */\nexport type RatingItemState = ComponentState<RatingItemSlots> &\n  Required<Pick<RatingItemProps, 'value'>> &\n  Pick<RatingState, 'color' | 'step' | 'size'> & {\n    iconFillWidth: number;\n    appearance: 'outline' | 'filled';\n  };\n\n/**\n * RatingItem base state — excludes design props (color, size) from context.\n */\nexport type RatingItemBaseState = Omit<RatingItemState, 'color' | 'size'>;\n\nexport type RatingItemContextValue = Partial<Pick<RatingState, 'name' | 'hoveredValue' | 'value'>> &\n  Pick<RatingState, 'color' | 'iconFilled' | 'iconOutline' | 'itemLabel' | 'step' | 'size'> &\n  Partial<Pick<RatingDisplayState, 'compact'>> & {\n    interactive?: boolean;\n  };\n"],"names":[],"mappings":"AA0DA,WAII"}

package/lib/components/RatingItem/index.js

@@ -1,4 +1,4 @@
 export { RatingItem } from './RatingItem';
 export { renderRatingItem_unstable } from './renderRatingItem';
-export { useRatingItem_unstable } from './useRatingItem';
+export { useRatingItem_unstable, useRatingItemBase_unstable } from './useRatingItem';
 export { ratingItemClassNames, useRatingItemStyles_unstable } from './useRatingItemStyles.styles';

package/lib/components/RatingItem/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/RatingItem/index.ts"],"sourcesContent":["export { RatingItem } from './RatingItem';\nexport type { RatingItemContextValue, RatingItemProps, RatingItemSlots, RatingItemState } from './RatingItem.types';\nexport { renderRatingItem_unstable } from './renderRatingItem';\nexport { useRatingItem_unstable } from './useRatingItem';\nexport { ratingItemClassNames, useRatingItemStyles_unstable } from './useRatingItemStyles.styles';\n"],"names":["RatingItem","renderRatingItem_unstable","useRatingItem_unstable","ratingItemClassNames","useRatingItemStyles_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAE1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}
+{"version":3,"sources":["../src/components/RatingItem/index.ts"],"sourcesContent":["export { RatingItem } from './RatingItem';\nexport type {\n  RatingItemContextValue,\n  RatingItemProps,\n  RatingItemBaseProps,\n  RatingItemSlots,\n  RatingItemState,\n  RatingItemBaseState,\n} from './RatingItem.types';\nexport { renderRatingItem_unstable } from './renderRatingItem';\nexport { useRatingItem_unstable, useRatingItemBase_unstable } from './useRatingItem';\nexport { ratingItemClassNames, useRatingItemStyles_unstable } from './useRatingItemStyles.styles';\n"],"names":["RatingItem","renderRatingItem_unstable","useRatingItem_unstable","useRatingItemBase_unstable","ratingItemClassNames","useRatingItemStyles_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAS1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,EAAEC,0BAA0B,QAAQ,kBAAkB;AACrF,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}

package/lib/components/RatingItem/renderRatingItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/RatingItem/renderRatingItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { RatingItemState, RatingItemSlots } from './RatingItem.types';\n\n/**\n * Render the final JSX of RatingItem\n */\nexport const renderRatingItem_unstable = (state: RatingItemState): JSXElement => {\n  assertSlots<RatingItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.halfValueInput && <state.halfValueInput />}\n      {state.fullValueInput && <state.fullValueInput />}\n      {state.unselectedIcon && <state.unselectedIcon />}\n      {state.selectedIcon && <state.selectedIcon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderRatingItem_unstable","state","root","halfValueInput","fullValueInput","unselectedIcon","selectedIcon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,cAAc,kBAAI,KAACF,MAAME,cAAc;YAC7CF,MAAMG,cAAc,kBAAI,KAACH,MAAMG,cAAc;YAC7CH,MAAMI,cAAc,kBAAI,KAACJ,MAAMI,cAAc;YAC7CJ,MAAMK,YAAY,kBAAI,KAACL,MAAMK,YAAY;;;AAGhD,EAAE"}
+{"version":3,"sources":["../src/components/RatingItem/renderRatingItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { RatingItemBaseState, RatingItemSlots } from './RatingItem.types';\n\n/**\n * Render the final JSX of RatingItem\n */\nexport const renderRatingItem_unstable = (state: RatingItemBaseState): JSXElement => {\n  assertSlots<RatingItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.halfValueInput && <state.halfValueInput />}\n      {state.fullValueInput && <state.fullValueInput />}\n      {state.unselectedIcon && <state.unselectedIcon />}\n      {state.selectedIcon && <state.selectedIcon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderRatingItem_unstable","state","root","halfValueInput","fullValueInput","unselectedIcon","selectedIcon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,cAAc,kBAAI,KAACF,MAAME,cAAc;YAC7CF,MAAMG,cAAc,kBAAI,KAACH,MAAMG,cAAc;YAC7CH,MAAMI,cAAc,kBAAI,KAACJ,MAAMI,cAAc;YAC7CJ,MAAMK,YAAY,kBAAI,KAACL,MAAMK,YAAY;;;AAGhD,EAAE"}

package/lib/components/RatingItem/useRatingItem.js

@@ -13,6 +13,22 @@ const defaultItemLabel = (num)=>num + '';
  * @param props - props from this instance of RatingItem
  * @param ref - reference to root HTMLElement of RatingItem
  */ export const useRatingItem_unstable = (props, ref)=>{
+    const context = useRatingItemContextValue_unstable();
+    const state = useRatingItemBase_unstable(props, ref);
+    return {
+        ...state,
+        color: context.color,
+        size: context.size
+    };
+};
+/**
+ * Base hook for RatingItem component. Manages state related to fill width calculation,
+ * radio input slots (for ARIA rating interaction), icon slots, and interactive mode —
+ * without design props (color, size from context).
+ *
+ * @param props - props from this instance of RatingItem
+ * @param ref - reference to root HTMLElement of RatingItem
+ */ export const useRatingItemBase_unstable = (props, ref)=>{
     const context = useRatingItemContextValue_unstable();
     const { value = 0 } = props;
     const { itemLabel = defaultItemLabel, iconFilled: IconFilled, iconOutline: IconOutline } = context;
@@ -88,11 +104,9 @@ const defaultItemLabel = (num)=>num + '';
             elementType: 'input'
         });
     }
-    const state = {
+    return {
         appearance,
-        color: context.color,
         step: context.step,
-        size: context.size,
         iconFillWidth,
         value,
         components: {
@@ -108,5 +122,4 @@ const defaultItemLabel = (num)=>num + '';
         halfValueInput,
         fullValueInput
     };
-    return state;
 };