@metamask-previews/design-system-react-native 0.6.0-preview.3dc70e1 → 0.11.0-preview.3aca0bd

package/dist/components/Card/Card.d.cts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { CardProps } from "./Card.types.cjs";
+export declare const Card: ({ children, onPress, twClassName, touchableOpacityProps, style, ...props }: CardProps) => React.JSX.Element;
+//# sourceMappingURL=Card.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.cts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAqB;AAE9C,eAAO,MAAM,IAAI,+EAOd,SAAS,sBA0BX,CAAC"}

package/dist/components/Card/Card.d.mts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { CardProps } from "./Card.types.mjs";
+export declare const Card: ({ children, onPress, twClassName, touchableOpacityProps, style, ...props }: CardProps) => React.JSX.Element;
+//# sourceMappingURL=Card.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.mts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAqB;AAE9C,eAAO,MAAM,IAAI,+EAOd,SAAS,sBA0BX,CAAC"}

package/dist/components/Card/Card.mjs

@@ -0,0 +1,26 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
+import $React from "react";
+const React = $importDefault($React);
+import { TouchableOpacity, View } from "react-native/index.js";
+export const Card = ({ children, onPress, twClassName, touchableOpacityProps, style, ...props }) => {
+    const tw = useTailwind();
+    const cardStyle = [
+        tw.style('p-4 rounded border border-default bg-default', twClassName),
+        style,
+    ];
+    if (onPress) {
+        return (<TouchableOpacity onPress={onPress} style={cardStyle} {...touchableOpacityProps} {...props}>
+        {children}
+      </TouchableOpacity>);
+    }
+    return (<View style={cardStyle} {...props}>
+      {children}
+    </View>);
+};
+//# sourceMappingURL=Card.mjs.map

package/dist/components/Card/Card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.mjs","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,8BAAqB;AAItD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,WAAW,EACX,qBAAqB,EACrB,KAAK,EACL,GAAG,KAAK,EACE,EAAE,EAAE;IACd,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,MAAM,SAAS,GAAG;QAChB,EAAE,CAAC,KAAK,CAAC,8CAA8C,EAAE,WAAW,CAAC;QACrE,KAAK;KACN,CAAC;IAEF,IAAI,OAAO,EAAE;QACX,OAAO,CACL,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,qBAAqB,CAAC,CAC1B,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,gBAAgB,CAAC,CACpB,CAAC;KACH;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,CAChC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { TouchableOpacity, View } from 'react-native';\n\nimport type { CardProps } from './Card.types';\n\nexport const Card = ({\n  children,\n  onPress,\n  twClassName,\n  touchableOpacityProps,\n  style,\n  ...props\n}: CardProps) => {\n  const tw = useTailwind();\n\n  const cardStyle = [\n    tw.style('p-4 rounded border border-default bg-default', twClassName),\n    style,\n  ];\n\n  if (onPress) {\n    return (\n      <TouchableOpacity\n        onPress={onPress}\n        style={cardStyle}\n        {...touchableOpacityProps}\n        {...props}\n      >\n        {children}\n      </TouchableOpacity>\n    );\n  }\n\n  return (\n    <View style={cardStyle} {...props}>\n      {children}\n    </View>\n  );\n};\n"]}

package/dist/components/Card/Card.types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=Card.types.cjs.map

package/dist/components/Card/Card.types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.types.cjs","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\nimport type { TouchableOpacityProps, ViewProps } from 'react-native';\n\n/**\n * Card component props.\n */\nexport type CardProps = {\n  /**\n   * Content to display inside the card.\n   */\n  children: ReactNode;\n  /**\n   * Optional callback when the card is pressed.\n   * When provided, the card wraps content in a TouchableOpacity.\n   */\n  onPress?: () => void;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n  /**\n   * Optional props to pass to the underlying TouchableOpacity when onPress is provided.\n   */\n  touchableOpacityProps?: Omit<\n    TouchableOpacityProps,\n    'onPress' | 'style' | 'children'\n  >;\n} & ViewProps;\n"]}

package/dist/components/Card/Card.types.d.cts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import type { TouchableOpacityProps, ViewProps } from "react-native/index.js";
+/**
+ * Card component props.
+ */
+export type CardProps = {
+    /**
+     * Content to display inside the card.
+     */
+    children: ReactNode;
+    /**
+     * Optional callback when the card is pressed.
+     * When provided, the card wraps content in a TouchableOpacity.
+     */
+    onPress?: () => void;
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+    /**
+     * Optional props to pass to the underlying TouchableOpacity when onPress is provided.
+     */
+    touchableOpacityProps?: Omit<TouchableOpacityProps, 'onPress' | 'style' | 'children'>;
+} & ViewProps;
+//# sourceMappingURL=Card.types.d.cts.map

package/dist/components/Card/Card.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.types.d.cts","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AACvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,8BAAqB;AAErE;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,qBAAqB,CAAC,EAAE,IAAI,CAC1B,qBAAqB,EACrB,SAAS,GAAG,OAAO,GAAG,UAAU,CACjC,CAAC;CACH,GAAG,SAAS,CAAC"}

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import type { TouchableOpacityProps, ViewProps } from "react-native/index.js";
+/**
+ * Card component props.
+ */
+export type CardProps = {
+    /**
+     * Content to display inside the card.
+     */
+    children: ReactNode;
+    /**
+     * Optional callback when the card is pressed.
+     * When provided, the card wraps content in a TouchableOpacity.
+     */
+    onPress?: () => void;
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+    /**
+     * Optional props to pass to the underlying TouchableOpacity when onPress is provided.
+     */
+    touchableOpacityProps?: Omit<TouchableOpacityProps, 'onPress' | 'style' | 'children'>;
+} & ViewProps;
+//# sourceMappingURL=Card.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.types.d.mts","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AACvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,8BAAqB;AAErE;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,qBAAqB,CAAC,EAAE,IAAI,CAC1B,qBAAqB,EACrB,SAAS,GAAG,OAAO,GAAG,UAAU,CACjC,CAAC;CACH,GAAG,SAAS,CAAC"}

package/dist/components/Card/Card.types.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Card.types.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.types.mjs","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\nimport type { TouchableOpacityProps, ViewProps } from 'react-native';\n\n/**\n * Card component props.\n */\nexport type CardProps = {\n  /**\n   * Content to display inside the card.\n   */\n  children: ReactNode;\n  /**\n   * Optional callback when the card is pressed.\n   * When provided, the card wraps content in a TouchableOpacity.\n   */\n  onPress?: () => void;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n  /**\n   * Optional props to pass to the underlying TouchableOpacity when onPress is provided.\n   */\n  touchableOpacityProps?: Omit<\n    TouchableOpacityProps,\n    'onPress' | 'style' | 'children'\n  >;\n} & ViewProps;\n"]}

package/dist/components/Card/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+var Card_1 = require("./Card.cjs");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
+//# sourceMappingURL=index.cjs.map

package/dist/components/Card/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":";;;AAAA,mCAA8B;AAArB,4FAAA,IAAI,OAAA","sourcesContent":["export { Card } from './Card';\nexport type { CardProps } from './Card.types';\n"]}

package/dist/components/Card/index.d.cts

@@ -0,0 +1,3 @@
+export { Card } from "./Card.cjs";
+export type { CardProps } from "./Card.types.cjs";
+//# sourceMappingURL=index.d.cts.map

package/dist/components/Card/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,mBAAe;AAC9B,YAAY,EAAE,SAAS,EAAE,yBAAqB"}

package/dist/components/Card/index.d.mts

@@ -0,0 +1,3 @@
+export { Card } from "./Card.mjs";
+export type { CardProps } from "./Card.types.mjs";
+//# sourceMappingURL=index.d.mts.map

package/dist/components/Card/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,mBAAe;AAC9B,YAAY,EAAE,SAAS,EAAE,yBAAqB"}

package/dist/components/Card/index.mjs

@@ -0,0 +1,2 @@
+export { Card } from "./Card.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/components/Card/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,mBAAe","sourcesContent":["export { Card } from './Card';\nexport type { CardProps } from './Card.types';\n"]}

package/dist/components/HeaderBase/HeaderBase.cjs

@@ -0,0 +1,132 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderBase = void 0;
+// Third party dependencies.
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native/index.js");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+// External dependencies.
+const Box_1 = require("../Box/index.cjs");
+const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
+const Text_1 = require("../Text/index.cjs");
+// Internal dependencies.
+const HeaderBase_constants_1 = require("./HeaderBase.constants.cjs");
+const HeaderBase_types_1 = require("./HeaderBase.types.cjs");
+const HeaderBase = ({ children, style, variant = HeaderBase_types_1.HeaderBaseVariant.Compact, startAccessory, endAccessory, startButtonIconProps, endButtonIconProps, includesTopInset = false, startAccessoryWrapperProps, endAccessoryWrapperProps, titleTestID, twClassName, ...props }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const [startAccessoryWidth, setStartAccessoryWidth] = (0, react_1.useState)(0);
+    const [endAccessoryWidth, setEndAccessoryWidth] = (0, react_1.useState)(0);
+    const handleStartAccessoryLayout = (0, react_1.useCallback)((e) => {
+        setStartAccessoryWidth(e.nativeEvent.layout.width);
+    }, []);
+    const handleEndAccessoryLayout = (0, react_1.useCallback)((e) => {
+        setEndAccessoryWidth(e.nativeEvent.layout.width);
+    }, []);
+    // Determine what to render for start/end
+    const hasStartContent = startAccessory || startButtonIconProps;
+    const hasEndContent = endAccessory || (endButtonIconProps && endButtonIconProps.length > 0);
+    const hasAnyAccessory = hasStartContent || hasEndContent;
+    const isCompact = variant === HeaderBase_types_1.HeaderBaseVariant.Compact;
+    // For Compact variant, render both wrappers if any accessory exists (for centering)
+    // For Display variant, only render wrappers when they have content
+    const shouldRenderStartWrapper = isCompact
+        ? Boolean(hasAnyAccessory)
+        : Boolean(hasStartContent);
+    const shouldRenderEndWrapper = isCompact
+        ? Boolean(hasAnyAccessory)
+        : Boolean(hasEndContent);
+    // Calculate equal width for both accessory wrappers to ensure title stays centered (Compact only)
+    const accessoryWrapperWidth = isCompact && hasAnyAccessory && (startAccessoryWidth || endAccessoryWidth)
+        ? Math.max(startAccessoryWidth, endAccessoryWidth)
+        : undefined;
+    const renderStartContent = () => {
+        if (startAccessory) {
+            return startAccessory;
+        }
+        if (startButtonIconProps) {
+            return <ButtonIcon_1.ButtonIcon size={ButtonIcon_1.ButtonIconSize.Md} {...startButtonIconProps}/>;
+        }
+        return null;
+    };
+    const renderEndContent = () => {
+        if (endAccessory) {
+            return endAccessory;
+        }
+        if (endButtonIconProps && endButtonIconProps.length > 0) {
+            // Reverse the array so first item appears rightmost
+            // Use original index (before reversal) for stable React keys
+            const reversedProps = endButtonIconProps
+                .map((iconProps, originalIndex) => ({
+                iconProps,
+                originalIndex,
+            }))
+                .reverse();
+            return reversedProps.map(({ iconProps, originalIndex }) => (<ButtonIcon_1.ButtonIcon key={`end-button-icon-${originalIndex}`} size={ButtonIcon_1.ButtonIconSize.Md} {...iconProps}/>));
+        }
+        return null;
+    };
+    // Check if we have multiple end buttons for layout styling
+    const hasMultipleEndButtons = !endAccessory && endButtonIconProps && endButtonIconProps.length > 1;
+    // Merge default styles with passed-in twClassName
+    const baseStyles = 'flex-row items-center gap-4 h-14';
+    const resolvedTwClassName = twClassName
+        ? `${baseStyles} ${twClassName}`
+        : baseStyles;
+    return (<react_native_1.View style={[
+            tw.style(resolvedTwClassName),
+            includesTopInset && { marginTop: insets.top },
+            style,
+        ]} {...props}>
+      {/* Start accessory */}
+      {shouldRenderStartWrapper && (<react_native_1.View style={accessoryWrapperWidth
+                ? tw.style('items-start', { width: accessoryWrapperWidth })
+                : undefined} {...startAccessoryWrapperProps}>
+          <react_native_1.View onLayout={handleStartAccessoryLayout}>
+            {renderStartContent()}
+          </react_native_1.View>
+        </react_native_1.View>)}
+
+      {/* Title */}
+      <Box_1.Box twClassName={isCompact ? 'flex-1 items-center' : 'flex-1'}>
+        {typeof children === 'string' ? (<Text_1.Text variant={HeaderBase_constants_1.HEADERBASE_VARIANT_TEXT_VARIANTS[variant]} testID={titleTestID} style={isCompact ? tw.style('text-center') : undefined}>
+            {children}
+          </Text_1.Text>) : (children)}
+      </Box_1.Box>
+
+      {/* End accessory */}
+      {shouldRenderEndWrapper && (<react_native_1.View style={accessoryWrapperWidth
+                ? tw.style('items-end', { width: accessoryWrapperWidth })
+                : undefined} {...endAccessoryWrapperProps}>
+          <react_native_1.View onLayout={handleEndAccessoryLayout} style={hasMultipleEndButtons ? tw.style('flex-row gap-2') : undefined}>
+            {renderEndContent()}
+          </react_native_1.View>
+        </react_native_1.View>)}
+    </react_native_1.View>);
+};
+exports.HeaderBase = HeaderBase;
+//# sourceMappingURL=HeaderBase.cjs.map

package/dist/components/HeaderBase/HeaderBase.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderBase.cjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useCallback, useState } from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// External dependencies.\nimport { Box } from '../Box';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { Text } from '../Text';\n\n// Internal dependencies.\nimport { HEADERBASE_VARIANT_TEXT_VARIANTS } from './HeaderBase.constants';\nimport type { HeaderBaseProps } from './HeaderBase.types';\nimport { HeaderBaseVariant } from './HeaderBase.types';\n\nexport const HeaderBase: React.FC<HeaderBaseProps> = ({\n  children,\n  style,\n  variant = HeaderBaseVariant.Compact,\n  startAccessory,\n  endAccessory,\n  startButtonIconProps,\n  endButtonIconProps,\n  includesTopInset = false,\n  startAccessoryWrapperProps,\n  endAccessoryWrapperProps,\n  titleTestID,\n  twClassName,\n  ...props\n}) => {\n  const tw = useTailwind();\n  const insets = useSafeAreaInsets();\n\n  const [startAccessoryWidth, setStartAccessoryWidth] = useState(0);\n  const [endAccessoryWidth, setEndAccessoryWidth] = useState(0);\n\n  const handleStartAccessoryLayout = useCallback((e: LayoutChangeEvent) => {\n    setStartAccessoryWidth(e.nativeEvent.layout.width);\n  }, []);\n\n  const handleEndAccessoryLayout = useCallback((e: LayoutChangeEvent) => {\n    setEndAccessoryWidth(e.nativeEvent.layout.width);\n  }, []);\n\n  // Determine what to render for start/end\n  const hasStartContent = startAccessory || startButtonIconProps;\n  const hasEndContent =\n    endAccessory || (endButtonIconProps && endButtonIconProps.length > 0);\n  const hasAnyAccessory = hasStartContent || hasEndContent;\n\n  const isCompact = variant === HeaderBaseVariant.Compact;\n\n  // For Compact variant, render both wrappers if any accessory exists (for centering)\n  // For Display variant, only render wrappers when they have content\n  const shouldRenderStartWrapper = isCompact\n    ? Boolean(hasAnyAccessory)\n    : Boolean(hasStartContent);\n  const shouldRenderEndWrapper = isCompact\n    ? Boolean(hasAnyAccessory)\n    : Boolean(hasEndContent);\n\n  // Calculate equal width for both accessory wrappers to ensure title stays centered (Compact only)\n  const accessoryWrapperWidth =\n    isCompact && hasAnyAccessory && (startAccessoryWidth || endAccessoryWidth)\n      ? Math.max(startAccessoryWidth, endAccessoryWidth)\n      : undefined;\n\n  const renderStartContent = () => {\n    if (startAccessory) {\n      return startAccessory;\n    }\n    if (startButtonIconProps) {\n      return <ButtonIcon size={ButtonIconSize.Md} {...startButtonIconProps} />;\n    }\n    return null;\n  };\n\n  const renderEndContent = () => {\n    if (endAccessory) {\n      return endAccessory;\n    }\n    if (endButtonIconProps && endButtonIconProps.length > 0) {\n      // Reverse the array so first item appears rightmost\n      // Use original index (before reversal) for stable React keys\n      const reversedProps = endButtonIconProps\n        .map((iconProps, originalIndex) => ({\n          iconProps,\n          originalIndex,\n        }))\n        .reverse();\n      return reversedProps.map(({ iconProps, originalIndex }) => (\n        <ButtonIcon\n          key={`end-button-icon-${originalIndex}`}\n          size={ButtonIconSize.Md}\n          {...iconProps}\n        />\n      ));\n    }\n    return null;\n  };\n\n  // Check if we have multiple end buttons for layout styling\n  const hasMultipleEndButtons =\n    !endAccessory && endButtonIconProps && endButtonIconProps.length > 1;\n\n  // Merge default styles with passed-in twClassName\n  const baseStyles = 'flex-row items-center gap-4 h-14';\n  const resolvedTwClassName = twClassName\n    ? `${baseStyles} ${twClassName}`\n    : baseStyles;\n\n  return (\n    <View\n      style={[\n        tw.style(resolvedTwClassName),\n        includesTopInset && { marginTop: insets.top },\n        style,\n      ]}\n      {...props}\n    >\n      {/* Start accessory */}\n      {shouldRenderStartWrapper && (\n        <View\n          style={\n            accessoryWrapperWidth\n              ? tw.style('items-start', { width: accessoryWrapperWidth })\n              : undefined\n          }\n          {...startAccessoryWrapperProps}\n        >\n          <View onLayout={handleStartAccessoryLayout}>\n            {renderStartContent()}\n          </View>\n        </View>\n      )}\n\n      {/* Title */}\n      <Box twClassName={isCompact ? 'flex-1 items-center' : 'flex-1'}>\n        {typeof children === 'string' ? (\n          <Text\n            variant={HEADERBASE_VARIANT_TEXT_VARIANTS[variant]}\n            testID={titleTestID}\n            style={isCompact ? tw.style('text-center') : undefined}\n          >\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </Box>\n\n      {/* End accessory */}\n      {shouldRenderEndWrapper && (\n        <View\n          style={\n            accessoryWrapperWidth\n              ? tw.style('items-end', { width: accessoryWrapperWidth })\n              : undefined\n          }\n          {...endAccessoryWrapperProps}\n        >\n          <View\n            onLayout={handleEndAccessoryLayout}\n            style={\n              hasMultipleEndButtons ? tw.style('flex-row gap-2') : undefined\n            }\n          >\n            {renderEndContent()}\n          </View>\n        </View>\n      )}\n    </View>\n  );\n};\n"]}

package/dist/components/HeaderBase/HeaderBase.constants.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HEADERBASE_VARIANT_TEXT_VARIANTS = void 0;
+// External dependencies.
+const Text_1 = require("../Text/index.cjs");
+// Internal dependencies.
+const HeaderBase_types_1 = require("./HeaderBase.types.cjs");
+/**
+ * Text variant mapping based on HeaderBase variant.
+ */
+exports.HEADERBASE_VARIANT_TEXT_VARIANTS = {
+    [HeaderBase_types_1.HeaderBaseVariant.Compact]: Text_1.TextVariant.HeadingSm,
+    [HeaderBase_types_1.HeaderBaseVariant.Display]: Text_1.TextVariant.HeadingLg,
+};
+//# sourceMappingURL=HeaderBase.constants.cjs.map

package/dist/components/HeaderBase/HeaderBase.constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderBase.constants.cjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.constants.ts"],"names":[],"mappings":";;;AAAA,yBAAyB;AACzB,4CAAsC;AAEtC,yBAAyB;AACzB,6DAAuD;AAEvD;;GAEG;AACU,QAAA,gCAAgC,GAGzC;IACF,CAAC,oCAAiB,CAAC,OAAO,CAAC,EAAE,kBAAW,CAAC,SAAS;IAClD,CAAC,oCAAiB,CAAC,OAAO,CAAC,EAAE,kBAAW,CAAC,SAAS;CACnD,CAAC","sourcesContent":["// External dependencies.\nimport { TextVariant } from '../Text';\n\n// Internal dependencies.\nimport { HeaderBaseVariant } from './HeaderBase.types';\n\n/**\n * Text variant mapping based on HeaderBase variant.\n */\nexport const HEADERBASE_VARIANT_TEXT_VARIANTS: Record<\n  HeaderBaseVariant,\n  TextVariant\n> = {\n  [HeaderBaseVariant.Compact]: TextVariant.HeadingSm,\n  [HeaderBaseVariant.Display]: TextVariant.HeadingLg,\n};\n"]}

package/dist/components/HeaderBase/HeaderBase.constants.d.cts

@@ -0,0 +1,7 @@
+import { TextVariant } from "../Text/index.cjs";
+import { HeaderBaseVariant } from "./HeaderBase.types.cjs";
+/**
+ * Text variant mapping based on HeaderBase variant.
+ */
+export declare const HEADERBASE_VARIANT_TEXT_VARIANTS: Record<HeaderBaseVariant, TextVariant>;
+//# sourceMappingURL=HeaderBase.constants.d.cts.map

package/dist/components/HeaderBase/HeaderBase.constants.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderBase.constants.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,0BAAgB;AAGtC,OAAO,EAAE,iBAAiB,EAAE,+BAA2B;AAEvD;;GAEG;AACH,eAAO,MAAM,gCAAgC,EAAE,MAAM,CACnD,iBAAiB,EACjB,WAAW,CAIZ,CAAC"}

package/dist/components/HeaderBase/HeaderBase.constants.d.mts

@@ -0,0 +1,7 @@
+import { TextVariant } from "../Text/index.mjs";
+import { HeaderBaseVariant } from "./HeaderBase.types.mjs";
+/**
+ * Text variant mapping based on HeaderBase variant.
+ */
+export declare const HEADERBASE_VARIANT_TEXT_VARIANTS: Record<HeaderBaseVariant, TextVariant>;
+//# sourceMappingURL=HeaderBase.constants.d.mts.map

package/dist/components/HeaderBase/HeaderBase.constants.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderBase.constants.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,0BAAgB;AAGtC,OAAO,EAAE,iBAAiB,EAAE,+BAA2B;AAEvD;;GAEG;AACH,eAAO,MAAM,gCAAgC,EAAE,MAAM,CACnD,iBAAiB,EACjB,WAAW,CAIZ,CAAC"}

package/dist/components/HeaderBase/HeaderBase.constants.mjs

@@ -0,0 +1,12 @@
+// External dependencies.
+import { TextVariant } from "../Text/index.mjs";
+// Internal dependencies.
+import { HeaderBaseVariant } from "./HeaderBase.types.mjs";
+/**
+ * Text variant mapping based on HeaderBase variant.
+ */
+export const HEADERBASE_VARIANT_TEXT_VARIANTS = {
+    [HeaderBaseVariant.Compact]: TextVariant.HeadingSm,
+    [HeaderBaseVariant.Display]: TextVariant.HeadingLg,
+};
+//# sourceMappingURL=HeaderBase.constants.mjs.map

package/dist/components/HeaderBase/HeaderBase.constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderBase.constants.mjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.constants.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,OAAO,EAAE,WAAW,EAAE,0BAAgB;AAEtC,yBAAyB;AACzB,OAAO,EAAE,iBAAiB,EAAE,+BAA2B;AAEvD;;GAEG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAGzC;IACF,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS;IAClD,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS;CACnD,CAAC","sourcesContent":["// External dependencies.\nimport { TextVariant } from '../Text';\n\n// Internal dependencies.\nimport { HeaderBaseVariant } from './HeaderBase.types';\n\n/**\n * Text variant mapping based on HeaderBase variant.\n */\nexport const HEADERBASE_VARIANT_TEXT_VARIANTS: Record<\n  HeaderBaseVariant,\n  TextVariant\n> = {\n  [HeaderBaseVariant.Compact]: TextVariant.HeadingSm,\n  [HeaderBaseVariant.Display]: TextVariant.HeadingLg,\n};\n"]}

package/dist/components/HeaderBase/HeaderBase.d.cts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { HeaderBaseProps } from "./HeaderBase.types.cjs";
+export declare const HeaderBase: React.FC<HeaderBaseProps>;
+//# sourceMappingURL=HeaderBase.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderBase.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,cAAc;AAYrD,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAG1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8JhD,CAAC"}

package/dist/components/HeaderBase/HeaderBase.d.mts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { HeaderBaseProps } from "./HeaderBase.types.mjs";
+export declare const HeaderBase: React.FC<HeaderBaseProps>;
+//# sourceMappingURL=HeaderBase.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderBase.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,cAAc;AAYrD,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAG1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8JhD,CAAC"}

package/dist/components/HeaderBase/HeaderBase.mjs

@@ -0,0 +1,112 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+// Third party dependencies.
+import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
+import $React, { useCallback, useState } from "react";
+const React = $importDefault($React);
+import { View } from "react-native/index.js";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+// External dependencies.
+import { Box } from "../Box/index.mjs";
+import { ButtonIcon, ButtonIconSize } from "../ButtonIcon/index.mjs";
+import { Text } from "../Text/index.mjs";
+// Internal dependencies.
+import { HEADERBASE_VARIANT_TEXT_VARIANTS } from "./HeaderBase.constants.mjs";
+import { HeaderBaseVariant } from "./HeaderBase.types.mjs";
+export const HeaderBase = ({ children, style, variant = HeaderBaseVariant.Compact, startAccessory, endAccessory, startButtonIconProps, endButtonIconProps, includesTopInset = false, startAccessoryWrapperProps, endAccessoryWrapperProps, titleTestID, twClassName, ...props }) => {
+    const tw = useTailwind();
+    const insets = useSafeAreaInsets();
+    const [startAccessoryWidth, setStartAccessoryWidth] = useState(0);
+    const [endAccessoryWidth, setEndAccessoryWidth] = useState(0);
+    const handleStartAccessoryLayout = useCallback((e) => {
+        setStartAccessoryWidth(e.nativeEvent.layout.width);
+    }, []);
+    const handleEndAccessoryLayout = useCallback((e) => {
+        setEndAccessoryWidth(e.nativeEvent.layout.width);
+    }, []);
+    // Determine what to render for start/end
+    const hasStartContent = startAccessory || startButtonIconProps;
+    const hasEndContent = endAccessory || (endButtonIconProps && endButtonIconProps.length > 0);
+    const hasAnyAccessory = hasStartContent || hasEndContent;
+    const isCompact = variant === HeaderBaseVariant.Compact;
+    // For Compact variant, render both wrappers if any accessory exists (for centering)
+    // For Display variant, only render wrappers when they have content
+    const shouldRenderStartWrapper = isCompact
+        ? Boolean(hasAnyAccessory)
+        : Boolean(hasStartContent);
+    const shouldRenderEndWrapper = isCompact
+        ? Boolean(hasAnyAccessory)
+        : Boolean(hasEndContent);
+    // Calculate equal width for both accessory wrappers to ensure title stays centered (Compact only)
+    const accessoryWrapperWidth = isCompact && hasAnyAccessory && (startAccessoryWidth || endAccessoryWidth)
+        ? Math.max(startAccessoryWidth, endAccessoryWidth)
+        : undefined;
+    const renderStartContent = () => {
+        if (startAccessory) {
+            return startAccessory;
+        }
+        if (startButtonIconProps) {
+            return <ButtonIcon size={ButtonIconSize.Md} {...startButtonIconProps}/>;
+        }
+        return null;
+    };
+    const renderEndContent = () => {
+        if (endAccessory) {
+            return endAccessory;
+        }
+        if (endButtonIconProps && endButtonIconProps.length > 0) {
+            // Reverse the array so first item appears rightmost
+            // Use original index (before reversal) for stable React keys
+            const reversedProps = endButtonIconProps
+                .map((iconProps, originalIndex) => ({
+                iconProps,
+                originalIndex,
+            }))
+                .reverse();
+            return reversedProps.map(({ iconProps, originalIndex }) => (<ButtonIcon key={`end-button-icon-${originalIndex}`} size={ButtonIconSize.Md} {...iconProps}/>));
+        }
+        return null;
+    };
+    // Check if we have multiple end buttons for layout styling
+    const hasMultipleEndButtons = !endAccessory && endButtonIconProps && endButtonIconProps.length > 1;
+    // Merge default styles with passed-in twClassName
+    const baseStyles = 'flex-row items-center gap-4 h-14';
+    const resolvedTwClassName = twClassName
+        ? `${baseStyles} ${twClassName}`
+        : baseStyles;
+    return (<View style={[
+            tw.style(resolvedTwClassName),
+            includesTopInset && { marginTop: insets.top },
+            style,
+        ]} {...props}>
+      {/* Start accessory */}
+      {shouldRenderStartWrapper && (<View style={accessoryWrapperWidth
+                ? tw.style('items-start', { width: accessoryWrapperWidth })
+                : undefined} {...startAccessoryWrapperProps}>
+          <View onLayout={handleStartAccessoryLayout}>
+            {renderStartContent()}
+          </View>
+        </View>)}
+
+      {/* Title */}
+      <Box twClassName={isCompact ? 'flex-1 items-center' : 'flex-1'}>
+        {typeof children === 'string' ? (<Text variant={HEADERBASE_VARIANT_TEXT_VARIANTS[variant]} testID={titleTestID} style={isCompact ? tw.style('text-center') : undefined}>
+            {children}
+          </Text>) : (children)}
+      </Box>
+
+      {/* End accessory */}
+      {shouldRenderEndWrapper && (<View style={accessoryWrapperWidth
+                ? tw.style('items-end', { width: accessoryWrapperWidth })
+                : undefined} {...endAccessoryWrapperProps}>
+          <View onLayout={handleEndAccessoryLayout} style={hasMultipleEndButtons ? tw.style('flex-row gap-2') : undefined}>
+            {renderEndContent()}
+          </View>
+        </View>)}
+    </View>);
+};
+//# sourceMappingURL=HeaderBase.mjs.map

package/dist/components/HeaderBase/HeaderBase.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderBase.mjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useCallback, useState } from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// External dependencies.\nimport { Box } from '../Box';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { Text } from '../Text';\n\n// Internal dependencies.\nimport { HEADERBASE_VARIANT_TEXT_VARIANTS } from './HeaderBase.constants';\nimport type { HeaderBaseProps } from './HeaderBase.types';\nimport { HeaderBaseVariant } from './HeaderBase.types';\n\nexport const HeaderBase: React.FC<HeaderBaseProps> = ({\n  children,\n  style,\n  variant = HeaderBaseVariant.Compact,\n  startAccessory,\n  endAccessory,\n  startButtonIconProps,\n  endButtonIconProps,\n  includesTopInset = false,\n  startAccessoryWrapperProps,\n  endAccessoryWrapperProps,\n  titleTestID,\n  twClassName,\n  ...props\n}) => {\n  const tw = useTailwind();\n  const insets = useSafeAreaInsets();\n\n  const [startAccessoryWidth, setStartAccessoryWidth] = useState(0);\n  const [endAccessoryWidth, setEndAccessoryWidth] = useState(0);\n\n  const handleStartAccessoryLayout = useCallback((e: LayoutChangeEvent) => {\n    setStartAccessoryWidth(e.nativeEvent.layout.width);\n  }, []);\n\n  const handleEndAccessoryLayout = useCallback((e: LayoutChangeEvent) => {\n    setEndAccessoryWidth(e.nativeEvent.layout.width);\n  }, []);\n\n  // Determine what to render for start/end\n  const hasStartContent = startAccessory || startButtonIconProps;\n  const hasEndContent =\n    endAccessory || (endButtonIconProps && endButtonIconProps.length > 0);\n  const hasAnyAccessory = hasStartContent || hasEndContent;\n\n  const isCompact = variant === HeaderBaseVariant.Compact;\n\n  // For Compact variant, render both wrappers if any accessory exists (for centering)\n  // For Display variant, only render wrappers when they have content\n  const shouldRenderStartWrapper = isCompact\n    ? Boolean(hasAnyAccessory)\n    : Boolean(hasStartContent);\n  const shouldRenderEndWrapper = isCompact\n    ? Boolean(hasAnyAccessory)\n    : Boolean(hasEndContent);\n\n  // Calculate equal width for both accessory wrappers to ensure title stays centered (Compact only)\n  const accessoryWrapperWidth =\n    isCompact && hasAnyAccessory && (startAccessoryWidth || endAccessoryWidth)\n      ? Math.max(startAccessoryWidth, endAccessoryWidth)\n      : undefined;\n\n  const renderStartContent = () => {\n    if (startAccessory) {\n      return startAccessory;\n    }\n    if (startButtonIconProps) {\n      return <ButtonIcon size={ButtonIconSize.Md} {...startButtonIconProps} />;\n    }\n    return null;\n  };\n\n  const renderEndContent = () => {\n    if (endAccessory) {\n      return endAccessory;\n    }\n    if (endButtonIconProps && endButtonIconProps.length > 0) {\n      // Reverse the array so first item appears rightmost\n      // Use original index (before reversal) for stable React keys\n      const reversedProps = endButtonIconProps\n        .map((iconProps, originalIndex) => ({\n          iconProps,\n          originalIndex,\n        }))\n        .reverse();\n      return reversedProps.map(({ iconProps, originalIndex }) => (\n        <ButtonIcon\n          key={`end-button-icon-${originalIndex}`}\n          size={ButtonIconSize.Md}\n          {...iconProps}\n        />\n      ));\n    }\n    return null;\n  };\n\n  // Check if we have multiple end buttons for layout styling\n  const hasMultipleEndButtons =\n    !endAccessory && endButtonIconProps && endButtonIconProps.length > 1;\n\n  // Merge default styles with passed-in twClassName\n  const baseStyles = 'flex-row items-center gap-4 h-14';\n  const resolvedTwClassName = twClassName\n    ? `${baseStyles} ${twClassName}`\n    : baseStyles;\n\n  return (\n    <View\n      style={[\n        tw.style(resolvedTwClassName),\n        includesTopInset && { marginTop: insets.top },\n        style,\n      ]}\n      {...props}\n    >\n      {/* Start accessory */}\n      {shouldRenderStartWrapper && (\n        <View\n          style={\n            accessoryWrapperWidth\n              ? tw.style('items-start', { width: accessoryWrapperWidth })\n              : undefined\n          }\n          {...startAccessoryWrapperProps}\n        >\n          <View onLayout={handleStartAccessoryLayout}>\n            {renderStartContent()}\n          </View>\n        </View>\n      )}\n\n      {/* Title */}\n      <Box twClassName={isCompact ? 'flex-1 items-center' : 'flex-1'}>\n        {typeof children === 'string' ? (\n          <Text\n            variant={HEADERBASE_VARIANT_TEXT_VARIANTS[variant]}\n            testID={titleTestID}\n            style={isCompact ? tw.style('text-center') : undefined}\n          >\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </Box>\n\n      {/* End accessory */}\n      {shouldRenderEndWrapper && (\n        <View\n          style={\n            accessoryWrapperWidth\n              ? tw.style('items-end', { width: accessoryWrapperWidth })\n              : undefined\n          }\n          {...endAccessoryWrapperProps}\n        >\n          <View\n            onLayout={handleEndAccessoryLayout}\n            style={\n              hasMultipleEndButtons ? tw.style('flex-row gap-2') : undefined\n            }\n          >\n            {renderEndContent()}\n          </View>\n        </View>\n      )}\n    </View>\n  );\n};\n"]}

package/dist/components/HeaderBase/HeaderBase.types.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderBaseVariant = void 0;
+/**
+ * Variant options for HeaderBase component.
+ * Controls title text size and alignment.
+ */
+var HeaderBaseVariant;
+(function (HeaderBaseVariant) {
+    /** Center-aligned title with HeadingSm text */
+    HeaderBaseVariant["Compact"] = "compact";
+    /** Left-aligned title with HeadingLg text */
+    HeaderBaseVariant["Display"] = "display";
+})(HeaderBaseVariant || (exports.HeaderBaseVariant = HeaderBaseVariant = {}));
+//# sourceMappingURL=HeaderBase.types.cjs.map

package/dist/components/HeaderBase/HeaderBase.types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderBase.types.cjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.types.ts"],"names":[],"mappings":";;;AAOA;;;GAGG;AACH,IAAY,iBAKX;AALD,WAAY,iBAAiB;IAC3B,+CAA+C;IAC/C,wCAAmB,CAAA;IACnB,6CAA6C;IAC7C,wCAAmB,CAAA;AACrB,CAAC,EALW,iBAAiB,iCAAjB,iBAAiB,QAK5B","sourcesContent":["// Third party dependencies.\nimport type { ReactNode } from 'react';\nimport type { ViewProps, StyleProp, ViewStyle } from 'react-native';\n\n// External dependencies.\nimport type { ButtonIconProps } from '../ButtonIcon';\n\n/**\n * Variant options for HeaderBase component.\n * Controls title text size and alignment.\n */\nexport enum HeaderBaseVariant {\n  /** Center-aligned title with HeadingSm text */\n  Compact = 'compact',\n  /** Left-aligned title with HeadingLg text */\n  Display = 'display',\n}\n\n/**\n * HeaderBase component props.\n *\n * Extends React Native's ViewProps to inherit standard props such as\n * `testID`, `accessibilityLabel`, and other View props.\n */\nexport type HeaderBaseProps = ViewProps & {\n  /**\n   * Variant controlling header text size.\n   *\n   * @default HeaderBaseVariant.Compact\n   */\n  variant?: HeaderBaseVariant;\n  /**\n   * Title of the HeaderBase. Pass a string for automatic Text rendering,\n   * or a ReactNode for custom content.\n   */\n  children?: ReactNode | string;\n  /**\n   * Optional style for the header container.\n   */\n  style?: StyleProp<ViewStyle>;\n  /**\n   * Optional prop to include content to be displayed before the title.\n   * Takes priority over startButtonIconProps if both are provided.\n   */\n  startAccessory?: ReactNode;\n  /**\n   * Optional prop to include content to be displayed after the title.\n   * Takes priority over endButtonIconProps if both are provided.\n   */\n  endAccessory?: ReactNode;\n  /**\n   * Optional ButtonIcon props to render a ButtonIcon as the start accessory.\n   * Only used if startAccessory is not provided.\n   *\n   * @default size: ButtonIconSize.Md\n   */\n  startButtonIconProps?: ButtonIconProps;\n  /**\n   * Optional array of ButtonIcon props to render multiple ButtonIcons as end accessories.\n   * Rendered in reverse order (first item appears rightmost).\n   * Only used if endAccessory is not provided.\n   *\n   * @default size: ButtonIconSize.Md for each\n   */\n  endButtonIconProps?: ButtonIconProps[];\n  /**\n   * Optional prop to include the top inset to make sure the header is visible\n   * below device's notch.\n   *\n   * @default false\n   */\n  includesTopInset?: boolean;\n  /**\n   * Optional props to pass to the start accessory wrapper View.\n   */\n  startAccessoryWrapperProps?: ViewProps;\n  /**\n   * Optional props to pass to the end accessory wrapper View.\n   */\n  endAccessoryWrapperProps?: ViewProps;\n  /**\n   * Optional test ID for the title Text element.\n   * Only used when children is a string.\n   */\n  titleTestID?: string;\n  /**\n   * Optional Tailwind class names for the header container.\n   * Merged with default styles using tw.style().\n   */\n  twClassName?: string;\n};\n"]}