@btndprojects/loam-ui-native 0.1.1 → 0.2.1

package/dist/chunk-XQXMLMH3.js

@@ -0,0 +1,211 @@
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Pressable, View, Text, Animated } from 'react-native';
+import { Svg, Path } from 'react-native-svg';
+import { icons, ICON_VIEWBOX } from '@btndprojects/loam-icons';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  rating: "Rating",
+  readOnlyLabel: (name, value, max) => `${name}: ${value} out of ${max} stars`,
+  rate: (value, max) => `Rate ${value} of ${max}`,
+  readout: (value, max) => `${value} of ${max}`,
+  readoutWithCount: (value, max, count) => `${value} of ${max} \xB7 ${count} reviews`
+};
+var ICON_SIZE = { sm: 20, md: 26, lg: 34 };
+var STAR_PATH = icons.star.flatMap((part) => part.t === "path" ? [part.d] : []).join(" ");
+function toHalfStep(value) {
+  return Math.round(value * 2) / 2;
+}
+function Star({
+  fraction,
+  size,
+  delay = 0,
+  kick = 0,
+  animate = false
+}) {
+  const theme = useLoamTheme("rating");
+  const { styles } = useStyles(starSheet);
+  const filled = Math.max(0, Math.min(1, fraction));
+  const grow = React.useRef(new Animated.Value(1)).current;
+  const pulse = React.useRef(new Animated.Value(1)).current;
+  const wasFilled = React.useRef(filled > 0);
+  React.useEffect(() => {
+    const was = wasFilled.current;
+    wasFilled.current = filled > 0;
+    if (!animate || was || filled === 0) return;
+    grow.setValue(0.5);
+    const a = Animated.sequence([
+      Animated.delay(delay),
+      Animated.spring(grow, { ...springConfig(theme, "fs"), toValue: 1, useNativeDriver: true })
+    ]);
+    a.start();
+    return () => a.stop();
+  }, [filled > 0]);
+  React.useEffect(() => {
+    if (!animate || !kick) return;
+    pulse.setValue(1.2);
+    Animated.spring(pulse, {
+      ...springConfig(theme, "fs"),
+      toValue: 1,
+      useNativeDriver: true
+    }).start();
+  }, [kick]);
+  return /* @__PURE__ */ jsxs(View, { style: { width: size, height: size }, children: [
+    /* @__PURE__ */ jsx(Icon, { name: "star", size, color: theme.color.text3 }),
+    filled > 0 ? /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        testID: "rating-star-fill",
+        style: [
+          styles.clip,
+          {
+            width: size * filled,
+            opacity: grow,
+            transform: [{ scale: Animated.multiply(grow, pulse) }]
+          }
+        ],
+        children: /* @__PURE__ */ jsx(View, { style: styles.paint, children: /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: ICON_VIEWBOX, children: /* @__PURE__ */ jsx(
+          Path,
+          {
+            d: STAR_PATH,
+            fill: theme.color.warn,
+            stroke: theme.color.warn,
+            strokeWidth: theme.borderWidth.thick,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }) })
+      }
+    ) : null
+  ] });
+}
+function Rating({
+  value,
+  defaultValue = 0,
+  onValueChange,
+  max = 5,
+  size = "md",
+  readOnly = false,
+  accessibilityLabel: accessibilityLabelProp,
+  showValue = false,
+  count,
+  motion = "full",
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet, { size });
+  const labels = useLabels("rating", DEFAULT_LABELS, labelsProp);
+  const accessibilityLabel = accessibilityLabelProp ?? labels.rating;
+  const theme = useLoamTheme("rating");
+  const iconSize = ICON_SIZE[size];
+  const starSlopY = Math.max(0, (theme.tapMin - (iconSize + theme.space.s1 * 2)) / 2);
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React.useState(defaultValue);
+  const current = isControlled ? value : internal;
+  const animate = useResolvedMotion(motion, "rating") === "full" && !readOnly;
+  const [chosen, setChosen] = React.useState({ index: -1, n: 0 });
+  const before = React.useRef(0);
+  const setValue = (next) => {
+    before.current = Math.ceil(current);
+    setChosen((c) => ({ index: next - 1, n: c.n + 1 }));
+    if (!isControlled) setInternal(next);
+    onValueChange?.(next);
+  };
+  const clamped = Math.max(0, Math.min(max, current));
+  const snapped = readOnly ? Math.round(clamped * 10) / 10 : toHalfStep(clamped);
+  const shown = Number.isInteger(snapped) ? String(snapped) : snapped.toFixed(1);
+  const label = readOnly ? labels.readOnlyLabel(accessibilityLabel, shown, max) : accessibilityLabel;
+  const readoutLabel = count !== void 0 ? labels.readoutWithCount(shown, max, count) : labels.readout(shown, max);
+  const stars = /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: max }, (_, i) => {
+    const starValue = i + 1;
+    const fraction = Math.max(0, Math.min(1, snapped - i));
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        style: styles.star,
+        accessibilityRole: "button",
+        accessibilityLabel: labels.rate(starValue, max),
+        accessibilityState: { disabled: readOnly, selected: fraction >= 0.5 },
+        disabled: readOnly,
+        hitSlop: { top: starSlopY, bottom: starSlopY },
+        onPress: readOnly ? void 0 : () => setValue(starValue),
+        children: /* @__PURE__ */ jsx(
+          Star,
+          {
+            fraction,
+            size: iconSize,
+            animate,
+            delay: Math.min(Math.max(0, i - before.current), 8) * 30,
+            kick: chosen.index === i ? chosen.n : 0
+          }
+        )
+      },
+      i
+    );
+  }) });
+  return /* @__PURE__ */ jsxs(View, { style: styles.wrapper, children: [
+    readOnly ? (
+      // A display, not a control: one image-like stop that reads the score,
+      // instead of five disabled "Rate N of 5" buttons to swipe through
+      // (WCAG 4.1.2; VoiceOver/TalkBack would announce each as dimmed).
+      /* @__PURE__ */ jsx(View, { accessible: true, accessibilityRole: "image", accessibilityLabel: label, children: /* @__PURE__ */ jsx(
+        View,
+        {
+          style: styles.row,
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          ...{ "aria-hidden": true },
+          children: stars
+        }
+      ) })
+    ) : /* @__PURE__ */ jsx(View, { style: styles.row, role: "group", accessibilityLabel: label, children: stars }),
+    showValue ? /* @__PURE__ */ jsx(Text, { testID: "rating-readout", style: styles.readout, children: readoutLabel }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  // Outer wrapper groups the star row with the optional readout.
+  wrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    variants: {
+      size: {
+        sm: { gap: theme.space.s1 },
+        md: { gap: theme.space.s1 },
+        lg: { gap: theme.space.s2 }
+      }
+    }
+  },
+  star: {
+    padding: theme.space.s1
+  },
+  // Companion readout — uses body/sm weight and text2 tone so it reads as
+  // secondary information alongside the star icons.
+  readout: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text2
+  }
+}));
+var starSheet = createStyleSheet(() => ({
+  // `start` + `overflow: 'hidden'` is the clip: the painted star inside keeps its
+  // full width and is cropped to the fraction, from the leading edge either way
+  // round, so RTL needs no sign flip.
+  clip: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    start: 0,
+    overflow: "hidden"
+  },
+  paint: { position: "absolute", top: 0, start: 0 }
+}));
+
+export { Rating };

package/dist/{chunk-HPPW424V.js → chunk-XTORZWRF.js}

@@ -1,4 +1,5 @@
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React2 from 'react';
 import { Platform, Easing, Keyboard, Animated, View, Pressable, Text, useWindowDimensions, ScrollView } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
@@ -30,7 +31,7 @@ function keyboardEasing(easing, fallback) {
   }
 }
 function useKeyboardInset() {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("keyboard");
   const enterDuration = theme.motion.enter.duration;
   const exitDuration = theme.motion.exit.duration;
   const [state, setState] = React2.useState(() => ({
@@ -62,7 +63,7 @@ function useKeyboardInset() {
   return state;
 }
 function useAnimatedKeyboardInset(extra = 0) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("keyboard");
   const state = useKeyboardInset();
   const inset = React2.useRef(new Animated.Value(0)).current;
   const fallbackCurve = state.visible ? theme.motion.enter.easing : theme.motion.exit.easing;
@@ -79,6 +80,11 @@ function useAnimatedKeyboardInset(extra = 0) {
   }, [inset, target, state.duration, state.easing, fallbackCurve]);
   return { inset, state };
 }
+var DEFAULT_LABELS = {
+  done: "Done",
+  previous: "Previous field",
+  next: "Next field"
+};
 var PREVIOUS_ICON = "arrow-up";
 var NEXT_ICON = "arrow-down";
 var ACCESSORY_NAV_MIN_FIELDS = 3;
@@ -125,14 +131,19 @@ function KeyboardAccessoryBar({
   onPrevious,
   onNext,
   onDone,
-  doneLabel = "Done",
-  previousLabel = "Previous field",
-  nextLabel = "Next field",
+  doneLabel: doneLabelProp,
+  previousLabel: previousLabelProp,
+  nextLabel: nextLabelProp,
+  labels: labelsProp,
   children,
   sticky = false,
   style,
   testID
 }) {
+  const labels = useLabels("keyboard", DEFAULT_LABELS, labelsProp);
+  const doneLabel = doneLabelProp ?? labels.done;
+  const previousLabel = previousLabelProp ?? labels.previous;
+  const nextLabel = nextLabelProp ?? labels.next;
   const { styles } = useStyles(sheet);
   const showNav = navigable && (fieldCount == null || fieldCount > ACCESSORY_NAV_MIN_FIELDS);
   const bar = /* @__PURE__ */ jsxs(View, { accessibilityRole: "toolbar", style: [styles.accessoryBar, style], testID, children: [
@@ -176,7 +187,7 @@ function AccessoryButton({
   disabled,
   onPress
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("keyboard");
   const { styles } = useStyles(sheet, { disabled });
   return /* @__PURE__ */ jsx(
     Pressable,
@@ -204,7 +215,7 @@ function KeyboardAvoidingScrollView({
   testID,
   ...rest
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("keyboard");
   const inset = useKeyboardInset();
   const { height: windowHeight } = useWindowDimensions();
   const clearance = extraBottom ?? theme.layout.screenPad;

package/dist/{chunk-P23EQNRQ.js → chunk-YAAHPATV.js}

@@ -1,20 +1,29 @@
-import { useTourHost, useTourInsets, useAnchorRect, Beacon } from './chunk-JUAMLEHX.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useTourHost, useTourInsets, useAnchorRect, Beacon } from './chunk-H7DWSL4O.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { View, Pressable, Animated, Easing, Text, LayoutAnimation } from 'react-native';
+import { View, Pressable, Animated, Easing, Text, Platform, findNodeHandle, AccessibilityInfo, 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';
 
+var DEFAULT_LABELS = {
+  dismiss: "Dismiss",
+  step: (step, title) => `Step ${step}${title ? `: ${title}` : ""}`
+};
 function CoachmarkDots({
   total,
   index,
   onSelect,
-  stepLabel = "Step",
-  titles
+  stepLabel,
+  titles,
+  labels: labelsProp
 }) {
+  const labels = useLabels("coachmark", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("coachmark");
+  const dotSlopY = Math.max(0, Math.round((theme.tapMin - theme.space[7]) / 2));
   return /* @__PURE__ */ jsx(View, { style: styles.dots, children: Array.from({ length: total }, (_, i) => {
     const done = i < index;
     const now = i === index;
@@ -23,13 +32,19 @@ function CoachmarkDots({
       Pressable,
       {
         accessibilityRole: "button",
-        accessibilityLabel: `${stepLabel} ${i + 1}${title ? `: ${title}` : ""}`,
+        accessibilityLabel: stepLabel !== void 0 ? `${stepLabel} ${i + 1}${title ? `: ${title}` : ""}` : labels.step(i + 1, title),
         accessibilityState: { selected: now, disabled: !done || !onSelect },
         disabled: !done || !onSelect,
         onPress: done && onSelect ? () => onSelect(i) : void 0,
-        hitSlop: theme.space[10],
-        style: [
+        hitSlop: {
+          top: dotSlopY,
+          bottom: dotSlopY,
+          left: theme.space[3],
+          right: theme.space[3]
+        },
+        style: ({ pressed }) => [
           styles.dot,
+          pressed ? { opacity: theme.state.pressedOpacity } : null,
           now ? { width: theme.space[20], backgroundColor: theme.color.accent } : { backgroundColor: done ? theme.color.text3 : theme.color.borderStrong }
         ]
       },
@@ -37,12 +52,15 @@ function CoachmarkDots({
     );
   }) });
 }
-function CoachmarkHint({ children, motion = "full" }) {
-  const theme = useLoamTheme();
+function CoachmarkHint({
+  children,
+  motion = "full"
+}) {
+  const theme = useLoamTheme("coachmark");
   const { styles } = useStyles(sheet);
   const blink = React.useRef(new Animated.Value(1)).current;
   React.useEffect(() => {
-    if (motion === "none") return;
+    if (motion === "none" || theme.reduceMotion) return;
     const loop = Animated.loop(
       Animated.sequence([
         Animated.timing(blink, {
@@ -61,7 +79,7 @@ function CoachmarkHint({ children, motion = "full" }) {
     );
     loop.start();
     return () => loop.stop();
-  }, [motion, blink, theme.loop.pulse]);
+  }, [motion, blink, theme.loop.pulse, theme.reduceMotion]);
   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 })
@@ -90,12 +108,14 @@ function Coachmark({
   actions,
   headerActions,
   onClose,
-  closeLabel = "Dismiss",
+  closeLabel,
   arrow = true,
   width,
-  motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("coachmark", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("coachmark");
   const { styles } = useStyles(sheet);
   const host = useTourHost();
   const insets = useTourInsets();
@@ -104,17 +124,84 @@ function Coachmark({
   const [size, setSize] = React.useState(null);
   const fade = React.useRef(new Animated.Value(0)).current;
   const animate = motion === "full" && !theme.reduceMotion;
+  const grow = React.useRef(new Animated.Value(0)).current;
+  const visible = mode !== "anchored" || size !== null;
+  const cardRef = React.useRef(null);
+  const titleRef = React.useRef(null);
+  const titleId = React.useId();
+  React.useEffect(() => {
+    if (Platform.OS !== "web" || typeof document === "undefined") return;
+    const before = document.activeElement;
+    return () => {
+      if (before?.isConnected) before.focus?.();
+    };
+  }, []);
+  React.useEffect(() => {
+    if (!visible) return;
+    if (Platform.OS === "web") {
+      cardRef.current?.focus?.({ preventScroll: true });
+      return;
+    }
+    const node = findNodeHandle(titleRef.current ?? cardRef.current);
+    if (node != null) AccessibilityInfo.setAccessibilityFocus(node);
+  }, [visible, title]);
+  React.useEffect(() => {
+    if (Platform.OS !== "web" || !onClose || typeof document === "undefined") return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  const glide = React.useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
+  const glideNow = React.useRef({ x: 0, y: 0 });
+  React.useEffect(() => {
+    const id = glide.addListener((v) => {
+      glideNow.current = v;
+    });
+    return () => glide.removeListener(id);
+  }, [glide]);
+  const spot = mode === "anchored" && rect && size ? resolveAnchoredPosition(rect, size, placement, gap) : null;
+  const lastSpot = React.useRef(null);
   React.useEffect(() => {
+    if (!spot) return;
+    const last = lastSpot.current;
+    lastSpot.current = { left: spot.left, top: spot.top };
+    if (!last || !animate || last.left === spot.left && last.top === spot.top) return;
+    glide.stopAnimation();
+    glide.setValue({
+      x: last.left + glideNow.current.x - spot.left,
+      y: last.top + glideNow.current.y - spot.top
+    });
+    Animated.spring(glide, {
+      ...springConfig(theme, "ds"),
+      toValue: { x: 0, y: 0 },
+      useNativeDriver: true
+    }).start();
+  }, [spot?.left, spot?.top, animate, glide, theme]);
+  React.useEffect(() => {
+    if (!visible) return;
     Animated.timing(fade, {
       toValue: 1,
-      duration: animate ? theme.motion.enter.duration : 0,
+      duration: animate ? theme.spring.de.duration : theme.reduceMotion ? theme.duration.fast : 0,
       easing: Easing.bezier(...theme.motion.enter.easing),
       useNativeDriver: true
     }).start();
-  }, [fade, animate, theme.motion.enter]);
+    if (animate) {
+      Animated.spring(grow, {
+        ...springConfig(theme, "fs"),
+        toValue: 1,
+        useNativeDriver: true
+      }).start();
+    } else {
+      grow.setValue(1);
+    }
+  }, [fade, grow, animate, visible, theme]);
   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);
+    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;
@@ -154,14 +241,58 @@ function Coachmark({
       bottom: theme.space[14] + insets.bottom
     };
   }
+  const facing = mode === "anchored" && placed ? placed.side : mode === "docked" ? "top" : null;
+  const START = 0.92;
+  const enterTransform = animate && size ? {
+    transform: [
+      ...facing === "bottom" || facing === "top" ? [
+        {
+          translateY: grow.interpolate({
+            inputRange: [0, 1],
+            outputRange: [
+              (facing === "bottom" ? -1 : 1) * (1 - START) * size.height / 2,
+              0
+            ]
+          })
+        }
+      ] : facing === "left" || facing === "right" ? [
+        {
+          translateX: grow.interpolate({
+            inputRange: [0, 1],
+            outputRange: [
+              (facing === "right" ? -1 : 1) * (1 - START) * size.width / 2,
+              0
+            ]
+          })
+        }
+      ] : [],
+      { scale: grow.interpolate({ inputRange: [0, 1], outputRange: [START, 1] }) },
+      { translateX: glide.x },
+      { translateY: glide.y }
+    ]
+  } : void 0;
   return /* @__PURE__ */ jsxs(
     Animated.View,
     {
-      accessibilityRole: "alert",
+      ref: cardRef,
       accessibilityViewIsModal: false,
-      accessibilityLabel: title,
+      accessibilityActions: onClose ? [{ name: "escape" }] : void 0,
+      onAccessibilityAction: (e) => {
+        if (e.nativeEvent.actionName === "escape") onClose?.();
+      },
+      ...Platform.OS === "web" ? {
+        role: "dialog",
+        "aria-modal": false,
+        "aria-labelledby": title ? titleId : void 0,
+        tabIndex: -1
+      } : null,
       onLayout,
-      style: [styles.card, position, { opacity: position?.opacity === 0 ? 0 : fade }],
+      style: [
+        styles.card,
+        position,
+        { opacity: position?.opacity === 0 ? 0 : fade },
+        enterTransform
+      ],
       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: [
@@ -172,21 +303,34 @@ function Coachmark({
             Pressable,
             {
               accessibilityRole: "button",
-              accessibilityLabel: closeLabel,
+              accessibilityLabel: closeLabel ?? labels.dismiss,
               onPress: onClose,
               hitSlop: theme.space[10],
-              style: [styles.iconButton, !kicker && !counter && !headerActions ? styles.pushEnd : null],
+              style: ({ pressed }) => [
+                styles.iconButton,
+                !kicker && !counter && !headerActions ? styles.pushEnd : null,
+                pressed ? { opacity: theme.state.pressedOpacity } : 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,
+        title ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            ref: titleRef,
+            nativeID: titleId,
+            accessibilityRole: "header",
+            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,
+          dots ? /* @__PURE__ */ jsx(CoachmarkDots, { labels: labelsProp, ...dots }) : null,
           /* @__PURE__ */ jsx(View, { style: [styles.footerActions, dots ? styles.pushEnd : styles.pushEnd], children: actions })
         ] }) : null
       ]
@@ -206,9 +350,10 @@ function Hotspot({
   defaultOpen = false,
   onOpenChange,
   onSpent,
-  motion = "full"
+  motion = "full",
+  labels
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("coachmark");
   const [uncontrolled, setUncontrolled] = React.useState(defaultOpen);
   const open = openProp ?? uncontrolled;
   const [opened, setOpened] = React.useState(defaultOpen);
@@ -243,7 +388,8 @@ function Hotspot({
         body,
         motion,
         onClose: () => setOpen(false),
-        actions: action
+        actions: action,
+        labels
       }
     ) : null
   ] });
@@ -329,7 +475,12 @@ var sheet = createStyleSheet((theme) => ({
     textTransform: "uppercase",
     color: theme.color.accentOnSoft
   },
-  footer: { flexDirection: "row", alignItems: "center", gap: theme.space[8], marginTop: theme.space[2] },
+  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 }