jfs-components 0.0.47 → 0.0.48

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/Title/Title.js

@@ -10,31 +10,18 @@ var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resol
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Title component that mirrors the Figma "Title" component.
- *
- * This component displays a title with design-token driven styling
- * via `getVariableByName` and `modes`.
- *
- * @component
- * @param {Object} props
- * @param {string} [props.title='Page Title'] - Title text to display
- * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
- * @param {Object} [props.style] - Optional container style overrides
- * @param {Object} [props.textStyle] - Optional text style overrides
- * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses title
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
- */
 const TEXT_ALIGN_MAP = {
   Left: 'left',
   Center: 'center'
 };
 function Title({
-  title = 'Page Title',
+  title = 'Title',
+  subtitle,
   textAlign = 'Left',
   modes: propModes = {},
   style,
   textStyle,
+  subtitleStyle,
   numberOfLines,
   accessibilityLabel,
   accessibilityHint,
@@ -49,21 +36,29 @@ function Title({
   };
   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) || 700;
+  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 textStyleObj = {
+  const titleTextStyle = {
     color: labelColor,
     fontSize,
     lineHeight,
@@ -72,20 +67,33 @@ function Title({
     flexShrink: 1,
     textAlign: TEXT_ALIGN_MAP[textAlign]
   };
-  const defaultAccessibilityLabel = accessibilityLabel || title;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  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: undefined,
+    accessibilityLabel: accessibilityLabel,
     accessibilityHint: accessibilityHint,
     ...rest,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [textStyleObj, textStyle],
+    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;