@utilitywarehouse/hearth-react-native 0.31.0 → 0.31.1

package/docs/changelog.mdx

@@ -9,6 +9,155 @@ 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.31.0
+
+### Minor Changes
+
+- [#1108](https://github.com/utilitywarehouse/hearth/pull/1108) [`8c2f3b5`](https://github.com/utilitywarehouse/hearth/commit/8c2f3b5334de83a7dd799b857394a34209b748e7) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add margin, padding, and layout utility props to `Flex`.
+
+  `Flex` now exposes the shared margin and padding utility props, along with the existing layout utility prop surface, so it can be used more like other layout primitives such as `Card`.
+
+  **Component affected**:
+  - `Flex`
+
+  **Developer changes**:
+
+  You can now apply spacing and layout utility props directly on `Flex`:
+
+  ```tsx
+  <Flex direction="row" spacing="md" padding="300" marginTop="200" flex={1}>
+    <Button>Back</Button>
+    <Button>Continue</Button>
+  </Flex>
+  ```
+
+- [#1104](https://github.com/utilitywarehouse/hearth/pull/1104) [`91feeab`](https://github.com/utilitywarehouse/hearth/commit/91feeab091ae6bf80e543f9196214066ce8b29b0) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add custom trigger content options to `ExpandableCard`.
+
+  `ExpandableCard` now supports a `triggerContent` prop for replacing the default trigger layout while keeping the chevron. `ExpandableCardTrigger` also now supports `children` with an optional `showChevron` prop, so you can fully compose the trigger content yourself and still opt in to the built-in expand/collapse chevron.
+
+  **Components affected**:
+  - `ExpandableCard`
+  - `ExpandableCardTrigger`
+
+  **Developer changes**:
+
+  Use `triggerContent` when you want a single prop on `ExpandableCard` to replace the standard trigger content:
+
+  ```tsx
+  <ExpandableCard
+    triggerContent={<BodyText weight="semibold">March bill ready</BodyText>}
+    expandedContent={<BodyText>Balance: £89.50</BodyText>}
+  />
+  ```
+
+  Use `ExpandableCardTrigger` children when you want full control over the trigger structure. Add `showChevron` if you still want the built-in chevron:
+
+  ```tsx
+  <ExpandableCardTrigger isExpanded={expanded} onPress={toggleExpanded} showChevron>
+    <ExpandableCardContent>
+      <ExpandableCardText>Custom trigger</ExpandableCardText>
+    </ExpandableCardContent>
+  </ExpandableCardTrigger>
+  ```
+
+- [#1109](https://github.com/utilitywarehouse/hearth/pull/1109) [`8215550`](https://github.com/utilitywarehouse/hearth/commit/8215550745d08a8b4c18a6902e39d3199018092a) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `numberOfLines` support to `Badge` text.
+
+  `Badge` now renders its text content on a single line by default and supports a new `numberOfLines` prop when you want to allow more lines.
+
+  **Components affected**:
+  - `Badge`
+
+  **Developer changes**:
+
+  No changes are required unless you want a `Badge` to wrap onto more than one line. To opt in, pass `numberOfLines`:
+
+  ```tsx
+  <Badge numberOfLines={2} text="Long badge text that can wrap onto a second line" />
+  ```
+
+- [#1108](https://github.com/utilitywarehouse/hearth/pull/1108) [`8c2f3b5`](https://github.com/utilitywarehouse/hearth/commit/8c2f3b5334de83a7dd799b857394a34209b748e7) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add custom footer support to `Modal` and `NavModal`.
+
+  `Modal` and `NavModal` now support a `footer` prop for replacing the built-in primary and secondary action buttons with custom content, plus a `footerStyle` prop for styling the footer container. When `footer` is provided, the button props are now disallowed at the type level.
+
+  **Components affected**:
+  - `Modal`
+  - `NavModal`
+
+  **Developer changes**:
+
+  Use `footer` when you need a custom footer layout, such as horizontal actions or extra decoration:
+
+  ```tsx
+  <Modal
+    heading="Update billing details"
+    footer={
+      <Flex direction="row" spacing="md" pt="250">
+        <Button variant="outline" colorScheme="functional" style={{ flex: 1 }}>
+          Cancel
+        </Button>
+        <Button style={{ flex: 1 }}>Save changes</Button>
+      </Flex>
+    }
+    footerStyle={{
+      boxShadow: '0px -6px 12px rgba(16, 24, 40, 0.12)',
+    }}
+  />
+  ```
+
+- [#1103](https://github.com/utilitywarehouse/hearth/pull/1103) [`e375a44`](https://github.com/utilitywarehouse/hearth/commit/e375a442c507da1807e49f4d78e44edfff51d245) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add optional vertical resizing to `Textarea`.
+
+  `Textarea` now supports a new `resizable` prop that adds a bottom-right drag handle so people can increase the field height when they need more space for longer content.
+
+  **Components affected**:
+  - `Textarea`
+
+  **Developer changes**:
+
+  No changes are required unless you want to enable resizing for a textarea. To opt in, pass the new `resizable` prop:
+
+  ```tsx
+  <Textarea
+    label="Additional notes"
+    helperText="Drag the corner handle to resize"
+    placeholder="Enter your text here..."
+    resizable
+  />
+  ```
+
+- [#1108](https://github.com/utilitywarehouse/hearth/pull/1108) [`8c2f3b5`](https://github.com/utilitywarehouse/hearth/commit/8c2f3b5334de83a7dd799b857394a34209b748e7) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add flex utility props to `Container`.
+
+  `Container` now exposes shared flex layout utility props, allowing layout properties such as `flex`, `alignItems`, `justifyContent`, and `flexDirection` to be applied directly through its public prop API.
+
+  **Component affected**:
+  - `Container`
+
+  **Developer changes**:
+
+  You can now combine `Container`'s existing spacing props with flex layout props:
+
+  ```tsx
+  <Container flex={1} justifyContent="center" alignItems="stretch" gap="200">
+    <BodyText>Content</BodyText>
+  </Container>
+  ```
+
+### Patch Changes
+
+- [#1103](https://github.com/utilitywarehouse/hearth/pull/1103) [`e375a44`](https://github.com/utilitywarehouse/hearth/commit/e375a442c507da1807e49f4d78e44edfff51d245) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Render FormField optional text with regular weight instead of inheriting the label weight.
+
+  This fixes FormField labels that append `(Optional)` so the optional text no longer inherits the main label weight.
+
+  **Components affected**:
+  - `FormField`
+  - `Textarea`
+  - `Input`
+
+  **Developer changes**:
+
+  No changes are required.
+
+- [#1104](https://github.com/utilitywarehouse/hearth/pull/1104) [`91feeab`](https://github.com/utilitywarehouse/hearth/commit/91feeab091ae6bf80e543f9196214066ce8b29b0) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: `ExpandableCard` heading font size and weight
+
 ## 0.30.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.31.0",
+  "version": "0.31.1",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -58,10 +58,10 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.8.0",
     "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.6.0",
-    "@utilitywarehouse/hearth-tokens": "^0.2.4"
+    "@utilitywarehouse/hearth-tokens": "^0.2.4",
+    "@utilitywarehouse/hearth-react-icons": "^0.8.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",

package/src/components/Table/TableHeaderCell.tsx

@@ -11,9 +11,10 @@ const renderContent = (
   weight: 'regular' | 'semibold' = 'semibold',
   color: 'purple' | 'white' = 'white'
 ) => {
+  styles.useVariants({ color });
   if (typeof children === 'string' || typeof children === 'number') {
     return (
-      <BodyText size="md" weight={weight} style={styles.text} inverted={color === 'purple'}>
+      <BodyText size="md" weight={weight} style={styles.text}>
         {children}
       </BodyText>
     );
@@ -129,6 +130,14 @@ const styles = StyleSheet.create(theme => ({
           color: theme.color.text.primary,
         },
       },
+      color: {
+        purple: {
+          color: theme.components.table.headerCell.foregoundColorInverted,
+        },
+        white: {
+          color: theme.components.table.headerCell.foregoundColor,
+        },
+      },
     },
   },
 }));

package/src/tokens/color.ts

@@ -94,6 +94,7 @@ export const grey = {
   '700': '#4c4c4c',
   '800': '#3f3f3f',
   '900': '#3a3837',
+  '925': '#2f2d2d',
   '950': '#232323',
   '975': '#191919',
   '1000': '#101010',
@@ -480,25 +481,25 @@ export const light = {
 
 export const dark = {
   background: {
-    brand: '#7a42c8',
+    brand: '#442484',
     loading: '#30302c',
     primary: '#191917',
-    secondary: '#232323',
+    secondary: '#2f2d2d',
   },
   border: {
-    strong: '#ebebeb',
-    subtle: '#4c473d',
+    strong: '#888888',
+    subtle: '#5b5b5b',
   },
   feedback: {
     danger: {
-      border: '#ff7964',
+      border: '#f4412a',
       foreground: {
-        default: '#101010',
+        default: '#ffffff',
         subtle: '#ff7964',
       },
       surface: {
-        default: '#ff634a',
-        subtle: '#ffa89d',
+        default: '#de2612',
+        subtle: '#6b1f1a',
       },
     },
     functional: {
@@ -513,36 +514,36 @@ export const dark = {
       },
     },
     info: {
-      border: '#6bb0ff',
+      border: '#2786f1',
       foreground: {
-        default: '#101010',
+        default: '#ffffff',
         subtle: '#6bb0ff',
       },
       surface: {
-        default: '#6bb0ff',
-        subtle: '#bcddff',
+        default: '#1c6cd4',
+        subtle: '#0b3375',
       },
     },
     positive: {
-      border: '#58ca93',
+      border: '#19a660',
       foreground: {
-        default: '#101010',
+        default: '#ffffff',
         subtle: '#58ca93',
       },
       surface: {
-        default: '#36bf7d',
-        subtle: '#a2e2c3',
+        default: '#0f834a',
+        subtle: '#074b2a',
       },
     },
     warning: {
-      border: '#ff9639',
+      border: '#f56e00',
       foreground: {
-        default: '#101010',
+        default: '#ffffff',
         subtle: '#ff9639',
       },
       surface: {
-        default: '#ff8010',
-        subtle: '#ffcca8',
+        default: '#cf5d00',
+        subtle: '#893900',
       },
     },
   },
@@ -585,9 +586,9 @@ export const dark = {
       },
       surface: {
         strong: {
-          active: '#c6b5e2',
-          default: '#996cda',
-          hover: '#af90de',
+          active: '#ddd5eb',
+          default: '#af90de',
+          hover: '#c6b5e2',
         },
       },
     },
@@ -670,52 +671,52 @@ export const dark = {
     },
   },
   shadow: {
-    brand: '#7a42c8',
-    broadband: '#506c21',
-    cashback: '#8b2bc9',
-    default: '#f7f7f7',
-    energy: '#326e7a',
-    insurance: '#9b4c0e',
-    mobile: '#a7266d',
-    pig: '#8f358f',
+    brand: '#442484',
+    broadband: '#4f6b20',
+    cashback: '#7429b5',
+    default: '#3f3f3f',
+    energy: '#2c6370',
+    insurance: '#7f4518',
+    mobile: '#8a3260',
+    pig: '#7a1f7e',
   },
   surface: {
     brand: {
-      default: '#996cda',
+      default: '#af90de',
       strong: '#26164f',
       subtle: '#442484',
     },
     broadband: {
       default: '#506c21',
-      subtle: '#35421c',
+      subtle: '#4f6b20',
     },
     cashback: {
       default: '#8b2bc9',
-      subtle: '#522270',
+      subtle: '#7429b5',
     },
     energy: {
       default: '#326e7a',
-      subtle: '#254348',
+      subtle: '#2c6370',
     },
     highlight: {
       default: '#ffb921',
-      subtle: '#756230',
+      subtle: '#82692b',
     },
     insurance: {
       default: '#9b4c0e',
-      subtle: '#5a3213',
+      subtle: '#7f4518',
     },
     mobile: {
       default: '#a7266d',
-      subtle: '#601f42',
+      subtle: '#8a3260',
     },
     neutral: {
-      strong: '#232323',
+      strong: '#2f2d2d',
       subtle: '#191917',
     },
     pig: {
       default: '#8f358f',
-      subtle: '#5d2167',
+      subtle: '#7a1f7e',
     },
   },
   text: {

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

@@ -10,15 +10,15 @@ export default {
   gap: 8,
   iconButton: {
     unstyled: {
-      foregroundColor: '#101010',
-      foregroundColorActive: '#3f3f3f',
-      foregroundColorHover: '#3a3837',
+      foregroundColor: '#ebebeb',
+      foregroundColorActive: '#b2afae',
+      foregroundColorHover: '#d3d3d3',
     },
   },
   link: {
-    color: '#101010',
-    colorActive: '#3f3f3f',
-    colorHover: '#3a3837',
+    color: '#ebebeb',
+    colorActive: '#b2afae',
+    colorHover: '#d3d3d3',
   },
   padding: 14,
 } as const;

package/src/tokens/components/dark/bottom-navigation.ts

@@ -12,10 +12,10 @@ export default {
   item: {
     gap: 2,
     icon: {
-      colorActive: '#996cda',
+      colorActive: '#af90de',
     },
     label: {
-      colorActive: '#996cda',
+      colorActive: '#af90de',
     },
     paddingBottom: 2,
     paddingHorizontal: 0,

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

@@ -6,7 +6,7 @@ export default {
   borderRadius: 4,
   borderWidth: 2,
   checked: {
-    backgroundColor: '#ebebeb',
+    backgroundColor: '#888888',
     icon: {
       color: '#101010',
     },

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

@@ -5,9 +5,9 @@
 export default {
   iconButton: {
     unstyled: {
-      foregroundColor: '#101010',
-      foregroundColorActive: '#3f3f3f',
-      foregroundColorHover: '#3a3837',
+      foregroundColor: '#ebebeb',
+      foregroundColorActive: '#b2afae',
+      foregroundColorHover: '#d3d3d3',
     },
   },
   borderRadius: 8,

package/src/tokens/components/dark/inline-link.ts

@@ -4,7 +4,7 @@
 
 export default {
   color: '#6bb0ff',
-  colorVisited: '#996cda',
+  colorVisited: '#af90de',
   inverted: {
     color: '#fcfbf2',
     colorActive: '#f1efe4',

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

@@ -4,9 +4,9 @@
 
 export default {
   link: {
-    color: '#101010',
-    colorActive: '#3f3f3f',
-    colorHover: '#3a3837',
+    color: '#ebebeb',
+    colorActive: '#b2afae',
+    colorHover: '#d3d3d3',
   },
   color: '#ebebeb',
   colorActive: '#b2afae',

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

@@ -7,12 +7,12 @@ export default {
     borderRadiusNone: 0,
     borderRadiusRounded: 4,
   },
-  borderBottom: '#5c2ca9',
+  borderBottom: '#996cda',
   borderRadius: 6,
   desktop: {
     height: 88,
   },
-  dividerBorderColor: '#5c2ca9',
+  dividerBorderColor: '#996cda',
   gap: 4,
   mobile: {
     height: 64,

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

@@ -27,7 +27,7 @@ export default {
   },
   statusBar: {
     foregroundColor: '#ffffff',
-    foregroundColorInverted: '#000000',
-    notch: '#000000',
+    foregroundColorInverted: '#ffffff',
+    notch: '#101010',
   },
 } as const;

package/src/tokens/components/dark/progress-bar.ts

@@ -34,8 +34,8 @@ export default {
     },
   },
   progress: {
-    dangerColor: '#ff634a',
-    defaultColor: '#c6b5e2',
-    successColor: '#36bf7d',
+    dangerColor: '#f4412a',
+    defaultColor: '#996cda',
+    successColor: '#19a660',
   },
 } as const;

package/src/tokens/components/dark/progress-stepper.ts

@@ -5,7 +5,7 @@
 export default {
   bar: {
     complete: {
-      backgroundColor: '#7a42c8',
+      backgroundColor: '#996cda',
     },
     height: 2,
   },

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

@@ -3,7 +3,7 @@
  */
 
 export default {
-  defaultFill: '#af90de',
+  defaultFill: '#996cda',
   lg: {
     size: 40,
     strokeWidth: 3,

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

@@ -14,6 +14,8 @@ export default {
   },
   headerCell: {
     borderWidth: 2,
+    foregoundColor: '#ebebeb',
+    foregoundColorInverted: '#101010',
     gap: 8,
     height: 56,
     paddingHorizontal: 12,

package/src/tokens/components/dark/time-picker.ts

@@ -3,6 +3,7 @@
  */
 
 export default {
+  fade: '#2f2d2d00',
   gap: 6,
   gapContainer: 4,
   minWidth: 288,

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

@@ -4,7 +4,7 @@
 
 export default {
   homeIndicator: {
-    foregroundColor: '#000000',
+    foregroundColor: '#101010',
     foregroundColorInverted: '#ffffff',
   },
   modalStack: {
@@ -26,8 +26,8 @@ export default {
     borderRadius: 9999,
   },
   statusBar: {
-    foregroundColor: '#000000',
+    foregroundColor: '#101010',
     foregroundColorInverted: '#ffffff',
-    notch: '#000000',
+    notch: '#101010',
   },
 } as const;

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

@@ -14,6 +14,8 @@ export default {
   },
   headerCell: {
     borderWidth: 2,
+    foregoundColor: '#101010',
+    foregoundColorInverted: '#ffffff',
     gap: 8,
     height: 56,
     paddingHorizontal: 12,

package/src/tokens/components/light/time-picker.ts

@@ -3,6 +3,7 @@
  */
 
 export default {
+  fade: '#ffffff00',
   gap: 6,
   gapContainer: 4,
   minWidth: 288,