@btndprojects/loam-ui-native 0.2.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-H7DWSL4O.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';
 
 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 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,32 +244,52 @@ 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 motion = stricterMotion(React.useContext(OverlayMotionContext), motionProp ?? "full");
   const theme = useLoamTheme("spotlight");
   const { styles } = useStyles(sheet);
   const rect = useAnchorRect(target);
@@ -275,7 +344,8 @@ function Highlight({
   return /* @__PURE__ */ jsx(HighlightRing, { ...rest, pulse: kind === "pulse" || pulse });
 }
 var DEFAULT_LABELS = {
-  whatsNew: "What\u2019s new here"
+  whatsNew: "What\u2019s new here",
+  dismiss: "Dismiss"
 };
 var DOT = 12;
 var OVERHANG = 5;
@@ -285,9 +355,12 @@ function Beacon({
   accessibilityLabel: accessibilityLabelProp,
   pulsing = true,
   onPress,
-  motion = "full",
+  motion: motionProp,
+  dismissible = false,
+  onDismiss,
   labels: labelsProp
 }) {
+  const motion = stricterMotion(React.useContext(OverlayMotionContext), motionProp ?? "full");
   const theme = useLoamTheme("spotlight");
   const labels = useLabels("beacon", DEFAULT_LABELS, labelsProp);
   const accessibilityLabel = accessibilityLabelProp ?? labels.whatsNew;
@@ -327,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: [
@@ -355,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;