jfs-components 0.1.0 → 0.1.8

package/lib/commonjs/components/DropdownInput/DropdownInput.js

@@ -22,6 +22,12 @@ const IS_WEB = _reactNative.Platform.OS === 'web';
 // Types
 // ---------------------------------------------------------------------------
 
+/**
+ * Imperative handle exposed via `ref`. Lets the consumer drive the dropdown
+ * from outside — e.g. close it when an Android hardware/system button is
+ * pressed, or open it programmatically from a sibling control.
+ */
+
 // ---------------------------------------------------------------------------
 // Token resolution
 // ---------------------------------------------------------------------------
@@ -125,7 +131,7 @@ function collectOptionsFromChildren(children) {
 // Component
 // ---------------------------------------------------------------------------
 
-function DropdownInput({
+const DropdownInput = /*#__PURE__*/(0, _react.forwardRef)(function DropdownInput({
   label,
   placeholder = 'Select an option',
   items,
@@ -156,7 +162,7 @@ function DropdownInput({
   accessibilityHint,
   onFocus,
   onBlur
-}) {
+}, ref) {
   // ---------------- Modes ----------------
   const {
     modes: globalModes
@@ -270,6 +276,32 @@ function DropdownInput({
     measure();
   }, [measure]);
 
+  // ---------------- Imperative handle ----------------
+  (0, _react.useImperativeHandle)(ref, () => ({
+    open: () => {
+      if (isDisabled || isReadOnly) return;
+      measure();
+      setOpenState(true);
+    },
+    close: closeMenu,
+    toggle: () => {
+      if (isDisabled || isReadOnly) return;
+      measure();
+      toggleMenu();
+    },
+    focus: () => {
+      ;
+      triggerRef.current?.focus?.();
+    },
+    blur: () => {
+      ;
+      triggerRef.current?.blur?.();
+    },
+    measureInWindow: callback => {
+      triggerRef.current?.measureInWindow(callback);
+    }
+  }), [isDisabled, isReadOnly, measure, setOpenState, closeMenu, toggleMenu]);
+
   // ---------------- Popup positioning ----------------
   const [menuSize, setMenuSize] = (0, _react.useState)(null);
   const handleMenuLayout = (0, _react.useCallback)(e => {
@@ -537,7 +569,7 @@ function DropdownInput({
       transparent: true,
       statusBarTranslucent: true,
       navigationBarTranslucent: true,
-      animationType: "fade",
+      animationType: "none",
       onRequestClose: closeMenu,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
         style: _reactNative.StyleSheet.absoluteFill,
@@ -564,7 +596,7 @@ function DropdownInput({
       })
     })]
   });
-}
+});
 const webNoOutline = {
   outlineStyle: 'none',
   outlineWidth: 0,

package/lib/commonjs/components/FormField/FormField.js

@@ -162,7 +162,7 @@ function firstError(error) {
 // Component
 // ---------------------------------------------------------------------------
 
-function FormField({
+const FormField = /*#__PURE__*/(0, _react.forwardRef)(function FormField({
   label,
   placeholder,
   value,
@@ -190,7 +190,7 @@ function FormField({
   accessibilityLabel,
   accessibilityHint,
   testID
-}) {
+}, ref) {
   // -- Form context integration -------------------------------------------
   const formCtx = (0, _Form.useFormContext)();
   const formError = name && formCtx ? firstError(formCtx.validationErrors[name]) : undefined;
@@ -347,6 +347,7 @@ function FormField({
         importantForAccessibility: "no",
         children: processedLeading
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        ref: ref,
         style: [inputTextStyles, inputTextStyle],
         value: value ?? '',
         onChangeText: handleChangeText,
@@ -376,5 +377,5 @@ function FormField({
       modes: modes
     })]
   });
-}
+});
 var _default = exports.default = FormField;

package/lib/commonjs/components/FullscreenModal/FullscreenModal.js

@@ -253,7 +253,57 @@ function FullscreenModal({
     useNativeDriver: true
   }), [scrollY]);
   const heroTranslateY = (0, _react.useMemo)(() => _reactNative.Animated.multiply(scrollY, -1), [scrollY]);
-  const processedHeroMedia = (0, _react.useMemo)(() => heroMedia ? (0, _reactUtils.cloneChildrenWithModes)(heroMedia, modes, FULLSCREEN_MODAL_FORCED_MODES) : null, [heroMedia, modes]);
+
+  // The hero media is a full-bleed background pinned to the top of the modal.
+  // Its wrapper is absolutely positioned (`top/left/right: 0`) so it never
+  // contributes to scroll height. We measure the modal's own width so we can
+  // give the hero media a DEFINITE { width, height } box (see
+  // `processedHeroMedia` below) — relying on the media's own `width: '100%'` +
+  // `aspectRatio` is unreliable inside an indefinite-height absolute box (RN's
+  // `<Image>` falls back to its intrinsic width and leaves a gap), so we size
+  // it explicitly here instead.
+  const [containerWidth, setContainerWidth] = (0, _react.useState)(0);
+  const onContainerLayout = (0, _react.useCallback)(e => {
+    const w = e.nativeEvent.layout.width;
+    setContainerWidth(prev => prev !== w ? w : prev);
+  }, []);
+  const processedHeroMedia = (0, _react.useMemo)(() => {
+    if (!heroMedia) return null;
+    // Defer rendering the hero until we have measured the modal width. This
+    // matters for image sharpness: React Native decodes a bitmap once, on the
+    // first render, and caches it. If we rendered the media before knowing the
+    // final box, that first decode would be sized/sampled for the wrong box and
+    // the cached (downsampled) bitmap would then just be scaled up — blurry.
+    // Rendering only once the explicit { width, height } box is known means the
+    // very first decode is already full-resolution for the correct box.
+    if (containerWidth <= 0) return null;
+    const withModes = (0, _reactUtils.cloneChildrenWithModes)(heroMedia, modes, FULLSCREEN_MODAL_FORCED_MODES);
+
+    // Force the hero to fill the modal width edge to edge, top-aligned, with the
+    // height derived from the media's native aspect ratio.
+    //
+    // Why we inject explicit width/height instead of relying on the media's own
+    // `width: '100%'` + `aspectRatio`: the hero wrapper is absolutely positioned
+    // with an INDEFINITE height, and in that layout context React Native's
+    // `<Image>` falls back to its INTRINSIC width (so a 361px-wide asset renders
+    // 361px wide and leaves a gap on the right) rather than stretching to the
+    // parent. By computing `height = containerWidth / ratio` here and passing a
+    // DEFINITE { width, height } box (which makes `<Image>` skip aspectRatio and
+    // cover-fit into that exact box), the hero always fills the width with the
+    // correct ratio-derived height.
+    return _react.default.Children.map(withModes, child => {
+      if (! /*#__PURE__*/_react.default.isValidElement(child)) return child;
+      const props = child.props;
+      const ratio = typeof props.ratio === 'number' && props.ratio > 0 ? props.ratio : undefined;
+      // Only size media that exposes a numeric `ratio` and hasn't already been
+      // given an explicit box by the caller.
+      if (ratio == null || props.width != null || props.height != null) return child;
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        width: containerWidth,
+        height: containerWidth / ratio
+      });
+    });
+  }, [heroMedia, modes, containerWidth]);
   const processedChildren = (0, _react.useMemo)(() => children ? (0, _reactUtils.cloneChildrenWithModes)(children, modes, FULLSCREEN_MODAL_FORCED_MODES) : null, [children, modes]);
 
   // The hero text region always reserves `heroHeight` and anchors its content
@@ -306,8 +356,18 @@ function FullscreenModal({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [rootStyle, style],
     testID: testID,
+    onLayout: onContainerLayout,
     children: [processedHeroMedia ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: [heroBackgroundStyle, {
+      style: [heroBackgroundStyle,
+      // Give the absolute wrapper a DEFINITE width (the measured modal
+      // width) so the media's `width: '100%'` + `aspectRatio` resolves to
+      // a true edge-to-edge fill with a ratio-derived height, top-aligned.
+      // Before the first layout pass `containerWidth` is 0 — fall back to
+      // stretching via `left/right: 0` so there is no flash of a mis-sized
+      // image.
+      containerWidth > 0 ? {
+        width: containerWidth
+      } : null, {
         transform: [{
           translateY: heroTranslateY
         }]

package/lib/commonjs/components/Image/Image.js

@@ -43,6 +43,7 @@ function Image({
   imageSource,
   ratio = DEFAULT_RATIO,
   resizeMode = 'cover',
+  resizeMethod,
   width,
   height,
   borderRadius,
@@ -53,11 +54,15 @@ function Image({
   loading
 }) {
   const source = (0, _react.useMemo)(() => normalizeSource(imageSource), [imageSource]);
+
+  // Explicit { width, height } means a "fill an exact box" layout — typically a
+  // full-bleed hero/background where the asset is high-res and sharpness
+  // matters most. There, default to `'none'` (full-resolution, no pre-decode
+  // downsample) so detail is never thrown away. Aspect-ratio images keep the
+  // memory-safe `'scale'` default. A caller-supplied `resizeMethod` always wins.
+  const isExplicitBox = width != null && height != null;
+  const effectiveResizeMethod = resizeMethod ?? (isExplicitBox ? 'none' : 'scale');
   const layoutStyle = (0, _react.useMemo)(() => {
-    // If the caller has fully specified width AND height, they're doing a
-    // non-aspect layout (e.g. "fill the parent") — respect that and skip
-    // `aspectRatio` so it doesn't conflict.
-    const isExplicitBox = width != null && height != null;
     const s = {
       width: width ?? '100%',
       ...(isExplicitBox ? {
@@ -71,7 +76,7 @@ function Image({
     };
     if (borderRadius != null) s.borderRadius = borderRadius;
     return s;
-  }, [ratio, width, height, borderRadius]);
+  }, [ratio, width, height, borderRadius, isExplicitBox]);
   const {
     active: groupActive
   } = (0, _SkeletonGroup.useSkeleton)();
@@ -102,6 +107,7 @@ function Image({
     source: source,
     style: [layoutStyle, style],
     resizeMode: resizeMode,
+    resizeMethod: effectiveResizeMethod,
     accessibilityLabel: accessibilityLabel,
     accessibilityElementsHidden: accessibilityElementsHidden,
     importantForAccessibility: importantForAccessibility

package/lib/commonjs/components/InputSearch/InputSearch.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = InputSearch;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
@@ -54,7 +54,7 @@ function SupportText({
     })]
   });
 }
-function InputSearch({
+const InputSearch = /*#__PURE__*/(0, _react.forwardRef)(function InputSearch({
   supportText = true,
   supportTextLabel = "Support Text",
   supportTextIcon = "ic_info",
@@ -69,7 +69,7 @@ function InputSearch({
   trailing,
   inputStyle,
   ...rest
-}) {
+}, ref) {
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
 
   // Hardcode InputState based on the state prop, ignoring any external InputState passed in modes
@@ -124,6 +124,7 @@ function InputSearch({
       gap: formFieldGap
     }, containerStyle],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
+      ref: ref,
       placeholder: placeholder,
       value: value || '',
       onChangeText: onChangeText || (() => {}),
@@ -143,4 +144,5 @@ function InputSearch({
       modes: componentModes
     })]
   });
-}
+});
+var _default = exports.default = InputSearch;

package/lib/commonjs/components/LottiePlayer/loadNativeLottieView.js

@@ -11,17 +11,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 /** Props we forward to the underlying native Lottie view. */
 
 const INSTALL_HINT = 'LottiePlayer requires lottie-react-native in your app.\n' + '  npm install lottie-react-native\n' + '  cd ios && pod install';
-
-/**
- * Metro resolves `require('lottie-react-native')` at bundle time even inside
- * try/catch, which breaks apps that import `jfs-components` without having
- * the optional peer installed. Splitting the module id into a runtime string
- * keeps Metro from statically linking it — the native module is loaded only
- * when present in the consumer's node_modules.
- */
-function resolveNativeLottieModuleName() {
-  return ['lottie', '-react', '-native'].join('');
-}
 function LottieUnavailableView({
   style
 }) {
@@ -65,8 +54,14 @@ let cachedView;
 function getNativeLottieView() {
   if (cachedView !== undefined) return cachedView;
   try {
-    const mod = require(resolveNativeLottieModuleName());
-    cachedView = mod.default ?? LottieUnavailable;
+    // Static require so Metro resolves the module by its build-time numeric id.
+    // A runtime-constructed string path is NOT resolvable by Metro's `require`
+    // (it indexes modules by number, not path), so it would always throw and
+    // fall back to the install hint even when the package is installed. The
+    // dependency stays an *optional* peer: apps that use LottiePlayer install
+    // it; apps that don't simply never import this module.
+    const mod = require('lottie-react-native');
+    cachedView = mod.default ?? mod.LottieView ?? LottieUnavailable;
   } catch {
     cachedView = LottieUnavailable;
   }

package/lib/commonjs/components/NoteInput/NoteInput.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = NoteInput;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
@@ -14,7 +14,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * NoteInput component representing an interactive "Add note" badge style field.
  * Allows the user to click, clears the placeholder text, and shows a blinking cursor when focused.
  */
-function NoteInput({
+const NoteInput = /*#__PURE__*/(0, _react.forwardRef)(function NoteInput({
   value = '',
   placeholder = 'Add note',
   onChangeText,
@@ -25,7 +25,7 @@ function NoteInput({
   onFocus,
   onBlur,
   ...rest
-}) {
+}, ref) {
   const [internalFocused, setInternalFocused] = (0, _react.useState)(false);
   const inputRef = (0, _react.useRef)(null);
 
@@ -97,7 +97,7 @@ function NoteInput({
         importantForAccessibility: "no",
         children: internalFocused ? value || ' ' : value || placeholder
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        ref: inputRef,
+        ref: (0, _reactUtils.mergeRefs)(inputRef, ref),
         value: value,
         onChangeText: onChangeText,
         placeholder: internalFocused ? '' : placeholder,
@@ -117,4 +117,5 @@ function NoteInput({
       })]
     })
   });
-}
+});
+var _default = exports.default = NoteInput;

package/lib/commonjs/components/Overlay/Overlay.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+const PLACEMENT_STYLE = {
+  center: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  top: {
+    justifyContent: 'flex-start',
+    alignItems: 'stretch'
+  },
+  bottom: {
+    justifyContent: 'flex-end',
+    alignItems: 'stretch'
+  },
+  stretch: {
+    justifyContent: 'center',
+    alignItems: 'stretch'
+  }
+};
+
+/**
+ * Overlay — a token-driven scrim that dims content behind an overlaid surface.
+ *
+ * Renders a semi-transparent backdrop using the `overlay/background` design
+ * token and optionally hosts content (e.g. a modal, sheet or dialog) on top.
+ * Pair it with a `Modal` for true full-screen overlays, or drop it inside any
+ * relatively-positioned container to dim just that region.
+ *
+ * @example
+ * ```tsx
+ * <Overlay modes={modes} onPress={close}>
+ *   <Card>Dialog content</Card>
+ * </Overlay>
+ * ```
+ */
+function Overlay({
+  children,
+  contentPlacement = 'center',
+  onPress,
+  fill = true,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const {
+    containerStyle,
+    processedChildren
+  } = (0, _react.useMemo)(() => {
+    const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('overlay/background', modes) ?? 'rgba(0, 0, 0, 0.7)';
+    const container = {
+      backgroundColor,
+      overflow: 'hidden',
+      ...PLACEMENT_STYLE[contentPlacement]
+    };
+    const processed = children ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : null;
+    return {
+      containerStyle: container,
+      processedChildren: processed
+    };
+  }, [children, modes, contentPlacement]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [fill && _reactNative.StyleSheet.absoluteFill, containerStyle, style],
+    accessibilityViewIsModal: true,
+    ...rest,
+    children: [onPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: _reactNative.StyleSheet.absoluteFill,
+      onPress: onPress,
+      accessibilityRole: "button",
+      accessibilityLabel: "Dismiss overlay"
+    }) : null, processedChildren]
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(Overlay);