@webority-technologies/mobile 0.0.1

package/lib/module/components/Input/Input.js

@@ -0,0 +1,384 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - react-native-vector-icons ships no bundled types in this version
+import Feather from 'react-native-vector-icons/Feather';
+import { useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sizeMap = {
+  sm: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    minHeight: 38,
+    multilineMinHeight: 72,
+    fontSize: 13,
+    borderRadius: 10,
+    iconSize: 16
+  },
+  md: {
+    paddingHorizontal: 14,
+    paddingVertical: 11,
+    minHeight: 46,
+    multilineMinHeight: 92,
+    fontSize: 15,
+    borderRadius: 12,
+    iconSize: 18
+  },
+  lg: {
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    minHeight: 54,
+    multilineMinHeight: 110,
+    fontSize: 16,
+    borderRadius: 14,
+    iconSize: 20
+  }
+};
+const Input = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    label,
+    placeholder,
+    value,
+    onChangeText,
+    error,
+    helperText,
+    secureTextEntry = false,
+    showPasswordToggle = false,
+    disabled = false,
+    multiline = false,
+    leftIcon,
+    rightIcon,
+    size = 'md',
+    variant = 'outlined',
+    required = false,
+    maxLength,
+    style,
+    inputStyle,
+    labelStyle,
+    onFocus,
+    onBlur,
+    accessibilityLabel,
+    testID,
+    editable,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const sizeStyles = sizeMap[size];
+  const [isFocused, setIsFocused] = useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const hasValue = typeof value === 'string' && value.length > 0;
+  const hasError = typeof error === 'string' && error.length > 0;
+  const isEditable = !disabled && editable !== false;
+  const shouldFloat = isFocused || hasValue;
+  const showFloatingLabel = Boolean(label) && !multiline;
+
+  // Animations
+  const focusAnim = useRef(new Animated.Value(0)).current; // 0 -> blurred, 1 -> focused
+  const errorAnim = useRef(new Animated.Value(0)).current; // 0 -> no error, 1 -> error
+  const labelAnim = useRef(new Animated.Value(shouldFloat ? 1 : 0)).current;
+  const shakeAnim = useRef(new Animated.Value(0)).current;
+  const messageAnim = useRef(new Animated.Value(hasError || helperText ? 1 : 0)).current;
+
+  // Focus border animation
+  useEffect(() => {
+    Animated.timing(focusAnim, {
+      toValue: isFocused ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }).start();
+  }, [isFocused, focusAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
+
+  // Error border + message animation
+  useEffect(() => {
+    Animated.timing(errorAnim, {
+      toValue: hasError ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }).start();
+  }, [hasError, errorAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
+
+  // Floating label animation
+  useEffect(() => {
+    Animated.parallel([Animated.timing(labelAnim, {
+      toValue: shouldFloat ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    })]).start();
+  }, [shouldFloat, labelAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
+
+  // Helper / error fade
+  useEffect(() => {
+    Animated.timing(messageAnim, {
+      toValue: hasError || Boolean(helperText) ? 1 : 0,
+      duration: 150,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: true
+    }).start();
+  }, [hasError, helperText, messageAnim, theme.motion.easing.standard]);
+
+  // Error shake
+  const prevErrorRef = useRef(hasError);
+  useEffect(() => {
+    if (hasError && !prevErrorRef.current) {
+      shakeAnim.setValue(0);
+      Animated.sequence([Animated.timing(shakeAnim, {
+        toValue: 1,
+        duration: 50,
+        useNativeDriver: true
+      }), Animated.timing(shakeAnim, {
+        toValue: -1,
+        duration: 50,
+        useNativeDriver: true
+      }), Animated.timing(shakeAnim, {
+        toValue: 1,
+        duration: 50,
+        useNativeDriver: true
+      }), Animated.timing(shakeAnim, {
+        toValue: -1,
+        duration: 50,
+        useNativeDriver: true
+      }), Animated.timing(shakeAnim, {
+        toValue: 0,
+        duration: 100,
+        useNativeDriver: true
+      })]).start();
+      triggerHaptic('notificationError');
+    }
+    prevErrorRef.current = hasError;
+  }, [hasError, shakeAnim]);
+  const handleFocus = useCallback(e => {
+    setIsFocused(true);
+    onFocus?.(e);
+  }, [onFocus]);
+  const handleBlur = useCallback(e => {
+    setIsFocused(false);
+    onBlur?.(e);
+  }, [onBlur]);
+  const togglePasswordVisibility = useCallback(() => {
+    triggerHaptic('selection');
+    setIsPasswordVisible(prev => !prev);
+  }, []);
+
+  // Derived border + background colors with smooth interpolation
+  const blurredBorderColor = variant === 'filled' ? 'transparent' : theme.colors.border.primary;
+  const focusedBorderColor = theme.colors.border.focus;
+  const errorBorderColor = theme.colors.border.error;
+  const baseBorderColor = focusAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [blurredBorderColor, focusedBorderColor]
+  });
+  const animatedBorderColor = errorAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [baseBorderColor, errorBorderColor]
+  });
+  const containerBackgroundColor = disabled ? theme.colors.surface.disabled : variant === 'filled' ? theme.colors.background.secondary : theme.colors.background.primary;
+
+  // Floating label styles
+  const labelTranslateY = labelAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, -22]
+  });
+  const labelScale = labelAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0.85]
+  });
+  const labelColor = hasError ? theme.colors.text.tertiary : isFocused ? theme.colors.border.focus : theme.colors.text.secondary;
+  const shakeTranslateX = shakeAnim.interpolate({
+    inputRange: [-1, 0, 1],
+    outputRange: [-6, 0, 6]
+  });
+  const inputTextColor = disabled ? theme.colors.text.disabled : theme.colors.text.primary;
+  const placeholderTextColor = theme.colors.text.tertiary;
+  const messageText = hasError ? error : helperText;
+  const messageColor = hasError ? theme.colors.error : theme.colors.text.secondary;
+  const a11yLabel = accessibilityLabel ?? label ?? placeholder;
+
+  // Padding adjustments to leave room for icons
+  const leftPad = leftIcon ? sizeStyles.paddingHorizontal + sizeStyles.iconSize + theme.spacing.xs : sizeStyles.paddingHorizontal;
+  const rightPadIcon = showPasswordToggle && secureTextEntry || rightIcon;
+  const rightPad = rightPadIcon ? sizeStyles.paddingHorizontal + sizeStyles.iconSize + theme.spacing.xs : sizeStyles.paddingHorizontal;
+
+  // Floating label positioning depends on size; when floated it sits above the field.
+  const floatedLabelTopOffset = -(sizeStyles.fontSize - 2);
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    style: [styles.container, {
+      transform: [{
+        translateX: shakeTranslateX
+      }]
+    }, style],
+    children: [label && !showFloatingLabel ? /*#__PURE__*/_jsxs(Text, {
+      style: [styles.staticLabel, {
+        color: hasError ? theme.colors.error : isFocused ? theme.colors.border.focus : theme.colors.text.secondary,
+        fontSize: theme.typography.fontSize.sm,
+        fontWeight: theme.typography.fontWeight.medium,
+        marginBottom: theme.spacing.xxs
+      }, labelStyle],
+      children: [label, required ? /*#__PURE__*/_jsx(Text, {
+        style: {
+          color: theme.colors.error
+        },
+        children: " *"
+      }) : null]
+    }) : null, /*#__PURE__*/_jsxs(Animated.View, {
+      style: [styles.inputWrapper, {
+        minHeight: multiline ? sizeStyles.multilineMinHeight : sizeStyles.minHeight,
+        borderRadius: sizeStyles.borderRadius,
+        borderWidth: variant === 'outlined' ? 1.5 : 0,
+        borderColor: animatedBorderColor,
+        backgroundColor: containerBackgroundColor,
+        opacity: disabled ? 0.65 : 1,
+        paddingLeft: leftPad,
+        paddingRight: rightPad
+      }],
+      children: [leftIcon ? /*#__PURE__*/_jsx(View, {
+        style: [styles.leftIconWrap, {
+          left: sizeStyles.paddingHorizontal - 2,
+          height: sizeStyles.minHeight
+        }],
+        pointerEvents: "none",
+        children: leftIcon
+      }) : null, showFloatingLabel ? /*#__PURE__*/_jsxs(Animated.Text, {
+        pointerEvents: "none",
+        style: [styles.floatingLabel, {
+          top: sizeStyles.paddingVertical,
+          left: leftPad,
+          color: labelColor,
+          fontSize: sizeStyles.fontSize,
+          fontWeight: theme.typography.fontWeight.medium,
+          backgroundColor: shouldFloat && variant === 'outlined' ? theme.colors.background.primary : 'transparent',
+          paddingHorizontal: shouldFloat && variant === 'outlined' ? 4 : 0,
+          transform: [{
+            translateY: labelTranslateY
+          }, {
+            scale: labelScale
+          }]
+        }, labelStyle],
+        children: [label, required ? /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: theme.colors.error
+          },
+          children: " *"
+        }) : null]
+      }) : null, /*#__PURE__*/_jsx(TextInput, {
+        ref: ref,
+        style: [styles.input, {
+          color: inputTextColor,
+          fontSize: sizeStyles.fontSize,
+          paddingVertical: sizeStyles.paddingVertical,
+          minHeight: multiline ? sizeStyles.multilineMinHeight : sizeStyles.minHeight,
+          textAlignVertical: multiline ? 'top' : 'center'
+        }, inputStyle],
+        placeholder: showFloatingLabel && !shouldFloat ? undefined : placeholder,
+        placeholderTextColor: placeholderTextColor,
+        value: value,
+        onChangeText: onChangeText,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        editable: isEditable,
+        secureTextEntry: secureTextEntry && !isPasswordVisible,
+        multiline: multiline,
+        maxLength: maxLength,
+        selectionColor: theme.colors.border.focus,
+        accessibilityLabel: a11yLabel,
+        accessibilityState: {
+          disabled
+        },
+        testID: testID,
+        ...rest
+      }), showPasswordToggle && secureTextEntry ? /*#__PURE__*/_jsx(Pressable, {
+        onPress: togglePasswordVisibility,
+        disabled: !isEditable,
+        hitSlop: 8,
+        accessibilityRole: "button",
+        accessibilityLabel: isPasswordVisible ? 'Hide password' : 'Show password',
+        style: [styles.rightIconWrap, {
+          right: sizeStyles.paddingHorizontal - 2,
+          height: multiline ? sizeStyles.multilineMinHeight : sizeStyles.minHeight
+        }],
+        children: /*#__PURE__*/_jsx(Feather, {
+          name: isPasswordVisible ? 'eye-off' : 'eye',
+          size: sizeStyles.iconSize,
+          color: disabled ? theme.colors.text.disabled : theme.colors.text.secondary
+        })
+      }) : rightIcon ? /*#__PURE__*/_jsx(View, {
+        style: [styles.rightIconWrap, {
+          right: sizeStyles.paddingHorizontal - 2,
+          height: multiline ? sizeStyles.multilineMinHeight : sizeStyles.minHeight
+        }],
+        pointerEvents: "box-none",
+        children: rightIcon
+      }) : null]
+    }), messageText ? /*#__PURE__*/_jsx(Animated.Text, {
+      style: [styles.messageText, {
+        color: messageColor,
+        fontSize: theme.typography.fontSize.xs,
+        marginTop: theme.spacing.xxs,
+        opacity: messageAnim
+      }],
+      accessibilityLiveRegion: hasError ? 'polite' : 'none',
+      children: messageText
+    }) : null, typeof maxLength === 'number' && typeof value === 'string' ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.counterText, {
+        color: theme.colors.text.tertiary,
+        fontSize: theme.typography.fontSize.xs,
+        marginTop: theme.spacing.xxs
+      }],
+      children: `${value.length} / ${maxLength}`
+    }) : null]
+  });
+});
+Input.displayName = 'Input';
+const buildStyles = _theme => StyleSheet.create({
+  container: {
+    width: '100%'
+  },
+  staticLabel: {
+    includeFontPadding: false
+  },
+  inputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    position: 'relative',
+    overflow: 'visible'
+  },
+  input: {
+    flex: 1,
+    padding: 0,
+    margin: 0,
+    includeFontPadding: false
+  },
+  floatingLabel: {
+    position: 'absolute',
+    zIndex: 1
+  },
+  leftIconWrap: {
+    position: 'absolute',
+    top: 0,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  rightIconWrap: {
+    position: 'absolute',
+    top: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 4
+  },
+  messageText: {
+    includeFontPadding: false
+  },
+  counterText: {
+    alignSelf: 'flex-end',
+    includeFontPadding: false
+  }
+});
+export { Input };
+export default Input;
+//# sourceMappingURL=Input.js.map

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

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

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

@@ -0,0 +1,237 @@
+"use strict";
+
+import React, { forwardRef, useMemo } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { usePressAnimation } from "../../hooks/usePressAnimation.js";
+import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { Swipeable } from "../Swipeable/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sizeFor = (theme, size) => {
+  switch (size) {
+    case 'sm':
+      return {
+        paddingVertical: theme.spacing.sm,
+        titleSize: theme.typography.fontSize.sm,
+        subtitleSize: theme.typography.fontSize.xs,
+        minHeight: 44
+      };
+    case 'lg':
+      return {
+        paddingVertical: theme.spacing.lg,
+        titleSize: theme.typography.fontSize.lg,
+        subtitleSize: theme.typography.fontSize.sm,
+        minHeight: 72
+      };
+    case 'md':
+    default:
+      return {
+        paddingVertical: theme.spacing.md,
+        titleSize: theme.typography.fontSize.base,
+        subtitleSize: theme.typography.fontSize.sm,
+        minHeight: 56
+      };
+  }
+};
+const Chevron = ({
+  color
+}) => /*#__PURE__*/_jsx(Text, {
+  style: [chevronStyles.chevron, {
+    color
+  }],
+  children: '›'
+});
+const chevronStyles = StyleSheet.create({
+  chevron: {
+    fontSize: 22,
+    lineHeight: 22,
+    fontWeight: '400'
+  }
+});
+const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    title,
+    subtitle,
+    description,
+    left,
+    right,
+    onPress,
+    selected = false,
+    disabled = false,
+    size = 'md',
+    divider = false,
+    chevron = false,
+    leftActions,
+    rightActions,
+    accessibilityLabel,
+    accessibilityHint,
+    style,
+    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 handlePress = event => {
+    if (!isInteractive) return;
+    triggerHaptic('selection');
+    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],
+    children: [left ? /*#__PURE__*/_jsx(View, {
+      style: styles.leftSlot,
+      children: left
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: styles.middle,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.title, {
+          fontSize: sz.titleSize,
+          fontWeight: theme.typography.fontWeight.medium,
+          color: disabled ? theme.colors.text.disabled : theme.colors.text.primary
+        }],
+        numberOfLines: 1,
+        children: title
+      }), subtitle ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.subtitle, {
+          fontSize: sz.subtitleSize,
+          color: disabled ? theme.colors.text.disabled : theme.colors.text.secondary
+        }],
+        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
+        }],
+        numberOfLines: 2,
+        children: description
+      }) : null]
+    }), right || chevron ? /*#__PURE__*/_jsxs(View, {
+      style: styles.rightSlot,
+      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: pressIn,
+      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;
+  if (hasSwipe) {
+    return /*#__PURE__*/_jsx(Swipeable, {
+      leftActions: leftActions,
+      rightActions: rightActions,
+      accessibilityLabel: a11yLabel,
+      children: rendered
+    });
+  }
+  return rendered;
+});
+ListItem.displayName = 'ListItem';
+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.6
+  },
+  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,
+    fontWeight: theme.typography.fontWeight.normal
+  },
+  description: {
+    marginTop: 2,
+    fontWeight: theme.typography.fontWeight.normal
+  }
+});
+export { ListItem };
+export default ListItem;
+//# sourceMappingURL=ListItem.js.map

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

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