@webority-technologies/mobile 0.0.24 → 0.0.25

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

@@ -0,0 +1,199 @@
+"use strict";
+
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Keyboard, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { useControllableState } from "../../hooks/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,
+        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),
+          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

package/lib/module/components/BottomNavigation/BottomNavigation.js

@@ -154,7 +154,7 @@ const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
             translateX: indicatorTranslateX
           }]
         }, indicatorStyle]
-      }) : null, tabs.map((tab, index) => {
+      }) : null, tabs.map(tab => {
         const isActive = tab.key === activeTab;
         const color = isActive ? theme.colors.primary : theme.colors.text.tertiary;
         const renderIcon = isActive && tab.activeIcon ? tab.activeIcon : tab.icon;

package/lib/module/components/Confetti/Confetti.js

@@ -0,0 +1,166 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import { StyleSheet, View, useWindowDimensions } from 'react-native';
+import Animated, { Easing, cancelAnimation, runOnJS, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+import { useTheme } from "../../theme/index.js";
+import { useReducedMotion } from "../../hooks/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TAU = Math.PI * 2;
+const rand = (min, max) => min + Math.random() * (max - min);
+const buildPieces = (count, colors, mode, baseSize) => Array.from({
+  length: count
+}, (_, i) => {
+  const isCannon = mode === 'cannon';
+  return {
+    color: colors[i % colors.length] ?? colors[0],
+    size: baseSize * rand(0.6, 1.4),
+    isCircle: Math.random() < 0.35,
+    baseXFrac: isCannon ? 0.5 : Math.random(),
+    vxFrac: isCannon ? rand(-0.7, 0.7) : rand(-0.15, 0.15),
+    vy0Frac: isCannon ? rand(-1.5, -1.0) : rand(0, 0.15),
+    rotations: rand(1, 5),
+    rotateDir: Math.random() < 0.5 ? 1 : -1,
+    swayAmp: rand(8, 28),
+    swayFreq: rand(1, 3),
+    flutterFreq: rand(2, 5)
+  };
+});
+const ConfettiPiece = ({
+  piece,
+  progress,
+  width,
+  height,
+  originX,
+  originY,
+  mode,
+  fadeOut
+}) => {
+  const animStyle = useAnimatedStyle(() => {
+    const t = progress.value;
+    const startX = mode === 'cannon' ? originX : piece.baseXFrac * width;
+    const startY = mode === 'cannon' ? originY : -piece.size * 2;
+    const gravity = height * (mode === 'cannon' ? 1.8 : 1.5);
+    const x = startX + piece.vxFrac * width * t + Math.sin(t * piece.swayFreq * TAU) * piece.swayAmp;
+    const y = startY + piece.vy0Frac * height * t + gravity * t * t;
+    const rotate = piece.rotateDir * piece.rotations * 360 * t;
+    // Paper-flutter: oscillate scaleX so pieces read as thin spinning paper.
+    const flutter = 0.35 + 0.65 * Math.abs(Math.cos(t * piece.flutterFreq * TAU));
+    const opacity = fadeOut ? Math.max(0, 1 - Math.max(0, t - 0.8) / 0.2) : 1;
+    return {
+      opacity,
+      transform: [{
+        translateX: x
+      }, {
+        translateY: y
+      }, {
+        rotate: `${rotate}deg`
+      }, {
+        scaleX: flutter
+      }]
+    };
+  });
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [{
+      position: 'absolute',
+      width: piece.size,
+      height: piece.isCircle ? piece.size : piece.size * 0.5,
+      borderRadius: piece.isCircle ? piece.size / 2 : 1,
+      backgroundColor: piece.color
+    }, animStyle]
+  });
+};
+const Confetti = /*#__PURE__*/forwardRef(({
+  count = 80,
+  colors,
+  mode = 'rain',
+  origin,
+  duration = 2800,
+  fadeOut = true,
+  autoStart = false,
+  recycle = false,
+  size = 10,
+  onComplete,
+  style,
+  testID
+}, ref) => {
+  const theme = useTheme();
+  const reduceMotion = useReducedMotion();
+  const window = useWindowDimensions();
+  const [layout, setLayout] = useState({
+    width: window.width,
+    height: window.height
+  });
+  const [active, setActive] = useState(false);
+  const [pieces, setPieces] = useState([]);
+  const palette = useMemo(() => colors ?? [theme.colors.primary, theme.colors.secondary, theme.colors.success, theme.colors.warning, theme.colors.error, theme.colors.info], [colors, theme.colors]);
+  const progress = useSharedValue(0);
+  const finish = useCallback(() => {
+    setActive(false);
+    onComplete?.();
+  }, [onComplete]);
+  const start = useCallback(() => {
+    if (reduceMotion) {
+      onComplete?.();
+      return;
+    }
+    cancelAnimation(progress);
+    progress.value = 0;
+    setPieces(buildPieces(count, palette, mode, size));
+    setActive(true);
+    const tween = withTiming(1, {
+      duration,
+      easing: Easing.linear
+    }, finished => {
+      'worklet';
+
+      if (finished && !recycle) runOnJS(finish)();
+    });
+    progress.value = recycle ? withRepeat(tween, -1, false) : tween;
+  }, [reduceMotion, progress, duration, recycle, finish, onComplete, count, palette, mode, size]);
+  const stop = useCallback(() => {
+    cancelAnimation(progress);
+    setActive(false);
+  }, [progress]);
+  useImperativeHandle(ref, () => ({
+    start,
+    stop
+  }), [start, stop]);
+  useEffect(() => {
+    if (autoStart) start();
+    return () => cancelAnimation(progress);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onLayout = useCallback(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    if (width > 0 && height > 0) setLayout({
+      width,
+      height
+    });
+  }, []);
+  const originX = origin?.x ?? layout.width / 2;
+  const originY = origin?.y ?? layout.height;
+  return /*#__PURE__*/_jsx(View, {
+    style: [StyleSheet.absoluteFill, style],
+    pointerEvents: "none",
+    onLayout: onLayout,
+    testID: testID,
+    children: active ? pieces.map((piece, i) => /*#__PURE__*/_jsx(ConfettiPiece, {
+      piece: piece,
+      progress: progress,
+      width: layout.width,
+      height: layout.height,
+      originX: originX,
+      originY: originY,
+      mode: mode,
+      fadeOut: fadeOut
+    }, i)) : null
+  });
+});
+Confetti.displayName = 'Confetti';
+export { Confetti };
+export default Confetti;
+//# sourceMappingURL=Confetti.js.map

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

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

package/lib/module/components/FieldBase/FieldBase.js

@@ -28,8 +28,6 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, View } from 'react-native';
 import { useTheme, createAnimatedValue, fontFor } from "../../theme/index.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const SIDES = ['top', 'right', 'bottom', 'left'];
-
 /** Map a single colour string to all four sides (shorthand expansion). */
 const expandColorSides = value => {
   if (typeof value === 'string') {

package/lib/module/components/IconButton/IconButton.js

@@ -0,0 +1,172 @@
+"use strict";
+
+import React, { forwardRef } from 'react';
+import { Animated, Pressable, StyleSheet } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { usePressAnimation } from "../../hooks/usePressAnimation.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { Spinner } from "../Spinner/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SIZE_MAP = {
+  sm: {
+    diameter: 32,
+    icon: 16
+  },
+  md: {
+    diameter: 40,
+    icon: 20
+  },
+  lg: {
+    diameter: 48,
+    icon: 24
+  }
+};
+const toneFor = (theme, tone) => {
+  switch (tone) {
+    case 'secondary':
+      return {
+        base: theme.colors.secondary,
+        on: theme.colors.onSecondary,
+        fg: theme.colors.secondary
+      };
+    case 'success':
+      return {
+        base: theme.colors.success,
+        on: theme.colors.onSuccess,
+        fg: theme.colors.success
+      };
+    case 'warning':
+      return {
+        base: theme.colors.warning,
+        on: theme.colors.onWarning,
+        fg: theme.colors.warning
+      };
+    case 'error':
+      return {
+        base: theme.colors.error,
+        on: theme.colors.onError,
+        fg: theme.colors.error
+      };
+    case 'neutral':
+      return {
+        base: theme.colors.background.tertiary,
+        on: theme.colors.text.primary,
+        fg: theme.colors.text.primary
+      };
+    case 'primary':
+    default:
+      return {
+        base: theme.colors.primary,
+        on: theme.colors.onPrimary,
+        fg: theme.colors.primary
+      };
+  }
+};
+const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    icon,
+    onPress,
+    accessibilityLabel,
+    tone = 'primary',
+    variant = 'solid',
+    size = 'md',
+    shape = 'circle',
+    active = false,
+    disabled = false,
+    loading = false,
+    haptic,
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const sizeCfg = SIZE_MAP[size];
+  const isDisabled = disabled || loading;
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = usePressAnimation({
+    scaleTo: 0.92,
+    enabled: !isDisabled
+  });
+  const {
+    base,
+    on,
+    fg
+  } = toneFor(theme, tone);
+  const effectiveVariant = active ? 'solid' : variant;
+  let backgroundColor = 'transparent';
+  let borderColor = 'transparent';
+  let borderWidth = 0;
+  let iconColor = isDisabled ? theme.colors.text.disabled : fg;
+  if (effectiveVariant === 'solid') {
+    backgroundColor = isDisabled ? theme.colors.surface.disabled : base;
+    iconColor = isDisabled ? theme.colors.text.disabled : on;
+  } else if (effectiveVariant === 'soft') {
+    backgroundColor = isDisabled ? theme.colors.surface.disabled : `${base}22`;
+  } else if (effectiveVariant === 'outline') {
+    borderColor = isDisabled ? theme.colors.border.primary : base;
+    borderWidth = theme.colors.border.width;
+  }
+  const radius = shape === 'circle' ? sizeCfg.diameter / 2 : theme.radius.md;
+  const handlePress = e => {
+    if (isDisabled) return;
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
+    onPress?.(e);
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
+    onPress: handlePress,
+    onPressIn: pressIn,
+    onPressOut: pressOut,
+    disabled: isDisabled,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      disabled: isDisabled,
+      selected: active
+    },
+    hitSlop: 6,
+    testID: testID,
+    style: ({
+      pressed
+    }) => [styles.base, {
+      width: sizeCfg.diameter,
+      height: sizeCfg.diameter,
+      borderRadius: radius,
+      backgroundColor,
+      borderColor,
+      borderWidth,
+      opacity: pressed && effectiveVariant !== 'solid' ? 0.7 : 1
+    }, style],
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.content, {
+        transform: [{
+          scale
+        }]
+      }],
+      children: loading ? /*#__PURE__*/_jsx(Spinner, {
+        size: "sm",
+        color: iconColor
+      }) : typeof icon === 'function' ? icon({
+        color: iconColor,
+        size: sizeCfg.icon
+      }) : icon
+    })
+  });
+});
+IconButton.displayName = 'IconButton';
+const styles = StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  content: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+export { IconButton };
+export default IconButton;
+//# sourceMappingURL=IconButton.js.map

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

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

package/lib/module/components/Modal/Modal.js

@@ -13,7 +13,6 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
     visible,
     onRequestClose,
     presentation = 'centered',
-    backdropOpacity = 0.5,
     backdropPressClose = true,
     animationDuration,
     accessibilityLabel,

package/lib/module/components/ProgressBar/ProgressBar.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
-import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
+import { useTheme, createAnimatedValue, setNativeValue, Gradient } from "../../theme/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const toneColor = (theme, tone) => {
   switch (tone) {
@@ -33,6 +33,8 @@ const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
     tone = 'primary',
     trackColor,
     barColor,
+    gradient,
+    segments,
     animated = true,
     style,
     containerStyle,
@@ -53,6 +55,12 @@ const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
   const resolvedRadius = radius ?? theme.radius.full;
   const resolvedTrack = trackColor ?? theme.colors.surface.disabled;
   const resolvedBar = barColor ?? toneColor(theme, tone);
+  const resolvedGradient = useMemo(() => {
+    if (!gradient) return null;
+    if (typeof gradient === 'string') return theme.gradients[gradient] ?? null;
+    return gradient;
+  }, [gradient, theme.gradients]);
+  const hasSegments = Array.isArray(segments) && segments.length > 0;
   useEffect(() => {
     if (isIndeterminate) return;
     if (!animated) {
@@ -111,7 +119,18 @@ const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
       borderRadius: resolvedRadius,
       backgroundColor: resolvedTrack
     }, style, containerStyle],
-    children: isIndeterminate ? /*#__PURE__*/_jsx(Animated.View, {
+    children: hasSegments ? /*#__PURE__*/_jsx(View, {
+      style: [styles.segments, {
+        height
+      }],
+      children: (segments ?? []).map((s, i) => /*#__PURE__*/_jsx(View, {
+        style: {
+          width: `${clampProgress(s.value) * 100}%`,
+          height,
+          backgroundColor: s.color ?? toneColor(theme, s.tone ?? 'primary')
+        }
+      }, i))
+    }) : isIndeterminate ? /*#__PURE__*/_jsx(Animated.View, {
       style: [styles.indeterminateBar, {
         height,
         borderRadius: resolvedRadius,
@@ -125,9 +144,14 @@ const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
       style: [styles.determinateBar, {
         height,
         borderRadius: resolvedRadius,
-        backgroundColor: resolvedBar,
-        width: determinateWidth
-      }, barStyle]
+        backgroundColor: resolvedGradient ? 'transparent' : resolvedBar,
+        width: determinateWidth,
+        overflow: resolvedGradient ? 'hidden' : undefined
+      }, barStyle],
+      children: resolvedGradient ? /*#__PURE__*/_jsx(Gradient, {
+        gradient: resolvedGradient,
+        style: StyleSheet.absoluteFill
+      }) : null
     })
   });
 });
@@ -146,6 +170,10 @@ const buildStyles = _theme => StyleSheet.create({
     position: 'absolute',
     left: 0,
     top: 0
+  },
+  segments: {
+    flexDirection: 'row',
+    width: '100%'
   }
 });
 export { ProgressBar };