@utilitywarehouse/hearth-react-native 0.30.4 → 0.31.1

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.30.4 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.31.1 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -42,24 +42,21 @@
   104:5   warning  React Hook useMemo has an unnecessary dependency: 'tabValues'. Either exclude it or remove the dependency array                           react-hooks/exhaustive-deps
   127:62  warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
 
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Textarea/Textarea.tsx
-  45:6  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Toast/Toast.context.tsx
    14: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
   106: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
 
-✖ 22 problems (0 errors, 22 warnings)
-
-Rule                              | Time (ms) | Relative
-:---------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars |  1518.313 |    61.5%
-react-hooks/exhaustive-deps       |   121.568 |     4.9%
-no-global-assign                  |    91.541 |     3.7%
-react-hooks/rules-of-hooks        |    72.207 |     2.9%
-no-unexpected-multiline           |    43.401 |     1.8%
-no-misleading-character-class     |    41.346 |     1.7%
-no-unsafe-optional-chaining       |    40.349 |     1.6%
-no-useless-escape                 |    38.755 |     1.6%
-no-fallthrough                    |    35.741 |     1.4%
-@typescript-eslint/ban-ts-comment |    34.017 |     1.4%
+✖ 21 problems (0 errors, 21 warnings)
+
+Rule                                              | Time (ms) | Relative
+:-------------------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars                 |  1546.291 |    60.2%
+react-hooks/exhaustive-deps                       |   108.680 |     4.2%
+no-global-assign                                  |    99.957 |     3.9%
+react-hooks/rules-of-hooks                        |    90.616 |     3.5%
+no-misleading-character-class                     |    53.413 |     2.1%
+no-unexpected-multiline                           |    51.887 |     2.0%
+@typescript-eslint/ban-ts-comment                 |    49.938 |     1.9%
+@typescript-eslint/no-unnecessary-type-constraint |    38.622 |     1.5%
+no-loss-of-precision                              |    33.899 |     1.3%
+no-useless-escape                                 |    30.813 |     1.2%

package/CHANGELOG.md

@@ -1,5 +1,170 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.31.1
+
+### Patch Changes
+
+- [#1119](https://github.com/utilitywarehouse/hearth/pull/1119) [`19415d4`](https://github.com/utilitywarehouse/hearth/commit/19415d4d54458b3fb019df6647b9a5e4c375b672) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Refresh dark mode tokens across components and semantic colors.
+
+  Dark mode color tokens have been updated across semantic and component tokens to improve contrast and visual consistency. This also fixes `TableHeaderCell` text colors so purple and white header variants resolve the correct foreground token.
+
+  **Components affected**:
+  - dark mode tokens
+  - `TableHeaderCell`
+
+  **Developer changes**:
+
+  No code changes are required unless you rely on the previous dark mode token values or visual snapshots.
+
+## 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/build/components/Badge/Badge.js

@@ -6,11 +6,11 @@ import { BadgeContext } from './Badge.context';
 import BadgeIcon from './BadgeIcon';
 import BadgeText from './BadgeText';
 const Badge = ({ children, ...props }) => {
-    const { variant = 'subtle', icon, colorScheme = 'info', flatBase = false, size = 'sm', style, text, ...rest } = props;
+    const { variant = 'subtle', icon, colorScheme = 'info', flatBase = false, size = 'sm', style, text, numberOfLines, ...rest } = props;
     const value = useMemo(() => ({ colorScheme, flatBase, variant, size }), [colorScheme, flatBase, variant, size]);
     const childIsText = typeof children === 'string' || typeof children === 'number' || !!text;
     styles.useVariants({ colorScheme, flatBase, variant, size });
-    return (_jsx(BadgeContext.Provider, { value: value, children: _jsxs(View, { ...rest, style: [styles.container, style], children: [!!icon && _jsx(BadgeIcon, { as: icon }), childIsText ? _jsx(BadgeText, { children: text ?? children }) : children] }) }));
+    return (_jsx(BadgeContext.Provider, { value: value, children: _jsxs(View, { ...rest, style: [styles.container, style], children: [!!icon && _jsx(BadgeIcon, { as: icon }), childIsText ? (_jsx(BadgeText, { numberOfLines: numberOfLines, children: text ?? children })) : (children)] }) }));
 };
 Badge.displayName = 'Badge';
 const styles = StyleSheet.create(theme => ({

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

@@ -7,5 +7,6 @@ interface BadgeProps extends ViewProps {
     icon?: ComponentType;
     flatBase?: boolean;
     text?: string | number;
+    numberOfLines?: number;
 }
 export default BadgeProps;

package/build/components/Badge/BadgeText.d.ts

@@ -1,6 +1,6 @@
 import { TextProps } from 'react-native';
 declare const BadgeText: {
-    ({ children, style, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, style, numberOfLines, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default BadgeText;

package/build/components/Badge/BadgeText.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { useBadgeContext } from './Badge.context';
-const BadgeText = ({ children, style, ...props }) => {
+const BadgeText = ({ children, style, numberOfLines = 1, ...props }) => {
     const { variant, colorScheme, size } = useBadgeContext();
     styles.useVariants({ variant, colorScheme });
-    return (_jsx(BodyText, { ...props, size: size, weight: "semibold", style: [styles.text, style], children: children }));
+    return (_jsx(BodyText, { ...props, numberOfLines: numberOfLines, size: size, weight: "semibold", style: [styles.text, style], children: children }));
 };
 BadgeText.displayName = 'BadgeText';
 const styles = StyleSheet.create(theme => ({

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

@@ -1,6 +1,6 @@
 import type { ViewProps } from 'react-native';
-import type { BackgroundColorProps, GapProps, MarginProps, PaddingProps, SpacingValues } from '../../types';
-interface ContainerProps extends ViewProps, MarginProps, PaddingProps, GapProps, BackgroundColorProps {
+import type { BackgroundColorProps, DisplayProps, FlexLayoutProps, GapProps, MarginProps, PaddingProps, SpacingValues } from '../../types';
+interface ContainerProps extends ViewProps, MarginProps, PaddingProps, GapProps, BackgroundColorProps, FlexLayoutProps, DisplayProps {
     /**
      * The spacing between child elements (gap).
      */

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

@@ -1,6 +1,6 @@
 import type ExpandableCardProps from './ExpandableCard.props';
 declare const ExpandableCard: {
-    ({ expanded: controlledExpanded, onExpandedChange, heading, helperText, leadingIcon, leadingContent, badge, badgePosition, numericValue, expandedContent, duration, animateOpacity, disabled, testID, children, ...cardProps }: ExpandableCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ expanded: controlledExpanded, onExpandedChange, heading, helperText, leadingIcon, leadingContent, badge, badgePosition, numericValue, triggerContent, expandedContent, duration, animateOpacity, disabled, testID, children, ...cardProps }: ExpandableCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default ExpandableCard;

package/build/components/ExpandableCard/ExpandableCard.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Card } from '../Card';
 import ExpandableCardExpandedContent from './ExpandableCardExpandedContent';
 import ExpandableCardTrigger from './ExpandableCardTrigger';
-const ExpandableCard = ({ expanded: controlledExpanded, onExpandedChange, heading, helperText, leadingIcon, leadingContent, badge, badgePosition = 'bottom', numericValue, expandedContent, duration = 200, animateOpacity = true, disabled = false, testID = 'expandable-card', children, ...cardProps }) => {
+const ExpandableCard = ({ expanded: controlledExpanded, onExpandedChange, heading, helperText, leadingIcon, leadingContent, badge, badgePosition = 'bottom', numericValue, triggerContent, expandedContent, duration = 200, animateOpacity = true, disabled = false, testID = 'expandable-card', children, ...cardProps }) => {
     const [internalExpanded, setInternalExpanded] = useState(false);
     // Use controlled or uncontrolled state
     const isExpanded = controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
@@ -16,7 +16,18 @@ const ExpandableCard = ({ expanded: controlledExpanded, onExpandedChange, headin
         }
         onExpandedChange?.(newExpanded);
     };
-    const renderDefaultContent = () => (_jsxs(_Fragment, { children: [_jsx(ExpandableCardTrigger, { onPress: handlePress, disabled: disabled, heading: heading, helperText: helperText, leadingIcon: leadingIcon, leadingContent: leadingContent, badge: badge, badgePosition: badgePosition, numericValue: numericValue, isExpanded: isExpanded, testID: `${testID}-trigger` }), _jsx(ExpandableCardExpandedContent, { isExpanded: isExpanded, duration: duration, animateOpacity: animateOpacity, children: expandedContent })] }));
+    const triggerProps = triggerContent !== undefined
+        ? { triggerContent }
+        : {
+            heading,
+            helperText,
+            leadingIcon,
+            leadingContent,
+            badge,
+            badgePosition,
+            numericValue,
+        };
+    const renderDefaultContent = () => (_jsxs(_Fragment, { children: [_jsx(ExpandableCardTrigger, { onPress: handlePress, disabled: disabled, ...triggerProps, isExpanded: isExpanded, testID: `${testID}-trigger` }), _jsx(ExpandableCardExpandedContent, { isExpanded: isExpanded, duration: duration, animateOpacity: animateOpacity, children: expandedContent })] }));
     return (_jsx(Card, { noPadding: true, ...cardProps, testID: testID, children: children || renderDefaultContent() }));
 };
 ExpandableCard.displayName = 'ExpandableCard';

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

@@ -1,6 +1,6 @@
 import type { ComponentType, ReactNode } from 'react';
 import type CardProps from '../Card/Card.props';
-export interface ExpandableCardProps extends Omit<CardProps, 'children'> {
+interface ExpandableCardSharedProps extends Omit<CardProps, 'children'> {
     /**
      * Whether the card is expanded
      */
@@ -9,6 +9,34 @@ export interface ExpandableCardProps extends Omit<CardProps, 'children'> {
      * Callback when expanded state changes
      */
     onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * The heading text displayed in the trigger
+     */
+    expandedContent?: ReactNode;
+    /**
+     * Duration of the expansion animation in milliseconds
+     * @default 200
+     */
+    duration?: number;
+    /**
+     * Whether to animate opacity during expansion
+     * @default true
+     */
+    animateOpacity?: boolean;
+    /**
+     * Whether the card is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Test ID for testing
+     */
+    testID?: string;
+    /**
+     * Custom children for advanced composition
+     */
+    children?: ReactNode;
+}
+interface ExpandableCardDefaultTriggerProps {
     /**
      * The heading text displayed in the trigger
      */
@@ -39,30 +67,22 @@ export interface ExpandableCardProps extends Omit<CardProps, 'children'> {
      */
     numericValue?: string | number;
     /**
-     * The content to show when expanded
-     */
-    expandedContent?: ReactNode;
-    /**
-     * Duration of the expansion animation in milliseconds
-     * @default 200
-     */
-    duration?: number;
-    /**
-     * Whether to animate opacity during expansion
-     * @default true
-     */
-    animateOpacity?: boolean;
-    /**
-     * Whether the card is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Test ID for testing
+     * Custom trigger content that replaces the default trigger layout.
      */
-    testID?: string;
+    triggerContent?: never;
+}
+interface ExpandableCardCustomTriggerProps {
     /**
-     * Custom children for advanced composition
+     * Custom trigger content that replaces the default trigger layout.
      */
-    children?: ReactNode;
+    triggerContent: ReactNode;
+    heading?: never;
+    helperText?: never;
+    leadingIcon?: never;
+    leadingContent?: never;
+    badge?: never;
+    badgePosition?: never;
+    numericValue?: never;
 }
+type ExpandableCardProps = ExpandableCardSharedProps & (ExpandableCardDefaultTriggerProps | ExpandableCardCustomTriggerProps);
 export default ExpandableCardProps;

package/build/components/ExpandableCard/ExpandableCardText.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BodyText } from '../BodyText';
 const ExpandableCardText = ({ children, ...props }) => {
-    return (_jsx(BodyText, { size: "lg", ...props, children: children }));
+    return (_jsx(BodyText, { size: "md", weight: "semibold", ...props, children: children }));
 };
 ExpandableCardText.displayName = 'ExpandableCardText';
 export default ExpandableCardText;

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

@@ -1,9 +1,9 @@
-declare const ExpandableCardTrigger: import("react").ForwardRefExoticComponent<import("./ExpandableCardTrigger.props").ExpandableCardTriggerProps & {
+declare const ExpandableCardTrigger: import("react").ForwardRefExoticComponent<(((import("./ExpandableCardTrigger.props").default & {
     states?: {
         active?: boolean;
         disabled?: boolean;
     };
-} & Omit<import("react-native").PressableProps, "children"> & {
+}) & Omit<import("react-native").PressableProps, "children">) & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {
@@ -13,5 +13,5 @@ declare const ExpandableCardTrigger: import("react").ForwardRefExoticComponent<i
         focusVisible?: boolean | undefined;
         disabled?: boolean | undefined;
     }) => import("react").ReactNode);
-} & import("react").RefAttributes<unknown>>;
+}) & import("react").RefAttributes<unknown>>;
 export default ExpandableCardTrigger;

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

@@ -1,6 +1,22 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { PressableProps } from 'react-native';
-export interface ExpandableCardTriggerProps extends Omit<PressableProps, 'children'> {
+interface ExpandableCardTriggerSharedProps extends Omit<PressableProps, 'children'> {
+    /**
+     * Whether the expandable card is expanded
+     */
+    isExpanded: boolean;
+    /**
+     * Whether to show the chevron when providing custom children.
+     * @default true
+     */
+    showChevron?: boolean;
+    /**
+     * Whether the trigger is disabled
+     */
+    disabled?: boolean;
+    children?: ReactNode;
+}
+interface ExpandableCardTriggerDefaultContentProps {
     /**
      * The main heading text
      */
@@ -31,13 +47,22 @@ export interface ExpandableCardTriggerProps extends Omit<PressableProps, 'childr
      */
     numericValue?: string | number;
     /**
-     * Whether the expandable card is expanded
+     * Custom trigger content that replaces the default trigger layout.
      */
-    isExpanded: boolean;
+    triggerContent?: never;
+}
+interface ExpandableCardTriggerCustomContentProps {
     /**
-     * Whether the trigger is disabled
+     * Custom trigger content that replaces the default trigger layout.
      */
-    disabled?: boolean;
-    children?: ReactNode;
+    triggerContent: ReactNode;
+    heading?: never;
+    helperText?: never;
+    leadingIcon?: never;
+    leadingContent?: never;
+    badge?: never;
+    badgePosition?: never;
+    numericValue?: never;
 }
+type ExpandableCardTriggerProps = ExpandableCardTriggerSharedProps & (ExpandableCardTriggerDefaultContentProps | ExpandableCardTriggerCustomContentProps);
 export default ExpandableCardTriggerProps;

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

@@ -1,6 +1,6 @@
 import type ExpandableCardTriggerProps from './ExpandableCardTrigger.props';
 declare const ExpandableCardTriggerRoot: {
-    ({ heading, helperText, leadingIcon, leadingContent, badge, badgePosition, numericValue, isExpanded, disabled, states, children, ...props }: ExpandableCardTriggerProps & {
+    ({ heading, helperText, leadingIcon, leadingContent, badge, badgePosition, numericValue, triggerContent, isExpanded, showChevron, disabled, states, children, ...props }: ExpandableCardTriggerProps & {
         states?: {
             active?: boolean;
             disabled?: boolean;

package/build/components/ExpandableCard/ExpandableCardTriggerRoot.js

@@ -10,7 +10,7 @@ import ExpandableCardLeadingContent from './ExpandableCardLeadingContent';
 import ExpandableCardText from './ExpandableCardText';
 import ExpandableCardTrailingContent from './ExpandableCardTrailingContent';
 import ExpandableCardTrailingIcon from './ExpandableCardTrailingIcon';
-const ExpandableCardTriggerRoot = ({ heading, helperText, leadingIcon, leadingContent, badge, badgePosition = 'bottom', numericValue, isExpanded, disabled, states, children, ...props }) => {
+const ExpandableCardTriggerRoot = ({ heading, helperText, leadingIcon, leadingContent, badge, badgePosition = 'bottom', numericValue, triggerContent, isExpanded, showChevron = true, disabled, states, children, ...props }) => {
     const { active } = states || { active: false };
     const testID = props.testID || 'expandable-card-trigger';
     styles.useVariants({
@@ -26,8 +26,19 @@ const ExpandableCardTriggerRoot = ({ heading, helperText, leadingIcon, leadingCo
         }
         return null;
     };
+    const defaultAccessibilityLabel = [heading, helperText].filter(Boolean).join(', ');
     const renderDefaultContent = () => (_jsxs(_Fragment, { children: [renderLeadingContent(), _jsxs(ExpandableCardContent, { children: [badgePosition === 'top' ? badge : null, _jsx(ExpandableCardText, { children: heading }), helperText && _jsx(ExpandableCardHelperText, { children: helperText }), badgePosition === 'bottom' ? badge : null] }), !!numericValue && (_jsx(BodyText, { weight: "semibold", style: styles.numericValue, children: numericValue })), _jsx(ExpandableCardTrailingContent, { style: styles.chevron, children: _jsx(ExpandableCardTrailingIcon, { as: isExpanded ? ChevronUpSmallIcon : ChevronDownSmallIcon }) })] }));
-    return (_jsx(Pressable, { ...props, testID: testID, style: [styles.container, props.style], disabled: disabled, accessibilityRole: "button", accessibilityState: { expanded: isExpanded, disabled }, accessibilityLabel: `${heading}${helperText ? `, ${helperText}` : ''}`, children: children || renderDefaultContent() }));
+    const renderChevron = () => (_jsx(ExpandableCardTrailingContent, { style: styles.chevron, children: _jsx(ExpandableCardTrailingIcon, { as: isExpanded ? ChevronUpSmallIcon : ChevronDownSmallIcon }) }));
+    const renderCustomTriggerContent = () => (_jsxs(_Fragment, { children: [triggerContent, showChevron ? renderChevron() : null] }));
+    const renderChildrenContent = () => (_jsxs(_Fragment, { children: [children, showChevron ? renderChevron() : null] }));
+    let triggerBody = renderDefaultContent();
+    if (triggerContent !== undefined) {
+        triggerBody = renderCustomTriggerContent();
+    }
+    if (children) {
+        triggerBody = renderChildrenContent();
+    }
+    return (_jsx(Pressable, { ...props, testID: testID, style: [styles.container, props.style], disabled: disabled, accessibilityRole: "button", accessibilityState: { expanded: isExpanded, disabled }, accessibilityLabel: props.accessibilityLabel || defaultAccessibilityLabel || undefined, children: triggerBody }));
 };
 ExpandableCardTriggerRoot.displayName = 'ExpandableCardTriggerRoot';
 const styles = StyleSheet.create(theme => ({

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

@@ -1,6 +1,6 @@
 import type { FlexAlignType, ViewProps, ViewStyle } from 'react-native';
-import { FlexLayoutProps, GapProps, SpacingValues } from '../../types';
-interface FlexProps extends ViewProps, FlexLayoutProps, GapProps {
+import { DisplayProps, FlexLayoutProps, GapProps, MarginProps, PaddingProps, SpacingValues } from '../../types';
+interface FlexProps extends ViewProps, MarginProps, PaddingProps, FlexLayoutProps, GapProps, Omit<DisplayProps, 'direction'> {
     direction?: ViewStyle['flexDirection'];
     align?: FlexAlignType;
     justify?: ViewStyle['justifyContent'];

package/build/components/FormField/FormField.d.ts

@@ -1,24 +1,24 @@
 import { View } from 'react-native';
 import FormFieldProps from './FormField.props';
-export declare const FormFieldComponent: import("@gluestack-ui/form-control/lib/types").IFormControlComponentType<import("react-native").ViewProps, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("..").IconProps, "as">, unknown, Omit<import("../Label/Label.props").default, "disabled">, unknown, Omit<import("../Helper/Helper.props").default, "validationStatus">, import("..").BodyTextProps>;
+export declare const FormFieldComponent: import("@gluestack-ui/form-control/lib/types").IFormControlComponentType<import("react-native").ViewProps, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("../Helper/Helper.props").default, "validationStatus">, Omit<import("..").IconProps, "as">, unknown, Omit<import("../Label/Label.props").default, "disabled">, unknown, Omit<import("../Helper/Helper.props").default, "validationStatus">, import("../BodyText").BodyTextProps>;
 export declare const FormFieldLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>> & {
     Text: import("react").ForwardRefExoticComponent<Omit<Omit<import("../Label/Label.props").default, "disabled">, "ref"> & import("react").RefAttributes<Omit<import("../Label/Label.props").default, "disabled">>>;
 };
 export declare const FormFieldLabelText: import("react").ForwardRefExoticComponent<Omit<Omit<import("../Label/Label.props").default, "disabled">, "ref"> & import("react").RefAttributes<Omit<import("../Label/Label.props").default, "disabled">>>;
 export declare const FormFieldHelper: import("react").ForwardRefExoticComponent<Omit<import("../Helper/Helper.props").default, "validationStatus"> & import("react").RefAttributes<Omit<import("../Helper/Helper.props").default, "validationStatus">>> & {
-    Text: import("react").ForwardRefExoticComponent<Omit<import("..").BodyTextProps, "ref"> & import("react").RefAttributes<import("..").BodyTextProps>>;
+    Text: import("react").ForwardRefExoticComponent<Omit<import("../BodyText").BodyTextProps, "ref"> & import("react").RefAttributes<import("../BodyText").BodyTextProps>>;
 };
-export declare const FormFieldHelperText: import("react").ForwardRefExoticComponent<Omit<import("..").BodyTextProps, "ref"> & import("react").RefAttributes<import("..").BodyTextProps>>;
+export declare const FormFieldHelperText: import("react").ForwardRefExoticComponent<Omit<import("../BodyText").BodyTextProps, "ref"> & import("react").RefAttributes<import("../BodyText").BodyTextProps>>;
 export declare const FormFieldHelperIcon: {
     (props: import("..").IconProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const FormFieldValidText: {
-    (props: import("..").BodyTextProps): import("react/jsx-runtime").JSX.Element;
+    (props: import("../BodyText").BodyTextProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const FormFieldInvalidText: {
-    (props: import("..").BodyTextProps): import("react/jsx-runtime").JSX.Element;
+    (props: import("../BodyText").BodyTextProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const FormFieldTextContent: typeof View;

package/build/components/FormField/FormField.js

@@ -1,7 +1,8 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createFormControl } from '@gluestack-ui/form-control';
 import { useMemo, useState } from 'react';
 import { View } from 'react-native';
+import { BodyText } from '../BodyText';
 import { HelperIcon, HelperText } from '../Helper';
 import { FormFieldContext } from './FormField.context';
 import FormFieldHelperComponent from './FormFieldHelper';
@@ -56,7 +57,7 @@ const FormField = ({ children, disabled, validationStatus = 'initial', readonly,
         setShouldHandleAccessibility,
         shouldHandleAccessibility,
     ]);
-    return (_jsx(FormFieldContext.Provider, { value: value, children: _jsxs(FormFieldComponent, { ...props, isDisabled: disabled, isReadOnly: readonly, children: [(!!label || !!helperText) && (_jsxs(FormFieldTextContent, { children: [!!label && (_jsxs(FormFieldLabelText, { variant: labelVariant, importantForAccessibility: shouldHandleAccessibility ? 'no' : undefined, accessibilityElementsHidden: shouldHandleAccessibility, children: [label, !required ? ` (Optional)` : ''] })), !!helperText && (_jsx(FormFieldHelper, { text: helperText, icon: helperIcon, showIcon: !!helperIcon, importantForAccessibility: shouldHandleAccessibility ? 'no' : undefined, accessibilityElementsHidden: shouldHandleAccessibility }))] })), children, !!validText && _jsx(FormFieldValid, { text: validText }), !!invalidText && _jsx(FormFieldInvalidComponent, { text: invalidText })] }) }));
+    return (_jsx(FormFieldContext.Provider, { value: value, children: _jsxs(FormFieldComponent, { ...props, isDisabled: disabled, isReadOnly: readonly, children: [(!!label || !!helperText) && (_jsxs(FormFieldTextContent, { children: [!!label && (_jsxs(FormFieldLabelText, { variant: labelVariant, importantForAccessibility: shouldHandleAccessibility ? 'no' : undefined, accessibilityElementsHidden: shouldHandleAccessibility, children: [label, !required ? _jsx(BodyText, { weight: "regular", children: " (Optional)" }) : ''] })), !!helperText && (_jsx(FormFieldHelper, { text: helperText, icon: helperIcon, showIcon: !!helperIcon, importantForAccessibility: shouldHandleAccessibility ? 'no' : undefined, accessibilityElementsHidden: shouldHandleAccessibility }))] })), children, !!validText && _jsx(FormFieldValid, { text: validText }), !!invalidText && _jsx(FormFieldInvalidComponent, { text: invalidText })] }) }));
 };
 FormField.displayName = 'FormField';
 export default FormField;

package/build/components/Modal/Modal.d.ts

@@ -3,5 +3,5 @@ import ModalProps from './Modal.props';
 type Modal<T = any> = BottomSheetModalMethods<T> & {
     triggerCloseAnimation?: () => void;
 };
-declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, loadingDescription, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, loadingDescription, fullscreen, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;