jfs-components 0.0.43 → 0.0.45

package/lib/commonjs/components/StatusHero/StatusHero.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = StatusHero;
+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 _MoneyValue = _interopRequireDefault(require("../MoneyValue/MoneyValue"));
+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); }
+/**
+ * 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' }}
+ * />
+ * ```
+ */
+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
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+
+  // Container
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/gap', modes)) || 12;
+  const padding = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/padding', modes)) || 8;
+
+  // Media slot wrap (gap between icon and money value in default slot)
+  const slotWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/slotWrap/gap', modes)) || 46;
+
+  // Content wrap
+  const contentWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/contentWrap/gap', modes)) || 12;
+
+  // Title
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('statusHero/title/foreground', modes) || '#0c0d10';
+  const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/title/fontSize', modes)) || 20;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('statusHero/title/fontFamily', modes) || 'System';
+  const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/title/lineHeight', modes)) || 22;
+  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('statusHero/title/fontWeight', modes) || '700';
+
+  // Body
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('statusHero/body/foreground', modes) || '#24262b';
+  const bodyFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/body/fontSize', modes)) || 14;
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('statusHero/body/fontFamily', modes) || 'System';
+  const bodyLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('statusHero/body/lineHeight', modes)) || 17;
+  const bodyFontWeight = (0, _figmaVariablesResolver.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__*/(0, _react.isValidElement)(renderMedia) ? /*#__PURE__*/(0, _react.cloneElement)(renderMedia, {
+    modes
+  }) : renderMedia;
+  const defaultMediaContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: defaultMediaWrapStyle,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+      iconName: iconName,
+      modes: {
+        ...modes,
+        'Icon Capsule Size': 'L',
+        Emphasis: 'High',
+        AppearanceBrand: 'Primary'
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoneyValue.default, {
+      value: value,
+      currency: currency,
+      modes: {
+        ...modes,
+        Context3: 'Balance'
+      }
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: [mediaContent ?? defaultMediaContent, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: contentWrapStyle,
+      children: [showTitle && title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: titleStyle,
+        children: title
+      }) : null, subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: bodyStyle,
+        children: subtitle
+      }) : null]
+    })]
+  });
+}

package/lib/commonjs/components/SwappableAmount/SwappableAmount.js

@@ -0,0 +1,71 @@
+"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 _Button = _interopRequireDefault(require("../Button/Button"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function SwappableAmount({
+  value = '49g',
+  schedule = false,
+  scheduleLabel = 'Weekly on Mondays',
+  amountLabel = '₹5100',
+  onSchedulePress,
+  onAmountPress,
+  modes = {},
+  style
+}) {
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('swappableAmount/gap', modes) ?? 24;
+  const padding = (0, _figmaVariablesResolver.getVariableByName)('swappableAmount/padding', modes) ?? 8;
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('swappableAmount/foreground', modes) ?? '#0d0d0f';
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('swappableAmount/fontSize', modes) ?? 56;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('swappableAmount/fontFamily', modes) ?? 'System';
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('swappableAmount/fontWeight', modes) ?? 900;
+  const lineHeight = (0, _figmaVariablesResolver.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: [schedule && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      label: scheduleLabel,
+      icon: "ic_calendar_week",
+      onPress: onSchedulePress,
+      modes: {
+        ...modes,
+        AppearanceBrand: 'Neutral',
+        Emphasis: 'Low',
+        'Button / Size': 'S'
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: valueTextStyle,
+      children: value
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      label: amountLabel,
+      icon: "ic_data_in_out",
+      onPress: onAmountPress,
+      modes: {
+        ...modes,
+        Emphasis: 'Medium',
+        AppearanceBrand: 'Secondary'
+      }
+    })]
+  });
+}
+var _default = exports.default = SwappableAmount;

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

@@ -0,0 +1,79 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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 = (0, _figmaVariablesResolver.getVariableByName)('tabItem/padding/vertical', modes) ?? 8;
+  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 idleLabelColor = (0, _figmaVariablesResolver.getVariableByName)('tabItem/idle/label/color', modes) ?? '#303338';
+  const activeLabelColor = (0, _figmaVariablesResolver.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__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    style: ({
+      pressed
+    }) => [containerStyle, pressed && {
+      opacity: 0.7
+    }, style],
+    onPress: onPress,
+    accessibilityRole: "tab",
+    accessibilityState: {
+      selected: active
+    },
+    accessibilityLabel: accessibilityLabel ?? label,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [textStyle, labelStyle],
+      children: label
+    }), active && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: indicatorStyle
+    })]
+  });
+}
+var _default = exports.default = TabItem;

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

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TabItem", {
+  enumerable: true,
+  get: function () {
+    return _TabItem.default;
+  }
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _TabItem = _interopRequireDefault(require("./TabItem"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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 = (0, _figmaVariablesResolver.getVariableByName)('tabs/gap', modes) ?? 16;
+  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('tabs/padding/top', modes) ?? 0;
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('tabs/padding/bottom', modes) ?? 0;
+  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('tabs/padding/left', modes) ?? 0;
+  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('tabs/padding/right', modes) ?? 0;
+
+  // Forward modes to all TabItem children
+  const enhancedChildren = _react.default.Children.map(children, child => {
+    if (/*#__PURE__*/_react.default.isValidElement(child) && child.type === _TabItem.default) {
+      const childElement = child;
+      return /*#__PURE__*/_react.default.cloneElement(childElement, {
+        modes: {
+          ...modes,
+          ...(childElement.props.modes ?? {})
+        }
+      });
+    }
+    return child;
+  });
+  const containerStyle = {
+    flexDirection: 'row',
+    gap,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight
+  };
+  if (scrollable) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      accessibilityRole: "tablist",
+      contentContainerStyle: [containerStyle, style],
+      children: enhancedChildren
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "tablist",
+    children: enhancedChildren
+  });
+}
+var _default = exports.default = Tabs;

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

@@ -0,0 +1,38 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Text({
+  text = 'Korem ipsum ',
+  modes = {},
+  style,
+  numberOfLines
+}) {
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('text/foreground', modes) ?? '#000000';
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('text/fontFamily', modes) ?? 'JioType';
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('text/fontSize', modes) ?? 14;
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('text/fontWeight', modes) ?? '500';
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('text/lineHeight', modes) ?? 20;
+  const letterSpacing = (0, _figmaVariablesResolver.getVariableByName)('text/letterSpacing', modes) ?? -0.5;
+  const textStyle = {
+    color: foreground,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    fontWeight: String(fontWeight),
+    lineHeight: lineHeight,
+    letterSpacing: letterSpacing
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [textStyle, style],
+    numberOfLines: numberOfLines,
+    children: text
+  });
+}
+var _default = exports.default = Text;

package/lib/commonjs/components/Toggle/Toggle.js

@@ -0,0 +1,102 @@
+"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); }
+/**
+ * Toggle (switch) component that maps directly to the Figma design using design tokens.
+ *
+ * Supports controlled and uncontrolled usage, on/off states, and disabled state.
+ * All styling is driven by design tokens with optional mode overrides.
+ *
+ * @component
+ * @param {ToggleProps} props
+ */
+function Toggle({
+  value: controlledValue,
+  defaultValue = false,
+  onValueChange,
+  disabled = false,
+  modes = {},
+  style,
+  accessibilityLabel
+}) {
+  const isControlled = controlledValue !== undefined;
+  const [internalValue, setInternalValue] = (0, _react.useState)(defaultValue);
+  const isOn = isControlled ? controlledValue : internalValue;
+  const toggleState = disabled ? isOn ? 'Disabled On' : 'Disabled Off' : isOn ? 'On' : 'Off';
+  const resolvedModes = {
+    ...modes,
+    'Toggle States': toggleState
+  };
+  const width = (0, _figmaVariablesResolver.getVariableByName)('toggle/width', resolvedModes) ?? 52;
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('toggle/radius', resolvedModes) ?? 100;
+  const paddingTrack = (0, _figmaVariablesResolver.getVariableByName)('toggle/padding/track', resolvedModes) ?? 3;
+  const background = (0, _figmaVariablesResolver.getVariableByName)('toggle/background', resolvedModes) ?? (isOn ? '#5d00b5' : '#c7c7cc');
+  const thumbSize = (0, _figmaVariablesResolver.getVariableByName)('toggle/thumb/size', resolvedModes) ?? 25;
+  const thumbRadius = (0, _figmaVariablesResolver.getVariableByName)('toggle/thumb/radius', resolvedModes) ?? 100;
+  const thumbBackground = (0, _figmaVariablesResolver.getVariableByName)('toggle/thumb/background', resolvedModes) ?? '#ffffff';
+  const thumbShadowColor = (0, _figmaVariablesResolver.getVariableByName)('toggle/thumb/shadow/color', resolvedModes) ?? 'rgba(0,0,0,0.18)';
+  const thumbShadowRadius = (0, _figmaVariablesResolver.getVariableByName)('toggle/thumb/shadow/radius', resolvedModes) ?? 4;
+  const thumbShadowOffsetX = (0, _figmaVariablesResolver.getVariableByName)('toggle/thumb/shadow/offsetX', resolvedModes) ?? 0;
+  const thumbShadowOffsetY = (0, _figmaVariablesResolver.getVariableByName)('toggle/thumb/shadow/offsetY', resolvedModes) ?? 2;
+  const trackHeight = thumbSize + paddingTrack * 2;
+  const handlePress = (0, _react.useCallback)(() => {
+    if (disabled) return;
+    const next = !isOn;
+    if (!isControlled) {
+      setInternalValue(next);
+    }
+    onValueChange?.(next);
+  }, [disabled, isOn, isControlled, onValueChange]);
+  const trackStyle = {
+    width: width,
+    height: trackHeight,
+    borderRadius: radius,
+    backgroundColor: background,
+    padding: paddingTrack,
+    justifyContent: 'center',
+    alignItems: isOn ? 'flex-end' : 'flex-start',
+    opacity: disabled ? 0.5 : 1
+  };
+  const thumbShadow = _reactNative.Platform.OS === 'web' ? {
+    boxShadow: `${thumbShadowOffsetX}px ${thumbShadowOffsetY}px ${thumbShadowRadius}px 0px ${thumbShadowColor}`
+  } : {
+    shadowColor: thumbShadowColor,
+    shadowOffset: {
+      width: thumbShadowOffsetX,
+      height: thumbShadowOffsetY
+    },
+    shadowRadius: thumbShadowRadius,
+    shadowOpacity: 1,
+    elevation: 4
+  };
+  const thumbStyle = {
+    width: thumbSize,
+    height: thumbSize,
+    borderRadius: thumbRadius,
+    backgroundColor: thumbBackground,
+    ...thumbShadow
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    style: [trackStyle, style],
+    onPress: handlePress,
+    disabled: disabled,
+    accessibilityRole: "switch",
+    accessibilityState: {
+      checked: isOn,
+      disabled
+    },
+    accessibilityLabel: accessibilityLabel,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: thumbStyle
+    })
+  });
+}
+var _default = exports.default = Toggle;