@btndprojects/loam-ui-native 0.1.1 → 0.2.1

package/dist/chunk-3DUWIYV5.js

@@ -0,0 +1,437 @@
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, motionTiming, springConfig, project, rubberband } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { View, ScrollView, Pressable, Text, Animated, PanResponder, Modal, Easing } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DOT = {
+  /** Width of the active dot. */
+  activeWidth: 16,
+  /** Width of an inactive dot. */
+  idleWidth: 5
+};
+function Dot({ active }) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("gallery");
+  const progress = React.useRef(new Animated.Value(active ? 1 : 0)).current;
+  React.useEffect(() => {
+    Animated.timing(progress, {
+      toValue: active ? 1 : 0,
+      duration: theme.duration.base,
+      easing: Easing.bezier(...theme.easing.base),
+      useNativeDriver: false
+    }).start();
+  }, [active, progress, theme.duration.base, theme.easing.base]);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      style: [
+        styles.dot,
+        {
+          width: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [DOT.idleWidth, DOT.activeWidth]
+          }),
+          // The carousel sits on imagery, so the dots use the mode-invariant
+          // media ink rather than a surface token: an indicator that inverted
+          // with the mode would vanish over a bright photo. The idle dot is the
+          // 0.38 alpha stop — the same value the system dims a disabled control
+          // to. Both were `#ffffff` / `rgba(255,255,255,0.4)` literals in the
+          // module constant above, which is why they could not follow a theme.
+          backgroundColor: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [theme.white.a10, theme.media.ink]
+          })
+        }
+      ]
+    }
+  );
+}
+var DEFAULT_LABELS = {
+  item: (position) => `Item ${position}`,
+  counter: (position, count) => `${position} / ${count}`,
+  close: "Close",
+  previous: "Previous image",
+  next: "Next image",
+  placeholder: (position, aspectRatio) => `Image ${position} \xB7 ${aspectRatio}`
+};
+function Gallery({
+  items,
+  columns = 3,
+  lightbox = true,
+  onSelect,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("gallery", DEFAULT_LABELS, labelsProp);
+  const [openIndex, setOpenIndex] = React.useState(null);
+  const open = (i) => {
+    onSelect?.(i);
+    if (lightbox) setOpenIndex(i);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: styles.galleryRoot, children: [
+    /* @__PURE__ */ jsx(ScrollView, { contentContainerStyle: styles.grid, children: items.map((item, i) => /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "imagebutton",
+        accessibilityLabel: item.alt || labels.item(i + 1),
+        onPress: () => open(i),
+        style: [styles.tile, { width: `${100 / columns}%` }],
+        children: /* @__PURE__ */ jsxs(View, { style: styles.tileInner, children: [
+          item.render ? item.render() : /* @__PURE__ */ jsx(Text, { style: styles.tileIndex, children: i + 1 }),
+          item.duration ? /* @__PURE__ */ jsx(View, { style: styles.durationBadge, children: /* @__PURE__ */ jsx(Text, { style: styles.durationText, children: item.duration }) }) : null
+        ] })
+      },
+      item.id
+    )) }),
+    openIndex != null ? /* @__PURE__ */ jsx(
+      GalleryLightbox,
+      {
+        items,
+        index: openIndex,
+        onIndexChange: setOpenIndex,
+        onClose: () => setOpenIndex(null),
+        labels: labelsProp
+      }
+    ) : null
+  ] });
+}
+function pinchDistance(e) {
+  const t = e.nativeEvent.touches;
+  if (!t || t.length < 2) return 0;
+  return Math.hypot(t[0].pageX - t[1].pageX, t[0].pageY - t[1].pageY);
+}
+function GalleryLightbox({
+  items,
+  index,
+  onIndexChange,
+  onClose,
+  maxZoom = 3,
+  motion = "full",
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("gallery", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("gallery");
+  const level = useResolvedMotion(motion, "gallery");
+  const item = items[index];
+  const count = items.length;
+  const tx = React.useRef(new Animated.Value(0)).current;
+  const ty = React.useRef(new Animated.Value(0)).current;
+  const fade = React.useRef(new Animated.Value(1)).current;
+  const scale = React.useRef(new Animated.Value(1)).current;
+  const width = React.useRef(0);
+  const running = React.useRef(null);
+  const live = React.useRef({ index, count, level, theme, maxZoom, onIndexChange });
+  live.current = { index, count, level, theme, maxZoom, onIndexChange };
+  const gesture = React.useRef({ pinch0: 0, zoom: 1, zoomAtStart: 1, panX: 0, panY: 0, s: 1 });
+  const go = React.useCallback((delta) => {
+    const l = live.current;
+    l.onIndexChange((l.index + delta + l.count) % l.count);
+  }, []);
+  const leaveThen = React.useCallback(
+    (delta, velocity = 0) => {
+      const { level: lv, theme: th } = live.current;
+      const w = width.current || 320;
+      const g = gesture.current;
+      g.zoom = 1;
+      g.panX = 0;
+      g.panY = 0;
+      scale.setValue(1);
+      ty.setValue(0);
+      if (running.current) {
+        running.current.stop();
+        running.current = null;
+        tx.setValue(0);
+        fade.setValue(1);
+        go(delta);
+        return;
+      }
+      if (lv === "none") {
+        tx.setValue(0);
+        go(delta);
+        return;
+      }
+      if (lv === "reduced") {
+        const out2 = Animated.timing(fade, {
+          toValue: 0,
+          ...motionTiming(lv),
+          useNativeDriver: true
+        });
+        running.current = out2;
+        out2.start(({ finished }) => {
+          running.current = null;
+          tx.setValue(0);
+          go(delta);
+          if (!finished) return fade.setValue(1);
+          Animated.timing(fade, { toValue: 1, ...motionTiming(lv), useNativeDriver: true }).start();
+        });
+        return;
+      }
+      const out = Animated.parallel([
+        Animated.spring(tx, {
+          toValue: -delta * w,
+          ...springConfig(th, "fe", { velocity }),
+          useNativeDriver: true
+        }),
+        Animated.spring(fade, { toValue: 0, ...springConfig(th, "fe"), useNativeDriver: true })
+      ]);
+      running.current = out;
+      out.start(({ finished }) => {
+        running.current = null;
+        if (!finished) return;
+        tx.setValue(delta * w * 0.35);
+        go(delta);
+        Animated.parallel([
+          Animated.spring(tx, { toValue: 0, ...springConfig(th, "ds"), useNativeDriver: true }),
+          Animated.spring(fade, { toValue: 1, ...springConfig(th, "de"), useNativeDriver: true })
+        ]).start();
+      });
+    },
+    [fade, go, scale, tx, ty]
+  );
+  const settle = React.useCallback(() => {
+    const { theme: th, level: lv, maxZoom: max } = live.current;
+    const g = gesture.current;
+    const target = g.s < 1 ? 1 : g.s > max ? max : g.s;
+    g.zoom = target;
+    g.s = target;
+    if (target === 1) {
+      g.panX = 0;
+      g.panY = 0;
+    }
+    const spring = (v, to) => lv === "full" ? Animated.spring(v, { toValue: to, ...springConfig(th, "ds"), useNativeDriver: true }) : Animated.timing(v, { toValue: to, ...motionTiming(lv), useNativeDriver: true });
+    Animated.parallel([spring(scale, target), spring(tx, g.panX), spring(ty, g.panY)]).start();
+  }, [scale, tx, ty]);
+  const pan = React.useRef(
+    // Swipe and pinch share one responder on a full-screen modal with no
+    // competing gesture, and the native contract rules out a gesture library —
+    // the same reason `Sheet` and `Toast` use `PanResponder`.
+    // eslint-disable-next-line loam/no-pan-responder
+    PanResponder.create({
+      onStartShouldSetPanResponder: (e) => pinchDistance(e) > 0,
+      onMoveShouldSetPanResponder: (e, g) => pinchDistance(e) > 0 || gesture.current.zoom > 1 || Math.abs(g.dx) > 8 && Math.abs(g.dx) > Math.abs(g.dy),
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderGrant: () => {
+        running.current?.stop();
+        running.current = null;
+        const g = gesture.current;
+        g.pinch0 = 0;
+        g.zoomAtStart = g.zoom;
+        g.s = g.zoom;
+      },
+      onPanResponderMove: (e, d) => {
+        const g = gesture.current;
+        const dist = pinchDistance(e);
+        if (dist > 0) {
+          if (!g.pinch0) {
+            g.pinch0 = dist;
+            g.zoomAtStart = g.s;
+          }
+          const raw = g.zoomAtStart * (dist / g.pinch0);
+          const max = live.current.maxZoom;
+          g.s = raw < 1 ? 1 - rubberband(1 - raw, 0.5) : raw > max ? max + rubberband(raw - max, max) : raw;
+          scale.setValue(g.s);
+          return;
+        }
+        if (g.pinch0) return;
+        if (g.zoom > 1) {
+          tx.setValue(g.panX + d.dx);
+          ty.setValue(g.panY + d.dy);
+          return;
+        }
+        tx.setValue(d.dx);
+      },
+      onPanResponderRelease: (_e, d) => {
+        const g = gesture.current;
+        if (g.pinch0) {
+          g.pinch0 = 0;
+          settle();
+          return;
+        }
+        if (g.zoom > 1) {
+          const w2 = width.current || 320;
+          const reach = w2 * (g.zoom - 1) / 2;
+          g.panX = Math.max(-reach, Math.min(reach, g.panX + d.dx));
+          g.panY = Math.max(-reach, Math.min(reach, g.panY + d.dy));
+          settle();
+          return;
+        }
+        const w = width.current || 320;
+        const aim = d.dx + project(d.vx * 1e3);
+        if (live.current.count > 1 && (Math.abs(d.dx) > w * 0.25 || Math.abs(aim) > w * 0.5)) {
+          leaveThen(aim < 0 ? 1 : -1, d.vx);
+          return;
+        }
+        Animated.spring(tx, {
+          toValue: 0,
+          ...springConfig(live.current.theme, "fs", { velocity: d.vx }),
+          useNativeDriver: true
+        }).start();
+      },
+      onPanResponderTerminate: () => {
+        gesture.current.pinch0 = 0;
+        settle();
+      }
+    })
+  ).current;
+  React.useEffect(() => {
+    return () => running.current?.stop();
+  }, []);
+  if (!item) return null;
+  const onLayout = (e) => {
+    width.current = e.nativeEvent.layout.width;
+  };
+  return /* @__PURE__ */ jsx(Modal, { visible: true, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ jsxs(View, { style: styles.lightbox, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.lightboxBar, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.counter, children: labels.counter(index + 1, count) }),
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: labels.close,
+          onPress: onClose,
+          style: styles.lightboxAction,
+          children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.md, color: theme.media.ink })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.lightboxStage, children: [
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: labels.previous,
+          onPress: () => leaveThen(-1),
+          style: styles.lightboxNav,
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: theme.icon.lg, color: theme.media.ink })
+        }
+      ),
+      /* @__PURE__ */ jsx(View, { style: styles.lightboxTrack, onLayout, ...pan.panHandlers, children: /* @__PURE__ */ jsx(
+        Animated.View,
+        {
+          testID: "gallery-lightbox-image",
+          accessibilityRole: "image",
+          accessibilityLabel: item.alt || labels.item(index + 1),
+          style: [
+            styles.lightboxImage,
+            {
+              aspectRatio: item.aspectRatio ?? 0.8,
+              opacity: fade,
+              transform: [{ translateX: tx }, { translateY: ty }, { scale }]
+            }
+          ],
+          children: item.render ? item.render() : /* @__PURE__ */ jsx(Text, { style: styles.lightboxImageLabel, children: labels.placeholder(index + 1, String(item.aspectRatio ?? 0.8)) })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: labels.next,
+          onPress: () => leaveThen(1),
+          style: styles.lightboxNav,
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: theme.icon.lg, color: theme.media.ink })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(View, { style: styles.dots, accessibilityElementsHidden: true, importantForAccessibility: "no", children: items.map((it, i) => /* @__PURE__ */ jsx(Dot, { active: i === index }, it.id)) })
+  ] }) });
+}
+var sheet = createStyleSheet((theme) => ({
+  galleryRoot: { flex: 1 },
+  grid: { flexDirection: "row", flexWrap: "wrap", padding: theme.space[2] },
+  tile: { padding: theme.space[2] },
+  tileInner: {
+    aspectRatio: 1,
+    backgroundColor: theme.color.surface3,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  tileIndex: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    color: theme.color.text3
+  },
+  durationBadge: {
+    position: "absolute",
+    right: theme.space[4],
+    bottom: theme.space[4],
+    borderRadius: theme.radius.sm,
+    paddingHorizontal: theme.space[4],
+    paddingVertical: theme.space[1],
+    backgroundColor: theme.black.a12
+  },
+  durationText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[10],
+    color: theme.media.ink
+  },
+  // Not `color.scrim`: a lightbox backdrop sits on imagery rather than on a
+  // token surface, and it is deliberately far heavier than a modal's scrim. The
+  // alpha ramp's top stop is cut at 0.92 for exactly this surface, so the value
+  // is a token now rather than the raw literal the doc leaves it as.
+  lightbox: { flex: 1, backgroundColor: theme.black.a14 },
+  lightboxBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space[14]
+  },
+  counter: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    color: theme.media.ink,
+    opacity: theme.opacity[88]
+  },
+  lightboxAction: {
+    width: theme.tapMin,
+    height: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  lightboxStage: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: theme.space[12]
+  },
+  lightboxNav: {
+    width: theme.tapMin,
+    height: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  lightboxTrack: { flex: 1, alignSelf: "stretch", justifyContent: "center" },
+  lightboxImage: {
+    width: "100%",
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface3,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  lightboxImageLabel: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    // Uppercase wants the caps tracking step, which is a ratio — multiply it by
+    // the size rather than restating the product as a bare 1.2.
+    letterSpacing: theme.type.caption2.fontSize * theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.text3
+  },
+  dots: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: DOT.idleWidth,
+    paddingVertical: theme.space.s4
+  },
+  // Width and background are animated per-dot; see {@link Dot}.
+  dot: { height: DOT.idleWidth, borderRadius: theme.radius.full }
+}));
+
+export { Gallery, GalleryLightbox };