@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/module/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js

@@ -1,164 +1 @@
-"use strict";
-
-import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-import { Keyboard, Platform, RefreshControl, ScrollView, TextInput } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from "../../theme/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * 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 = /*#__PURE__*/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 = useTheme();
-  const insets = useSafeAreaInsets();
-  const scrollRef = useRef(null);
-  const scrollYRef = useRef(0);
-  const viewportHeightRef = useRef(0);
-  const [keyboardHeight, setKeyboardHeight] = useState(0);
-  const setRefs = useCallback(node => {
-    scrollRef.current = node;
-    if (typeof ref === 'function') {
-      ref(node);
-    } else if (ref) {
-      ref.current = node;
-    }
-  }, [ref]);
-  const scrollFocusedIntoView = useCallback(kbHeight => {
-    const scroll = scrollRef.current;
-    const stateApi = 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]);
-  useEffect(() => {
-    if (disabled) {
-      return undefined;
-    }
-    // iOS exposes the will* events (smoother); Android only fires did*.
-    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
-    let timeoutId;
-    const showSub = 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 = 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 = useCallback(e => {
-    viewportHeightRef.current = e.nativeEvent.layout.height;
-    onLayout?.(e);
-  }, [onLayout]);
-  const handleScroll = 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__*/_jsx(RefreshControl, {
-    refreshing: refreshing,
-    onRefresh: onRefresh,
-    tintColor: theme.colors.primary,
-    colors: [theme.colors.primary]
-  }) : undefined);
-  return /*#__PURE__*/_jsx(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';
-export { KeyboardAwareScrollView };
-export default KeyboardAwareScrollView;
-//# sourceMappingURL=KeyboardAwareScrollView.js.map
+"use strict";import{forwardRef}from"react";import{Keyboard,Pressable,RefreshControl}from"react-native";import{KeyboardAwareScrollView as ControllerScrollView}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useTheme}from"../../theme/index.js";import{jsx as _jsx}from"react/jsx-runtime";const tapAreaStyle={flexGrow:1},KeyboardAwareScrollView=forwardRef((e,r)=>{const{children:o,bottomOffset:t=24,extraKeyboardSpace:a=0,safeAreaEdges:s=["bottom"],refreshing:l=!1,onRefresh:i,dismissOnTapOutside:n=!1,contentContainerStyle:d,refreshControl:c,...f}=e,m=useTheme(),p=useSafeAreaInsets(),b=s.includes("bottom"),y={paddingBottom:b?p.bottom:0,...s.includes("top")?{paddingTop:p.top}:null,...s.includes("left")?{paddingLeft:p.left}:null,...s.includes("right")?{paddingRight:p.right}:null},h=c??(i?_jsx(RefreshControl,{refreshing:l,onRefresh:i,tintColor:m.colors.primary,colors:[m.colors.primary]}):void 0);return _jsx(ControllerScrollView,{ref:r,bottomOffset:t,extraKeyboardSpace:a-(b?p.bottom:0),keyboardShouldPersistTaps:"handled",keyboardDismissMode:"none",contentContainerStyle:[d,y],refreshControl:h,...f,children:n?_jsx(Pressable,{accessible:!1,onPress:Keyboard.dismiss,style:tapAreaStyle,children:o}):o})});KeyboardAwareScrollView.displayName="KeyboardAwareScrollView";export{KeyboardAwareScrollView};export default KeyboardAwareScrollView;

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

@@ -1,4 +1 @@
-"use strict";
-
-export { KeyboardAwareScrollView } from "./KeyboardAwareScrollView.js";
-//# sourceMappingURL=index.js.map
+"use strict";export{KeyboardAwareScrollView}from"./KeyboardAwareScrollView.js";

package/lib/module/components/KeyboardToolbar/KeyboardToolbar.js

@@ -1,130 +1 @@
-"use strict";
-
-import React, { useEffect, useState } from 'react';
-import { Keyboard, Platform, Pressable, StyleSheet, View } from 'react-native';
-import { useOptionalFormContext } from "../../form/FormContext.js";
-import { useTheme } from "../../theme/index.js";
-import { Text } from "../Text/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const NavButton = ({
-  label,
-  accessibilityLabel,
-  onPress,
-  theme
-}) => /*#__PURE__*/_jsx(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__*/_jsx(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 = useTheme();
-  const form = useOptionalFormContext();
-  const [keyboardHeight, setKeyboardHeight] = useState(0);
-  useEffect(() => {
-    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
-    const showSub = Keyboard.addListener(showEvent, e => setKeyboardHeight(e.endCoordinates?.height ?? 0));
-    const hideSub = Keyboard.addListener(hideEvent, () => setKeyboardHeight(0));
-    return () => {
-      showSub.remove();
-      hideSub.remove();
-    };
-  }, []);
-  if (keyboardHeight <= 0) {
-    return null;
-  }
-  const handleDone = onDone ?? (() => Keyboard.dismiss());
-  const handlePrev = onPrev ?? form?.focusPrev;
-  const handleNext = onNext ?? form?.focusNext;
-  const navEnabled = showNavigation ?? Boolean(handlePrev || handleNext);
-  return /*#__PURE__*/_jsxs(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__*/_jsxs(View, {
-      style: styles.nav,
-      children: [/*#__PURE__*/_jsx(NavButton, {
-        label: "\u2039",
-        accessibilityLabel: "Previous field",
-        onPress: handlePrev,
-        theme: theme
-      }), /*#__PURE__*/_jsx(NavButton, {
-        label: "\u203A",
-        accessibilityLabel: "Next field",
-        onPress: handleNext,
-        theme: theme
-      })]
-    }) : /*#__PURE__*/_jsx(View, {}), leading, /*#__PURE__*/_jsx(View, {
-      style: styles.spacer
-    }), /*#__PURE__*/_jsx(Pressable, {
-      onPress: handleDone,
-      accessibilityRole: "button",
-      accessibilityLabel: doneLabel,
-      hitSlop: 8,
-      children: /*#__PURE__*/_jsx(Text, {
-        variant: "body",
-        weight: "semibold",
-        color: "link",
-        children: doneLabel
-      })
-    })]
-  });
-};
-const styles = StyleSheet.create({
-  bar: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    height: 44,
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderTopWidth: StyleSheet.hairlineWidth
-  },
-  nav: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  spacer: {
-    flex: 1
-  }
-});
-export { KeyboardToolbar };
-export default KeyboardToolbar;
-//# sourceMappingURL=KeyboardToolbar.js.map
+"use strict";import{Pressable,StyleSheet,View}from"react-native";import{KeyboardController,KeyboardStickyView,useKeyboardState}from"react-native-keyboard-controller";import{useOptionalFormContext}from"../../form/FormContext.js";import{useTheme}from"../../theme/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const NavButton=({label:e,accessibilityLabel:o,onPress:t,theme:s})=>_jsx(Pressable,{onPress:t,accessibilityRole:"button",accessibilityLabel:o,hitSlop:8,style:{paddingHorizontal:s.spacing.sm},children:_jsx(Text,{variant:"h2",color:"link",children:e})}),KeyboardToolbar=e=>{const{doneLabel:o="Done",showNavigation:t=!0,onDone:s,onNext:r,onPrev:i,leading:l,style:a,testID:n}=e,c=useTheme(),b=useOptionalFormContext();if(!useKeyboardState(e=>e.isVisible))return null;const d=s??(()=>{KeyboardController.dismiss()}),y=i??b?.focusPrev??(()=>KeyboardController.setFocusTo("prev")),x=r??b?.focusNext??(()=>KeyboardController.setFocusTo("next"));return _jsx(KeyboardStickyView,{style:styles.anchor,children:_jsxs(View,{testID:n,accessibilityRole:"toolbar",style:[styles.bar,{backgroundColor:c.colors.background.elevated,borderTopColor:c.colors.border.primary,paddingHorizontal:c.spacing.md},a],children:[t?_jsxs(View,{style:styles.nav,children:[_jsx(NavButton,{label:"‹",accessibilityLabel:"Previous field",onPress:y,theme:c}),_jsx(NavButton,{label:"›",accessibilityLabel:"Next field",onPress:x,theme:c})]}):_jsx(View,{}),l,_jsx(View,{style:styles.spacer}),_jsx(Pressable,{onPress:d,accessibilityRole:"button",accessibilityLabel:o,hitSlop:8,children:_jsx(Text,{variant:"body",weight:"semibold",color:"link",children:o})})]})})},styles=StyleSheet.create({anchor:{position:"absolute",left:0,right:0,bottom:0},bar:{height:44,flexDirection:"row",alignItems:"center",borderTopWidth:StyleSheet.hairlineWidth},nav:{flexDirection:"row",alignItems:"center"},spacer:{flex:1}});export{KeyboardToolbar};export default KeyboardToolbar;

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

@@ -1,4 +1 @@
-"use strict";
-
-export { KeyboardToolbar } from "./KeyboardToolbar.js";
-//# sourceMappingURL=index.js.map
+"use strict";export{KeyboardToolbar}from"./KeyboardToolbar.js";

package/lib/module/components/ListItem/ListItem.js

@@ -1,340 +1 @@
-"use strict";
-
-import React, { forwardRef, useMemo } from 'react';
-import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useFlickGuard } from "../../hooks/useFlickGuard.js";
-import { usePressAnimation } from "../../hooks/usePressAnimation.js";
-import { fontFor, useTheme } from "../../theme/index.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
-import { defaultIcons } from "../AppIcon/defaultIcons.js";
-import { Skeleton } from "../Skeleton/index.js";
-import { Swipeable } from "../Swipeable/index.js";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 = useTheme();
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: (theme.icons?.chevronRight ?? defaultIcons.chevronRight)({
-      size: 20,
-      color
-    })
-  });
-};
-const ListItem = /*#__PURE__*/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 = useTheme();
-  const sz = useMemo(() => sizeFor(theme, size), [theme, size]);
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const isInteractive = !!onPress && !disabled;
-  const {
-    scale,
-    pressIn,
-    pressOut
-  } = usePressAnimation({
-    enabled: isInteractive
-  });
-  const flickGuard = 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 = resolveHaptic(haptic, 'selection');
-    if (h) {
-      triggerHaptic(h);
-    }
-    onPress?.(event);
-  };
-  const a11yLabel = accessibilityLabel ?? title;
-  const content = /*#__PURE__*/_jsxs(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__*/_jsx(View, {
-      style: [styles.leftSlot, leftSlotStyle],
-      children: left
-    }) : null, /*#__PURE__*/_jsxs(View, {
-      style: styles.middle,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.title, {
-          fontSize: sz.titleSize,
-          ...fontFor(theme, 'medium'),
-          color: disabled ? theme.colors.text.disabled : theme.colors.text.primary
-        }, titleStyle],
-        numberOfLines: 1,
-        children: title ?? ' '
-      }), subtitle ? /*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsxs(View, {
-      style: [styles.rightSlot, rightSlotStyle],
-      children: [right, chevron ? /*#__PURE__*/_jsx(View, {
-        style: right ? styles.chevronWithRight : null,
-        children: /*#__PURE__*/_jsx(Chevron, {
-          color: disabled ? theme.colors.text.disabled : theme.colors.text.tertiary
-        })
-      }) : null]
-    }) : null]
-  });
-  const rendered = !onPress ? /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    accessibilityRole: "none",
-    accessibilityLabel: a11yLabel,
-    accessibilityHint: accessibilityHint,
-    accessibilityState: {
-      selected,
-      disabled
-    },
-    testID: testID,
-    style: style,
-    children: content
-  }) : /*#__PURE__*/_jsx(Animated.View, {
-    style: [{
-      transform: [{
-        scale
-      }]
-    }, style],
-    children: /*#__PURE__*/_jsx(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__*/_jsx(Swipeable, {
-    leftActions: leftActions,
-    rightActions: rightActions,
-    accessibilityLabel: a11yLabel,
-    children: rendered
-  }) : rendered;
-  if (loading) {
-    return /*#__PURE__*/_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 = useTheme();
-  const sz = sizeFor(theme, size);
-  const titleHeight = Math.round(sz.titleSize * 1.15);
-  const subtitleHeight = Math.round(sz.subtitleSize * 1.15);
-  return /*#__PURE__*/_jsxs(View, {
-    style: [{
-      flexDirection: 'row',
-      alignItems: 'center',
-      paddingHorizontal: theme.spacing.md,
-      paddingVertical: sz.paddingVertical,
-      minHeight: sz.minHeight
-    }, containerStyle, style],
-    children: [left !== undefined ? /*#__PURE__*/_jsx(View, {
-      style: {
-        marginRight: theme.spacing.sm
-      },
-      children: /*#__PURE__*/_jsx(Skeleton, {
-        shape: "circle",
-        width: 40,
-        height: 40
-      })
-    }) : null, /*#__PURE__*/_jsxs(View, {
-      style: {
-        flex: 1
-      },
-      children: [/*#__PURE__*/_jsx(Skeleton, {
-        shape: "text",
-        width: "70%",
-        height: titleHeight,
-        style: {
-          marginBottom: theme.spacing.xs
-        }
-      }), subtitle !== undefined ? /*#__PURE__*/_jsx(Skeleton, {
-        shape: "text",
-        width: "50%",
-        height: subtitleHeight,
-        style: description !== undefined ? {
-          marginBottom: theme.spacing.xs
-        } : undefined
-      }) : null, description !== undefined ? /*#__PURE__*/_jsx(Skeleton, {
-        shape: "text",
-        width: "85%",
-        height: subtitleHeight
-      }) : null]
-    }), right !== undefined || chevron ? /*#__PURE__*/_jsx(View, {
-      style: {
-        marginLeft: theme.spacing.sm
-      },
-      children: /*#__PURE__*/_jsx(Skeleton, {
-        width: 20,
-        height: 20,
-        radius: "sm"
-      })
-    }) : null]
-  });
-};
-ListItemSkeleton.displayName = 'ListItemSkeleton';
-ListItem.Skeleton = ListItemSkeleton;
-const buildStyles = theme => StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: theme.spacing.md
-  },
-  divider: {
-    borderBottomWidth: 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,
-    ...fontFor(theme, 'normal')
-  },
-  description: {
-    marginTop: 2,
-    ...fontFor(theme, 'normal')
-  }
-});
-export { ListItem };
-export default ListItem;
-//# sourceMappingURL=ListItem.js.map
+"use strict";import React,{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{useFlickGuard}from"../../hooks/useFlickGuard.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{Button}from"../Button/index.js";import{IconBadge}from"../IconBadge/index.js";import{Skeleton}from"../Skeleton/index.js";import{Swipeable}from"../Swipeable/index.js";import{Fragment as _Fragment,jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";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}},sizeFor=(e,t)=>{const i={...SIZE_FALLBACK[t],...e.components.listItem?.[t]??{}};return{paddingVertical:e.spacing[i.paddingVertical],titleSize:e.typography.fontSize[i.titleFontSize],subtitleSize:e.typography.fontSize[i.subtitleFontSize],minHeight:i.minHeight}},Chevron=({color:e})=>{const t=useTheme();return _jsx(_Fragment,{children:(t.icons?.chevronRight??defaultIcons.chevronRight)({size:20,color:e})})},BADGE_SIZE={sm:"sm",md:"md",lg:"lg"},isActionList=e=>Array.isArray(e)&&e.length>0&&e.every(e=>null!=e&&"object"==typeof e&&!React.isValidElement(e)&&"label"in e),renderActions=e=>isActionList(e)?e.map(e=>_jsx(Button,{size:"sm",variant:e.variant??"outline",tone:e.tone,leftIcon:e.icon,disabled:e.disabled,testID:e.testID,title:e.label,onPress:e.onPress},e.label)):e,ListItem=forwardRef((e,t)=>{const{title:i,loading:s=!1,subtitle:l,description:n,titleLines:o=1,subtitleLines:r=1,left:a,icon:c,iconTone:d="primary",right:m,actions:g,onPress:p,haptic:h,selected:u=!1,disabled:y=!1,size:x="md",divider:b=!1,chevron:f=!1,leftActions:S,rightActions:j,accessibilityLabel:_,accessibilityHint:I,style:w,containerStyle:z,titleStyle:L,subtitleStyle:v,descriptionStyle:A,leftSlotStyle:F,rightSlotStyle:V,testID:k}=e,H=useTheme(),B=useMemo(()=>sizeFor(H,x),[H,x]),D=useMemo(()=>buildStyles(H),[H]),P=!!p&&!y,{scale:R,pressIn:C,pressOut:T}=usePressAnimation({enabled:P}),E=useFlickGuard(),G=_??("string"==typeof i?i:void 0),isText=e=>"string"==typeof e||"number"==typeof e,M=a??(void 0===c?null:_jsx(IconBadge,{icon:c,tone:d,size:BADGE_SIZE[x]})),O=null!=g&&!1!==g&&!(Array.isArray(g)&&0===g.length),W=b&&!O,Z=_jsxs(View,{style:[D.row,{paddingVertical:B.paddingVertical,minHeight:B.minHeight,backgroundColor:u?H.colors.surface.selected:"transparent"},W?D.divider:null,y?D.disabled:null,z],children:[M?_jsx(View,{style:[D.leftSlot,F],children:M}):null,_jsxs(View,{style:D.middle,children:[null==i||isText(i)?_jsx(Text,{style:[D.title,{fontSize:B.titleSize,...fontFor(H,"medium"),color:y?H.colors.text.disabled:H.colors.text.primary},L],numberOfLines:o,children:i??" "}):i,null==l||""===l?null:isText(l)?_jsx(Text,{style:[D.subtitle,{fontSize:B.subtitleSize,color:y?H.colors.text.disabled:H.colors.text.secondary},v],numberOfLines:r,children:l}):l,n?_jsx(Text,{style:[D.description,{fontSize:B.subtitleSize,color:y?H.colors.text.disabled:H.colors.text.tertiary},A],numberOfLines:2,children:n}):null]}),m||f?_jsxs(View,{style:[D.rightSlot,V],children:[m,f?_jsx(View,{style:m?D.chevronWithRight:null,children:_jsx(Chevron,{color:y?H.colors.text.disabled:H.colors.text.tertiary})}):null]}):null]}),K=p?_jsx(Animated.View,{style:[{transform:[{scale:R}]},w],children:_jsx(Pressable,{ref:t,onPress:e=>{if(!P||E.isFlick(e))return;const t=resolveHaptic(h,"selection");t&&triggerHaptic(t),p?.(e)},onPressIn:e=>{E.onPressIn(e),C()},onPressOut:T,disabled:!P,accessibilityRole:"button",accessibilityLabel:G,accessibilityHint:I,accessibilityState:{selected:u,disabled:!P},testID:k,android_ripple:{color:H.colors.surface.pressed,borderless:!1},style:({pressed:e})=>e?D.pressed:null,children:Z})}):_jsx(View,{ref:t,accessibilityRole:"none",accessibilityLabel:G,accessibilityHint:I,accessibilityState:{selected:u,disabled:y},testID:k,style:w,children:Z}),N=S&&S.length>0||j&&j.length>0,U=O?_jsxs(View,{style:[u?{backgroundColor:H.colors.surface.selected}:null,b?D.divider:null],children:[K,_jsx(View,{style:D.actions,children:renderActions(g)})]}):K,q=N?_jsx(Swipeable,{leftActions:S,rightActions:j,accessibilityLabel:G,children:U}):U;return s?_jsx(ListItemSkeleton,{...e}):q});ListItem.displayName="ListItem";const ListItemSkeleton=({subtitle:e,description:t,left:i,icon:s,right:l,chevron:n,size:o="md",containerStyle:r,style:a})=>{const c=useTheme(),d=sizeFor(c,o),m=Math.round(1.15*d.titleSize),g=Math.round(1.15*d.subtitleSize);return _jsxs(View,{style:[{flexDirection:"row",alignItems:"center",paddingHorizontal:c.spacing.md,paddingVertical:d.paddingVertical,minHeight:d.minHeight},r,a],children:[void 0!==i||void 0!==s?_jsx(View,{style:{marginRight:c.spacing.sm},children:_jsx(Skeleton,{shape:"circle",width:40,height:40})}):null,_jsxs(View,{style:{flex:1},children:[_jsx(Skeleton,{shape:"text",width:"70%",height:m,style:{marginBottom:c.spacing.xs}}),void 0!==e?_jsx(Skeleton,{shape:"text",width:"50%",height:g,style:void 0!==t?{marginBottom:c.spacing.xs}:void 0}):null,void 0!==t?_jsx(Skeleton,{shape:"text",width:"85%",height:g}):null]}),void 0!==l||n?_jsx(View,{style:{marginLeft:c.spacing.sm},children:_jsx(Skeleton,{width:20,height:20,radius:"sm"})}):null]})};ListItemSkeleton.displayName="ListItemSkeleton",ListItem.Skeleton=ListItemSkeleton;const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center",paddingHorizontal:e.spacing.md},divider:{borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:e.colors.border.primary},pressed:{backgroundColor:e.colors.surface.pressed},disabled:{opacity:.55},leftSlot:{marginRight:e.spacing.md,alignItems:"center",justifyContent:"center"},middle:{flex:1,flexDirection:"column",justifyContent:"center"},rightSlot:{marginLeft:e.spacing.md,alignItems:"center",justifyContent:"center",flexDirection:"row"},actions:{flexDirection:"row",flexWrap:"wrap",gap:e.spacing.sm,paddingHorizontal:e.spacing.md,paddingBottom:e.spacing.md},chevronWithRight:{marginLeft:e.spacing.xs},title:{letterSpacing:e.typography.letterSpacing.normal},subtitle:{marginTop:2,...fontFor(e,"normal")},description:{marginTop:2,...fontFor(e,"normal")}});export{ListItem};export default ListItem;

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

@@ -1,4 +1 @@
-"use strict";
-
-export { default, ListItem } from "./ListItem.js";
-//# sourceMappingURL=index.js.map
+"use strict";export{default,ListItem}from"./ListItem.js";