jfs-components 0.0.43 → 0.0.45

package/lib/module/components/PortfolioHero/PortfolioHero.js

@@ -0,0 +1,73 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { cloneChildrenWithModes } from '../../utils/react-utils';
+import Avatar from '../Avatar/Avatar';
+import MoneyValue from '../MoneyValue/MoneyValue';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function PortfolioHero({
+  label = 'Gold',
+  imageSource,
+  value = '12,000.11',
+  currency = '₹',
+  modes = {
+    Context3: 'Balance'
+  },
+  children,
+  style
+}) {
+  const gap = getVariableByName('portfolioHero/gap', modes) ?? 16;
+  const padding = getVariableByName('portfolioHero/padding', modes) ?? 8;
+  const slotWrapGap = getVariableByName('portfolioHero/slotWrap/gap', modes) ?? 8;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: gap,
+    padding: padding
+  };
+  const productLabelStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8
+  };
+  const labelTextStyle = {
+    fontFamily: 'System',
+    fontWeight: '700',
+    fontSize: 16,
+    lineHeight: 16 * 1.3,
+    color: '#0d0d0f',
+    textAlign: 'center'
+  };
+  const slotWrapStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: slotWrapGap
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: productLabelStyle,
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        style: "Image",
+        ...(imageSource != null && {
+          imageSource
+        }),
+        modes: modes
+      }), /*#__PURE__*/_jsx(Text, {
+        style: labelTextStyle,
+        children: label
+      })]
+    }), /*#__PURE__*/_jsx(MoneyValue, {
+      value: value,
+      currency: currency,
+      modes: modes
+    }), children && /*#__PURE__*/_jsx(View, {
+      style: slotWrapStyle,
+      children: cloneChildrenWithModes(children, modes)
+    })]
+  });
+}
+export default PortfolioHero;

package/lib/module/components/ProductLabel/ProductLabel.js

@@ -0,0 +1,45 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import Avatar from '../Avatar/Avatar';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function ProductLabel({
+  label = 'Gold',
+  imageSource,
+  modes = {},
+  style
+}) {
+  const gap = getVariableByName('productLabel/gap', modes) ?? 8;
+  const textColor = getVariableByName('productLabel/text/color', modes) ?? '#000000';
+  const textFontSize = getVariableByName('productLabel/text/fontSize', modes) ?? 16;
+  const textFontFamily = getVariableByName('productLabel/text/fontFamily', modes) ?? 'JioType Var';
+  const textFontWeight = getVariableByName('productLabel/text/fontWeight', modes) ?? 700;
+  const textLineHeight = getVariableByName('productLabel/text/lineHeight', modes) ?? 21;
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: gap
+  };
+  const labelTextStyle = {
+    color: textColor,
+    fontSize: textFontSize,
+    fontFamily: textFontFamily,
+    fontWeight: String(textFontWeight),
+    lineHeight: textLineHeight,
+    textAlign: 'center'
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      style: "Image",
+      imageSource: imageSource,
+      modes: modes
+    }), /*#__PURE__*/_jsx(Text, {
+      style: labelTextStyle,
+      children: label
+    })]
+  });
+}
+export default ProductLabel;

package/lib/module/components/ProgressBadge/ProgressBadge.js

@@ -0,0 +1,125 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import Icon from '../../icons/Icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ProgressBadge component that displays an icon, text, and an internal progress bar.
+ *
+ * All visual attributes resolve from Figma tokens via `getVariableByName` using the provided `modes`.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.taskName="Live price: [price] (00:43)"] - The text displayed.
+ * @param {string} [props.iconName="ic_live"] - Icon name from the registry.
+ * @param {number} [props.value=0] - The progress value between 0 and 100.
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for design tokens.
+ * @param {Object} [props.style] - Optional container style overrides.
+ * @param {Object} [props.textStyle] - Optional text style overrides.
+ * @param {string} [props.accessibilityLabel] - Accessibility label.
+ */
+function ProgressBadge({
+  taskName = 'Live price: [price] (00:43)',
+  iconName = 'ic_live',
+  value = 0,
+  modes = {},
+  style,
+  textStyle: textStyleOverride,
+  accessibilityLabel,
+  ...rest
+}) {
+  // Resolve layout tokens
+  const backgroundColor = getVariableByName('progressBadge/background', modes) || '#ffffff';
+  const progressColor = getVariableByName('progressBadge/progress/color', modes) || '#ebebed';
+  const gap = getVariableByName('progressBadge/gap', modes) ?? 12;
+  const paddingHorizontal = getVariableByName('progressBadge/padding/horizontal', modes) ?? 16;
+  const paddingVertical = getVariableByName('progressBadge/padding/vertical', modes) ?? 6;
+  const borderRadius = getVariableByName('progressBadge/radius', modes) ?? 999;
+  const descriptionGap = getVariableByName('progressBadge/description/gap', modes) ?? 8;
+
+  // Resolve typography tokens
+  const fontFamily = getVariableByName('progressBadge/fontFamily', modes) || 'JioType_Var:Medium';
+  const fontWeightRaw = getVariableByName('progressBadge/fontWeight', modes) ?? 500;
+  const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
+  const fontSize = getVariableByName('progressBadge/fontSize', modes) ?? 14;
+  const lineHeight = getVariableByName('progressBadge/lineHeight', modes) ?? 17;
+  const textColor = getVariableByName('progressBadge/foreground', modes) || '#000000';
+
+  // Resolve icon tokens
+  const iconColor = getVariableByName('progressBadge/icon/color', modes) || '#f50030';
+  const iconSize = getVariableByName('progressBadge/icon/size', modes) ?? 18;
+  const containerStyle = {
+    backgroundColor,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius,
+    overflow: 'hidden',
+    position: 'relative',
+    flexWrap: 'wrap'
+  };
+  const descriptionContainerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: descriptionGap,
+    flex: 1,
+    paddingVertical: 0,
+    minHeight: 1,
+    minWidth: 1,
+    position: 'relative'
+  };
+  const textStyle = {
+    fontFamily,
+    fontWeight,
+    fontSize,
+    lineHeight,
+    color: textColor,
+    textAlign: 'center',
+    overflow: 'hidden',
+    flexShrink: 0
+  };
+
+  // Ensure value is between 0 and 100
+  const clampedValue = Math.max(0, Math.min(100, value));
+  const progressStyle = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    width: `${clampedValue}%`,
+    backgroundColor: progressColor
+  };
+  const defaultAccessibilityLabel = accessibilityLabel || taskName;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "text",
+    accessibilityLabel: defaultAccessibilityLabel,
+    ...rest,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: progressStyle,
+      pointerEvents: "none"
+    }), /*#__PURE__*/_jsxs(View, {
+      style: descriptionContainerStyle,
+      children: [iconName ? /*#__PURE__*/_jsx(Icon, {
+        name: iconName,
+        size: iconSize,
+        color: iconColor,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      }) : null, /*#__PURE__*/_jsx(Text, {
+        style: [textStyle, textStyleOverride],
+        numberOfLines: 1,
+        ellipsizeMode: "tail",
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: taskName
+      })]
+    })]
+  });
+}
+export default ProgressBadge;

package/lib/module/components/ProgressBadge/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default } from './ProgressBadge';
+export * from './ProgressBadge';

package/lib/module/components/StatItem/StatItem.js

@@ -0,0 +1,56 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * StatItem displays a label/value pair with the value in a large, bold style.
+ * Useful for metrics, product stats, or KPI callouts.
+ *
+ * @component
+ * @param {StatItemProps} props
+ */
+function StatItem({
+  label = 'Purity verified by NABL',
+  value = '99.99%',
+  modes = {},
+  style
+}) {
+  const gap = getVariableByName('statItem/gap', modes) ?? 2;
+  const labelForeground = getVariableByName('statItem/label/foreground', modes) ?? '#1a1c1f';
+  const labelFontFamily = getVariableByName('statItem/label/fontFamily', modes) ?? 'JioType Var';
+  const labelFontSize = getVariableByName('statItem/label/fontSize', modes) ?? 12;
+  const labelFontWeight = getVariableByName('statItem/label/fontWeight', modes) ?? '500';
+  const labelLineHeight = getVariableByName('statItem/label/lineHeight', modes) ?? 16;
+  const valueForeground = getVariableByName('statItem/value/foreground', modes) ?? '#0d0d0f';
+  const valueFontFamily = getVariableByName('statItem/value/fontFamily', modes) ?? 'JioType Var';
+  const valueFontSize = getVariableByName('statItem/value/fontSize', modes) ?? 26;
+  const valueFontWeight = getVariableByName('statItem/value/fontWeight', modes) ?? '900';
+  const valueLineHeight = getVariableByName('statItem/value/lineHeight', modes) ?? 26;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      gap: gap
+    }, style],
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: {
+        color: labelForeground,
+        fontFamily: labelFontFamily,
+        fontSize: labelFontSize,
+        fontWeight: String(labelFontWeight),
+        lineHeight: labelLineHeight
+      },
+      children: label
+    }), /*#__PURE__*/_jsx(Text, {
+      style: {
+        color: valueForeground,
+        fontFamily: valueFontFamily,
+        fontSize: valueFontSize,
+        fontWeight: String(valueFontWeight),
+        lineHeight: valueLineHeight
+      },
+      children: value
+    })]
+  });
+}
+export default StatItem;

package/lib/module/components/StatusHero/StatusHero.js

@@ -0,0 +1,142 @@
+"use strict";
+
+import React, { isValidElement, cloneElement } from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import IconCapsule from '../IconCapsule/IconCapsule';
+import MoneyValue from '../MoneyValue/MoneyValue';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * StatusHero component that displays a hero section for payment/transaction status screens.
+ *
+ * Contains a media slot (defaults to IconCapsule + MoneyValue) and a content area
+ * with an optional title and a subtitle. All visual values are resolved from Figma
+ * design tokens via `getVariableByName`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StatusHero
+ *   iconName="ic_confirm"
+ *   value="50"
+ *   currency="INR"
+ *   title="You're set to make payments"
+ *   subtitle="₹50 will be auto-invested daily, stay consistent & stay golden."
+ *   modes={{ 'Color Mode': 'Light' }}
+ * />
+ * ```
+ */
+export default function StatusHero({
+  renderMedia,
+  title = "You're set to make payments",
+  showTitle = true,
+  subtitle = '₹50 will be auto-invested daily,\nstay consistent & stay golden.',
+  iconName = 'ic_confirm',
+  value = '50',
+  currency = 'INR',
+  modes: propModes = {},
+  style
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+
+  // Container
+  const gap = Number(getVariableByName('statusHero/gap', modes)) || 12;
+  const padding = Number(getVariableByName('statusHero/padding', modes)) || 8;
+
+  // Media slot wrap (gap between icon and money value in default slot)
+  const slotWrapGap = Number(getVariableByName('statusHero/slotWrap/gap', modes)) || 46;
+
+  // Content wrap
+  const contentWrapGap = Number(getVariableByName('statusHero/contentWrap/gap', modes)) || 12;
+
+  // Title
+  const titleColor = getVariableByName('statusHero/title/foreground', modes) || '#0c0d10';
+  const titleFontSize = Number(getVariableByName('statusHero/title/fontSize', modes)) || 20;
+  const titleFontFamily = getVariableByName('statusHero/title/fontFamily', modes) || 'System';
+  const titleLineHeight = Number(getVariableByName('statusHero/title/lineHeight', modes)) || 22;
+  const titleFontWeight = getVariableByName('statusHero/title/fontWeight', modes) || '700';
+
+  // Body
+  const bodyColor = getVariableByName('statusHero/body/foreground', modes) || '#24262b';
+  const bodyFontSize = Number(getVariableByName('statusHero/body/fontSize', modes)) || 14;
+  const bodyFontFamily = getVariableByName('statusHero/body/fontFamily', modes) || 'System';
+  const bodyLineHeight = Number(getVariableByName('statusHero/body/lineHeight', modes)) || 17;
+  const bodyFontWeight = getVariableByName('statusHero/body/fontWeight', modes) || '500';
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap,
+    padding
+  };
+  const defaultMediaWrapStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: slotWrapGap
+  };
+  const contentWrapStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: contentWrapGap
+  };
+  const titleStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    fontFamily: titleFontFamily,
+    lineHeight: titleLineHeight,
+    fontWeight: String(titleFontWeight),
+    textAlign: 'center'
+  };
+  const bodyStyle = {
+    color: bodyColor,
+    fontSize: bodyFontSize,
+    fontFamily: bodyFontFamily,
+    lineHeight: bodyLineHeight,
+    fontWeight: String(bodyFontWeight),
+    textAlign: 'center'
+  };
+
+  // Inject modes into the provided slot if it's a valid React element
+  const mediaContent = /*#__PURE__*/isValidElement(renderMedia) ? /*#__PURE__*/cloneElement(renderMedia, {
+    modes
+  }) : renderMedia;
+  const defaultMediaContent = /*#__PURE__*/_jsxs(View, {
+    style: defaultMediaWrapStyle,
+    children: [/*#__PURE__*/_jsx(IconCapsule, {
+      iconName: iconName,
+      modes: {
+        ...modes,
+        'Icon Capsule Size': 'L',
+        Emphasis: 'High',
+        AppearanceBrand: 'Primary'
+      }
+    }), /*#__PURE__*/_jsx(MoneyValue, {
+      value: value,
+      currency: currency,
+      modes: {
+        ...modes,
+        Context3: 'Balance'
+      }
+    })]
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    children: [mediaContent ?? defaultMediaContent, /*#__PURE__*/_jsxs(View, {
+      style: contentWrapStyle,
+      children: [showTitle && title ? /*#__PURE__*/_jsx(Text, {
+        style: titleStyle,
+        children: title
+      }) : null, subtitle ? /*#__PURE__*/_jsx(Text, {
+        style: bodyStyle,
+        children: subtitle
+      }) : null]
+    })]
+  });
+}

package/lib/module/components/SwappableAmount/SwappableAmount.js

@@ -0,0 +1,66 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import Button from '../Button/Button';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function SwappableAmount({
+  value = '49g',
+  schedule = false,
+  scheduleLabel = 'Weekly on Mondays',
+  amountLabel = '₹5100',
+  onSchedulePress,
+  onAmountPress,
+  modes = {},
+  style
+}) {
+  const gap = getVariableByName('swappableAmount/gap', modes) ?? 24;
+  const padding = getVariableByName('swappableAmount/padding', modes) ?? 8;
+  const foreground = getVariableByName('swappableAmount/foreground', modes) ?? '#0d0d0f';
+  const fontSize = getVariableByName('swappableAmount/fontSize', modes) ?? 56;
+  const fontFamily = getVariableByName('swappableAmount/fontFamily', modes) ?? 'System';
+  const fontWeight = getVariableByName('swappableAmount/fontWeight', modes) ?? 900;
+  const lineHeight = getVariableByName('swappableAmount/lineHeight', modes) ?? 56;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: gap,
+    padding: padding
+  };
+  const valueTextStyle = {
+    color: foreground,
+    fontSize: fontSize,
+    fontFamily: fontFamily,
+    fontWeight: String(fontWeight),
+    lineHeight: lineHeight
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    children: [schedule && /*#__PURE__*/_jsx(Button, {
+      label: scheduleLabel,
+      icon: "ic_calendar_week",
+      onPress: onSchedulePress,
+      modes: {
+        ...modes,
+        AppearanceBrand: 'Neutral',
+        Emphasis: 'Low',
+        'Button / Size': 'S'
+      }
+    }), /*#__PURE__*/_jsx(Text, {
+      style: valueTextStyle,
+      children: value
+    }), /*#__PURE__*/_jsx(Button, {
+      label: amountLabel,
+      icon: "ic_data_in_out",
+      onPress: onAmountPress,
+      modes: {
+        ...modes,
+        Emphasis: 'Medium',
+        AppearanceBrand: 'Secondary'
+      }
+    })]
+  });
+}
+export default SwappableAmount;

package/lib/module/components/Tabs/TabItem.js

@@ -0,0 +1,74 @@
+"use strict";
+
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Individual tab item used inside the Tabs container.
+ *
+ * Supports idle and active states driven by design tokens.
+ * When active, a bottom indicator bar is shown beneath the label.
+ *
+ * @component
+ * @param {TabItemProps} props
+ */
+function TabItem({
+  label = 'Tab item',
+  active = false,
+  onPress,
+  modes = {},
+  style,
+  labelStyle,
+  accessibilityLabel
+}) {
+  const paddingVertical = getVariableByName('tabItem/padding/vertical', modes) ?? 8;
+  const fontFamily = getVariableByName('tabItem/label/fontFamily', modes) ?? 'JioType Var';
+  const fontSize = getVariableByName('tabItem/label/size', modes) ?? 14;
+  const lineHeight = getVariableByName('tabItem/label/lineHeight', modes) ?? 17;
+  const idleLabelColor = getVariableByName('tabItem/idle/label/color', modes) ?? '#303338';
+  const activeLabelColor = getVariableByName('tabItem/active/label/color', modes) ?? '#cea15a';
+  const labelColor = active ? activeLabelColor : idleLabelColor;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical
+  };
+  const textStyle = {
+    color: labelColor,
+    fontFamily,
+    fontSize,
+    lineHeight,
+    fontWeight: '500'
+  };
+  const indicatorStyle = {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 2,
+    backgroundColor: activeLabelColor,
+    borderRadius: 1
+  };
+  return /*#__PURE__*/_jsxs(Pressable, {
+    style: ({
+      pressed
+    }) => [containerStyle, pressed && {
+      opacity: 0.7
+    }, style],
+    onPress: onPress,
+    accessibilityRole: "tab",
+    accessibilityState: {
+      selected: active
+    },
+    accessibilityLabel: accessibilityLabel ?? label,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [textStyle, labelStyle],
+      children: label
+    }), active && /*#__PURE__*/_jsx(View, {
+      style: indicatorStyle
+    })]
+  });
+}
+export default TabItem;

package/lib/module/components/Tabs/Tabs.js

@@ -0,0 +1,78 @@
+"use strict";
+
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import TabItem from './TabItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Tabs container component that lays out TabItem children horizontally.
+ *
+ * The "Tab items" slot maps to React children — each child should be a
+ * `<TabItem>` element. The `modes` prop is automatically forwarded to
+ * every TabItem child so theming is consistent.
+ *
+ * @component
+ * @param {TabsProps} props
+ *
+ * @example
+ * ```tsx
+ * const [activeIndex, setActiveIndex] = useState(0);
+ *
+ * <Tabs modes={{ 'Color Mode': 'Light' }}>
+ *   <TabItem label="Tab 1" active={activeIndex === 0} onPress={() => setActiveIndex(0)} />
+ *   <TabItem label="Tab 2" active={activeIndex === 1} onPress={() => setActiveIndex(1)} />
+ *   <TabItem label="Tab 3" active={activeIndex === 2} onPress={() => setActiveIndex(2)} />
+ * </Tabs>
+ * ```
+ */
+function Tabs({
+  children,
+  modes = {},
+  scrollable = false,
+  style
+}) {
+  const gap = getVariableByName('tabs/gap', modes) ?? 16;
+  const paddingTop = getVariableByName('tabs/padding/top', modes) ?? 0;
+  const paddingBottom = getVariableByName('tabs/padding/bottom', modes) ?? 0;
+  const paddingLeft = getVariableByName('tabs/padding/left', modes) ?? 0;
+  const paddingRight = getVariableByName('tabs/padding/right', modes) ?? 0;
+
+  // Forward modes to all TabItem children
+  const enhancedChildren = React.Children.map(children, child => {
+    if (/*#__PURE__*/React.isValidElement(child) && child.type === TabItem) {
+      const childElement = child;
+      return /*#__PURE__*/React.cloneElement(childElement, {
+        modes: {
+          ...modes,
+          ...(childElement.props.modes ?? {})
+        }
+      });
+    }
+    return child;
+  });
+  const containerStyle = {
+    flexDirection: 'row',
+    gap,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight
+  };
+  if (scrollable) {
+    return /*#__PURE__*/_jsx(ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      accessibilityRole: "tablist",
+      contentContainerStyle: [containerStyle, style],
+      children: enhancedChildren
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "tablist",
+    children: enhancedChildren
+  });
+}
+export { TabItem };
+export default Tabs;