@webority-technologies/mobile-ui 0.0.1

package/lib/module/components/ChoiceGroup/ChoiceGroup.js

@@ -0,0 +1,246 @@
+"use strict";
+
+/**
+ * ChoiceGroup — headless single-choice group with templated options.
+ *
+ * The component owns the BEHAVIOUR: selection state (controlled or
+ * uncontrolled), per-option press handling, haptics, radio/radiogroup a11y,
+ * and row/column/wrap layout. Each option's LOOK comes from a template:
+ *
+ *   - Default template: a bordered card — label (+ optional icon /
+ *     description) with a trailing RadioDot, tinted with the option's colour
+ *     when selected. The "Hot / Warm / Cold" status-picker pattern works
+ *     zero-config.
+ *   - `renderOption`: full custom JSX per option. Receives
+ *     `{ option, index, selected, pressed, disabled, color }`; press handling
+ *     and a11y stay managed. Embed the exported RadioDot to keep the standard
+ *     indicator inside a custom layout.
+ *
+ * Cross-option visuals (a single indicator sliding BETWEEN options, joined
+ * segments) are out of scope by design — that's SegmentedControl.
+ *
+ * Same data contract as Select: `ChoiceOption[]` by default, `getOption*`
+ * accessors for custom shapes.
+ */
+
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useControllableState } from "../../hooks/index.js";
+import { fontFor, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { RadioDot } from "../Radio/RadioDot.js";
+
+/** Everything a custom option template needs to render one option. */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const sizeTokens = {
+  sm: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    fontSize: 13,
+    minHeight: 32
+  },
+  md: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    fontSize: 15,
+    minHeight: 40
+  },
+  lg: {
+    paddingHorizontal: 16,
+    paddingVertical: 11,
+    fontSize: 16,
+    minHeight: 48
+  }
+};
+
+/**
+ * #RRGGBB → #RRGGBBAA for the selected tint. Non-hex colours (named, rgb())
+ * can't be suffixed — those fall back to the theme's selected surface.
+ */
+const tintOf = (color, opacity, fallback) => {
+  const hex = /^#([0-9a-f]{6})$/i.exec(color);
+  if (!hex) {
+    return fallback;
+  }
+  const alpha = Math.round(opacity * 255).toString(16).padStart(2, '0');
+  return `#${hex[1]}${alpha}`;
+};
+
+// `unknown` keeps the forwardRef signature non-generic — same pattern as
+// Select/InlineSelect; re-type at the call site via `ChoiceGroupProps<T>`.
+const ChoiceGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    options,
+    getOptionLabel,
+    getOptionValue,
+    getOptionDisabled,
+    getOptionDescription,
+    getOptionIcon,
+    getOptionColor,
+    value,
+    defaultValue,
+    onChange,
+    renderOption,
+    direction = 'row',
+    gap,
+    wrap = false,
+    fullWidth,
+    disabled = false,
+    size = 'md',
+    haptic,
+    accessibilityLabel,
+    style,
+    optionStyle,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const dims = sizeTokens[size];
+  const labelOf = useCallback(o => getOptionLabel ? getOptionLabel(o) : o.label ?? '', [getOptionLabel]);
+  const valueOf = useCallback(o => getOptionValue ? getOptionValue(o) : o.value, [getOptionValue]);
+  const disabledOf = useCallback(o => getOptionDisabled ? getOptionDisabled(o) : o.disabled === true, [getOptionDisabled]);
+  const descriptionOf = useCallback(o => getOptionDescription ? getOptionDescription(o) : o.description, [getOptionDescription]);
+  const iconOf = useCallback(o => getOptionIcon ? getOptionIcon(o) : o.icon, [getOptionIcon]);
+  const colorOf = useCallback(o => getOptionColor ? getOptionColor(o) : o.color, [getOptionColor]);
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? undefined,
+    onChange: onChange
+  });
+  const handleSelect = useCallback(option => {
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    setCurrent(valueOf(option));
+  }, [haptic, setCurrent, valueOf]);
+  const stretch = fullWidth ?? (direction === 'row' && !wrap);
+  const selectedFillOpacity = theme.components.choiceGroup?.selectedFillOpacity ?? 0.12;
+  const cardRadius = theme.components.choiceGroup?.borderRadius ?? theme.radius.md;
+  const renderDefaultCard = state => {
+    const {
+      option,
+      selected,
+      disabled: optDisabled,
+      color
+    } = state;
+    const rawColor = colorOf(option);
+    const labelColor = optDisabled ? theme.colors.text.disabled : rawColor ?? theme.colors.text.primary;
+    const description = descriptionOf(option);
+    const icon = iconOf(option);
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.card, {
+        minHeight: dims.minHeight,
+        paddingHorizontal: dims.paddingHorizontal,
+        paddingVertical: dims.paddingVertical,
+        borderRadius: cardRadius,
+        borderWidth: theme.colors.border.width,
+        borderColor: selected ? color : theme.colors.border.primary,
+        backgroundColor: selected ? tintOf(color, selectedFillOpacity, theme.colors.surface.selected) : theme.colors.background.primary,
+        columnGap: theme.spacing.sm
+      }],
+      children: [icon ? /*#__PURE__*/_jsx(View, {
+        children: icon
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        style: styles.cardTextWrap,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.cardLabel, {
+            color: labelColor,
+            fontSize: dims.fontSize,
+            ...fontFor(theme, 'medium')
+          }],
+          numberOfLines: 1,
+          children: labelOf(option)
+        }), description ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.cardDescription, {
+            color: theme.colors.text.tertiary,
+            fontSize: theme.typography.fontSize.xs
+          }],
+          numberOfLines: 2,
+          children: description
+        }) : null]
+      }), /*#__PURE__*/_jsx(RadioDot, {
+        selected: selected,
+        color: color,
+        disabled: optDisabled,
+        size: size
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    accessibilityRole: "radiogroup",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      disabled
+    },
+    testID: testID,
+    style: [{
+      flexDirection: direction,
+      gap: gap ?? theme.spacing.sm,
+      flexWrap: wrap ? 'wrap' : 'nowrap'
+    }, style],
+    children: options.map((option, index) => {
+      const optValue = valueOf(option);
+      const optDisabled = disabled || disabledOf(option);
+      const selected = current === optValue;
+      const color = colorOf(option) ?? theme.colors.primary;
+      return /*#__PURE__*/_jsx(Pressable, {
+        onPress: () => {
+          if (optDisabled) {
+            return;
+          }
+          handleSelect(option);
+        },
+        disabled: optDisabled,
+        accessibilityRole: "radio",
+        accessibilityLabel: labelOf(option),
+        accessibilityState: {
+          checked: selected,
+          disabled: optDisabled
+        },
+        style: [stretch ? styles.stretchOption : null, {
+          opacity: optDisabled ? 0.55 : 1
+        }, optionStyle],
+        children: ({
+          pressed
+        }) => {
+          const state = {
+            option,
+            index,
+            selected,
+            pressed: pressed && !optDisabled,
+            disabled: optDisabled,
+            color
+          };
+          return /*#__PURE__*/_jsx(_Fragment, {
+            children: renderOption ? renderOption(state) : renderDefaultCard(state)
+          });
+        }
+      }, String(optValue));
+    })
+  });
+});
+ChoiceGroup.displayName = 'ChoiceGroup';
+const buildStyles = _theme => StyleSheet.create({
+  stretchOption: {
+    flex: 1
+  },
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  cardTextWrap: {
+    flex: 1
+  },
+  cardLabel: {
+    includeFontPadding: false
+  },
+  cardDescription: {
+    includeFontPadding: false,
+    marginTop: 2
+  }
+});
+export { ChoiceGroup };
+export default ChoiceGroup;
+//# sourceMappingURL=ChoiceGroup.js.map

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

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

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

@@ -0,0 +1,173 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
+import Animated, { cancelAnimation, Easing, runOnJS, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+import { useReducedMotion } from "../../hooks/index.js";
+import { useTheme } from "../../theme/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]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: autoStart is a mount-once decision; re-running on a changed `start` identity would re-fire the burst
+  useEffect(() => {
+    if (autoStart) {
+      start();
+    }
+    return () => cancelAnimation(progress);
+  }, []);
+  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