@utilitywarehouse/hearth-react-native 0.32.3 → 0.32.4

package/.storybook/main.ts

@@ -71,6 +71,16 @@ const config = {
         ...config.optimizeDeps,
         exclude: [...(config.optimizeDeps?.exclude || []), '@utilitywarehouse/hearth-svg-assets'],
       },
+      build: {
+        ...config.build,
+        rolldownOptions: {
+          ...config.build?.rolldownOptions,
+          external: [
+            ...(config.build?.rolldownOptions?.external || []),
+            '@react-stately/utils',
+          ],
+        },
+      },
     };
   },
 };

package/.turbo/turbo-lint$colon$fix.log

@@ -42,15 +42,15 @@ $ TIMING=1 eslint --fix .
 
 ✖ 20 problems (0 errors, 20 warnings)
 
-Rule                              | Time (ms) | Relative
-:---------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars |  1235.710 |    58.8%
-react-hooks/rules-of-hooks        |    84.526 |     4.0%
-react-hooks/exhaustive-deps       |    83.725 |     4.0%
-no-global-assign                  |    63.566 |     3.0%
-no-useless-escape                 |    42.579 |     2.0%
-no-unexpected-multiline           |    40.934 |     1.9%
-no-fallthrough                    |    40.545 |     1.9%
-@typescript-eslint/ban-ts-comment |    37.277 |     1.8%
-no-regex-spaces                   |    35.268 |     1.7%
-no-misleading-character-class     |    28.595 |     1.4%
+Rule                                     | Time (ms) | Relative
+:----------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars        |  2115.502 |    60.0%
+react-hooks/rules-of-hooks               |   141.299 |     4.0%
+no-global-assign                         |   128.266 |     3.6%
+react-hooks/exhaustive-deps              |   107.897 |     3.1%
+no-misleading-character-class            |    72.815 |     2.1%
+@typescript-eslint/ban-ts-comment        |    70.843 |     2.0%
+no-loss-of-precision                     |    55.192 |     1.6%
+no-unexpected-multiline                  |    52.206 |     1.5%
+no-regex-spaces                          |    50.033 |     1.4%
+@typescript-eslint/no-unused-expressions |    49.226 |     1.4%

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.32.4
+
+### Patch Changes
+
+- [#1222](https://github.com/utilitywarehouse/hearth/pull/1222) [`3f35a43`](https://github.com/utilitywarehouse/hearth/commit/3f35a431ba4a0fae45cc640a62ea6cb53f85c384) Thanks [@Utakato](https://github.com/Utakato)! - 🌟 [FEATURE]: `Rating` component `emojis` variant
+
+  The `Rating` component now supports an `emojis` variant that renders emoji faces
+  instead of stars. When selected, the chosen emoji appears larger whilst
+  unselected emojis become grayscale. Two static labels ("Very dissatisfied" /
+  "Very satisfied") are displayed at the extremes.
+
+  **Components affected**:
+  - `Rating`
+
+  **Developer changes**:
+
+  ```tsx
+  import { Rating } from '@utilitywarehouse/hearth-react-native';
+
+  <Rating value={rating} onChange={setRating} variant="emojis" />;
+  ```
+
+  All existing props (`value`, `defaultValue`, `onChange`, `disabled`, `hideLabel`)
+  work with the emoji variant. The new `rangeLabels` prop allows overriding the
+  endpoint labels (defaulting to "Very dissatisfied" / "Very satisfied"):
+
+  ```tsx
+  <Rating variant="emojis" rangeLabels={{ low: 'Not at all', high: 'Absolutely' }} />
+  ```
+
 ## 0.32.3
 
 ### Patch Changes

package/build/components/Button/Button.d.ts

@@ -1,15 +1,15 @@
 import type { ButtonProps } from './Button.props';
-export declare const ButtonText: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native/types").TextProps> & import("react-native/types").TextProps>;
+export declare const ButtonText: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").TextProps> & import("react-native").TextProps>;
 export declare const ButtonSpinner: import("react").ForwardRefExoticComponent<Omit<Omit<import("..").SpinnerProps, "size">, "ref"> & import("react").RefAttributes<Omit<import("..").SpinnerProps, "size">>>;
 export declare const ButtonIcon: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("..").IconProps> & import("..").IconProps>;
-export declare const ButtonGroupComponent: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native/types").ViewProps & {
-    flexDirection?: import("react-native/types").ViewStyle["flexDirection"];
+export declare const ButtonGroupComponent: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").ViewProps & {
+    flexDirection?: import("react-native").ViewStyle["flexDirection"];
     reversed?: boolean;
     attached?: boolean;
     space?: import("../../types").SpacingValues;
     spacing?: import("../../types").SpacingValues;
-}> & import("react-native/types").ViewProps & {
-    flexDirection?: import("react-native/types").ViewStyle["flexDirection"];
+}> & import("react-native").ViewProps & {
+    flexDirection?: import("react-native").ViewStyle["flexDirection"];
     reversed?: boolean;
     attached?: boolean;
     space?: import("../../types").SpacingValues;

package/build/components/Carousel/CarouselControlItem.d.ts

@@ -10,7 +10,7 @@ declare const CarouselControlItem: import("react").ForwardRefExoticComponent<Car
         active?: boolean;
         disabled?: boolean;
     };
-} & Omit<import("react-native/types").PressableProps, "children"> & {
+} & Omit<import("react-native").PressableProps, "children"> & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {

package/build/components/FormField/FormField.d.ts

@@ -1,6 +1,6 @@
 import { View } from 'react-native';
 import FormFieldProps from './FormField.props';
-export declare const FormFieldComponent: import("@gluestack-ui/form-control/lib/types").IFormControlComponentType<import("react-native/types").ViewProps, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("..").IconProps, "as">, unknown, Omit<import("../Label/Label.props").default, "disabled">, unknown, Omit<import("../Helper/Helper.props").default, "validationStatus">, import("../BodyText").BodyTextProps>;
+export declare const FormFieldComponent: import("@gluestack-ui/form-control/lib/types").IFormControlComponentType<import("react-native").ViewProps, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("..").IconProps, "as">, unknown, Omit<import("../Label/Label.props").default, "disabled">, unknown, Omit<import("../Helper/Helper.props").default, "validationStatus">, import("../BodyText").BodyTextProps>;
 export declare const FormFieldLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>> & {
     Text: import("react").ForwardRefExoticComponent<Omit<Omit<import("../Label/Label.props").default, "disabled">, "ref"> & import("react").RefAttributes<Omit<import("../Label/Label.props").default, "disabled">>>;
 };

package/build/components/Input/Input.d.ts

@@ -9,13 +9,13 @@ export declare const InputComponent: import("@gluestack-ui/input/lib/typescript/
     };
 }, import("..").IconProps & {
     as?: ComponentType;
-}, import("react-native/types").ViewProps, import("react-native/types").TextInputProps & {
+}, import("react-native").ViewProps, import("react-native").TextInputProps & {
     inBottomSheet?: boolean;
 } & import("react").RefAttributes<TextInput>>;
-export declare const InputSlot: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native/types").ViewProps> & import("react-native/types").ViewProps & import("@gluestack-ui/input/lib/typescript/types").IInputSlotProps>;
-export declare const InputField: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native/types").TextInputProps & {
+export declare const InputSlot: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").ViewProps> & import("react-native").ViewProps & import("@gluestack-ui/input/lib/typescript/types").IInputSlotProps>;
+export declare const InputField: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").TextInputProps & {
     inBottomSheet?: boolean;
-} & import("react").RefAttributes<TextInput>> & Omit<import("react-native/types").TextInputProps & {
+} & import("react").RefAttributes<TextInput>> & Omit<import("react-native").TextInputProps & {
     inBottomSheet?: boolean;
 } & import("react").RefAttributes<TextInput>, "ref"> & import("@gluestack-ui/input/lib/typescript/types").IInputProps>;
 export declare const InputIcon: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("..").IconProps & {

package/build/components/List/ListAction/ListAction.d.ts

@@ -4,7 +4,7 @@ declare const ListAction: import("react").ForwardRefExoticComponent<ListActionPr
         active?: boolean;
         disabled?: boolean;
     };
-} & Omit<import("react-native/types").PressableProps, "children"> & {
+} & Omit<import("react-native").PressableProps, "children"> & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {

package/build/components/Menu/MenuItem.d.ts

@@ -4,7 +4,7 @@ declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps
         active?: boolean;
         disabled?: boolean;
     };
-} & Omit<import("react-native/types").PressableProps, "children"> & {
+} & Omit<import("react-native").PressableProps, "children"> & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {

package/build/components/PillGroup/Pill.d.ts

@@ -3,7 +3,7 @@ export declare const Pill: import("react").ForwardRefExoticComponent<PillProps &
     states?: {
         active?: boolean;
     };
-} & Omit<import("react-native/types").PressableProps, "children"> & {
+} & Omit<import("react-native").PressableProps, "children"> & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {

package/build/components/RadioCard/RadioCard.d.ts

@@ -5,25 +5,25 @@ declare const RadioCardGroup: import("react").ForwardRefExoticComponent<import("
     onChange?: (value: string) => void;
     gap?: keyof typeof import("../../tokens").space;
     ref?: import("react").Ref<View>;
-} & import("react-native/types").ViewProps & {
+} & import("react-native").ViewProps & {
     columns?: never;
-    flexDirection?: import("react-native/types").ViewStyle["flexDirection"];
-    flexWrap?: import("react-native/types").ViewStyle["flexWrap"];
-    alignItems?: import("react-native/types").ViewStyle["alignItems"];
-    justifyContent?: import("react-native/types").ViewStyle["justifyContent"];
+    flexDirection?: import("react-native").ViewStyle["flexDirection"];
+    flexWrap?: import("react-native").ViewStyle["flexWrap"];
+    alignItems?: import("react-native").ViewStyle["alignItems"];
+    justifyContent?: import("react-native").ViewStyle["justifyContent"];
 }, "ref"> | Omit<{
     value?: string;
     onChange?: (value: string) => void;
     gap?: keyof typeof import("../../tokens").space;
     ref?: import("react").Ref<View>;
-} & import("react-native/types").ViewProps & {
+} & import("react-native").ViewProps & {
     columns: import("..").GridProps["columns"];
     flexDirection?: never;
     flexWrap?: never;
     alignItems?: never;
     justifyContent?: never;
 }, "ref">) & import("@gluestack-ui/radio/lib/typescript/types").IRadioGroupProps)>;
-declare const RadioCardIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native/types").ViewProps> & import("react-native/types").ViewProps>;
+declare const RadioCardIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").ViewProps> & import("react-native").ViewProps>;
 declare const RadioCardIcon: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("..").IconProps> & import("..").IconProps & {
     forceMount?: boolean;
 }>;

package/build/components/Rating/Rating.d.ts

@@ -1,6 +1,6 @@
 import type RatingProps from './Rating.props';
 declare const Rating: {
-    ({ value, defaultValue, onChange, disabled, labels, hideLabel, style, accessibilityLabel, ...props }: RatingProps): import("react/jsx-runtime").JSX.Element;
+    ({ variant, value, defaultValue, onChange, disabled, labels, rangeLabels, hideLabel, style, accessibilityLabel, ...props }: RatingProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Rating;

package/build/components/Rating/Rating.js

@@ -3,12 +3,21 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
+import { getEmojiSvg } from './RatingEmoji';
 import RatingStarEmpty from './RatingStarEmpty';
 import RatingStarFilled from './RatingStarFilled';
+import { EMOJI_LIST } from './Rating.utils';
 const MAX_RATING = 5;
 const STAR_WIDTH = 32;
 const STAR_HEIGHT = 30;
 const STAR_CONTAINER_SIZE = 40;
+const EMOJI_SIZE_DEFAULT = 32;
+const EMOJI_SIZE_SELECTED = 40;
+const EMOJI_CONTAINER_SIZE = 44;
+const DEFAULT_RANGE_LABELS = {
+    low: EMOJI_LIST[0].accessibilityLabel,
+    high: EMOJI_LIST[EMOJI_LIST.length - 1].accessibilityLabel,
+};
 const DEFAULT_LABELS = {
     0: 'Select a rating',
     1: 'Awful',
@@ -18,7 +27,7 @@ const DEFAULT_LABELS = {
     5: 'Great!',
 };
 const clampRating = (value) => Math.min(MAX_RATING, Math.max(0, Math.round(value)));
-const Rating = ({ value, defaultValue = 0, onChange, disabled = false, labels, hideLabel = false, style, accessibilityLabel, ...props }) => {
+const Rating = ({ variant = 'stars', value, defaultValue = 0, onChange, disabled = false, labels, rangeLabels = DEFAULT_RANGE_LABELS, hideLabel = false, style, accessibilityLabel, ...props }) => {
     const isControlled = value !== undefined;
     const [internalValue, setInternalValue] = useState(clampRating(defaultValue));
     useEffect(() => {
@@ -39,11 +48,22 @@ const Rating = ({ value, defaultValue = 0, onChange, disabled = false, labels, h
         onChange?.(nextValue);
     }, [disabled, isControlled, onChange]);
     styles.useVariants({ disabled });
-    return (_jsxs(View, { ...props, accessibilityRole: "radiogroup", accessibilityState: { disabled }, accessibilityLabel: accessibilityLabel ?? currentLabel, style: [styles.container, style], children: [_jsx(View, { style: styles.stars, children: [1, 2, 3, 4, 5].map(starValue => {
-                    const isFilled = starValue <= resolvedValue;
-                    const starLabel = resolvedLabels[starValue] ?? DEFAULT_LABELS[starValue];
-                    return (_jsx(Pressable, { accessibilityRole: "radio", accessibilityState: { selected: resolvedValue === starValue, disabled }, accessibilityLabel: `Rate ${starLabel}`, disabled: disabled, hitSlop: 8, onPress: () => handlePress(starValue), style: styles.star, children: isFilled ? (_jsx(RatingStarFilled, { width: STAR_WIDTH, height: STAR_HEIGHT })) : (_jsx(RatingStarEmpty, { width: STAR_WIDTH, height: STAR_HEIGHT })) }, starValue));
-                }) }), !hideLabel ? (_jsx(BodyText, { size: "md", color: labelColor, style: styles.label, children: currentLabel })) : null] }));
+    const isEmojis = variant === 'emojis';
+    const hasSelection = resolvedValue > 0;
+    const startLabel = rangeLabels.low;
+    const endLabel = rangeLabels.high;
+    return (_jsxs(View, { ...props, accessibilityRole: "radiogroup", accessibilityState: { disabled }, accessibilityLabel: accessibilityLabel ?? (isEmojis ? 'Rate your experience' : currentLabel), style: [styles.container, style], children: [_jsx(View, { style: styles.items, children: isEmojis
+                    ? EMOJI_LIST.map(entry => {
+                        const isSelected = resolvedValue === entry.value;
+                        const size = isSelected ? EMOJI_SIZE_SELECTED : EMOJI_SIZE_DEFAULT;
+                        const EmojiSvg = getEmojiSvg(entry.value, hasSelection && !isSelected);
+                        return (_jsx(Pressable, { accessibilityRole: "radio", accessibilityState: { selected: isSelected, disabled }, accessibilityLabel: `Rate ${entry.accessibilityLabel}`, disabled: disabled, hitSlop: 8, onPress: () => handlePress(entry.value), style: styles.emojiItem, children: _jsx(EmojiSvg, { width: size, height: size }) }, entry.value));
+                    })
+                    : [1, 2, 3, 4, 5].map(starValue => {
+                        const isFilled = starValue <= resolvedValue;
+                        const starLabel = resolvedLabels[starValue] ?? DEFAULT_LABELS[starValue];
+                        return (_jsx(Pressable, { accessibilityRole: "radio", accessibilityState: { selected: resolvedValue === starValue, disabled }, accessibilityLabel: `Rate ${starLabel}`, disabled: disabled, hitSlop: 8, onPress: () => handlePress(starValue), style: styles.starItem, children: isFilled ? (_jsx(RatingStarFilled, { width: STAR_WIDTH, height: STAR_HEIGHT })) : (_jsx(RatingStarEmpty, { width: STAR_WIDTH, height: STAR_HEIGHT })) }, starValue));
+                    }) }), isEmojis ? (!hideLabel ? (_jsxs(View, { style: styles.emojiLabels, children: [_jsx(BodyText, { size: "md", color: "secondary", children: startLabel }), _jsx(BodyText, { size: "md", color: "secondary", children: endLabel })] })) : null) : !hideLabel ? (_jsx(BodyText, { size: "md", color: labelColor, style: styles.label, children: currentLabel })) : null] }));
 };
 Rating.displayName = 'Rating';
 const styles = StyleSheet.create(theme => ({
@@ -58,19 +78,31 @@ const styles = StyleSheet.create(theme => ({
             },
         },
     },
-    stars: {
+    items: {
         flexDirection: 'row',
         gap: theme.components.rating.gap,
     },
-    star: {
+    starItem: {
         width: STAR_CONTAINER_SIZE,
         height: STAR_CONTAINER_SIZE,
         alignItems: 'center',
         justifyContent: 'center',
         padding: theme.components.rating.borderWidth,
     },
+    emojiItem: {
+        width: EMOJI_CONTAINER_SIZE,
+        height: EMOJI_CONTAINER_SIZE,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: theme.components.rating.borderWidth,
+    },
     label: {
         textAlign: 'center',
     },
+    emojiLabels: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        width: '100%',
+    },
 }));
 export default Rating;

package/build/components/Rating/Rating.props.d.ts

@@ -1,18 +1,26 @@
 import type { ViewProps } from 'react-native';
 export type RatingValue = 0 | 1 | 2 | 3 | 4 | 5;
 export type RatingLabels = Partial<Record<RatingValue, string>>;
+export type RatingVariant = 'stars' | 'emojis';
 export interface RatingProps extends Omit<ViewProps, 'children'> {
+    /** Visual variant for the rating indicators. */
+    variant?: RatingVariant;
     /** Current rating value. */
     value?: RatingValue;
     /** Initial rating value when uncontrolled. */
     defaultValue?: RatingValue;
-    /** Called when a star is selected. */
+    /** Called when a rating is selected. */
     onChange?: (value: RatingValue) => void;
     /** Disables the rating input. */
     disabled?: boolean;
     /** Override labels for specific rating values. */
     labels?: RatingLabels;
-    /** Hide the label text below the stars. */
+    /** Override the low and high end labels shown below the emoji variant. */
+    rangeLabels?: {
+        low: string;
+        high: string;
+    };
+    /** Hide the label text below the rating. */
     hideLabel?: boolean;
 }
 export default RatingProps;

package/build/components/Rating/Rating.utils.d.ts

@@ -0,0 +1,6 @@
+import type { RatingValue } from './Rating.props';
+export interface EmojiEntry {
+    value: Exclude<RatingValue, 0>;
+    accessibilityLabel: string;
+}
+export declare const EMOJI_LIST: EmojiEntry[];

package/build/components/Rating/Rating.utils.js

@@ -0,0 +1,7 @@
+export const EMOJI_LIST = [
+    { value: 1, accessibilityLabel: 'Very dissatisfied' },
+    { value: 2, accessibilityLabel: 'Dissatisfied' },
+    { value: 3, accessibilityLabel: 'Neutral' },
+    { value: 4, accessibilityLabel: 'Satisfied' },
+    { value: 5, accessibilityLabel: 'Very satisfied' },
+];

package/build/components/Rating/Rating.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/components/Rating/Rating.utils.test.js

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest';
+import { EMOJI_LIST } from './Rating.utils';
+describe('EMOJI_LIST', () => {
+    it('has exactly 5 emojis mapped to values 1-5', () => {
+        expect(EMOJI_LIST).toHaveLength(5);
+        expect(EMOJI_LIST.map(e => e.value)).toEqual([1, 2, 3, 4, 5]);
+    });
+    it('each entry has an accessibility label', () => {
+        for (const entry of EMOJI_LIST) {
+            expect(entry.accessibilityLabel).toBeTruthy();
+        }
+    });
+});

package/build/components/Rating/RatingEmoji.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import type { SvgProps } from 'react-native-svg';
+export declare const getEmojiSvg: (value: 1 | 2 | 3 | 4 | 5, grayscale: boolean) => FC<SvgProps>;

package/build/components/Rating/RatingEmoji.js

@@ -0,0 +1,21 @@
+import BeamingFace from '@utilitywarehouse/hearth-svg-assets/lib/beaming-face.svg';
+import BeamingFaceGrey from '@utilitywarehouse/hearth-svg-assets/lib/beaming-face-grey.svg';
+import DissapointedFace from '@utilitywarehouse/hearth-svg-assets/lib/dissapointed-face.svg';
+import DissapointedFaceGrey from '@utilitywarehouse/hearth-svg-assets/lib/dissapointed-face-grey.svg';
+import FrowningFace from '@utilitywarehouse/hearth-svg-assets/lib/frowning-face.svg';
+import FrowningFaceGrey from '@utilitywarehouse/hearth-svg-assets/lib/frowning-face-grey.svg';
+import NeutralFace from '@utilitywarehouse/hearth-svg-assets/lib/neutral-face.svg';
+import NeutralFaceGrey from '@utilitywarehouse/hearth-svg-assets/lib/neutral-face-grey.svg';
+import SlightlySmilingFace from '@utilitywarehouse/hearth-svg-assets/lib/slightly-smiling-face.svg';
+import SlightlySmilingFaceGrey from '@utilitywarehouse/hearth-svg-assets/lib/slightly-smiling-face-grey.svg';
+const EMOJI_ASSETS = {
+    1: { color: DissapointedFace, grey: DissapointedFaceGrey },
+    2: { color: FrowningFace, grey: FrowningFaceGrey },
+    3: { color: NeutralFace, grey: NeutralFaceGrey },
+    4: { color: SlightlySmilingFace, grey: SlightlySmilingFaceGrey },
+    5: { color: BeamingFace, grey: BeamingFaceGrey },
+};
+export const getEmojiSvg = (value, grayscale) => {
+    const assets = EMOJI_ASSETS[value];
+    return grayscale ? assets.grey : assets.color;
+};

package/build/components/Rating/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Rating } from './Rating';
-export type { RatingLabels, RatingProps, RatingValue } from './Rating.props';
+export type { RatingLabels, RatingProps, RatingValue, RatingVariant } from './Rating.props';

package/build/components/SegmentedControl/SegmentedControlOption.d.ts

@@ -4,7 +4,7 @@ declare const SegmentedControlOption: import("react").ForwardRefExoticComponent<
         active?: boolean;
         disabled?: boolean;
     };
-} & Omit<import("react-native/types").PressableProps, "children"> & {
+} & Omit<import("react-native").PressableProps, "children"> & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {

package/build/components/Tabs/Tab.d.ts

@@ -4,7 +4,7 @@ declare const PressableTab: import("react").ForwardRefExoticComponent<TabProps &
         active?: boolean;
         disabled?: boolean;
     };
-} & Omit<import("react-native/types").PressableProps, "children"> & {
+} & Omit<import("react-native").PressableProps, "children"> & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {

package/build/components/Textarea/Textarea.d.ts

@@ -5,7 +5,7 @@ export declare const TextareaComponent: import("@gluestack-ui/textarea/lib/types
         disabled?: boolean;
         readonly?: boolean;
     };
-}, import("react-native/types").TextInputProps>;
-export declare const TextareaField: import("react").ForwardRefExoticComponent<import("react-native/types").TextInputProps & import("react").RefAttributes<import("react-native/types").TextInputProps> & import("@gluestack-ui/textarea/lib/typescript/types").IInputProps>;
+}, import("react-native").TextInputProps>;
+export declare const TextareaField: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & import("react").RefAttributes<import("react-native").TextInputProps> & import("@gluestack-ui/textarea/lib/typescript/types").IInputProps>;
 declare const Textarea: ({ validationStatus, children, resizable, defaultHeight, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, onLayout, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
 export default Textarea;

package/docs/changelog.mdx

@@ -9,6 +9,36 @@ import { BackToTopButton, NextPrevPage } from './components';
 The changelog for the Hearth React Native library. Here you can find all the changes, improvements, and bug fixes for each version.
 
 
+## 0.32.4
+
+### Patch Changes
+
+- [#1222](https://github.com/utilitywarehouse/hearth/pull/1222) [`3f35a43`](https://github.com/utilitywarehouse/hearth/commit/3f35a431ba4a0fae45cc640a62ea6cb53f85c384) Thanks [@Utakato](https://github.com/Utakato)! - 🌟 [FEATURE]: `Rating` component `emojis` variant
+
+  The `Rating` component now supports an `emojis` variant that renders emoji faces
+  instead of stars. When selected, the chosen emoji appears larger whilst
+  unselected emojis become grayscale. Two static labels ("Very dissatisfied" /
+  "Very satisfied") are displayed at the extremes.
+
+  **Components affected**:
+  - `Rating`
+
+  **Developer changes**:
+
+  ```tsx
+  import { Rating } from '@utilitywarehouse/hearth-react-native';
+
+  <Rating value={rating} onChange={setRating} variant="emojis" />;
+  ```
+
+  All existing props (`value`, `defaultValue`, `onChange`, `disabled`, `hideLabel`)
+  work with the emoji variant. The new `rangeLabels` prop allows overriding the
+  endpoint labels (defaulting to "Very dissatisfied" / "Very satisfied"):
+
+  ```tsx
+  <Rating variant="emojis" rangeLabels={{ low: 'Not at all', high: 'Absolutely' }} />
+  ```
+
 ## 0.32.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.32.3",
+  "version": "0.32.4",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -9,10 +9,10 @@
   "sideEffects": false,
   "dependencies": {
     "@gluestack-ui/accordion": "1.0.7",
-    "@gluestack-ui/form-control": "0.1.19",
     "@gluestack-ui/alert": "0.1.15",
     "@gluestack-ui/button": "1.0.7",
     "@gluestack-ui/checkbox": "0.1.32",
+    "@gluestack-ui/form-control": "0.1.19",
     "@gluestack-ui/icon": "0.1.22",
     "@gluestack-ui/input": "0.1.31",
     "@gluestack-ui/link": "0.1.22",
@@ -30,6 +30,7 @@
     "@chromatic-com/storybook": "^4.1.3",
     "@figma/code-connect": "^1.3.12",
     "@gorhom/bottom-sheet": "5.2.6",
+    "@react-stately/utils": "^3.12.0",
     "@storybook/addon-a11y": "^10.2.1",
     "@storybook/addon-docs": "^10.2.1",
     "@storybook/addon-vitest": "^10.2.1",
@@ -42,7 +43,7 @@
     "@vitest/coverage-v8": "^3.2.4",
     "chromatic": "^13.3.0",
     "globals": "^15.15.0",
-    "playwright": "^1.55.1",
+    "playwright": "^1.59.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -63,9 +64,9 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.8.1",
+    "@utilitywarehouse/hearth-react-icons": "^0.8.2",
     "@utilitywarehouse/hearth-react-native-icons": "^0.8.1",
-    "@utilitywarehouse/hearth-svg-assets": "^0.6.1",
+    "@utilitywarehouse/hearth-svg-assets": "^0.6.2",
     "@utilitywarehouse/hearth-tokens": "^0.2.4"
   },
   "peerDependencies": {
@@ -93,10 +94,10 @@
     "figma:publish": "figma connect publish",
     "test": "vitest run --config vitest.unit.config.ts",
     "test:storybook": "vitest run --project storybook",
-    "dev": "npm run copy:changelog && storybook dev -p 6006",
+    "dev": "storybook dev -p 6006",
     "dev:docs": "storybook dev -p 6002 --no-open",
-    "build:storybook": "npm run copy:changelog && storybook build",
-    "build:storybook:docs": "npm run copy:changelog && storybook build --docs",
+    "build:storybook": "storybook build",
+    "build:storybook:docs": "storybook build --docs",
     "chromatic": "npx chromatic --project-token=chpt_cce0fb1ebd95d2a --build-script-name build:storybook"
   }
 }

package/src/components/Rating/Rating.docs.mdx

@@ -11,12 +11,13 @@ import * as Stories from './Rating.stories';
 
 # Rating
 
-Use Rating to collect a star-based score with an optional descriptive label.
+Use Rating to collect a score with an optional descriptive label. Supports star and emoji variants.
 
 - [Playground](#playground)
 - [Usage](#usage)
 - [Props](#props)
 - [Examples](#examples)
+- [Emoji variant](#emoji-variant)
 - [Accessibility](#accessibility)
 
 ## Playground
@@ -52,10 +53,12 @@ const MyComponent = () => {
 | -------------- | -------------------------------------- | ------------------------------------------- | ----------- |
 | `value`        | `0 \| 1 \| 2 \| 3 \| 4 \| 5`           | Current rating value.                       | `0`         |
 | `defaultValue` | `0 \| 1 \| 2 \| 3 \| 4 \| 5`           | Initial rating value when uncontrolled.     | `0`         |
-| `onChange`     | `(value: RatingValue) => void`         | Called when a star is selected.             | `undefined` |
+| `onChange`     | `(value: RatingValue) => void`         | Called when a rating is selected.           | `undefined` |
 | `disabled`     | `boolean`                              | Disables the rating input.                  | `false`     |
 | `labels`       | `Partial<Record<RatingValue, string>>` | Override labels for specific rating values. | `undefined` |
-| `hideLabel`    | `boolean`                              | Hide the label text below the stars.        | `false`     |
+| `rangeLabels`  | `{ low: string; high: string }`        | Override the low and high end labels shown below the emoji variant. | `{ low: 'Very dissatisfied', high: 'Very satisfied' }` |
+| `hideLabel`    | `boolean`                              | Hide the label text below the rating.       | `false`     |
+| `variant`      | `'stars' \| 'emojis'`                  | Visual variant for the rating indicators. | `'stars'` |
 
 ## Examples
 
@@ -171,8 +174,44 @@ import { Rating } from '@utilitywarehouse/hearth-react-native';
 const MyComponent = () => <Rating value={4} disabled />;
 ```
 
+### Emoji variant
+
+Use `variant="emojis"` to show emoji faces instead of stars. Labels default to "Very dissatisfied" and "Very satisfied" at the extremes. Override them with `rangeLabels={{ low: 'Custom low', high: 'Custom high' }}`.
+
+<UsageWrap>
+  <Center>
+    <Box>
+      <Rating value={4} variant="emojis" />
+    </Box>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Rating } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => <Rating value={4} variant="emojis" />;
+```
+
+### Emoji variant (no selection)
+
+When no emoji is selected, all emojis display at normal size with full colour.
+
+<UsageWrap>
+  <Center>
+    <Box>
+      <Rating value={0} variant="emojis" />
+    </Box>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Rating } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => <Rating value={0} variant="emojis" />;
+```
+
 ## Accessibility
 
-- Rating uses a `radiogroup` container with `radio` items for each star.
-- Each star announces a descriptive label (e.g., "Rate Okay"). Override labels with the `labels` prop to match your content.
+- Rating uses a `radiogroup` container with `radio` items for each star or emoji.
+- Each star announces a descriptive label (e.g., "Rate Okay"). Each emoji announces its sentiment (e.g., "Rate Neutral"). Override labels with the `labels` prop to match your content.
 - Provide `accessibilityLabel` when the default label text is not sufficient for your screen reader context.

package/src/components/Rating/Rating.figma.tsx

@@ -18,3 +18,22 @@ figma.connect(
     example: props => <Rating value={props.value} />,
   }
 );
+
+figma.connect(
+  Rating,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10620-4185',
+  {
+    variant: { Variant: 'Emojis' },
+    props: {
+      value: figma.enum('Rating', {
+        '0 Star': 0,
+        '1 Star': 1,
+        '2 Star': 2,
+        '3 Star': 3,
+        '4 Star': 4,
+        '5 Star': 5,
+      }),
+    },
+    example: props => <Rating value={props.value} variant="emojis" />,
+  }
+);

package/src/components/Rating/Rating.props.ts

@@ -4,18 +4,24 @@ export type RatingValue = 0 | 1 | 2 | 3 | 4 | 5;
 
 export type RatingLabels = Partial<Record<RatingValue, string>>;
 
+export type RatingVariant = 'stars' | 'emojis';
+
 export interface RatingProps extends Omit<ViewProps, 'children'> {
+  /** Visual variant for the rating indicators. */
+  variant?: RatingVariant;
   /** Current rating value. */
   value?: RatingValue;
   /** Initial rating value when uncontrolled. */
   defaultValue?: RatingValue;
-  /** Called when a star is selected. */
+  /** Called when a rating is selected. */
   onChange?: (value: RatingValue) => void;
   /** Disables the rating input. */
   disabled?: boolean;
   /** Override labels for specific rating values. */
   labels?: RatingLabels;
-  /** Hide the label text below the stars. */
+  /** Override the low and high end labels shown below the emoji variant. */
+  rangeLabels?: { low: string; high: string };
+  /** Hide the label text below the rating. */
   hideLabel?: boolean;
 }
 

package/src/components/Rating/Rating.stories.tsx

@@ -23,17 +23,25 @@ const meta = {
     labels: {
       control: 'object',
     },
+    rangeLabels: {
+      control: 'object',
+    },
     hideLabel: {
       control: 'boolean',
     },
     disabled: {
       control: 'boolean',
     },
+    variant: {
+      options: ['stars', 'emojis'],
+      control: 'radio',
+    },
   },
   args: {
     value: 3,
     hideLabel: false,
     disabled: false,
+    variant: 'stars',
   },
 } satisfies Meta<typeof Rating>;
 
@@ -90,6 +98,15 @@ export const Variants: Story = {
       <VariantTitle title="Disabled">
         <Rating value={5} disabled />
       </VariantTitle>
+      <VariantTitle title="Emojis">
+        <Rating value={4} variant="emojis" />
+      </VariantTitle>
+      <VariantTitle title="Emojis (No Selection)">
+        <Rating value={0} variant="emojis" />
+      </VariantTitle>
+      <VariantTitle title="Emojis (Disabled)">
+        <Rating value={3} variant="emojis" disabled />
+      </VariantTitle>
     </Box>
   ),
 };

package/src/components/Rating/Rating.tsx

@@ -4,13 +4,23 @@ import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import type RatingProps from './Rating.props';
 import type { RatingLabels, RatingValue } from './Rating.props';
+import { getEmojiSvg } from './RatingEmoji';
 import RatingStarEmpty from './RatingStarEmpty';
 import RatingStarFilled from './RatingStarFilled';
+import { EMOJI_LIST } from './Rating.utils';
 
 const MAX_RATING: RatingValue = 5;
 const STAR_WIDTH = 32;
 const STAR_HEIGHT = 30;
 const STAR_CONTAINER_SIZE = 40;
+const EMOJI_SIZE_DEFAULT = 32;
+const EMOJI_SIZE_SELECTED = 40;
+const EMOJI_CONTAINER_SIZE = 44;
+
+const DEFAULT_RANGE_LABELS = {
+  low: EMOJI_LIST[0].accessibilityLabel,
+  high: EMOJI_LIST[EMOJI_LIST.length - 1].accessibilityLabel,
+};
 
 const DEFAULT_LABELS: Record<RatingValue, string> = {
   0: 'Select a rating',
@@ -25,11 +35,13 @@ const clampRating = (value: number) =>
   Math.min(MAX_RATING, Math.max(0, Math.round(value))) as RatingValue;
 
 const Rating = ({
+  variant = 'stars',
   value,
   defaultValue = 0,
   onChange,
   disabled = false,
   labels,
+  rangeLabels = DEFAULT_RANGE_LABELS,
   hideLabel = false,
   style,
   accessibilityLabel,
@@ -65,40 +77,74 @@ const Rating = ({
 
   styles.useVariants({ disabled });
 
+  const isEmojis = variant === 'emojis';
+  const hasSelection = resolvedValue > 0;
+
+  const startLabel = rangeLabels.low;
+  const endLabel = rangeLabels.high;
+
   return (
     <View
       {...props}
       accessibilityRole="radiogroup"
       accessibilityState={{ disabled }}
-      accessibilityLabel={accessibilityLabel ?? currentLabel}
+      accessibilityLabel={accessibilityLabel ?? (isEmojis ? 'Rate your experience' : currentLabel)}
       style={[styles.container, style]}
     >
-      <View style={styles.stars}>
-        {([1, 2, 3, 4, 5] as RatingValue[]).map(starValue => {
-          const isFilled = starValue <= resolvedValue;
-          const starLabel = resolvedLabels[starValue] ?? DEFAULT_LABELS[starValue];
-
-          return (
-            <Pressable
-              key={starValue}
-              accessibilityRole="radio"
-              accessibilityState={{ selected: resolvedValue === starValue, disabled }}
-              accessibilityLabel={`Rate ${starLabel}`}
-              disabled={disabled}
-              hitSlop={8}
-              onPress={() => handlePress(starValue)}
-              style={styles.star}
-            >
-              {isFilled ? (
-                <RatingStarFilled width={STAR_WIDTH} height={STAR_HEIGHT} />
-              ) : (
-                <RatingStarEmpty width={STAR_WIDTH} height={STAR_HEIGHT} />
-              )}
-            </Pressable>
-          );
-        })}
+      <View style={styles.items}>
+        {isEmojis
+          ? EMOJI_LIST.map(entry => {
+              const isSelected = resolvedValue === entry.value;
+              const size = isSelected ? EMOJI_SIZE_SELECTED : EMOJI_SIZE_DEFAULT;
+              const EmojiSvg = getEmojiSvg(entry.value, hasSelection && !isSelected);
+
+              return (
+                <Pressable
+                  key={entry.value}
+                  accessibilityRole="radio"
+                  accessibilityState={{ selected: isSelected, disabled }}
+                  accessibilityLabel={`Rate ${entry.accessibilityLabel}`}
+                  disabled={disabled}
+                  hitSlop={8}
+                  onPress={() => handlePress(entry.value)}
+                  style={styles.emojiItem}
+                >
+                  <EmojiSvg width={size} height={size} />
+                </Pressable>
+              );
+            })
+          : ([1, 2, 3, 4, 5] as RatingValue[]).map(starValue => {
+              const isFilled = starValue <= resolvedValue;
+              const starLabel = resolvedLabels[starValue] ?? DEFAULT_LABELS[starValue];
+
+              return (
+                <Pressable
+                  key={starValue}
+                  accessibilityRole="radio"
+                  accessibilityState={{ selected: resolvedValue === starValue, disabled }}
+                  accessibilityLabel={`Rate ${starLabel}`}
+                  disabled={disabled}
+                  hitSlop={8}
+                  onPress={() => handlePress(starValue)}
+                  style={styles.starItem}
+                >
+                  {isFilled ? (
+                    <RatingStarFilled width={STAR_WIDTH} height={STAR_HEIGHT} />
+                  ) : (
+                    <RatingStarEmpty width={STAR_WIDTH} height={STAR_HEIGHT} />
+                  )}
+                </Pressable>
+              );
+            })}
       </View>
-      {!hideLabel ? (
+      {isEmojis ? (
+        !hideLabel ? (
+          <View style={styles.emojiLabels}>
+            <BodyText size="md" color="secondary">{startLabel}</BodyText>
+            <BodyText size="md" color="secondary">{endLabel}</BodyText>
+          </View>
+        ) : null
+      ) : !hideLabel ? (
         <BodyText size="md" color={labelColor} style={styles.label}>
           {currentLabel}
         </BodyText>
@@ -121,20 +167,32 @@ const styles = StyleSheet.create(theme => ({
       },
     },
   },
-  stars: {
+  items: {
     flexDirection: 'row',
     gap: theme.components.rating.gap,
   },
-  star: {
+  starItem: {
     width: STAR_CONTAINER_SIZE,
     height: STAR_CONTAINER_SIZE,
     alignItems: 'center',
     justifyContent: 'center',
     padding: theme.components.rating.borderWidth,
   },
+  emojiItem: {
+    width: EMOJI_CONTAINER_SIZE,
+    height: EMOJI_CONTAINER_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: theme.components.rating.borderWidth,
+  },
   label: {
     textAlign: 'center',
   },
+  emojiLabels: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
 }));
 
 export default Rating;

package/src/components/Rating/Rating.utils.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest';
+import { EMOJI_LIST } from './Rating.utils';
+
+describe('EMOJI_LIST', () => {
+  it('has exactly 5 emojis mapped to values 1-5', () => {
+    expect(EMOJI_LIST).toHaveLength(5);
+    expect(EMOJI_LIST.map(e => e.value)).toEqual([1, 2, 3, 4, 5]);
+  });
+
+  it('each entry has an accessibility label', () => {
+    for (const entry of EMOJI_LIST) {
+      expect(entry.accessibilityLabel).toBeTruthy();
+    }
+  });
+});

package/src/components/Rating/Rating.utils.ts

@@ -0,0 +1,14 @@
+import type { RatingValue } from './Rating.props';
+
+export interface EmojiEntry {
+  value: Exclude<RatingValue, 0>;
+  accessibilityLabel: string;
+}
+
+export const EMOJI_LIST: EmojiEntry[] = [
+  { value: 1, accessibilityLabel: 'Very dissatisfied' },
+  { value: 2, accessibilityLabel: 'Dissatisfied' },
+  { value: 3, accessibilityLabel: 'Neutral' },
+  { value: 4, accessibilityLabel: 'Satisfied' },
+  { value: 5, accessibilityLabel: 'Very satisfied' },
+];

package/src/components/Rating/RatingEmoji.tsx

@@ -0,0 +1,28 @@
+import BeamingFace from '@utilitywarehouse/hearth-svg-assets/lib/beaming-face.svg';
+import BeamingFaceGrey from '@utilitywarehouse/hearth-svg-assets/lib/beaming-face-grey.svg';
+import DissapointedFace from '@utilitywarehouse/hearth-svg-assets/lib/dissapointed-face.svg';
+import DissapointedFaceGrey from '@utilitywarehouse/hearth-svg-assets/lib/dissapointed-face-grey.svg';
+import FrowningFace from '@utilitywarehouse/hearth-svg-assets/lib/frowning-face.svg';
+import FrowningFaceGrey from '@utilitywarehouse/hearth-svg-assets/lib/frowning-face-grey.svg';
+import NeutralFace from '@utilitywarehouse/hearth-svg-assets/lib/neutral-face.svg';
+import NeutralFaceGrey from '@utilitywarehouse/hearth-svg-assets/lib/neutral-face-grey.svg';
+import SlightlySmilingFace from '@utilitywarehouse/hearth-svg-assets/lib/slightly-smiling-face.svg';
+import SlightlySmilingFaceGrey from '@utilitywarehouse/hearth-svg-assets/lib/slightly-smiling-face-grey.svg';
+import type { FC } from 'react';
+import type { SvgProps } from 'react-native-svg';
+
+const EMOJI_ASSETS: Record<1 | 2 | 3 | 4 | 5, { color: FC<SvgProps>; grey: FC<SvgProps> }> = {
+  1: { color: DissapointedFace, grey: DissapointedFaceGrey },
+  2: { color: FrowningFace, grey: FrowningFaceGrey },
+  3: { color: NeutralFace, grey: NeutralFaceGrey },
+  4: { color: SlightlySmilingFace, grey: SlightlySmilingFaceGrey },
+  5: { color: BeamingFace, grey: BeamingFaceGrey },
+};
+
+export const getEmojiSvg = (
+  value: 1 | 2 | 3 | 4 | 5,
+  grayscale: boolean
+): FC<SvgProps> => {
+  const assets = EMOJI_ASSETS[value];
+  return grayscale ? assets.grey : assets.color;
+};

package/src/components/Rating/index.ts

@@ -1,2 +1,2 @@
 export { default as Rating } from './Rating';
-export type { RatingLabels, RatingProps, RatingValue } from './Rating.props';
+export type { RatingLabels, RatingProps, RatingValue, RatingVariant } from './Rating.props';

package/src/vite-env.d.ts

@@ -10,3 +10,10 @@ declare module '*.svg' {
   const content: React.FC<SvgProps>;
   export default content;
 }
+
+declare module '@utilitywarehouse/hearth-svg-assets/lib/*.svg' {
+  import React from 'react';
+  import { SvgProps } from 'react-native-svg';
+  const content: React.FC<SvgProps>;
+  export default content;
+}

package/vitest.config.js

@@ -1,8 +1,6 @@
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-
 import { defineConfig } from 'vitest/config';
-
 import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
 
 const dirname =