@webority/mobile-ui 0.0.0-stage → 0.0.34

package/lib/commonjs/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.KeyboardAwareScrollView = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _index = require("../../theme/index.js");
+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); }
+/**
+ * A ScrollView that keeps the focused input visible above the keyboard — no
+ * native dependency. On keyboard show it pads the content by the keyboard
+ * height and scrolls the focused TextInput so its bottom sits `extraScrollHeight`
+ * above the keyboard, but only when it would otherwise be covered (so already-
+ * visible fields don't jump). The classic measure-and-scroll approach, in pure RN.
+ */
+const KeyboardAwareScrollView = exports.KeyboardAwareScrollView = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    children,
+    extraScrollHeight = 24,
+    disabled = false,
+    safeAreaEdges = ['bottom'],
+    refreshing = false,
+    onRefresh,
+    keyboardOpeningTime = 250,
+    viewIsInsideTabBar = false,
+    resetScrollToCoords,
+    contentContainerStyle,
+    refreshControl,
+    onScroll,
+    onLayout,
+    ...rest
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const scrollRef = (0, _react.useRef)(null);
+  const scrollYRef = (0, _react.useRef)(0);
+  const viewportHeightRef = (0, _react.useRef)(0);
+  const [keyboardHeight, setKeyboardHeight] = (0, _react.useState)(0);
+  const setRefs = (0, _react.useCallback)(node => {
+    scrollRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
+  const scrollFocusedIntoView = (0, _react.useCallback)(kbHeight => {
+    const scroll = scrollRef.current;
+    const stateApi = _reactNative.TextInput?.State;
+    const focused = stateApi?.currentlyFocusedInput?.();
+    if (!scroll || !focused?.measureLayout) {
+      return;
+    }
+    focused.measureLayout(scroll, (_left, top, _width, height) => {
+      const scrollY = scrollYRef.current;
+      const viewportH = viewportHeightRef.current;
+      if (viewportH <= 0) {
+        return;
+      }
+      const keyboardTop = viewportH - kbHeight - extraScrollHeight;
+      const fieldBottomInViewport = top - scrollY + height;
+      if (fieldBottomInViewport > keyboardTop) {
+        const delta = fieldBottomInViewport - keyboardTop;
+        scroll.scrollTo({
+          y: scrollY + delta,
+          animated: true
+        });
+      }
+    }, () => undefined);
+  }, [extraScrollHeight]);
+  (0, _react.useEffect)(() => {
+    if (disabled) {
+      return undefined;
+    }
+    // iOS exposes the will* events (smoother); Android only fires did*.
+    const showEvent = _reactNative.Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = _reactNative.Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    let timeoutId;
+    const showSub = _reactNative.Keyboard.addListener(showEvent, e => {
+      const height = e.endCoordinates?.height ?? 0;
+      setKeyboardHeight(height);
+      // Wait for the keyboard's own animation to (roughly) finish before
+      // scrolling, so we measure against the settled viewport. Tracked so
+      // it can be cancelled on unmount or a second show before it fires.
+      if (timeoutId != null) {
+        clearTimeout(timeoutId);
+      }
+      timeoutId = setTimeout(() => scrollFocusedIntoView(height), keyboardOpeningTime);
+    });
+    const hideSub = _reactNative.Keyboard.addListener(hideEvent, () => {
+      setKeyboardHeight(0);
+      if (resetScrollToCoords) {
+        scrollRef.current?.scrollTo({
+          ...resetScrollToCoords,
+          animated: true
+        });
+      }
+    });
+    return () => {
+      if (timeoutId != null) {
+        clearTimeout(timeoutId);
+      }
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [disabled, scrollFocusedIntoView, keyboardOpeningTime, resetScrollToCoords]);
+  const handleLayout = (0, _react.useCallback)(e => {
+    viewportHeightRef.current = e.nativeEvent.layout.height;
+    onLayout?.(e);
+  }, [onLayout]);
+  const handleScroll = (0, _react.useCallback)(e => {
+    scrollYRef.current = e.nativeEvent.contentOffset.y;
+    onScroll?.(e);
+  }, [onScroll]);
+
+  // Borrowed from the spacing scale because the theme has no tab-bar height
+  // token, and 3xl (48) is the closest honest value: a react-navigation bottom
+  // tab bar is 49pt on iOS and 56dp on Android before safe-area padding. If a
+  // dedicated token is ever added, this should use it rather than a scale step
+  // that happens to be about right.
+  const tabBarInset = viewIsInsideTabBar ? theme.spacing['3xl'] : 0;
+  const includesBottomSafeArea = safeAreaEdges.includes('bottom');
+  // Once the keyboard is up it already extends to the physical bottom of the
+  // screen (past the home-indicator safe area), so adding the bottom inset
+  // on top of the keyboard height would double-count that strip of space.
+  const bottomInset = keyboardHeight > 0 ? keyboardHeight : includesBottomSafeArea ? insets.bottom : 0;
+  const safeAreaPadding = {
+    paddingBottom: bottomInset + tabBarInset,
+    ...(safeAreaEdges.includes('top') ? {
+      paddingTop: insets.top
+    } : null),
+    ...(safeAreaEdges.includes('left') ? {
+      paddingLeft: insets.left
+    } : null),
+    ...(safeAreaEdges.includes('right') ? {
+      paddingRight: insets.right
+    } : null)
+  };
+  const resolvedRefreshControl = refreshControl ?? (onRefresh ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.RefreshControl, {
+    refreshing: refreshing,
+    onRefresh: onRefresh,
+    tintColor: theme.colors.primary,
+    colors: [theme.colors.primary]
+  }) : undefined);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+    ref: setRefs,
+    onScroll: handleScroll,
+    onLayout: handleLayout,
+    scrollEventThrottle: 16,
+    keyboardShouldPersistTaps: "handled"
+    // Scrolling must not close the keyboard: a user filling a long form
+    // scrolls to check or reach the next field while typing. Pass
+    // keyboardDismissMode through the spread props to opt back in.
+    ,
+    keyboardDismissMode: "none",
+    contentContainerStyle: [contentContainerStyle, safeAreaPadding],
+    refreshControl: resolvedRefreshControl,
+    ...rest,
+    children: children
+  });
+});
+KeyboardAwareScrollView.displayName = 'KeyboardAwareScrollView';
+var _default = exports.default = KeyboardAwareScrollView;
+//# sourceMappingURL=KeyboardAwareScrollView.js.map

package/lib/commonjs/components/KeyboardAwareScrollView/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "KeyboardAwareScrollView", {
+  enumerable: true,
+  get: function () {
+    return _KeyboardAwareScrollView.KeyboardAwareScrollView;
+  }
+});
+var _KeyboardAwareScrollView = require("./KeyboardAwareScrollView.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/KeyboardToolbar/KeyboardToolbar.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.KeyboardToolbar = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _FormContext = require("../../form/FormContext.js");
+var _index = require("../../theme/index.js");
+var _index2 = require("../Text/index.js");
+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 NavButton = ({
+  label,
+  accessibilityLabel,
+  onPress,
+  theme
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+  onPress: onPress,
+  disabled: !onPress,
+  accessibilityRole: "button",
+  accessibilityLabel: accessibilityLabel,
+  accessibilityState: {
+    disabled: !onPress
+  },
+  hitSlop: 8,
+  style: {
+    paddingHorizontal: theme.spacing.sm,
+    opacity: onPress ? 1 : 0.4
+  },
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+    variant: "h2",
+    color: onPress ? 'link' : 'disabled',
+    children: label
+  })
+});
+
+/**
+ * An accessory bar pinned just above the keyboard — pure RN, no native
+ * dependency. Shows a Done (dismiss) button and optional prev/next chevrons
+ * that, inside a `<Form>`, walk the registered field order. Render it at the
+ * screen root (a `flex: 1` ancestor) so its `bottom: keyboardHeight` offset
+ * lands it on top of the keyboard. Renders nothing while the keyboard is hidden.
+ */
+const KeyboardToolbar = props => {
+  const {
+    doneLabel = 'Done',
+    showNavigation,
+    onDone,
+    onNext,
+    onPrev,
+    leading,
+    style,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const form = (0, _FormContext.useOptionalFormContext)();
+  const [keyboardHeight, setKeyboardHeight] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    const showEvent = _reactNative.Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = _reactNative.Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const showSub = _reactNative.Keyboard.addListener(showEvent, e => setKeyboardHeight(e.endCoordinates?.height ?? 0));
+    const hideSub = _reactNative.Keyboard.addListener(hideEvent, () => setKeyboardHeight(0));
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
+  if (keyboardHeight <= 0) {
+    return null;
+  }
+  const handleDone = onDone ?? (() => _reactNative.Keyboard.dismiss());
+  const handlePrev = onPrev ?? form?.focusPrev;
+  const handleNext = onNext ?? form?.focusNext;
+  const navEnabled = showNavigation ?? Boolean(handlePrev || handleNext);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: testID,
+    accessibilityRole: "toolbar",
+    style: [styles.bar, {
+      bottom: keyboardHeight,
+      backgroundColor: theme.colors.background.elevated,
+      borderTopColor: theme.colors.border.primary,
+      paddingHorizontal: theme.spacing.md
+    }, style],
+    children: [navEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.nav,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NavButton, {
+        label: "\u2039",
+        accessibilityLabel: "Previous field",
+        onPress: handlePrev,
+        theme: theme
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NavButton, {
+        label: "\u203A",
+        accessibilityLabel: "Next field",
+        onPress: handleNext,
+        theme: theme
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {}), leading, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.spacer
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      onPress: handleDone,
+      accessibilityRole: "button",
+      accessibilityLabel: doneLabel,
+      hitSlop: 8,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+        variant: "body",
+        weight: "semibold",
+        color: "link",
+        children: doneLabel
+      })
+    })]
+  });
+};
+exports.KeyboardToolbar = KeyboardToolbar;
+const styles = _reactNative.StyleSheet.create({
+  bar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: 44,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderTopWidth: _reactNative.StyleSheet.hairlineWidth
+  },
+  nav: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  spacer: {
+    flex: 1
+  }
+});
+var _default = exports.default = KeyboardToolbar;
+//# sourceMappingURL=KeyboardToolbar.js.map

package/lib/commonjs/components/KeyboardToolbar/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "KeyboardToolbar", {
+  enumerable: true,
+  get: function () {
+    return _KeyboardToolbar.KeyboardToolbar;
+  }
+});
+var _KeyboardToolbar = require("./KeyboardToolbar.js");
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,344 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ListItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _useFlickGuard = require("../../hooks/useFlickGuard.js");
+var _usePressAnimation = require("../../hooks/usePressAnimation.js");
+var _index = require("../../theme/index.js");
+var _hapticUtils = require("../../utils/hapticUtils.js");
+var _defaultIcons = require("../AppIcon/defaultIcons.js");
+var _index2 = require("../Skeleton/index.js");
+var _index3 = require("../Swipeable/index.js");
+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 SIZE_FALLBACK = {
+  sm: {
+    paddingVertical: 'sm',
+    titleFontSize: 'sm',
+    subtitleFontSize: 'xs',
+    minHeight: 44
+  },
+  md: {
+    paddingVertical: 'md',
+    titleFontSize: 'base',
+    subtitleFontSize: 'sm',
+    minHeight: 56
+  },
+  lg: {
+    paddingVertical: 'lg',
+    titleFontSize: 'lg',
+    subtitleFontSize: 'sm',
+    minHeight: 72
+  }
+};
+const sizeFor = (theme, size) => {
+  const tokens = {
+    ...SIZE_FALLBACK[size],
+    ...(theme.components.listItem?.[size] ?? {})
+  };
+  return {
+    paddingVertical: theme.spacing[tokens.paddingVertical],
+    titleSize: theme.typography.fontSize[tokens.titleFontSize],
+    subtitleSize: theme.typography.fontSize[tokens.subtitleFontSize],
+    minHeight: tokens.minHeight
+  };
+};
+
+/** The trailing "goes somewhere" indicator: the icon set's line chevron. */
+const Chevron = ({
+  color
+}) => {
+  const theme = (0, _index.useTheme)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (theme.icons?.chevronRight ?? _defaultIcons.defaultIcons.chevronRight)({
+      size: 20,
+      color
+    })
+  });
+};
+const ListItem = exports.ListItem = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    title,
+    loading = false,
+    subtitle,
+    description,
+    left,
+    right,
+    onPress,
+    haptic,
+    selected = false,
+    disabled = false,
+    size = 'md',
+    divider = false,
+    chevron = false,
+    leftActions,
+    rightActions,
+    accessibilityLabel,
+    accessibilityHint,
+    style,
+    containerStyle,
+    titleStyle,
+    subtitleStyle,
+    descriptionStyle,
+    leftSlotStyle,
+    rightSlotStyle,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const sz = (0, _react.useMemo)(() => sizeFor(theme, size), [theme, size]);
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const isInteractive = !!onPress && !disabled;
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = (0, _usePressAnimation.usePressAnimation)({
+    enabled: isInteractive
+  });
+  const flickGuard = (0, _useFlickGuard.useFlickGuard)();
+  const handlePressIn = event => {
+    flickGuard.onPressIn(event);
+    pressIn();
+  };
+  const handlePress = event => {
+    // A scroll flick that started on the row is not a tap (see useFlickGuard).
+    if (!isInteractive || flickGuard.isFlick(event)) {
+      return;
+    }
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _hapticUtils.triggerHaptic)(h);
+    }
+    onPress?.(event);
+  };
+  const a11yLabel = accessibilityLabel ?? title;
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.row, {
+      paddingVertical: sz.paddingVertical,
+      minHeight: sz.minHeight,
+      backgroundColor: selected ? theme.colors.surface.selected : 'transparent'
+    }, divider ? styles.divider : null, disabled ? styles.disabled : null, containerStyle],
+    children: [left ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.leftSlot, leftSlotStyle],
+      children: left
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.middle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.title, {
+          fontSize: sz.titleSize,
+          ...(0, _index.fontFor)(theme, 'medium'),
+          color: disabled ? theme.colors.text.disabled : theme.colors.text.primary
+        }, titleStyle],
+        numberOfLines: 1,
+        children: title ?? ' '
+      }), subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.subtitle, {
+          fontSize: sz.subtitleSize,
+          color: disabled ? theme.colors.text.disabled : theme.colors.text.secondary
+        }, subtitleStyle],
+        numberOfLines: 1,
+        children: subtitle
+      }) : null, description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.description, {
+          fontSize: sz.subtitleSize,
+          color: disabled ? theme.colors.text.disabled : theme.colors.text.tertiary
+        }, descriptionStyle],
+        numberOfLines: 2,
+        children: description
+      }) : null]
+    }), right || chevron ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.rightSlot, rightSlotStyle],
+      children: [right, chevron ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: right ? styles.chevronWithRight : null,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Chevron, {
+          color: disabled ? theme.colors.text.disabled : theme.colors.text.tertiary
+        })
+      }) : null]
+    }) : null]
+  });
+  const rendered = !onPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ref: ref,
+    accessibilityRole: "none",
+    accessibilityLabel: a11yLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityState: {
+      selected,
+      disabled
+    },
+    testID: testID,
+    style: style,
+    children: content
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: [{
+      transform: [{
+        scale
+      }]
+    }, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      ref: ref,
+      onPress: handlePress,
+      onPressIn: handlePressIn,
+      onPressOut: pressOut,
+      disabled: !isInteractive,
+      accessibilityRole: "button",
+      accessibilityLabel: a11yLabel,
+      accessibilityHint: accessibilityHint,
+      accessibilityState: {
+        selected,
+        disabled: !isInteractive
+      },
+      testID: testID,
+      android_ripple: {
+        color: theme.colors.surface.pressed,
+        borderless: false
+      },
+      style: ({
+        pressed
+      }) => pressed ? styles.pressed : null,
+      children: content
+    })
+  });
+
+  // Wrap in Swipeable only when at least one side has actions; otherwise keep zero gesture overhead.
+  const hasSwipe = leftActions && leftActions.length > 0 || rightActions && rightActions.length > 0;
+  const final = hasSwipe ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Swipeable, {
+    leftActions: leftActions,
+    rightActions: rightActions,
+    accessibilityLabel: a11yLabel,
+    children: rendered
+  }) : rendered;
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItemSkeleton, {
+      ...props
+    });
+  }
+  return final;
+});
+ListItem.displayName = 'ListItem';
+
+/**
+ * Placeholder shape for `<ListItem>`. Mirrors the row anatomy: optional
+ * leading slot (avatar/icon), title + subtitle/description stack, optional
+ * trailing chevron. Heights respect the configured `size`.
+ */
+const ListItemSkeleton = ({
+  subtitle,
+  description,
+  left,
+  right,
+  chevron,
+  size = 'md',
+  containerStyle,
+  style
+}) => {
+  const theme = (0, _index.useTheme)();
+  const sz = sizeFor(theme, size);
+  const titleHeight = Math.round(sz.titleSize * 1.15);
+  const subtitleHeight = Math.round(sz.subtitleSize * 1.15);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: theme.spacing.md,
+      paddingVertical: sz.paddingVertical,
+      minHeight: sz.minHeight
+    }, containerStyle, style],
+    children: [left !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        marginRight: theme.spacing.sm
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+        shape: "circle",
+        width: 40,
+        height: 40
+      })
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flex: 1
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+        shape: "text",
+        width: "70%",
+        height: titleHeight,
+        style: {
+          marginBottom: theme.spacing.xs
+        }
+      }), subtitle !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+        shape: "text",
+        width: "50%",
+        height: subtitleHeight,
+        style: description !== undefined ? {
+          marginBottom: theme.spacing.xs
+        } : undefined
+      }) : null, description !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+        shape: "text",
+        width: "85%",
+        height: subtitleHeight
+      }) : null]
+    }), right !== undefined || chevron ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        marginLeft: theme.spacing.sm
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+        width: 20,
+        height: 20,
+        radius: "sm"
+      })
+    }) : null]
+  });
+};
+ListItemSkeleton.displayName = 'ListItemSkeleton';
+ListItem.Skeleton = ListItemSkeleton;
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: theme.spacing.md
+  },
+  divider: {
+    borderBottomWidth: _reactNative.StyleSheet.hairlineWidth,
+    borderBottomColor: theme.colors.border.primary
+  },
+  pressed: {
+    backgroundColor: theme.colors.surface.pressed
+  },
+  disabled: {
+    opacity: 0.55
+  },
+  leftSlot: {
+    marginRight: theme.spacing.md,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  middle: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center'
+  },
+  rightSlot: {
+    marginLeft: theme.spacing.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row'
+  },
+  chevronWithRight: {
+    marginLeft: theme.spacing.xs
+  },
+  title: {
+    letterSpacing: theme.typography.letterSpacing.normal
+  },
+  subtitle: {
+    marginTop: 2,
+    ...(0, _index.fontFor)(theme, 'normal')
+  },
+  description: {
+    marginTop: 2,
+    ...(0, _index.fontFor)(theme, 'normal')
+  }
+});
+var _default = exports.default = ListItem;
+//# sourceMappingURL=ListItem.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function () {
+    return _ListItem.ListItem;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ListItem.default;
+  }
+});
+var _ListItem = _interopRequireWildcard(require("./ListItem.js"));
+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); }
+//# sourceMappingURL=index.js.map