@utilitywarehouse/hearth-react-native 0.31.1 → 0.32.1

package/src/components/Card/Card.stories.tsx

@@ -1,5 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 import { BellMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { ComponentProps } from 'react';
 import { Card, CardAction, CardActions, CardPressHandler } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { BodyText } from '../BodyText';
@@ -7,6 +8,8 @@ import { Button } from '../Button';
 import { Flex } from '../Flex';
 import { Heading } from '../Heading';
 
+type CardStoryProps = ComponentProps<typeof Card>;
+
 const meta = {
   title: 'Stories / Card',
   component: Card,
@@ -31,6 +34,7 @@ const meta = {
         'brand',
         'energy',
         'broadband',
+        'highlight',
         'mobile',
         'insurance',
         'cashback',
@@ -65,7 +69,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
-  render: ({ children, ...props }) => {
+  render: ({ children, ...props }: CardStoryProps) => {
     return (
       <Card {...props}>
         <BodyText>{children as string}</BodyText>
@@ -75,7 +79,7 @@ export const Playground: Story = {
 };
 
 export const WithActions: Story = {
-  render: ({ children, ...props }) => {
+  render: ({ children, ...props }: CardStoryProps) => {
     return (
       <Flex gap="400">
         <Card
@@ -139,7 +143,7 @@ export const WithOnlyAction: Story = {
   args: {
     variant: 'emphasis',
   },
-  render: ({ ...props }) => {
+  render: ({ ...props }: CardStoryProps) => {
     return (
       <Card {...props} flexDirection="column" alignItems="stretch" spacing="md">
         <CardActions>
@@ -159,7 +163,7 @@ export const Variants: Story = {
   parameters: {
     controls: { exclude: ['variant', 'colorScheme'] },
   },
-  render: ({ children, ...props }) => {
+  render: ({ children, ...props }: CardStoryProps) => {
     return (
       <Flex spacing="lg">
         <VariantTitle title="Subtle - White">
@@ -182,76 +186,86 @@ export const Variants: Story = {
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Purple - Subtle">
+        <VariantTitle title="Brand - Subtle">
           <Card {...props} colorScheme="brand" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Purple - Emphasis">
+        <VariantTitle title="Brand - Emphasis">
           <Card {...props} colorScheme="brand" variant="emphasis">
             <BodyText inverted>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Energy Blue - Subtle">
+        <VariantTitle title="Energy - Subtle">
           <Card {...props} colorScheme="energy" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Energy Blue - Emphasis">
+        <VariantTitle title="Energy - Emphasis">
           <Card {...props} colorScheme="energy" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Broadband Green - Subtle">
+        <VariantTitle title="Broadband - Subtle">
           <Card {...props} colorScheme="broadband" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Broadband Green - Emphasis">
+        <VariantTitle title="Broadband - Emphasis">
           <Card {...props} colorScheme="broadband" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Mobile Rose - Subtle">
+        <VariantTitle title="Mobile - Subtle">
           <Card {...props} colorScheme="mobile" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Mobile Rose - Emphasis">
+        <VariantTitle title="Mobile - Emphasis">
           <Card {...props} colorScheme="mobile" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Insurance Orange - Subtle">
+        <VariantTitle title="Insurance - Subtle">
           <Card {...props} colorScheme="insurance" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Insurance Orange - Emphasis">
+        <VariantTitle title="Insurance - Emphasis">
           <Card {...props} colorScheme="insurance" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Cashback Lilac - Subtle">
+        <VariantTitle title="Cashback - Subtle">
           <Card {...props} colorScheme="cashback" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Cashback Lilac - Emphasis">
+        <VariantTitle title="Cashback - Emphasis">
           <Card {...props} colorScheme="cashback" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Piggy Pink - Subtle">
+        <VariantTitle title="Piggy - Subtle">
           <Card {...props} colorScheme="pig" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Piggy Pink - Emphasis">
+        <VariantTitle title="Piggy - Emphasis">
           <Card {...props} colorScheme="pig" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
+        <VariantTitle title="Highlight - Subtle">
+          <Card {...props} colorScheme="highlight" variant="subtle">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Highlight - Emphasis">
+          <Card {...props} colorScheme="highlight" variant="emphasis">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
       </Flex>
     );
   },
@@ -264,7 +278,7 @@ export const WithShadow: Story = {
   parameters: {
     controls: { exclude: ['variant'] },
   },
-  render: ({ children, ...props }) => {
+  render: ({ children, ...props }: CardStoryProps) => {
     return (
       <Flex spacing="lg">
         <VariantTitle title="Subtle - White - Shadow">
@@ -286,7 +300,7 @@ export const Interactive: Story = {
   parameters: {
     controls: { exclude: ['variant', 'colorScheme'] },
   },
-  render: ({ children, ...props }) => {
+  render: ({ children, ...props }: CardStoryProps) => {
     return (
       <Flex spacing="lg">
         <VariantTitle title="Pressable - Subtle - White">

package/src/components/Card/CardRoot.tsx

@@ -164,6 +164,9 @@ const styles = StyleSheet.create(theme => ({
         pig: {
           borderWidth: theme.components.card.brand.borderWidth,
         },
+        highlight: {
+          borderWidth: theme.components.card.brand.borderWidth,
+        },
       },
       shadowColor: {
         functional: {
@@ -331,6 +334,22 @@ const styles = StyleSheet.create(theme => ({
           borderColor: theme.color.border.strong,
         },
       },
+      {
+        variant: 'subtle',
+        colorScheme: 'highlight',
+        styles: {
+          backgroundColor: theme.color.surface.highlight.subtle,
+          borderColor: theme.color.border.strong,
+        },
+      },
+      {
+        variant: 'emphasis',
+        colorScheme: 'highlight',
+        styles: {
+          backgroundColor: theme.color.surface.highlight.default,
+          borderColor: theme.color.border.strong,
+        },
+      },
     ],
   },
 }));

package/src/components/Icon/Icon.docs.mdx

@@ -34,7 +34,7 @@ Icons are often used to enhance the usability and accessibility of digital produ
 You can either use the React Native components directy from our `@utilitywarehouse/hearth-react-native-icons` package or use the `Icon`
 component from our `@utilitywarehouse/hearth-react-native` package to render the icons with utility props such as `color`.
 
-We reccomend that you use the `Icon` component to ensure that the icons are styled correctly and consistently across your application.
+We recommend that you use the `Icon` component to ensure that the icons are styled correctly and consistently across your application.
 The `Icon` component also provides additional functionality such as handling different color modes and sizes as well as automatically applying
 light and dark mode colors from the theme.
 

package/src/components/Input/Input.tsx

@@ -9,7 +9,7 @@ import {
   EyeSmallIcon,
   SearchMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
-import { useTheme } from '../../hooks';
+import { useFormFieldAccessibility, useTheme } from '../../hooks';
 import { BodyText } from '../BodyText';
 import { FormField, useFormFieldContext } from '../FormField';
 import { Spinner } from '../Spinner';
@@ -75,7 +75,7 @@ const Input = forwardRef<TextInput, InputProps>(
       if (formFieldContext?.setShouldHandleAccessibility) {
         formFieldContext.setShouldHandleAccessibility(true);
       }
-    }, []);
+    }, [formFieldContext]);
 
     const [fieldType, setFieldType] = useState<'password' | 'text'>(
       type === 'password' ? 'password' : 'text'
@@ -88,6 +88,16 @@ const Input = forwardRef<TextInput, InputProps>(
 
     const shouldShowPasswordToggle = type === 'password' && showPasswordToggle;
     const shouldShowClear = clearable && !!(props as InputWithoutChildrenProps)?.value;
+    const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
+      label: inputLabel,
+      helperText: inputHelperText,
+      validText: inputValidText,
+      invalidText: inputInvalidText,
+      required: inputRequired,
+      validationStatus: inputValidationStatus,
+      fallbackLabel: props.accessibilityLabel,
+      fallbackHint: props.accessibilityHint,
+    });
 
     const toggleFieldType = () => {
       setFieldType(fieldType === 'password' ? 'text' : 'password');
@@ -107,37 +117,6 @@ const Input = forwardRef<TextInput, InputProps>(
       return undefined;
     })();
 
-    const getAccessibilityLabel = () => {
-      let accessibilityLabel = '';
-      if (inputLabel) {
-        accessibilityLabel = accessibilityLabel + inputLabel;
-      }
-      if (inputRequired) {
-        accessibilityLabel = accessibilityLabel + ', required';
-      }
-
-      return accessibilityLabel || props.accessibilityLabel;
-    };
-
-    const getAccessibilityHint = () => {
-      let accessibilityHint = '';
-      if (inputHelperText) {
-        accessibilityHint = accessibilityHint + inputHelperText;
-      }
-      if (inputValidationStatus !== 'initial') {
-        if (accessibilityHint.length > 0) {
-          accessibilityHint = accessibilityHint + ', ';
-        }
-        if (inputValidationStatus === 'invalid' && inputInvalidText) {
-          accessibilityHint = accessibilityHint + inputInvalidText;
-        }
-        if (inputValidationStatus === 'valid' && inputValidText) {
-          accessibilityHint = accessibilityHint + inputValidText;
-        }
-      }
-      return accessibilityHint || props.accessibilityHint;
-    };
-
     return (
       <FormField
         label={label}
@@ -188,8 +167,8 @@ const Input = forwardRef<TextInput, InputProps>(
                 inputMode={getInputMode}
                 inBottomSheet={inBottomSheet}
                 {...props}
-                aria-label={getAccessibilityLabel()}
-                accessibilityHint={getAccessibilityHint()}
+                aria-label={accessibilityLabel}
+                accessibilityHint={accessibilityHint}
               />
               {shouldShowClear && (
                 <InputSlot>

package/src/components/List/List.docs.mdx

@@ -32,6 +32,8 @@ import {
 import { BackToTopButton, BadgeList, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './List.stories';
 
+import StorybookLink from '../../../../../shared/storybook/StorybookLink';
+
 <Meta title="Components / List" />
 
 <ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=1-163" />
@@ -146,11 +148,11 @@ are ignored, so conditional list items will not affect which item loses the top
 
 #### - `ListItemHeading`
 
-Has all props of the [`BodyText` component](?path=/docs/typography-body-text--docs).
+Has all props of the <StorybookLink to="typography-body-text">`BodyText` component</StorybookLink>.
 
 #### - `ListItemHelperText`
 
-Has all props of the [`BodyText` component](?path=/docs/typography-body-text--docs).
+Has all props of the <StorybookLink to="typography-body-text">`BodyText` component</StorybookLink>.
 
 #### - `ListItemTrailingContent`
 

package/src/components/Modal/Modal.docs.mdx

@@ -12,11 +12,14 @@ import * as Stories from './Modal.stories';
 
 # Modal
 
-The `Modal` component provides a versatile dialog interface that slides up from the bottom of the screen. It's built on top of the `BottomSheetModal` component and includes pre-configured layouts for common modal patterns including headers, content areas, and action buttons.
+The `Modal` component provides a versatile dialog interface that slides up from the bottom of the screen. It's built on top of
+the <StorybookLink to="components-bottom-sheet">`BottomSheetModal`</StorybookLink>
+component and includes pre-configured layouts for common modal patterns including headers, content areas, and action buttons.
 
-The Modal component is ideal for displaying important information, collecting user input, or presenting choices that require user attention without navigating away from the current screen.
+The Modal component is ideal for displaying important information, collecting user input, or presenting choices that require user attention
+without navigating away from the current screen.
 
-If you need a modal layout inside a React Navigation modal screen, use <StorybookLink to="components-navmodal">`NavModal`</StorybookLink> instead.
+If you need a modal layout inside a React Navigation modal screen, use <StorybookLink to="components-nav-modal">`NavModal`</StorybookLink> instead.
 
 - [Playground](#playground)
 - [Usage](#usage)
@@ -32,6 +35,8 @@ If you need a modal layout inside a React Navigation modal screen, use <Storyboo
   - [Loading State](#loading-state)
   - [Without Close Button](#without-close-button)
   - [Single Action Modal](#single-action-modal)
+  - [Navigation Modals](#navigation-modals)
+  - [Close handlers and state management](#close-handlers-and-state-management)
 - [Integration Notes](#integration-notes)
 - [External Resources](#external-resources)
 
@@ -514,6 +519,53 @@ const AlertModal = () => {
 
 For React Navigation modal screens, use <StorybookLink to="components-navmodal">`NavModal`</StorybookLink>. It contains the extracted screen-based modal layout, background variants, scrollable content handling, and the Android `triggerCloseAnimation()` ref used during navigation dismissal.
 
+### Close handlers and state management
+
+The Modal component provides multiple ways to handle closing the modal and managing state:
+
+- Use the `onPressPrimaryButton`, `onPressSecondaryButton`, and `onPressCloseButton` props to run custom logic when buttons are pressed, such as form validation or API calls, before closing the modal.
+- Control whether the modal should automatically close when action buttons are pressed using the `closeOnPrimaryButtonPress` and `closeOnSecondaryButtonPress` props. This allows you to keep the modal
+  open while performing async operations and only close it when those operations are complete.
+- Use the `onChange` prop to detect when the modal is opened or closed based on the index parameter (0 for open, -1 for closed) and manage state accordingly.
+
+```tsx
+const MyModal = () => {
+  const modalRef = useRef<BottomSheetModal>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    setIsSubmitting(false);
+    modalRef.current?.dismiss();
+  };
+
+  return (
+    <>
+      <Button onPress={() => modalRef.current?.present()}>Open Modal</Button>
+
+      <Modal
+        ref={modalRef}
+        heading="Submit Data"
+        description="Please confirm your submission"
+        primaryButtonText="Submit"
+        secondaryButtonText="Cancel"
+        onPressPrimaryButton={handleSubmit}
+        closeOnPrimaryButtonPress={false} // Keep modal open while submitting
+        onChange={index => {
+          if (index === -1) {
+            // Modal closed, reset state if needed
+            setIsSubmitting(false);
+          }
+        }}
+        loading={isSubmitting}
+      />
+    </>
+  );
+};
+```
+
 ## Integration Notes
 
 ### BottomSheetModalProvider
@@ -567,4 +619,6 @@ modalRef.current?.snapToIndex(1);
 
 ## External Resources
 
-This component is built on top of [@gorhom/bottom-sheet](https://gorhom.github.io/react-native-bottom-sheet/) (v5). For more information about the underlying BottomSheet functionality, please refer to the [BottomSheet documentation](./BottomSheet.docs.mdx) and the [official documentation](https://gorhom.dev/react-native-bottom-sheet/).
+This component is built on top of [@gorhom/bottom-sheet](https://gorhom.github.io/react-native-bottom-sheet/) (v5). For more information about the
+underlying BottomSheet functionality, please refer to the <StorybookLink to="components-bottomsheet">BottomSheet documentation</StorybookLink> and
+the [official documentation](https://gorhom.dev/react-native-bottom-sheet/).

package/src/components/NavModal/NavModal.docs.mdx

@@ -6,13 +6,13 @@ import modaliOSVideo from '../../../docs/assets/modal-ios.mp4';
 import { BackToTopButton, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './NavModal.stories';
 
-<Meta title="Components / NavModal" />
+<Meta title="Components / Nav Modal" />
 
 <ViewFigmaButton url="https://www.figma.com/design/dLI9bmyMr42LV7dtFeW27J/Hearth-Patterns---Guides?node-id=6314-9103&t=oq3NaPLaAu3di6Db-4" />
 
 <BackToTopButton />
 
-# NavModal
+# Nav Modal
 
 The `NavModal` component is the screen-based modal layout for navigation flows. Use it when a screen is already being presented by React Navigation with `presentation: 'modal'` or `presentation: 'fullScreenModal'` and you want Hearth's modal structure, actions, and Android close animation support.
 

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

@@ -0,0 +1,178 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Box, Center, Rating } from '../..';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Rating.stories';
+
+<Meta title="Components / Rating" />
+
+<BackToTopButton />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10620-4185" />
+
+# Rating
+
+Use Rating to collect a star-based score with an optional descriptive label.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Examples](#examples)
+- [Accessibility](#accessibility)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<UsageWrap>
+  <Center>
+    <Box>
+      <Rating value={0} labels={{ 0: 'Not rated' }} />
+    </Box>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { useState } from 'react';
+import { Rating } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [rating, setRating] = useState<0 | 1 | 2 | 3 | 4 | 5>(0);
+
+  return <Rating value={rating} onChange={setRating} labels={{ 0: 'Not rated' }} />;
+};
+```
+
+## Props
+
+| Property       | Type                                   | Description                                 | Default     |
+| -------------- | -------------------------------------- | ------------------------------------------- | ----------- |
+| `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` |
+| `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`     |
+
+## Examples
+
+### Default rating
+
+Use the default labels for a quick feedback prompt.
+
+<UsageWrap>
+  <Center>
+    <Box>
+      <Rating value={3} />
+    </Box>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Rating } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => <Rating value={3} />;
+```
+
+### Empty rating
+
+Use `value={0}` to show a zero-star state.
+
+<UsageWrap>
+  <Center>
+    <Box>
+      <Rating value={0} labels={{ 0: 'Not rated' }} />
+    </Box>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Rating } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => <Rating value={0} labels={{ 0: 'Not rated' }} />;
+```
+
+### Custom labels
+
+Provide custom copy for each rating value.
+
+<UsageWrap>
+  <Center>
+    <Box>
+      <Rating
+        value={5}
+        labels={{
+          0: 'Not rated',
+          1: 'Terrible',
+          2: 'Poor',
+          3: 'OK',
+          4: 'Great',
+          5: 'Outstanding',
+        }}
+      />
+    </Box>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Rating } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <Rating
+    value={5}
+    labels={{
+      0: 'Not rated',
+      1: 'Terrible',
+      2: 'Poor',
+      3: 'OK',
+      4: 'Great',
+      5: 'Outstanding',
+    }}
+  />
+);
+```
+
+### Hidden label
+
+Use `hideLabel` when the context already explains the rating.
+
+<UsageWrap>
+  <Center>
+    <Box>
+      <Rating value={2} hideLabel />
+    </Box>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Rating } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => <Rating value={2} hideLabel />;
+```
+
+### Disabled
+
+Use `disabled` to show a read-only rating.
+
+<UsageWrap>
+  <Center>
+    <Box>
+      <Rating value={4} disabled />
+    </Box>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Rating } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => <Rating value={4} disabled />;
+```
+
+## 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.
+- Provide `accessibilityLabel` when the default label text is not sufficient for your screen reader context.

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

@@ -0,0 +1,20 @@
+import figma from '@figma/code-connect';
+import { Rating } from '../';
+
+figma.connect(
+  Rating,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10620-4185',
+  {
+    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} />,
+  }
+);

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

@@ -0,0 +1,22 @@
+import type { ViewProps } from 'react-native';
+
+export type RatingValue = 0 | 1 | 2 | 3 | 4 | 5;
+
+export type RatingLabels = Partial<Record<RatingValue, string>>;
+
+export interface RatingProps extends Omit<ViewProps, 'children'> {
+  /** Current rating value. */
+  value?: RatingValue;
+  /** Initial rating value when uncontrolled. */
+  defaultValue?: RatingValue;
+  /** Called when a star 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. */
+  hideLabel?: boolean;
+}
+
+export default RatingProps;