jfs-components 0.0.74 → 0.0.77

package/lib/commonjs/skeleton/useReducedMotion.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReducedMotion = useReducedMotion;
+var _react = require("react");
+var _reactNative = require("react-native");
+/**
+ * Cross-platform "prefers reduced motion" hook.
+ *
+ *  - Native: reads `AccessibilityInfo.isReduceMotionEnabled()` and subscribes
+ *    to `reduceMotionChanged` events so the value stays live as the user
+ *    toggles the OS setting.
+ *  - Web: uses `window.matchMedia('(prefers-reduced-motion: reduce)')`,
+ *    subscribing to its `change` event.
+ *  - Anywhere either API is missing: returns `false` (no reduction).
+ *
+ * The hook never throws — every native API access is defensively guarded so
+ * the skeleton system stays safe in tests, SSR, and constrained sandboxes.
+ */
+function useReducedMotion() {
+  const [reduced, setReduced] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    let cancelled = false;
+    if (_reactNative.Platform.OS === 'web') {
+      if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+        return;
+      }
+      const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
+      const update = matches => {
+        if (!cancelled) setReduced(matches);
+      };
+      update(mql.matches);
+      const listener = e => update(e.matches);
+      if (typeof mql.addEventListener === 'function') {
+        mql.addEventListener('change', listener);
+        return () => {
+          cancelled = true;
+          mql.removeEventListener('change', listener);
+        };
+      }
+      const legacyMql = mql;
+      legacyMql.addListener?.(listener);
+      return () => {
+        cancelled = true;
+        legacyMql.removeListener?.(listener);
+      };
+    }
+    if (typeof _reactNative.AccessibilityInfo?.isReduceMotionEnabled === 'function') {
+      _reactNative.AccessibilityInfo.isReduceMotionEnabled().then(value => {
+        if (!cancelled) setReduced(!!value);
+      }).catch(() => {});
+    }
+    const sub = typeof _reactNative.AccessibilityInfo?.addEventListener === 'function' ? _reactNative.AccessibilityInfo.addEventListener('reduceMotionChanged', value => {
+      if (!cancelled) setReduced(!!value);
+    }) : null;
+    return () => {
+      cancelled = true;
+      sub?.remove?.();
+    };
+  }, []);
+  return reduced;
+}

package/lib/module/components/ActionFooter/ActionFooter.js

@@ -1,35 +1,101 @@
 "use strict";
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
 import IconButton from '../IconButton/IconButton';
 import { jsx as _jsx } from "react/jsx-runtime";
+const IS_WEB = Platform.OS === 'web';
+
+// ---------------------------------------------------------------------------
+// Yoga-safe stretch
+// ---------------------------------------------------------------------------
+//
+// React Native (Yoga) interprets the `flex: 1` shorthand as
+//   { flexGrow: 1, flexShrink: 1, flexBasis: 0 }
+// which is the *equal-share* variant. That is the correct math for what we
+// want here (equal-width action buttons), BUT Yoga has a well-known foot-gun
+// when this child sits inside a parent whose main-axis size hasn't been
+// resolved yet on the first layout pass: the child collapses to 0 and the
+// inner text gets clipped to "" before the parent ever measures.
+//
+// The defensive incantation used elsewhere in this codebase (see
+// `CardCTA.leftWrap` and the `MediaCard.Header` fix in CHANGELOG.md) is to
+// keep the equal-share math but explicitly clamp `minWidth` to 0 so Yoga
+// always allows the child to participate in the shrink algorithm, even when
+// the parent itself is in an undetermined state. Combined with explicit
+// `flexGrow`/`flexShrink`/`flexBasis` (NOT the `flex` shorthand) this
+// renders correctly on iOS, Android, and Web — and crucially never produces
+// the "buttons render as empty pills" failure mode the previous version had
+// on iOS dev clients.
+const STRETCH_STYLE = {
+  flexGrow: 1,
+  flexShrink: 1,
+  flexBasis: 0,
+  minWidth: 0
+};
+
+// Platform-specific drop shadow. Web boxShadow can't go through
+// Platform.select (RN's typed surface doesn't include it) so we keep it as a
+// separate constant and append it below.
+const NATIVE_SHADOW = Platform.select({
+  ios: {
+    shadowColor: '#0c0d10',
+    shadowOffset: {
+      width: 0,
+      height: -12
+    },
+    shadowOpacity: 0.16,
+    shadowRadius: 24
+  },
+  android: {
+    elevation: 16
+  },
+  default: {}
+});
+const WEB_SHADOW = IS_WEB ? {
+  boxShadow: '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)'
+} : null;
+
+// The runtime token a slot child must equal (by reference) to be treated as
+// an IconButton. `IconButton` is exported wrapped in `React.memo`, so the
+// element.type identity comparison works for both `<IconButton />` from the
+// same module and any `React.memo`-wrapped re-export. The fallback check
+// (`type.type === IconButton`) catches one extra layer of `forwardRef` /
+// `memo` wrapping which can happen when consumers re-export the component.
+function isIconButtonElement(element) {
+  const t = element.type;
+  if (t === IconButton) return true;
+  if (t && typeof t === 'object' && t.type === IconButton) return true;
+  return false;
+}
+
 /**
- * ActionFooter component that provides a fixed footer container for action buttons.
- * 
- * This component is designed to hold action items like IconButton and Button components
- * at the bottom of a screen. It includes a shadow for visual separation from content above.
- * 
- * The `modes` prop is automatically passed to all slot children. If a child has its own
- * `modes` prop, it will be merged with the parent's modes (child modes take precedence).
- * 
- * @component
- * @param {Object} props - Component props
- * @param {React.ReactNode} [props.children] - Action elements to display (e.g., IconButton, Button)
- * @param {Object} [props.modes={}] - Mode configuration for design tokens (automatically passed to children)
- * @param {Object} [props.style] - Optional style overrides
- * @param {string} [props.accessibilityLabel] - Accessibility label for the footer region
- * 
+ * ActionFooter — a sticky bottom container for primary screen actions.
+ *
+ * Layout contract:
+ *   - The outer container stretches horizontally (`alignSelf: 'stretch'`) so
+ *     it fills the parent regardless of whether the parent is a flex column,
+ *     a ScrollView contentContainer, or a plain View.
+ *   - The inner slot is a single row sized by its tallest child. It does NOT
+ *     use `flex: 1` — that previously caused the row to collapse to zero on
+ *     the first Yoga pass on native, taking the button labels with it.
+ *   - `IconButton` children keep their intrinsic square size.
+ *   - Every other child is auto-stretched with the Yoga-safe stretch style
+ *     above so two `<Button>` siblings render at equal width on iOS, Android,
+ *     and Web.
+ *
+ * The `modes` prop is automatically pushed down to every slot child via
+ * {@link cloneChildrenWithModes}; explicit child-level modes win over the
+ * parent's modes.
+ *
  * @example
  * ```tsx
- * // Basic usage - modes are automatically passed to all children.
- * // Non-IconButton children (e.g., Button) are auto-stretched to fill.
  * <ActionFooter modes={modes}>
  *   <IconButton iconName="ic_split" />
- *   <Button label="Request" />
- *   <Button label="Pay" />
+ *   <Button label="Request" modes={{ AppearanceBrand: 'Secondary' }} />
+ *   <Button label="Pay" modes={{ AppearanceBrand: 'Primary' }} />
  * </ActionFooter>
  * ```
  */
@@ -37,76 +103,74 @@ function ActionFooter({
   children,
   modes = EMPTY_MODES,
   style,
-  accessibilityLabel = undefined
+  accessibilityLabel
 }) {
-  // Resolve design tokens
-  const backgroundColor = getVariableByName('actionFooter/background', modes) ?? '#ffffff';
-  const gap = getVariableByName('actionFooter/gap', modes) ?? 8;
-  const paddingHorizontal = getVariableByName('actionFooter/padding/horizontal', modes) ?? 16;
-  const paddingTop = getVariableByName('actionFooter/padding/top', modes) ?? 10;
-  const paddingBottom = getVariableByName('actionFooter/padding/bottom', modes) ?? 41;
-
-  // Shadow styles - cross-platform
-  const shadowStyle = Platform.select({
-    ios: {
-      shadowColor: 'rgba(12, 13, 16, 1)',
-      shadowOffset: {
-        width: 0,
-        height: -12
-      },
-      shadowOpacity: 0.16,
-      shadowRadius: 24
-    },
-    android: {
-      elevation: 16
-    },
-    default: {
-      // Web shadow using boxShadow (RNW supports this)
-    }
-  });
-  const containerStyle = {
-    backgroundColor,
-    paddingLeft: paddingHorizontal,
-    paddingRight: paddingHorizontal,
-    paddingTop,
-    paddingBottom,
-    ...shadowStyle
-  };
-
-  // Slot container style for horizontal layout of action items
-  const slotStyle = {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    gap,
-    flex: 1
-  };
-
-  // Web-specific box-shadow
-  const webShadow = Platform.OS === 'web' ? {
-    boxShadow: '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)'
-  } : {};
-  const flatChildren = flattenChildren(children);
-  const processedChildren = cloneChildrenWithModes(flatChildren, modes);
-  const enhancedChildren = processedChildren.map((child, index) => {
-    if (! /*#__PURE__*/React.isValidElement(child)) return child;
-    const element = child;
-    const isIconButton = element.type === IconButton;
-    const stretchStyle = isIconButton ? undefined : {
-      flex: 1
+  // All token reads collapsed into a single useMemo keyed on `modes`. With
+  // the shared `EMPTY_MODES` default this resolves once for the common path
+  // and never re-allocates the container/slot style objects between renders.
+  const {
+    containerStyle,
+    slotStyle
+  } = useMemo(() => {
+    const backgroundColor = getVariableByName('actionFooter/background', modes) ?? '#ffffff';
+    const gap = getVariableByName('actionFooter/gap', modes) ?? 8;
+    const paddingHorizontal = getVariableByName('actionFooter/padding/horizontal', modes) ?? 16;
+    const paddingTop = getVariableByName('actionFooter/padding/top', modes) ?? 10;
+    const paddingBottom = getVariableByName('actionFooter/padding/bottom', modes) ?? 41;
+    const container = {
+      // `alignSelf: 'stretch'` is the cross-platform way to ask "fill the
+      // parent's cross axis" — in the common case (column parent) this gives
+      // us full-width without the caller needing to pass `width: '100%'`.
+      alignSelf: 'stretch',
+      backgroundColor,
+      paddingLeft: paddingHorizontal,
+      paddingRight: paddingHorizontal,
+      paddingTop,
+      paddingBottom,
+      ...NATIVE_SHADOW
     };
-    return /*#__PURE__*/React.cloneElement(element, {
-      key: element.key ?? index,
-      style: [stretchStyle, element.props.style]
+    const slot = {
+      flexDirection: 'row',
+      // Vertically center the IconButton against the slightly taller Buttons
+      // so the row reads as a single optical baseline.
+      alignItems: 'center',
+      gap
+    };
+    return {
+      containerStyle: container,
+      slotStyle: slot
+    };
+  }, [modes]);
+
+  // Process children once per (children, modes) tuple:
+  //   1. Flatten Fragments so each action is its own keyed sibling.
+  //   2. Push `modes` down so callers don't have to thread it manually.
+  //   3. Auto-stretch every non-IconButton with the Yoga-safe stretch style.
+  //
+  // The result identity is stable across re-renders when the inputs don't
+  // change, which keeps the `React.memo`-wrapped Button/IconButton children
+  // from re-rendering for no reason.
+  const enhancedChildren = useMemo(() => {
+    const flat = flattenChildren(children);
+    const withModes = cloneChildrenWithModes(flat, modes);
+    return withModes.map((child, index) => {
+      if (! /*#__PURE__*/React.isValidElement(child)) return child;
+      const element = child;
+      if (isIconButtonElement(element)) return element;
+      return /*#__PURE__*/React.cloneElement(element, {
+        key: element.key ?? `action-footer-item-${index}`,
+        style: [STRETCH_STYLE, element.props.style]
+      });
     });
-  });
+  }, [children, modes]);
   return /*#__PURE__*/_jsx(View, {
-    style: [containerStyle, webShadow, style],
+    style: [containerStyle, WEB_SHADOW, style],
     accessibilityRole: "toolbar",
-    accessibilityLabel: undefined,
+    accessibilityLabel: accessibilityLabel,
     children: /*#__PURE__*/_jsx(View, {
       style: slotStyle,
       children: enhancedChildren
     })
   });
 }
-export default ActionFooter;
+export default /*#__PURE__*/React.memo(ActionFooter);

package/lib/module/components/Avatar/Avatar.js

@@ -4,6 +4,8 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { Pressable, View, Image, Text, Platform } 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";
 const avatarImage = require('./31595e70c4181263f9971590224b12934b280c9b.png');
 
@@ -123,11 +125,19 @@ function Avatar({
   // component intentionally renders `accessibilityLabel={undefined}` on the
   // wrapper (the inner Text/Image carry the label instead).
   accessibilityLabel: _accessibilityLabel,
+  loading,
   ...rest
 }) {
   const isMonogram = style === 'Monogram';
   const tokens = useMemo(() => resolveAvatarTokens(modes, isMonogram), [modes, isMonogram]);
 
+  // Skeleton context — read unconditionally; the actual short-circuit
+  // happens AFTER all remaining hooks below.
+  const {
+    active: groupActive
+  } = useSkeleton();
+  const isLoading = loading ?? groupActive;
+
   // Focus is a sustained visible state — keep mirroring on web; gate the
   // setter so it never fires on native (where focus events don't fire on
   // these elements anyway).
@@ -158,6 +168,15 @@ function Avatar({
     pressed
   }) => [tokens.containerStyle, pressed ? pressedOverlayStyle : null, isFocused ? focusOverlayStyle : null], [tokens.containerStyle, isFocused]);
   const staticContainerStyle = useMemo(() => [tokens.containerStyle, isFocused ? focusOverlayStyle : null], [tokens.containerStyle, isFocused]);
+  if (isLoading) {
+    const size = tokens.containerStyle.width;
+    return /*#__PURE__*/_jsx(Skeleton, {
+      kind: "other",
+      width: size,
+      height: size,
+      modes: modes
+    });
+  }
 
   // The inner content varies; everything else (wrapper, handlers, style) is shared.
   const innerContent = isMonogram ? /*#__PURE__*/_jsx(View, {

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/IconButton/IconButton.js

@@ -6,6 +6,8 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
 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";
 // ---------------------------------------------------------------------------
 // Module-scope constants
@@ -93,6 +95,7 @@ function IconButton({
   inactiveIcon,
   inactiveSource,
   isActive = false,
+  loading,
   ...rest
 }) {
   // Merge explicit props with modes for token resolution. Memoize the merged
@@ -104,6 +107,13 @@ function IconButton({
     isActive
   }), [modes, isToggle, isActive]);
   const tokens = useMemo(() => resolveIconButtonTokens(componentModes, disabled), [componentModes, disabled]);
+
+  // Hook called unconditionally — short-circuit below comes AFTER all hooks
+  // to keep React's hook order stable across renders.
+  const {
+    active: groupActive
+  } = useSkeleton();
+  const isLoading = loading ?? groupActive;
   const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const userHandlersRef = useRef({});
@@ -175,6 +185,16 @@ function IconButton({
   const styleCallback = useCallback(({
     pressed
   }) => [tokens.baseContainerStyle, style, pressed && !disabled ? pressedOverlayStyle : null, isHovered && !disabled ? hoverOverlayStyle : null, isFocused && !disabled ? focusOverlayStyle : null], [tokens.baseContainerStyle, style, isHovered, isFocused, disabled]);
+  if (isLoading) {
+    const size = tokens.baseContainerStyle.width;
+    return /*#__PURE__*/_jsx(Skeleton, {
+      kind: "other",
+      width: size,
+      height: size,
+      style: style,
+      modes: componentModes
+    });
+  }
   return /*#__PURE__*/_jsx(Pressable, {
     accessibilityRole: "button",
     accessibilityLabel: undefined,

package/lib/module/components/Image/Image.js

@@ -2,6 +2,8 @@
 
 import React, { useMemo } from 'react';
 import { Image as RNImage, View } from 'react-native';
+import Skeleton from '../../skeleton/Skeleton';
+import { useSkeleton } from '../../skeleton/SkeletonGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
 function normalizeSource(imageSource) {
   if (imageSource == null) return undefined;
@@ -41,7 +43,8 @@ function Image({
   style,
   accessibilityLabel,
   accessibilityElementsHidden,
-  importantForAccessibility
+  importantForAccessibility,
+  loading
 }) {
   const source = useMemo(() => normalizeSource(imageSource), [imageSource]);
   const layoutStyle = useMemo(() => {
@@ -63,6 +66,27 @@ function Image({
     if (borderRadius != null) s.borderRadius = borderRadius;
     return s;
   }, [ratio, width, height, borderRadius]);
+  const {
+    active: groupActive
+  } = useSkeleton();
+  const isLoading = loading ?? groupActive;
+  if (isLoading) {
+    // Match the loaded image's exact box. If height is unknown but a ratio
+    // is set, the skeleton uses `aspectRatio` the same way the loaded image
+    // would, so layout never jumps when the load resolves.
+    const skeletonStyle = {
+      width: width ?? '100%',
+      ...(height != null ? {
+        height: height
+      } : {
+        aspectRatio: ratio
+      })
+    };
+    return /*#__PURE__*/_jsx(Skeleton, {
+      kind: "image",
+      style: skeletonStyle
+    });
+  }
   if (!source) {
     return /*#__PURE__*/_jsx(View, {
       style: [layoutStyle, style]