@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

package/src/components/SectionHeader/Sectionheader.docs.mdx

@@ -0,0 +1,83 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import { SectionHeader } from '../..';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './SectionHeader.stories';
+
+<Meta title="Components / Section Header" />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=1-163" />
+
+<BackToTopButton />
+
+# Section Header
+
+Use the `Section Header` component to help define and separate content within a screen. It provides structure, clarity, and improves page scannability for users. It is nested within components, such as List, but can be used outside of components too.
+
+- [Playground](#playground)
+- [Anatomy](#anatomy)
+- [Usage](#usage)
+- [Props](#props)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Anatomy
+
+Section Header consists of: Heading, Helper Text and Link
+
+### Heading
+
+Being a header component, the heading element is required. It should clearly describe the content it is grouping.
+
+Headings should be short and meaningful - they should clearly describe the content that follows.
+
+Don't let titles get too wordy. Simplify the title as much as possible, and add a 1-2 line subtitle if necessary.
+
+### Helper text
+
+A helper text property is included in the component to be able to add helper text if required.
+
+Use helper text when users need extra clarity or explanation before engaging with the section.
+
+### Link
+
+The Section Header component includes an optional Link that provides users with a related navigation option.
+
+Use the Link to provide a shortcut to additional details or a more comprehensive view.
+
+Use when users may need to navigate away or view extended content (e.g. view all)
+
+## Usage
+
+<UsageWrap>
+  <SectionHeader heading="Heading" helperText="Helper text" linkText="See more" />
+</UsageWrap>
+
+```tsx
+import { SectionHeader } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <SectionHeader heading="Heading" helperText="Helper text" linkText="See more" />
+);
+```
+
+## Props
+
+| Name             | Type                                         | Default    | Description                                            |
+| ---------------- | -------------------------------------------- | ---------- | ------------------------------------------------------ |
+| heading          | `string`                                     |            | The text to display in the heading of the list.        |
+| helperText       | `string`                                     |            | The helper text to display in the heading of the list. |
+| linkText         | `string`                                     |            | The text for the link in the heading.                  |
+| linkHref         | `string`                                     |            | The href for the link in the heading.                  |
+| linkOnPress      | `() => void`                                 |            | Callback function when the link is pressed.            |
+| linkTarget       | `'_blank' \| '_self' \| '_parent' \| '_top'` | `'_blank'` | Target for the link in the heading.                    |
+| linkIcon         | `ComponentType`                              |            | Icon for the link.                                     |
+| linkIconPosition | `'left' \| 'right'`                          | `'right'`  | Position of the icon in the link.                      |
+| linkShowIcon     | `boolean`                                    | `true`     | Whether to show the icon in the link.                  |
+
+## Variants
+
+<Canvas of={Stories.KitchenSink} />

package/src/components/SectionHeader/index.ts

@@ -0,0 +1,4 @@
+export { default as SectionHeader } from './SectionHeader';
+export { default as SectionHeaderHeading } from './SectionHeaderHeading';
+export { default as SectionHeaderHelperText } from './SectionHeaderHelperText';
+export { default as SectionHeaderTextContent } from './SectionHeaderTextContent';

package/src/components/Select/Select.tsx

@@ -211,9 +211,9 @@ const styles = StyleSheet.create(theme => ({
   selectContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: theme.components.select.backgroundColor,
+    backgroundColor: theme.color.surface.neutral.strong,
     borderWidth: theme.components.select.borderWidth,
-    borderColor: theme.components.select.borderColor,
+    borderColor: theme.color.border.strong,
     borderRadius: theme.components.select.borderRadius,
     paddingHorizontal: theme.components.select.paddingHorizontal,
     paddingVertical: theme.components.select.paddingVertical,
@@ -226,16 +226,16 @@ const styles = StyleSheet.create(theme => ({
       },
       readonly: {
         true: {
-          borderColor: theme.components.select.borderColorReadOnly,
+          borderColor: theme.color.border.subtle,
         },
       },
       validationStatus: {
         initial: {},
         valid: {
-          borderColor: theme.components.select.borderColorValid,
+          borderColor: theme.color.feedback.positive.border,
         },
         invalid: {
-          borderColor: theme.components.select.borderColorInvalid,
+          borderColor: theme.color.feedback.danger.border,
         },
       },
     },
@@ -258,27 +258,27 @@ const styles = StyleSheet.create(theme => ({
   pressedContainer: pressed => ({
     outlineWidth: pressed ? theme.components.select.borderWidth : 0,
     outlineStyle: 'solid',
-    outlineColor: pressed ? theme.components.select.borderColor : 'transparent',
+    outlineColor: pressed ? theme.color.border.strong : 'transparent',
     variants: {
       validationStatus: {
         initial: {},
         valid: {
-          outlineColor: theme.components.select.borderColorValid,
+          outlineColor: theme.color.feedback.positive.border,
         },
         invalid: {
-          outlineColor: theme.components.select.borderColorInvalid,
+          outlineColor: theme.color.feedback.danger.border,
         },
       },
     },
   }),
   icon: {
-    color: theme.components.icon.color,
+    color: theme.color.icon.primary,
   },
   placeholderText: {
     variants: {
       hasValue: {
         false: {
-          color: theme.components.text.colorSecondary,
+          color: theme.color.text.secondary,
         },
       },
     },

package/src/components/Select/SelectOption.tsx

@@ -1,10 +1,10 @@
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Pressable, View, ViewStyle } from 'react-native';
-import { SelectOptionProps } from './Select.props';
-import { useSelectContext } from './Select.context';
-import { BodyText } from '../BodyText';
 import { StyleSheet } from 'react-native-unistyles';
-import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { BodyText } from '../BodyText';
 import { Icon } from '../Icon';
+import { useSelectContext } from './Select.context';
+import { SelectOptionProps } from './Select.props';
 
 const SelectOption = ({
   label,
@@ -87,15 +87,15 @@ const styles = StyleSheet.create(theme => ({
     },
     _web: {
       _hover: {
-        backgroundColor: theme.components.select.dropdown.item.backgroundColorHover,
+        backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
       },
     },
   },
   icon: {
-    color: theme.components.select.dropdown.item.foregroundColor,
+    color: theme.color.interactive.functional.foreground.subtle,
   },
   pressed: {
-    backgroundColor: theme.components.select.dropdown.item.backgroundColorActive,
+    backgroundColor: theme.color.interactive.functional.surface.subtle.active,
   },
   labelContainer: {
     flex: 1,

package/src/components/Spinner/Spinner.tsx

@@ -18,8 +18,8 @@ import { ColorValue } from '../../types';
 import { getFlattenedColorValue } from '../../utils';
 import type SpinnerProps from './Spinner.props';
 
-const AnimatedSvg = Animated.createAnimatedComponent(Svg);
-const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const AnimatedSvg = Animated.createAnimatedComponent(Svg as React.ComponentType<any>);
+const AnimatedCircle = Animated.createAnimatedComponent(Circle as React.ComponentType<any>);
 
 const SpinnerRoot = ({ size = 'md', color, ...props }: SpinnerProps) => {
   const { components } = useTheme();
@@ -63,7 +63,7 @@ const SpinnerRoot = ({ size = 'md', color, ...props }: SpinnerProps) => {
   const animatedCircleProps = useAnimatedProps(() => {
     return {
       strokeDashoffset: CIRCUMFERENCE * (1 - progress.value),
-    };
+    } as any;
   }, [progress]);
 
   const animatedSvgStyle = useAnimatedStyle(

package/src/components/Spinner/Spinner.web.tsx

@@ -1,25 +1,25 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+import { createSpinner } from '@gluestack-ui/spinner';
 import React, { useCallback, useEffect, useMemo } from 'react';
+import { View } from 'react-native';
 import Animated, {
-  useSharedValue,
-  withTiming,
-  useAnimatedProps,
   Easing,
-  withSequence,
-  withRepeat,
+  useAnimatedProps,
   useReducedMotion,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
 } from 'react-native-reanimated';
 import { Circle, G, Svg } from 'react-native-svg';
-import type SpinnerProps from './Spinner.props';
-import { createSpinner } from '@gluestack-ui/spinner';
 import { StyleSheet } from 'react-native-unistyles';
-import { View } from 'react-native';
 import { useTheme } from '../../hooks';
-import { getFlattenedColorValue } from '../../utils';
 import { ColorValue } from '../../types';
+import { getFlattenedColorValue } from '../../utils';
+import type SpinnerProps from './Spinner.props';
 
-const AnimatedSvg = Animated.createAnimatedComponent(Svg);
-const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const AnimatedSvg = Animated.createAnimatedComponent(Svg as React.ComponentType<any>);
+const AnimatedCircle = Animated.createAnimatedComponent(Circle as React.ComponentType<any>);
 
 const SpinnerRoot = ({ size = 'md', color, ...props }: SpinnerProps) => {
   const { components } = useTheme();
@@ -63,7 +63,7 @@ const SpinnerRoot = ({ size = 'md', color, ...props }: SpinnerProps) => {
   const animatedCircleProps = useAnimatedProps(() => {
     return {
       strokeDashoffset: CIRCUMFERENCE * (1 - progress.value),
-    };
+    } as any;
   }, [progress]);
 
   const animatedSvgProps = useAnimatedProps(() => {

package/src/components/Switch/Switch.tsx

@@ -22,7 +22,7 @@ const CustomSwitch = ({
   size = 'medium',
   ...accessibilityProps
 }: SwitchProps) => {
-  const { components } = useTheme();
+  const { components, color } = useTheme();
   const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
   const THUMB_SIZE =
     size === 'medium' ? components.switch.md.circle.size : components.switch.sm.circle.size;
@@ -42,7 +42,10 @@ const CustomSwitch = ({
     const backgroundColor = interpolateColor(
       progress.value,
       [0, 1],
-      [components.switch.unchecked.backgroundColor, components.switch.checked.backgroundColor]
+      [
+        color.interactive.functional.surface.strong.default,
+        color.interactive.brand.surface.strong.default,
+      ]
     );
     return { backgroundColor };
   });
@@ -149,10 +152,10 @@ const styles = StyleSheet.create(theme => ({
       },
       value: {
         true: {
-          backgroundColor: theme.components.switch.checked.backgroundColor,
+          backgroundColor: theme.color.interactive.brand.surface.strong.default,
         },
         false: {
-          backgroundColor: theme.components.switch.unchecked.backgroundColor,
+          backgroundColor: theme.color.interactive.functional.surface.strong.default,
         },
       },
       disabled: {
@@ -163,7 +166,7 @@ const styles = StyleSheet.create(theme => ({
     },
   },
   thumb: {
-    backgroundColor: theme.components.switch.circle.backgroundColor,
+    backgroundColor: theme.color.surface.neutral.strong,
     alignItems: 'center',
     justifyContent: 'center',
     variants: {
@@ -188,10 +191,10 @@ const styles = StyleSheet.create(theme => ({
     variants: {
       value: {
         true: {
-          color: theme.components.switch.checked.iconColor,
+          color: theme.color.icon.primary,
         },
         false: {
-          color: theme.components.switch.unchecked.iconColor,
+          color: theme.color.icon.primary,
         },
       },
     },

package/src/components/Switch/Switch.web.tsx

@@ -15,7 +15,6 @@ import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
 import SwitchProps from './Switch.props';
 
-// @ts-expect-error - Animated.createAnimatedComponent is not typed correctly in the library
 const AnimatedView = Animated.createAnimatedComponent(View);
 
 const CustomSwitch = ({
@@ -25,7 +24,7 @@ const CustomSwitch = ({
   size = 'medium',
   ...accessibilityProps
 }: SwitchProps) => {
-  const { components } = useTheme();
+  const { components, color } = useTheme();
   const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
   const THUMB_SIZE =
     size === 'medium' ? components.switch.md.circle.size : components.switch.sm.circle.size;
@@ -45,7 +44,10 @@ const CustomSwitch = ({
     const backgroundColor = interpolateColor(
       progress.value,
       [0, 1],
-      [components.switch.unchecked.backgroundColor, components.switch.checked.backgroundColor]
+      [
+        color.interactive.functional.surface.strong.default,
+        color.interactive.brand.surface.strong.default,
+      ]
     );
     return { backgroundColor };
   });
@@ -112,18 +114,14 @@ const CustomSwitch = ({
       accessibilityHint={accessibilityProps.accessibilityHint}
       {...accessibilityProps}
     >
-      {/* @ts-expect-error - Animated.createAnimatedComponent is not typed correctly in the library */}
       <AnimatedView style={[styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle]}>
-        {/* @ts-expect-error - Animated.createAnimatedComponent is not typed correctly in the library */}
         <AnimatedView style={[styles.thumb, animatedThumbStyle]}>
-          {/* @ts-expect-error - Animated.createAnimatedComponent is not typed correctly in the library */}
           <AnimatedView style={[styles.iconWrap, animatedTickStyle]}>
             {(() => {
               const IconAny = Icon as any;
               return <IconAny as={TickSmallIcon} style={styles.icon as any} />;
             })()}
           </AnimatedView>
-          {/* @ts-expect-error - Animated.createAnimatedComponent is not typed correctly in the library */}
           <AnimatedView style={[styles.iconWrap, animatedCrossStyle]}>
             {(() => {
               const IconAny = Icon as any;
@@ -156,10 +154,10 @@ const styles = StyleSheet.create(theme => ({
       },
       value: {
         true: {
-          backgroundColor: theme.components.switch.checked.backgroundColor,
+          backgroundColor: theme.color.interactive.brand.surface.strong.default,
         },
         false: {
-          backgroundColor: theme.components.switch.unchecked.backgroundColor,
+          backgroundColor: theme.color.interactive.functional.surface.strong.default,
         },
       },
       disabled: {
@@ -170,7 +168,7 @@ const styles = StyleSheet.create(theme => ({
     },
   },
   thumb: {
-    backgroundColor: theme.components.switch.circle.backgroundColor,
+    backgroundColor: theme.color.surface.neutral.strong,
     alignItems: 'center',
     justifyContent: 'center',
     variants: {
@@ -195,10 +193,10 @@ const styles = StyleSheet.create(theme => ({
     variants: {
       value: {
         true: {
-          color: theme.components.switch.checked.iconColor,
+          color: theme.color.icon.primary,
         },
         false: {
-          color: theme.components.switch.unchecked.iconColor,
+          color: theme.color.icon.primary,
         },
       },
     },

package/src/components/Textarea/TextareaField.tsx

@@ -1,15 +1,15 @@
+import { TextInput, TextInputProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { TextInputProps, TextInput } from 'react-native';
-import { useTextareaContext } from './Textarea.context';
 import { useTheme } from '../../hooks';
+import { useTextareaContext } from './Textarea.context';
 
 const TextareaField = ({ style, ...props }: TextInputProps) => {
   const { disabled } = useTextareaContext();
-  const { components, color } = useTheme();
+  const { color } = useTheme();
 
   return (
     <TextInput
-      placeholderTextColor={components.input.placeholderColor}
+      placeholderTextColor={color.text.secondary}
       selectionColor={color.purple[700]}
       cursorColor={color.purple[700]}
       verticalAlign="top"
@@ -30,7 +30,7 @@ const styles = StyleSheet.create(theme => ({
     justifyContent: 'flex-start',
     textAlignVertical: 'top',
     alignItems: 'flex-start',
-    color: theme.components.text.color,
+    color: theme.color.text.primary,
     fontSize: theme.typography.mobile.bodyText.md.fontSize,
     fontFamily: theme.typography.mobile.bodyText.fontFamily,
     fontWeight: theme.typography.mobile.bodyText.fontWeight,

package/src/components/Textarea/TextareaRoot.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
-import { StyleSheet } from 'react-native-unistyles';
 import { View } from 'react-native';
-import InputProps from './Textarea.props';
+import { StyleSheet } from 'react-native-unistyles';
 import { TextareaContext } from './Textarea.context';
+import InputProps from './Textarea.props';
 
 const TextareaRoot = ({
   children,
@@ -32,7 +32,7 @@ TextareaRoot.displayName = 'TextareaRoot';
 
 const styles = StyleSheet.create(theme => ({
   container: {
-    borderColor: theme.components.input.borderColor,
+    borderColor: theme.color.border.strong,
     height: theme.components.input.textArea.height,
     borderRadius: theme.components.input.borderRadius,
     flexDirection: 'row',
@@ -40,11 +40,11 @@ const styles = StyleSheet.create(theme => ({
     alignContent: 'center',
     paddingHorizontal: theme.components.input.paddingHorizontal,
     paddingVertical: theme.components.input.paddingVertical,
-    backgroundColor: theme.components.input.backgroundColor,
+    backgroundColor: theme.color.surface.neutral.strong,
     gap: theme.components.input.gap,
     outlineStyle: 'solid',
     outlineWidth: theme.components.input.borderWidth,
-    outlineColor: theme.components.input.borderColor,
+    outlineColor: theme.color.border.strong,
     variants: {
       focus: {
         true: {
@@ -53,12 +53,12 @@ const styles = StyleSheet.create(theme => ({
       },
       validationStatus: {
         invalid: {
-          borderColor: theme.components.input.borderColorInvalid,
-          outlineColor: theme.components.input.borderColorInvalid,
+          borderColor: theme.color.feedback.danger.border,
+          outlineColor: theme.color.feedback.danger.border,
         },
         valid: {
-          borderColor: theme.components.input.borderColorValid,
-          outlineColor: theme.components.input.borderColorValid,
+          borderColor: theme.color.feedback.positive.border,
+          outlineColor: theme.color.feedback.positive.border,
         },
         initial: {},
       },
@@ -69,7 +69,7 @@ const styles = StyleSheet.create(theme => ({
       },
       readonly: {
         true: {
-          borderColor: theme.components.input.borderColorReadOnly,
+          borderColor: theme.color.border.subtle,
         },
       },
     },

package/src/components/ToggleButton/ToggleButtonIcon.tsx

@@ -1,8 +1,8 @@
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Platform, type StyleProp, type ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import IconProps from '../Icon/Icon.props';
-import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
 const ButtonIcon = ({
   children,
@@ -32,11 +32,11 @@ ButtonIcon.displayName = 'ButtonIcon';
 
 const styles = StyleSheet.create(theme => ({
   icon: {
-    color: theme.components.toggleButton.foregroundColor,
+    color: theme.color.interactive.neutral.foreground.subtle,
     variants: {
       toggled: {
         true: {
-          color: theme.components.toggleButton.selected.foregroundColor,
+          color: theme.color.interactive.brand.foreground.strong,
         },
       },
     },

package/src/components/ToggleButton/ToggleButtonRoot.tsx

@@ -1,7 +1,7 @@
-import type { ToggleButtonProps } from './ToggleButton.props';
-import { Pressable, ViewStyle, GestureResponderEvent } from 'react-native';
+import { GestureResponderEvent, Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useCardActionContext } from '../Card';
+import type { ToggleButtonProps } from './ToggleButton.props';
 
 const ButtonRoot = ({
   children,
@@ -53,35 +53,35 @@ const styles = StyleSheet.create(theme => ({
     paddingHorizontal: theme.components.toggleButton.paddingHorizontal,
     paddingVertical:
       theme.components.toggleButton.paddingVertical - theme.components.toggleButton.borderWidth,
-    borderColor: theme.components.toggleButton.borderColor,
+    borderColor: theme.color.interactive.neutral.border.subtle,
     height: theme.components.toggleButton.height,
     _web: {
       '_focus-visible': theme.helpers.focusVisible,
       _hover: {
-        backgroundColor: theme.components.toggleButton.backgroundColorHover,
+        backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
       },
       _active: {
-        backgroundColor: theme.components.toggleButton.backgroundColorActive,
+        backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
       },
     },
     variants: {
       toggled: {
         true: {
-          backgroundColor: theme.components.toggleButton.selected.backgroundColor,
-          borderColor: theme.components.toggleButton.selected.borderColor,
+          backgroundColor: theme.color.interactive.brand.surface.strong.default,
+          borderColor: theme.color.interactive.brand.border.strong,
           _web: {
             _hover: {
-              backgroundColor: theme.components.toggleButton.selected.backgroundColorHover,
+              backgroundColor: theme.color.interactive.brand.surface.strong.hover,
             },
             _active: {
-              backgroundColor: theme.components.toggleButton.selected.backgroundColorActive,
+              backgroundColor: theme.color.interactive.brand.surface.strong.active,
             },
           },
         },
       },
       active: {
         true: {
-          backgroundColor: theme.components.toggleButton.backgroundColorActive,
+          backgroundColor: theme.color.interactive.brand.surface.strong.active,
         },
       },
     },
@@ -90,7 +90,7 @@ const styles = StyleSheet.create(theme => ({
         toggled: true,
         active: true,
         styles: {
-          backgroundColor: theme.components.toggleButton.selected.backgroundColorActive,
+          backgroundColor: theme.color.interactive.brand.surface.strong.active,
         },
       },
     ],

package/src/components/ToggleButton/ToggleButtonText.tsx

@@ -15,11 +15,11 @@ ToggleButtonText.displayName = 'ToggleButtonText';
 
 const styles = StyleSheet.create(theme => ({
   text: {
-    color: theme.components.toggleButton.foregroundColor,
+    color: theme.color.interactive.neutral.foreground.subtle,
     variants: {
       toggled: {
         true: {
-          color: theme.components.toggleButton.selected.foregroundColor,
+          color: theme.color.interactive.brand.foreground.strong,
         },
       },
     },

package/src/components/ToggleButtonCard/ToggleButtonCardRoot.tsx

@@ -58,9 +58,9 @@ const styles = StyleSheet.create(theme => ({
     flexDirection: 'column',
     gap: theme.components.card.selectable.gap,
     borderRadius: theme.components.card.borderRadius,
-    backgroundColor: theme.components.card.neutral.whiteBackgroundColor,
+    backgroundColor: theme.color.surface.neutral.strong,
     borderWidth: theme.components.card.selectable.borderWidth,
-    borderColor: theme.components.card.selectable.borderColor,
+    borderColor: theme.color.border.subtle,
     alignSelf: 'stretch',
     padding: {
       base: theme.components.card.mobile.padding,
@@ -71,7 +71,7 @@ const styles = StyleSheet.create(theme => ({
       selected: {
         true: {
           borderWidth: theme.components.card.selectable.borderWidthSelected,
-          borderColor: theme.components.card.selectable.borderColorSelected,
+          borderColor: theme.color.border.strong,
           margin: -theme.components.card.selectable.borderWidthSelected / 2,
         },
       },

package/src/components/index.ts

@@ -3,12 +3,12 @@ export * from './Accordion';
 export * from './Alert';
 export * from './Badge';
 export * from './BodyText';
-export * from './Box';
 export * from './BottomSheet';
+export * from './Box';
 export * from './Button';
 export * from './Card';
-export * from './Checkbox';
 export * from './Center';
+export * from './Checkbox';
 export * from './DetailText';
 export * from './Divider';
 export * from './Flex';
@@ -24,8 +24,10 @@ export * from './Input';
 export * from './Label';
 export * from './Link';
 export * from './List';
+export * from './Modal';
 export * from './Radio';
 export * from './RadioCard';
+export * from './SectionHeader';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
@@ -35,12 +37,12 @@ export * from './ToggleButtonCard';
 
 export {
   FlatList,
-  ScrollView,
+  Image,
   KeyboardAvoidingView,
+  ScrollView,
+  SectionList,
   StatusBar,
   View,
-  SectionList,
-  Image,
 } from 'react-native';
 
 export { Pressable } from 'react-native';