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

package/dist/chunk-JUAMLEHX.js

@@ -0,0 +1,379 @@
+import * as React from 'react';
+import { View, Animated, Easing, Pressable, I18nManager } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+// src/spotlight/spotlight.tsx
+var NO_INSETS = { top: 0, bottom: 0, left: 0, right: 0 };
+var HostContext = React.createContext(null);
+function TourOverlay({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function TourHost({ children, style, insets }) {
+  const hostRef = React.useRef(null);
+  const size = React.useRef({ width: 0, height: 0 });
+  const insetsRef = React.useRef(NO_INSETS);
+  insetsRef.current = insets ? { ...NO_INSETS, ...insets } : NO_INSETS;
+  const value = React.useRef(null);
+  if (value.current === null) {
+    const anchors = /* @__PURE__ */ new Map();
+    const listeners = /* @__PURE__ */ new Set();
+    const pressListeners = /* @__PURE__ */ new Set();
+    const invalidate = () => {
+      listeners.forEach((fn) => fn());
+    };
+    value.current = {
+      hostRef,
+      size,
+      insets: insetsRef,
+      invalidate,
+      register: (name, ref) => {
+        anchors.set(name, ref);
+        invalidate();
+        return () => {
+          if (anchors.get(name) === ref) anchors.delete(name);
+          invalidate();
+        };
+      },
+      get: (name) => anchors.get(name) ?? null,
+      subscribe: (listener) => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+      },
+      notifyPress: (name) => {
+        [...pressListeners].forEach((fn) => fn(name));
+      },
+      subscribePress: (listener) => {
+        pressListeners.add(listener);
+        return () => pressListeners.delete(listener);
+      }
+    };
+  }
+  const onLayout = (e) => {
+    size.current = { width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height };
+    value.current?.invalidate();
+  };
+  const kids = React.Children.toArray(children);
+  const overlays = kids.filter((k) => React.isValidElement(k) && k.type === TourOverlay);
+  const content = kids.filter((k) => !(React.isValidElement(k) && k.type === TourOverlay));
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      ref: hostRef,
+      style: [hostFill, style],
+      onLayout,
+      collapsable: false,
+      children: /* @__PURE__ */ jsxs(HostContext.Provider, { value: value.current, children: [
+        content,
+        overlays
+      ] })
+    }
+  );
+}
+var hostFill = { flexGrow: 1 };
+function useTourHost() {
+  return React.useContext(HostContext);
+}
+function useTourInsets() {
+  const host = React.useContext(HostContext);
+  return host ? host.insets.current : NO_INSETS;
+}
+function TourAnchor({ name, children, style }) {
+  const host = useTourHost();
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!host) return;
+    return host.register(name, ref);
+  }, [host, name]);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      ref,
+      style,
+      collapsable: false,
+      onLayout: host ? () => host.invalidate() : void 0,
+      onPointerUp: host ? () => host.notifyPress(name) : void 0,
+      children
+    }
+  );
+}
+function sameRect(a, b) {
+  return a != null && a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height && a.containerWidth === b.containerWidth && a.containerHeight === b.containerHeight && a.direction === b.direction;
+}
+function useAnchorRect(name, options = {}) {
+  const { pollMs = 100, timeoutMs = 2600, onMissing } = options;
+  const host = useTourHost();
+  const [rect, setRect] = React.useState(null);
+  const missingRef = React.useRef(onMissing);
+  missingRef.current = onMissing;
+  React.useEffect(() => {
+    if (!host || !name) {
+      setRect(null);
+      return;
+    }
+    let alive = true;
+    let timer;
+    const started = Date.now();
+    const retry = () => {
+      if (!alive) return;
+      if (Date.now() - started >= timeoutMs) {
+        missingRef.current?.(name);
+        return;
+      }
+      timer = setTimeout(measure, pollMs);
+    };
+    const measure = () => {
+      if (!alive) return;
+      const target = host.get(name)?.current;
+      const hostNode = host.hostRef.current;
+      if (!target || !hostNode) {
+        retry();
+        return;
+      }
+      hostNode.measureInWindow((hx, hy, hw, hh) => {
+        if (!alive) return;
+        target.measureInWindow((x, y, w, h) => {
+          if (!alive) return;
+          if (w === 0 && h === 0) {
+            retry();
+            return;
+          }
+          const next = {
+            x: x - hx,
+            y: y - hy,
+            width: w,
+            height: h,
+            containerWidth: hw || host.size.current.width,
+            containerHeight: hh || host.size.current.height,
+            direction: I18nManager.isRTL ? "rtl" : "ltr"
+          };
+          setRect((prev) => sameRect(prev, next) ? prev : next);
+        });
+      });
+    };
+    measure();
+    const off = host.subscribe(measure);
+    return () => {
+      alive = false;
+      off();
+      if (timer) clearTimeout(timer);
+    };
+  }, [host, name, pollMs, timeoutMs]);
+  return rect;
+}
+function scrimRects(rect, pad) {
+  const left = rect.x - pad;
+  const top = rect.y - pad;
+  const width = rect.width + pad * 2;
+  const height = rect.height + pad * 2;
+  return [
+    { left: 0, top: 0, right: 0, height: Math.max(0, top) },
+    { left: 0, top: top + height, right: 0, bottom: 0 },
+    { left: 0, top: Math.max(0, top), width: Math.max(0, left), height },
+    { left: left + width, top: Math.max(0, top), right: 0, height }
+  ];
+}
+function Spotlight({
+  target,
+  padding = 6,
+  radius,
+  motion = "full"
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const rect = useAnchorRect(target);
+  const fade = React.useRef(new Animated.Value(0)).current;
+  const animate = motion === "full" && !theme.reduceMotion;
+  React.useEffect(() => {
+    if (!rect) return;
+    Animated.timing(fade, {
+      toValue: 1,
+      duration: animate ? theme.motion.enter.duration : 0,
+      easing: Easing.bezier(...theme.motion.enter.easing),
+      useNativeDriver: true
+    }).start();
+  }, [rect, fade, animate, theme.motion.enter]);
+  if (!rect) return null;
+  const r = radius ?? theme.radius.md;
+  return /* @__PURE__ */ jsxs(Animated.View, { pointerEvents: "none", style: [styles.layer, { opacity: fade }], children: [
+    scrimRects(rect, padding).map((style, i) => /* @__PURE__ */ jsx(View, { style: [styles.scrim, style] }, i)),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          styles.ring,
+          {
+            left: rect.x - padding,
+            top: rect.y - padding,
+            width: rect.width + padding * 2,
+            height: rect.height + padding * 2,
+            borderRadius: r
+          }
+        ]
+      }
+    )
+  ] });
+}
+function HighlightRing({
+  target,
+  padding = 5,
+  radius,
+  pulse = false,
+  motion = "full"
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const rect = useAnchorRect(target);
+  const breathe = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
+    if (!pulse || motion === "none") return;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(breathe, {
+          toValue: 0.35,
+          duration: theme.loop.pulse / 2,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true
+        }),
+        Animated.timing(breathe, {
+          toValue: 1,
+          duration: theme.loop.pulse / 2,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true
+        })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [pulse, motion, breathe, theme.loop.pulse]);
+  if (!rect) return null;
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      pointerEvents: "none",
+      style: [
+        styles.outline,
+        {
+          left: rect.x - padding,
+          top: rect.y - padding,
+          width: rect.width + padding * 2,
+          height: rect.height + padding * 2,
+          borderRadius: radius ?? theme.radius.md,
+          opacity: pulse ? breathe : 1
+        }
+      ]
+    }
+  );
+}
+function Highlight({ kind = "spotlight", pulse, ...rest }) {
+  if (kind === "none") return null;
+  if (kind === "spotlight") return /* @__PURE__ */ jsx(Spotlight, { ...rest });
+  return /* @__PURE__ */ jsx(HighlightRing, { ...rest, pulse: kind === "pulse" || pulse });
+}
+var DOT = 12;
+var OVERHANG = 5;
+function Beacon({
+  target,
+  corner = "trailing-top",
+  accessibilityLabel = "What\u2019s new here",
+  pulsing = true,
+  onPress,
+  motion = "full"
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const rect = useAnchorRect(target ?? null);
+  const ring = React.useRef(new Animated.Value(0)).current;
+  const anchored = target != null;
+  React.useEffect(() => {
+    if (!pulsing || motion === "none") return;
+    const loop = Animated.loop(
+      Animated.timing(ring, {
+        toValue: 1,
+        duration: theme.loop.beacon,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: true
+      })
+    );
+    ring.setValue(0);
+    loop.start();
+    return () => loop.stop();
+  }, [pulsing, motion, ring, theme.loop.beacon]);
+  if (anchored && !rect) return null;
+  let placement;
+  if (rect) {
+    const rtl = rect.direction === "rtl";
+    const trailingX = rtl ? rect.x - OVERHANG - DOT : rect.x + rect.width - OVERHANG - DOT / 2;
+    const leadingX = rtl ? rect.x + rect.width - OVERHANG - DOT / 2 : rect.x - OVERHANG - DOT / 2;
+    placement = corner === "center" ? { left: rect.x + rect.width / 2 - DOT / 2, top: rect.y + rect.height / 2 - DOT / 2 } : {
+      left: corner.startsWith("trailing") ? trailingX : leadingX,
+      top: corner.endsWith("top") ? rect.y - OVERHANG : rect.y + rect.height - OVERHANG - DOT / 2
+    };
+  }
+  const slop = Math.max(0, (theme.tapMin - DOT) / 2);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel,
+      onPress,
+      hitSlop: { top: slop, bottom: slop, left: slop, right: slop },
+      style: [styles.beaconBox, anchored ? { position: "absolute", ...placement } : null],
+      children: [
+        pulsing ? /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            pointerEvents: "none",
+            style: [
+              styles.beaconRing,
+              {
+                opacity: ring.interpolate({ inputRange: [0, 0.7, 1], outputRange: [0.55, 0, 0] }),
+                transform: [{ scale: ring.interpolate({ inputRange: [0, 1], outputRange: [1, 2.8] }) }]
+              }
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(View, { style: styles.beaconDot })
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  // `box-none` on the layer, `none` on each panel: the overlay must not swallow
+  // a touch meant for the app underneath it.
+  layer: { position: "absolute", left: 0, top: 0, right: 0, bottom: 0 },
+  scrim: { position: "absolute", backgroundColor: theme.color.scrim },
+  // The ring is the *only* thing marking the target, which makes it a graphical
+  // object under SC 1.4.11 and holds it to 3:1 against both the scrim inside and
+  // the page outside. `focus.ringColor` is the accent lifted to clear that;
+  // the raw accent misses it in four of the shipped palettes.
+  ring: {
+    position: "absolute",
+    borderWidth: theme.borderWidth.heavy,
+    borderColor: theme.focus.ringColor
+  },
+  outline: {
+    position: "absolute",
+    borderWidth: theme.borderWidth.heavy,
+    borderColor: theme.focus.ringColor,
+    backgroundColor: theme.state.selected
+  },
+  beaconBox: { width: DOT, height: DOT, alignItems: "center", justifyContent: "center" },
+  beaconDot: {
+    width: DOT,
+    height: DOT,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent,
+    borderWidth: theme.borderWidth.heavy,
+    borderColor: theme.color.surface
+  },
+  beaconRing: {
+    position: "absolute",
+    width: DOT,
+    height: DOT,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent
+  }
+}));
+
+export { Beacon, Highlight, HighlightRing, Spotlight, TourAnchor, TourHost, TourOverlay, useAnchorRect, useTourHost, useTourInsets };

package/dist/chunk-JXJB2X6M.js

@@ -0,0 +1,131 @@
+import { useColorTransition } from './chunk-ITTYJZWX.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Easing, Animated, Pressable, Platform } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx } from 'react/jsx-runtime';
+
+var BOX = { sm: 16, md: 24 };
+var GLYPH = { sm: 12, md: 14 };
+var CHECK_STROKE = 3.5;
+function nextChecked(current) {
+  return current === true ? false : true;
+}
+function useResolvedPlatform(explicit) {
+  const theme = useLoamTheme();
+  if (explicit) return explicit;
+  if (Platform.OS === "ios") return "ios";
+  if (Platform.OS === "android") return "android";
+  return theme.platform === "iOS" ? "ios" : "android";
+}
+function Checkbox({
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  size = "md",
+  platform,
+  disabled = false,
+  motion = "full",
+  accessibilityLabel
+}) {
+  const isControlled = checked !== void 0;
+  const [internal, setInternal] = React.useState(defaultChecked);
+  const value = isControlled ? checked : internal;
+  const isChecked = value === true;
+  const isIndeterminate = value === "indeterminate";
+  const isOn = isChecked || isIndeterminate;
+  const theme = useLoamTheme();
+  const os = useResolvedPlatform(platform);
+  const { styles } = useStyles(sheet, { shape: `${os}-${size}`, disabled });
+  const resolvedMotion = useResolvedMotion(motion);
+  const animateColour = resolvedMotion !== "none";
+  const animatePress = resolvedMotion === "full";
+  const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
+  const backgroundColor = useColorTransition(
+    isOn ? theme.color.accent : "transparent",
+    theme.duration.base,
+    easing,
+    animateColour
+  );
+  const borderColor = useColorTransition(
+    isOn ? theme.color.accent : theme.color.borderStrong,
+    theme.duration.base,
+    easing,
+    animateColour
+  );
+  const scale = React.useRef(new Animated.Value(1)).current;
+  const spring = (to) => Animated.spring(scale, {
+    toValue: to,
+    useNativeDriver: true,
+    ...theme.spring.press
+  }).start();
+  const handlePress = () => {
+    const next = nextChecked(value);
+    if (!isControlled) setInternal(next);
+    haptics.impact("light");
+    onCheckedChange?.(next);
+  };
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "checkbox",
+      accessibilityLabel,
+      accessibilityState: { checked: isIndeterminate ? "mixed" : isChecked, disabled },
+      "aria-checked": isIndeterminate ? "mixed" : isChecked,
+      disabled,
+      onPress: disabled ? void 0 : handlePress,
+      onPressIn: disabled || !animatePress ? void 0 : () => spring(0.9),
+      onPressOut: disabled || !animatePress ? void 0 : () => spring(1),
+      children: /* @__PURE__ */ jsx(
+        Animated.View,
+        {
+          testID: "checkbox-box",
+          style: [styles.box, { backgroundColor, borderColor, transform: [{ scale }] }],
+          children: isOn ? /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: isIndeterminate ? "minus" : "check",
+              size: GLYPH[size],
+              color: theme.color.accentInk,
+              strokeWidth: CHECK_STROKE
+            }
+          ) : null
+        }
+      )
+    }
+  );
+}
+function boxStyle(os, size, radius) {
+  return {
+    width: BOX[size],
+    height: BOX[size],
+    borderRadius: os === "ios" ? radius.full : radius.sm
+  };
+}
+var sheet = createStyleSheet((theme) => ({
+  // `backgroundColor` / `borderColor` are supplied at the use site as animated
+  // values so the box can travel between states over `duration.base`.
+  box: {
+    alignItems: "center",
+    justifyContent: "center",
+    // The reference draws a `2px` edge — the static `w3` weight, not the
+    // contrast-reactive hairline, because the ring is part of the drawing.
+    borderWidth: theme.borderWidth.heavy,
+    variants: {
+      shape: {
+        "ios-sm": boxStyle("ios", "sm", theme.radius),
+        "ios-md": boxStyle("ios", "md", theme.radius),
+        "android-sm": boxStyle("android", "sm", theme.radius),
+        "android-md": boxStyle("android", "md", theme.radius)
+      },
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  }
+}));
+
+export { Checkbox };