@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-2YKVID2V.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { useLoamTheme } from '@btndprojects/loam-theme-native';
+
+// src/lib/focus-ring.ts
+var NO_UA_FOCUS_RING = { outlineStyle: "none" };
+function useFocusRing(radius, inset = false) {
+  const theme = useLoamTheme();
+  const [focused, setFocused] = React.useState(false);
+  const onFocus = React.useCallback((e) => {
+    const el = e.target;
+    let visible = true;
+    if (el && typeof el.matches === "function") {
+      try {
+        visible = el.matches(":focus-visible");
+      } catch {
+        visible = true;
+      }
+    }
+    setFocused(visible);
+  }, []);
+  const onBlur = React.useCallback(() => setFocused(false), []);
+  const style = React.useMemo(
+    () => focused ? {
+      outlineStyle: "solid",
+      outlineWidth: theme.focus.width,
+      outlineColor: theme.focus.ringColor,
+      outlineOffset: inset ? -theme.focus.width : theme.focus.offset,
+      ...radius === void 0 ? null : { borderRadius: radius }
+    } : void 0,
+    [focused, theme.focus.width, theme.focus.ringColor, theme.focus.offset, radius, inset]
+  );
+  return { handlers: { onFocus, onBlur }, style, focused };
+}
+
+export { NO_UA_FOCUS_RING, useFocusRing };

package/dist/{chunk-JUAMLEHX.js → chunk-36DA3IPO.js}

@@ -1,13 +1,58 @@
+import { DismissButton } from './chunk-Z7I4ZSO6.js';
+import { useLabels } from './chunk-APCWFOZW.js';
 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';
+import { Animated, Easing, View, Pressable, I18nManager } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, 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 });
+var MOTION_RANK = { full: 0, reduced: 1, none: 2 };
+var OverlayMotionContext = React.createContext("full");
+function stricterMotion(a, b) {
+  return MOTION_RANK[a] >= MOTION_RANK[b] ? a : b;
+}
+function TourOverlay({
+  children,
+  dismissible = false,
+  onDismiss,
+  labels: labelsProp,
+  motion = "full"
+}) {
+  const labels = useLabels("beacon", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("spotlight");
+  const outer = React.useContext(OverlayMotionContext);
+  const effective = stricterMotion(outer, motion);
+  const fade = React.useRef(new Animated.Value(effective === "full" && !theme.reduceMotion ? 0 : 1)).current;
+  const showClose = dismissible || !!onDismiss;
+  React.useEffect(() => {
+    if (!showClose || effective !== "full" || theme.reduceMotion) {
+      fade.setValue(1);
+      return;
+    }
+    Animated.timing(fade, {
+      toValue: 1,
+      duration: theme.motion.enter.duration,
+      easing: Easing.bezier(...theme.motion.enter.easing),
+      useNativeDriver: true
+    }).start();
+  }, [showClose, effective, fade, theme.reduceMotion, theme.motion.enter]);
+  if (!showClose) {
+    return /* @__PURE__ */ jsx(OverlayMotionContext.Provider, { value: effective, children });
+  }
+  return /* @__PURE__ */ jsxs(OverlayMotionContext.Provider, { value: effective, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        pointerEvents: "box-none",
+        testID: "tour-overlay-close",
+        style: [styles.overlayClose, { opacity: fade }],
+        children: /* @__PURE__ */ jsx(View, { style: styles.overlayCloseChip, children: /* @__PURE__ */ jsx(DismissButton, { label: labels.dismiss, onPress: () => onDismiss?.(), color: theme.color.text }) })
+      }
+    )
+  ] });
 }
 function TourHost({ children, style, insets }) {
   const hostRef = React.useRef(null);
@@ -175,13 +220,17 @@ function scrimRects(rect, pad) {
 }
 function Spotlight({
   target,
-  padding = 6,
+  halo: padding = 6,
   radius,
-  motion = "full"
+  motion: motionProp,
+  dismissible = false,
+  onDismiss
 }) {
-  const theme = useLoamTheme();
+  const motion = stricterMotion(React.useContext(OverlayMotionContext), motionProp ?? "full");
+  const theme = useLoamTheme("spotlight");
   const { styles } = useStyles(sheet);
   const rect = useAnchorRect(target);
+  const labels = useLabels("beacon", DEFAULT_LABELS);
   const fade = React.useRef(new Animated.Value(0)).current;
   const animate = motion === "full" && !theme.reduceMotion;
   React.useEffect(() => {
@@ -195,38 +244,58 @@ function Spotlight({
   }, [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,
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      pointerEvents: dismissible ? "box-none" : "none",
+      style: [styles.layer, { opacity: fade }],
+      children: [
+        scrimRects(rect, padding).map(
+          (style, i) => dismissible ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              testID: "spotlight-scrim",
+              accessibilityRole: "button",
+              accessibilityLabel: labels.dismiss,
+              onPress: onDismiss,
+              style: [styles.scrim, style]
+            },
+            i
+          ) : /* @__PURE__ */ jsx(View, { style: [styles.scrim, style] }, i)
+        ),
+        /* @__PURE__ */ jsx(
+          View,
           {
-            left: rect.x - padding,
-            top: rect.y - padding,
-            width: rect.width + padding * 2,
-            height: rect.height + padding * 2,
-            borderRadius: r
+            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,
+  halo: padding = 6,
   radius,
   pulse = false,
-  motion = "full"
+  motion: motionProp
 }) {
-  const theme = useLoamTheme();
+  const motion = stricterMotion(React.useContext(OverlayMotionContext), motionProp ?? "full");
+  const theme = useLoamTheme("spotlight");
   const { styles } = useStyles(sheet);
   const rect = useAnchorRect(target);
   const breathe = React.useRef(new Animated.Value(1)).current;
   React.useEffect(() => {
-    if (!pulse || motion === "none") return;
+    if (!pulse || motion === "none" || theme.reduceMotion) return;
     const loop = Animated.loop(
       Animated.sequence([
         Animated.timing(breathe, {
@@ -245,7 +314,7 @@ function HighlightRing({
     );
     loop.start();
     return () => loop.stop();
-  }, [pulse, motion, breathe, theme.loop.pulse]);
+  }, [pulse, motion, breathe, theme.loop.pulse, theme.reduceMotion]);
   if (!rect) return null;
   return /* @__PURE__ */ jsx(
     Animated.View,
@@ -265,28 +334,42 @@ function HighlightRing({
     }
   );
 }
-function Highlight({ kind = "spotlight", pulse, ...rest }) {
+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 DEFAULT_LABELS = {
+  whatsNew: "What\u2019s new here",
+  dismiss: "Dismiss"
+};
 var DOT = 12;
 var OVERHANG = 5;
 function Beacon({
   target,
   corner = "trailing-top",
-  accessibilityLabel = "What\u2019s new here",
+  accessibilityLabel: accessibilityLabelProp,
   pulsing = true,
   onPress,
-  motion = "full"
+  motion: motionProp,
+  dismissible = false,
+  onDismiss,
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const motion = stricterMotion(React.useContext(OverlayMotionContext), motionProp ?? "full");
+  const theme = useLoamTheme("spotlight");
+  const labels = useLabels("beacon", DEFAULT_LABELS, labelsProp);
+  const accessibilityLabel = accessibilityLabelProp ?? labels.whatsNew;
   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;
+    if (!pulsing || motion === "none" || theme.reduceMotion) return;
     const loop = Animated.loop(
       Animated.timing(ring, {
         toValue: 1,
@@ -298,7 +381,7 @@ function Beacon({
     ring.setValue(0);
     loop.start();
     return () => loop.stop();
-  }, [pulsing, motion, ring, theme.loop.beacon]);
+  }, [pulsing, motion, ring, theme.loop.beacon, theme.reduceMotion]);
   if (anchored && !rect) return null;
   let placement;
   if (rect) {
@@ -317,6 +400,13 @@ function Beacon({
       accessibilityRole: "button",
       accessibilityLabel,
       onPress,
+      ...dismissible ? {
+        onLongPress: onDismiss,
+        accessibilityActions: [{ name: "dismiss", label: labels.dismiss }],
+        onAccessibilityAction: (e) => {
+          if (e.nativeEvent.actionName === "dismiss") onDismiss?.();
+        }
+      } : null,
       hitSlop: { top: slop, bottom: slop, left: slop, right: slop },
       style: [styles.beaconBox, anchored ? { position: "absolute", ...placement } : null],
       children: [
@@ -328,7 +418,9 @@ function Beacon({
               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] }) }]
+                transform: [
+                  { scale: ring.interpolate({ inputRange: [0, 1], outputRange: [1, 2.8] }) }
+                ]
               }
             ]
           }
@@ -343,6 +435,14 @@ var sheet = createStyleSheet((theme) => ({
   // 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 },
+  overlayClose: { position: "absolute", top: theme.space.s3, end: theme.space.s3 },
+  overlayCloseChip: {
+    padding: theme.space[2],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
   // 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;