jfs-components 0.0.44 → 0.0.47

package/lib/commonjs/index.js

@@ -45,4 +45,16 @@ Object.keys(_Containers).forEach(function (key) {
     }
   });
 });
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});
 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); }

package/lib/commonjs/utils/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "cloneChildrenWithModes", {
+  enumerable: true,
+  get: function () {
+    return _reactUtils.cloneChildrenWithModes;
+  }
+});
+Object.defineProperty(exports, "flattenChildren", {
+  enumerable: true,
+  get: function () {
+    return _reactUtils.flattenChildren;
+  }
+});
+var _reactUtils = require("./react-utils");

package/lib/module/components/AmountInput/AmountInput.js

@@ -0,0 +1,77 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import MoneyValue from '../MoneyValue/MoneyValue';
+import NoteInput from '../NoteInput/NoteInput';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AmountInput component that combines MoneyValue and NoteInput from Figma design.
+ *
+ * @component
+ */
+export default function AmountInput({
+  moneyValueSlot,
+  noteInputSlot,
+  modes: propModes = {},
+  style
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+
+  // Resolve tokens
+  const gap = Number(getVariableByName('amountInput/gap', modes)) || 16;
+  const paddingHorizontal = Number(getVariableByName('amountInput/padding/horizontal', modes)) || 0;
+  const paddingVertical = Number(getVariableByName('amountInput/padding/vertical', modes)) || 0;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    ...style
+  };
+
+  // Handle MoneyValue Slot
+  const renderMoneyValueSlot = () => {
+    if (/*#__PURE__*/React.isValidElement(moneyValueSlot)) {
+      return /*#__PURE__*/React.cloneElement(moneyValueSlot, {
+        modes
+      });
+    }
+    // Default fallback if no slot prop is provided
+    if (!moneyValueSlot) {
+      return /*#__PURE__*/_jsx(MoneyValue, {
+        modes: modes
+      });
+    }
+    return moneyValueSlot;
+  };
+
+  // Handle NoteInput Slot
+  const renderNoteInputSlot = () => {
+    if (/*#__PURE__*/React.isValidElement(noteInputSlot)) {
+      return /*#__PURE__*/React.cloneElement(noteInputSlot, {
+        modes
+      });
+    }
+    // Default fallback if no slot prop is provided
+    if (!noteInputSlot) {
+      return /*#__PURE__*/_jsx(NoteInput, {
+        modes: modes
+      });
+    }
+    return noteInputSlot;
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: containerStyle,
+    children: [renderMoneyValueSlot(), renderNoteInputSlot()]
+  });
+}

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

@@ -0,0 +1,3 @@
+"use strict";
+
+export { default } from './AmountInput';

package/lib/module/components/Button/Button.js

@@ -59,8 +59,28 @@ function Button({
   const textColor = getVariableByName('button/foreground', modes) || '#0f0d0a';
   const iconColor = getVariableByName('button/icon/color', modes) ?? textColor;
   const iconSize = getVariableByName('button/icon/size', modes) ?? 18;
+  const [isHovered, setIsHovered] = useState(false);
+  const [isPressed, setIsPressed] = useState(false);
+  const hoverModes = {
+    ...modes,
+    "Button / State": "Hover"
+  };
+  const hoverBg = getVariableByName('button/background', hoverModes) || backgroundColor;
+  const hoverBorderColor = getVariableByName('button/border/color', hoverModes) || borderColor;
+  const hoverTextColor = getVariableByName('button/foreground', hoverModes) || textColor;
+  const hoverIconColor = getVariableByName('button/icon/color', hoverModes) ?? hoverTextColor;
+  const pressedModes = {
+    ...modes,
+    "Button / State": "Pressed"
+  };
+  const pressedBg = getVariableByName('button/background', pressedModes) || backgroundColor;
+  const pressedBorderColor = getVariableByName('button/border/color', pressedModes) || borderColor;
+  const pressedTextColor = getVariableByName('button/foreground', pressedModes) || textColor;
+  const pressedIconColor = getVariableByName('button/icon/color', pressedModes) ?? pressedTextColor;
+  const activeTextColor = isPressed && !disabled ? pressedTextColor : isHovered && !disabled ? hoverTextColor : textColor;
+  const activeIconColor = isPressed && !disabled ? pressedIconColor : isHovered && !disabled ? hoverIconColor : iconColor;
   const baseLabelTextStyle = {
-    color: textColor,
+    color: activeTextColor,
     fontFamily,
     fontWeight,
     fontSize,
@@ -114,22 +134,13 @@ function Button({
     accessibilityLabel: defaultAccessibilityLabel,
     webAccessibilityProps
   });
-
-  // Interaction states (placeholders for visuals; tweak later)
-  const [isFocused, setIsFocused] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const pressedStyle = {
-    transform: [{
-      scale: 0.995
-    }],
-    backgroundColor: '#b88940'
-  };
-  const focusStyle = {
-    borderWidth: 1,
-    borderColor: '#222'
-  };
   const hoverStyle = {
-    opacity: 0.95
+    backgroundColor: hoverBg,
+    borderColor: hoverBorderColor
+  };
+  const pressedStyle = {
+    backgroundColor: pressedBg,
+    borderColor: pressedBorderColor
   };
   if (__DEV__) {
     if (children && labelStyle) {
@@ -154,21 +165,13 @@ function Button({
       onPress
     } : {}),
     onPressIn: e => {
-      ;
+      setIsPressed(true);
       rest?.onPressIn?.(e);
     },
     onPressOut: e => {
-      ;
+      setIsPressed(false);
       rest?.onPressOut?.(e);
     },
-    onFocus: e => {
-      setIsFocused(true);
-      rest?.onFocus?.(e);
-    },
-    onBlur: e => {
-      setIsFocused(false);
-      rest?.onBlur?.(e);
-    },
     onHoverIn: e => {
       setIsHovered(true);
       rest?.onHoverIn?.(e);
@@ -179,7 +182,7 @@ function Button({
     },
     style: ({
       pressed
-    }) => [containerBaseStyle, pressed && !disabled ? pressedStyle : null, isHovered && !disabled ? hoverStyle : null, isFocused && !disabled ? focusStyle : null, style],
+    }) => [containerBaseStyle, isHovered && !disabled ? hoverStyle : null, (pressed || isPressed) && !disabled ? pressedStyle : null, style],
     ...webProps,
     children: [leading ? /*#__PURE__*/_jsx(View, {
       style: leadingAccessoryStyle,
@@ -189,7 +192,7 @@ function Button({
       children: /*#__PURE__*/_jsx(Icon, {
         name: icon,
         size: iconSize,
-        color: iconColor,
+        color: activeIconColor,
         accessibilityElementsHidden: true,
         importantForAccessibility: "no"
       })

package/lib/module/components/CardProviderInfo/CardProviderInfo.js

@@ -0,0 +1,71 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import ProductLabel from '../ProductLabel/ProductLabel';
+import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CardProviderInfo displays a product header (ProductLabel) followed by a
+ * 2-column grid of children (typically StatItem instances).
+ *
+ * @component
+ * @param {CardProviderInfoProps} props
+ */
+function CardProviderInfo({
+  label = 'Gold',
+  imageSource,
+  children,
+  modes = {},
+  style
+}) {
+  const background = getVariableByName('card/providerInfo/background', modes) ?? '#fef4e5';
+  const border = getVariableByName('card/providerInfo/border', modes) ?? '#fef4e5';
+  const borderWidthVal = getVariableByName('card/providerInfo/borderWidth', modes) ?? 1;
+  const padding = getVariableByName('card/providerInfo/padding', modes) ?? 20;
+  const gap = getVariableByName('card/providerInfo/gap', modes) ?? 20;
+  const radius = getVariableByName('card/providerInfo/radius', modes) ?? 16;
+  const gridGap = getVariableByName('card/providerInfo/grid/gap', modes) ?? 8;
+  const containerStyle = {
+    backgroundColor: background,
+    borderColor: border,
+    borderWidth: borderWidthVal,
+    borderStyle: 'solid',
+    padding: padding,
+    gap: gap,
+    borderRadius: radius
+  };
+  const gridGapNum = gridGap;
+  const clonedChildren = children ? cloneChildrenWithModes(children, modes) : [];
+  const childArray = React.Children.toArray(clonedChildren);
+  const rows = [];
+  for (let i = 0; i < childArray.length; i += 2) {
+    rows.push(childArray.slice(i, i + 2));
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/_jsx(ProductLabel, {
+      label: label,
+      imageSource: imageSource,
+      modes: modes
+    }), childArray.length > 0 && /*#__PURE__*/_jsx(View, {
+      style: {
+        rowGap: gridGapNum
+      },
+      children: rows.map((row, i) => /*#__PURE__*/_jsx(View, {
+        style: {
+          flexDirection: 'row',
+          columnGap: gridGapNum
+        },
+        children: row.map((child, j) => /*#__PURE__*/_jsx(View, {
+          style: {
+            flex: 1
+          },
+          children: child
+        }, j))
+      }, i))
+    })]
+  });
+}
+export default CardProviderInfo;

package/lib/module/components/ChipSelect/ChipSelect.js

@@ -13,7 +13,6 @@ function ChipSelect({
   label = 'Date',
   active = false,
   icon = 'ic_calendar_week',
-  close = true,
   modes = {},
   style,
   labelSlot,
@@ -87,7 +86,7 @@ function ChipSelect({
       name: icon,
       size: iconSize,
       color: textColor
-    }), renderLabel(), active && close && /*#__PURE__*/_jsx(Icon, {
+    }), renderLabel(), active && /*#__PURE__*/_jsx(Icon, {
       name: "ic_close",
       size: iconSize,
       color: textColor

package/lib/module/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/module/components/EmptyState/EmptyState.js

@@ -15,6 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function EmptyState({
   title = "No payments to show",
   description = "Start by paying bills, recharge or your friends",
+  showDescription = true,
   iconSlot,
   buttonSlot,
   modes: propModes = {},
@@ -110,7 +111,7 @@ function EmptyState({
       children: [iconContent, /*#__PURE__*/_jsx(Text, {
         style: titleStyle,
         children: title
-      }), description ? /*#__PURE__*/_jsx(Text, {
+      }), showDescription && description ? /*#__PURE__*/_jsx(Text, {
         style: bodyStyle,
         children: description
       }) : null]

package/lib/module/components/FormField/FormField.js

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

package/lib/module/components/NoteInput/NoteInput.js

@@ -47,9 +47,8 @@ export default 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/module/components/Nudge/Nudge.js

@@ -0,0 +1,138 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { cloneChildrenWithModes } from '../../utils/react-utils';
+import Button from '../Button/Button';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const background = getVariableByName('nudge/background', modes) || '#f5f5f5';
+  const radius = getVariableByName('nudge/radius', modes) || 12;
+  const paddingH = getVariableByName('nudge/padding/horizontal', modes) || 12;
+  const paddingV = getVariableByName('nudge/padding/vertical', modes) || 12;
+  const gap = getVariableByName('nudge/gap', modes) || 6;
+  const titleColor = getVariableByName('nudge/title/color', modes) || '#0d0d0f';
+  const titleFontSize = getVariableByName('nudge/title/fontSize', modes) || 14;
+  const titleFontFamily = getVariableByName('nudge/title/fontFamily', modes) || 'JioType Var';
+  const titleLineHeight = getVariableByName('nudge/title/lineHeight', modes) || 15;
+  const titleFontWeightRaw = getVariableByName('nudge/title/fontWeight', modes) || 700;
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
+  const bodyColor = getVariableByName('nudge/body/color', modes) || '#1a1c1f';
+  const bodyFontSize = getVariableByName('nudge/body/fontSize', modes) || 12;
+  const bodyFontFamily = getVariableByName('nudge/body/fontFamily', modes) || 'JioType Var';
+  const bodyLineHeight = getVariableByName('nudge/body/lineHeight', modes) || 16;
+  const bodyFontWeightRaw = getVariableByName('nudge/body/fontWeight', modes) || 500;
+  const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw;
+  const textGap = getVariableByName('nudge/text/gap', modes) || 4;
+  const contentGap = getVariableByName('nudge/content/gap', modes) || 8;
+  const contentMinHeight = 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 ? cloneChildrenWithModes(React.Children.toArray(startSlot), modes) : null;
+  const startSlotElement = processedStartSlot && processedStartSlot.length > 0 ? processedStartSlot.length === 1 ? processedStartSlot[0] : processedStartSlot : null;
+  if (variant === 'Variant2') {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [containerStyle, style],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 6,
+          width: '100%'
+        },
+        children: [startSlotElement, /*#__PURE__*/_jsx(Text, {
+          style: [titleStyle, {
+            flex: 1
+          }],
+          children: title
+        })]
+      }), children ? cloneChildrenWithModes(React.Children.toArray(children), modes) : null]
+    });
+  }
+  const defaultContent = /*#__PURE__*/_jsxs(View, {
+    style: {
+      gap: contentGap,
+      alignItems: 'flex-start',
+      width: '100%'
+    },
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        gap: textGap,
+        alignItems: 'flex-start',
+        width: '100%'
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: titleStyle,
+        children: title
+      }), /*#__PURE__*/_jsx(Text, {
+        style: bodyStyle,
+        children: body
+      })]
+    }), buttonSlot ? cloneChildrenWithModes(React.Children.toArray(buttonSlot), modes) : /*#__PURE__*/_jsx(Button, {
+      label: buttonLabel,
+      onPress: onPressButton,
+      modes: modes
+    })]
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    children: [startSlotElement, /*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1,
+        minWidth: 1,
+        minHeight: contentMinHeight,
+        justifyContent: 'center',
+        overflow: 'hidden'
+      },
+      children: children ? cloneChildrenWithModes(React.Children.toArray(children), modes) : defaultContent
+    })]
+  });
+}
+export default Nudge;