@webority-technologies/mobile-ui 0.0.1

package/lib/module/components/AppBar/AppBar.js

@@ -0,0 +1,351 @@
+"use strict";
+
+import React, { forwardRef, useMemo } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { usePressAnimation } from "../../hooks/usePressAnimation.js";
+import { useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const variantSize = (theme, variant) => {
+  switch (variant) {
+    case 'compact':
+      return {
+        height: 44,
+        titleSize: theme.typography.fontSize.lg,
+        titleWeight: 'semibold',
+        alignBottom: false
+      };
+    case 'large':
+      return {
+        height: 96,
+        titleSize: theme.typography.fontSize['2xl'],
+        titleWeight: 'bold',
+        alignBottom: true
+      };
+    case 'default':
+    default:
+      return {
+        height: 56,
+        titleSize: theme.typography.fontSize.lg,
+        titleWeight: 'semibold',
+        alignBottom: false
+      };
+  }
+};
+const ActionButton = ({
+  action,
+  side,
+  badgeStyle,
+  haptic
+}) => {
+  const theme = useTheme();
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = usePressAnimation({
+    enabled: true
+  });
+  const styles = useMemo(() => buildActionStyles(theme), [theme]);
+  const onPress = () => {
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    action.onPress();
+  };
+  const badgeValue = action.badge;
+  const badgeIsDot = typeof badgeValue === 'number' && badgeValue === 0;
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: {
+      transform: [{
+        scale
+      }]
+    },
+    children: /*#__PURE__*/_jsxs(Pressable, {
+      onPress: onPress,
+      onPressIn: pressIn,
+      onPressOut: pressOut,
+      accessibilityRole: "button",
+      accessibilityLabel: action.accessibilityLabel,
+      testID: action.testID,
+      android_ripple: {
+        color: theme.colors.surface.pressed,
+        borderless: true
+      },
+      style: ({
+        pressed
+      }) => [styles.actionButton, side === 'left' ? styles.actionLeft : styles.actionRight, pressed ? styles.actionPressed : null],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.iconWrap,
+        children: action.icon
+      }), badgeValue !== undefined && !badgeIsDot ? /*#__PURE__*/_jsx(View, {
+        style: [styles.badge, badgeStyle],
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.badgeText,
+          numberOfLines: 1,
+          children: String(badgeValue)
+        })
+      }) : null]
+    })
+  });
+};
+const COLLAPSE_RANGE = 60;
+const LARGE_TITLE_SCALE_END = 0.71; // 2xl(24) -> lg(~17) ≈ 0.71
+
+const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    title,
+    subtitle,
+    titleAlignment = 'left',
+    leftAction,
+    rightActions,
+    variant = 'default',
+    transparent = false,
+    scrollY,
+    style,
+    containerStyle,
+    titleStyle,
+    subtitleStyle,
+    badgeStyle,
+    haptic,
+    testID
+  } = props;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const v = useMemo(() => variantSize(theme, variant), [theme, variant]);
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const isCollapsing = variant === 'large' && scrollY !== undefined;
+
+  // Interpolations for the collapsing-app-bar behaviour. Native driver supports
+  // transform/opacity; height + borderBottomWidth must run on the JS driver and
+  // are wired through the same scrollY (RN coalesces the listener).
+  const collapseTranslateDistance = theme.components.appBar?.collapseTranslateDistance ?? -20;
+  const collapse = useMemo(() => {
+    if (!scrollY) {
+      return null;
+    }
+    const clamp = {
+      inputRange: [0, COLLAPSE_RANGE],
+      extrapolate: 'clamp'
+    };
+    return {
+      titleScale: scrollY.interpolate({
+        ...clamp,
+        outputRange: [1, LARGE_TITLE_SCALE_END]
+      }),
+      // Translate the large title from bottom-left up into the compact bar
+      // area. Approximate vertical travel = (large 96 - default 56) / 2.
+      titleTranslateY: scrollY.interpolate({
+        ...clamp,
+        outputRange: [0, collapseTranslateDistance]
+      }),
+      titleTranslateX: scrollY.interpolate({
+        ...clamp,
+        // Left-align large -> centred compact: nudge slightly toward centre.
+        outputRange: titleAlignment === 'center' ? [0, 0] : [0, 8]
+      }),
+      subtitleOpacity: scrollY.interpolate({
+        inputRange: [0, COLLAPSE_RANGE / 2],
+        outputRange: [1, 0],
+        extrapolate: 'clamp'
+      }),
+      barHeight: scrollY.interpolate({
+        ...clamp,
+        outputRange: [96, 56]
+      }),
+      borderOpacity: scrollY.interpolate({
+        ...clamp,
+        outputRange: [0, 1]
+      })
+    };
+  }, [scrollY, titleAlignment, collapseTranslateDistance]);
+  const titleNode = title ? /*#__PURE__*/_jsx(Animated.Text, {
+    style: [styles.title, {
+      fontSize: v.titleSize,
+      fontWeight: theme.typography.fontWeight[v.titleWeight],
+      textAlign: titleAlignment === 'center' ? 'center' : 'left'
+    }, isCollapsing && collapse ? {
+      transform: [{
+        translateX: collapse.titleTranslateX
+      }, {
+        translateY: collapse.titleTranslateY
+      }, {
+        scale: collapse.titleScale
+      }]
+    } : null, titleStyle],
+    numberOfLines: 1,
+    children: title
+  }) : null;
+  const subtitleNode = subtitle ? /*#__PURE__*/_jsx(Animated.Text, {
+    style: [styles.subtitle, {
+      textAlign: titleAlignment === 'center' ? 'center' : 'left'
+    }, isCollapsing && collapse ? {
+      opacity: collapse.subtitleOpacity
+    } : null, subtitleStyle],
+    numberOfLines: 1,
+    children: subtitle
+  }) : null;
+  const titleBlock = /*#__PURE__*/_jsxs(View, {
+    style: [styles.titleColumn, titleAlignment === 'center' ? styles.titleColumnCenter : null, v.alignBottom ? styles.titleColumnBottom : null],
+    children: [titleNode, subtitleNode]
+  });
+
+  // Whole-bar height needs the JS driver (height isn't transform/opacity).
+  // Border opacity is animated via a dedicated overlay so the underlying
+  // background stays on the native driver.
+  const RootContainer = isCollapsing ? Animated.View : View;
+  const rootHeightStyle = isCollapsing && collapse ? {
+    height: Animated.add(collapse.barHeight, new Animated.Value(insets.top))
+  } : {
+    height: v.height + insets.top
+  };
+  return /*#__PURE__*/_jsxs(RootContainer, {
+    ref: ref,
+    accessibilityRole: "header",
+    testID: testID,
+    style: [styles.root, {
+      paddingTop: insets.top,
+      backgroundColor: transparent ? 'transparent' : theme.colors.background.elevated
+    }, rootHeightStyle,
+    // Static border for non-collapsing case; collapsing case overlays an
+    // animated border below.
+    !isCollapsing ? {
+      borderBottomWidth: transparent ? 0 : StyleSheet.hairlineWidth,
+      borderBottomColor: theme.colors.border.primary
+    } : null, style, containerStyle],
+    children: [isCollapsing && collapse && !transparent ? /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [styles.animatedBorder, {
+        backgroundColor: theme.colors.border.primary,
+        opacity: collapse.borderOpacity
+      }]
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: [styles.row, v.alignBottom ? styles.rowAlignBottom : null, {
+        flex: 1
+      }],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.sideSlot,
+        children: leftAction ? /*#__PURE__*/_jsx(ActionButton, {
+          action: leftAction,
+          side: "left",
+          haptic: haptic
+        }) : null
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.center, titleAlignment === 'center' ? styles.centerAligned : styles.centerLeft],
+        children: titleBlock
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.sideSlot, styles.sideSlotRight],
+        children: rightActions?.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
+          action: action,
+          side: "right",
+          badgeStyle: badgeStyle,
+          haptic: haptic
+        }, `appbar-right-${index}`))
+      })]
+    })]
+  });
+});
+AppBar.displayName = 'AppBar';
+const buildStyles = theme => StyleSheet.create({
+  root: {
+    width: '100%'
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: theme.spacing.xs
+  },
+  rowAlignBottom: {
+    alignItems: 'flex-end',
+    paddingBottom: theme.spacing.sm
+  },
+  sideSlot: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minWidth: theme.components.appBar?.sideSlotMinWidth ?? 48
+  },
+  sideSlotRight: {
+    justifyContent: 'flex-end'
+  },
+  center: {
+    flex: 1,
+    paddingHorizontal: theme.spacing.xs
+  },
+  centerAligned: {
+    alignItems: 'center'
+  },
+  centerLeft: {
+    alignItems: 'flex-start'
+  },
+  titleColumn: {
+    flexDirection: 'column'
+  },
+  titleColumnCenter: {
+    alignItems: 'center'
+  },
+  titleColumnBottom: {
+    justifyContent: 'flex-end'
+  },
+  title: {
+    color: theme.colors.text.primary
+  },
+  subtitle: {
+    marginTop: theme.components.appBar?.subtitleMarginTop ?? 2,
+    color: theme.colors.text.tertiary,
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.normal
+  },
+  animatedBorder: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: StyleSheet.hairlineWidth
+  }
+});
+const buildActionStyles = theme => StyleSheet.create({
+  actionButton: {
+    width: theme.components.appBar?.actionButtonSize ?? 40,
+    height: theme.components.appBar?.actionButtonSize ?? 40,
+    borderRadius: theme.radius.full,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  actionLeft: {
+    marginRight: theme.spacing.xs
+  },
+  actionRight: {
+    marginLeft: theme.spacing.xs
+  },
+  actionPressed: {
+    backgroundColor: theme.colors.surface.pressed
+  },
+  iconWrap: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  badge: {
+    position: 'absolute',
+    top: theme.components.appBar?.badgeOffset ?? 4,
+    right: theme.components.appBar?.badgeOffset ?? 4,
+    minWidth: theme.components.appBar?.badgeMinWidth ?? 16,
+    height: theme.components.appBar?.badgeHeight ?? 16,
+    paddingHorizontal: theme.components.appBar?.badgePaddingHorizontal ?? 4,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.colors.error,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  badgeText: {
+    color: theme.colors.text.inverse,
+    fontSize: theme.components.appBar?.badgeFontSize ?? 10,
+    fontWeight: theme.typography.fontWeight.semibold,
+    lineHeight: theme.components.appBar?.badgeLineHeight ?? 12
+  }
+});
+export { AppBar };
+export default AppBar;
+//# sourceMappingURL=AppBar.js.map

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

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

package/lib/module/components/AsyncBlock/AsyncBlock.js

@@ -0,0 +1,81 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { EmptyState } from "../EmptyState/index.js";
+import { Spinner } from "../Spinner/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The loading / error / empty / content switcher every screen that fetches data
+ * needs. Without it each screen re-implements the same four-way branch and they
+ * disagree — one shows a spinner over stale rows, the next flashes an empty
+ * state mid-fetch.
+ *
+ * Precedence is fixed: `loading` wins over everything, then `error`, then
+ * `empty`, then `children`. A fetch that is both in flight and holding a stale
+ * error shows only the loading state, which is the least surprising reading of
+ * "still in flight".
+ */
+export const AsyncBlock = ({
+  loading = false,
+  error,
+  empty = false,
+  onRetry,
+  skeleton,
+  emptyTitle = 'Nothing here yet',
+  emptyDescription,
+  emptyIcon,
+  errorTitle = "That didn't load",
+  retryLabel = 'Try again',
+  children,
+  style,
+  testID
+}) => {
+  const theme = useTheme();
+  if (loading) {
+    return /*#__PURE__*/_jsx(View, {
+      style: style,
+      testID: testID,
+      children: skeleton ?? /*#__PURE__*/_jsx(View, {
+        style: {
+          paddingVertical: theme.spacing['2xl'],
+          alignItems: 'center'
+        },
+        children: /*#__PURE__*/_jsx(Spinner, {})
+      })
+    });
+  }
+  if (error) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: style,
+      testID: testID,
+      children: [/*#__PURE__*/_jsx(EmptyState, {
+        title: errorTitle,
+        description: typeof error === 'string' ? error : undefined,
+        action: onRetry ? {
+          label: retryLabel,
+          onPress: onRetry
+        } : undefined
+      }), typeof error === 'string' ? null : error]
+    });
+  }
+  if (empty) {
+    return /*#__PURE__*/_jsx(View, {
+      style: style,
+      testID: testID,
+      children: /*#__PURE__*/_jsx(EmptyState, {
+        icon: emptyIcon,
+        title: emptyTitle,
+        description: emptyDescription
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: style,
+    testID: testID,
+    children: children
+  });
+};
+export default AsyncBlock;
+//# sourceMappingURL=AsyncBlock.js.map

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

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

package/lib/module/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,220 @@
+"use strict";
+
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Keyboard, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useControllableState } from "../../hooks/index.js";
+import { useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { Input } from "../Input/index.js";
+import { Spinner } from "../Spinner/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultGetLabel = o => typeof o === 'string' ? o : String(o);
+function Autocomplete(props) {
+  const {
+    options,
+    value,
+    defaultValue,
+    onChangeText,
+    onSelect,
+    getOptionLabel,
+    getOptionKey,
+    filter,
+    minChars = 1,
+    maxResults = 8,
+    emptyText = 'No matches',
+    loading = false,
+    filterMode = 'client',
+    loadingText = 'Searching…',
+    placeholder,
+    label,
+    error,
+    helperText,
+    disabled = false,
+    size = 'md',
+    variant,
+    haptic,
+    style,
+    listStyle,
+    optionTextStyle,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const [text, setText] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? '',
+    onChange: onChangeText
+  });
+  const [focused, setFocused] = useState(false);
+  const [fieldHeight, setFieldHeight] = useState(0);
+  const blurTimer = useRef(null);
+  const labelOf = useCallback(o => getOptionLabel ? getOptionLabel(o) : defaultGetLabel(o), [getOptionLabel]);
+  const filtered = useMemo(() => {
+    // Server-side search: trust the provided options, don't re-filter them away.
+    if (filterMode === 'none') {
+      return options.slice(0, maxResults);
+    }
+    const q = text.trim();
+    if (q.length < minChars) {
+      return [];
+    }
+    const lower = q.toLowerCase();
+    const match = filter ? o => filter(o, q) : o => labelOf(o).toLowerCase().includes(lower);
+    return options.filter(match).slice(0, maxResults);
+  }, [options, text, minChars, maxResults, filter, labelOf, filterMode]);
+  const showList = focused && (loading || text.trim().length >= minChars);
+  const handleSelect = useCallback(o => {
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    if (blurTimer.current) {
+      clearTimeout(blurTimer.current);
+    }
+    setText(labelOf(o));
+    setFocused(false);
+    Keyboard.dismiss();
+    onSelect(o);
+  }, [haptic, setText, labelOf, onSelect]);
+  React.useEffect(() => () => {
+    if (blurTimer.current) {
+      clearTimeout(blurTimer.current);
+    }
+  }, []);
+  const onFieldLayout = useCallback(e => {
+    setFieldHeight(e.nativeEvent.layout.height);
+  }, []);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(View, {
+      onLayout: onFieldLayout,
+      children: /*#__PURE__*/_jsx(Input, {
+        value: text,
+        onChangeText: setText,
+        onFocus: () => {
+          if (blurTimer.current) {
+            clearTimeout(blurTimer.current);
+          }
+          setFocused(true);
+        },
+        onBlur: () => {
+          blurTimer.current = setTimeout(() => setFocused(false), 120);
+        },
+        placeholder: placeholder,
+        label: label,
+        error: error,
+        helperText: helperText,
+        editable: !disabled
+        // editable={false} stops typing but says nothing to a screen reader,
+        // so a disabled field announced as editable is the bug this closes.
+        ,
+        accessibilityState: {
+          disabled
+        },
+        size: size,
+        variant: variant,
+        autoCorrect: false,
+        autoCapitalize: "none"
+      })
+    }), showList ? /*#__PURE__*/_jsx(View, {
+      style: [styles.list, {
+        top: fieldHeight,
+        backgroundColor: theme.colors.background.elevated,
+        borderColor: theme.colors.border.primary,
+        borderRadius: theme.radius.md,
+        ...theme.shadows.lg
+      }, listStyle],
+      children: loading ? /*#__PURE__*/_jsxs(View, {
+        style: styles.loadingRow,
+        children: [/*#__PURE__*/_jsx(Spinner, {
+          size: "sm"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.loadingText, {
+            color: theme.colors.text.secondary,
+            fontSize: theme.typography.fontSize.sm
+          }],
+          children: loadingText
+        })]
+      }) : filtered.length === 0 ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.empty, {
+          color: theme.colors.text.tertiary,
+          fontSize: theme.typography.fontSize.sm
+        }],
+        children: emptyText
+      }) : /*#__PURE__*/_jsx(ScrollView, {
+        keyboardShouldPersistTaps: "handled",
+        style: styles.scroll,
+        children: filtered.map((o, i) => /*#__PURE__*/_jsx(Pressable, {
+          onPress: () => handleSelect(o),
+          android_ripple: {
+            color: theme.colors.surface.pressed
+          },
+          style: ({
+            pressed
+          }) => [styles.option, {
+            paddingHorizontal: theme.spacing.md,
+            paddingVertical: theme.spacing.sm,
+            backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
+          }],
+          accessibilityRole: "button",
+          accessibilityLabel: labelOf(o),
+          accessibilityState: {
+            selected: labelOf(o) === text
+          },
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.optionText, {
+              color: theme.colors.text.primary,
+              fontSize: theme.typography.fontSize.base
+            }, optionTextStyle],
+            numberOfLines: 1,
+            children: labelOf(o)
+          })
+        }, getOptionKey ? getOptionKey(o) : `${labelOf(o)}-${i}`))
+      })
+    }) : null]
+  });
+}
+Autocomplete.displayName = 'Autocomplete';
+const buildStyles = theme => StyleSheet.create({
+  container: {
+    width: '100%',
+    position: 'relative',
+    zIndex: 10
+  },
+  list: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    borderWidth: StyleSheet.hairlineWidth,
+    overflow: 'hidden',
+    zIndex: 20,
+    maxHeight: 240
+  },
+  scroll: {
+    maxHeight: 240
+  },
+  option: {
+    width: '100%'
+  },
+  optionText: {
+    includeFontPadding: false
+  },
+  empty: {
+    padding: theme.spacing.md,
+    textAlign: 'center',
+    includeFontPadding: false
+  },
+  loadingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing.sm,
+    padding: theme.spacing.md
+  },
+  loadingText: {
+    includeFontPadding: false
+  }
+});
+export { Autocomplete };
+export default Autocomplete;
+//# sourceMappingURL=Autocomplete.js.map

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

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