@webority/mobile-ui 0.0.39 → 0.1.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
+import{forwardRef as e}from"react";import{Keyboard as r,Pressable as o,RefreshControl as t}from"react-native";import{KeyboardAwareScrollView as i}from"react-native-keyboard-controller";import{useSafeAreaInsets as n}from"react-native-safe-area-context";import{useTheme as s}from"../../theme/index.js";import{jsx as a}from"react/jsx-runtime";const l={flexGrow:1},d=e((e,d)=>{const{children:c,bottomOffset:m=24,extraKeyboardSpace:f=0,safeAreaEdges:p=["bottom"],refreshing:h=!1,onRefresh:b,dismissOnTapOutside:y=!1,contentContainerStyle:u,refreshControl:g,...x}=e,S=s(),w=n(),C=p.includes("bottom"),v={paddingBottom:C?w.bottom:0,...p.includes("top")?{paddingTop:w.top}:null,...p.includes("left")?{paddingLeft:w.left}:null,...p.includes("right")?{paddingRight:w.right}:null},K=g??(b?a(t,{refreshing:h,onRefresh:b,tintColor:S.colors.primary,colors:[S.colors.primary]}):void 0);return a(i,{ref:d,bottomOffset:m,extraKeyboardSpace:f-(C?w.bottom:0),keyboardShouldPersistTaps:"handled",keyboardDismissMode:"none",contentContainerStyle:[u,v],refreshControl:K,...x,children:y?a(o,{accessible:!1,onPress:r.dismiss,style:l,children:c}):c})});d.displayName="KeyboardAwareScrollView";export{d as KeyboardAwareScrollView};export default d;

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

@@ -1,4 +1 @@
-"use strict";
-
-export { KeyboardAwareScrollView } from "./KeyboardAwareScrollView.js";
-//# sourceMappingURL=index.js.map
+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
+import{Pressable as e,StyleSheet as o,View as i}from"react-native";import{KeyboardController as t,KeyboardStickyView as r,useKeyboardState as s}from"react-native-keyboard-controller";import{useOptionalFormContext as l}from"../../form/FormContext.js";import{useTheme as n}from"../../theme/index.js";import{Text as a}from"../Text/index.js";import{jsx as c,jsxs as b}from"react/jsx-runtime";const NavButton=({label:o,accessibilityLabel:i,onPress:t,theme:r})=>c(e,{onPress:t,accessibilityRole:"button",accessibilityLabel:i,hitSlop:8,style:{paddingHorizontal:r.spacing.sm},children:c(a,{variant:"h2",color:"link",children:o})}),KeyboardToolbar=o=>{const{doneLabel:m="Done",showNavigation:h=!0,onDone:p,onNext:f,onPrev:y,leading:x,style:u,testID:g}=o,v=n(),P=l();if(!s(e=>e.isVisible))return null;const j=p??(()=>{t.dismiss()}),D=y??P?.focusPrev??(()=>t.setFocusTo("prev")),L=f??P?.focusNext??(()=>t.setFocusTo("next"));return c(r,{style:d.anchor,children:b(i,{testID:g,accessibilityRole:"toolbar",style:[d.bar,{backgroundColor:v.colors.background.elevated,borderTopColor:v.colors.border.primary,paddingHorizontal:v.spacing.md},u],children:[h?b(i,{style:d.nav,children:[c(NavButton,{label:"‹",accessibilityLabel:"Previous field",onPress:D,theme:v}),c(NavButton,{label:"›",accessibilityLabel:"Next field",onPress:L,theme:v})]}):c(i,{}),x,c(i,{style:d.spacer}),c(e,{onPress:j,accessibilityRole:"button",accessibilityLabel:m,hitSlop:8,children:c(a,{variant:"body",weight:"semibold",color:"link",children:m})})]})})},d=o.create({anchor:{position:"absolute",left:0,right:0,bottom:0},bar:{height:44,flexDirection:"row",alignItems:"center",borderTopWidth:o.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
+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
+import e,{forwardRef as t,useMemo as i}from"react";import{Animated as l,Pressable as n,StyleSheet as s,Text as r,View as o}from"react-native";import{useFlickGuard as c}from"../../hooks/useFlickGuard.js";import{usePressAnimation as a}from"../../hooks/usePressAnimation.js";import{fontFor as d,useTheme as m}from"../../theme/index.js";import{resolveHaptic as g,triggerHaptic as p}from"../../utils/hapticUtils.js";import{defaultIcons as h}from"../AppIcon/defaultIcons.js";import{Button as u}from"../Button/index.js";import{IconBadge as y}from"../IconBadge/index.js";import{Skeleton as b}from"../Skeleton/index.js";import{Swipeable as f}from"../Swipeable/index.js";import{Fragment as S,jsx as x,jsxs as z}from"react/jsx-runtime";const v={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={...v[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=m();return x(S,{children:(t.icons?.chevronRight??h.chevronRight)({size:20,color:e})})},I={sm:"sm",md:"md",lg:"lg"},renderActions=t=>{return i=t,Array.isArray(i)&&i.length>0&&i.every(t=>null!=t&&"object"==typeof t&&!e.isValidElement(t)&&"label"in t)?t.map(e=>x(u,{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)):t;var i},j=t((e,t)=>{const{title:s,loading:h=!1,subtitle:u,description:b,titleLines:S=1,subtitleLines:v=1,left:j,icon:H,iconTone:w="primary",right:L,actions:F,onPress:V,haptic:k,selected:A=!1,disabled:D=!1,size:P="md",divider:R=!1,chevron:B=!1,leftActions:C,rightActions:O,accessibilityLabel:W,accessibilityHint:T,style:M,containerStyle:N,titleStyle:E,subtitleStyle:G,descriptionStyle:U,leftSlotStyle:_,rightSlotStyle:q,testID:J}=e,K=m(),Q=i(()=>sizeFor(K,P),[K,P]),X=i(()=>buildStyles(K),[K]),Y=!!V&&!D,{scale:Z,pressIn:$,pressOut:ee}=a({enabled:Y}),te=c(),ie=W??("string"==typeof s?s:void 0),isText=e=>"string"==typeof e||"number"==typeof e,le=j??(void 0===H?null:x(y,{icon:H,tone:w,size:I[P]})),ne=null!=F&&!1!==F&&!(Array.isArray(F)&&0===F.length),se=R&&!ne,re=z(o,{style:[X.row,{paddingVertical:Q.paddingVertical,minHeight:Q.minHeight,backgroundColor:A?K.colors.surface.selected:"transparent"},se?X.divider:null,D?X.disabled:null,N],children:[le?x(o,{style:[X.leftSlot,_],children:le}):null,z(o,{style:X.middle,children:[null==s||isText(s)?x(r,{style:[X.title,{fontSize:Q.titleSize,...d(K,"medium"),color:D?K.colors.text.disabled:K.colors.text.primary},E],numberOfLines:S,children:s??" "}):s,null==u||""===u?null:isText(u)?x(r,{style:[X.subtitle,{fontSize:Q.subtitleSize,color:D?K.colors.text.disabled:K.colors.text.secondary},G],numberOfLines:v,children:u}):u,b?x(r,{style:[X.description,{fontSize:Q.subtitleSize,color:D?K.colors.text.disabled:K.colors.text.tertiary},U],numberOfLines:2,children:b}):null]}),L||B?z(o,{style:[X.rightSlot,q],children:[L,B?x(o,{style:L?X.chevronWithRight:null,children:x(Chevron,{color:D?K.colors.text.disabled:K.colors.text.tertiary})}):null]}):null]}),oe=V?x(l.View,{style:[{transform:[{scale:Z}]},M],children:x(n,{ref:t,onPress:e=>{if(!Y||te.isFlick(e))return;const t=g(k,"selection");t&&p(t),V?.(e)},onPressIn:e=>{te.onPressIn(e),$()},onPressOut:ee,disabled:!Y,accessibilityRole:"button",accessibilityLabel:ie,accessibilityHint:T,accessibilityState:{selected:A,disabled:!Y},testID:J,android_ripple:{color:K.colors.surface.pressed,borderless:!1},style:({pressed:e})=>e?X.pressed:null,children:re})}):x(o,{ref:t,accessibilityRole:"none",accessibilityLabel:ie,accessibilityHint:T,accessibilityState:{selected:A,disabled:D},testID:J,style:M,children:re}),ce=C&&C.length>0||O&&O.length>0,ae=ne?z(o,{style:[A?{backgroundColor:K.colors.surface.selected}:null,R?X.divider:null],children:[oe,x(o,{style:X.actions,children:renderActions(F)})]}):oe,de=ce?x(f,{leftActions:C,rightActions:O,accessibilityLabel:ie,children:ae}):ae;return h?x(ListItemSkeleton,{...e}):de});j.displayName="ListItem";const ListItemSkeleton=({subtitle:e,description:t,left:i,icon:l,right:n,chevron:s,size:r="md",containerStyle:c,style:a})=>{const d=m(),g=sizeFor(d,r),p=Math.round(1.15*g.titleSize),h=Math.round(1.15*g.subtitleSize);return z(o,{style:[{flexDirection:"row",alignItems:"center",paddingHorizontal:d.spacing.md,paddingVertical:g.paddingVertical,minHeight:g.minHeight},c,a],children:[void 0!==i||void 0!==l?x(o,{style:{marginRight:d.spacing.sm},children:x(b,{shape:"circle",width:40,height:40})}):null,z(o,{style:{flex:1},children:[x(b,{shape:"text",width:"70%",height:p,style:{marginBottom:d.spacing.xs}}),void 0!==e?x(b,{shape:"text",width:"50%",height:h,style:void 0!==t?{marginBottom:d.spacing.xs}:void 0}):null,void 0!==t?x(b,{shape:"text",width:"85%",height:h}):null]}),void 0!==n||s?x(o,{style:{marginLeft:d.spacing.sm},children:x(b,{width:20,height:20,radius:"sm"})}):null]})};ListItemSkeleton.displayName="ListItemSkeleton",j.Skeleton=ListItemSkeleton;const buildStyles=e=>s.create({row:{flexDirection:"row",alignItems:"center",paddingHorizontal:e.spacing.md},divider:{borderBottomWidth:s.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,...d(e,"normal")},description:{marginTop:2,...d(e,"normal")}});export{j as ListItem};export default j;

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

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