@webority/mobile-ui 0.0.0-stage → 0.0.33

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

@@ -0,0 +1,199 @@
+"use strict";
+
+import { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+import { createAnimatedValue, Gradient, setNativeValue, useTheme } from "../../theme/index.js";
+import { smoothCorners } from "../../utils/corners.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const toneColor = (theme, tone) => {
+  switch (tone) {
+    case 'success':
+      return theme.colors.success;
+    case 'warning':
+      return theme.colors.warning;
+    case 'error':
+      return theme.colors.error;
+    case 'primary':
+    default:
+      return theme.colors.primary;
+  }
+};
+const clampProgress = value => {
+  if (typeof value !== 'number' || Number.isNaN(value)) {
+    return 0;
+  }
+  if (value < 0) {
+    return 0;
+  }
+  if (value > 1) {
+    return 1;
+  }
+  return value;
+};
+const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
+  const theme = useTheme();
+  const {
+    progress,
+    indeterminate: indeterminateProp,
+    height = 6,
+    radius,
+    tone = 'primary',
+    trackColor,
+    barColor,
+    gradient,
+    segments,
+    animated = true,
+    style,
+    containerStyle,
+    barStyle,
+    accessibilityLabel,
+    testID
+  } = props;
+  const isIndeterminate = indeterminateProp ?? typeof progress !== 'number';
+  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;
+  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) {
+      fillAnim.setValue(clamped);
+      return;
+    }
+    Animated.timing(fillAnim, {
+      toValue: clamped,
+      duration: determinateDuration,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }).start();
+  }, [animated, clamped, determinateDuration, fillAnim, isIndeterminate, theme]);
+  useEffect(() => {
+    if (!isIndeterminate) {
+      return;
+    }
+    setNativeValue(loopAnim, 0);
+    const animation = Animated.loop(Animated.timing(loopAnim, {
+      toValue: 1,
+      duration: indeterminateDuration,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: true
+    }));
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [isIndeterminate, loopAnim, indeterminateDuration]);
+  const determinateWidth = fillAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0%', '100%']
+  });
+  const indeterminateTranslate = loopAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-1, 1]
+  });
+  const onLayout = event => {
+    const w = event.nativeEvent.layout.width;
+    widthRef.current = w;
+    setNativeValue(widthAnim, w);
+  };
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    accessibilityRole: "progressbar",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityValue: isIndeterminate ? {
+      text: 'Loading'
+    } : {
+      min: 0,
+      max: 100,
+      now: Math.round(clamped * 100)
+    },
+    testID: testID,
+    onLayout: onLayout,
+    style: [styles.track, {
+      height,
+      borderRadius: resolvedRadius,
+      ...smoothCorners,
+      backgroundColor: resolvedTrack
+    }, style, containerStyle],
+    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,
+        ...smoothCorners,
+        backgroundColor: resolvedBar,
+        width: indeterminateWidth,
+        transform: [{
+          translateX: Animated.multiply(indeterminateTranslate, widthAnim)
+        }]
+      }, barStyle]
+    }) : /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.determinateBar, {
+        height,
+        borderRadius: resolvedRadius,
+        ...smoothCorners,
+        backgroundColor: resolvedGradient ? 'transparent' : resolvedBar,
+        width: determinateWidth,
+        overflow: resolvedGradient ? 'hidden' : undefined
+      }, barStyle],
+      children: resolvedGradient ? /*#__PURE__*/_jsx(Gradient, {
+        gradient: resolvedGradient,
+        style: StyleSheet.absoluteFill
+      }) : null
+    })
+  });
+});
+ProgressBar.displayName = 'ProgressBar';
+const buildStyles = _theme => StyleSheet.create({
+  track: {
+    width: '100%',
+    overflow: 'hidden'
+  },
+  determinateBar: {
+    position: 'absolute',
+    left: 0,
+    top: 0
+  },
+  indeterminateBar: {
+    position: 'absolute',
+    left: 0,
+    top: 0
+  },
+  segments: {
+    flexDirection: 'row',
+    width: '100%'
+  }
+});
+export { ProgressBar };
+export default ProgressBar;
+//# sourceMappingURL=ProgressBar.js.map

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

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

package/lib/module/components/ProgressRing/ProgressRing.js

@@ -0,0 +1,187 @@
+"use strict";
+
+/**
+ * ProgressRing: the circular sibling of ProgressBar.
+ *
+ * A track circle and a fill arc drawn with react-native-svg, the arc's
+ * length driven by one animated value so a progress change sweeps
+ * smoothly from the old fraction to the new one. Starts at 12 o'clock and
+ * runs clockwise. Whatever is passed as `children` sits centred inside the
+ * ring (an Avatar, an icon, a percentage), so the ring can wrap a picture
+ * without the picture knowing about it.
+ *
+ * Determinate only: an unknown-duration wait is Spinner's job.
+ */
+
+import { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { useReducedMotion } from "../../hooks/index.js";
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const toneColor = (theme, tone) => {
+  switch (tone) {
+    case 'success':
+      return theme.colors.success;
+    case 'warning':
+      return theme.colors.warning;
+    case 'error':
+      return theme.colors.error;
+    default:
+      return theme.colors.primary;
+  }
+};
+const clampProgress = value => {
+  if (typeof value !== 'number' || Number.isNaN(value)) {
+    return 0;
+  }
+  return Math.min(1, Math.max(0, value));
+};
+const DEFAULT_STROKE_WIDTH = 4;
+const DEFAULT_DURATION = 600;
+const DEFAULT_COLOR_STOPS = [1 / 3, 2 / 3];
+// Width of the step between two bands: the colour holds up to just under
+// the stop and switches at the stop itself.
+const STOP_EDGE = 0.0001;
+const ProgressRing = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    progress,
+    size = 48,
+    strokeWidth: strokeWidthProp,
+    tone = 'primary',
+    trackColor,
+    ringColor,
+    colorByProgress = false,
+    animated = true,
+    rounded = true,
+    children,
+    accessibilityLabel,
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const tokens = theme.components.progressRing;
+  const reduceMotion = useReducedMotion();
+  const clamped = clampProgress(progress);
+  const strokeWidth = strokeWidthProp ?? tokens?.strokeWidth ?? DEFAULT_STROKE_WIDTH;
+  const duration = tokens?.animationDuration ?? DEFAULT_DURATION;
+  const resolvedTrack = trackColor ?? tokens?.trackColor ?? theme.colors.surface.disabled;
+  const [stopLow, stopHigh] = tokens?.colorStops ?? DEFAULT_COLOR_STOPS;
+
+  // The arc is a full circle whose dash pattern is one dash the length of the
+  // circumference; the offset hides the part not yet reached. One value,
+  // one interpolation: the node driving strokeDashoffset is created once.
+  const radius = Math.max(0, (size - strokeWidth) / 2);
+  const circumference = 2 * Math.PI * radius;
+  const fillAnim = useRef(createAnimatedValue(clamped)).current;
+  useEffect(() => {
+    if (!animated || reduceMotion) {
+      fillAnim.setValue(clamped);
+      return;
+    }
+    const anim = Animated.timing(fillAnim, {
+      toValue: clamped,
+      duration,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [animated, clamped, duration, fillAnim, reduceMotion, theme.motion.easing.standard]);
+  const dashOffset = fillAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [circumference, 0]
+  });
+  // A round cap draws a dot even when the dash is zero long; keep the arc
+  // hidden at exactly zero so an empty ring is empty.
+  const fillOpacity = fillAnim.interpolate({
+    inputRange: [0, 0.001, 1],
+    outputRange: [0, 1, 1]
+  });
+  // Stepped bands on the same value: red holds to just under the first
+  // stop, amber to just under the second, green from there.
+  const bandedRing = useMemo(() => fillAnim.interpolate({
+    inputRange: [0, stopLow - STOP_EDGE, stopLow, stopHigh - STOP_EDGE, stopHigh, 1],
+    outputRange: [theme.colors.error, theme.colors.error, theme.colors.warning, theme.colors.warning, theme.colors.success, theme.colors.success]
+  }), [fillAnim, stopLow, stopHigh, theme.colors.error, theme.colors.warning, theme.colors.success]);
+  const resolvedRing = ringColor ?? (colorByProgress ? bandedRing : toneColor(theme, tone));
+  const styles = useMemo(() => buildStyles(), []);
+  const centre = size / 2;
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref
+    // A bare ring is one screen-reader element. With content inside, the
+    // content speaks for itself (an avatar, a pressable picker): grouping
+    // it under the ring would make it unreachable.
+    ,
+    accessible: children == null,
+    accessibilityRole: "progressbar",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityValue: {
+      min: 0,
+      max: 100,
+      now: Math.round(clamped * 100)
+    },
+    testID: testID,
+    style: [styles.root, {
+      width: size,
+      height: size
+    }, style],
+    children: [/*#__PURE__*/_jsxs(Svg, {
+      width: size,
+      height: size,
+      viewBox: `0 0 ${size} ${size}`,
+      children: [/*#__PURE__*/_jsx(Circle, {
+        cx: centre,
+        cy: centre,
+        r: radius,
+        stroke: resolvedTrack,
+        strokeWidth: strokeWidth,
+        fill: "none"
+      }), /*#__PURE__*/_jsx(AnimatedCircle, {
+        cx: centre,
+        cy: centre,
+        r: radius
+        // The banded colour is an Animated node; resolved the same way.
+        ,
+        stroke: resolvedRing,
+        strokeWidth: strokeWidth,
+        strokeLinecap: rounded ? 'round' : 'butt',
+        strokeDasharray: `${circumference} ${circumference}`
+        // react-native-svg types these as numbers; the Animated nodes are
+        // resolved before they reach Circle (the SquircleFill precedent).
+        ,
+        strokeDashoffset: dashOffset,
+        strokeOpacity: fillOpacity,
+        fill: "none"
+        // Rotate the arc, not the children: the sweep starts at 12 o'clock.
+        ,
+        transform: `rotate(-90 ${centre} ${centre})`,
+        testID: testID ? `${testID}-fill` : undefined
+      })]
+    }), children != null ? /*#__PURE__*/_jsx(View, {
+      style: styles.content,
+      pointerEvents: "box-none",
+      children: children
+    }) : null]
+  });
+});
+ProgressRing.displayName = 'ProgressRing';
+const buildStyles = () => StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  content: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+export { ProgressRing };
+export default ProgressRing;
+//# sourceMappingURL=ProgressRing.js.map

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

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

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

@@ -0,0 +1,123 @@
+"use strict";
+
+import { createContext, forwardRef, useContext, useMemo } from 'react';
+import { Pressable, StyleSheet, Text } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
+import { RadioDot } from "./RadioDot.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const RadioGroupContext = /*#__PURE__*/createContext(null);
+export const useRadioGroup = () => useContext(RadioGroupContext);
+const toneColor = (theme, tone) => {
+  switch (tone) {
+    case 'success':
+      return theme.colors.success;
+    case 'warning':
+      return theme.colors.warning;
+    case 'error':
+      return theme.colors.error;
+    case 'primary':
+    default:
+      return theme.colors.primary;
+  }
+};
+const Radio = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    value,
+    selected: selectedProp,
+    onChange,
+    disabled: disabledProp = false,
+    label,
+    size = 'md',
+    tone = 'primary',
+    accessibilityLabel,
+    haptic,
+    style,
+    containerStyle,
+    circleStyle,
+    dotStyle,
+    labelStyle,
+    testID,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const ctx = useRadioGroup();
+
+  // `value` is required by the props, but a JavaScript consumer can still omit
+  // it, and the failure is silent rather than loud: inside a group,
+  // `selectedValue === undefined` makes every unselected radio look selected the
+  // moment nothing is chosen, and pressing one reports `undefined` as the
+  // choice. A conformance test omitted it for months without anything noticing.
+  if (__DEV__ && value === undefined) {
+    // biome-ignore lint/suspicious/noConsole: deliberate development-only warning, see above
+    console.warn('[@webority/mobile-ui] Radio was rendered without a `value`. ' + 'Selection compares against it, so the group cannot track which option is chosen.');
+  }
+  const selected = ctx ? ctx.selectedValue === value : !!selectedProp;
+  const disabled = ctx ? ctx.disabled || disabledProp : disabledProp;
+  const fillColor = toneColor(theme, tone);
+  const radioLabelGap = theme.components.radio?.labelGap ?? 10;
+  const handlePress = _event => {
+    if (disabled) {
+      return;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    if (ctx) {
+      ctx.onChange(value);
+    } else {
+      onChange?.(value);
+    }
+  };
+  const accessibleLabel = accessibilityLabel ?? label;
+  return /*#__PURE__*/_jsxs(Pressable, {
+    ref: ref,
+    onPress: handlePress,
+    disabled: disabled,
+    accessibilityRole: "radio",
+    accessibilityLabel: accessibleLabel,
+    accessibilityState: {
+      checked: selected,
+      disabled
+    },
+    testID: testID,
+    hitSlop: 6,
+    ...rest,
+    style: ({
+      pressed
+    }) => [styles.row, {
+      opacity: disabled ? 0.55 : pressed ? 0.85 : 1
+    }, style, containerStyle],
+    children: [/*#__PURE__*/_jsx(RadioDot, {
+      selected: selected,
+      color: fillColor,
+      disabled: disabled,
+      size: size,
+      style: circleStyle,
+      dotStyle: 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]
+  });
+});
+Radio.displayName = 'Radio';
+const buildStyles = _theme => StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  label: {
+    flexShrink: 1
+  }
+});
+export { Radio };
+export default Radio;
+//# sourceMappingURL=Radio.js.map

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

@@ -0,0 +1,102 @@
+"use strict";
+
+/**
+ * RadioDot — the bare animated radio indicator (ring + spring-scaled dot).
+ *
+ * Extracted from Radio so custom option templates (ChoiceGroup `renderOption`,
+ * bespoke cards) can embed the standard indicator without rebuilding the
+ * animation or the disabled/selected colour rules. Purely visual — no press
+ * handling, no a11y role; the parent control owns those.
+ */
+
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { smoothCorners } from "../../utils/corners.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const sizeMap = {
+  sm: {
+    outer: 16,
+    inner: 8
+  },
+  md: {
+    outer: 20,
+    inner: 10
+  },
+  lg: {
+    outer: 24,
+    inner: 12
+  }
+};
+export const RadioDot = props => {
+  const {
+    selected,
+    color,
+    disabled = false,
+    size = 'md',
+    style,
+    dotStyle
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(), []);
+  const fillColor = color ?? theme.colors.primary;
+  let outer;
+  let inner;
+  if (typeof size === 'number') {
+    outer = size;
+    inner = Math.round(size / 2);
+  } else {
+    const overrides = theme.components.radio?.[size];
+    outer = overrides?.outer ?? sizeMap[size].outer;
+    inner = overrides?.inner ?? sizeMap[size].inner;
+  }
+  const progress = useRef(createAnimatedValue(selected ? 1 : 0)).current;
+  useEffect(() => {
+    const anim = Animated.spring(progress, {
+      toValue: selected ? 1 : 0,
+      damping: theme.motion.spring.snappy.damping,
+      stiffness: theme.motion.spring.snappy.stiffness,
+      mass: theme.motion.spring.snappy.mass,
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [selected, progress, theme.motion.spring.snappy]);
+  const scale = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1]
+  });
+  const borderColor = disabled ? theme.colors.border.primary : selected ? fillColor : theme.colors.border.primary;
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.outer, {
+      width: outer,
+      height: outer,
+      borderWidth: theme.colors.border.width,
+      borderRadius: outer / 2,
+      ...smoothCorners,
+      borderColor
+    }, style],
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [{
+        width: inner,
+        height: inner,
+        borderRadius: inner / 2,
+        ...smoothCorners,
+        backgroundColor: disabled ? theme.colors.text.disabled : fillColor,
+        opacity: progress,
+        transform: [{
+          scale
+        }]
+      }, dotStyle]
+    })
+  });
+};
+RadioDot.displayName = 'RadioDot';
+const buildStyles = () => StyleSheet.create({
+  outer: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+export default RadioDot;
+//# sourceMappingURL=RadioDot.js.map

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

@@ -0,0 +1,45 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { useControllableState } from "../../hooks/index.js";
+import { RadioGroupContext } from "./Radio.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const RadioGroup = ({
+  value,
+  defaultValue,
+  onChange,
+  children,
+  disabled = false,
+  accessibilityLabel,
+  style,
+  testID
+}) => {
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? undefined,
+    onChange: onChange
+  });
+  const ctx = useMemo(() => ({
+    selectedValue: current,
+    onChange: setCurrent,
+    disabled
+  }), [current, setCurrent, disabled]);
+  return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
+    value: ctx,
+    children: /*#__PURE__*/_jsx(View, {
+      accessibilityRole: "radiogroup",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled
+      },
+      testID: testID,
+      style: style,
+      children: children
+    })
+  });
+};
+RadioGroup.displayName = 'RadioGroup';
+export { RadioGroup };
+export default RadioGroup;
+//# sourceMappingURL=RadioGroup.js.map

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

@@ -0,0 +1,6 @@
+"use strict";
+
+export { default, Radio, RadioGroupContext, useRadioGroup } from "./Radio.js";
+export { RadioDot } from "./RadioDot.js";
+export { RadioGroup } from "./RadioGroup.js";
+//# sourceMappingURL=index.js.map