jfs-components 0.0.45 → 0.0.48

package/lib/commonjs/components/ChipSelect/ChipSelect.js

@@ -18,7 +18,6 @@ function ChipSelect({
   label = 'Date',
   active = false,
   icon = 'ic_calendar_week',
-  close = true,
   modes = {},
   style,
   labelSlot,
@@ -92,7 +91,7 @@ function ChipSelect({
       name: icon,
       size: iconSize,
       color: textColor
-    }), renderLabel(), active && close && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    }), renderLabel(), active && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       name: "ic_close",
       size: iconSize,
       color: textColor

package/lib/commonjs/components/Drawer/demo.xml

@@ -0,0 +1,18 @@
+<design>
+    <ListItem layout="Horizontal" leadingType="Avatar" navArrow="false" showSupportText="true" start="true" supportText="Support Text" title="Aasa Singh" trailing="true">
+        <Avatar monogram="MS" style="Image"></Avatar>
+        <frame horizontalSizing="FILL" name="text wrap" verticalSizing="HUG">
+            <slot name="supportText">
+                <text name="support text">₹10,000</text>
+            </slot>
+            <text name="Title">Aasa Singh</text>
+        </frame>
+        <frame horizontalSizing="HUG" modes='{"Context":"ListItem"}' name="end wrap" verticalSizing="HUG">
+            <slot name="slot">
+                <Button label="Button">
+                    <text name="Label">Button</text>
+                </Button>
+            </slot>
+        </frame>
+    </ListItem>
+</design>

package/lib/commonjs/components/FormField/FormField.js

@@ -87,6 +87,7 @@ function useFormField(props) {
     borderWidth: inputBorderSize,
     borderRadius: inputRadius,
     paddingHorizontal: inputPaddingH,
+    paddingVertical: 0,
     gap: inputGap
   }), [inputBackground, inputBorderColor, inputBorderSize, inputRadius, inputPaddingH, inputGap]);
   const inputTextStyle = (0, _react.useMemo)(() => ({

package/lib/commonjs/components/NoteInput/NoteInput.js

@@ -52,9 +52,8 @@ function NoteInput({
     backgroundColor: background,
     borderWidth: borderSize,
     borderColor: borderColor,
-    gap: gap,
+    gap: gap
     // Add specific width when editing if requested by Figma design logic, though flex fits content generically
-    alignSelf: 'flex-start'
   };
   const baseTextStyle = {
     color: foreground,

package/lib/commonjs/components/Nudge/Nudge.js

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Nudge({
+  variant = 'Default',
+  title = 'Split payment',
+  body = 'Split this transaction into installments',
+  buttonLabel = 'Button',
+  onPressButton,
+  buttonSlot,
+  startSlot,
+  children,
+  modes: propModes = {},
+  style
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const background = (0, _figmaVariablesResolver.getVariableByName)('nudge/background', modes) || '#f5f5f5';
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('nudge/radius', modes) || 12;
+  const paddingH = (0, _figmaVariablesResolver.getVariableByName)('nudge/padding/horizontal', modes) || 12;
+  const paddingV = (0, _figmaVariablesResolver.getVariableByName)('nudge/padding/vertical', modes) || 12;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('nudge/gap', modes) || 6;
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/color', modes) || '#0d0d0f';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/fontSize', modes) || 14;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/fontFamily', modes) || 'JioType Var';
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/lineHeight', modes) || 15;
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/fontWeight', modes) || 700;
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/color', modes) || '#1a1c1f';
+  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontSize', modes) || 12;
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontFamily', modes) || 'JioType Var';
+  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/lineHeight', modes) || 16;
+  const bodyFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontWeight', modes) || 500;
+  const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw;
+  const textGap = (0, _figmaVariablesResolver.getVariableByName)('nudge/text/gap', modes) || 4;
+  const contentGap = (0, _figmaVariablesResolver.getVariableByName)('nudge/content/gap', modes) || 8;
+  const contentMinHeight = (0, _figmaVariablesResolver.getVariableByName)('nudge/content/minHeight', modes) || 20;
+  const containerStyle = {
+    backgroundColor: background,
+    borderRadius: radius,
+    paddingHorizontal: paddingH,
+    paddingVertical: paddingV,
+    gap,
+    overflow: 'hidden',
+    ...(variant === 'Variant2' ? {
+      flexDirection: 'column',
+      alignItems: 'flex-start'
+    } : {
+      flexDirection: 'row',
+      alignItems: 'flex-start'
+    })
+  };
+  const titleStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    fontFamily: titleFontFamily,
+    lineHeight: titleLineHeight,
+    fontWeight: titleFontWeight
+  };
+  const bodyStyle = {
+    color: bodyColor,
+    fontSize: bodyFontSize,
+    fontFamily: bodyFontFamily,
+    lineHeight: bodyLineHeight,
+    fontWeight: bodyFontWeight
+  };
+  const processedStartSlot = startSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(startSlot), modes) : null;
+  const startSlotElement = processedStartSlot && processedStartSlot.length > 0 ? processedStartSlot.length === 1 ? processedStartSlot[0] : processedStartSlot : null;
+  if (variant === 'Variant2') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [containerStyle, style],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 6,
+          width: '100%'
+        },
+        children: [startSlotElement, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [titleStyle, {
+            flex: 1
+          }],
+          children: title
+        })]
+      }), children ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(children), modes) : null]
+    });
+  }
+  const defaultContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      gap: contentGap,
+      alignItems: 'flex-start',
+      width: '100%'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        gap: textGap,
+        alignItems: 'flex-start',
+        width: '100%'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: titleStyle,
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: bodyStyle,
+        children: body
+      })]
+    }), buttonSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(buttonSlot), modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      label: buttonLabel,
+      onPress: onPressButton,
+      modes: modes
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: [startSlotElement, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flex: 1,
+        minWidth: 1,
+        minHeight: contentMinHeight,
+        justifyContent: 'center',
+        overflow: 'hidden'
+      },
+      children: children ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(children), modes) : defaultContent
+    })]
+  });
+}
+var _default = exports.default = Nudge;

package/lib/commonjs/components/PaymentFeedback/PaymentFeedback.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PaymentFeedback;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function PaymentFeedback({
+  title = '₹50,000',
+  subtitle = 'Payment successful',
+  body = 'Your payment has been\nsuccessfully processed.',
+  details = '18 March 2025, 4:15 pm\nTransaction ID: TXN121466784',
+  showDetails = true,
+  iconName = 'ic_confirm',
+  renderMedia,
+  modes: propModes = {},
+  style
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const containerGap = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/container/gap', modes)) || 46;
+  const messageGap = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/message/gap', modes)) || 12;
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/title/color', modes) || '#0d0d0f';
+  const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/title/fontSize', modes)) || 36;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/title/fontFamily', modes) || 'JioType Var';
+  const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/title/lineHeight', modes)) || 36;
+  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/title/fontWeight', modes) || '900';
+  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/subtitle/color', modes) || '#24262b';
+  const subtitleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/subtitle/fontSize', modes)) || 16;
+  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/subtitle/fontFamily', modes) || 'JioType Var';
+  const subtitleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/subtitle/lineHeight', modes)) || 19;
+  const subtitleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/subtitle/fontWeight', modes) || '500';
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/body/color', modes) || '#24262b';
+  const bodyFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/body/fontSize', modes)) || 14;
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/body/fontFamily', modes) || 'JioType Var';
+  const bodyLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/body/lineHeight', modes)) || 17;
+  const bodyFontWeight = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/body/fontWeight', modes) || '500';
+  const detailsColor = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/details/color', modes) || '#24262b';
+  const detailsFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/details/fontSize', modes)) || 14;
+  const detailsFontFamily = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/details/fontFamily', modes) || 'JioType Var';
+  const detailsLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/details/lineHeight', modes)) || 17;
+  const detailsFontWeight = (0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/details/fontWeight', modes) || '500';
+  const detailsParagraphSpacing = Number((0, _figmaVariablesResolver.getVariableByName)('paymnetFeedback/details/paragraphSpacing', modes)) || 4;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: containerGap
+  };
+  const messageContainerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: messageGap,
+    width: '100%'
+  };
+  const subtextContainerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 4,
+    width: '100%'
+  };
+  const titleStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    fontFamily: titleFontFamily,
+    lineHeight: titleLineHeight,
+    fontWeight: String(titleFontWeight),
+    textAlign: 'center'
+  };
+  const subtitleStyle = {
+    color: subtitleColor,
+    fontSize: subtitleFontSize,
+    fontFamily: subtitleFontFamily,
+    lineHeight: subtitleLineHeight,
+    fontWeight: String(subtitleFontWeight),
+    textAlign: 'center'
+  };
+  const bodyStyle = {
+    color: bodyColor,
+    fontSize: bodyFontSize,
+    fontFamily: bodyFontFamily,
+    lineHeight: bodyLineHeight,
+    fontWeight: String(bodyFontWeight),
+    textAlign: 'center'
+  };
+  const detailsStyle = {
+    color: detailsColor,
+    fontSize: detailsFontSize,
+    fontFamily: detailsFontFamily,
+    lineHeight: detailsLineHeight,
+    fontWeight: String(detailsFontWeight),
+    textAlign: 'center'
+  };
+  const mediaContent = /*#__PURE__*/(0, _react.isValidElement)(renderMedia) ? /*#__PURE__*/(0, _react.cloneElement)(renderMedia, {
+    modes
+  }) : renderMedia;
+  const defaultMedia = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+    iconName: iconName,
+    modes: {
+      ...modes,
+      'Icon Capsule Size': 'L',
+      Emphasis: 'High',
+      'Semantic Intent': 'System',
+      AppearanceSystem: 'positive'
+    }
+  });
+  const detailLines = details?.split('\n') ?? [];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: [mediaContent ?? defaultMedia, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: messageContainerStyle,
+      children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: titleStyle,
+        children: title
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: subtextContainerStyle,
+        children: [subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: subtitleStyle,
+          children: subtitle
+        }) : null, body ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: bodyStyle,
+          children: body
+        }) : null]
+      })]
+    }), showDetails && details ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        alignItems: 'center'
+      },
+      children: detailLines.map((line, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [detailsStyle, i < detailLines.length - 1 ? {
+          marginBottom: detailsParagraphSpacing
+        } : undefined],
+        children: line
+      }, i))
+    }) : null]
+  });
+}

package/lib/commonjs/components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function SegmentedControlSegment({
+  label,
+  active,
+  onPress,
+  modes = {}
+}) {
+  const resolvedModes = {
+    ...modes,
+    'SegmentedControl/Segment': active ? 'Active' : 'Idle'
+  };
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('segment/padding/horizontal', resolvedModes) ?? 16;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('segment/padding/vertical', resolvedModes) ?? 12;
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('segment/radius', resolvedModes) ?? 20;
+  const background = (0, _figmaVariablesResolver.getVariableByName)('segment/background', resolvedModes) ?? (active ? '#5d00b5' : 'transparent');
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('segment/foreground', resolvedModes) ?? (active ? '#ffffff' : '#0c0d10');
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('segment/fontSize', resolvedModes) ?? 16;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('segment/fontFamily', resolvedModes) ?? 'JioType Var';
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('segment/lineHeight', resolvedModes) ?? 19;
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('segment/fontWeight', resolvedModes) ?? '500';
+  const segmentStyle = {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius: radius,
+    backgroundColor: background
+  };
+  const textStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize,
+    lineHeight,
+    fontWeight: fontWeight
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    style: ({
+      pressed
+    }) => [segmentStyle, pressed && {
+      opacity: 0.8
+    }],
+    onPress: onPress,
+    accessibilityRole: "tab",
+    accessibilityState: {
+      selected: active
+    },
+    accessibilityLabel: label,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: textStyle,
+      children: label
+    })
+  });
+}
+
+/**
+ * SegmentedControl component backed by Figma design tokens.
+ *
+ * Provides a horizontal row of mutually exclusive segments.
+ * Supports controlled (`selectedKey` + `onSelectionChange`) and
+ * uncontrolled (`defaultSelectedKey`) usage patterns.
+ *
+ * @component
+ * @param {SegmentedControlProps} props
+ *
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = useState<React.Key>('daily');
+ *
+ * <SegmentedControl
+ *   items={[
+ *     { key: 'daily', label: 'Daily' },
+ *     { key: 'weekly', label: 'Weekly' },
+ *     { key: 'monthly', label: 'Monthly' },
+ *   ]}
+ *   selectedKey={selected}
+ *   onSelectionChange={setSelected}
+ *   modes={{ 'Color Mode': 'Light' }}
+ * />
+ * ```
+ */
+function SegmentedControl({
+  items,
+  selectedKey: controlledSelectedKey,
+  defaultSelectedKey,
+  onSelectionChange,
+  modes = {},
+  style
+}) {
+  const isControlled = controlledSelectedKey !== undefined;
+  const [internalSelectedKey, setInternalSelectedKey] = (0, _react.useState)(defaultSelectedKey ?? items[0]?.key);
+  const currentSelectedKey = isControlled ? controlledSelectedKey : internalSelectedKey;
+  const handlePress = (0, _react.useCallback)(key => {
+    if (!isControlled) {
+      setInternalSelectedKey(key);
+    }
+    onSelectionChange?.(key);
+  }, [isControlled, onSelectionChange]);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('segmentedControl/gap', modes) ?? 8;
+  const background = (0, _figmaVariablesResolver.getVariableByName)('segmentedControl/background', modes) ?? '#f6f3ff';
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('segmentedControl/radius', modes) ?? 24;
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: background,
+    borderRadius: radius,
+    gap,
+    overflow: 'hidden'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "tablist",
+    children: items.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(SegmentedControlSegment, {
+      label: item.label,
+      active: item.key === currentSelectedKey,
+      onPress: () => handlePress(item.key),
+      modes: modes
+    }, String(item.key)))
+  });
+}
+var _default = exports.default = SegmentedControl;

package/lib/commonjs/components/SupportText/SupportTextIcon.js

@@ -13,10 +13,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const STATUS_ICON_MAP = {
   Neutral: 'ic_info',
   Warning: 'ic_warning',
-  // Using ic_warning for Warning
   Error: 'ic_warning',
-  // Using ic_warning for Error
-  Success: 'ic_status_successful'
+  Success: 'ic_status_successful',
+  Loading: 'ic_time'
 };
 function SupportTextIcon({
   status = 'Neutral',

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

@@ -31,8 +31,12 @@ function TabItem({
   const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('tabItem/label/fontFamily', modes) ?? 'JioType Var';
   const fontSize = (0, _figmaVariablesResolver.getVariableByName)('tabItem/label/size', modes) ?? 14;
   const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('tabItem/label/lineHeight', modes) ?? 17;
+  const fontWeight = String((0, _figmaVariablesResolver.getVariableByName)('tabItem/label/fontWeight', modes) ?? 500);
   const idleLabelColor = (0, _figmaVariablesResolver.getVariableByName)('tabItem/idle/label/color', modes) ?? '#303338';
-  const activeLabelColor = (0, _figmaVariablesResolver.getVariableByName)('tabItem/active/label/color', modes) ?? '#cea15a';
+  const activeLabelColor = (0, _figmaVariablesResolver.getVariableByName)('tabItem/active/label/color', modes) ?? '#000000';
+  const indicatorBackground = (0, _figmaVariablesResolver.getVariableByName)('tabItem/indicator/background', modes) ?? '#CEA15A';
+  const indicatorHeight = (0, _figmaVariablesResolver.getVariableByName)('tabItem/indicator/height', modes) ?? 2;
+  const indicatorRadius = (0, _figmaVariablesResolver.getVariableByName)('tabItem/indicator/radius', modes) ?? 99;
   const labelColor = active ? activeLabelColor : idleLabelColor;
   const containerStyle = {
     flexDirection: 'column',
@@ -45,16 +49,16 @@ function TabItem({
     fontFamily,
     fontSize,
     lineHeight,
-    fontWeight: '500'
+    fontWeight
   };
   const indicatorStyle = {
     position: 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
-    height: 2,
-    backgroundColor: activeLabelColor,
-    borderRadius: 1
+    height: indicatorHeight,
+    backgroundColor: indicatorBackground,
+    borderRadius: indicatorRadius
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
     style: ({

package/lib/commonjs/components/Tabs/Tabs.js

@@ -64,11 +64,13 @@ function Tabs({
   });
   const containerStyle = {
     flexDirection: 'row',
+    alignItems: 'flex-start',
     gap,
     paddingTop,
     paddingBottom,
     paddingLeft,
-    paddingRight
+    paddingRight,
+    overflow: 'hidden'
   };
   if (scrollable) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {

package/lib/commonjs/components/Text/Text.js

@@ -9,8 +9,13 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TEXT_ALIGN_MAP = {
+  Left: 'left',
+  Center: 'center'
+};
 function Text({
   text = 'Korem ipsum ',
+  textAlign = 'Left',
   modes = {},
   style,
   numberOfLines
@@ -27,7 +32,8 @@ function Text({
     fontSize: fontSize,
     fontWeight: String(fontWeight),
     lineHeight: lineHeight,
-    letterSpacing: letterSpacing
+    letterSpacing: letterSpacing,
+    textAlign: TEXT_ALIGN_MAP[textAlign]
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
     style: [textStyle, style],

package/lib/commonjs/components/Title/Title.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TEXT_ALIGN_MAP = {
+  Left: 'left',
+  Center: 'center'
+};
+function Title({
+  title = 'Title',
+  subtitle,
+  textAlign = 'Left',
+  modes: propModes = {},
+  style,
+  textStyle,
+  subtitleStyle,
+  numberOfLines,
+  accessibilityLabel,
+  accessibilityHint,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('title/padding/horizontal', modes) || 16;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('title/padding/vertical', modes) || 8;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('title/gap', modes) || 8;
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('title/label/color', modes) || '#0d0d0f';
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('title/fontSize', modes) || 26;
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('title/lineHeight', modes) || 26;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('title/fontFamily', modes) || 'System';
+  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('title/fontWeight', modes) || 900;
+  const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
+  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/label/color', modes) || '#0d0d0f';
+  const subtitleFontSize = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/fontSize', modes) || 14;
+  const subtitleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/lineHeight', modes) || 18;
+  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/fontFamily', modes) || 'System';
+  const subtitleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('pageSubtitle/fontWeight', modes) || 500;
+  const subtitleFontWeight = typeof subtitleFontWeightRaw === 'number' ? subtitleFontWeightRaw.toString() : subtitleFontWeightRaw;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: textAlign === 'Center' ? 'center' : 'stretch',
+    justifyContent: 'center',
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    width: '100%'
+  };
+  const titleTextStyle = {
+    color: labelColor,
+    fontSize,
+    lineHeight,
+    fontFamily,
+    fontWeight,
+    flexShrink: 1,
+    textAlign: TEXT_ALIGN_MAP[textAlign]
+  };
+  const subtitleTextStyle = {
+    color: subtitleColor,
+    fontSize: subtitleFontSize,
+    lineHeight: subtitleLineHeight,
+    fontFamily: subtitleFontFamily,
+    fontWeight: subtitleFontWeight,
+    flexShrink: 1,
+    textAlign: TEXT_ALIGN_MAP[textAlign]
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "header",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [titleTextStyle, textStyle],
+      numberOfLines: numberOfLines !== undefined ? numberOfLines : 1,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: title
+    }), subtitle != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [subtitleTextStyle, subtitleStyle],
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: subtitle
+    })]
+  });
+}
+var _default = exports.default = Title;