@utilitywarehouse/hearth-react-native 0.4.1 → 0.5.0

package/src/components/SectionHeader/SectionHeader.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-vite';
 import { SettingsMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { VariantTitle } from '../../../docs/components';
 import { Flex } from '../Flex';
+import { Link } from '../Link';
 import SectionHeader from './SectionHeader';
 
 const meta = {
@@ -16,15 +17,10 @@ const meta = {
       control: 'text',
       description: 'The heading supporting text to be displayed.',
     },
-    linkText: {
-      control: 'text',
-      description: 'Link text to display',
-    },
   },
   args: {
     heading: 'This is the section heading',
     helperText: 'Helper text',
-    linkText: 'See more',
   },
 } satisfies Meta<typeof SectionHeader>;
 
@@ -33,13 +29,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
   render: () => {
-    return (
-      <SectionHeader
-        heading="This is the section heading"
-        helperText="Helper text"
-        linkText="See more"
-      />
-    );
+    return <SectionHeader heading="This is the section heading" helperText="Helper text" />;
   },
 };
 
@@ -51,23 +41,43 @@ export const KitchenSink: Story = {
     return (
       <Flex space="xl" direction="column" style={{ width: '100%' }}>
         <VariantTitle title="Default SectionHeader with helper text and link">
-          <SectionHeader heading="Heading" helperText="Helper text" linkText="See more" />
+          <SectionHeader
+            heading="Heading"
+            helperText="Helper text"
+            trailingContent={<Link>See more</Link>}
+          />
         </VariantTitle>
         <VariantTitle title="SectionHeader with icon on the left of the link ">
           <SectionHeader
             heading="Heading"
             helperText="Helper text"
-            linkText="Settings"
-            linkIcon={SettingsMediumIcon}
-            linkIconPosition="left"
+            trailingContent={
+              <Link icon={SettingsMediumIcon} iconPosition="left">
+                Settings
+              </Link>
+            }
           />
         </VariantTitle>
         <VariantTitle title="SectionHeader with no icon">
           <SectionHeader
             heading="Heading"
             helperText="Helper text"
-            linkText="Call to action"
-            linkShowIcon={false}
+            trailingContent={<Link showIcon={false}>Call to action</Link>}
+          />
+        </VariantTitle>
+        <VariantTitle title="SectionHeader with badge">
+          <SectionHeader
+            heading="Heading"
+            helperText="Helper text"
+            badge={{ text: "I'm a badge" }}
+          />
+        </VariantTitle>
+        <VariantTitle title="SectionHeader with badge and link">
+          <SectionHeader
+            heading="Heading"
+            helperText="Helper text"
+            trailingContent={<Link>Show more</Link>}
+            badge={{ text: 'New' }}
           />
         </VariantTitle>
       </Flex>

package/src/components/SectionHeader/SectionHeader.tsx

@@ -1,23 +1,22 @@
+import { ErrorCircleSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { Link } from '../Link';
+import { Badge } from '../Badge';
+import { Helper } from '../Helper';
 import SectionHeaderProps from './SectionHeader.props';
 import SectionHeaderTitle from './SectionHeaderHeading';
 import SectionHeaderHelperText from './SectionHeaderHelperText';
 import SectionHeaderTextContent from './SectionHeaderTextContent';
+import SectionHeaderTrailingContent from './SectionHeaderTrailingContent';
 
 const SectionHeader = ({
   heading,
   helperText,
   children,
   style,
-  linkHref,
-  linkIcon,
-  linkIconPosition,
-  linkOnPress,
-  linkShowIcon,
-  linkTarget,
-  linkText,
+  trailingContent,
+  badge,
+  invalidText,
   ...props
 }: SectionHeaderProps) => {
   return (
@@ -29,18 +28,18 @@ const SectionHeader = ({
           <SectionHeaderTextContent>
             <SectionHeaderTitle>{heading}</SectionHeaderTitle>
             {!!helperText && <SectionHeaderHelperText>{helperText}</SectionHeaderHelperText>}
+            {!!invalidText && (
+              <Helper
+                validationStatus="invalid"
+                showIcon
+                icon={ErrorCircleSmallIcon}
+                text={invalidText || ''}
+              />
+            )}
           </SectionHeaderTextContent>
-          {!!linkText && (
-            <Link
-              href={linkHref}
-              onPress={linkOnPress}
-              icon={linkIcon}
-              showIcon={linkShowIcon}
-              iconPosition={linkIconPosition}
-              target={linkTarget}
-            >
-              {linkText}
-            </Link>
+          {!!badge && <Badge {...badge} />}
+          {!!trailingContent && (
+            <SectionHeaderTrailingContent>{trailingContent}</SectionHeaderTrailingContent>
           )}
         </>
       )}

package/src/components/SectionHeader/SectionHeaderTrailingContent.tsx

@@ -0,0 +1,20 @@
+import { View, type ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+const SectionHeaderTrailingContent = ({ children, ...props }: ViewProps) => {
+  return (
+    <View {...props} style={[styles.container, props.style]}>
+      {children}
+    </View>
+  );
+};
+
+SectionHeaderTrailingContent.displayName = 'SectionHeaderTrailingContent';
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'flex-start',
+  },
+});
+
+export default SectionHeaderTrailingContent;

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

@@ -26,7 +26,7 @@ Use the `Section Header` component to help define and separate content within a
 
 ## Anatomy
 
-Section Header consists of: Heading, Helper Text and Link
+Section Header consists of: Heading, Helper Text, a Badge (optional) and a trailing content (optional, usually a Link or Button).
 
 ### Heading
 
@@ -42,41 +42,26 @@ A helper text property is included in the component to be able to add helper tex
 
 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" />
+  <SectionHeader heading="Heading" helperText="Helper text" />
 </UsageWrap>
 
 ```tsx
 import { SectionHeader } from '@utilitywarehouse/hearth-react-native';
 
-const MyComponent = () => (
-  <SectionHeader heading="Heading" helperText="Helper text" linkText="See more" />
-);
+const MyComponent = () => <SectionHeader heading="Heading" helperText="Helper text" />;
 ```
 
 ## 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.                  |
+| 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. |
+| trailingContent | `React.ReactNode` |         | Optional content to display on the right side.         |
+| badge           | `BadgeProps`      |         | Optional badge to display next to the heading.         |
 
 ## Variants
 

package/src/components/SectionHeader/index.ts

@@ -2,3 +2,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';
+export { default as SectionHeaderTrailingContent } from './SectionHeaderTrailingContent';

package/src/components/Switch/Switch.docs.mdx

@@ -137,7 +137,6 @@ const SwitchList = () => {
       <ListItem
         text="Notifications"
         helperText="Allow notifications"
-        divider
         leadingContent={<ListItemIcon as={BellMediumIcon} />}
         trailingContent={
           <Switch value={notifications} onValueChange={setNotifications} size="small" />
@@ -147,7 +146,6 @@ const SwitchList = () => {
       <ListItem
         text="Secure ID"
         helperText="Use secure ID"
-        divider
         leadingContent={<ListItemIcon as={LockMediumIcon} />}
         trailingContent={<Switch value={secureId} onValueChange={setSecureId} size="small" />}
         onPress={() => setSecureId(!secureId)}
@@ -155,7 +153,6 @@ const SwitchList = () => {
       <ListItem
         text="Location"
         helperText="Allow location"
-        divider
         leadingContent={<ListItemIcon as={LocationMediumIcon} />}
         trailingContent={<Switch value={location} onValueChange={setLocation} size="small" />}
         onPress={() => setLocation(!location)}
@@ -163,7 +160,6 @@ const SwitchList = () => {
       <ListItem
         text="Dark mode"
         helperText="Enable dark mode"
-        divider
         leadingContent={<ListItemIcon as={EyeMediumIcon} />}
         trailingContent={<Switch value={darkMode} onValueChange={setDarkMode} size="small" />}
         onPress={() => setDarkMode(!darkMode)}

package/src/components/Tabs/Tab.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useRef } from 'react';
 import { Platform, Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { DetailText } from '../DetailText';
 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,
@@ -54,7 +54,9 @@ const Tab = ({
     >
       <View style={styles.content}>
         {icon ? <Icon as={icon} /> : null}
-        <DetailText size={size}>{children}</DetailText>
+        <BodyText size={size} weight="semibold">
+          {children}
+        </BodyText>
       </View>
     </Pressable>
   );

package/src/components/ToggleButton/ToggleButtonText.tsx

@@ -1,13 +1,13 @@
 import { type TextProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { DetailText } from '../DetailText';
+import { BodyText } from '../BodyText';
 
 const ToggleButtonText = ({ children, toggled, ...props }: TextProps & { toggled: boolean }) => {
   styles.useVariants({ toggled });
   return (
-    <DetailText size="md" {...props} style={[styles.text, props.style]}>
+    <BodyText size="md" weight="semibold" {...props} style={[styles.text, props.style]}>
       {children}
-    </DetailText>
+    </BodyText>
   );
 };
 

package/src/components/UnstyledIconButton/UnstyledIconButton.props.ts

@@ -1,5 +1,6 @@
 import type { ComponentType } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
+import { ColorValue } from '../../types';
 
 export type UnstyledIconButtonProps = {
   /*
@@ -29,5 +30,5 @@ export type UnstyledIconButtonProps = {
    */
   inverted?: boolean;
   children?: React.ReactNode;
-  iconStyle?: ViewProps['style'];
+  iconStyle?: ViewProps['style'] & { color?: ColorValue };
 } & PressableProps;

package/src/components/index.ts

@@ -7,6 +7,7 @@ export * from './BottomSheet';
 export * from './Box';
 export * from './Button';
 export * from './Card';
+export * from './Carousel';
 export * from './Center';
 export * from './Checkbox';
 export * from './CurrencyInput';
@@ -24,12 +25,14 @@ export * from './HTMLElements';
 export * from './Icon';
 export * from './IconButton';
 export * from './IconContainer';
+export * from './IndicatorIconButton';
 export * from './InlineLink';
 export * from './Input';
 export * from './Label';
 export * from './Link';
 export * from './List';
 export * from './Modal';
+export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
 export * from './SectionHeader';

package/src/tokens/components/dark/button.ts

@@ -10,7 +10,7 @@ export default {
     paddingHorizontal: 16,
     paddingVertical: 12,
   },
-  minWidth: 80,
+  minWidth: 30,
   shadowColor: '#101010',
   sm: {
     paddingHorizontal: 16,

package/src/tokens/components/dark/dialog.ts

@@ -9,6 +9,7 @@ export default {
   borderRadius: 16,
   content: {
     gap: 12,
+    paddingBottom: 12,
   },
   gap: 24,
   padding: 24,

package/src/tokens/components/dark/illustrations.ts

@@ -3,5 +3,6 @@
  */
 
 export default {
+  colorMode: 'dark',
   mode: 'dark',
 } as const;

package/src/tokens/components/dark/toast.ts

@@ -5,6 +5,9 @@
 export default {
   backgroundColor: '#3f3f3f',
   borderRadius: 8,
-  gapHorizontal: 8,
+  gapHorizontal: 16,
   padding: 14,
+  stack: {
+    gapHorizontal: 8,
+  },
 } as const;

package/src/tokens/components/light/button.ts

@@ -10,7 +10,7 @@ export default {
     paddingHorizontal: 16,
     paddingVertical: 12,
   },
-  minWidth: 80,
+  minWidth: 30,
   shadowColor: '#101010',
   sm: {
     paddingHorizontal: 16,

package/src/tokens/components/light/dialog.ts

@@ -9,6 +9,7 @@ export default {
   borderRadius: 16,
   content: {
     gap: 12,
+    paddingBottom: 12,
   },
   gap: 24,
   padding: 24,

package/src/tokens/components/light/illustrations.ts

@@ -3,5 +3,6 @@
  */
 
 export default {
+  colorMode: 'light',
   mode: 'light',
 } as const;

package/src/tokens/components/light/toast.ts

@@ -5,6 +5,9 @@
 export default {
   backgroundColor: '#101010',
   borderRadius: 8,
-  gapHorizontal: 8,
+  gapHorizontal: 16,
   padding: 14,
+  stack: {
+    gapHorizontal: 8,
+  },
 } as const;

package/src/tokens/layout.ts

@@ -8,8 +8,8 @@ export const mobile = {
     minWidth: 320,
   },
   container: {
+    margin: 16,
     paddingBottom: 32,
-    paddingHorizontal: 16,
     paddingTop: 24,
     width: 360,
   },
@@ -18,7 +18,6 @@ export const mobile = {
     columnWidth: 64,
     gridSize: 8,
     gutter: 16,
-    margin: 16,
   },
   spacing: {
     '2xl': 28,
@@ -38,8 +37,8 @@ export const tablet = {
     minWidth: 740,
   },
   container: {
+    margin: 32,
     paddingBottom: 32,
-    paddingHorizontal: 32,
     paddingTop: 24,
     width: 744,
   },
@@ -48,7 +47,6 @@ export const tablet = {
     columnWidth: 64,
     gridSize: 8,
     gutter: 24,
-    margin: 32,
   },
   spacing: {
     '2xl': 28,
@@ -68,8 +66,8 @@ export const desktop = {
     minWidth: 992,
   },
   container: {
+    margin: 32,
     paddingBottom: 48,
-    paddingHorizontal: 32,
     paddingTop: 32,
     width: 1096,
   },
@@ -78,7 +76,6 @@ export const desktop = {
     columnWidth: 64,
     gridSize: 8,
     gutter: 24,
-    margin: 32,
   },
   spacing: {
     '2xl': 40,

package/src/utils/getFlattenedColorValue.ts

@@ -1,4 +1,5 @@
 import { ColorValue } from '../types';
+import { resolveThemeValue } from './themeValueHelpers';
 
 type ThemeColor = string | { [key: string]: string | ThemeColor };
 
@@ -8,25 +9,5 @@ export default function getFlattenedColorValue(
 ): ColorValue {
   if (!value) return undefined;
 
-  if (colors?.[value] && typeof colors?.[value] === 'string') {
-    return colors?.[value] as ColorValue;
-  }
-
-  // Extract trailing digits as shade
-  const shadeMatch = value.match(/\d+$/);
-
-  if (!shadeMatch) return value as ColorValue;
-  const shade = shadeMatch[0];
-  const base = value.slice(0, -shade.length);
-
-  if (shade && typeof base !== 'string') return value as ColorValue;
-
-  const colorEntry = colors?.[base];
-
-  if (typeof colorEntry === 'object') {
-    return (colorEntry[shade] ?? value) as ColorValue;
-  } else if (typeof colorEntry === 'string') {
-    return colorEntry as ColorValue;
-  }
-  return value as ColorValue;
+  return resolveThemeValue(value, colors) as ColorValue;
 }

package/src/utils/getStyleValue.ts

@@ -1,6 +1,3 @@
- 
- 
-
 const getStyleValue = (value: any, type: Record<string, any>) => {
   if (typeof value === 'string') {
     const key = value;

package/src/utils/index.ts

@@ -5,3 +5,4 @@ export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';
 export { default as isEqual } from './isEqual';
 export * from './styleUtils';
+export * from './themeValueHelpers';

package/src/utils/styleUtils.ts

@@ -231,60 +231,3 @@ export const viewStyleProps = new Set<string>([
   // Z-index
   'zIndex',
 ]);
-
-/**
- * Helper function to convert camelCase back to nested object path
- * e.g., feedbackDangerSurfaceDefault -> ['feedback', 'danger', 'surface', 'default']
- */
-const camelCaseToPath = (camelCased: string): string[] => {
-  // Split on uppercase letters but keep them
-  const parts = camelCased.split(/(?=[A-Z])/).map(part => part.toLowerCase());
-  return parts;
-};
-
-/**
- * Helper function to get nested value from object using path array
- */
-const getNestedValue = (obj: any, path: string[]): any => {
-  return path.reduce((current, key) => {
-    return current && typeof current === 'object' ? current[key] : undefined;
-  }, obj);
-};
-
-/**
- * Helper function to resolve a theme value
- */
-export const resolveThemeValue = (value: any, themeMapping: any): any => {
-  if (typeof value !== 'string' || !themeMapping || typeof themeMapping !== 'object') {
-    return value;
-  }
-
-  // First, try direct lookup for simple values
-  if (themeMapping[value] !== undefined) {
-    return themeMapping[value];
-  }
-
-  // Try camelCase to nested path conversion (e.g., feedbackDangerSurfaceDefault)
-  if (/^[a-z][a-zA-Z]*$/.test(value)) {
-    // Only camelCase strings without numbers
-    const path = camelCaseToPath(value);
-    const nestedValue = getNestedValue(themeMapping, path);
-    if (nestedValue !== undefined) {
-      return nestedValue;
-    }
-  }
-
-  // Then, try the existing numeric suffix pattern (e.g., broadbandBlue100)
-  const shadeMatch = value.match(/\d+$/);
-  if (shadeMatch) {
-    const shade = shadeMatch[0];
-    const base = value.slice(0, -shade.length);
-    const nested = themeMapping[base];
-    if (nested && typeof nested === 'object') {
-      return nested[shade] ?? value;
-    }
-  }
-
-  // If none of the approaches work, return the original value
-  return value;
-};

package/src/utils/themeValueHelpers.ts

@@ -0,0 +1,60 @@
+/**
+ * Helper function to convert camelCase back to nested object path
+ * e.g., feedbackDangerSurfaceDefault -> ['feedback', 'danger', 'surface', 'default']
+ */
+export const camelCaseToPath = (camelCased: string): string[] => {
+  // Split on uppercase letters but keep them
+  const parts = camelCased.split(/(?=[A-Z])/).map(part => part.toLowerCase());
+  return parts;
+};
+
+/**
+ * Helper function to get nested value from object using path array
+ */
+export const getNestedValue = (obj: any, path: string[]): any => {
+  return path.reduce((current, key) => {
+    return current && typeof current === 'object' ? current[key] : undefined;
+  }, obj);
+};
+
+/**
+ * Helper function to resolve a theme value
+ * Supports:
+ * - Direct lookup (value -> themeMapping[value])
+ * - Camel case to nested path (feedbackDangerSurfaceDefault -> themeMapping.feedback.danger.surface.default)
+ * - Numeric suffix pattern (broadbandBlue100 -> themeMapping.broadbandBlue[100])
+ */
+export const resolveThemeValue = (value: any, themeMapping: any): any => {
+  if (typeof value !== 'string' || !themeMapping || typeof themeMapping !== 'object') {
+    return value;
+  }
+
+  // First, try direct lookup for simple values
+  if (themeMapping[value] !== undefined) {
+    return themeMapping[value];
+  }
+
+  // Try camelCase to nested path conversion (e.g., feedbackDangerSurfaceDefault)
+  if (/^[a-z][a-zA-Z]*$/.test(value)) {
+    // Only camelCase strings without numbers
+    const path = camelCaseToPath(value);
+    const nestedValue = getNestedValue(themeMapping, path);
+    if (nestedValue !== undefined) {
+      return nestedValue;
+    }
+  }
+
+  // Then, try the existing numeric suffix pattern (e.g., broadbandBlue100)
+  const shadeMatch = value.match(/\d+$/);
+  if (shadeMatch) {
+    const shade = shadeMatch[0];
+    const base = value.slice(0, -shade.length);
+    const nested = themeMapping[base];
+    if (nested && typeof nested === 'object') {
+      return nested[shade] ?? value;
+    }
+  }
+
+  // If none of the approaches work, return the original value
+  return value;
+};