@webority-technologies/mobile-ui 0.0.1

package/lib/commonjs/components/ChoiceGroup/ChoiceGroup.js

@@ -0,0 +1,250 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChoiceGroup = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../hooks/index.js");
+var _index2 = require("../../theme/index.js");
+var _index3 = require("../../utils/index.js");
+var _RadioDot = require("../Radio/RadioDot.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * 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.
+ */
+
+/** Everything a custom option template needs to render one option. */
+
+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 = exports.ChoiceGroup = /*#__PURE__*/(0, _react.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 = (0, _index2.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const dims = sizeTokens[size];
+  const labelOf = (0, _react.useCallback)(o => getOptionLabel ? getOptionLabel(o) : o.label ?? '', [getOptionLabel]);
+  const valueOf = (0, _react.useCallback)(o => getOptionValue ? getOptionValue(o) : o.value, [getOptionValue]);
+  const disabledOf = (0, _react.useCallback)(o => getOptionDisabled ? getOptionDisabled(o) : o.disabled === true, [getOptionDisabled]);
+  const descriptionOf = (0, _react.useCallback)(o => getOptionDescription ? getOptionDescription(o) : o.description, [getOptionDescription]);
+  const iconOf = (0, _react.useCallback)(o => getOptionIcon ? getOptionIcon(o) : o.icon, [getOptionIcon]);
+  const colorOf = (0, _react.useCallback)(o => getOptionColor ? getOptionColor(o) : o.color, [getOptionColor]);
+  const [current, setCurrent] = (0, _index.useControllableState)({
+    value,
+    defaultValue: defaultValue ?? undefined,
+    onChange: onChange
+  });
+  const handleSelect = (0, _react.useCallback)(option => {
+    const h = (0, _index3.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _index3.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__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        children: icon
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.cardTextWrap,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.cardLabel, {
+            color: labelColor,
+            fontSize: dims.fontSize,
+            ...(0, _index2.fontFor)(theme, 'medium')
+          }],
+          numberOfLines: 1,
+          children: labelOf(option)
+        }), description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.cardDescription, {
+            color: theme.colors.text.tertiary,
+            fontSize: theme.typography.fontSize.xs
+          }],
+          numberOfLines: 2,
+          children: description
+        }) : null]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioDot.RadioDot, {
+        selected: selected,
+        color: color,
+        disabled: optDisabled,
+        size: size
+      })]
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+            children: renderOption ? renderOption(state) : renderDefaultCard(state)
+          });
+        }
+      }, String(optValue));
+    })
+  });
+});
+ChoiceGroup.displayName = 'ChoiceGroup';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  stretchOption: {
+    flex: 1
+  },
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  cardTextWrap: {
+    flex: 1
+  },
+  cardLabel: {
+    includeFontPadding: false
+  },
+  cardDescription: {
+    includeFontPadding: false,
+    marginTop: 2
+  }
+});
+var _default = exports.default = ChoiceGroup;
+//# sourceMappingURL=ChoiceGroup.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ChoiceGroup", {
+  enumerable: true,
+  get: function () {
+    return _ChoiceGroup.ChoiceGroup;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ChoiceGroup.default;
+  }
+});
+var _ChoiceGroup = _interopRequireWildcard(require("./ChoiceGroup.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Confetti/Confetti.js

@@ -0,0 +1,177 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Confetti = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _index = require("../../hooks/index.js");
+var _index2 = require("../../theme/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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 = (0, _reactNativeReanimated.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__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.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 = exports.Confetti = /*#__PURE__*/(0, _react.forwardRef)(({
+  count = 80,
+  colors,
+  mode = 'rain',
+  origin,
+  duration = 2800,
+  fadeOut = true,
+  autoStart = false,
+  recycle = false,
+  size = 10,
+  onComplete,
+  style,
+  testID
+}, ref) => {
+  const theme = (0, _index2.useTheme)();
+  const reduceMotion = (0, _index.useReducedMotion)();
+  const window = (0, _reactNative.useWindowDimensions)();
+  const [layout, setLayout] = (0, _react.useState)({
+    width: window.width,
+    height: window.height
+  });
+  const [active, setActive] = (0, _react.useState)(false);
+  const [pieces, setPieces] = (0, _react.useState)([]);
+  const palette = (0, _react.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 = (0, _reactNativeReanimated.useSharedValue)(0);
+  const finish = (0, _react.useCallback)(() => {
+    setActive(false);
+    onComplete?.();
+  }, [onComplete]);
+  const start = (0, _react.useCallback)(() => {
+    if (reduceMotion) {
+      onComplete?.();
+      return;
+    }
+    (0, _reactNativeReanimated.cancelAnimation)(progress);
+    progress.value = 0;
+    setPieces(buildPieces(count, palette, mode, size));
+    setActive(true);
+    const tween = (0, _reactNativeReanimated.withTiming)(1, {
+      duration,
+      easing: _reactNativeReanimated.Easing.linear
+    }, finished => {
+      'worklet';
+
+      if (finished && !recycle) {
+        (0, _reactNativeReanimated.runOnJS)(finish)();
+      }
+    });
+    progress.value = recycle ? (0, _reactNativeReanimated.withRepeat)(tween, -1, false) : tween;
+  }, [reduceMotion, progress, duration, recycle, finish, onComplete, count, palette, mode, size]);
+  const stop = (0, _react.useCallback)(() => {
+    (0, _reactNativeReanimated.cancelAnimation)(progress);
+    setActive(false);
+  }, [progress]);
+  (0, _react.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
+  (0, _react.useEffect)(() => {
+    if (autoStart) {
+      start();
+    }
+    return () => (0, _reactNativeReanimated.cancelAnimation)(progress);
+  }, []);
+  const onLayout = (0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [_reactNative.StyleSheet.absoluteFill, style],
+    pointerEvents: "none",
+    onLayout: onLayout,
+    testID: testID,
+    children: active ? pieces.map((piece, i) => /*#__PURE__*/(0, _jsxRuntime.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';
+var _default = exports.default = Confetti;
+//# sourceMappingURL=Confetti.js.map

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Confetti", {
+  enumerable: true,
+  get: function () {
+    return _Confetti.Confetti;
+  }
+});
+var _Confetti = require("./Confetti.js");
+//# sourceMappingURL=index.js.map