@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/module/components/Tour/Tour.js

@@ -0,0 +1,338 @@
+"use strict";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { smoothCorners } from "../../utils/corners.js";
+import { Button } from "../Button/index.js";
+import { Modal } from "../Modal/index.js";
+
+/**
+ * Where the app remembers that a person has seen a tour: one record per tour
+ * id for the signed-in person, so one server record can serve the web tour too.
+ */
+
+/**
+ * - `finished`: the person stepped past the last step. Marked seen.
+ * - `skipped`: Skip, or Android back. Marked seen.
+ * - `alreadySeen`: the seen store says this tour was seen, so nothing showed.
+ * - `noTargets`: no step's view was on screen, so nothing showed. Not marked seen.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_GAP = 8;
+const DEFAULT_SCREEN_PADDING = 8;
+const MAX_CARD_WIDTH = 360;
+const HIGHLIGHT_BORDER_WIDTH = 2;
+const measureInWindow = target => new Promise(resolve => {
+  const node = target.current;
+  if (!node) {
+    resolve(null);
+    return;
+  }
+  node.measureInWindow((x, y, width, height) => resolve({
+    x,
+    y,
+    width,
+    height
+  }));
+});
+const isOnScreen = (rect, screen) => rect.width > 0 && rect.height > 0 && rect.x < screen.width && rect.y < screen.height && rect.x + rect.width > 0 && rect.y + rect.height > 0;
+
+/**
+ * Walks through product steps one highlighted view at a time: the screen is
+ * dimmed except around the step's view, with a card holding the step text and
+ * Back, Next and Skip. Built on `Modal`; the card sits on the side of the view
+ * with more room, as `Tooltip` places its bubble, using the same tooltip gap and
+ * screen-padding tokens. Motion comes from `theme.motion`, which collapses under
+ * the OS Reduce Motion setting.
+ */
+const Tour = ({
+  tourId,
+  steps,
+  visible,
+  onClose,
+  seenStore,
+  labels,
+  haptic,
+  testID
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const screen = useWindowDimensions();
+  const screenRef = useRef(screen);
+  screenRef.current = screen;
+  const gap = theme.components.tooltip?.gap ?? DEFAULT_GAP;
+  const screenPadding = theme.components.tooltip?.screenPadding ?? DEFAULT_SCREEN_PADDING;
+  const [current, setCurrent] = useState(null);
+  const [firstIndex, setFirstIndex] = useState(0);
+  const cardOpacity = useRef(createAnimatedValue(0)).current;
+  const stepsRef = useRef(steps);
+  stepsRef.current = steps;
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  // Read through a ref so an inline store object does not restart a running tour.
+  const seenStoreRef = useRef(seenStore);
+  seenStoreRef.current = seenStore;
+  const locate = useCallback(async (from, direction) => {
+    for (let index = from; index >= 0 && index < stepsRef.current.length; index += direction) {
+      const rect = await measureInWindow(stepsRef.current[index].target);
+      if (rect && isOnScreen(rect, screenRef.current)) {
+        return {
+          index,
+          rect
+        };
+      }
+    }
+    return null;
+  }, []);
+  useEffect(() => {
+    if (!visible) {
+      setCurrent(null);
+      return;
+    }
+    let cancelled = false;
+    const start = async () => {
+      const store = seenStoreRef.current;
+      if (store && (await store.isSeen(tourId))) {
+        if (!cancelled) {
+          onCloseRef.current('alreadySeen');
+        }
+        return;
+      }
+      const first = await locate(0, 1);
+      if (cancelled) {
+        return;
+      }
+      if (!first) {
+        onCloseRef.current('noTargets');
+        return;
+      }
+      setFirstIndex(first.index);
+      setCurrent(first);
+    };
+    void start();
+    return () => {
+      cancelled = true;
+    };
+  }, [visible, tourId, locate]);
+  useEffect(() => {
+    if (!current) {
+      return;
+    }
+    const step = stepsRef.current[current.index];
+    const position = `Step ${current.index + 1} of ${stepsRef.current.length}`;
+    AccessibilityInfo.announceForAccessibility([position, step.title, step.description].filter(Boolean).join('. '));
+    cardOpacity.setValue(0);
+    const fade = Animated.timing(cardOpacity, {
+      toValue: 1,
+      duration: theme.motion.duration.fast,
+      useNativeDriver: true
+    });
+    fade.start();
+    return () => fade.stop();
+  }, [current, cardOpacity, theme.motion.duration.fast]);
+  const close = useCallback(async reason => {
+    setCurrent(null);
+    await seenStoreRef.current?.markSeen(tourId);
+    onCloseRef.current(reason);
+  }, [tourId]);
+  const handleNext = useCallback(async () => {
+    if (!current) {
+      return;
+    }
+    const next = await locate(current.index + 1, 1);
+    if (next) {
+      setCurrent(next);
+      return;
+    }
+    await close('finished');
+  }, [current, locate, close]);
+  const handleBack = useCallback(async () => {
+    if (!current) {
+      return;
+    }
+    const previous = await locate(current.index - 1, -1);
+    if (previous) {
+      setCurrent(previous);
+    }
+  }, [current, locate]);
+  const handleSkip = useCallback(() => {
+    void close('skipped');
+  }, [close]);
+  const step = current ? steps[current.index] : undefined;
+  const isLast = current ? current.index === steps.length - 1 : false;
+  const pad = theme.spacing.xs;
+  const hole = current ? {
+    x: current.rect.x - pad,
+    y: current.rect.y - pad,
+    width: current.rect.width + pad * 2,
+    height: current.rect.height + pad * 2
+  } : null;
+  const cardWidth = Math.min(screen.width - screenPadding * 2, MAX_CARD_WIDTH);
+  const cardPosition = hole ? (() => {
+    const centreX = hole.x + hole.width / 2;
+    const left = Math.max(screenPadding, Math.min(centreX - cardWidth / 2, screen.width - cardWidth - screenPadding));
+    const roomAbove = hole.y;
+    const roomBelow = screen.height - (hole.y + hole.height);
+    return roomBelow >= roomAbove ? {
+      left,
+      top: hole.y + hole.height + gap,
+      maxHeight: Math.max(roomBelow - gap - screenPadding, 0)
+    } : {
+      left,
+      bottom: screen.height - hole.y + gap,
+      maxHeight: Math.max(roomAbove - gap - screenPadding, 0)
+    };
+  })() : null;
+  const dim = theme.colors.background.overlay;
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: current !== null,
+    onRequestClose: handleSkip,
+    presentation: "fullScreen",
+    backdropPressClose: false,
+    backdropStyle: styles.transparent,
+    contentStyle: styles.transparent,
+    accessibilityLabel: step?.title ?? step?.description,
+    haptic: haptic,
+    testID: testID,
+    children: hole && cardPosition && step ? /*#__PURE__*/_jsxs(View, {
+      style: StyleSheet.absoluteFill,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.dim, {
+          backgroundColor: dim,
+          top: 0,
+          left: 0,
+          right: 0,
+          height: Math.max(hole.y, 0)
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.dim, {
+          backgroundColor: dim,
+          top: hole.y + hole.height,
+          left: 0,
+          right: 0,
+          bottom: 0
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.dim, {
+          backgroundColor: dim,
+          top: hole.y,
+          left: 0,
+          width: Math.max(hole.x, 0),
+          height: hole.height
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.dim, {
+          backgroundColor: dim,
+          top: hole.y,
+          left: hole.x + hole.width,
+          right: 0,
+          height: hole.height
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        style: [styles.highlight, {
+          top: hole.y,
+          left: hole.x,
+          width: hole.width,
+          height: hole.height
+        }]
+      }), /*#__PURE__*/_jsxs(Animated.View, {
+        accessibilityLiveRegion: "polite",
+        style: [styles.card, cardPosition, {
+          width: cardWidth,
+          opacity: cardOpacity
+        }],
+        testID: testID ? `${testID}-card` : undefined,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.position,
+          children: `Step ${(current?.index ?? 0) + 1} of ${steps.length}`
+        }), step.title ? /*#__PURE__*/_jsx(Text, {
+          style: styles.title,
+          accessibilityRole: "header",
+          children: step.title
+        }) : null, /*#__PURE__*/_jsx(Text, {
+          style: styles.description,
+          children: step.description
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.actions,
+          children: [/*#__PURE__*/_jsx(Button, {
+            title: labels?.skip ?? 'Skip',
+            variant: "ghost",
+            size: "sm",
+            haptic: haptic,
+            onPress: handleSkip,
+            testID: testID ? `${testID}-skip` : undefined
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.navigation,
+            children: [current && current.index > firstIndex ? /*#__PURE__*/_jsx(Button, {
+              title: labels?.back ?? 'Back',
+              variant: "outline",
+              size: "sm",
+              haptic: haptic,
+              onPress: () => void handleBack(),
+              testID: testID ? `${testID}-back` : undefined
+            }) : null, /*#__PURE__*/_jsx(Button, {
+              title: isLast ? labels?.done ?? 'Done' : labels?.next ?? 'Next',
+              size: "sm",
+              haptic: haptic,
+              onPress: () => void handleNext(),
+              testID: testID ? `${testID}-next` : undefined
+            })]
+          })]
+        })]
+      })]
+    }) : null
+  });
+};
+Tour.displayName = 'Tour';
+const buildStyles = theme => StyleSheet.create({
+  transparent: {
+    backgroundColor: 'transparent'
+  },
+  dim: {
+    position: 'absolute'
+  },
+  highlight: {
+    position: 'absolute',
+    borderWidth: HIGHLIGHT_BORDER_WIDTH,
+    borderColor: theme.colors.primary,
+    borderRadius: theme.radius.md,
+    ...smoothCorners
+  },
+  card: {
+    position: 'absolute',
+    backgroundColor: theme.colors.background.elevated,
+    borderRadius: theme.radius.lg,
+    ...smoothCorners,
+    padding: theme.spacing.lg,
+    gap: theme.spacing.sm,
+    ...theme.shadows.lg
+  },
+  position: {
+    color: theme.colors.text.tertiary,
+    fontSize: theme.typography.fontSize.xs
+  },
+  title: {
+    color: theme.colors.text.primary,
+    fontSize: theme.typography.fontSize.lg,
+    fontWeight: theme.typography.fontWeight.semibold
+  },
+  description: {
+    color: theme.colors.text.secondary,
+    fontSize: theme.typography.fontSize.sm
+  },
+  actions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: theme.spacing.xs
+  },
+  navigation: {
+    flexDirection: 'row',
+    gap: theme.spacing.sm
+  }
+});
+export { Tour };
+export default Tour;
+//# sourceMappingURL=Tour.js.map

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

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

package/lib/module/components/ZoomableImage/ZoomableImage.js

@@ -0,0 +1,198 @@
+"use strict";
+
+/**
+ * ZoomableImage — a standalone pinch-to-zoom / pan / double-tap-to-zoom
+ * wrapper for a single piece of content (typically one `<Image>`).
+ *
+ * Reuses the same Reanimated 3 gesture composition `ImageGallery`'s internal
+ * lightbox slide uses (pinch clamped and rubber-banded at its limits, pan
+ * gated to only engage once zoomed in, double-tap toggling between baseline
+ * and `doubleTapScale`), stripped of the carousel-slide concerns that
+ * component needs and this one does not — there is no `index`/`total`/
+ * `active` because a standalone image is always the one being viewed.
+ *
+ * USAGE:
+ *
+ * <ZoomableImage>
+ *   <Image source={{ uri }} style={styles.image} resizeMode="contain" />
+ * </ZoomableImage>
+ *
+ * Takes `children` rather than a `source`/`uri` prop: every real consumer of
+ * this pattern in the fleet wraps an already-authenticated image component
+ * (headers, caching, its own loading state) rather than a bare `<Image>`, so
+ * a `source` prop would force re-implementing that per app. Wrapping keeps
+ * this component ignorant of how the image is fetched.
+ */
+
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_MAX_SCALE = 4;
+const DEFAULT_MIN_SCALE = 1;
+const DEFAULT_DOUBLE_TAP_SCALE = 2;
+const SPRING_CONFIG = {
+  damping: 18,
+  stiffness: 220,
+  mass: 1
+};
+export const ZoomableImage = ({
+  children,
+  maxScale = DEFAULT_MAX_SCALE,
+  minScale = DEFAULT_MIN_SCALE,
+  doubleTapScale = DEFAULT_DOUBLE_TAP_SCALE,
+  disabled = false,
+  haptic,
+  style,
+  accessibilityLabel,
+  testID
+}) => {
+  const scale = useSharedValue(1);
+  const savedScale = useSharedValue(1);
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+  const savedTranslateX = useSharedValue(0);
+  const savedTranslateY = useSharedValue(0);
+  const resetTransform = useCallback(() => {
+    scale.value = withSpring(1, SPRING_CONFIG);
+    savedScale.value = 1;
+    translateX.value = withSpring(0, SPRING_CONFIG);
+    translateY.value = withSpring(0, SPRING_CONFIG);
+    savedTranslateX.value = 0;
+    savedTranslateY.value = 0;
+  }, [scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY]);
+
+  // Disabling mid-zoom must not leave the content stranded scaled/panned —
+  // snap it back the same way ImageGallery's slide resets on losing focus.
+  useEffect(() => {
+    if (disabled) {
+      resetTransform();
+    }
+  }, [disabled, resetTransform]);
+  const triggerImpact = useCallback(() => {
+    const h = resolveHaptic(haptic, 'impactLight');
+    if (h) {
+      triggerHaptic(h);
+    }
+  }, [haptic]);
+  const pinch = useMemo(() => Gesture.Pinch().enabled(!disabled).onStart(() => {
+    'worklet';
+
+    savedScale.value = scale.value;
+  }).onUpdate(e => {
+    'worklet';
+
+    const next = savedScale.value * e.scale;
+    // Clamp minScale..maxScale on the UI thread so pinch feels rubbery at limits.
+    if (next < minScale) {
+      scale.value = minScale + (next - minScale) * 0.3;
+    } else if (next > maxScale) {
+      scale.value = maxScale + (next - maxScale) * 0.2;
+    } else {
+      scale.value = next;
+    }
+  }).onEnd(() => {
+    'worklet';
+
+    if (scale.value < minScale) {
+      scale.value = withSpring(minScale, SPRING_CONFIG);
+      translateX.value = withSpring(0, SPRING_CONFIG);
+      translateY.value = withSpring(0, SPRING_CONFIG);
+      savedScale.value = minScale;
+      savedTranslateX.value = 0;
+      savedTranslateY.value = 0;
+      return;
+    }
+    if (scale.value > maxScale) {
+      scale.value = withSpring(maxScale, SPRING_CONFIG);
+      savedScale.value = maxScale;
+      return;
+    }
+    savedScale.value = scale.value;
+  }), [disabled, scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY, minScale, maxScale]);
+
+  // Pan only engages when zoomed in — otherwise a scroll view or carousel this
+  // is nested inside keeps owning the gesture.
+  const pan = useMemo(() => Gesture.Pan().enabled(!disabled).minPointers(1).maxPointers(1).onStart(() => {
+    'worklet';
+
+    savedTranslateX.value = translateX.value;
+    savedTranslateY.value = translateY.value;
+  }).onUpdate(e => {
+    'worklet';
+
+    if (scale.value <= 1) {
+      return;
+    }
+    translateX.value = savedTranslateX.value + e.translationX;
+    translateY.value = savedTranslateY.value + e.translationY;
+  }).onEnd(() => {
+    'worklet';
+
+    savedTranslateX.value = translateX.value;
+    savedTranslateY.value = translateY.value;
+  }), [disabled, scale, translateX, translateY, savedTranslateX, savedTranslateY]);
+  const doubleTap = useMemo(() => Gesture.Tap().enabled(!disabled).numberOfTaps(2).onEnd(() => {
+    'worklet';
+
+    runOnJS(triggerImpact)();
+    if (scale.value > 1) {
+      scale.value = withSpring(1, SPRING_CONFIG);
+      translateX.value = withSpring(0, SPRING_CONFIG);
+      translateY.value = withSpring(0, SPRING_CONFIG);
+      savedScale.value = 1;
+      savedTranslateX.value = 0;
+      savedTranslateY.value = 0;
+    } else {
+      scale.value = withSpring(doubleTapScale, SPRING_CONFIG);
+      savedScale.value = doubleTapScale;
+    }
+  }), [disabled, scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY, triggerImpact, doubleTapScale]);
+
+  // Race the gestures so they coordinate cleanly: a tap won't be misread as a
+  // tiny pan, and pan won't fire when the user actually starts a pinch.
+  const composed = useMemo(() => Gesture.Race(pinch, pan, doubleTap), [pinch, pan, doubleTap]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: translateX.value
+    }, {
+      translateY: translateY.value
+    }, {
+      scale: scale.value
+    }]
+  }));
+  return /*#__PURE__*/_jsx(GestureDetector, {
+    gesture: composed,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.container, style],
+      testID: testID,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled
+      },
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.content, animatedStyle],
+        children: children
+      })
+    })
+  });
+};
+ZoomableImage.displayName = 'ZoomableImage';
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden'
+  },
+  content: {
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+export default ZoomableImage;
+//# sourceMappingURL=ZoomableImage.js.map

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

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

package/lib/module/components/index.js

@@ -0,0 +1,79 @@
+"use strict";
+
+export { Accordion, AccordionGroup } from "./Accordion/index.js";
+export { AmountSlider } from "./AmountSlider/index.js";
+export { AnimatePresence } from "./AnimatePresence/index.js";
+export { AppBar } from "./AppBar/index.js";
+export { AsyncBlock } from "./AsyncBlock/index.js";
+export { AuthedImage, authedImageCacheStats, clearAuthedImageCache, getAuthedImageCacheLimit, setAuthedImageCacheLimit } from "./AuthedImage/index.js";
+export { Autocomplete } from "./Autocomplete/index.js";
+export { Avatar, AvatarGroup } from "./Avatar/index.js";
+export { Badge } from "./Badge/index.js";
+export { Banner } from "./Banner/index.js";
+export { BottomNavigation } from "./BottomNavigation/index.js";
+export { BottomSheet, useBottomSheet } from "./BottomSheet/index.js";
+export { Box, Row, Spacer, Stack } from "./Box/index.js";
+export { Button } from "./Button/index.js";
+export { Card } from "./Card/index.js";
+export { Carousel } from "./Carousel/index.js";
+export { Checkbox } from "./Checkbox/index.js";
+export { Chip } from "./Chip/index.js";
+export { ChoiceGroup } from "./ChoiceGroup/index.js";
+export { Confetti } from "./Confetti/index.js";
+export { DatePicker } from "./DatePicker/index.js";
+export { DateRangePicker } from "./DateRangePicker/index.js";
+export { Descriptions } from "./Descriptions/index.js";
+export { Dialog } from "./Dialog/index.js";
+export { Divider } from "./Divider/index.js";
+export { Drawer } from "./Drawer/index.js";
+export { EmptyState } from "./EmptyState/index.js";
+export { ErrorBoundary, useErrorHandler, withErrorBoundary } from "./ErrorBoundary/index.js";
+export { FilePicker, formatFileSize } from "./FilePicker/index.js";
+export { FileViewer } from "./FileViewer/index.js";
+export { FloatingActionButton, FloatingActionButtonGroup } from "./FloatingActionButton/index.js";
+export { ForceUpdateDialog } from "./ForceUpdateDialog/index.js";
+export { FormField } from "./FormField/index.js";
+export { IconButton } from "./IconButton/index.js";
+export { ImageGallery } from "./ImageGallery/index.js";
+export { InlineSelect } from "./InlineSelect/index.js";
+export { Input } from "./Input/index.js";
+export { KeyboardAwareScrollView } from "./KeyboardAwareScrollView/index.js";
+export { KeyboardToolbar } from "./KeyboardToolbar/index.js";
+export { ListItem } from "./ListItem/index.js";
+export { LoaderOverlay, loader, useLoader } from "./LoaderOverlay/index.js";
+export { Markdown } from "./Markdown/index.js";
+export { MODAL_DISMISS_GRACE_MS, Modal } from "./Modal/index.js";
+export { NumberInput } from "./NumberInput/index.js";
+export { OTPInput } from "./OTPInput/index.js";
+export { DEFAULT_CALLING_CODES, formatE164, PhoneNumberInput } from "./PhoneNumberInput/index.js";
+export { PickerTrigger } from "./PickerTrigger/index.js";
+export { ProfileCompletion } from "./ProfileCompletion/index.js";
+export { ProfilePicker } from "./ProfilePicker/index.js";
+export { ProgressBar } from "./ProgressBar/index.js";
+export { ProgressRing } from "./ProgressRing/index.js";
+export { Radio, RadioDot, RadioGroup } from "./Radio/index.js";
+export { Rating } from "./Rating/index.js";
+export { Repeater } from "./Repeater/index.js";
+export { applyMarkdownAction, RichTextEditor } from "./RichTextEditor/index.js";
+export { SearchBar } from "./SearchBar/index.js";
+export { SegmentedControl } from "./SegmentedControl/index.js";
+export { Select } from "./Select/index.js";
+export { Skeleton, SkeletonCircle, SkeletonClockProvider, SkeletonContent, SkeletonList, SkeletonProvider, SkeletonSkip, SkeletonText, useReduceMotion, useSkeletonClock, useSkeletonDefaults } from "./Skeleton/index.js";
+export { Slider } from "./Slider/index.js";
+export { SliderField } from "./SliderField/index.js";
+export { SlideToConfirm } from "./SlideToConfirm/index.js";
+export { Spinner } from "./Spinner/index.js";
+export { StatusBadge } from "./StatusBadge/index.js";
+export { Stepper } from "./Stepper/index.js";
+export { Swipeable } from "./Swipeable/index.js";
+export { Switch } from "./Switch/index.js";
+export { Tabs } from "./Tabs/index.js";
+export { TagInput } from "./TagInput/index.js";
+export { Text } from "./Text/index.js";
+export { Timeline } from "./Timeline/index.js";
+export { TimePicker } from "./TimePicker/index.js";
+export { Toast, ToastProvider, toast, useToast } from "./Toast/index.js";
+export { Tooltip } from "./Tooltip/index.js";
+export { Tour } from "./Tour/index.js";
+export { ZoomableImage } from "./ZoomableImage/index.js";
+//# sourceMappingURL=index.js.map

package/lib/module/form/FormContext.js

@@ -0,0 +1,44 @@
+"use strict";
+
+import React, { createContext, useContext } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const FormContext = /*#__PURE__*/createContext(null);
+/**
+ * Provides a {@link useForm} instance to descendants so `<FormField name>`,
+ * {@link useField} and {@link useFieldArray} can bind by name.
+ *
+ * Generic in `Values`, and it has to be. `FormApi` is invariant in `Values`
+ * because `setValues` accepts a `(prev: Values) => Values`, so a
+ * `FormApi<MyValues>` is not assignable to a `FormApi<FormValues>`. While the
+ * prop was declared at the base type, `useForm<MyValues>()` could not be handed
+ * to `<Form>` by ANY consumer, which is most of the reason to type a form at
+ * all. Untyped callers are unaffected: `Values` defaults to `FormValues`.
+ */
+export const Form = ({
+  form,
+  children
+}) =>
+/*#__PURE__*/
+// Stored at the base type on purpose: descendants bind by NAME through
+// useField and never observe Values, so widening here is safe and is what
+// lets a typed form be provided at all.
+_jsx(FormContext.Provider, {
+  value: form,
+  children: children
+});
+Form.displayName = 'Form';
+
+/** Read the surrounding form. Throws if there is no `<Form>` ancestor. */
+export function useFormContext() {
+  const ctx = useContext(FormContext);
+  if (!ctx) {
+    throw new Error('useFormContext / useField / <FormField name> must be rendered inside a <Form> from @webority/mobile-ui.');
+  }
+  return ctx;
+}
+
+/** Read the surrounding form, or null when there is no `<Form>` ancestor. */
+export function useOptionalFormContext() {
+  return useContext(FormContext);
+}
+//# sourceMappingURL=FormContext.js.map

package/lib/module/form/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+export { Form, useFormContext, useOptionalFormContext } from "./FormContext.js";
+export { deletePath, getPath, setPath } from "./path.js";
+
+// Validation rule presets (the dependency-free Yup replacement):
+//   import { rules } from '@webority/mobile-ui';
+//   validate: { email: [rules.required(), rules.email()] }
+// import-then-export instead of `export * as` — consumer apps compile this
+// library from source via Metro, and their babel preset does not transform
+// export-namespace-from syntax outside the app root.
+import * as rules from "./rules.js";
+export { useField, useFieldArray } from "./useField.js";
+export { useForm } from "./useForm.js";
+export { isFieldFilled, useFormCompletion } from "./useFormCompletion.js";
+export { rules };
+//# sourceMappingURL=index.js.map