@utilitywarehouse/hearth-react-native 0.32.2 → 0.32.4

package/.storybook/main.ts

@@ -1,5 +1,5 @@
-import { fileURLToPath } from "node:url";
-import { dirname } from "node:path";
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
 import remarkGfm from 'remark-gfm';
 import svgr from 'vite-plugin-svgr';
 
@@ -14,9 +14,9 @@ const unistylesPluginOptions = {
 const config = {
   stories: ['../**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath('@chromatic-com/storybook'),
     {
-      name: getAbsolutePath("@storybook/addon-docs"),
+      name: getAbsolutePath('@storybook/addon-docs'),
       options: {
         mdxPluginOptions: {
           mdxCompileOptions: {
@@ -25,11 +25,11 @@ const config = {
         },
       },
     },
-    getAbsolutePath("@storybook/addon-a11y"),
-    getAbsolutePath("@storybook/addon-vitest"),
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-vitest'),
   ],
   framework: {
-    name: getAbsolutePath("@storybook/react-native-web-vite"),
+    name: getAbsolutePath('@storybook/react-native-web-vite'),
     options: {
       pluginReactOptions: {
         babel: {
@@ -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/.storybook/manager.ts

@@ -1,8 +1,10 @@
 import '@utilitywarehouse/hearth-fonts';
 import { addons } from 'storybook/manager-api';
-import '@utilitywarehouse/hearth-tokens/index.css';
 import '../../../shared/storybook/styles/manager.css';
-import theme from '../../../shared/storybook/theme';
+import { config } from '../../../shared/storybook/theme';
+import { create } from 'storybook/theming';
+
+const theme = create(config);
 
 addons.setConfig({
   theme,

package/.storybook/preview.tsx

@@ -6,9 +6,12 @@ import { useEffect } from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import '../../../shared/storybook/styles/diff-highlighting.css';
 import '../../../shared/storybook/styles/preview.css';
-import theme from '../../../shared/storybook/theme';
 import { breakpoints, StyleSheet, themes, UnistylesRuntime } from '../src/core';
 import { initializePrism } from './prism-setup';
+import { config } from '../../../shared/storybook/theme';
+import { create } from 'storybook/theming';
+
+const theme = create(config);
 
 // Initialize Prism.js for syntax highlighting
 initializePrism();

package/.turbo/turbo-build.log

@@ -1,4 +1 @@
-
-> @utilitywarehouse/hearth-react-native@0.32.2 build /home/runner/work/hearth/hearth/packages/react-native
-> tsc
-
+$ tsc

package/.turbo/{turbo-lint.log → turbo-lint$colon$fix.log}

@@ -1,7 +1,4 @@
-
-> @utilitywarehouse/hearth-react-native@0.32.2 lint /home/runner/work/hearth/hearth/packages/react-native
-> TIMING=1 eslint .
-
+$ TIMING=1 eslint --fix .
 
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.context.tsx
   6:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
@@ -47,13 +44,13 @@
 
 Rule                                     | Time (ms) | Relative
 :----------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars        |  1652.894 |    62.0%
-react-hooks/exhaustive-deps              |   139.717 |     5.2%
-react-hooks/rules-of-hooks               |   103.240 |     3.9%
-no-global-assign                         |    68.299 |     2.6%
-no-misleading-character-class            |    54.368 |     2.0%
-no-unexpected-multiline                  |    52.346 |     2.0%
-@typescript-eslint/ban-ts-comment        |    50.938 |     1.9%
-no-useless-escape                        |    46.618 |     1.7%
-no-loss-of-precision                     |    37.323 |     1.4%
-@typescript-eslint/no-unused-expressions |    32.985 |     1.2%
+@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,41 @@
 # @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
+
+- [#1192](https://github.com/utilitywarehouse/hearth/pull/1192) [`a74bf02`](https://github.com/utilitywarehouse/hearth/commit/a74bf02c58c12e1b42351e0d7f8e3e79ea0acbd6) Thanks [@robphoenix](https://github.com/robphoenix)! - 🧹 [HOUSEKEEPING]: Fix dependencies and types
+
 ## 0.32.2
 
 ### Patch Changes

package/build/components/Accordion/Accordion.d.ts

@@ -1,19 +1,19 @@
 import { AccordionProps } from './Accordion.props';
 import { AccordionItemProps } from './AccordionItem.props';
-export declare const AccordionHeader: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").ViewProps>>;
-export declare const AccordionTrigger: import("react").ForwardRefExoticComponent<Omit<import("react-native").PressableProps & {
+export declare const AccordionHeader: import("react").ForwardRefExoticComponent<import("react-native/types").ViewProps & import("react").RefAttributes<import("react-native/types").ViewProps>>;
+export declare const AccordionTrigger: import("react").ForwardRefExoticComponent<Omit<import("react-native/types").PressableProps & {
     states?: {
         active?: boolean;
     };
-}, "children"> & import("@gluestack-ui/accordion/lib/typescript/types").IAccordionTriggerProps & import("react").RefAttributes<import("react-native").PressableProps & {
+}, "children"> & import("@gluestack-ui/accordion/lib/typescript/types").IAccordionTriggerProps & import("react").RefAttributes<import("react-native/types").PressableProps & {
     states?: {
         active?: boolean;
     };
 }>>;
-export declare const AccordionContent: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").ViewProps>>;
-export declare const AccordionContentText: import("react").ForwardRefExoticComponent<import("react-native").TextProps & import("react").RefAttributes<import("react-native").TextProps>>;
+export declare const AccordionContent: import("react").ForwardRefExoticComponent<import("react-native/types").ViewProps & import("react").RefAttributes<import("react-native/types").ViewProps>>;
+export declare const AccordionContentText: import("react").ForwardRefExoticComponent<import("react-native/types").TextProps & import("react").RefAttributes<import("react-native/types").TextProps>>;
 export declare const AccordionIcon: import("react").ForwardRefExoticComponent<import("..").IconProps & import("react").RefAttributes<import("..").IconProps>>;
-export declare const AccordionTitleText: import("react").ForwardRefExoticComponent<import("react-native").TextProps & import("react").RefAttributes<import("react-native").TextProps>>;
+export declare const AccordionTitleText: import("react").ForwardRefExoticComponent<import("react-native/types").TextProps & import("react").RefAttributes<import("react-native/types").TextProps>>;
 declare const Accordion: {
     ({ children, collapsible, type, heading, helperText, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

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

@@ -1,4 +1,5 @@
 import type { ComponentType, ReactElement, ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import type CardProps from '../Card/Card.props';
 export type BannerDirection = 'horizontal' | 'vertical';
 export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | 'space' | 'gap' | 'rowGap' | 'columnGap' | 'flexDirection' | 'flexWrap' | 'alignItems' | 'justifyContent'> {
@@ -71,5 +72,6 @@ export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | '
      * @default 'center'
      */
     alignChevron?: 'center' | 'start' | 'end';
+    style?: StyleProp<ViewStyle>;
 }
 export default BannerProps;

package/build/components/Card/Card.d.ts

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

package/build/components/Card/CardAction/CardAction.d.ts

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

package/build/components/Checkbox/Checkbox.d.ts

@@ -4,7 +4,7 @@ declare const CheckboxGroup: import("react").ForwardRefExoticComponent<import("r
 }> & import("./CheckboxGroup.props").default & {
     isCard?: boolean;
 } & import("@gluestack-ui/checkbox/lib/typescript/types").ICheckboxGroup>;
-declare const CheckboxIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").ViewProps> & import("react-native").ViewProps>;
+declare const CheckboxIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native/types").ViewProps> & import("react-native/types").ViewProps>;
 declare const CheckboxIcon: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("..").IconProps> & import("..").IconProps & {
     forceMount?: boolean;
 }>;

package/build/components/ExpandableCard/ExpandableCardTrigger.d.ts

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

package/build/components/Icons/CircleIcon.d.ts

@@ -1,5 +1,5 @@
 declare const CircleIcon: import("@gluestack-ui/icon/lib/typescript/createIcon").IIconComponentType<import("react-native-svg").SvgProps | {
-    fill?: import("react-native").ColorValue | undefined;
-    stroke?: import("react-native").ColorValue | undefined;
+    fill?: import("react-native/types").ColorValue | undefined;
+    stroke?: import("react-native/types").ColorValue | undefined;
 }>;
 export default CircleIcon;

package/build/components/Input/InputField.js

@@ -10,9 +10,7 @@ const InputField = forwardRef(({ style, inBottomSheet = false, ...props }, ref)
     styles.useVariants({ focused, type });
     const { color } = useTheme();
     if (inBottomSheet) {
-        return (
-        // @ts-expect-error - BottomSheetTextInput has incompatible event types with TextInput
-        _jsx(BottomSheetTextInput, { ref: ref, placeholderTextColor: color.text.secondary, selectionColor: color.surface.brand.default, cursorColor: color.surface.brand.default, verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
+        return (_jsx(BottomSheetTextInput, { ref: ref, placeholderTextColor: color.text.secondary, selectionColor: color.surface.brand.default, cursorColor: color.surface.brand.default, verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
     }
     return (_jsx(RNTextInput, { ref: ref, placeholderTextColor: color.text.secondary, selectionColor: color.surface.brand.default, cursorColor: color.surface.brand.default, verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
 });

package/build/components/Link/Link.d.ts

@@ -1,5 +1,5 @@
 import type { LinkProps } from './Link.props';
-export declare const LinkText: import("react").ForwardRefExoticComponent<import("react-native").TextProps & import("react").RefAttributes<import("react-native").TextProps>>;
+export declare const LinkText: import("react").ForwardRefExoticComponent<import("react-native/types").TextProps & import("react").RefAttributes<import("react-native/types").TextProps>>;
 declare const Link: {
     ({ children, icon, disabled, target, iconPosition, showIcon, textStyle, iconStyle, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

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

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

package/build/components/Radio/Radio.d.ts

@@ -4,7 +4,7 @@ declare const RadioGroup: import("react").ForwardRefExoticComponent<import("reac
 }> & import("./RadioGroup.props").default & {
     isCard?: boolean;
 } & import("@gluestack-ui/radio/lib/typescript/types").IRadioGroupProps>;
-declare const RadioIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").ViewProps> & import("react-native").ViewProps>;
+declare const RadioIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native/types").ViewProps> & import("react-native/types").ViewProps>;
 declare const RadioIcon: 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/StepperInput/StepperButton.d.ts

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

package/build/components/Tabs/Tab.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPressable } from '@gluestack-ui/pressable';
 import { useCallback, useRef } from 'react';
 import { Platform, Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
 import { Icon } from '../Icon';
 import { useTabsContext } from './Tabs.context';
-import { createPressable } from '@gluestack-ui/pressable';
-import { BodyText } from '../BodyText';
 const Tab = ({ value, children, icon, disabled, style, states, ...props }) => {
     const { value: active, select, size, disabled: allDisabled, registerTabLayout, } = useTabsContext();
     const { active: pressed } = states || { active: false };

package/build/components/ToggleButton/ToggleButton.d.ts

@@ -1,7 +1,7 @@
 import type { ToggleButtonProps } from './ToggleButton.props';
-export declare const ToggleButtonText: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").TextProps & {
+export declare const ToggleButtonText: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native/types").TextProps & {
     toggled: boolean;
-}> & import("react-native").TextProps & {
+}> & import("react-native/types").TextProps & {
     toggled: boolean;
 }>;
 export declare const ToggleButtonIcon: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("..").IconProps & {

package/docs/changelog.mdx

@@ -9,6 +9,42 @@ 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
+
+- [#1192](https://github.com/utilitywarehouse/hearth/pull/1192) [`a74bf02`](https://github.com/utilitywarehouse/hearth/commit/a74bf02c58c12e1b42351e0d7f8e3e79ea0acbd6) Thanks [@robphoenix](https://github.com/robphoenix)! - 🧹 [HOUSEKEEPING]: Fix dependencies and types
+
 ## 0.32.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.32.2",
+  "version": "0.32.4",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -12,6 +12,7 @@
     "@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",
@@ -21,25 +22,28 @@
     "@gluestack-ui/switch": "0.1.22",
     "@gluestack-ui/textarea": "0.1.23",
     "@quidone/react-native-wheel-picker": "^1.6.1",
-    "dayjs": "^1.11.13"
+    "dayjs": "^1.11.13",
+    "nanoid": "3.3.11"
   },
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@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",
     "@storybook/react-native-web-vite": "^10.2.1",
     "@types/prismjs": "^1.26.5",
-    "@types/react-dom": "^19.1.6",
     "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.6",
+    "@types/react-native": "^0.72.8",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "chromatic": "^13.3.0",
-    "eslint-plugin-storybook": "10.2.1",
-    "playwright": "^1.55.1",
+    "globals": "^15.15.0",
+    "playwright": "^1.59.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -60,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": {
@@ -90,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:docs": "storybook dev -p 6002 --no-open --docs",
-    "build:storybook": "npm run copy:changelog && storybook build",
-    "build:storybook:docs": "npm run copy:changelog && storybook build --docs",
+    "dev": "storybook dev -p 6006",
+    "dev:docs": "storybook dev -p 6002 --no-open",
+    "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/Banner/Banner.props.ts

@@ -1,4 +1,5 @@
 import type { ComponentType, ReactElement, ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import type CardProps from '../Card/Card.props';
 
 export type BannerDirection = 'horizontal' | 'vertical';
@@ -92,6 +93,7 @@ export interface BannerProps extends Omit<
    * @default 'center'
    */
   alignChevron?: 'center' | 'start' | 'end';
+  style?: StyleProp<ViewStyle>;
 }
 
 export default BannerProps;

package/src/components/ExpandableCard/ExpandableCardTrigger.tsx

@@ -4,7 +4,6 @@ import ExpandableCardTriggerRoot from './ExpandableCardTriggerRoot';
 const ExpandableCardTrigger = createPressable({
   Root: ExpandableCardTriggerRoot,
 });
-
 ExpandableCardTrigger.displayName = 'ExpandableCardTrigger';
 
 export default ExpandableCardTrigger;

package/src/components/Input/InputField.tsx

@@ -13,7 +13,6 @@ const InputField = forwardRef<RNTextInput, TextInputProps & { inBottomSheet?: bo
 
     if (inBottomSheet) {
       return (
-        // @ts-expect-error - BottomSheetTextInput has incompatible event types with TextInput
         <BottomSheetTextInput
           ref={ref as any}
           placeholderTextColor={color.text.secondary}

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/components/Tabs/Tab.tsx

@@ -1,13 +1,12 @@
+import { createPressable } from '@gluestack-ui/pressable';
 import { useCallback, useRef } from 'react';
 import { Platform, Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
 import { Icon } from '../Icon';
 import type TabProps from './Tab.props';
 import { useTabsContext } from './Tabs.context';
 
-import { createPressable } from '@gluestack-ui/pressable';
-import { BodyText } from '../BodyText';
-
 const Tab = ({
   value,
   children,

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/tsconfig.json

@@ -10,6 +10,10 @@
     ],
     "compilerOptions": {
         "baseUrl": ".",
+        "paths": {
+            "react-native": ["./node_modules/react-native"],
+            "react-native/*": ["./node_modules/react-native/*"]
+        },
         "ignoreDeprecations": "5.0",
         "noEmit": false,
         "declaration": true,

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 =