@webority-technologies/mobile-ui 0.0.1

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TimePicker", {
+  enumerable: true,
+  get: function () {
+    return _TimePicker.TimePicker;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _TimePicker.default;
+  }
+});
+var _TimePicker = _interopRequireWildcard(require("./TimePicker.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/Timeline/Timeline.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Timeline = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = 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); }
+/**
+ * The status vocabulary is shared with the web library's AppTimeline so a
+ * sign-off history reads identically on both surfaces.
+ *
+ *   upcoming  — not started yet        (hollow ring)
+ *   current   — in progress now        (warning)
+ *   done      — completed              (success)
+ *   onHold    — blocked / waiting      (info)
+ *   rejected  — declined / failed      (error)
+ *   cancelled — aborted                (muted)
+ *   skipped   — intentionally bypassed (muted)
+ */
+
+const DOT = 12;
+const RAIL = 2;
+const GUTTER = 28;
+
+/**
+ * A chronological activity feed OR a status-progress tracker. Stepper covers a
+ * linear "which step am I on" flow; this covers "what has happened to this
+ * record", where entries carry their own status and can end in a terminal one.
+ */
+const Timeline = ({
+  items,
+  variant = 'feed',
+  style,
+  testID
+}) => {
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const colourFor = status => {
+    switch (status) {
+      case 'done':
+        return theme.colors.success;
+      case 'current':
+        return theme.colors.warning;
+      case 'onHold':
+        return theme.colors.info;
+      case 'rejected':
+        return theme.colors.error;
+      case 'cancelled':
+      case 'skipped':
+        return theme.colors.text.tertiary;
+      default:
+        return theme.colors.border.primary;
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: style,
+    testID: testID,
+    children: items.map((item, index) => {
+      const status = item.status ?? (variant === 'feed' ? 'done' : 'upcoming');
+      const accent = colourFor(status);
+      const isLast = index === items.length - 1;
+      const hollow = status === 'upcoming';
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.row,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.gutter,
+          children: [item.icon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.dot, {
+              backgroundColor: hollow ? 'transparent' : accent,
+              borderColor: accent
+            }]
+          }), isLast ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.rail, {
+              backgroundColor: theme.colors.border.primary
+            }]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.body, {
+            paddingBottom: isLast ? 0 : theme.spacing.lg
+          }],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.title, {
+              fontSize: theme.typography.fontSize.base,
+              color: status === 'upcoming' ? theme.colors.text.secondary : theme.colors.text.primary
+            }],
+            children: item.title
+          }), item.meta ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.meta, {
+              fontSize: theme.typography.fontSize.xs,
+              color: theme.colors.text.tertiary
+            }],
+            children: item.meta
+          }) : null, item.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.description, {
+              fontSize: theme.typography.fontSize.sm,
+              color: theme.colors.text.secondary
+            }],
+            children: item.description
+          }) : null, item.children]
+        })]
+      }, item.key ?? `${item.title}-${index}`);
+    })
+  });
+};
+exports.Timeline = Timeline;
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  row: {
+    flexDirection: 'row'
+  },
+  gutter: {
+    width: GUTTER,
+    alignItems: 'center'
+  },
+  dot: {
+    width: DOT,
+    height: DOT,
+    borderRadius: DOT / 2,
+    borderWidth: 2,
+    marginTop: 4
+  },
+  rail: {
+    width: RAIL,
+    flex: 1,
+    marginTop: 4,
+    borderRadius: RAIL / 2
+  },
+  body: {
+    flex: 1,
+    gap: 2
+  },
+  title: {
+    ...(0, _index.fontFor)(theme, 'semibold'),
+    fontWeight: '600'
+  },
+  meta: {
+    ...(0, _index.fontFor)(theme, 'normal')
+  },
+  description: {
+    ...(0, _index.fontFor)(theme, 'normal')
+  }
+});
+var _default = exports.default = Timeline;
+//# sourceMappingURL=Timeline.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Timeline", {
+  enumerable: true,
+  get: function () {
+    return _Timeline.Timeline;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Timeline.default;
+  }
+});
+var _Timeline = _interopRequireWildcard(require("./Timeline.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/Toast/Toast.js

@@ -0,0 +1,322 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Toast = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = 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 DEFAULT_SWIPE_DISMISS_THRESHOLD = 80;
+const DEFAULT_SWIPE_VELOCITY_THRESHOLD = 0.5;
+const DEFAULT_STACK_OFFSET = 8;
+const DEFAULT_STACK_SCALE_STEP = 0.04;
+const DEFAULT_AUTO_DISMISS_MS = 3000;
+const Toast = ({
+  toast,
+  index,
+  onDismiss
+}) => {
+  const theme = (0, _index.useTheme)();
+  const variant = toast.variant ?? 'default';
+  const position = toast.position ?? 'bottom';
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const tint = (0, _react.useMemo)(() => tintFor(theme, variant), [theme, variant]);
+  const toastTokens = theme.components.toast;
+  const iconCircleSize = toastTokens?.iconCircleSize ?? 28;
+  const iconCircleBorderRadius = toastTokens?.iconCircleBorderRadius ?? 14;
+  const iconGlyphFontSize = toastTokens?.iconGlyphFontSize ?? 16;
+  const tintBarWidth = toastTokens?.tintBarWidth ?? 4;
+  const swipeDismissThreshold = toastTokens?.swipeDismissThreshold ?? DEFAULT_SWIPE_DISMISS_THRESHOLD;
+  const swipeVelocityThreshold = toastTokens?.swipeVelocityThreshold ?? DEFAULT_SWIPE_VELOCITY_THRESHOLD;
+  const stackOffset = toastTokens?.stackOffset ?? DEFAULT_STACK_OFFSET;
+  const stackScaleStep = toastTokens?.stackScaleStep ?? DEFAULT_STACK_SCALE_STEP;
+  const stackMinScale = toastTokens?.stackMinScale ?? 0.9;
+  const defaultDurationMs = toastTokens?.defaultDurationMs ?? DEFAULT_AUTO_DISMISS_MS;
+  const enableSwipeDismiss = toastTokens?.enableSwipeDismiss ?? true;
+  const enterSpringDamping = toastTokens?.enterSpringDamping ?? 18;
+  const enterSpringStiffness = toastTokens?.enterSpringStiffness ?? 180;
+  const enterSpringMass = toastTokens?.enterSpringMass ?? 1;
+  const enterFrom = position === 'top' ? -120 : 120;
+  const translateY = (0, _react.useRef)((0, _index.createAnimatedValue)(enterFrom)).current;
+  const translateX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const dismissedRef = (0, _react.useRef)(false);
+  const stackTranslate = position === 'top' ? index * stackOffset : -index * stackOffset;
+  const stackScale = Math.max(1 - index * stackScaleStep, stackMinScale);
+
+  // The stack offset rides on its own value so the enter spring (translateY)
+  // and the layout offset compose once instead of rebuilding a fresh
+  // `new Animated.Value` + `Animated.add` node on every render. setNativeValue
+  // keeps it in sync after the node has moved to the native driver.
+  const stackTranslateY = (0, _react.useRef)((0, _index.createAnimatedValue)(stackTranslate)).current;
+  (0, _react.useEffect)(() => {
+    (0, _index.setNativeValue)(stackTranslateY, stackTranslate);
+  }, [stackTranslate, stackTranslateY]);
+  const composedTranslateY = (0, _react.useMemo)(() => _reactNative.Animated.add(translateY, stackTranslateY), [translateY, stackTranslateY]);
+  const dismiss = () => {
+    if (dismissedRef.current) {
+      return;
+    }
+    dismissedRef.current = true;
+    _reactNative.Animated.parallel([_reactNative.Animated.timing(opacity, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(translateY, {
+      toValue: enterFrom,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: true
+    })]).start(() => onDismiss(toast.id));
+  };
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: mount-once: a toast enters and schedules its own auto-dismiss. `dismiss` is re-created per render, so declaring it would restart the timer on every parent render and the toast would never leave
+  (0, _react.useEffect)(() => {
+    const enter = _reactNative.Animated.parallel([_reactNative.Animated.spring(translateY, {
+      toValue: 0,
+      damping: enterSpringDamping,
+      stiffness: enterSpringStiffness,
+      mass: enterSpringMass,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(opacity, {
+      toValue: 1,
+      duration: theme.motion.duration.fast,
+      useNativeDriver: true
+    })]);
+    enter.start();
+    const duration = toast.duration ?? defaultDurationMs;
+    if (duration > 0) {
+      const timer = setTimeout(() => dismiss(), duration);
+      return () => {
+        enter.stop();
+        clearTimeout(timer);
+      };
+    }
+    return () => enter.stop();
+  }, []);
+  const panResponder = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
+    onMoveShouldSetPanResponder: (_evt, gesture) => Math.abs(gesture.dx) > Math.abs(gesture.dy) && Math.abs(gesture.dx) > 6,
+    onPanResponderMove: (_evt, gesture) => {
+      (0, _index.setNativeValue)(translateX, gesture.dx);
+      const fade = 1 - Math.min(Math.abs(gesture.dx) / 200, 1) * 0.7;
+      (0, _index.setNativeValue)(opacity, fade);
+    },
+    // A stolen responder (parent scroll, system gesture) otherwise leaves the
+    // toast parked mid-swipe at reduced opacity, neither dismissed nor reset.
+    onPanResponderTerminate: () => {
+      _reactNative.Animated.parallel([_reactNative.Animated.spring(translateX, {
+        toValue: 0,
+        damping: theme.motion.spring.snappy.damping,
+        stiffness: theme.motion.spring.snappy.stiffness,
+        mass: theme.motion.spring.snappy.mass,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(opacity, {
+        toValue: 1,
+        duration: theme.motion.duration.fast,
+        useNativeDriver: true
+      })]).start();
+    },
+    onPanResponderRelease: (_evt, gesture) => {
+      if (Math.abs(gesture.dx) > swipeDismissThreshold || Math.abs(gesture.vx) > swipeVelocityThreshold) {
+        const direction = gesture.dx >= 0 ? 1 : -1;
+        _reactNative.Animated.parallel([_reactNative.Animated.timing(translateX, {
+          toValue: direction * 500,
+          duration: theme.motion.duration.fast,
+          useNativeDriver: true
+        }), _reactNative.Animated.timing(opacity, {
+          toValue: 0,
+          duration: theme.motion.duration.fast,
+          useNativeDriver: true
+        })]).start(() => {
+          dismissedRef.current = true;
+          onDismiss(toast.id);
+        });
+      } else {
+        _reactNative.Animated.parallel([_reactNative.Animated.spring(translateX, {
+          toValue: 0,
+          useNativeDriver: true
+        }), _reactNative.Animated.spring(opacity, {
+          toValue: 1,
+          useNativeDriver: true
+        })]).start();
+      }
+    }
+  }), [translateX, opacity, swipeDismissThreshold, swipeVelocityThreshold, theme.motion.duration.fast, theme.motion.spring.snappy.damping, theme.motion.spring.snappy.stiffness, theme.motion.spring.snappy.mass, onDismiss, toast.id]);
+  const handleActionPress = () => {
+    toast.action?.onPress();
+    dismiss();
+  };
+  const renderIcon = () => {
+    if (toast.icon) {
+      return toast.icon;
+    }
+    const glyph = defaultGlyph(variant);
+    if (!glyph) {
+      return null;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.iconCircle, {
+        width: iconCircleSize,
+        height: iconCircleSize,
+        borderRadius: iconCircleBorderRadius,
+        backgroundColor: tint + '22'
+      }, toast.iconCircleStyle],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.iconGlyph, {
+          color: tint,
+          fontSize: iconGlyphFontSize
+        }],
+        accessible: false,
+        children: glyph
+      })
+    });
+  };
+  const a11yLabel = toast.description ? `${toast.message}. ${toast.description}` : toast.message;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    ...(enableSwipeDismiss ? panResponder.panHandlers : {}),
+    accessibilityRole: "alert",
+    accessibilityLiveRegion: "assertive",
+    accessibilityLabel: a11yLabel,
+    testID: toast.testID,
+    style: [styles.container, {
+      backgroundColor: theme.colors.background.elevated,
+      borderRadius: theme.radius.lg,
+      padding: theme.spacing.md,
+      ...theme.shadows.md,
+      shadowColor: theme.shadows.md.shadowColor,
+      opacity,
+      transform: [{
+        translateY: composedTranslateY
+      }, {
+        translateX
+      }, {
+        scale: stackScale
+      }]
+    }, toast.style, toast.containerStyle],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.tintBar, {
+        width: tintBarWidth,
+        backgroundColor: tint
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.row,
+      children: [renderIcon(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.textBlock,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.message, {
+            color: theme.colors.text.primary,
+            fontSize: theme.typography.fontSize.base,
+            ...(0, _index.fontFor)(theme, 'semibold')
+          }, toast.textStyle, toast.messageStyle],
+          numberOfLines: 2,
+          children: toast.message
+        }), toast.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.description, {
+            color: theme.colors.text.secondary,
+            fontSize: theme.typography.fontSize.sm
+          }],
+          numberOfLines: 3,
+          children: toast.description
+        }) : null]
+      }), toast.action ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: toast.action.label,
+        onPress: handleActionPress,
+        style: ({
+          pressed
+        }) => [styles.actionBtn, {
+          backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
+        }, toast.actionButtonStyle],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: {
+            color: tint,
+            fontSize: theme.typography.fontSize.sm,
+            ...(0, _index.fontFor)(theme, 'semibold')
+          },
+          numberOfLines: 1,
+          children: toast.action.label
+        })
+      }) : null]
+    })]
+  });
+};
+exports.Toast = Toast;
+const tintFor = (theme, variant) => {
+  switch (variant) {
+    case 'success':
+      return theme.colors.success;
+    case 'error':
+      return theme.colors.error;
+    case 'warning':
+      return theme.colors.warning;
+    case 'info':
+      return theme.colors.info;
+    case 'default':
+    default:
+      return theme.colors.text.primary;
+  }
+};
+const defaultGlyph = variant => {
+  switch (variant) {
+    case 'success':
+      return '✓';
+    case 'error':
+      return '×';
+    case 'warning':
+      return '!';
+    case 'info':
+      return 'i';
+    case 'default':
+    default:
+      return '';
+  }
+};
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    marginVertical: 4
+  },
+  tintBar: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 8
+  },
+  iconCircle: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12
+  },
+  iconGlyph: {
+    fontWeight: '700',
+    lineHeight: 18
+  },
+  textBlock: {
+    flex: 1,
+    paddingRight: 8
+  },
+  message: {
+    lineHeight: 20
+  },
+  description: {
+    marginTop: 2,
+    lineHeight: 18
+  },
+  actionBtn: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 8,
+    marginLeft: 8
+  }
+});
+var _default = exports.default = Toast;
+//# sourceMappingURL=Toast.js.map