jfs-components 0.0.42 → 0.0.44

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/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;

package/lib/module/components/Toast/Toast.js

@@ -0,0 +1,88 @@
+"use strict";
+
+import React, { useEffect, useRef } from 'react';
+import { StyleSheet, Text } from 'react-native';
+import Animated, { FadeOut, SlideInDown, SlideInUp } from 'react-native-reanimated';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { closeToast } from './useToast';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ANIMATION_DURATION = 250;
+function Toast({
+  id,
+  title,
+  timeout = 4000,
+  onClose,
+  modes = {},
+  placement = 'bottom',
+  style
+}) {
+  const timerRef = useRef(null);
+  useEffect(() => {
+    if (timeout <= 0) return;
+    timerRef.current = setTimeout(() => closeToast(id), timeout);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [id, timeout]);
+  const backgroundColor = getVariableByName('toast/background', modes) || '#303338';
+  const foreground = getVariableByName('toast/foreground', modes) || '#ffffff';
+  const fontSize = getVariableByName('toast/fontSize', modes) || 14;
+  const fontFamily = getVariableByName('toast/fontFamily', modes) || undefined;
+  const fontWeight = getVariableByName('toast/fontWeight', modes) || '500';
+  const lineHeight = getVariableByName('toast/lineHeight', modes) || 18;
+  const radius = getVariableByName('toast/radius', modes) || 14;
+  const paddingHorizontal = getVariableByName('toast/padding/horizontal', modes) || 16;
+  const paddingVertical = getVariableByName('toast/padding/vertical', modes) || 14;
+  const gap = getVariableByName('toast/gap', modes) || 8;
+  const borderWidth = getVariableByName('toast/border/size', modes) || 1;
+  const borderColor = getVariableByName('toast/border/color', modes) || 'rgba(255,255,255,0.1)';
+  const shadowBlurPrimary = getVariableByName('toast/shadow/primary/blur', modes) || 48;
+  const shadowOffsetYPrimary = getVariableByName('toast/shadow/primary/offsetY', modes) || 16;
+  const shadowColorPrimary = getVariableByName('toast/shadow/primary/color', modes) || 'rgba(13,13,15,0.16)';
+  const enterAnimation = placement === 'top' ? SlideInUp.duration(ANIMATION_DURATION) : SlideInDown.duration(ANIMATION_DURATION);
+  const containerStyle = {
+    backgroundColor,
+    borderRadius: radius,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    borderWidth,
+    borderColor,
+    shadowColor: shadowColorPrimary,
+    shadowOffset: {
+      width: 0,
+      height: shadowOffsetYPrimary
+    },
+    shadowOpacity: 1,
+    shadowRadius: shadowBlurPrimary / 2,
+    elevation: 8
+  };
+  const textStyle = {
+    color: foreground,
+    fontSize,
+    fontFamily,
+    fontWeight: String(fontWeight),
+    lineHeight
+  };
+  return /*#__PURE__*/_jsx(Animated.View, {
+    entering: enterAnimation,
+    exiting: FadeOut.duration(ANIMATION_DURATION),
+    style: [styles.toast, containerStyle, style],
+    accessibilityRole: "alert",
+    accessibilityLiveRegion: "assertive",
+    children: /*#__PURE__*/_jsx(Text, {
+      style: textStyle,
+      numberOfLines: 2,
+      children: title
+    })
+  });
+}
+const styles = StyleSheet.create({
+  toast: {
+    alignSelf: 'center',
+    maxWidth: '90%',
+    minWidth: 200,
+    overflow: 'hidden'
+  }
+});
+export default Toast;

package/lib/module/components/Toast/ToastProvider.js

@@ -0,0 +1,55 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useToast } from './useToast';
+import Toast from './Toast';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function ToastProvider({
+  children,
+  maxVisibleToasts = 3,
+  placement = 'bottom',
+  modes
+}) {
+  const {
+    toasts
+  } = useToast();
+  const insets = useSafeAreaInsets();
+  const visibleToasts = useMemo(() => toasts.slice(-maxVisibleToasts), [toasts, maxVisibleToasts]);
+  const regionStyle = useMemo(() => [styles.region, placement === 'top' ? {
+    top: insets.top + 8
+  } : {
+    bottom: insets.bottom + 8
+  }], [placement, insets.top, insets.bottom]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [children, visibleToasts.length > 0 && /*#__PURE__*/_jsx(View, {
+      style: regionStyle,
+      pointerEvents: "box-none",
+      children: visibleToasts.map(entry => /*#__PURE__*/_jsx(Toast, {
+        id: entry.id,
+        title: entry.title,
+        timeout: entry.timeout,
+        onClose: entry.onClose,
+        modes: entry.modes ?? modes,
+        placement: placement
+      }, entry.id))
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  region: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    gap: 8,
+    zIndex: 9999,
+    pointerEvents: 'box-none'
+  }
+});
+export default ToastProvider;

package/lib/module/components/Toast/useToast.js

@@ -0,0 +1,54 @@
+"use strict";
+
+import { useCallback, useSyncExternalStore } from 'react';
+let idCounter = 0;
+let toasts = [];
+const listeners = new Set();
+function emit() {
+  for (const listener of listeners) {
+    listener();
+  }
+}
+function getSnapshot() {
+  return toasts;
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+export function addToast(options) {
+  const id = `toast-${++idCounter}`;
+  const entry = {
+    id,
+    title: options.title,
+    timeout: options.timeout ?? 4000,
+    onClose: options.onClose,
+    modes: options.modes
+  };
+  toasts = [...toasts, entry];
+  emit();
+  return id;
+}
+export function closeToast(id) {
+  const entry = toasts.find(t => t.id === id);
+  toasts = toasts.filter(t => t.id !== id);
+  emit();
+  entry?.onClose?.();
+}
+export function closeAll() {
+  const prev = toasts;
+  toasts = [];
+  emit();
+  prev.forEach(t => t.onClose?.());
+}
+export function useToast() {
+  const queue = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return {
+    toasts: queue,
+    addToast: useCallback(addToast, []),
+    closeToast: useCallback(closeToast, []),
+    closeAll: useCallback(closeAll, [])
+  };
+}

package/lib/module/components/index.js

@@ -9,6 +9,7 @@ export { default as BottomNav } from './BottomNav/BottomNav';
 export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
 export { default as Button } from './Button/Button';
 export { default as Card } from './Card/Card';
+export { default as Checkbox } from './Checkbox/Checkbox';
 export { default as CardFeedback } from './CardFeedback/CardFeedback';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider } from './Divider/Divider';
@@ -27,7 +28,9 @@ export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard } from './MediaCard/MediaCard';
 export { default as MerchantProfile } from './MerchantProfile/MerchantProfile';
 export { default as MoneyValue } from './MoneyValue/MoneyValue';
+export { default as NoteInput } from './NoteInput/NoteInput';
 export { default as NavArrow } from './NavArrow/NavArrow';
+export { default as Numpad } from './Numpad/Numpad';
 export { default as PageTitle } from './PageTitle/PageTitle';
 export { default as Screen } from './Screen/Screen';
 export { default as Section } from './Section/Section';
@@ -35,6 +38,7 @@ export { default as Stepper } from './Stepper/Stepper';
 export { Step } from './Stepper/Step';
 export { StepLabel } from './Stepper/StepLabel';
 export { default as TextInput } from './TextInput/TextInput';
+export { default as StatusHero } from './StatusHero/StatusHero';
 export { default as ThreadHero } from './ThreadHero/ThreadHero';
 export { Tooltip } from './Tooltip/Tooltip';
 export { default as TransactionDetails } from './TransactionDetails/TransactionDetails';
@@ -51,4 +55,9 @@ export { default as ChipSelect } from './ChipSelect/ChipSelect';
 export { default as InputSearch } from './InputSearch/InputSearch';
 export { default as SupportText } from './SupportText/SupportText';
 export { default as SupportTextIcon } from './SupportText/SupportTextIcon';
-export { default as RadioButton } from './RadioButton/RadioButton';
+export { default as RadioButton } from './RadioButton/RadioButton';
+export { default as Tabs } from './Tabs/Tabs';
+export { default as TabItem } from './Tabs/TabItem';
+export { default as Toast } from './Toast/Toast';
+export { default as ToastProvider } from './Toast/ToastProvider';
+export { useToast, addToast, closeToast, closeAll } from './Toast/useToast';