jfs-components 0.0.43 → 0.0.45

package/lib/module/components/Text/Text.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import React from 'react';
+import { Text as RNText } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { jsx as _jsx } from "react/jsx-runtime";
+function Text({
+  text = 'Korem ipsum ',
+  modes = {},
+  style,
+  numberOfLines
+}) {
+  const foreground = getVariableByName('text/foreground', modes) ?? '#000000';
+  const fontFamily = getVariableByName('text/fontFamily', modes) ?? 'JioType';
+  const fontSize = getVariableByName('text/fontSize', modes) ?? 14;
+  const fontWeight = getVariableByName('text/fontWeight', modes) ?? '500';
+  const lineHeight = getVariableByName('text/lineHeight', modes) ?? 20;
+  const letterSpacing = getVariableByName('text/letterSpacing', modes) ?? -0.5;
+  const textStyle = {
+    color: foreground,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    fontWeight: String(fontWeight),
+    lineHeight: lineHeight,
+    letterSpacing: letterSpacing
+  };
+  return /*#__PURE__*/_jsx(RNText, {
+    style: [textStyle, style],
+    numberOfLines: numberOfLines,
+    children: text
+  });
+}
+export default Text;

package/lib/module/components/Toggle/Toggle.js

@@ -0,0 +1,97 @@
+"use strict";
+
+import React, { useCallback, useState } from 'react';
+import { Pressable, View, Platform } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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] = 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 = getVariableByName('toggle/width', resolvedModes) ?? 52;
+  const radius = getVariableByName('toggle/radius', resolvedModes) ?? 100;
+  const paddingTrack = getVariableByName('toggle/padding/track', resolvedModes) ?? 3;
+  const background = getVariableByName('toggle/background', resolvedModes) ?? (isOn ? '#5d00b5' : '#c7c7cc');
+  const thumbSize = getVariableByName('toggle/thumb/size', resolvedModes) ?? 25;
+  const thumbRadius = getVariableByName('toggle/thumb/radius', resolvedModes) ?? 100;
+  const thumbBackground = getVariableByName('toggle/thumb/background', resolvedModes) ?? '#ffffff';
+  const thumbShadowColor = getVariableByName('toggle/thumb/shadow/color', resolvedModes) ?? 'rgba(0,0,0,0.18)';
+  const thumbShadowRadius = getVariableByName('toggle/thumb/shadow/radius', resolvedModes) ?? 4;
+  const thumbShadowOffsetX = getVariableByName('toggle/thumb/shadow/offsetX', resolvedModes) ?? 0;
+  const thumbShadowOffsetY = getVariableByName('toggle/thumb/shadow/offsetY', resolvedModes) ?? 2;
+  const trackHeight = thumbSize + paddingTrack * 2;
+  const handlePress = 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 = 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__*/_jsx(Pressable, {
+    style: [trackStyle, style],
+    onPress: handlePress,
+    disabled: disabled,
+    accessibilityRole: "switch",
+    accessibilityState: {
+      checked: isOn,
+      disabled
+    },
+    accessibilityLabel: accessibilityLabel,
+    children: /*#__PURE__*/_jsx(View, {
+      style: thumbStyle
+    })
+  });
+}
+export default Toggle;

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';
@@ -47,11 +51,22 @@ export { default as Accordion } from './Accordion/Accordion';
 export { default as ActionTile } from './ActionTile/ActionTile';
 export { default as Balance } from './Balance/Balance';
 export { default as ButtonGroup } from './ButtonGroup/ButtonGroup';
+export { default as CardProviderInfo } from './CardProviderInfo/CardProviderInfo';
 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 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';
+export { useToast, addToast, closeToast, closeAll } from './Toast/useToast';
+export { default as AmountInput } from './AmountInput/AmountInput';
+export { default as PortfolioHero } from './PortfolioHero/PortfolioHero';
+export { default as ProductLabel } from './ProductLabel/ProductLabel';
+export { default as SwappableAmount } from './SwappableAmount/SwappableAmount';
+export { default as OTP } from './OTP/OTP';
+export { default as StatItem } from './StatItem/StatItem';
+export { default as Text } from './Text/Text';
+export { default as Toggle } from './Toggle/Toggle';