jfs-components 0.1.23 → 0.1.28

package/lib/commonjs/components/FormUpload/Additem.js

@@ -0,0 +1,168 @@
+"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 _Image = _interopRequireDefault(require("../Image/Image"));
+var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+/**
+ * Callback that opens a platform picker and resolves with the selected assets.
+ * This is the integration point for libraries like `react-native-image-picker`,
+ * `expo-image-picker`, or `react-native-document-picker`.
+ */
+
+function toNumber(value, fallback) {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+function resolveAdditemTokens(modes) {
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('compareCardItem/background', modes);
+  const borderRadius = toNumber((0, _figmaVariablesResolver.getVariableByName)('compareCardItem/radius', modes), 8);
+  const paddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('compareCardItem/padding/horizontal', modes), 6);
+  const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('compareCardItem/padding/vertical', modes), 8);
+  // The Figma design uses a fixed 44 × 44 dp cell. There is no
+  // `compareCardItem/size` token in the variables JSON, so we keep the size
+  // constant to match the design exactly.
+  const size = 44;
+  return {
+    backgroundColor,
+    borderRadius,
+    paddingHorizontal,
+    paddingVertical,
+    size
+  };
+}
+
+/** Figma defaults for the inner `IconCapsule` icons. Overridable via `modes`. */
+const ADDITEM_DEFAULT_MODES = Object.freeze({
+  AppearanceBrand: 'Neutral',
+  Emphasis: 'Low',
+  'Icon Capsule Size': 'S'
+});
+
+/**
+ * `Additem` — a small, reusable upload/preview cell used inside form uploaders.
+ *
+ * In its default `'empty'` state it shows a centered add/upload icon. In
+ * `'preview'` state it renders a thumbnail with a removable overlay. The
+ * component is intentionally unopinionated about *how* files are picked: pass a
+ * `picker` callback that wraps `react-native-image-picker`,
+ * `expo-image-picker`, `react-native-document-picker`, or any custom selector,
+ * and the cell will invoke it, surface the result via `onAssetsPicked`, and
+ * handle cancellation/errors gracefully.
+ */
+function Additem({
+  state = 'empty',
+  imageSource,
+  onPress,
+  onRemove,
+  picker,
+  onAssetsPicked,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  accessibilityLabel,
+  isDisabled = false,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? ADDITEM_DEFAULT_MODES : {
+    ...ADDITEM_DEFAULT_MODES,
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const tokens = (0, _react.useMemo)(() => resolveAdditemTokens(modes), [modes]);
+  const handlePress = _react.default.useCallback(async () => {
+    if (isDisabled) return;
+    if (state === 'empty' && picker) {
+      try {
+        const result = await picker();
+        if (result.didCancel) return;
+        if (result.error) {
+          if (__DEV__) {
+            console.warn('[Additem] picker error:', result.error);
+          }
+          return;
+        }
+        if (result.assets.length > 0) {
+          onAssetsPicked?.(result.assets);
+        }
+      } catch (err) {
+        if (__DEV__) {
+          console.warn('[Additem] unexpected picker error:', err);
+        }
+      }
+      return;
+    }
+    onPress?.();
+  }, [isDisabled, onPress, onAssetsPicked, picker, state]);
+  const handleRemove = _react.default.useCallback(() => {
+    if (!isDisabled) {
+      onRemove?.();
+    }
+  }, [isDisabled, onRemove]);
+  const resolvedAccessibilityLabel = accessibilityLabel ?? (state === 'empty' ? 'Add attachment' : 'Attachment preview');
+  const containerStyle = (0, _react.useMemo)(() => ({
+    width: tokens.size,
+    height: tokens.size,
+    borderRadius: tokens.borderRadius,
+    backgroundColor: tokens.backgroundColor,
+    paddingHorizontal: tokens.paddingHorizontal,
+    paddingVertical: tokens.paddingVertical,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    opacity: isDisabled ? 0.5 : 1
+  }), [tokens, isDisabled]);
+  const isPreview = state === 'preview';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    onPress: handlePress,
+    disabled: isDisabled,
+    accessibilityRole: "button",
+    accessibilityLabel: resolvedAccessibilityLabel,
+    accessibilityState: {
+      disabled: isDisabled
+    },
+    testID: testID,
+    style: containerStyle,
+    children: isPreview ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+        imageSource: imageSource,
+        width: "100%",
+        height: tokens.size - tokens.paddingVertical * 2,
+        resizeMode: "cover",
+        borderRadius: tokens.borderRadius - 2
+      }), onRemove != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          position: 'absolute',
+          top: 2,
+          right: 2
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+          iconName: "ic_close",
+          modes: modes,
+          onTouchEnd: handleRemove,
+          accessibilityRole: "button",
+          accessibilityLabel: "Remove attachment"
+        })
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+      iconName: "ic_add",
+      modes: modes
+    })
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(Additem);

package/lib/commonjs/components/FormUpload/FormUpload.js

@@ -0,0 +1,198 @@
+"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 _Form = require("../Form/Form");
+var _SupportText = _interopRequireDefault(require("../SupportText/SupportText"));
+var _Additem = _interopRequireDefault(require("./Additem"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+function toNumber(value, fallback) {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+function toFontWeight(value, fallback) {
+  if (typeof value === 'number') return value.toString();
+  if (typeof value === 'string' && value.length > 0) return value;
+  return fallback;
+}
+function resolveFormUploadTokens(modes) {
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/gap', modes), 8);
+  const rowGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/gap', modes), 8);
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('formField/label/color', modes);
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontFamily', modes);
+  const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/label/fontSize', modes), 14);
+  const labelLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/label/lineHeight', modes), 17);
+  const labelFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('formField/label/fontWeight', modes), '500');
+  return {
+    gap,
+    rowGap,
+    labelColor,
+    labelFontFamily,
+    labelFontSize,
+    labelLineHeight,
+    labelFontWeight
+  };
+}
+function firstError(error) {
+  if (!error) return undefined;
+  if (Array.isArray(error)) return error[0];
+  return error;
+}
+
+/** Figma defaults for the remove `IconCapsule` on filled preview cells. Overridable via `modes`. */
+const FORM_UPLOAD_PREVIEW_ICON_CAPSULE_MODES = {
+  AppearanceBrand: 'Neutral',
+  Emphasis: 'Medium',
+  'Icon Capsule Size': 'XS'
+};
+
+/**
+ * `FormUpload` — a form-aware upload row built from reusable `Additem` cells.
+ *
+ * The component mirrors the Figma "FormUpload" design: a label, a horizontal
+ * row of upload/preview cells, and support text. It integrates with the
+ * existing `<Form>` context so server-side validation errors automatically
+ * show below the row, and it clears those errors when attachments change.
+ *
+ * Upload behaviour is provided through the `picker` prop so the library stays
+ * free of native image-picker dependencies. Pass any picker that returns the
+ * `AdditemPickerResult` shape and the empty cell becomes a real upload trigger
+ * on both iOS and Android.
+ */
+function FormUpload({
+  label,
+  supportText,
+  name,
+  attachments = [],
+  maxCount,
+  onAttachmentsChange,
+  picker,
+  errorMessage,
+  isInvalid = false,
+  isDisabled = false,
+  children,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  rowStyle,
+  accessibilityLabel,
+  testID
+}) {
+  const formCtx = (0, _Form.useFormContext)();
+  const formError = name && formCtx ? firstError(formCtx.validationErrors[name]) : undefined;
+  const resolvedIsInvalid = isInvalid || Boolean(formError);
+  const resolvedErrorMessage = errorMessage ?? formError;
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const baseModes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const modes = (0, _react.useMemo)(() => ({
+    ...baseModes,
+    'FormField States': resolvedIsInvalid ? 'Error' : 'Idle',
+    Status: resolvedIsInvalid ? 'Error' : 'Auto'
+  }), [baseModes, resolvedIsInvalid]);
+
+  // Empty cells rely on `Additem`'s built-in Neutral / Low / S defaults for the
+  // add icon. Preview cells use the tighter remove-icon treatment from Figma.
+  const previewAdditemModes = (0, _react.useMemo)(() => ({
+    ...FORM_UPLOAD_PREVIEW_ICON_CAPSULE_MODES,
+    ...modes
+  }), [modes]);
+  const tokens = (0, _react.useMemo)(() => resolveFormUploadTokens(modes), [modes]);
+  const handleAssetsPicked = (0, _react.useCallback)(assets => {
+    if (isDisabled) return;
+    const next = [...attachments, ...assets];
+    if (maxCount != null && next.length > maxCount) {
+      next.length = maxCount;
+    }
+    onAttachmentsChange?.(next);
+    if (name && formCtx) {
+      formCtx.onFieldChange(name);
+    }
+  }, [attachments, maxCount, onAttachmentsChange, isDisabled, name, formCtx]);
+  const handleRemove = (0, _react.useCallback)(index => {
+    if (isDisabled) return;
+    const next = attachments.filter((_, i) => i !== index);
+    onAttachmentsChange?.(next);
+    if (name && formCtx) {
+      formCtx.onFieldChange(name);
+    }
+  }, [attachments, onAttachmentsChange, isDisabled, name, formCtx]);
+  const containerStyle = (0, _react.useMemo)(() => ({
+    gap: tokens.gap,
+    opacity: isDisabled ? 0.5 : 1
+  }), [tokens.gap, isDisabled]);
+  const rowStyleResolved = (0, _react.useMemo)(() => ({
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: tokens.rowGap,
+    alignItems: 'flex-start'
+  }), [tokens.rowGap]);
+  const labelStyle = (0, _react.useMemo)(() => ({
+    color: tokens.labelColor,
+    fontFamily: tokens.labelFontFamily,
+    fontSize: tokens.labelFontSize,
+    lineHeight: tokens.labelLineHeight,
+    fontWeight: tokens.labelFontWeight
+  }), [tokens]);
+  const resolvedA11yLabel = accessibilityLabel ?? label ?? 'Attachment upload';
+  const canAddMore = maxCount == null || attachments.length < maxCount;
+  const renderContent = () => {
+    if (children) {
+      return (0, _reactUtils.cloneChildrenWithModes)(children, modes);
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [attachments.map((attachment, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Additem.default, {
+        state: "preview",
+        imageSource: attachment.uri,
+        onRemove: () => handleRemove(index),
+        modes: previewAdditemModes,
+        isDisabled: isDisabled,
+        accessibilityLabel: attachment.name ?? `Attachment ${index + 1}`,
+        testID: `${testID}-item-${index}`
+      }, `${attachment.uri}-${index}`)), canAddMore && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Additem.default, {
+        state: "empty",
+        picker: picker,
+        onAssetsPicked: handleAssetsPicked,
+        modes: modes,
+        isDisabled: isDisabled,
+        testID: `${testID}-add`
+      })]
+    });
+  };
+  const supportLabel = resolvedIsInvalid && resolvedErrorMessage ? resolvedErrorMessage : supportText;
+  const supportStatus = resolvedIsInvalid ? 'Error' : 'Neutral';
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "none",
+    accessibilityLabel: resolvedA11yLabel,
+    testID: testID,
+    children: [label != null && label !== '' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: labelStyle,
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [rowStyleResolved, rowStyle],
+      children: renderContent()
+    }), supportLabel != null && supportLabel !== '' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SupportText.default, {
+      label: supportLabel,
+      status: supportStatus,
+      modes: modes
+    })]
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(FormUpload);

package/lib/commonjs/components/Grid/Grid.js

@@ -0,0 +1,206 @@
+"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); }
+function toNumber(value, fallback) {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+function resolveGridTokens(modes) {
+  const gapFallback = toNumber((0, _figmaVariablesResolver.getVariableByName)('Grid/gap', modes), 8);
+  const columnGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('Grid/column/gap', modes), gapFallback);
+  const rowGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('Grid/row/gap', modes), gapFallback);
+  const paddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('Grid/padding/horizontal', modes), 8);
+  const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('Grid/padding/vertical', modes), 8);
+  const paddingTop = toNumber((0, _figmaVariablesResolver.getVariableByName)('Grid/padding/top', modes), paddingVertical);
+  const paddingBottom = toNumber((0, _figmaVariablesResolver.getVariableByName)('Grid/padding/bottom', modes), paddingVertical);
+  const paddingLeft = toNumber((0, _figmaVariablesResolver.getVariableByName)('Grid/padding/left', modes), paddingHorizontal);
+  const paddingRight = toNumber((0, _figmaVariablesResolver.getVariableByName)('Grid/padding/right', modes), paddingHorizontal);
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('Grid/background/color', modes) ?? 'transparent';
+  return {
+    backgroundColor,
+    columnGap,
+    rowGap,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight
+  };
+}
+function normalizeFrs(frs, count) {
+  if (!frs || frs.length === 0) {
+    return Array.from({
+      length: count
+    }, () => 1);
+  }
+  return Array.from({
+    length: count
+  }, (_, index) => {
+    const value = frs[index] ?? frs[frs.length - 1] ?? 1;
+    return value > 0 ? value : 1;
+  });
+}
+function resolveAlignSelf(alignItems) {
+  if (alignItems === 'center') return 'center';
+  if (alignItems === 'start') return 'flex-start';
+  return 'stretch';
+}
+function resolveRowJustifyContent(justifyContent) {
+  if (justifyContent === 'space-between') return 'space-between';
+  if (justifyContent === 'start') return 'flex-start';
+  return 'flex-start';
+}
+function buildCellStyle(columnFr, justifyContent, alignItems) {
+  const alignSelf = resolveAlignSelf(alignItems);
+  if (justifyContent === 'space-between' || justifyContent === 'start') {
+    return {
+      flexGrow: 0,
+      flexShrink: 1,
+      flexBasis: 'auto',
+      minWidth: 0,
+      alignSelf
+    };
+  }
+  return {
+    flex: columnFr,
+    minWidth: 0,
+    alignSelf
+  };
+}
+
+/**
+ * `Grid` — a token-driven layout grid for React Native.
+ *
+ * Mirrors the Figma "Grid" component: a padded container with configurable
+ * columns, rows, fractional column tracks (`columnFrs`), and gap tokens.
+ * Each slot child maps to one cell — no separate `GridItem` wrapper is needed.
+ *
+ * @component
+ */
+function Grid({
+  columns = 1,
+  rows,
+  columnFrs,
+  rowFrs,
+  columnGap: columnGapProp,
+  rowGap: rowGapProp,
+  gap: gapProp,
+  padding: paddingProp,
+  paddingHorizontal: paddingHorizontalProp,
+  paddingVertical: paddingVerticalProp,
+  paddingTop: paddingTopProp,
+  paddingBottom: paddingBottomProp,
+  paddingLeft: paddingLeftProp,
+  paddingRight: paddingRightProp,
+  justifyContent = 'stretch',
+  alignItems = 'stretch',
+  children,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  contentStyle,
+  cellStyle,
+  accessibilityLabel,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const tokens = (0, _react.useMemo)(() => resolveGridTokens(modes), [modes]);
+  const resolvedColumnGap = columnGapProp ?? gapProp ?? tokens.columnGap;
+  const resolvedRowGap = rowGapProp ?? gapProp ?? tokens.rowGap;
+  const resolvedPadding = (0, _react.useMemo)(() => ({
+    paddingTop: paddingTopProp ?? paddingVerticalProp ?? paddingProp ?? tokens.paddingTop,
+    paddingBottom: paddingBottomProp ?? paddingVerticalProp ?? paddingProp ?? tokens.paddingBottom,
+    paddingLeft: paddingLeftProp ?? paddingHorizontalProp ?? paddingProp ?? tokens.paddingLeft,
+    paddingRight: paddingRightProp ?? paddingHorizontalProp ?? paddingProp ?? tokens.paddingRight
+  }), [paddingTopProp, paddingBottomProp, paddingLeftProp, paddingRightProp, paddingHorizontalProp, paddingVerticalProp, paddingProp, tokens]);
+  const safeColumns = Math.max(1, Math.floor(columns));
+  const processedChildren = (0, _react.useMemo)(() => (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(children), modes), [children, modes]);
+  const cellNodes = (0, _react.useMemo)(() => {
+    const nodes = [...processedChildren];
+    if (rows != null) {
+      const targetCount = safeColumns * Math.max(1, Math.floor(rows));
+      while (nodes.length < targetCount) {
+        nodes.push(null);
+      }
+      if (nodes.length > targetCount) {
+        nodes.length = targetCount;
+      }
+    }
+    return nodes;
+  }, [processedChildren, rows, safeColumns]);
+  const gridRows = (0, _react.useMemo)(() => {
+    const result = [];
+    for (let index = 0; index < cellNodes.length; index += safeColumns) {
+      result.push(cellNodes.slice(index, index + safeColumns));
+    }
+    return result;
+  }, [cellNodes, safeColumns]);
+  const normalizedColumnFrs = (0, _react.useMemo)(() => normalizeFrs(columnFrs, safeColumns), [columnFrs, safeColumns]);
+  const normalizedRowFrs = (0, _react.useMemo)(() => rowFrs ? normalizeFrs(rowFrs, gridRows.length) : null, [rowFrs, gridRows.length]);
+  const containerStyle = (0, _react.useMemo)(() => ({
+    backgroundColor: tokens.backgroundColor,
+    ...resolvedPadding,
+    width: '100%'
+  }), [tokens.backgroundColor, resolvedPadding]);
+  const rowsContainerStyle = (0, _react.useMemo)(() => ({
+    gap: resolvedRowGap,
+    width: '100%'
+  }), [resolvedRowGap]);
+  const rowStyle = (0, _react.useMemo)(() => ({
+    flexDirection: 'row',
+    columnGap: resolvedColumnGap,
+    justifyContent: resolveRowJustifyContent(justifyContent),
+    alignItems: alignItems === 'stretch' ? 'stretch' : alignItems === 'center' ? 'center' : 'flex-start',
+    width: '100%'
+  }), [resolvedColumnGap, justifyContent, alignItems]);
+  const defaultAccessibilityLabel = accessibilityLabel ?? `Grid, ${safeColumns} column${safeColumns === 1 ? '' : 's'}, ${gridRows.length} row${gridRows.length === 1 ? '' : 's'}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "none",
+    accessibilityLabel: defaultAccessibilityLabel,
+    testID: testID,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [rowsContainerStyle, contentStyle],
+      children: gridRows.map((row, rowIndex) => {
+        const rowFr = normalizedRowFrs?.[rowIndex];
+        const spacersNeeded = justifyContent === 'space-between' && row.length < safeColumns ? safeColumns - row.length : 0;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: rowFr != null ? [rowStyle, {
+            flexGrow: rowFr
+          }] : rowStyle,
+          children: [row.map((cell, columnIndex) => {
+            const absoluteIndex = rowIndex * safeColumns + columnIndex;
+            const cellFlexStyle = buildCellStyle(normalizedColumnFrs[columnIndex] ?? 1, justifyContent, alignItems);
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [cellFlexStyle, cellStyle],
+              children: cell
+            }, `grid-cell-${absoluteIndex}`);
+          }), spacersNeeded > 0 && Array.from({
+            length: spacersNeeded
+          }, (_, spacerIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: buildCellStyle(normalizedColumnFrs[row.length + spacerIndex] ?? 1, justifyContent, alignItems)
+          }, `grid-spacer-${rowIndex}-${spacerIndex}`))]
+        }, `grid-row-${rowIndex}`);
+      })
+    })
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(Grid);

package/lib/commonjs/components/ListItem/ListItem.js

@@ -255,13 +255,20 @@ function ListItemImpl({
   const renderSupportContent = () => {
     if (processedSupportSlot) return processedSupportSlot;
 
-    // Default support text:
-    //  - vertical layout: main text (line-broken on spaces)
-    //  - horizontal layout: secondary line (clamped to 2 lines)
+    // Default support text — ONE `<Text>` hard-clamped to 2 lines via
+    // `numberOfLines={2}`, the only mechanism React Native actually enforces
+    // on iOS/Android (native has no `white-space: nowrap` equivalent, so any
+    // style-based trick cannot stop a too-wide word from wrapping).
+    //
+    //  - vertical layout: line-broken on spaces so each word gets its own line
+    //    ("Split Payments" → "Split" / "Payments"). If a word is still wider
+    //    than the cell (or there are 3+ words), RN cuts it off at line 2 with
+    //    a trailing ellipsis instead of ever spilling onto a third line.
+    //  - horizontal layout: natural wrapping, same 2-line clamp.
     const displayText = layout === 'Vertical' ? supportText.replace(/ /g, '\n') : supportText;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: layout === 'Vertical' ? [tokens.supportTextStyle, verticalSupportTextOverride] : tokens.supportTextStyle,
-      ...(0, _reactUtils.resolveTruncation)(disableTruncation, layout === 'Horizontal' ? 2 : undefined),
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 2, 'tail'),
       children: displayText
     });
   };