@metamask/design-system-react-native 0.18.0 → 0.20.0

package/dist/components/Checkbox/Checkbox.types.d.mts

@@ -1,41 +1,15 @@
+import type { CheckboxPropsShared } from "@metamask/design-system-shared";
 import type { PressableProps, ViewProps } from "react-native/index.js";
 import type { IconProps } from "../Icon/index.mjs";
 import type { TextProps } from "../Text/index.mjs";
 /**
  * Checkbox component props.
  */
-export type CheckboxProps = {
-    /**
-     * Required prop to determine whether the checkbox is currently selected.
-     * This component is fully controlled, so you must manage this state
-     * in your parent component.
-     */
-    isSelected: boolean;
-    /**
-     * Optional prop that when true, disables the checkbox.
-     *
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Optional prop that when true, displays the invalid/error state of the checkbox.
-     *
-     * @default false
-     */
-    isInvalid?: boolean;
-    /**
-     * Optional label prop that renders text or a React node as a label beside the checkbox.
-     */
-    label?: React.ReactNode | string;
+export type CheckboxProps = CheckboxPropsShared & {
     /**
      * Optional props to be passed to the label's Text component.
      */
     labelProps?: Omit<Partial<TextProps>, 'children'>;
-    /**
-     * Required callback for when the checked state changes.
-     * Use this to update your state.
-     */
-    onChange: (isSelected: boolean) => void;
     /**
      * Optional props passed to the container view wrapping the checkbox icon.
      */

package/dist/components/Checkbox/Checkbox.types.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,8BAAqB;AAE9D,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC;;GAEG;AAEH,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAEjC;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAElD;;;OAGG;IACH,QAAQ,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,sBAAsB,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAE9D;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAEtC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"Checkbox.types.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,uCAAuC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,8BAAqB;AAE9D,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG;IAChD;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAElD;;OAEG;IACH,sBAAsB,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAE9D;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAEtC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC"}

package/dist/components/Checkbox/Checkbox.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { PressableProps, ViewProps } from 'react-native';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n/**\n * Checkbox component props.\n */\n\nexport type CheckboxProps = {\n  /**\n   * Required prop to determine whether the checkbox is currently selected.\n   * This component is fully controlled, so you must manage this state\n   * in your parent component.\n   */\n  isSelected: boolean;\n\n  /**\n   * Optional prop that when true, disables the checkbox.\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Optional prop that when true, displays the invalid/error state of the checkbox.\n   *\n   * @default false\n   */\n  isInvalid?: boolean;\n\n  /**\n   * Optional label prop that renders text or a React node as a label beside the checkbox.\n   */\n  label?: React.ReactNode | string;\n\n  /**\n   * Optional props to be passed to the label's Text component.\n   */\n  labelProps?: Omit<Partial<TextProps>, 'children'>;\n\n  /**\n   * Required callback for when the checked state changes.\n   * Use this to update your state.\n   */\n  onChange: (isSelected: boolean) => void;\n\n  /**\n   * Optional props passed to the container view wrapping the checkbox icon.\n   */\n  checkboxContainerProps?: Omit<Partial<ViewProps>, 'children'>;\n\n  /**\n   * Optional props to be passed to the check Icon component.\n   */\n  checkedIconProps?: Partial<IconProps>;\n\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n\n  /**\n   * Optional prop to control the style.\n   */\n  style?: PressableProps['style'];\n} & Omit<PressableProps, 'children'>;\n"]}
+{"version":3,"file":"Checkbox.types.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CheckboxPropsShared } from '@metamask/design-system-shared';\nimport type { PressableProps, ViewProps } from 'react-native';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\n/**\n * Checkbox component props.\n */\nexport type CheckboxProps = CheckboxPropsShared & {\n  /**\n   * Optional props to be passed to the label's Text component.\n   */\n  labelProps?: Omit<Partial<TextProps>, 'children'>;\n\n  /**\n   * Optional props passed to the container view wrapping the checkbox icon.\n   */\n  checkboxContainerProps?: Omit<Partial<ViewProps>, 'children'>;\n\n  /**\n   * Optional props to be passed to the check Icon component.\n   */\n  checkedIconProps?: Partial<IconProps>;\n\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n\n  /**\n   * Optional prop to control the style.\n   */\n  style?: PressableProps['style'];\n} & Omit<PressableProps, 'children'>;\n"]}

package/dist/components/HeaderRoot/HeaderRoot.cjs

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderRoot = void 0;
 // Third party dependencies.
-const design_system_shared_1 = require("@metamask/design-system-shared");
 const react_1 = __importDefault(require("react"));
 const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 // External dependencies.
@@ -15,10 +14,6 @@ const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
 const Text_1 = require("../Text/index.cjs");
 const HeaderRoot = ({ children, title, titleProps, titleAccessory, endAccessory, endButtonIconProps, includesTopInset = false, style, testID, twClassName, ...viewProps }) => {
     const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    const hasRenderableChildren = (0, design_system_shared_1.isReactNodeRenderable)(children);
-    const hasTitleContent = title !== false &&
-        ((0, design_system_shared_1.isReactNodeRenderable)(title) || (0, design_system_shared_1.isReactNodeRenderable)(titleAccessory));
-    const shouldRenderTitleRow = !hasRenderableChildren && hasTitleContent;
     const endSectionContent = (() => {
         if (endAccessory) {
             return endAccessory;
@@ -31,27 +26,23 @@ const HeaderRoot = ({ children, title, titleProps, titleAccessory, endAccessory,
         }
         return null;
     })();
-    const hasEndSection = Boolean(endSectionContent);
     const renderLeftSection = () => {
-        if (hasRenderableChildren) {
+        if (children) {
             return children;
         }
-        if (shouldRenderTitleRow) {
-            const titleNode = (0, design_system_shared_1.isReactNodeRenderable)(title) && title !== '' ? title : null;
+        if (title) {
             return (<BoxRow_1.BoxRow endAccessory={titleAccessory} textProps={{
                     variant: Text_1.TextVariant.HeadingLg,
                     ...titleProps,
-                }}>
-          {titleNode}
+                }} twClassName="flex-1">
+          {title}
         </BoxRow_1.BoxRow>);
         }
         return null;
     };
     return (<Box_1.Box flexDirection={Box_1.BoxFlexDirection.Row} alignItems={Box_1.BoxAlignItems.Center} gap={4} paddingLeft={4} paddingRight={2} twClassName={`min-h-14 ${twClassName ?? ''}`.trim()} style={[includesTopInset && { marginTop: insets.top }, style]} testID={testID} {...viewProps}>
-      <Box_1.Box alignItems={Box_1.BoxAlignItems.Start} style={{ flex: 1 }}>
-        {renderLeftSection()}
-      </Box_1.Box>
-      {hasEndSection ? (<Box_1.Box flexDirection={Box_1.BoxFlexDirection.Row} gap={2}>
+      {renderLeftSection()}
+      {endSectionContent ? (<Box_1.Box flexDirection={Box_1.BoxFlexDirection.Row} gap={2} twClassName="ml-auto">
           {endSectionContent}
         </Box_1.Box>) : null}
     </Box_1.Box>);

package/dist/components/HeaderRoot/HeaderRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderRoot.cjs","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport { isReactNodeRenderable } from '@metamask/design-system-shared';\nimport React from 'react';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// External dependencies.\nimport { Box, BoxAlignItems, BoxFlexDirection } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { TextVariant } from '../Text';\n\n// Internal dependencies.\nimport type { HeaderRootProps } from './HeaderRoot.types';\n\nexport const HeaderRoot = ({\n  children,\n  title,\n  titleProps,\n  titleAccessory,\n  endAccessory,\n  endButtonIconProps,\n  includesTopInset = false,\n  style,\n  testID,\n  twClassName,\n  ...viewProps\n}: HeaderRootProps) => {\n  const insets = useSafeAreaInsets();\n\n  const hasRenderableChildren = isReactNodeRenderable(children);\n\n  const hasTitleContent =\n    title !== false &&\n    (isReactNodeRenderable(title) || isReactNodeRenderable(titleAccessory));\n\n  const shouldRenderTitleRow = !hasRenderableChildren && hasTitleContent;\n\n  const endSectionContent = (() => {\n    if (endAccessory) {\n      return endAccessory;\n    }\n    if (endButtonIconProps && endButtonIconProps.length > 0) {\n      const reversedProps = endButtonIconProps\n        .map((props, originalIndex) => ({ props, originalIndex }))\n        .reverse();\n      return reversedProps.map(({ props, originalIndex }) => (\n        <ButtonIcon\n          key={`end-button-icon-${originalIndex}`}\n          size={ButtonIconSize.Md}\n          {...props}\n        />\n      ));\n    }\n    return null;\n  })();\n\n  const hasEndSection = Boolean(endSectionContent);\n\n  const renderLeftSection = () => {\n    if (hasRenderableChildren) {\n      return children;\n    }\n    if (shouldRenderTitleRow) {\n      const titleNode =\n        isReactNodeRenderable(title) && title !== '' ? title : null;\n      return (\n        <BoxRow\n          endAccessory={titleAccessory}\n          textProps={{\n            variant: TextVariant.HeadingLg,\n            ...titleProps,\n          }}\n        >\n          {titleNode}\n        </BoxRow>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Center}\n      gap={4}\n      paddingLeft={4}\n      paddingRight={2}\n      twClassName={`min-h-14 ${twClassName ?? ''}`.trim()}\n      style={[includesTopInset && { marginTop: insets.top }, style]}\n      testID={testID}\n      {...viewProps}\n    >\n      <Box alignItems={BoxAlignItems.Start} style={{ flex: 1 }}>\n        {renderLeftSection()}\n      </Box>\n      {hasEndSection ? (\n        <Box flexDirection={BoxFlexDirection.Row} gap={2}>\n          {endSectionContent}\n        </Box>\n      ) : null}\n    </Box>\n  );\n};\n\nHeaderRoot.displayName = 'HeaderRoot';\n"]}
+{"version":3,"file":"HeaderRoot.cjs","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,kDAA0B;AAC1B,mFAAmE;AAEnE,yBAAyB;AACzB,0CAA8D;AAC9D,gDAAmC;AACnC,wDAA2D;AAC3D,4CAAsC;AAK/B,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,GAAG,KAAK,EACxB,KAAK,EACL,MAAM,EACN,WAAW,EACX,GAAG,SAAS,EACI,EAAE,EAAE;IACpB,MAAM,MAAM,GAAG,IAAA,kDAAiB,GAAE,CAAC;IAEnC,MAAM,iBAAiB,GAAG,CAAC,GAAG,EAAE;QAC9B,IAAI,YAAY,EAAE;YAChB,OAAO,YAAY,CAAC;SACrB;QACD,IAAI,kBAAkB,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE;YACvD,MAAM,aAAa,GAAG,kBAAkB;iBACrC,GAAG,CAAC,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,CAAC;iBACzD,OAAO,EAAE,CAAC;YACb,OAAO,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CACrD,CAAC,uBAAU,CACT,GAAG,CAAC,CAAC,mBAAmB,aAAa,EAAE,CAAC,CACxC,IAAI,CAAC,CAAC,2BAAc,CAAC,EAAE,CAAC,CACxB,IAAI,KAAK,CAAC,EACV,CACH,CAAC,CAAC;SACJ;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,EAAE,CAAC;IAEL,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,IAAI,QAAQ,EAAE;YACZ,OAAO,QAAQ,CAAC;SACjB;QACD,IAAI,KAAK,EAAE;YACT,OAAO,CACL,CAAC,eAAM,CACL,YAAY,CAAC,CAAC,cAAc,CAAC,CAC7B,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,kBAAW,CAAC,SAAS;oBAC9B,GAAG,UAAU;iBACd,CAAC,CACF,WAAW,CAAC,QAAQ,CAEpB;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,eAAM,CAAC,CACV,CAAC;SACH;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,SAAG,CACF,aAAa,CAAC,CAAC,sBAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,mBAAa,CAAC,MAAM,CAAC,CACjC,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,YAAY,CAAC,CAAC,CAAC,CAAC,CAChB,WAAW,CAAC,CAAC,YAAY,WAAW,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CACpD,KAAK,CAAC,CAAC,CAAC,gBAAgB,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,KAAK,CAAC,CAAC,CAC9D,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,SAAS,CAAC,CAEd;MAAA,CAAC,iBAAiB,EAAE,CACpB;MAAA,CAAC,iBAAiB,CAAC,CAAC,CAAC,CACnB,CAAC,SAAG,CAAC,aAAa,CAAC,CAAC,sBAAgB,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,CACrE;UAAA,CAAC,iBAAiB,CACpB;QAAA,EAAE,SAAG,CAAC,CACP,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,SAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AA3EW,QAAA,UAAU,cA2ErB;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["// Third party dependencies.\nimport React from 'react';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// External dependencies.\nimport { Box, BoxAlignItems, BoxFlexDirection } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { TextVariant } from '../Text';\n\n// Internal dependencies.\nimport type { HeaderRootProps } from './HeaderRoot.types';\n\nexport const HeaderRoot = ({\n  children,\n  title,\n  titleProps,\n  titleAccessory,\n  endAccessory,\n  endButtonIconProps,\n  includesTopInset = false,\n  style,\n  testID,\n  twClassName,\n  ...viewProps\n}: HeaderRootProps) => {\n  const insets = useSafeAreaInsets();\n\n  const endSectionContent = (() => {\n    if (endAccessory) {\n      return endAccessory;\n    }\n    if (endButtonIconProps && endButtonIconProps.length > 0) {\n      const reversedProps = endButtonIconProps\n        .map((props, originalIndex) => ({ props, originalIndex }))\n        .reverse();\n      return reversedProps.map(({ props, originalIndex }) => (\n        <ButtonIcon\n          key={`end-button-icon-${originalIndex}`}\n          size={ButtonIconSize.Md}\n          {...props}\n        />\n      ));\n    }\n    return null;\n  })();\n\n  const renderLeftSection = () => {\n    if (children) {\n      return children;\n    }\n    if (title) {\n      return (\n        <BoxRow\n          endAccessory={titleAccessory}\n          textProps={{\n            variant: TextVariant.HeadingLg,\n            ...titleProps,\n          }}\n          twClassName=\"flex-1\"\n        >\n          {title}\n        </BoxRow>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Center}\n      gap={4}\n      paddingLeft={4}\n      paddingRight={2}\n      twClassName={`min-h-14 ${twClassName ?? ''}`.trim()}\n      style={[includesTopInset && { marginTop: insets.top }, style]}\n      testID={testID}\n      {...viewProps}\n    >\n      {renderLeftSection()}\n      {endSectionContent ? (\n        <Box flexDirection={BoxFlexDirection.Row} gap={2} twClassName=\"ml-auto\">\n          {endSectionContent}\n        </Box>\n      ) : null}\n    </Box>\n  );\n};\n\nHeaderRoot.displayName = 'HeaderRoot';\n"]}

package/dist/components/HeaderRoot/HeaderRoot.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderRoot.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc;AAU1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU;oJAYpB,eAAe;;CA4EjB,CAAC"}
+{"version":3,"file":"HeaderRoot.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAU1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU;oJAYpB,eAAe;;CA+DjB,CAAC"}

package/dist/components/HeaderRoot/HeaderRoot.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderRoot.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc;AAU1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU;oJAYpB,eAAe;;CA4EjB,CAAC"}
+{"version":3,"file":"HeaderRoot.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAU1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU;oJAYpB,eAAe;;CA+DjB,CAAC"}

package/dist/components/HeaderRoot/HeaderRoot.mjs

@@ -5,7 +5,6 @@ function $importDefault(module) {
     return module;
 }
 // Third party dependencies.
-import { isReactNodeRenderable } from "@metamask/design-system-shared";
 import $React from "react";
 const React = $importDefault($React);
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -16,10 +15,6 @@ import { ButtonIcon, ButtonIconSize } from "../ButtonIcon/index.mjs";
 import { TextVariant } from "../Text/index.mjs";
 export const HeaderRoot = ({ children, title, titleProps, titleAccessory, endAccessory, endButtonIconProps, includesTopInset = false, style, testID, twClassName, ...viewProps }) => {
     const insets = useSafeAreaInsets();
-    const hasRenderableChildren = isReactNodeRenderable(children);
-    const hasTitleContent = title !== false &&
-        (isReactNodeRenderable(title) || isReactNodeRenderable(titleAccessory));
-    const shouldRenderTitleRow = !hasRenderableChildren && hasTitleContent;
     const endSectionContent = (() => {
         if (endAccessory) {
             return endAccessory;
@@ -32,27 +27,23 @@ export const HeaderRoot = ({ children, title, titleProps, titleAccessory, endAcc
         }
         return null;
     })();
-    const hasEndSection = Boolean(endSectionContent);
     const renderLeftSection = () => {
-        if (hasRenderableChildren) {
+        if (children) {
             return children;
         }
-        if (shouldRenderTitleRow) {
-            const titleNode = isReactNodeRenderable(title) && title !== '' ? title : null;
+        if (title) {
             return (<BoxRow endAccessory={titleAccessory} textProps={{
                     variant: TextVariant.HeadingLg,
                     ...titleProps,
-                }}>
-          {titleNode}
+                }} twClassName="flex-1">
+          {title}
         </BoxRow>);
         }
         return null;
     };
     return (<Box flexDirection={BoxFlexDirection.Row} alignItems={BoxAlignItems.Center} gap={4} paddingLeft={4} paddingRight={2} twClassName={`min-h-14 ${twClassName ?? ''}`.trim()} style={[includesTopInset && { marginTop: insets.top }, style]} testID={testID} {...viewProps}>
-      <Box alignItems={BoxAlignItems.Start} style={{ flex: 1 }}>
-        {renderLeftSection()}
-      </Box>
-      {hasEndSection ? (<Box flexDirection={BoxFlexDirection.Row} gap={2}>
+      {renderLeftSection()}
+      {endSectionContent ? (<Box flexDirection={BoxFlexDirection.Row} gap={2} twClassName="ml-auto">
           {endSectionContent}
         </Box>) : null}
     </Box>);

package/dist/components/HeaderRoot/HeaderRoot.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderRoot.mjs","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport { isReactNodeRenderable } from '@metamask/design-system-shared';\nimport React from 'react';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// External dependencies.\nimport { Box, BoxAlignItems, BoxFlexDirection } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { TextVariant } from '../Text';\n\n// Internal dependencies.\nimport type { HeaderRootProps } from './HeaderRoot.types';\n\nexport const HeaderRoot = ({\n  children,\n  title,\n  titleProps,\n  titleAccessory,\n  endAccessory,\n  endButtonIconProps,\n  includesTopInset = false,\n  style,\n  testID,\n  twClassName,\n  ...viewProps\n}: HeaderRootProps) => {\n  const insets = useSafeAreaInsets();\n\n  const hasRenderableChildren = isReactNodeRenderable(children);\n\n  const hasTitleContent =\n    title !== false &&\n    (isReactNodeRenderable(title) || isReactNodeRenderable(titleAccessory));\n\n  const shouldRenderTitleRow = !hasRenderableChildren && hasTitleContent;\n\n  const endSectionContent = (() => {\n    if (endAccessory) {\n      return endAccessory;\n    }\n    if (endButtonIconProps && endButtonIconProps.length > 0) {\n      const reversedProps = endButtonIconProps\n        .map((props, originalIndex) => ({ props, originalIndex }))\n        .reverse();\n      return reversedProps.map(({ props, originalIndex }) => (\n        <ButtonIcon\n          key={`end-button-icon-${originalIndex}`}\n          size={ButtonIconSize.Md}\n          {...props}\n        />\n      ));\n    }\n    return null;\n  })();\n\n  const hasEndSection = Boolean(endSectionContent);\n\n  const renderLeftSection = () => {\n    if (hasRenderableChildren) {\n      return children;\n    }\n    if (shouldRenderTitleRow) {\n      const titleNode =\n        isReactNodeRenderable(title) && title !== '' ? title : null;\n      return (\n        <BoxRow\n          endAccessory={titleAccessory}\n          textProps={{\n            variant: TextVariant.HeadingLg,\n            ...titleProps,\n          }}\n        >\n          {titleNode}\n        </BoxRow>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Center}\n      gap={4}\n      paddingLeft={4}\n      paddingRight={2}\n      twClassName={`min-h-14 ${twClassName ?? ''}`.trim()}\n      style={[includesTopInset && { marginTop: insets.top }, style]}\n      testID={testID}\n      {...viewProps}\n    >\n      <Box alignItems={BoxAlignItems.Start} style={{ flex: 1 }}>\n        {renderLeftSection()}\n      </Box>\n      {hasEndSection ? (\n        <Box flexDirection={BoxFlexDirection.Row} gap={2}>\n          {endSectionContent}\n        </Box>\n      ) : null}\n    </Box>\n  );\n};\n\nHeaderRoot.displayName = 'HeaderRoot';\n"]}
+{"version":3,"file":"HeaderRoot.mjs","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport React from 'react';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// External dependencies.\nimport { Box, BoxAlignItems, BoxFlexDirection } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { TextVariant } from '../Text';\n\n// Internal dependencies.\nimport type { HeaderRootProps } from './HeaderRoot.types';\n\nexport const HeaderRoot = ({\n  children,\n  title,\n  titleProps,\n  titleAccessory,\n  endAccessory,\n  endButtonIconProps,\n  includesTopInset = false,\n  style,\n  testID,\n  twClassName,\n  ...viewProps\n}: HeaderRootProps) => {\n  const insets = useSafeAreaInsets();\n\n  const endSectionContent = (() => {\n    if (endAccessory) {\n      return endAccessory;\n    }\n    if (endButtonIconProps && endButtonIconProps.length > 0) {\n      const reversedProps = endButtonIconProps\n        .map((props, originalIndex) => ({ props, originalIndex }))\n        .reverse();\n      return reversedProps.map(({ props, originalIndex }) => (\n        <ButtonIcon\n          key={`end-button-icon-${originalIndex}`}\n          size={ButtonIconSize.Md}\n          {...props}\n        />\n      ));\n    }\n    return null;\n  })();\n\n  const renderLeftSection = () => {\n    if (children) {\n      return children;\n    }\n    if (title) {\n      return (\n        <BoxRow\n          endAccessory={titleAccessory}\n          textProps={{\n            variant: TextVariant.HeadingLg,\n            ...titleProps,\n          }}\n          twClassName=\"flex-1\"\n        >\n          {title}\n        </BoxRow>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Center}\n      gap={4}\n      paddingLeft={4}\n      paddingRight={2}\n      twClassName={`min-h-14 ${twClassName ?? ''}`.trim()}\n      style={[includesTopInset && { marginTop: insets.top }, style]}\n      testID={testID}\n      {...viewProps}\n    >\n      {renderLeftSection()}\n      {endSectionContent ? (\n        <Box flexDirection={BoxFlexDirection.Row} gap={2} twClassName=\"ml-auto\">\n          {endSectionContent}\n        </Box>\n      ) : null}\n    </Box>\n  );\n};\n\nHeaderRoot.displayName = 'HeaderRoot';\n"]}