@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-P23EQNRQ.js

@@ -0,0 +1,338 @@
+import { useTourHost, useTourInsets, useAnchorRect, Beacon } from './chunk-JUAMLEHX.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { View, Pressable, Animated, Easing, Text, LayoutAnimation } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { resolveAnchoredPosition, centreInContainer } from '@btndprojects/loam-engage';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function CoachmarkDots({
+  total,
+  index,
+  onSelect,
+  stepLabel = "Step",
+  titles
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  return /* @__PURE__ */ jsx(View, { style: styles.dots, children: Array.from({ length: total }, (_, i) => {
+    const done = i < index;
+    const now = i === index;
+    const title = titles?.[i];
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: `${stepLabel} ${i + 1}${title ? `: ${title}` : ""}`,
+        accessibilityState: { selected: now, disabled: !done || !onSelect },
+        disabled: !done || !onSelect,
+        onPress: done && onSelect ? () => onSelect(i) : void 0,
+        hitSlop: theme.space[10],
+        style: [
+          styles.dot,
+          now ? { width: theme.space[20], backgroundColor: theme.color.accent } : { backgroundColor: done ? theme.color.text3 : theme.color.borderStrong }
+        ]
+      },
+      i
+    );
+  }) });
+}
+function CoachmarkHint({ children, motion = "full" }) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const blink = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
+    if (motion === "none") return;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(blink, {
+          toValue: 0.45,
+          duration: theme.loop.pulse / 2,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true
+        }),
+        Animated.timing(blink, {
+          toValue: 1,
+          duration: theme.loop.pulse / 2,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true
+        })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [motion, blink, theme.loop.pulse]);
+  return /* @__PURE__ */ jsxs(View, { accessibilityRole: "text", accessibilityLiveRegion: "polite", style: styles.hint, children: [
+    /* @__PURE__ */ jsx(Animated.View, { style: [styles.hintDot, { opacity: blink }] }),
+    /* @__PURE__ */ jsx(Text, { style: styles.hintText, children })
+  ] });
+}
+function CoachmarkArrow({ side, offset }) {
+  const { styles } = useStyles(sheet);
+  const vertical = side === "top" || side === "bottom";
+  const edge = side === "bottom" ? { top: -ARROW / 2, left: offset } : side === "top" ? { bottom: -ARROW / 2, left: offset } : side === "right" ? { left: -ARROW / 2, top: offset } : { right: -ARROW / 2, top: offset };
+  return /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [styles.arrow, edge, vertical ? null : null] });
+}
+var ARROW = 10;
+function Coachmark({
+  target,
+  variant,
+  placement = "bottom",
+  gap = 12,
+  kicker,
+  title,
+  body,
+  media,
+  children,
+  counter,
+  hint,
+  dots,
+  actions,
+  headerActions,
+  onClose,
+  closeLabel = "Dismiss",
+  arrow = true,
+  width,
+  motion = "full"
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const host = useTourHost();
+  const insets = useTourInsets();
+  const mode = variant ?? (target != null ? "docked" : "centered");
+  const rect = useAnchorRect(mode === "anchored" ? target ?? null : null);
+  const [size, setSize] = React.useState(null);
+  const fade = React.useRef(new Animated.Value(0)).current;
+  const animate = motion === "full" && !theme.reduceMotion;
+  React.useEffect(() => {
+    Animated.timing(fade, {
+      toValue: 1,
+      duration: animate ? theme.motion.enter.duration : 0,
+      easing: Easing.bezier(...theme.motion.enter.easing),
+      useNativeDriver: true
+    }).start();
+  }, [fade, animate, theme.motion.enter]);
+  const onLayout = (e) => {
+    const next = { width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height };
+    setSize((prev) => prev && prev.width === next.width && prev.height === next.height ? prev : next);
+  };
+  const hostWidth = host?.size.current?.width ?? 0;
+  const requested = width ?? theme.panel.lg;
+  const cardWidth = hostWidth > 0 ? Math.min(requested, hostWidth - 2 * theme.space[10]) : requested;
+  let position = null;
+  let placed = null;
+  if (mode === "anchored") {
+    if (!rect) return null;
+    placed = size ? { ...resolveAnchoredPosition(rect, size, placement, gap), measured: true } : { side: "bottom", left: 0, top: 0, arrowOffset: 0, measured: false };
+    position = {
+      position: "absolute",
+      left: placed.left,
+      top: placed.top,
+      width: cardWidth,
+      // Hidden until measured, so the card is never painted at 0,0 and jumped.
+      opacity: placed.measured ? void 0 : 0
+    };
+  } else if (mode === "centered") {
+    const container = host?.size.current ?? { width: 0, height: 0 };
+    const centred = size ? centreInContainer(container, size) : null;
+    position = {
+      position: "absolute",
+      left: centred?.left ?? 0,
+      top: centred?.top ?? 0,
+      width: cardWidth,
+      opacity: centred ? void 0 : 0
+    };
+  } else if (mode === "docked") {
+    position = {
+      position: "absolute",
+      left: theme.space[10] + insets.left,
+      right: theme.space[10] + insets.right,
+      // Safe-area insets are the host app's to supply — `react-native-safe-area-context`
+      // reports them and a token cannot — but they no longer have to be applied by hand:
+      // `TourHost` takes an `insets` prop and this reads it. Zero when none is given, so
+      // the arithmetic is unconditional and correct on a device with no home indicator.
+      bottom: theme.space[14] + insets.bottom
+    };
+  }
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      accessibilityRole: "alert",
+      accessibilityViewIsModal: false,
+      accessibilityLabel: title,
+      onLayout,
+      style: [styles.card, position, { opacity: position?.opacity === 0 ? 0 : fade }],
+      children: [
+        mode === "anchored" && arrow && placed?.measured ? /* @__PURE__ */ jsx(CoachmarkArrow, { side: placed.side, offset: placed.arrowOffset }) : null,
+        kicker || counter || headerActions || onClose ? /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+          kicker ? /* @__PURE__ */ jsx(Text, { style: styles.kicker, children: kicker }) : null,
+          counter ? /* @__PURE__ */ jsx(Text, { style: [styles.counter, styles.pushEnd], children: counter }) : null,
+          headerActions ? /* @__PURE__ */ jsx(View, { style: [styles.headerActions, counter ? null : styles.pushEnd], children: headerActions }) : null,
+          onClose ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: closeLabel,
+              onPress: onClose,
+              hitSlop: theme.space[10],
+              style: [styles.iconButton, !kicker && !counter && !headerActions ? styles.pushEnd : null],
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: theme.color.text3 })
+            }
+          ) : null
+        ] }) : null,
+        title ? /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }) : null,
+        body ? /* @__PURE__ */ jsx(Text, { style: styles.body, children: body }) : null,
+        media,
+        children,
+        hint ? /* @__PURE__ */ jsx(CoachmarkHint, { motion, children: hint }) : null,
+        dots || actions ? /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+          dots ? /* @__PURE__ */ jsx(CoachmarkDots, { ...dots }) : null,
+          /* @__PURE__ */ jsx(View, { style: [styles.footerActions, dots ? styles.pushEnd : styles.pushEnd], children: actions })
+        ] }) : null
+      ]
+    }
+  );
+}
+function Hotspot({
+  target,
+  kicker,
+  title,
+  body,
+  placement = "bottom",
+  variant = "docked",
+  beaconLabel,
+  action,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  onSpent,
+  motion = "full"
+}) {
+  const theme = useLoamTheme();
+  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen);
+  const open = openProp ?? uncontrolled;
+  const [opened, setOpened] = React.useState(defaultOpen);
+  React.useEffect(() => {
+    if (open) setOpened(true);
+  }, [open]);
+  const setOpen = (next) => {
+    if (!theme.reduceMotion) LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    if (openProp === void 0) setUncontrolled(next);
+    onOpenChange?.(next);
+    if (!next && opened) onSpent?.();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Beacon,
+      {
+        target,
+        accessibilityLabel: beaconLabel,
+        pulsing: !opened,
+        motion,
+        onPress: () => setOpen(!open)
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(
+      Coachmark,
+      {
+        target,
+        variant,
+        placement,
+        kicker,
+        title,
+        body,
+        motion,
+        onClose: () => setOpen(false),
+        actions: action
+      }
+    ) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  card: {
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border,
+    padding: theme.space[16],
+    gap: theme.space[10],
+    ...theme.shadow.lg
+  },
+  arrow: {
+    position: "absolute",
+    width: ARROW,
+    height: ARROW,
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border,
+    transform: [{ rotate: "45deg" }]
+  },
+  header: { flexDirection: "row", alignItems: "center", gap: theme.space[9] },
+  headerActions: { flexDirection: "row", alignItems: "center", gap: theme.space[2] },
+  pushEnd: { marginLeft: "auto" },
+  kicker: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    letterSpacing: theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.accentStrong
+  },
+  counter: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    color: theme.color.text3,
+    fontVariant: ["tabular-nums"]
+  },
+  iconButton: {
+    width: theme.ctl.sm,
+    height: theme.ctl.sm,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full
+  },
+  title: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title3.fontSize,
+    lineHeight: theme.type.title3.lineHeight,
+    letterSpacing: theme.type.title3.letterSpacing,
+    color: theme.color.text
+  },
+  body: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text2
+  },
+  hint: {
+    alignSelf: "flex-start",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[7],
+    paddingVertical: theme.space[5],
+    paddingHorizontal: theme.space[11],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accentSoft,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.edge.accent
+  },
+  hintDot: {
+    width: theme.space[6],
+    height: theme.space[6],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accentOnSoft
+  },
+  hintText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    letterSpacing: theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.accentOnSoft
+  },
+  footer: { flexDirection: "row", alignItems: "center", gap: theme.space[8], marginTop: theme.space[2] },
+  footerActions: { flexDirection: "row", alignItems: "center", gap: theme.space[8] },
+  dots: { flexDirection: "row", alignItems: "center", gap: theme.space[6] },
+  dot: { width: theme.space[7], height: theme.space[7], borderRadius: theme.radius.full }
+}));
+
+export { Coachmark, CoachmarkArrow, CoachmarkDots, CoachmarkHint, Hotspot };

package/dist/chunk-PJXUJYS6.js

@@ -0,0 +1,248 @@
+import { Progress } from './chunk-2ZZ7TDJ4.js';
+import { Button } from './chunk-3ARE4TES.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { View, Text, Animated, Easing } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function clamp(n, lo, hi) {
+  return Math.max(lo, Math.min(hi, n));
+}
+function percent(progress) {
+  return Math.round(clamp(progress ?? 0, 0, 1) * 100);
+}
+function statusLabel(file) {
+  switch (file.status) {
+    case "done":
+      return file.size ?? "Done";
+    case "error":
+      return "Failed";
+    case "queued":
+      return "Queued";
+    default:
+      return `${percent(file.progress)}%`;
+  }
+}
+function statusPhrase(file) {
+  switch (file.status) {
+    case "done":
+      return file.size ? `uploaded, ${file.size}` : "uploaded";
+    case "error":
+      return file.error ? `upload failed, ${file.error}` : "upload failed";
+    case "queued":
+      return "queued";
+    default:
+      return `uploading, ${percent(file.progress)} percent`;
+  }
+}
+function FileUploadRow({ file, onRetry, onRemove, motion }) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const isError = file.status === "error";
+  const isDone = file.status === "done";
+  const isUploading = file.status === "uploading";
+  const anim = React.useRef(new Animated.Value(motion === "none" ? 1 : 0)).current;
+  React.useEffect(() => {
+    if (motion === "none") return;
+    Animated.timing(anim, {
+      toValue: 1,
+      duration: theme.motion.enter.duration,
+      easing: Easing.bezier(...theme.motion.enter.easing),
+      useNativeDriver: true
+    }).start();
+  }, []);
+  const animatedStyle = motion === "none" ? null : {
+    opacity: anim,
+    ...motion === "full" ? {
+      transform: [
+        { translateY: anim.interpolate({ inputRange: [0, 1], outputRange: [theme.space.s2, 0] }) }
+      ]
+    } : {}
+  };
+  const chipBg = isError ? theme.color.dangerSoft : theme.color.surface2;
+  const chipFg = isError ? theme.color.dangerOnSoft : theme.color.text2;
+  return /* @__PURE__ */ jsxs(Animated.View, { style: [styles.row, animatedStyle], children: [
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          styles.chip,
+          { backgroundColor: chipBg },
+          // Soft tints collapse to the plain surface at high contrast; carry the
+          // meaning to an edge outline instead.
+          isError ? { borderWidth: theme.borderWidth.base, borderColor: theme.edge.danger } : null
+        ],
+        children: /* @__PURE__ */ jsx(Icon, { name: "filedoc", size: theme.icon.md, color: chipFg })
+      }
+    ),
+    /* @__PURE__ */ jsxs(View, { style: styles.main, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.line, children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            numberOfLines: 1,
+            accessibilityLabel: `${file.name}, ${statusPhrase(file)}`,
+            style: styles.name,
+            children: file.name
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { style: [styles.status, { color: isError ? theme.color.danger : theme.color.text2 }], children: statusLabel(file) })
+      ] }),
+      isUploading ? /* @__PURE__ */ jsx(
+        Progress,
+        {
+          size: "sm",
+          value: percent(file.progress),
+          accessibilityLabel: `Uploading ${file.name}`
+        }
+      ) : null
+    ] }),
+    isDone ? /* @__PURE__ */ jsx(View, { style: styles.check, children: /* @__PURE__ */ jsx(Icon, { name: "check-circle", size: theme.icon.md, color: theme.color.good }) }) : isError ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        leadingIcon: "refresh",
+        accessibilityLabel: `Retry ${file.name}`,
+        onPress: onRetry ? () => onRetry(file.id) : void 0
+      }
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        leadingIcon: "x",
+        accessibilityLabel: `Remove ${file.name}`,
+        onPress: onRemove ? () => onRemove(file.id) : void 0
+      }
+    )
+  ] });
+}
+function FileUpload({
+  files,
+  onPickCamera,
+  onPickLibrary,
+  onRetry,
+  onRemove,
+  permissionState = "granted",
+  onOpenSettings,
+  accept: _accept,
+  hint = "PNG, JPG or PDF \xB7 up to 25 MB each",
+  motion = "reduced"
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const denied = permissionState === "denied";
+  return /* @__PURE__ */ jsxs(View, { style: styles.rootWrap, children: [
+    denied ? /* @__PURE__ */ jsxs(View, { style: styles.denied, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.deniedHead, children: [
+        /* @__PURE__ */ jsx(Icon, { name: "lock", size: theme.icon.md, color: theme.color.warnOnSoft }),
+        /* @__PURE__ */ jsxs(View, { style: styles.main, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.deniedTitle, { color: theme.color.warnOnSoft }], children: "Permission needed" }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.deniedBody, { color: theme.color.warnOnSoft }], children: "Allow camera and photo access in Settings to upload." })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          leadingIcon: "settings",
+          accessibilityLabel: "Open settings",
+          onPress: onOpenSettings,
+          children: "Open settings"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(View, { style: styles.entry, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
+        /* @__PURE__ */ jsx(View, { style: styles.actionItem, children: /* @__PURE__ */ jsx(Button, { variant: "outline", leadingIcon: "maximize", fullWidth: true, onPress: onPickCamera, children: "Camera" }) }),
+        /* @__PURE__ */ jsx(View, { style: styles.actionItem, children: /* @__PURE__ */ jsx(Button, { variant: "outline", leadingIcon: "image", fullWidth: true, onPress: onPickLibrary, children: "Library" }) })
+      ] }),
+      hint ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: hint }) : null
+    ] }),
+    files.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles.list, children: files.map((file) => /* @__PURE__ */ jsx(
+      FileUploadRow,
+      {
+        file,
+        onRetry,
+        onRemove,
+        motion
+      },
+      file.id
+    )) }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  rootWrap: { alignSelf: "stretch", gap: theme.space.s4 },
+  entry: { gap: theme.space.s2 },
+  actions: { flexDirection: "row", gap: theme.space.s3 },
+  actionItem: { flex: 1 },
+  hint: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.type.footnote.letterSpacing,
+    color: theme.color.text2
+  },
+  denied: {
+    gap: theme.space.s3,
+    padding: theme.space.s4,
+    borderRadius: theme.radius.lg,
+    backgroundColor: theme.color.warnSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.warn
+  },
+  deniedHead: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s3 },
+  deniedTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    letterSpacing: theme.type.subheadline.letterSpacing
+  },
+  deniedBody: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.type.footnote.letterSpacing
+  },
+  list: { alignSelf: "stretch", gap: theme.space.s2 },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  chip: {
+    width: theme.ctl.md,
+    height: theme.ctl.md,
+    borderRadius: theme.ctl.r.sm,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  main: { flex: 1, minWidth: 0, gap: theme.space.s1 },
+  line: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  name: {
+    flex: 1,
+    minWidth: 0,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    letterSpacing: theme.type.subheadline.letterSpacing,
+    color: theme.color.text
+  },
+  status: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    letterSpacing: theme.type.caption1.letterSpacing
+  },
+  check: { alignItems: "center", justifyContent: "center" }
+}));
+
+export { FileUpload };

package/dist/chunk-PNWUWOBF.js

@@ -0,0 +1 @@
+