jfs-components 0.1.28 → 0.1.32

package/lib/module/components/HelloJioInput/HelloJioInput.js

@@ -0,0 +1,281 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { Platform, Pressable, View, TextInput as RNTextInput } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import Icon from '../../icons/Icon';
+import { EMPTY_MODES, cloneChildrenWithModes, mergeRefs } from '../../utils/react-utils';
+import GlassFill from '../../utils/GlassFill/GlassFill';
+import IconButton from '../IconButton/IconButton';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const IS_WEB = Platform.OS === 'web';
+const STATE_COLLECTION = 'HelloJioInput State';
+
+/** Default IconButton modes matching the Figma send control. */
+const DEFAULT_SEND_BUTTON_MODES = Object.freeze({
+  AppearanceBrand: 'Primary',
+  'Button / Size': 'S'
+});
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') return value;
+  return fallback;
+};
+/**
+ * Fallback values from the Figma `HelloJioInput` component when local token
+ * JSON has not been synced yet. Mode-driven `getVariableByName` wins when
+ * tokens resolve.
+ */
+const STATE_FALLBACKS = {
+  Idle: {
+    background: '#f5f5f5',
+    borderColor: '#f5f5f5',
+    labelColor: '#545961',
+    iconColor: '#545961'
+  },
+  Active: {
+    background: '#ffffff',
+    borderColor: '#b5b5b5',
+    labelColor: '#24262b',
+    iconColor: '#24262b'
+  },
+  IdleJioPlus: {
+    background: '#f5f5f5',
+    borderColor: '#f5f5f5',
+    labelColor: '#545961',
+    iconColor: '#545961'
+  }
+};
+function resolveHelloJioInputTokens(modes, visualState) {
+  const fallback = STATE_FALLBACKS[visualState];
+  const background = getVariableByName('helloJioInput/background', modes) ?? fallback.background;
+  const borderColor = getVariableByName('helloJioInput/border/color', modes) ?? fallback.borderColor;
+  const strokeWidth = toNumber(getVariableByName('helloJioInput/strokeWidth', modes), 1);
+  const gap = toNumber(getVariableByName('helloJioInput/gap', modes), 8);
+  const paddingLeft = toNumber(getVariableByName('helloJioInput/padding/left', modes), 12);
+  const paddingRight = toNumber(getVariableByName('helloJioInput/padding/right', modes), 4);
+  const paddingTop = toNumber(getVariableByName('helloJioInput/padding/top', modes), 4);
+  const paddingBottom = toNumber(getVariableByName('helloJioInput/padding/bottom', modes), 4);
+  const height = toNumber(getVariableByName('helloJioInput/height', modes), 36);
+  const radiusRaw = toNumber(getVariableByName('helloJioInput/radius', modes), 99999);
+  const borderRadius = radiusRaw >= 9999 ? 99999 : radiusRaw;
+  const labelColor = getVariableByName('helloJioInput/label/color', modes) ?? fallback.labelColor;
+  const fontSize = toNumber(getVariableByName('helloJioInput/fontSize', modes), 14);
+  const lineHeight = toNumber(getVariableByName('helloJioInput/lineHeight', modes), 18);
+  const fontFamily = getVariableByName('helloJioInput/fontFamily', modes) ?? 'JioType Var';
+  const fontWeight = toFontWeight(getVariableByName('helloJioInput/fontWeight', modes), '400');
+  const iconColor = getVariableByName('helloJioInput/icon/color', modes) ?? fallback.iconColor;
+  const iconSize = toNumber(getVariableByName('textInput/icon/size', modes) ?? getVariableByName('helloJioInput/icon/size', modes), 18);
+  const blurMinimal = toNumber(getVariableByName('blur/minimal', modes), 29);
+  const blurIntensity = Math.max(0, Math.min(100, Math.round(blurMinimal)));
+  const useGlass = visualState === 'IdleJioPlus';
+  return {
+    containerStyle: {
+      position: 'relative',
+      flexDirection: 'row',
+      alignItems: 'center',
+      // Glass keeps the container transparent so GlassFill shows through.
+      backgroundColor: useGlass ? 'transparent' : background,
+      borderColor,
+      borderWidth: strokeWidth,
+      borderStyle: 'solid',
+      borderRadius,
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      paddingBottom,
+      gap,
+      height,
+      overflow: 'hidden',
+      width: '100%'
+    },
+    inputStyle: {
+      flex: 1,
+      color: labelColor,
+      fontSize,
+      fontFamily,
+      fontWeight,
+      // iOS single-line TextInput + explicit lineHeight sits below center —
+      // same quirk TextInput works around. Omit on iOS.
+      ...(Platform.OS === 'ios' ? null : {
+        lineHeight
+      }),
+      padding: 0,
+      margin: 0,
+      minHeight: lineHeight,
+      outlineStyle: 'none',
+      outlineWidth: 0,
+      outlineColor: 'transparent'
+    },
+    iconColor,
+    iconSize,
+    blurIntensity,
+    useGlass
+  };
+}
+
+/**
+ * `HelloJioInput` is the pill-shaped HelloJio prompt field: leading brand
+ * icon, single-line text input, and a gold send `IconButton` on the right.
+ *
+ * Visual state is derived automatically:
+ *  - **Idle** — gray fill, gray label (default)
+ *  - **Active** — white fill + border while focused
+ *  - **IdleJioPlus** — frosted glass when `jioPlus` and unfocused
+ *
+ * @component
+ */
+const HelloJioInput = /*#__PURE__*/forwardRef(function HelloJioInput({
+  placeholder = 'Ask me anything',
+  value,
+  defaultValue = '',
+  onChangeText,
+  onSubmit,
+  leadingIconName = 'ic_hellojio',
+  leading,
+  trailing,
+  sendIconName = 'ic_send_message',
+  jioPlus = false,
+  disabled = false,
+  modes: propModes = EMPTY_MODES,
+  style,
+  inputStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  testID,
+  onFocus,
+  onBlur,
+  returnKeyType = 'send',
+  ...rest
+}, ref) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const inputRef = useRef(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? value : uncontrolledValue;
+  const visualState = isFocused ? 'Active' : jioPlus ? 'IdleJioPlus' : 'Idle';
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes,
+    [STATE_COLLECTION]: visualState
+  }), [globalModes, propModes, visualState]);
+  const sendButtonModes = useMemo(() => ({
+    ...DEFAULT_SEND_BUTTON_MODES,
+    ...modes
+  }), [modes]);
+  const tokens = useMemo(() => resolveHelloJioInputTokens(modes, visualState), [modes, visualState]);
+  const handleChangeText = useCallback(text => {
+    if (!isControlled) setUncontrolledValue(text);
+    onChangeText?.(text);
+  }, [isControlled, onChangeText]);
+  const handleSubmit = useCallback(() => {
+    if (disabled) return;
+    onSubmit?.(currentValue);
+  }, [disabled, onSubmit, currentValue]);
+  const handleFocus = useCallback(e => {
+    setIsFocused(true);
+    onFocus?.(e);
+  }, [onFocus]);
+  const handleBlur = useCallback(e => {
+    setIsFocused(false);
+    onBlur?.(e);
+  }, [onBlur]);
+  const leadingElement = leading ?? (leadingIconName ? /*#__PURE__*/_jsx(Icon, {
+    name: leadingIconName,
+    size: tokens.iconSize,
+    color: tokens.iconColor
+  }) : null);
+  const processedLeading = leadingElement ? cloneChildrenWithModes(React.Children.toArray(leadingElement), modes) : null;
+  const defaultTrailing = /*#__PURE__*/_jsx(IconButton, {
+    iconName: sendIconName,
+    modes: sendButtonModes,
+    onPress: handleSubmit,
+    disabled: disabled,
+    accessibilityLabel: "Send"
+  });
+  const trailingElement = trailing === undefined ? defaultTrailing : trailing === null ? null : trailing;
+  const processedTrailing = trailingElement ? cloneChildrenWithModes(React.Children.toArray(trailingElement), modes) : null;
+  const a11yLabel = accessibilityLabel ?? (placeholder || 'HelloJio input');
+  const hoverStyle = isHovered && !disabled && !isFocused ? {
+    opacity: 0.95
+  } : {};
+  const containerStyleArray = [tokens.containerStyle, hoverStyle, disabled ? {
+    opacity: 0.5
+  } : null, style];
+  const glassOverlay = getVariableByName('helloJioInput/background', modes) ?? STATE_FALLBACKS.IdleJioPlus.background;
+  const inner = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [tokens.useGlass ? /*#__PURE__*/_jsx(GlassFill, {
+      tint: "light",
+      intensity: tokens.blurIntensity,
+      overlayColor: glassOverlay,
+      androidTintWash: false
+    }) : null, processedLeading ? /*#__PURE__*/_jsx(View, {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      style: SLOT_CENTER,
+      children: processedLeading
+    }) : null, /*#__PURE__*/_jsx(RNTextInput, {
+      ref: mergeRefs(inputRef, ref),
+      accessibilityLabel: a11yLabel,
+      accessibilityHint: accessibilityHint,
+      placeholder: isFocused ? '' : placeholder,
+      placeholderTextColor: tokens.inputStyle.color,
+      value: currentValue,
+      onChangeText: handleChangeText,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onSubmitEditing: handleSubmit,
+      returnKeyType: returnKeyType,
+      editable: !disabled,
+      style: [tokens.inputStyle, inputStyle],
+      testID: testID,
+      ...rest
+    }), processedTrailing ? /*#__PURE__*/_jsx(View
+    // Keep the send button in the a11y tree — it has its own label.
+    , {
+      style: SLOT_CENTER,
+      children: processedTrailing
+    }) : null]
+  });
+
+  // Same Android focus rule as TextInput: never wrap native TextInput in
+  // Pressable on native (steals the first tap). Web keeps Pressable for
+  // hover + click-anywhere-to-focus.
+  if (IS_WEB) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: containerStyleArray,
+      onHoverIn: () => setIsHovered(true),
+      onHoverOut: () => setIsHovered(false),
+      onPress: () => {
+        if (!disabled) inputRef.current?.focus();
+      },
+      accessible: false,
+      disabled: disabled,
+      children: inner
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: containerStyleArray,
+    children: inner
+  });
+});
+const SLOT_CENTER = {
+  justifyContent: 'center',
+  alignItems: 'center'
+};
+export default /*#__PURE__*/React.memo(HelloJioInput);

package/lib/module/components/MoneyValue/MoneyValue.js

@@ -1,10 +1,10 @@
 "use strict";
 
-import React, { useMemo, useEffect, useRef } from 'react';
-import { View, Text, Pressable, Animated } from 'react-native';
+import React, { useMemo, useEffect, useRef, useState, useCallback } from 'react';
+import { View, Text, TextInput, Pressable, Animated, Platform, Keyboard } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
-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";
 // Map of common ISO 4217 currency codes to display symbols
 const CURRENCY_SYMBOLS = {
   INR: '₹',
@@ -56,6 +56,8 @@ function MoneyValue({
   negative,
   focused = false,
   hidden = false,
+  editable = false,
+  onValueChange,
   modes = EMPTY_MODES,
   style,
   valueStyle,
@@ -67,24 +69,51 @@ function MoneyValue({
   ...rest
 }) {
   // Auto-detect negative from value and compute display value
-  const {
-    isNegative,
-    displayValue
-  } = useMemo(() => {
-    const stringValue = String(value);
-    const trimmed = stringValue.trim();
-    const valueIsNegative = trimmed.startsWith('-') || typeof value === 'number' && value < 0;
+  const stringValue = String(value);
+  const trimmed = stringValue.trim();
+  const valueIsNegative = trimmed.startsWith('-') || typeof value === 'number' && value < 0;
 
-    // Strip leading minus sign for display (we show it separately)
-    const absoluteValue = trimmed.startsWith('-') ? trimmed.slice(1) : trimmed;
+  // Strip leading minus sign for display (we show it separately)
+  const absoluteValue = trimmed.startsWith('-') ? trimmed.slice(1) : trimmed;
 
-    // Use explicit negative prop if provided, otherwise use auto-detected
-    const showNegative = negative !== undefined ? negative : valueIsNegative;
-    return {
-      isNegative: hidden ? false : showNegative,
-      displayValue: hidden ? '•••' : absoluteValue
-    };
-  }, [value, negative, hidden]);
+  // Use explicit negative prop if provided, otherwise use auto-detected
+  const showNegative = negative !== undefined ? negative : valueIsNegative;
+  const isNegative = hidden ? false : showNegative;
+  const displayValue = hidden ? '•••' : absoluteValue;
+
+  // Inline editing state
+  const [isEditing, setIsEditing] = useState(false);
+  const [editBuffer, setEditBuffer] = useState('');
+  const inputRef = useRef(null);
+  // Always-current snapshot of the display value for callbacks to reference.
+  const displayValueRef = useRef(displayValue);
+  displayValueRef.current = displayValue;
+  const enterEditMode = useCallback(() => {
+    setIsEditing(true);
+    setEditBuffer(displayValueRef.current);
+    // Focus the input on next frame so the keyboard opens
+    setTimeout(() => inputRef.current?.focus(), 0);
+  }, []);
+  const commitEdit = useCallback(() => {
+    setIsEditing(false);
+    const resolved = editBuffer || '0';
+    if (resolved !== displayValueRef.current) {
+      onValueChange?.(resolved);
+    }
+  }, [editBuffer, onValueChange]);
+  const handleChangeText = useCallback(text => {
+    // Allow only digits and at most one decimal point
+    const filtered = text.replace(/[^0-9.]/g, '');
+    const parts = filtered.split('.');
+    const clean = parts.length > 2 ? parts[0] + '.' + parts.slice(1).join('') : filtered;
+    setEditBuffer(clean);
+  }, []);
+  const handlePress = useCallback(event => {
+    if (editable) {
+      enterEditMode();
+    }
+    onPress?.(event);
+  }, [editable, enterEditMode, onPress]);
 
   // Resolve typography and layout tokens from Figma
   const textColor = getVariableByName('moneyValue/text/color', modes);
@@ -145,44 +174,140 @@ function MoneyValue({
       cursorOpacity.setValue(0);
     }
   }, [focused, cursorOpacity]);
-  return /*#__PURE__*/_jsxs(Pressable, {
-    style: [containerStyle, style],
-    accessibilityRole: "text",
-    accessibilityLabel: undefined,
-    accessibilityHint: accessibilityHint,
-    onPress: onPress,
-    disabled: !onPress,
-    ...rest,
-    children: [isNegative && /*#__PURE__*/_jsx(Text, {
-      style: [currencyTextStyle, negativeSignStyle],
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no",
-      children: "-"
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [currencyTextStyle, currencyStyle],
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no",
-      children: resolvedCurrency
-    }), /*#__PURE__*/_jsxs(View, {
-      style: {
-        flexDirection: 'row',
-        alignItems: 'center'
-      },
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [valueTextStyle, valueStyle],
-        accessibilityElementsHidden: true,
-        importantForAccessibility: "no",
-        children: displayValue
-      }), focused && /*#__PURE__*/_jsx(Animated.View, {
-        style: {
-          opacity: cursorOpacity,
-          width: 2,
-          height: valueFontSize * 1.1,
-          backgroundColor: textColor,
-          marginLeft: 2
-        }
-      })]
-    })]
+
+  // Keyboard avoidance — lift the component when the keyboard would cover it.
+  // Follows the same pattern as ActionFooter (uses Keyboard.addListener).
+  // Resets when editing ends or the keyboard hides.
+  const rootRef = useRef(null);
+  const keyboardLift = useRef(new Animated.Value(0)).current;
+  const rootWindowYRef = useRef(0);
+  const rootMeasuredHeightRef = useRef(0);
+  const measureRoot = useCallback(() => {
+    rootRef.current?.measureInWindow((_x, y, _w, h) => {
+      rootWindowYRef.current = y;
+      rootMeasuredHeightRef.current = h;
+    });
+  }, []);
+  const handleRootLayout = useCallback(_e => {
+    // measureInWindow gives the component's position relative to the window,
+    // which is what we need for keyboard overlap calculation. onLayout fires
+    // after the component mounts and whenever its size changes.
+    measureRoot();
+  }, [measureRoot]);
+  useEffect(() => {
+    if (!editable) return;
+    const showSub = Keyboard.addListener('keyboardDidShow', e => {
+      measureRoot();
+      if (!isEditing) return;
+      const kbHeight = e.endCoordinates.height;
+      const {
+        height: screenH
+      } = require('react-native').Dimensions.get('window');
+      const componentBottom = rootWindowYRef.current + rootMeasuredHeightRef.current;
+      const visibleBottom = screenH - kbHeight;
+      const overlap = componentBottom - visibleBottom + 12;
+      if (overlap > 0) {
+        Animated.timing(keyboardLift, {
+          toValue: -overlap,
+          duration: e.duration ?? 250,
+          useNativeDriver: true
+        }).start();
+      }
+    });
+    const hideSub = Keyboard.addListener('keyboardDidHide', () => {
+      Animated.timing(keyboardLift, {
+        toValue: 0,
+        duration: 150,
+        useNativeDriver: true
+      }).start();
+    });
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [editable, isEditing, keyboardLift, measureRoot]);
+
+  // Reset lift when editing ends
+  useEffect(() => {
+    if (!isEditing) {
+      keyboardLift.setValue(0);
+    }
+  }, [isEditing, keyboardLift]);
+  const handleBlur = useCallback(() => {
+    commitEdit();
+  }, [commitEdit]);
+  const handleSubmitEditing = useCallback(() => {
+    commitEdit();
+  }, [commitEdit]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: {
+      transform: [{
+        translateY: keyboardLift
+      }]
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      ref: rootRef,
+      onLayout: handleRootLayout,
+      children: /*#__PURE__*/_jsxs(Pressable, {
+        style: [containerStyle, style],
+        accessibilityRole: "text",
+        accessibilityLabel: undefined,
+        accessibilityHint: accessibilityHint,
+        onPress: handlePress,
+        disabled: !onPress && !editable,
+        ...rest,
+        children: [isNegative && /*#__PURE__*/_jsx(Text, {
+          style: [currencyTextStyle, negativeSignStyle],
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no",
+          children: "-"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [currencyTextStyle, currencyStyle],
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no",
+          children: resolvedCurrency
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center'
+          },
+          children: isEditing ? /*#__PURE__*/_jsx(TextInput, {
+            ref: inputRef,
+            value: editBuffer,
+            onChangeText: handleChangeText,
+            onBlur: handleBlur,
+            onSubmitEditing: handleSubmitEditing,
+            keyboardType: "decimal-pad",
+            returnKeyType: "done",
+            selectTextOnFocus: true,
+            style: [valueTextStyle, valueStyle, {
+              padding: 0,
+              margin: 0,
+              // On web a thin border helps the cursor appear precisely
+              ...(Platform.OS === 'web' ? {
+                outlineStyle: 'none'
+              } : {})
+            }],
+            accessibilityLabel: accessibilityLabel || 'Edit value'
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [valueTextStyle, valueStyle],
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no",
+              children: displayValue
+            }), focused && /*#__PURE__*/_jsx(Animated.View, {
+              style: {
+                opacity: cursorOpacity,
+                width: 2,
+                height: valueFontSize * 1.1,
+                backgroundColor: textColor,
+                marginLeft: 2
+              }
+            })]
+          })
+        })]
+      })
+    })
   });
 }
 export default MoneyValue;

package/lib/module/components/PdpCcCard/PdpCcCard.js

@@ -39,6 +39,9 @@ function PdpCcCard({
   media,
   title = 'Title',
   subtitle = 'Subtitle',
+  numberOfLines,
+  disableTruncation,
+  singleLine,
   metrics = DEFAULT_METRICS,
   buttonLabel = 'button',
   buttonIcon = 'ic_add_circle',
@@ -90,7 +93,10 @@ function PdpCcCard({
       title: title,
       subtitle: subtitle,
       textAlign: "Center",
-      modes: modes
+      modes: modes,
+      numberOfLines: numberOfLines,
+      disableTruncation: disableTruncation,
+      singleLine: singleLine
     }), metrics.length > 0 ? /*#__PURE__*/_jsx(View, {
       style: styles.metricsRow,
       children: metrics.map((metric, index) => /*#__PURE__*/_jsxs(React.Fragment, {

package/lib/module/components/Table/Table.js

@@ -1,16 +1,26 @@
 "use strict";
 
-import React from 'react';
+import React, { createContext, useContext } from 'react';
 import { View, Text, Pressable, ScrollView, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Carries the root `Table`'s `columnWidth` down to every cell so that, when it
+ * is set, all columns (header + body, data-driven or composed) share the same
+ * fixed width without each cell having to repeat the prop. Cells still honour
+ * an explicit `width` prop over this context value. `undefined` (the default,
+ * when no `Table` ancestor is present, or `columnWidth` is unset) leaves cells
+ * to flex — preserving the original behaviour.
+ */
+const TableContext = /*#__PURE__*/createContext(undefined);
 
 /* -------------------------------------------------------------------------------------------------
  * Shared types & token resolution
  * -----------------------------------------------------------------------------------------------*/
 
 /** Resolved styling for a header cell and a body cell, derived from design tokens. */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+
 const toWeight = w => typeof w === 'number' ? `${w}` : w;
 
 /**
@@ -88,6 +98,10 @@ function TableCell({
   style
 }) {
   const t = resolveTableTokens(modes);
+  // A cell's width resolves in priority order: an explicit `width` prop, then
+  // the root Table's `columnWidth` (via context), then fall back to flex.
+  const ctxColumnWidth = useContext(TableContext);
+  const effectiveWidth = width ?? ctxColumnWidth;
   return /*#__PURE__*/_jsx(View, {
     style: [{
       backgroundColor: t.cellBg,
@@ -99,8 +113,8 @@ function TableCell({
       borderColor: t.borderColor,
       borderBottomWidth: isLastRow ? 0 : t.borderSize,
       borderRightWidth: isLastColumn ? 0 : t.borderSize,
-      ...(width != null ? {
-        width
+      ...(effectiveWidth != null ? {
+        width: effectiveWidth
       } : {
         flex,
         minWidth: 0
@@ -128,6 +142,8 @@ function TableHeaderCell({
   style
 }) {
   const t = resolveTableTokens(modes);
+  const ctxColumnWidth = useContext(TableContext);
+  const effectiveWidth = width ?? ctxColumnWidth;
   return /*#__PURE__*/_jsx(View, {
     style: [{
       backgroundColor: t.headerBg,
@@ -136,8 +152,8 @@ function TableHeaderCell({
       justifyContent: alignToJustify(align),
       paddingHorizontal: t.headerPaddingH,
       paddingVertical: t.headerPaddingV,
-      ...(width != null ? {
-        width
+      ...(effectiveWidth != null ? {
+        width: effectiveWidth
       } : {
         flex,
         minWidth: 0
@@ -252,6 +268,7 @@ function Table({
   getRowKey,
   onRowPress,
   scrollable = false,
+  columnWidth,
   accessibilityLabel,
   modes = EMPTY_MODES,
   style
@@ -295,7 +312,10 @@ function Table({
     }, !scrollable && {
       width: '100%'
     }, style],
-    children: body
+    children: /*#__PURE__*/_jsx(TableContext.Provider, {
+      value: columnWidth,
+      children: body
+    })
   });
   if (scrollable) {
     return /*#__PURE__*/_jsx(ScrollView, {