npm - @metamask/design-system-react-native - Versions diffs - 0.8.0 → 0.10.0 - Mend

@metamask/design-system-react-native 0.8.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (252) hide show

package/dist/components/HeaderBase/HeaderBase.cjs CHANGED Viewed

@@ -33,7 +33,10 @@ const react_native_safe_area_context_1 = require("react-native-safe-area-context
 const Box_1 = require("../Box/index.cjs");
 const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
 const Text_1 = require("../Text/index.cjs");
-const HeaderBase = ({ children, style, startAccessory, endAccessory, startButtonIconProps, endButtonIconProps, includesTopInset = false, startAccessoryWrapperProps, endAccessoryWrapperProps, titleTestID, twClassName, ...props }) => {
+// 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);
@@ -48,11 +51,17 @@ const HeaderBase = ({ children, style, startAccessory, endAccessory, startButton
     const hasStartContent = startAccessory || startButtonIconProps;
     const hasEndContent = endAccessory || (endButtonIconProps && endButtonIconProps.length > 0);
     const hasAnyAccessory = hasStartContent || hasEndContent;
-    // Render both wrappers if any accessory exists (for centering)
-    const shouldRenderStartWrapper = Boolean(hasAnyAccessory);
-    const shouldRenderEndWrapper = Boolean(hasAnyAccessory);
-    // Calculate equal width for both accessory wrappers to ensure title stays centered
-    const accessoryWrapperWidth = hasAnyAccessory && (startAccessoryWidth || endAccessoryWidth)
+    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 = () => {
@@ -103,8 +112,8 @@ const HeaderBase = ({ children, style, startAccessory, endAccessory, startButton
         </react_native_1.View>)}
       {/* Title */}
-      <Box_1.Box twClassName="flex-1 items-center">
-        {typeof children === 'string' ? (<Text_1.Text variant={Text_1.TextVariant.HeadingSm} testID={titleTestID} style={tw.style('text-center')}>
+      <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>

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderBase.cjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4BAA4B;AAC5B,qFAAmE;AACnE,+CAAqD;AAErD,wDAAoC;AACpC,mFAAmE;AAEnE,yBAAyB;AACzB,0CAA6B;AAC7B,wDAA2D;AAC3D,~~4CAA4C~~;~~AAKrC~~,MAAM,UAAU,GAA8B,CAAC,EACpD,QAAQ,EACR,KAAK,EACL,cAAc,EACd,YAAY,EACZ,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,GAAG,KAAK,EACxB,0BAA0B,EAC1B,wBAAwB,EACxB,WAAW,EACX,WAAW,EACX,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,MAAM,GAAG,IAAA,kDAAiB,GAAE,CAAC;IAEnC,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAClE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAE9D,MAAM,0BAA0B,GAAG,IAAA,mBAAW,EAAC,CAAC,CAAoB,EAAE,EAAE;QACtE,sBAAsB,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,wBAAwB,GAAG,IAAA,mBAAW,EAAC,CAAC,CAAoB,EAAE,EAAE;QACpE,oBAAoB,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACnD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,yCAAyC;IACzC,MAAM,eAAe,GAAG,cAAc,IAAI,oBAAoB,CAAC;IAC/D,MAAM,aAAa,GACjB,YAAY,IAAI,CAAC,kBAAkB,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACxE,MAAM,eAAe,GAAG,eAAe,IAAI,aAAa,CAAC;IAEzD~~,+DAA+D~~;~~IAC/D~~,MAAM,wBAAwB,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;~~IAC1D~~,MAAM,sBAAsB,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;~~IAExD~~,~~mFAAmF~~;~~IACnF~~,MAAM,qBAAqB,GACzB,eAAe,IAAI,CAAC,mBAAmB,IAAI,iBAAiB,CAAC;~~QAC3D~~,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,iBAAiB,CAAC;QAClD,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,cAAc,EAAE;YAClB,OAAO,cAAc,CAAC;SACvB;QACD,IAAI,oBAAoB,EAAE;YACxB,OAAO,CAAC,uBAAU,CAAC,IAAI,CAAC,CAAC,2BAAc,CAAC,EAAE,CAAC,CAAC,IAAI,oBAAoB,CAAC,EAAG,CAAC;SAC1E;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,YAAY,EAAE;YAChB,OAAO,YAAY,CAAC;SACrB;QACD,IAAI,kBAAkB,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE;YACvD,oDAAoD;YACpD,6DAA6D;YAC7D,MAAM,aAAa,GAAG,kBAAkB;iBACrC,GAAG,CAAC,CAAC,SAAS,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC;gBAClC,SAAS;gBACT,aAAa;aACd,CAAC,CAAC;iBACF,OAAO,EAAE,CAAC;YACb,OAAO,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CACzD,CAAC,uBAAU,CACT,GAAG,CAAC,CAAC,mBAAmB,aAAa,EAAE,CAAC,CACxC,IAAI,CAAC,CAAC,2BAAc,CAAC,EAAE,CAAC,CACxB,IAAI,SAAS,CAAC,EACd,CACH,CAAC,CAAC;SACJ;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,2DAA2D;IAC3D,MAAM,qBAAqB,GACzB,CAAC,YAAY,IAAI,kBAAkB,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC;IAEvE,kDAAkD;IAClD,MAAM,UAAU,GAAG,kCAAkC,CAAC;IACtD,MAAM,mBAAmB,GAAG,WAAW;QACrC,CAAC,CAAC,GAAG,UAAU,IAAI,WAAW,EAAE;QAChC,CAAC,CAAC,UAAU,CAAC;IAEf,OAAO,CACL,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC;YAC7B,gBAAgB,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE;YAC7C,KAAK;SACN,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,qBAAqB,CACtB;MAAA,CAAC,wBAAwB,IAAI,CAC3B,CAAC,mBAAI,CACH,KAAK,CAAC,CACJ,qBAAqB;gBACnB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,EAAE,EAAE,KAAK,EAAE,qBAAqB,EAAE,CAAC;gBAC3D,CAAC,CAAC,SAAS,CACd,CACD,IAAI,0BAA0B,CAAC,CAE/B;UAAA,CAAC,mBAAI,CAAC,QAAQ,CAAC,CAAC,0BAA0B,CAAC,CACzC;YAAA,CAAC,kBAAkB,EAAE,CACvB;UAAA,EAAE,mBAAI,CACR;QAAA,EAAE,mBAAI,CAAC,CACR,CAED;;MAAA,CAAC,WAAW,CACZ;MAAA,CAAC,SAAG,CAAC,WAAW,CAAC,qBAAqB,~~CACpC~~;QAAA,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC9B,CAAC,WAAI,CACH,OAAO,CAAC,CAAC,~~kBAAW~~,CAAC,~~SAAS~~,CAAC,~~CAC/B~~,MAAM,CAAC,CAAC,WAAW,CAAC,CACpB,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,~~CAE/B~~;YAAA,CAAC,QAAQ,CACX;UAAA,EAAE,WAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACH;MAAA,EAAE,SAAG,CAEL;;MAAA,CAAC,mBAAmB,CACpB;MAAA,CAAC,sBAAsB,IAAI,CACzB,CAAC,mBAAI,CACH,KAAK,CAAC,CACJ,qBAAqB;gBACnB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,qBAAqB,EAAE,CAAC;gBACzD,CAAC,CAAC,SAAS,CACd,CACD,IAAI,wBAAwB,CAAC,CAE7B;UAAA,CAAC,mBAAI,CACH,QAAQ,CAAC,CAAC,wBAAwB,CAAC,CACnC,KAAK,CAAC,CACJ,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS,CAC/D,CAED;YAAA,CAAC,gBAAgB,EAAE,CACrB;UAAA,EAAE,mBAAI,CACR;QAAA,EAAE,mBAAI,CAAC,CACR,CACH;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;~~AAtJW~~,QAAA,UAAU,~~cAsJrB~~","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask/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, ~~TextVariant~~ } from '../Text';\n\n// Internal dependencies.\nimport type { HeaderBaseProps } from './HeaderBase.types';\n\nexport const HeaderBase: React.FC<HeaderBaseProps> = ({\n children,\n style,\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 // ~~Render~~ both wrappers if any accessory exists (for centering)\n const shouldRenderStartWrapper = Boolean(hasAnyAccessory);\n const shouldRenderEndWrapper = Boolean(hasAnyAccessory);\n\n // Calculate equal width for both accessory wrappers to ensure title stays centered\n const accessoryWrapperWidth =\n 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~~=\"~~flex-1 items-center\">\n {typeof children === 'string' ? (\n <Text\n variant={~~TextVariant.HeadingSm~~}\n testID={titleTestID}\n style={tw.style('text-center')}\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"]}
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/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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderBase.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,cAAc;~~AAWrD~~,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;~~AAE1D~~,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,~~CAsJhD~~,CAAC"}
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.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderBase.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,cAAc;~~AAWrD~~,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;~~AAE1D~~,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,~~CAsJhD~~,CAAC"}
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 CHANGED Viewed

@@ -13,8 +13,11 @@ 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, TextVariant } from "../Text/index.mjs";
-export const HeaderBase = ({ children, style, startAccessory, endAccessory, startButtonIconProps, endButtonIconProps, includesTopInset = false, startAccessoryWrapperProps, endAccessoryWrapperProps, titleTestID, twClassName, ...props }) => {
+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);
@@ -29,11 +32,17 @@ export const HeaderBase = ({ children, style, startAccessory, endAccessory, star
     const hasStartContent = startAccessory || startButtonIconProps;
     const hasEndContent = endAccessory || (endButtonIconProps && endButtonIconProps.length > 0);
     const hasAnyAccessory = hasStartContent || hasEndContent;
-    // Render both wrappers if any accessory exists (for centering)
-    const shouldRenderStartWrapper = Boolean(hasAnyAccessory);
-    const shouldRenderEndWrapper = Boolean(hasAnyAccessory);
-    // Calculate equal width for both accessory wrappers to ensure title stays centered
-    const accessoryWrapperWidth = hasAnyAccessory && (startAccessoryWidth || endAccessoryWidth)
+    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 = () => {
@@ -84,8 +93,8 @@ export const HeaderBase = ({ children, style, startAccessory, endAccessory, star
         </View>)}
       {/* Title */}
-      <Box twClassName="flex-1 items-center">
-        {typeof children === 'string' ? (<Text variant={TextVariant.HeadingSm} testID={titleTestID} style={tw.style('text-center')}>
+      <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>

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

	@@ -1 +1 @@
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/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, TextVariant } from '../Text';\n\n// Internal dependencies.\nimport type { HeaderBaseProps } from './HeaderBase.types';\n\nexport const HeaderBase: React.FC<HeaderBaseProps> = ({\n children,\n style,\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 // Render both wrappers if any accessory exists (for centering)\n const shouldRenderStartWrapper = Boolean(hasAnyAccessory);\n const shouldRenderEndWrapper = Boolean(hasAnyAccessory);\n\n // Calculate equal width for both accessory wrappers to ensure title stays centered\n const accessoryWrapperWidth =\n 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=\"flex-1 items-center\">\n {typeof children === 'string' ? (\n <Text\n variant={TextVariant.HeadingSm}\n testID={titleTestID}\n style={tw.style('text-center')}\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"]}
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/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 CHANGED Viewed

@@ -1,3 +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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderBase.types.cjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.types.ts"],"names":[],"mappings":"","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 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 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"]}
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"]}

package/dist/components/HeaderBase/HeaderBase.types.d.cts CHANGED Viewed

@@ -1,6 +1,16 @@
 import type { ReactNode } from "react";
 import type { ViewProps, StyleProp, ViewStyle } from "react-native/index.js";
 import type { ButtonIconProps } from "../ButtonIcon/index.cjs";
+/**
+ * Variant options for HeaderBase component.
+ * Controls title text size and alignment.
+ */
+export declare enum HeaderBaseVariant {
+    /** Center-aligned title with HeadingSm text */
+    Compact = "compact",
+    /** Left-aligned title with HeadingLg text */
+    Display = "display"
+}
 /**
  * HeaderBase component props.
  *
@@ -8,6 +18,12 @@ import type { ButtonIconProps } from "../ButtonIcon/index.cjs";
  * `testID`, `accessibilityLabel`, and other View props.
  */
 export type HeaderBaseProps = ViewProps & {
+    /**
+     * Variant controlling header text size.
+     *
+     * @default HeaderBaseVariant.Compact
+     */
+    variant?: HeaderBaseVariant;
     /**
      * Title of the HeaderBase. Pass a string for automatic Text rendering,
      * or a ReactNode for custom content.

package/dist/components/HeaderBase/HeaderBase.types.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAGpE,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,eAAe,CAAC;IACvC;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,eAAe,EAAE,CAAC;IACvC;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,0BAA0B,CAAC,EAAE,SAAS,CAAC;IACvC;;OAEG;IACH,wBAAwB,CAAC,EAAE,SAAS,CAAC;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}
1	+ {"version":3,"file":"HeaderBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAGpE,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD;;;GAGG;AACH,oBAAY,iBAAiB;IAC3B,+CAA+C;IAC/C,OAAO,YAAY;IACnB,6CAA6C;IAC7C,OAAO,YAAY;CACpB;AAED;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,eAAe,CAAC;IACvC;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,eAAe,EAAE,CAAC;IACvC;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,0BAA0B,CAAC,EAAE,SAAS,CAAC;IACvC;;OAEG;IACH,wBAAwB,CAAC,EAAE,SAAS,CAAC;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

package/dist/components/HeaderBase/HeaderBase.types.d.mts CHANGED Viewed

@@ -1,6 +1,16 @@
 import type { ReactNode } from "react";
 import type { ViewProps, StyleProp, ViewStyle } from "react-native/index.js";
 import type { ButtonIconProps } from "../ButtonIcon/index.mjs";
+/**
+ * Variant options for HeaderBase component.
+ * Controls title text size and alignment.
+ */
+export declare enum HeaderBaseVariant {
+    /** Center-aligned title with HeadingSm text */
+    Compact = "compact",
+    /** Left-aligned title with HeadingLg text */
+    Display = "display"
+}
 /**
  * HeaderBase component props.
  *
@@ -8,6 +18,12 @@ import type { ButtonIconProps } from "../ButtonIcon/index.mjs";
  * `testID`, `accessibilityLabel`, and other View props.
  */
 export type HeaderBaseProps = ViewProps & {
+    /**
+     * Variant controlling header text size.
+     *
+     * @default HeaderBaseVariant.Compact
+     */
+    variant?: HeaderBaseVariant;
     /**
      * Title of the HeaderBase. Pass a string for automatic Text rendering,
      * or a ReactNode for custom content.

package/dist/components/HeaderBase/HeaderBase.types.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAGpE,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,eAAe,CAAC;IACvC;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,eAAe,EAAE,CAAC;IACvC;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,0BAA0B,CAAC,EAAE,SAAS,CAAC;IACvC;;OAEG;IACH,wBAAwB,CAAC,EAAE,SAAS,CAAC;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}
1	+ {"version":3,"file":"HeaderBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAGpE,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD;;;GAGG;AACH,oBAAY,iBAAiB;IAC3B,+CAA+C;IAC/C,OAAO,YAAY;IACnB,6CAA6C;IAC7C,OAAO,YAAY;CACpB;AAED;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,eAAe,CAAC;IACvC;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,eAAe,EAAE,CAAC;IACvC;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,0BAA0B,CAAC,EAAE,SAAS,CAAC;IACvC;;OAEG;IACH,wBAAwB,CAAC,EAAE,SAAS,CAAC;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

package/dist/components/HeaderBase/HeaderBase.types.mjs CHANGED Viewed

@@ -1,2 +1,12 @@
-export {};
+/**
+ * Variant options for HeaderBase component.
+ * Controls title text size and alignment.
+ */
+export var HeaderBaseVariant;
+(function (HeaderBaseVariant) {
+    /** Center-aligned title with HeadingSm text */
+    HeaderBaseVariant["Compact"] = "compact";
+    /** Left-aligned title with HeadingLg text */
+    HeaderBaseVariant["Display"] = "display";
+})(HeaderBaseVariant || (HeaderBaseVariant = {}));
 //# sourceMappingURL=HeaderBase.types.mjs.map

package/dist/components/HeaderBase/HeaderBase.types.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderBase.types.mjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.types.ts"],"names":[],"mappings":"","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 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 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"]}
1	+ {"version":3,"file":"HeaderBase.types.mjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.types.ts"],"names":[],"mappings":"AAOA;;;GAGG;AACH,MAAM,CAAN,IAAY,iBAKX;AALD,WAAY,iBAAiB;IAC3B,+CAA+C;IAC/C,wCAAmB,CAAA;IACnB,6CAA6C;IAC7C,wCAAmB,CAAA;AACrB,CAAC,EALW,iBAAiB,KAAjB,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"]}

package/dist/components/HeaderBase/index.cjs CHANGED Viewed

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

package/dist/components/HeaderBase/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/index.ts"],"names":[],"mappings":";;;AAAA,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export { HeaderBase } from './HeaderBase';\nexport type { HeaderBaseProps } from './HeaderBase.types';\n"]}
1	+ {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/index.ts"],"names":[],"mappings":";;;AAAA,+CAA0C;AAAjC,wGAAA,UAAU,OAAA;AACnB,2DAAuD;AAA9C,qHAAA,iBAAiB,OAAA","sourcesContent":["export { HeaderBase } from './HeaderBase';\nexport { HeaderBaseVariant } from './HeaderBase.types';\nexport type { HeaderBaseProps } from './HeaderBase.types';\n"]}

package/dist/components/HeaderBase/index.d.cts CHANGED Viewed

@@ -1,3 +1,4 @@
 export { HeaderBase } from "./HeaderBase.cjs";
+export { HeaderBaseVariant } from "./HeaderBase.types.cjs";
 export type { HeaderBaseProps } from "./HeaderBase.types.cjs";
 //# sourceMappingURL=index.d.cts.map

package/dist/components/HeaderBase/index.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
1	+ {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,OAAO,EAAE,iBAAiB,EAAE,+BAA2B;AACvD,YAAY,EAAE,eAAe,EAAE,+BAA2B"}

package/dist/components/HeaderBase/index.d.mts CHANGED Viewed

@@ -1,3 +1,4 @@
 export { HeaderBase } from "./HeaderBase.mjs";
+export { HeaderBaseVariant } from "./HeaderBase.types.mjs";
 export type { HeaderBaseProps } from "./HeaderBase.types.mjs";
 //# sourceMappingURL=index.d.mts.map

package/dist/components/HeaderBase/index.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
1	+ {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,OAAO,EAAE,iBAAiB,EAAE,+BAA2B;AACvD,YAAY,EAAE,eAAe,EAAE,+BAA2B"}

package/dist/components/HeaderBase/index.mjs CHANGED Viewed

@@ -1,2 +1,3 @@
 export { HeaderBase } from "./HeaderBase.mjs";
+export { HeaderBaseVariant } from "./HeaderBase.types.mjs";
 //# sourceMappingURL=index.mjs.map

package/dist/components/HeaderBase/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export { HeaderBase } from './HeaderBase';\nexport type { HeaderBaseProps } from './HeaderBase.types';\n"]}
1	+ {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,OAAO,EAAE,iBAAiB,EAAE,+BAA2B","sourcesContent":["export { HeaderBase } from './HeaderBase';\nexport { HeaderBaseVariant } from './HeaderBase.types';\nexport type { HeaderBaseProps } from './HeaderBase.types';\n"]}

package/dist/components/SensitiveText/SensitiveText.cjs ADDED Viewed

@@ -0,0 +1,47 @@
+"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.SensitiveText = void 0;
+const react_1 = __importStar(require("react"));
+const Text_1 = require("../Text/index.cjs");
+const SensitiveText_constants_1 = require("./SensitiveText.constants.cjs");
+const isValidLength = (value) => {
+    const num = Number(value);
+    return !Number.isNaN(num) && num > 0;
+};
+const SensitiveText = ({ isHidden = false, length = SensitiveText_constants_1.SensitiveTextLength.Short, children, ...props }) => {
+    const fallback = (0, react_1.useMemo)(() => {
+        let resolvedLength = length;
+        if (!(length in SensitiveText_constants_1.SensitiveTextLength) && !isValidLength(length)) {
+            console.warn(`Invalid length provided: ${length}. Falling back to Short.`);
+            resolvedLength = SensitiveText_constants_1.SensitiveTextLength.Short;
+        }
+        const numLength = Number(resolvedLength);
+        return '•'.repeat(Number.isNaN(numLength) ? 0 : numLength);
+    }, [length]);
+    return <Text_1.Text {...props}>{isHidden ? fallback : children}</Text_1.Text>;
+};
+exports.SensitiveText = SensitiveText;
+//# sourceMappingURL=SensitiveText.cjs.map

package/dist/components/SensitiveText/SensitiveText.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SensitiveText.cjs","sourceRoot":"","sources":["../../../src/components/SensitiveText/SensitiveText.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AAEvC,4CAA+B;AAE/B,2EAAgE;AAGhE,MAAM,aAAa,GAAG,CAAC,KAAa,EAAW,EAAE;IAC/C,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC1B,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC;AACvC,CAAC,CAAC;AAEK,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,6CAAmB,CAAC,KAAK,EAClC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC5B,IAAI,cAAc,GAAG,MAAM,CAAC;QAE5B,IAAI,CAAC,CAAC,MAAM,IAAI,6CAAmB,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE;YAC9D,OAAO,CAAC,IAAI,CACV,4BAA4B,MAAM,0BAA0B,CAC7D,CAAC;YACF,cAAc,GAAG,6CAAmB,CAAC,KAAK,CAAC;SAC5C;QAED,MAAM,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;QACzC,OAAO,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC7D,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CAAC,WAAI,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,WAAI,CAAC,CAAC;AAClE,CAAC,CAAC;AArBW,QAAA,aAAa,iBAqBxB","sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Text } from '../Text';\n\nimport { SensitiveTextLength } from './SensitiveText.constants';\nimport type { SensitiveTextProps } from './SensitiveText.types';\n\nconst isValidLength = (value: string): boolean => {\n const num = Number(value);\n return !Number.isNaN(num) && num > 0;\n};\n\nexport const SensitiveText: React.FC<SensitiveTextProps> = ({\n isHidden = false,\n length = SensitiveTextLength.Short,\n children,\n ...props\n}) => {\n const fallback = useMemo(() => {\n let resolvedLength = length;\n\n if (!(length in SensitiveTextLength) && !isValidLength(length)) {\n console.warn(\n `Invalid length provided: ${length}. Falling back to Short.`,\n );\n resolvedLength = SensitiveTextLength.Short;\n }\n\n const numLength = Number(resolvedLength);\n return '•'.repeat(Number.isNaN(numLength) ? 0 : numLength);\n }, [length]);\n\n return <Text {...props}>{isHidden ? fallback : children}</Text>;\n};\n"]}

package/dist/components/SensitiveText/SensitiveText.constants.cjs ADDED Viewed

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SensitiveTextLength = void 0;
+/**
+ * Predefined length options for SensitiveText hidden content.
+ * Values represent the number of bullet characters displayed when text is hidden.
+ */
+exports.SensitiveTextLength = {
+    Short: '6',
+    Medium: '9',
+    Long: '12',
+    ExtraLong: '20',
+};
+//# sourceMappingURL=SensitiveText.constants.cjs.map

package/dist/components/SensitiveText/SensitiveText.constants.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SensitiveText.constants.cjs","sourceRoot":"","sources":["../../../src/components/SensitiveText/SensitiveText.constants.ts"],"names":[],"mappings":";;;AAAA;;;GAGG;AACU,QAAA,mBAAmB,GAAG;IACjC,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,IAAI;CACP,CAAC","sourcesContent":["/**\n * Predefined length options for SensitiveText hidden content.\n * Values represent the number of bullet characters displayed when text is hidden.\n */\nexport const SensitiveTextLength = {\n Short: '6',\n Medium: '9',\n Long: '12',\n ExtraLong: '20',\n} as const;\n"]}

package/dist/components/SensitiveText/SensitiveText.constants.d.cts ADDED Viewed

@@ -0,0 +1,11 @@
+/**
+ * Predefined length options for SensitiveText hidden content.
+ * Values represent the number of bullet characters displayed when text is hidden.
+ */
+export declare const SensitiveTextLength: {
+    readonly Short: "6";
+    readonly Medium: "9";
+    readonly Long: "12";
+    readonly ExtraLong: "20";
+};
+//# sourceMappingURL=SensitiveText.constants.d.cts.map

package/dist/components/SensitiveText/SensitiveText.constants.d.cts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"SensitiveText.constants.d.cts","sourceRoot":"","sources":["../../../src/components/SensitiveText/SensitiveText.constants.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;;;;CAKtB,CAAC"}

package/dist/components/SensitiveText/SensitiveText.constants.d.mts ADDED Viewed

@@ -0,0 +1,11 @@
+/**
+ * Predefined length options for SensitiveText hidden content.
+ * Values represent the number of bullet characters displayed when text is hidden.
+ */
+export declare const SensitiveTextLength: {
+    readonly Short: "6";
+    readonly Medium: "9";
+    readonly Long: "12";
+    readonly ExtraLong: "20";
+};
+//# sourceMappingURL=SensitiveText.constants.d.mts.map

package/dist/components/SensitiveText/SensitiveText.constants.d.mts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"SensitiveText.constants.d.mts","sourceRoot":"","sources":["../../../src/components/SensitiveText/SensitiveText.constants.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;;;;CAKtB,CAAC"}

package/dist/components/SensitiveText/SensitiveText.constants.mjs ADDED Viewed

@@ -0,0 +1,11 @@
+/**
+ * Predefined length options for SensitiveText hidden content.
+ * Values represent the number of bullet characters displayed when text is hidden.
+ */
+export const SensitiveTextLength = {
+    Short: '6',
+    Medium: '9',
+    Long: '12',
+    ExtraLong: '20',
+};
+//# sourceMappingURL=SensitiveText.constants.mjs.map

package/dist/components/SensitiveText/SensitiveText.constants.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SensitiveText.constants.mjs","sourceRoot":"","sources":["../../../src/components/SensitiveText/SensitiveText.constants.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,IAAI;CACP,CAAC","sourcesContent":["/**\n * Predefined length options for SensitiveText hidden content.\n * Values represent the number of bullet characters displayed when text is hidden.\n */\nexport const SensitiveTextLength = {\n Short: '6',\n Medium: '9',\n Long: '12',\n ExtraLong: '20',\n} as const;\n"]}

package/dist/components/SensitiveText/SensitiveText.d.cts ADDED Viewed

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