@webority-technologies/mobile 0.0.14 → 0.0.20

package/lib/module/components/PickerTrigger/PickerTrigger.js

@@ -0,0 +1,181 @@
+"use strict";
+
+/**
+ * PickerTrigger — the tappable input field that opens a modal picker.
+ *
+ * Standalone read-only field built on FieldBase, used by DatePicker,
+ * TimePicker and DateRangePicker (and any consumer-built picker) to render
+ * the closed-state row that matches Input / Select pixel-for-pixel.
+ *
+ * The component is purely visual + interactive — it does not own picker
+ * state. Consumers either:
+ *   - Use the built-in trigger mode on a picker, which composes this
+ *     internally and manages its own open/close.
+ *   - Render PickerTrigger themselves alongside a controlled picker.
+ */
+
+import React, { forwardRef, useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { fontFor, useTheme } from "../../theme/index.js";
+import { FieldBase, resolveFieldSize, resolveFieldTextStyle } from "../FieldBase/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PickerTrigger = /*#__PURE__*/forwardRef((props, _ref) => {
+  const {
+    value,
+    placeholder,
+    label,
+    helperText,
+    error,
+    required = false,
+    onPress,
+    clearable = false,
+    onClear,
+    leadingIcon,
+    trailing,
+    disabled = false,
+    size = 'md',
+    variant,
+    style,
+    triggerStyle,
+    valueStyle,
+    labelStyle,
+    messageStyle,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const sizeTokens = resolveFieldSize(theme, size);
+  const fieldText = resolveFieldTextStyle(theme, {
+    disabled
+  });
+  const hasValue = typeof value === 'string' && value.length > 0;
+  const hasError = typeof error === 'string' && error.length > 0;
+  const displayText = hasValue ? value : placeholder ?? 'Select…';
+  const valueColor = hasValue ? fieldText.color : fieldText.placeholderColor;
+  const a11ySummary = hasValue ? `${label ?? 'Selection'}: ${value}` : placeholder ?? 'No selection';
+  const a11yLabel = accessibilityLabel ?? a11ySummary;
+  const a11yState = {
+    disabled
+  };
+  const handleClear = () => {
+    if (disabled) return;
+    onClear?.();
+  };
+  const showChevron = trailing === undefined;
+  const showClear = clearable && hasValue && !disabled;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.root, style],
+    testID: testID,
+    children: [label ? /*#__PURE__*/_jsxs(Text, {
+      style: [styles.label, {
+        color: hasError ? theme.colors.error : theme.colors.text.secondary,
+        fontSize: theme.typography.fontSize.sm,
+        ...fontFor(theme, 'medium'),
+        marginBottom: theme.spacing.xxs
+      }, labelStyle],
+      children: [label, required ? /*#__PURE__*/_jsx(Text, {
+        style: {
+          color: theme.colors.error
+        },
+        children: " *"
+      }) : null]
+    }) : null, /*#__PURE__*/_jsx(FieldBase, {
+      size: size,
+      variant: variant,
+      disabled: disabled,
+      error: hasError,
+      filled: hasValue,
+      onPress: onPress,
+      leading: leadingIcon,
+      trailing: showClear || showChevron || trailing !== null ? /*#__PURE__*/_jsxs(View, {
+        style: styles.trailingRow,
+        children: [showClear ? /*#__PURE__*/_jsx(Text, {
+          onPress: handleClear,
+          accessibilityRole: "button",
+          accessibilityLabel: "Clear",
+          style: {
+            fontSize: sizeTokens.iconSize,
+            color: theme.colors.text.secondary,
+            paddingHorizontal: 4
+          },
+          children: "\xD7"
+        }) : null, trailing !== undefined ? trailing : showChevron ? /*#__PURE__*/_jsx(Chevron, {
+          size: sizeTokens.iconSize,
+          color: disabled ? theme.colors.text.disabled : theme.colors.text.tertiary
+        }) : null]
+      }) : null,
+      accessibilityLabel: a11yLabel,
+      accessibilityState: a11yState,
+      accessibilityRole: "button",
+      style: triggerStyle,
+      children: /*#__PURE__*/_jsx(Text, {
+        numberOfLines: 1,
+        style: [styles.valueText, {
+          color: valueColor,
+          fontSize: sizeTokens.fontSize,
+          ...fieldText.weightStyle
+        }, valueStyle],
+        children: displayText
+      })
+    }), hasError || helperText ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.message, {
+        color: hasError ? theme.colors.error : theme.colors.text.secondary,
+        fontSize: theme.typography.fontSize.xs,
+        marginTop: theme.spacing.xxs
+      }, messageStyle],
+      accessibilityLiveRegion: hasError ? 'polite' : 'none',
+      children: hasError ? error : helperText
+    }) : null]
+  });
+});
+PickerTrigger.displayName = 'PickerTrigger';
+const Chevron = ({
+  size,
+  color
+}) => {
+  // Simple down-pointing triangle drawn with borders — no icon dependency.
+  const half = size / 2;
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      width: size,
+      height: size,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        width: 0,
+        height: 0,
+        borderLeftWidth: half * 0.7,
+        borderRightWidth: half * 0.7,
+        borderTopWidth: half * 0.7,
+        borderLeftColor: 'transparent',
+        borderRightColor: 'transparent',
+        borderTopColor: color
+      }
+    })
+  });
+};
+const buildStyles = _theme => StyleSheet.create({
+  root: {
+    width: '100%'
+  },
+  label: {
+    includeFontPadding: false
+  },
+  valueText: {
+    flex: 1,
+    includeFontPadding: false
+  },
+  message: {
+    includeFontPadding: false
+  },
+  trailingRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});
+export { PickerTrigger };
+export default PickerTrigger;
+//# sourceMappingURL=PickerTrigger.js.map

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

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

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

@@ -35,6 +35,8 @@ const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
     barColor,
     animated = true,
     style,
+    containerStyle,
+    barStyle,
     accessibilityLabel,
     testID
   } = props;
@@ -42,7 +44,11 @@ const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
   const clamped = clampProgress(progress);
   const fillAnim = useRef(createAnimatedValue(clamped)).current;
   const loopAnim = useRef(createAnimatedValue(0)).current;
+  const widthAnim = useRef(createAnimatedValue(0)).current;
   const widthRef = useRef(0);
+  const determinateDuration = theme.components.progressBar?.determinateAnimationDuration ?? 400;
+  const indeterminateDuration = theme.components.progressBar?.indeterminateLoopDuration ?? 1500;
+  const indeterminateWidth = theme.components.progressBar?.indeterminateWidth ?? '30%';
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const resolvedRadius = radius ?? theme.radius.full;
   const resolvedTrack = trackColor ?? theme.colors.surface.disabled;
@@ -55,17 +61,17 @@ const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
     }
     Animated.timing(fillAnim, {
       toValue: clamped,
-      duration: 400,
+      duration: determinateDuration,
       easing: Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: false
     }).start();
-  }, [animated, clamped, fillAnim, isIndeterminate, theme]);
+  }, [animated, clamped, determinateDuration, fillAnim, isIndeterminate, theme]);
   useEffect(() => {
     if (!isIndeterminate) return;
     setNativeValue(loopAnim, 0);
     const animation = Animated.loop(Animated.timing(loopAnim, {
       toValue: 1,
-      duration: 1500,
+      duration: indeterminateDuration,
       easing: Easing.inOut(Easing.ease),
       useNativeDriver: true
     }));
@@ -73,7 +79,7 @@ const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
     return () => {
       animation.stop();
     };
-  }, [isIndeterminate, loopAnim]);
+  }, [isIndeterminate, loopAnim, indeterminateDuration]);
   const determinateWidth = fillAnim.interpolate({
     inputRange: [0, 1],
     outputRange: ['0%', '100%']
@@ -83,7 +89,9 @@ const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
     outputRange: [-1, 1]
   });
   const onLayout = event => {
-    widthRef.current = event.nativeEvent.layout.width;
+    const w = event.nativeEvent.layout.width;
+    widthRef.current = w;
+    setNativeValue(widthAnim, w);
   };
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
@@ -102,23 +110,24 @@ const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
       height,
       borderRadius: resolvedRadius,
       backgroundColor: resolvedTrack
-    }, style],
+    }, style, containerStyle],
     children: isIndeterminate ? /*#__PURE__*/_jsx(Animated.View, {
       style: [styles.indeterminateBar, {
         height,
         borderRadius: resolvedRadius,
         backgroundColor: resolvedBar,
+        width: indeterminateWidth,
         transform: [{
-          translateX: Animated.multiply(indeterminateTranslate, new Animated.Value(widthRef.current || 0))
+          translateX: Animated.multiply(indeterminateTranslate, widthAnim)
         }]
-      }]
+      }, barStyle]
     }) : /*#__PURE__*/_jsx(Animated.View, {
       style: [styles.determinateBar, {
         height,
         borderRadius: resolvedRadius,
         backgroundColor: resolvedBar,
         width: determinateWidth
-      }]
+      }, barStyle]
     })
   });
 });
@@ -136,8 +145,7 @@ const buildStyles = _theme => StyleSheet.create({
   indeterminateBar: {
     position: 'absolute',
     left: 0,
-    top: 0,
-    width: '30%'
+    top: 0
   }
 });
 export { ProgressBar };

package/lib/module/components/Radio/Radio.js

@@ -44,9 +44,12 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
     size = 'md',
     tone = 'primary',
     accessibilityLabel,
-    haptic = 'selection',
+    haptic,
     style,
+    containerStyle,
     circleStyle,
+    dotStyle,
+    labelStyle,
     testID,
     ...rest
   } = props;
@@ -59,8 +62,10 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
   const sizeOverrides = theme.components.radio?.[size];
   const outer = sizeOverrides?.outer ?? sizeMap[size].outer;
   const inner = sizeOverrides?.inner ?? sizeMap[size].inner;
-  const radioBorderWidth = theme.components.radio?.borderWidth ?? 1.5;
+  const radioBorderWidth = theme.colors.border.width;
   const radioLabelGap = theme.components.radio?.labelGap ?? 10;
+  const pressHapticEnabled = theme.components.radio?.pressHaptic ?? false;
+  const resolvedHaptic = haptic === undefined ? pressHapticEnabled ? 'selection' : false : haptic;
   const progress = useRef(createAnimatedValue(selected ? 1 : 0)).current;
   useEffect(() => {
     Animated.spring(progress, {
@@ -77,7 +82,7 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const handlePress = event => {
     if (disabled) return;
-    if (haptic !== false) triggerHaptic(haptic);
+    if (resolvedHaptic !== false) triggerHaptic(resolvedHaptic);
     if (ctx) {
       ctx.onSelect(value);
     } else {
@@ -104,7 +109,7 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
       pressed
     }) => [styles.row, {
       opacity: disabled ? 0.55 : pressed ? 0.85 : 1
-    }, style],
+    }, style, containerStyle],
     children: [/*#__PURE__*/_jsx(View, {
       style: [styles.outer, {
         width: outer,
@@ -123,14 +128,14 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
           transform: [{
             scale
           }]
-        }]
+        }, dotStyle]
       })
     }), label ? /*#__PURE__*/_jsx(Text, {
       style: [styles.label, {
         marginLeft: radioLabelGap,
         color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
         fontSize: theme.typography.fontSize.base
-      }],
+      }, labelStyle],
       numberOfLines: 2,
       children: label
     }) : null]

package/lib/module/components/Rating/Rating.js

@@ -4,7 +4,7 @@ import React, { forwardRef, useCallback, useMemo, useRef } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
-import { SkeletonContent } from "../Skeleton/index.js";
+import { Skeleton } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizePxMap = {
   sm: 16,
@@ -82,6 +82,8 @@ const Rating = /*#__PURE__*/forwardRef((props, ref) => {
     loading = false,
     accessibilityLabel,
     style,
+    containerStyle,
+    starContainerStyle,
     testID
   } = props;
   const theme = useTheme();
@@ -95,17 +97,31 @@ const Rating = /*#__PURE__*/forwardRef((props, ref) => {
   const handleStarLayout = useCallback(e => {
     starWidthRef.current = e.nativeEvent.layout.width;
   }, []);
-  const scaleRefs = useRef([]);
-  if (scaleRefs.current.length !== max) {
-    scaleRefs.current = Array.from({
-      length: max
-    }, (_, i) => scaleRefs.current[i] ?? new Animated.Value(1));
-  }
+  const scaleMapRef = useRef(new Map());
+  const scaleRefs = useMemo(() => {
+    const map = scaleMapRef.current;
+    const out = [];
+    for (let i = 0; i < max; i += 1) {
+      let v = map.get(i);
+      if (!v) {
+        v = new Animated.Value(1);
+        map.set(i, v);
+      }
+      out.push(v);
+    }
+    for (const key of Array.from(map.keys())) {
+      if (key >= max) map.delete(key);
+    }
+    return out;
+  }, [max]);
+  const pulseOnPress = theme.components.rating?.pulseOnPress ?? false;
+  const pulseScale = theme.components.rating?.pulseScale ?? 1.2;
+  const pressHapticEnabled = theme.components.rating?.pressHaptic ?? false;
   const pulse = useCallback(idx => {
-    const v = scaleRefs.current[idx];
+    const v = scaleRefs[idx];
     if (!v) return;
     Animated.sequence([Animated.timing(v, {
-      toValue: 1.2,
+      toValue: pulseScale,
       duration: theme.motion.duration.fast,
       easing: Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: true
@@ -116,14 +132,14 @@ const Rating = /*#__PURE__*/forwardRef((props, ref) => {
       mass: theme.motion.spring.bouncy.mass,
       useNativeDriver: true
     })]).start();
-  }, [theme.motion]);
+  }, [theme.motion, pulseScale, scaleRefs]);
   const commit = useCallback((next, animatedIndex) => {
     if (!interactive || !onChange) return;
     const cleaned = clampToStep(next, max, step);
-    triggerHaptic('selection');
-    if (typeof animatedIndex === 'number') pulse(animatedIndex);
+    if (pressHapticEnabled) triggerHaptic('selection');
+    if (pulseOnPress && typeof animatedIndex === 'number') pulse(animatedIndex);
     onChange(cleaned);
-  }, [interactive, onChange, max, step, pulse]);
+  }, [interactive, onChange, max, step, pulse, pressHapticEnabled, pulseOnPress]);
   const handleStarPress = useCallback(index => e => {
     if (!interactive) return;
     const w = starWidthRef.current || starSize;
@@ -144,13 +160,15 @@ const Rating = /*#__PURE__*/forwardRef((props, ref) => {
   const a11yLabel = accessibilityLabel ?? label ?? valueText;
   const stars = [];
   for (let i = 0; i < max; i += 1) {
+    const scaleVal = scaleRefs[i];
+    if (!scaleVal) continue;
     const star = /*#__PURE__*/_jsx(Star, {
       index: i,
       filled: value,
       size: starSize,
       filledColor: filledColor,
       emptyColor: emptyColor,
-      scale: scaleRefs.current[i] ?? new Animated.Value(1)
+      scale: scaleVal
     }, i);
     stars.push(interactive ? /*#__PURE__*/_jsx(Pressable, {
       onPress: handleStarPress(i),
@@ -166,7 +184,7 @@ const Rating = /*#__PURE__*/forwardRef((props, ref) => {
     }, i));
   }
   const rendered = /*#__PURE__*/_jsxs(View, {
-    style: [styles.wrapper, style],
+    style: [styles.wrapper, style, containerStyle],
     ref: ref,
     testID: testID,
     children: [label ? /*#__PURE__*/_jsx(Text, {
@@ -176,7 +194,7 @@ const Rating = /*#__PURE__*/forwardRef((props, ref) => {
       }],
       children: label
     }) : null, /*#__PURE__*/_jsx(View, {
-      style: styles.row,
+      style: [styles.row, starContainerStyle],
       accessible: true,
       accessibilityRole: interactive ? 'adjustable' : 'text',
       accessibilityLabel: a11yLabel,
@@ -196,15 +214,63 @@ const Rating = /*#__PURE__*/forwardRef((props, ref) => {
     })]
   });
   if (loading) {
-    return /*#__PURE__*/_jsx(SkeletonContent, {
-      loading: true,
-      mode: "auto",
-      children: rendered
+    return /*#__PURE__*/_jsx(RatingSkeleton, {
+      ...props
     });
   }
   return rendered;
 });
 Rating.displayName = 'Rating';
+
+/**
+ * Placeholder shape for `<Rating>`. Row of N star-shaped skeletons sized
+ * exactly like the live stars, plus an optional label line above. The
+ * footprint stays identical between loading and loaded states.
+ */
+const RatingSkeleton = ({
+  max = 5,
+  size = 'md',
+  label,
+  containerStyle,
+  starContainerStyle,
+  style
+}) => {
+  const starSize = resolveSize(size);
+  const stars = Math.max(1, max);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      alignItems: 'flex-start'
+    }, containerStyle, style],
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    children: [label !== undefined ? /*#__PURE__*/_jsx(Skeleton, {
+      shape: "text",
+      width: 80,
+      height: 14,
+      style: {
+        marginBottom: 6
+      }
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: [{
+        flexDirection: 'row'
+      }, starContainerStyle],
+      children: Array.from({
+        length: stars
+      }).map((_, i) => /*#__PURE__*/_jsx(Skeleton, {
+        width: starSize,
+        height: starSize,
+        radius: Math.round(starSize * 0.25),
+        style: i < stars - 1 ? {
+          marginRight: 4
+        } : undefined
+      }, `sk-star-${i}`))
+    })]
+  });
+};
+RatingSkeleton.displayName = 'RatingSkeleton';
+Rating.Skeleton = RatingSkeleton;
 const starStyles = StyleSheet.create({
   starWrap: {
     position: 'relative',