jfs-components 0.0.73 → 0.0.77

package/lib/module/components/Badge/Badge.js

@@ -4,6 +4,8 @@ import React from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import Skeleton from '../../skeleton/Skeleton';
+import { useSkeleton } from '../../skeleton/SkeletonGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
 function Badge({
   label = 'Label',
@@ -12,6 +14,7 @@ function Badge({
   accessibilityLabel,
   style,
   labelStyle,
+  loading,
   ...rest
 }) {
   // Resolve token values (fall back to sensible defaults)
@@ -24,6 +27,26 @@ function Badge({
   const paddingVertical = Number(getVariableByName('badge/padding/vertical', modes)) || 4;
   const borderRadius = Number(getVariableByName('badge/radius', modes)) || 4;
   const lineHeight = Number(getVariableByName('badge/label/lineHeight', modes)) || Math.round(fontSize * 1.2);
+
+  // Skeleton short-circuit. Size derived from the same tokens the loaded
+  // badge would use so the placeholder occupies the same box.
+  const {
+    active: groupActive
+  } = useSkeleton();
+  const isLoading = loading ?? groupActive;
+  if (isLoading) {
+    const charWidth = fontSize * 0.55;
+    const labelWidth = Math.max(label.length, 3) * charWidth;
+    return /*#__PURE__*/_jsx(Skeleton, {
+      kind: "badge",
+      width: paddingHorizontal * 2 + labelWidth,
+      height: paddingVertical * 2 + lineHeight,
+      style: {
+        alignSelf: 'flex-start'
+      },
+      modes: modes
+    });
+  }
   const Container = onPress ? Pressable : View;
   const containerStyle = {
     backgroundColor,

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

@@ -6,6 +6,8 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
+import Skeleton from '../../skeleton/Skeleton';
+import { useSkeleton } from '../../skeleton/SkeletonGroup';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // ---------------------------------------------------------------------------
 // Module-scope constants — never re-allocated per render.
@@ -167,6 +169,7 @@ function ButtonImpl({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  loading,
   ...rest
 }) {
   // Hover state is web-only in practice; the setter is gated so native taps
@@ -182,6 +185,14 @@ function ButtonImpl({
   userHandlersRef.current.onHoverOut = rest?.onHoverOut;
   const tokens = useMemo(() => resolveButtonTokens(modes, disabled), [modes, disabled]);
 
+  // Skeleton context — read unconditionally so React's hook order stays
+  // stable. The actual short-circuit return happens AFTER all remaining
+  // hooks have been called below.
+  const {
+    active: groupActive
+  } = useSkeleton();
+  const isLoading = loading ?? groupActive;
+
   // Active label color: base by default; hover override (web-only) when hovered.
   // Press color is intentionally NOT applied to the label on native — applying
   // it would require a React render per touch and re-introduce the flicker.
@@ -259,6 +270,32 @@ function ButtonImpl({
       console.warn('[Button] Custom content is used without an explicit `accessibilityLabel` or string `label`. ' + 'Screen readers may not announce this button correctly.');
     }
   }
+  if (isLoading) {
+    const {
+      container,
+      baseLabel,
+      iconSize,
+      accessoryOffset
+    } = tokens;
+    const paddingHorizontal = container.paddingHorizontal ?? 20;
+    const paddingVertical = container.paddingVertical ?? 12;
+    const lineHeight = baseLabel.lineHeight ?? 19;
+    const fontSize = baseLabel.fontSize ?? 16;
+    const labelText = typeof label === 'string' ? label : 'Button';
+    const charWidth = fontSize * 0.55;
+    const labelWidth = Math.max(labelText.length, 4) * charWidth;
+    const hasAccessory = !!(leading || trailing || icon);
+    const accessoryWidth = hasAccessory ? iconSize + accessoryOffset * 2 : 0;
+    const skeletonWidth = paddingHorizontal * 2 + labelWidth + accessoryWidth;
+    const skeletonHeight = paddingVertical * 2 + lineHeight;
+    return /*#__PURE__*/_jsx(Skeleton, {
+      kind: "other",
+      width: skeletonWidth,
+      height: skeletonHeight,
+      style: style,
+      modes: modes
+    });
+  }
   return /*#__PURE__*/_jsxs(Pressable, {
     accessibilityRole: "button",
     accessibilityLabel: undefined,

package/lib/module/components/CardBankAccount/CardBankAccount.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
@@ -18,6 +18,14 @@ const DEFAULT_ITEMS = [{
   label: 'Last updated',
   value: 'Korem ipsum'
 }];
+
+// Component-level defaults that match the Figma reference. Caller-provided
+// `modes` are merged on top so every key here can be overridden per-instance.
+const DEFAULT_MODES = Object.freeze({
+  'Button / Size': 'S',
+  AppearanceBrand: 'Secondary',
+  Emphasis: 'Medium'
+});
 const toNumber = (value, fallback) => {
   if (typeof value === 'number') return Number.isFinite(value) ? value : fallback;
   if (typeof value === 'string') {
@@ -56,10 +64,17 @@ function CardBankAccount({
   buttonLabel = 'Button',
   onButtonPress,
   footer,
-  modes = EMPTY_MODES,
+  modes: propModes = EMPTY_MODES,
   style,
   accessibilityLabel
 }) {
+  // Merge caller modes on top of `DEFAULT_MODES` so every default key
+  // (e.g. `Button / Size`, `AppearanceBrand`, `Emphasis`) can be overridden
+  // per-instance while still applying out of the box.
+  const modes = useMemo(() => propModes === EMPTY_MODES ? DEFAULT_MODES : {
+    ...DEFAULT_MODES,
+    ...propModes
+  }, [propModes]);
   const background = getVariableByName('bankAccountCard/background', modes) ?? '#ffffff';
   const radius = toNumber(getVariableByName('bankAccountCard/radius', modes), 16);
   const paddingHorizontal = toNumber(getVariableByName('bankAccountCard/padding/horizontal', modes), 12);

package/lib/module/components/CheckboxItem/CheckboxItem.js

@@ -5,12 +5,15 @@ import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import Checkbox from '../Checkbox/Checkbox';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * CheckboxItem composes a `Checkbox`, a label and an optional `endSlot` into a
  * single horizontal pressable row. Pressing anywhere on the row (outside of the
  * `endSlot`) toggles the checkbox, mirroring the typical native form pattern.
  *
+ * Use the `control` prop to swap the checkbox between the leading (left, default)
+ * and trailing (right) edge of the row. The `endSlot` flips to the opposite edge.
+ *
  * Mirrors the Figma "Checkbox Item" component and uses the `checkboxItem/*`
  * design tokens for typography and spacing.
  *
@@ -25,6 +28,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   label="Fixed deposit • 0245"
  *   checked={checked}
  *   onValueChange={setChecked}
+ *   control="leading"
  *   modes={{ 'Color Mode': 'Light' }}
  * />
  * ```
@@ -35,6 +39,7 @@ function CheckboxItem({
   onValueChange,
   disabled = false,
   label = 'Fixed deposit • 0245',
+  control = 'leading',
   endSlot,
   endSlotWidth = 80,
   modes = EMPTY_MODES,
@@ -42,6 +47,7 @@ function CheckboxItem({
   labelStyle,
   accessibilityLabel
 }) {
+  const isTrailing = control === 'trailing';
   const isControlled = controlledChecked !== undefined;
   const [internalChecked, setInternalChecked] = useState(defaultChecked);
   const isChecked = isControlled ? controlledChecked : internalChecked;
@@ -80,7 +86,35 @@ function CheckboxItem({
     fontWeight: labelFontWeight
   };
   const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
-  return /*#__PURE__*/_jsxs(Pressable, {
+  const checkboxNode = /*#__PURE__*/_jsx(Checkbox, {
+    checked: isChecked,
+    disabled: disabled,
+    onValueChange: handleToggle,
+    modes: modes,
+    ...(a11yLabel !== undefined ? {
+      accessibilityLabel: a11yLabel
+    } : {})
+  });
+  const labelNode = label != null && label !== false ? typeof label === 'string' || typeof label === 'number' ? /*#__PURE__*/_jsx(Text, {
+    style: [resolvedLabelStyle, labelStyle],
+    selectable: false,
+    children: label
+  }) : /*#__PURE__*/_jsx(View, {
+    style: {
+      flex: 1,
+      minWidth: 0
+    },
+    children: label
+  }) : null;
+  const endSlotNode = endSlot ? /*#__PURE__*/_jsx(View, {
+    style: {
+      width: endSlotWidth,
+      flexShrink: 0,
+      alignItems: 'stretch'
+    },
+    children: cloneChildrenWithModes(endSlot, modes)
+  }) : null;
+  return /*#__PURE__*/_jsx(Pressable, {
     style: [containerStyle, style],
     onPress: handleToggle,
     disabled: disabled,
@@ -90,30 +124,11 @@ function CheckboxItem({
       disabled
     },
     accessibilityLabel: a11yLabel,
-    children: [/*#__PURE__*/_jsx(Checkbox, {
-      checked: isChecked,
-      disabled: disabled,
-      onValueChange: handleToggle,
-      modes: modes,
-      accessibilityLabel: a11yLabel
-    }), label != null && label !== false ? typeof label === 'string' || typeof label === 'number' ? /*#__PURE__*/_jsx(Text, {
-      style: [resolvedLabelStyle, labelStyle],
-      selectable: false,
-      children: label
-    }) : /*#__PURE__*/_jsx(View, {
-      style: {
-        flex: 1,
-        minWidth: 0
-      },
-      children: label
-    }) : null, endSlot ? /*#__PURE__*/_jsx(View, {
-      style: {
-        width: endSlotWidth,
-        flexShrink: 0,
-        alignItems: 'stretch'
-      },
-      children: cloneChildrenWithModes(endSlot, modes)
-    }) : null]
+    children: isTrailing ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [endSlotNode, labelNode, checkboxNode]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [checkboxNode, labelNode, endSlotNode]
+    })
   });
 }
 export default CheckboxItem;

package/lib/module/components/Dropdown/Dropdown.js

@@ -0,0 +1,206 @@
+"use strict";
+
+import React, { useCallback, useMemo, useState } from 'react';
+import { Platform, Pressable, ScrollView, Text, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Icon from '../../icons/Icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IS_WEB = Platform.OS === 'web';
+
+// ---------------------------------------------------------------------------
+// DropdownItem
+// ---------------------------------------------------------------------------
+
+function useDropdownItemTokens(modes) {
+  return useMemo(() => {
+    // The `dropdownItem/background` token aliases through the
+    // `Dropdown Item State` collection (Idle | Selected), so we resolve
+    // both possibilities up-front and pick at render time.
+    const idleBackground = getVariableByName('dropdownItem/background', {
+      ...modes,
+      'Dropdown Item State': 'Idle'
+    }) || '#ffffff';
+    const selectedBackground = getVariableByName('dropdownItem/background', {
+      ...modes,
+      'Dropdown Item State': 'Selected'
+    }) || '#f5f5f5';
+    const foreground = getVariableByName('dropdownItem/foreground', modes) || '#000000';
+    const fontFamily = getVariableByName('dropdownItem/fontFamily', modes) || 'JioType Var';
+    const fontSize = parseInt(getVariableByName('dropdownItem/fontSize', modes), 10) || 16;
+    const fontWeight = getVariableByName('dropdownItem/fontWeight', modes) || '400';
+    const lineHeight = parseInt(getVariableByName('dropdownItem/lineHeight', modes), 10) || 19;
+    const gap = parseInt(getVariableByName('dropdownItem/gap', modes), 10) || 8;
+    const paddingHorizontal = parseInt(getVariableByName('dropdownItem/padding/horizontal', modes), 10) || 12;
+    const paddingVertical = parseInt(getVariableByName('dropdownItem/padding/vertical', modes), 10) || 12;
+    return {
+      idleBackground,
+      selectedBackground,
+      foreground,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      gap,
+      paddingHorizontal,
+      paddingVertical
+    };
+  }, [modes]);
+}
+export function DropdownItem({
+  label,
+  value = null,
+  selected = false,
+  disabled = false,
+  leading,
+  trailing,
+  onPress,
+  children,
+  modes: propModes = EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel,
+  accessibilityHint
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const tokens = useDropdownItemTokens(modes);
+  const [isHovered, setIsHovered] = useState(false);
+  const handlePress = useCallback(() => {
+    if (disabled) return;
+    onPress?.(value);
+  }, [disabled, onPress, value]);
+  const containerStyle = useCallback(({
+    pressed
+  }) => {
+    const showSelected = pressed || isHovered && IS_WEB || selected;
+    const base = {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: tokens.gap,
+      paddingHorizontal: tokens.paddingHorizontal,
+      paddingVertical: tokens.paddingVertical,
+      backgroundColor: showSelected ? tokens.selectedBackground : tokens.idleBackground,
+      opacity: disabled ? 0.4 : 1,
+      width: '100%'
+    };
+    return [base, style];
+  }, [tokens.gap, tokens.paddingHorizontal, tokens.paddingVertical, tokens.idleBackground, tokens.selectedBackground, isHovered, selected, disabled, style]);
+  const textStyle = {
+    color: tokens.foreground,
+    fontFamily: tokens.fontFamily,
+    fontSize: tokens.fontSize,
+    fontWeight: tokens.fontWeight,
+    lineHeight: tokens.lineHeight,
+    flexShrink: 1
+  };
+  const processedLeading = leading ? cloneChildrenWithModes(React.Children.toArray(leading), modes) : null;
+  const customTrailing = trailing ? cloneChildrenWithModes(React.Children.toArray(trailing), modes) : null;
+  const showDefaultCheck = !trailing && selected;
+  const fallbackA11yLabel = accessibilityLabel || (typeof label === 'string' ? label : 'Dropdown item');
+  const a11yProps = {
+    accessibilityRole: 'menuitem',
+    accessibilityLabel: fallbackA11yLabel,
+    accessibilityState: {
+      selected,
+      disabled
+    }
+  };
+  if (accessibilityHint) {
+    a11yProps.accessibilityHint = accessibilityHint;
+  }
+  const handleHoverIn = useCallback(() => {
+    if (IS_WEB && !disabled) setIsHovered(true);
+  }, [disabled]);
+  const handleHoverOut = useCallback(() => {
+    if (IS_WEB) setIsHovered(false);
+  }, []);
+  return /*#__PURE__*/_jsxs(Pressable, {
+    onPress: handlePress,
+    disabled: disabled,
+    onHoverIn: handleHoverIn,
+    onHoverOut: handleHoverOut,
+    style: containerStyle,
+    ...a11yProps,
+    children: [processedLeading, children != null ? children : /*#__PURE__*/_jsx(Text, {
+      style: [textStyle, labelStyle],
+      numberOfLines: 1,
+      children: label
+    }), customTrailing, showDefaultCheck && /*#__PURE__*/_jsx(Icon, {
+      name: "ic_confirm",
+      size: 16,
+      color: tokens.foreground
+    })]
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Dropdown (popup surface)
+// ---------------------------------------------------------------------------
+
+/**
+ * `Dropdown` is the visual surface (popup) that contains a list of
+ * `DropdownItem`s. It is responsible for the background, rounded corners,
+ * elevation/shadow, and clipping. Use it standalone for menu UIs, or rely on
+ * `DropdownInput` which composes it into a form-field experience.
+ */
+export function Dropdown({
+  children,
+  maxHeight,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const radius = parseInt(getVariableByName('dropdown/radius', modes), 10) || 8;
+  const background = getVariableByName('dropdown/background', modes) || '#ffffff';
+  const shadowColor = getVariableByName('dropdown/shadow/color', modes) || 'rgba(0, 0, 0, 0.08)';
+  const shadowOffsetX = parseInt(getVariableByName('dropdown/shadow/offsetX', modes), 10) || 0;
+  const shadowOffsetY = parseInt(getVariableByName('dropdown/shadow/offsetY', modes), 10) || 4;
+  const shadowBlur = parseInt(getVariableByName('dropdown/shadow/blur', modes), 10) || 16;
+  const containerStyle = {
+    backgroundColor: background,
+    borderRadius: radius,
+    overflow: 'hidden',
+    shadowColor,
+    shadowOffset: {
+      width: shadowOffsetX,
+      height: shadowOffsetY
+    },
+    shadowOpacity: 1,
+    shadowRadius: shadowBlur / 2,
+    elevation: 4
+  };
+  const content = /*#__PURE__*/_jsx(View, {
+    style: {
+      flexDirection: 'column'
+    },
+    children: cloneChildrenWithModes(children, modes)
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "menu",
+    accessibilityLabel: accessibilityLabel || 'Dropdown menu',
+    children: maxHeight != null ? /*#__PURE__*/_jsx(ScrollView, {
+      style: {
+        maxHeight
+      },
+      showsVerticalScrollIndicator: true,
+      keyboardShouldPersistTaps: "handled",
+      children: content
+    }) : content
+  });
+}
+export default Dropdown;