react-native-system-ui 0.0.1 → 0.0.2

package/dist/es/cascader/Cascader.js

@@ -0,0 +1,460 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { FlatList, Pressable, Text, View, useWindowDimensions } from "react-native";
+import { Checked, Cross } from "react-native-system-icon";
+import { useControllableValue } from "../../hooks";
+import { isFunction, isNumber, isRenderable, isText } from "../../utils/validate";
+import Popup from "../popup";
+import Tabs from "../tabs";
+import { useCascaderTokens } from "./tokens";
+import { useCascaderExtend } from "./useCascaderExtend";
+import { resolveSelectedRows } from "./utils";
+const getFieldKeys = fieldNames => ({
+  textKey: fieldNames?.text ?? "text",
+  valueKey: fieldNames?.value ?? "value",
+  childrenKey: fieldNames?.children ?? "children"
+});
+const isSameValueArray = (a, b) => {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+};
+const Cascader = props => {
+  const {
+    tokensOverride,
+    options = [],
+    title: titleProp,
+    placeholder: placeholderProp,
+    activeColor: activeColorProp,
+    fieldNames,
+    optionRender,
+    showHeader: showHeaderProp,
+    closeable,
+    closeIcon,
+    onChange,
+    onClose,
+    onFinish,
+    onClickTab,
+    onTabChange,
+    swipeable: swipeableProp,
+    style,
+    testID,
+    children,
+    poppable: poppableProp,
+    visible: _visible,
+    defaultVisible: _defaultVisible,
+    onVisibleChange: _onVisibleChange,
+    closeOnClickOverlay: closeOnClickOverlayProp,
+    closeOnFinish: closeOnFinishProp,
+    popupPlacement: popupPlacementProp,
+    popupRound: popupRoundProp,
+    popupProps: popupPropsOverrides,
+    loadingText: loadingTextProp,
+    ...rest
+  } = props;
+  const tokens = useCascaderTokens(tokensOverride);
+  const title = titleProp ?? tokens.defaults.title;
+  const placeholder = placeholderProp ?? tokens.defaults.placeholder;
+  const activeColor = activeColorProp ?? tokens.colors.tabActive;
+  const showHeader = showHeaderProp ?? tokens.defaults.showHeader;
+  const swipeable = swipeableProp ?? tokens.defaults.swipeable;
+  const poppable = poppableProp ?? tokens.defaults.poppable;
+  const closeOnClickOverlay = closeOnClickOverlayProp ?? tokens.defaults.closeOnClickOverlay;
+  const closeOnFinish = closeOnFinishProp ?? tokens.defaults.closeOnFinish;
+  const popupPlacement = popupPlacementProp ?? tokens.defaults.popupPlacement;
+  const popupRound = popupRoundProp ?? tokens.defaults.popupRound;
+  const loadingText = loadingTextProp ?? tokens.defaults.loadingText;
+  const [value, setValue] = useControllableValue(props, {
+    defaultValue: [],
+    trigger: "onChange"
+  });
+  const keys = useMemo(() => getFieldKeys(fieldNames), [fieldNames]);
+  const cascaderValue = Array.isArray(value) ? value : [];
+  const [panelValue, setPanelValue] = useState(cascaderValue);
+  const resolvedCloseable = closeable ?? tokens.defaults.closeable;
+  const [popupVisible, setPopupVisible] = useControllableValue(props, {
+    defaultValue: false,
+    valuePropName: "visible",
+    defaultValuePropName: "defaultVisible",
+    trigger: "onVisibleChange"
+  });
+  const currentValue = poppable ? panelValue : cascaderValue;
+  const {
+    tabs,
+    items,
+    depth
+  } = useCascaderExtend(options, keys, currentValue);
+  const {
+    width: windowWidth
+  } = useWindowDimensions();
+  const [measuredWidth, setMeasuredWidth] = useState(0);
+  const handleTabsLayout = useCallback(e => {
+    const width = e.nativeEvent.layout.width;
+    if (!width) return;
+    setMeasuredWidth(prev => prev === width ? prev : width);
+  }, []);
+  const confirmedRows = useMemo(() => resolveSelectedRows(options, keys, cascaderValue), [cascaderValue, keys, options]);
+  const [activeTab, setActiveTab] = useState(0);
+  useEffect(() => {
+    const currentLength = Array.isArray(currentValue) ? currentValue.length : 0;
+    let tabIndex = currentLength;
+    if (tabIndex >= depth) tabIndex = Math.max(depth - 1, 0);
+    setActiveTab(prev => prev === tabIndex ? prev : tabIndex);
+  }, [currentValue.length, depth]);
+  useEffect(() => {
+    if (!poppable) {
+      setPanelValue(prev => isSameValueArray(prev, cascaderValue) ? prev : cascaderValue);
+      return;
+    }
+    if (!popupVisible) {
+      setPanelValue(prev => isSameValueArray(prev, cascaderValue) ? prev : cascaderValue);
+    }
+  }, [cascaderValue, poppable, popupVisible]);
+  const openPopup = useCallback(() => {
+    if (!poppable || popupVisible) return;
+    setPanelValue(prev => isSameValueArray(prev, cascaderValue) ? prev : cascaderValue);
+    setPopupVisible(true);
+  }, [cascaderValue, poppable, popupVisible, setPopupVisible]);
+  const closePopup = useCallback(notify => {
+    if (!poppable || !popupVisible) return;
+    setPopupVisible(false);
+    if (notify) onClose?.();
+  }, [onClose, poppable, popupVisible, setPopupVisible]);
+  const togglePopup = useCallback(() => {
+    if (!poppable) return;
+    popupVisible ? closePopup(true) : openPopup();
+  }, [closePopup, openPopup, poppable, popupVisible]);
+  const isRenderProp = isFunction(children);
+  const renderProp = isRenderProp ? children : null;
+  const handleClickTab = useCallback(event => {
+    const index = isNumber(event.index) ? event.index : Number(event.name);
+    if (Number.isNaN(index)) return;
+    const titleNode = items[index]?.[keys.textKey];
+    const titleText = isText(titleNode) ? String(titleNode) : placeholder;
+    onClickTab?.(index, titleText);
+  }, [items, keys.textKey, onClickTab, placeholder]);
+  const handleTabChange = useCallback((tabValue, indexFromEvent) => {
+    const index = isNumber(indexFromEvent) ? indexFromEvent : Number(tabValue);
+    if (Number.isNaN(index)) return;
+    setActiveTab(index);
+    onTabChange?.(index);
+  }, [onTabChange]);
+  const handleSelect = useCallback((option, tabIndex) => {
+    if (option.disabled) return;
+    const optionValue = option[keys.valueKey];
+    if (optionValue === undefined || optionValue === null) return;
+    const base = (poppable ? panelValue : cascaderValue).slice(0, tabIndex);
+    const nextValue = [...base, optionValue];
+    const rows = resolveSelectedRows(options, keys, nextValue);
+    const childrenOptions = option[keys.childrenKey] ?? [];
+    const hasChildrenProp = Object.prototype.hasOwnProperty.call(option, keys.childrenKey);
+    const hasChildren = childrenOptions.length > 0;
+    const asyncBranch = hasChildrenProp && !hasChildren;
+    const reachDepth = nextValue.length >= depth;
+    const isLeaf = !hasChildren && !asyncBranch;
+    if (poppable) {
+      setPanelValue(nextValue);
+      onChange?.(nextValue, rows);
+    } else {
+      setValue(nextValue, rows);
+    }
+    if (isLeaf || reachDepth) {
+      if (poppable) {
+        setValue(nextValue, rows);
+        if (closeOnFinish) closePopup(true);
+      }
+      onFinish?.(nextValue, rows);
+    }
+  }, [cascaderValue, closeOnFinish, closePopup, depth, keys, onChange, onFinish, options, panelValue, poppable, setValue]);
+  const getEmptyText = useCallback(tabIndex => {
+    if (tabIndex <= 0) return placeholder;
+    const parent = items[tabIndex - 1];
+    if (!parent) return placeholder;
+    const hasChildrenProp = Object.prototype.hasOwnProperty.call(parent, keys.childrenKey);
+    if (!hasChildrenProp) return placeholder;
+    const children = parent[keys.childrenKey] ?? [];
+    const asyncBranch = children.length === 0 && currentValue.length === tabIndex;
+    return asyncBranch ? loadingText : placeholder;
+  }, [currentValue.length, items, keys.childrenKey, loadingText, placeholder]);
+  const renderTabs = () => {
+    if (!tabs.length) {
+      return /*#__PURE__*/React.createElement(CascaderOptionList, {
+        optionList: [],
+        tabIndex: 0,
+        selectedValue: currentValue[0],
+        activeColor: activeColor,
+        keys: keys,
+        optionRender: optionRender,
+        onSelect: handleSelect,
+        tokens: tokens,
+        emptyText: getEmptyText(0)
+      });
+    }
+    const swipeableEnabled = !!swipeable;
+    const resolvedTabsWidth = measuredWidth || windowWidth || undefined;
+    const tabBarStyle = {
+      height: tokens.sizing.headerHeight,
+      paddingHorizontal: tokens.spacing.tabNavPaddingHorizontal,
+      paddingVertical: tokens.spacing.tabNavPaddingVertical,
+      backgroundColor: tokens.colors.background
+    };
+    return /*#__PURE__*/React.createElement(View, {
+      style: tokens.layout.tabsWrapper,
+      onLayout: handleTabsLayout
+    }, /*#__PURE__*/React.createElement(Tabs, {
+      style: resolvedTabsWidth ? {
+        width: resolvedTabsWidth
+      } : undefined,
+      active: activeTab,
+      onChange: handleTabChange,
+      onClickTab: handleClickTab,
+      align: "center",
+      swipeable: swipeableEnabled,
+      swipeThreshold: 0,
+      scrollable: true,
+      animated: true,
+      duration: 300,
+      color: activeColor,
+      lineHeight: tokens.sizing.indicatorHeight,
+      titleActiveColor: tokens.colors.tabText,
+      titleInactiveColor: tokens.colors.tabInactive,
+      tabBarStyle: tabBarStyle,
+      tabStyle: [tokens.layout.tabsItem, {
+        paddingHorizontal: tokens.spacing.tabPaddingHorizontal
+      }],
+      titleStyle: [tokens.layout.tabsTitle, {
+        fontSize: tokens.typography.tabsTitleSize
+      }],
+      contentStyle: !swipeableEnabled ? tokens.layout.tabsContentStatic : undefined
+    }, tabs.map((optionList, index) => {
+      const selectedOption = items[index];
+      const labelValue = selectedOption?.[keys.textKey];
+      const labelText = isText(labelValue) ? String(labelValue) : "";
+      const unselected = !labelText;
+      const titleNode = _active => /*#__PURE__*/React.createElement(Text, {
+        style: [tokens.layout.tabTitleNode, {
+          color: unselected ? tokens.colors.tabInactive : tokens.colors.tabText,
+          fontWeight: unselected ? tokens.typography.tabTitlePlaceholderWeight : tokens.typography.tabTitleWeight
+        }]
+      }, unselected ? placeholder : labelText);
+      return /*#__PURE__*/React.createElement(Tabs.TabPane, {
+        key: index,
+        name: index,
+        title: titleNode
+      }, /*#__PURE__*/React.createElement(CascaderOptionList, {
+        optionList: optionList,
+        tabIndex: index,
+        selectedValue: currentValue[index],
+        activeColor: activeColor,
+        keys: keys,
+        optionRender: optionRender,
+        onSelect: handleSelect,
+        tokens: tokens,
+        emptyText: getEmptyText(index)
+      }));
+    })));
+  };
+  const inlineChildren = !poppable && !isRenderProp ? children : null;
+  const content = /*#__PURE__*/React.createElement(View, _extends({
+    testID: testID,
+    style: [tokens.layout.container, {
+      backgroundColor: tokens.colors.background
+    }, style]
+  }, rest), showHeader ? /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.header, {
+      height: tokens.sizing.headerHeight,
+      paddingHorizontal: tokens.spacing.headerPaddingHorizontal
+    }]
+  }, isText(title) ? /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.title, {
+      color: tokens.colors.headerText,
+      fontSize: tokens.typography.titleSize,
+      fontWeight: tokens.typography.titleWeight
+    }]
+  }, title) : title, resolvedCloseable ? /*#__PURE__*/React.createElement(Pressable, {
+    hitSlop: 8,
+    onPress: () => {
+      if (poppable) {
+        closePopup(true);
+      } else {
+        onClose?.();
+      }
+    },
+    style: [tokens.layout.closeButton, {
+      marginLeft: tokens.spacing.closeButtonMarginLeft
+    }],
+    accessibilityRole: "button",
+    accessibilityLabel: "\u5173\u95ED"
+  }, closeIcon ?? (state => /*#__PURE__*/React.createElement(Cross, {
+    size: tokens.sizing.closeIconSize,
+    fill: state.pressed ? tokens.colors.closeIconActive : tokens.colors.closeIcon,
+    color: state.pressed ? tokens.colors.closeIconActive : tokens.colors.closeIcon
+  }))) : null) : null, renderTabs(), inlineChildren ? /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.inlineChildren, {
+      paddingVertical: tokens.spacing.inlineChildrenPaddingVertical,
+      paddingHorizontal: tokens.spacing.headerPaddingHorizontal
+    }]
+  }, inlineChildren) : null);
+  if (!poppable) return content;
+  const {
+    closeOnOverlayPress: overrideCloseOnOverlayPress,
+    overlay: popupOverlay,
+    onOpen: popupOnOpen,
+    onOpened: popupOnOpened,
+    onClose: popupOnClose,
+    onClosed: popupOnClosed,
+    ...popupRestProps
+  } = popupPropsOverrides ?? {};
+  const resolvedOverlay = popupOverlay ?? true;
+  const resolvedCloseOnOverlayPress = overrideCloseOnOverlayPress ?? closeOnClickOverlay;
+  const cascaderActions = useMemo(() => ({
+    open: openPopup,
+    close: () => closePopup(true),
+    toggle: togglePopup
+  }), [closePopup, openPopup, togglePopup]);
+  const enhanceTriggerNode = useCallback(node => {
+    if (! /*#__PURE__*/React.isValidElement(node)) return node;
+    const props = node.props;
+    const handlePress = () => {
+      props.onPress?.();
+      props.onClick?.();
+      openPopup();
+    };
+    return /*#__PURE__*/React.cloneElement(node, {
+      onPress: handlePress,
+      onClick: handlePress
+    });
+  }, [openPopup]);
+  const triggerNode = renderProp ? renderProp(cascaderValue, confirmedRows, cascaderActions) : isRenderProp ? null : children || null;
+  const resolvedTriggerNode = enhanceTriggerNode(triggerNode);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, resolvedTriggerNode, /*#__PURE__*/React.createElement(Popup, _extends({
+    visible: popupVisible,
+    placement: popupPlacement,
+    round: popupRound,
+    closeOnOverlayPress: resolvedCloseOnOverlayPress,
+    overlay: resolvedOverlay,
+    safeAreaInsetTop: popupRestProps?.safeAreaInsetTop !== undefined ? popupRestProps.safeAreaInsetTop : showHeader && resolvedCloseable,
+    safeAreaInsetBottom: popupRestProps?.safeAreaInsetBottom !== undefined ? popupRestProps.safeAreaInsetBottom : popupPlacement === 'bottom',
+    onOpen: popupOnOpen,
+    onOpened: popupOnOpened,
+    onClose: () => {
+      popupOnClose?.();
+      closePopup(true);
+    },
+    onClosed: popupOnClosed
+  }, popupRestProps, {
+    style: {
+      paddingLeft: 0,
+      paddingRight: 0
+    }
+  }), content));
+};
+const CascaderOptionItem = /*#__PURE__*/React.memo(({
+  option,
+  tabIndex,
+  selected,
+  activeColor,
+  keys,
+  optionRender,
+  onSelect,
+  tokens
+}) => {
+  const optionValue = option[keys.valueKey];
+  const label = option[keys.textKey];
+  const disabled = !!option.disabled;
+  const baseColor = option.color ?? tokens.colors.optionText;
+  const textColor = disabled ? tokens.colors.optionDisabled : selected ? option.color ?? activeColor : baseColor;
+  const content = optionRender ? optionRender({
+    option,
+    selected
+  }) : isText(label) ? /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.optionText, {
+      color: textColor,
+      fontSize: tokens.typography.optionTextSize
+    }, selected && {
+      fontWeight: tokens.typography.optionTextActiveWeight
+    }]
+  }, label) : isRenderable(label) ? label : null;
+  return /*#__PURE__*/React.createElement(Pressable, {
+    testID: `cascader-option-${tabIndex}-${String(optionValue)}`,
+    style: ({
+      pressed
+    }) => [tokens.layout.option, {
+      minHeight: tokens.sizing.optionMinHeight,
+      paddingVertical: tokens.spacing.optionPaddingVertical,
+      paddingHorizontal: tokens.spacing.optionPaddingHorizontal
+    }, pressed && !disabled && {
+      backgroundColor: tokens.colors.optionActiveBackground
+    }],
+    onPress: () => onSelect(option, tabIndex),
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.optionContent
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.optionLabel, {
+      marginRight: tokens.spacing.optionLabelMarginRight
+    }]
+  }, content), selected ? /*#__PURE__*/React.createElement(Checked, {
+    size: tokens.sizing.selectedIconSize,
+    fill: activeColor,
+    color: activeColor
+  }) : null));
+});
+const CascaderOptionList = /*#__PURE__*/React.memo(({
+  optionList,
+  tabIndex,
+  selectedValue,
+  activeColor,
+  keys,
+  optionRender,
+  onSelect,
+  tokens,
+  emptyText
+}) => {
+  if (!optionList.length) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: [tokens.layout.optionList, {
+        height: tokens.sizing.optionListHeight
+      }]
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [tokens.layout.empty, {
+        color: tokens.colors.placeholder,
+        paddingVertical: tokens.spacing.emptyPaddingVertical,
+        fontSize: tokens.typography.emptyTextSize
+      }]
+    }, emptyText));
+  }
+  const renderItem = useCallback(({
+    item
+  }) => /*#__PURE__*/React.createElement(CascaderOptionItem, {
+    option: item,
+    tabIndex: tabIndex,
+    selected: selectedValue === item[keys.valueKey],
+    activeColor: activeColor,
+    keys: keys,
+    optionRender: optionRender,
+    onSelect: onSelect,
+    tokens: tokens
+  }), [activeColor, keys, onSelect, optionRender, selectedValue, tabIndex, tokens]);
+  const keyExtractor = useCallback(item => String(item[keys.valueKey]), [keys.valueKey]);
+  return /*#__PURE__*/React.createElement(FlatList, {
+    data: optionList,
+    style: [tokens.layout.optionList, {
+      height: tokens.sizing.optionListHeight
+    }],
+    contentContainerStyle: {
+      paddingTop: tokens.spacing.optionListPaddingTop,
+      paddingBottom: tokens.spacing.optionListPaddingBottom
+    },
+    showsVerticalScrollIndicator: false,
+    renderItem: renderItem,
+    keyExtractor: keyExtractor,
+    removeClippedSubviews: true,
+    initialNumToRender: 20,
+    windowSize: 5
+  });
+});
+export default Cascader;

package/dist/es/cascader/useCascaderExtend.js

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+export const useCascaderExtend = (options = [], keys, value) => {
+  const depth = useMemo(() => {
+    let maxDepth = 1;
+    const traverse = (opts, level) => {
+      if (!opts || !opts.length) return;
+      if (level > maxDepth) maxDepth = level;
+      const next = level + 1;
+      opts.forEach(option => {
+        const hasChildrenProp = Object.prototype.hasOwnProperty.call(option, keys.childrenKey);
+        if (hasChildrenProp && next > maxDepth) maxDepth = next;
+        const children = option[keys.childrenKey];
+        if (children && children.length) traverse(children, next);
+      });
+    };
+    traverse(options, 1);
+    return maxDepth;
+  }, [keys.childrenKey, options]);
+  const tabs = useMemo(() => {
+    if (!value || !value.length) return [options];
+    return value.reduce((acc, val, index) => {
+      if (val == null) return acc;
+      const current = acc[index];
+      if (!current) return acc;
+      const next = current.find(option => option[keys.valueKey] === value[index]);
+      const children = next?.[keys.childrenKey];
+      if (children) acc.push(children);
+      return acc;
+    }, [options]);
+  }, [keys.childrenKey, keys.valueKey, options, value]);
+  const items = useMemo(() => {
+    if (!value || !value.length) return [];
+    return value.map((val, index) => tabs[index]?.find(option => option[keys.valueKey] === val));
+  }, [keys.valueKey, tabs, value]);
+  return {
+    tabs,
+    items,
+    depth
+  };
+};

package/dist/es/cell/Cell.js

@@ -0,0 +1,166 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useContext } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { Arrow } from 'react-native-system-icon';
+import { useAriaPress, useHairline } from '../../hooks';
+import { isRenderable, isText } from '../../utils';
+import { CellGroupContext } from './CellContext';
+import { useCellTokens } from './tokens';
+const TextOrView = ({
+  children,
+  textStyle,
+  viewStyle,
+  numberOfLines
+}) => {
+  if (isText(children)) {
+    return /*#__PURE__*/React.createElement(Text, {
+      style: textStyle,
+      numberOfLines: numberOfLines
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: viewStyle
+  }, children);
+};
+export const Cell = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    title,
+    value,
+    label,
+    extra,
+    icon,
+    rightIcon,
+    border: borderProp,
+    clickable,
+    isLink,
+    required,
+    center,
+    size: sizeProp,
+    arrowDirection: arrowDirectionProp,
+    tokensOverride,
+    children,
+    style,
+    titleStyle,
+    valueStyle,
+    labelStyle,
+    contentStyle,
+    onPress,
+    disabled,
+    android_ripple,
+    ...rest
+  } = props;
+  const tokens = useCellTokens(tokensOverride);
+  const group = useContext(CellGroupContext);
+  const border = borderProp ?? tokens.defaults.border;
+  const size = sizeProp ?? tokens.defaults.size;
+  const arrowDirection = arrowDirectionProp ?? tokens.defaults.arrowDirection;
+  const lineHeight = tokens.typography.lineHeight;
+  const hasTitle = isRenderable(title);
+  const hasValue = isRenderable(value);
+  const hasLabel = isRenderable(label);
+  const hasExtra = isRenderable(extra);
+  const hasChildren = isRenderable(children);
+  const hasIcon = isRenderable(icon);
+  const hasRightIcon = isRenderable(rightIcon);
+  const onlyValue = !hasTitle && !hasChildren;
+  const showBorder = border && group.border && !group.isLast;
+  const showArrow = !!isLink || !!clickable;
+  const isInteractive = !disabled && (clickable || !!onPress || !!rest.onLongPress || !!rest.onPressIn || !!rest.onPressOut);
+  const containerStyles = [size === 'large' ? tokens.layout.containerLarge : tokens.layout.container, center && tokens.layout.center, style];
+  const hairline = useHairline({
+    show: showBorder,
+    containerStyle: containerStyles,
+    color: tokens.colors.border,
+    width: tokens.borders.width,
+    defaultPaddingHorizontal: tokens.sizing.paddingHorizontal
+  });
+  const customContentStyle = [tokens.layout.customContent, {
+    justifyContent: center ? 'center' : 'flex-start'
+  }, contentStyle];
+  const bodyContent = /*#__PURE__*/React.createElement(React.Fragment, null, hasIcon && /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.iconWrapper, {
+      marginRight: tokens.spacing.iconGap,
+      minHeight: tokens.sizing.iconSize,
+      minWidth: tokens.sizing.iconSize
+    }]
+  }, icon), /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.body
+  }, (hasTitle || required) && /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.titleRow, {
+      minHeight: lineHeight
+    }]
+  }, required && /*#__PURE__*/React.createElement(Text, {
+    style: {
+      color: tokens.colors.required,
+      marginRight: tokens.spacing.iconGap / 2
+    }
+  }, "*"), hasTitle && /*#__PURE__*/React.createElement(TextOrView, {
+    textStyle: [{
+      color: tokens.colors.title,
+      fontSize: size === 'large' ? tokens.typography.largeTitleSize : tokens.typography.titleSize,
+      fontWeight: tokens.typography.titleWeight
+    }, titleStyle],
+    viewStyle: titleStyle,
+    numberOfLines: 1
+  }, title)), hasLabel && /*#__PURE__*/React.createElement(TextOrView, {
+    textStyle: [{
+      marginTop: tokens.spacing.labelMarginTop,
+      color: tokens.colors.label,
+      fontSize: size === 'large' ? tokens.typography.largeLabelSize : tokens.typography.labelSize
+    }, labelStyle],
+    viewStyle: [{
+      marginTop: tokens.spacing.labelMarginTop
+    }, labelStyle],
+    numberOfLines: 2
+  }, label)), /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.valueContainer, {
+      minHeight: lineHeight,
+      marginLeft: tokens.spacing.valueGap
+    }, !center && onlyValue && tokens.layout.valueOnlyContainer, center && tokens.layout.valueCenter]
+  }, hasValue ? /*#__PURE__*/React.createElement(TextOrView, {
+    textStyle: [tokens.layout.value, onlyValue && tokens.layout.valueOnly, {
+      color: tokens.colors.value,
+      fontSize: size === 'large' ? tokens.typography.largeValueSize : tokens.typography.valueSize
+    }, valueStyle],
+    viewStyle: customContentStyle,
+    numberOfLines: 1
+  }, value) : hasChildren ? /*#__PURE__*/React.createElement(View, {
+    style: customContentStyle
+  }, children) : null), hasExtra && /*#__PURE__*/React.createElement(TextOrView, {
+    textStyle: {
+      marginLeft: tokens.spacing.extraGap,
+      color: tokens.colors.value,
+      fontSize: size === 'large' ? tokens.typography.largeValueSize : tokens.typography.valueSize
+    },
+    viewStyle: {
+      marginLeft: tokens.spacing.extraGap
+    }
+  }, extra), hasRightIcon ? rightIcon : showArrow ? /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.rightIconWrapper, tokens.layout.arrowTransforms[arrowDirection]]
+  }, /*#__PURE__*/React.createElement(Arrow, {
+    size: tokens.sizing.arrowSize,
+    fill: tokens.colors.arrow
+  })) : null);
+  const {
+    interactionProps,
+    states
+  } = useAriaPress({
+    disabled: !isInteractive,
+    onPress: onPress ?? undefined
+  });
+  const Component = isInteractive ? Pressable : View;
+  const componentProps = isInteractive ? {
+    android_ripple: android_ripple ?? {
+      color: tokens.colors.ripple
+    },
+    accessibilityRole: 'button',
+    ...interactionProps
+  } : {};
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    style: [containerStyles, isInteractive && states.pressed && {
+      opacity: tokens.defaults.activeOpacity
+    }]
+  }, componentProps, rest), bodyContent, hairline);
+});
+Cell.displayName = 'Cell';