@robertlinde/react-tour-kit 0.8.9 → 1.0.0

package/src/shared/types/tour-end-info.type.ts

@@ -0,0 +1,32 @@
+import type {TourStep} from './tour-step.type.js';
+
+/**
+ * Why a tour ended.
+ * - `completed`: the user finished the last step.
+ * - `closed`: the close button, `endTour()`, the Android back button, or another tour was started.
+ * - `blur`: the user clicked or tapped the dimmed area (see `closeOnOverlayClick`).
+ * - `escape`: Escape on the web, the VoiceOver escape gesture on iOS.
+ * - `target-missing`: no remaining step had a target that could be found and shown.
+ * - `error`: a step's `onBeforeStep` threw or rejected; see {@link TourEndInfo.error}.
+ */
+export type TourEndReason = 'completed' | 'closed' | 'blur' | 'escape' | 'target-missing' | 'error';
+
+/** Details about how and where a tour ended. */
+export type TourEndInfo = {
+  readonly reason: TourEndReason;
+  /** Zero-based index of the step the user was on (for `target-missing`: the last step that was tried). */
+  readonly stepIndex: number;
+  readonly step: TourStep;
+  readonly totalSteps: number;
+  /** The error thrown by `onBeforeStep` when `reason` is `'error'`. */
+  readonly error?: unknown;
+};
+
+/** Called once when a tour ends. */
+export type TourEndCallback = (tourId: string | undefined, info: TourEndInfo) => void;
+
+/** Options for a single tour, passed to `startTour`. */
+export type StartTourOptions = {
+  /** Called when this tour ends, before the provider's `onTourEnd`. */
+  readonly onTourEnd?: TourEndCallback;
+};

package/src/shared/types/tour-i18n.type.ts

@@ -0,0 +1,15 @@
+/** Texts of the built-in tooltip. Every key is optional. */
+export type TourI18n = {
+  /** @defaultValue `'Next'` */
+  readonly nextLabel?: string;
+  /** @defaultValue `'Back'` */
+  readonly prevLabel?: string;
+  /** Label of the Next button on the last step. @defaultValue `'Finish'` */
+  readonly finishLabel?: string;
+  /** Step counter; `{current}` and `{total}` are replaced. @defaultValue `'{current} of {total}'` */
+  readonly stepCounterTemplate?: string;
+  /** Accessible name of the close button. @defaultValue `'Close tour'` */
+  readonly closeAriaLabel?: string;
+  /** Accessible name of each step dot; `{step}` and `{total}` are replaced. @defaultValue `'Go to step {step}'` */
+  readonly dotAriaLabelTemplate?: string;
+};

package/src/shared/types/tour-step.type.ts

@@ -0,0 +1,40 @@
+import type {ReactNode, RefObject} from 'react';
+
+/**
+ * Preferred side of the target for the tooltip. If there is not enough room on that side, the
+ * tooltip moves to the opposite side, then to the roomier of the remaining sides.
+ */
+export type TourPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+/**
+ * What a step highlights.
+ * - Web: a CSS selector such as `'[data-tour="settings"]'`, or a ref to a DOM element.
+ * - React Native: an id registered with `useTourTarget`, or a ref to a native view.
+ */
+export type TourTarget = string | RefObject<unknown>;
+
+/** Second argument of {@link TourStep.onBeforeStep}. */
+export type TourStepContext = {
+  /**
+   * Aborted when the step is abandoned before it is shown (the user navigates elsewhere or the
+   * tour ends). Pass it to `fetch` or check `signal.aborted` in long-running work.
+   */
+  readonly signal: AbortSignal;
+};
+
+export type TourStep = {
+  /** The element to highlight. Leave it out for a step that is shown in the centre of the screen. */
+  readonly target?: TourTarget;
+  readonly title: ReactNode;
+  readonly content: ReactNode;
+  /** @defaultValue `'bottom'` */
+  readonly placement?: TourPlacement;
+  /**
+   * Runs before the step is shown, for example to navigate to another page or open a menu.
+   * The tour then waits (up to 5 seconds) for the target to appear, so there is no need to poll.
+   *
+   * Make it idempotent: it runs again if the user comes back to this step.
+   * If it throws or rejects, the tour ends with the reason `'error'`.
+   */
+  readonly onBeforeStep?: (target: TourTarget | undefined, context: TourStepContext) => void | Promise<void>;
+};

package/src/shared/types/tour-theme.type.ts

@@ -0,0 +1,28 @@
+/** Colours of the built-in tooltip and overlay. Every key is optional. */
+export type TourTheme = {
+  /**
+   * Buttons, the step badge, the active dot and the highlight ring.
+   * @defaultValue `'#2563eb'`
+   */
+  readonly primaryColor?: string;
+  /**
+   * Text on `primaryColor` (the Next button and the step badge).
+   * @defaultValue `'#ffffff'`
+   */
+  readonly primaryTextColor?: string;
+  /** @defaultValue `'#ffffff'` */
+  readonly tooltipBackground?: string;
+  /** @defaultValue `'#111827'` */
+  readonly titleColor?: string;
+  /**
+   * Body text. Muted elements (inactive dots, dividers, the Back button) are derived from it, so a
+   * dark theme only needs a dark `tooltipBackground` and light text colours.
+   * @defaultValue `'#4b5563'`
+   */
+  readonly contentColor?: string;
+  /**
+   * The dimmed area around the highlighted element. Include transparency.
+   * @defaultValue `'rgba(0, 0, 0, 0.5)'`
+   */
+  readonly overlayColor?: string;
+};

package/src/shared/types/tour-tooltip-props.type.ts

@@ -0,0 +1,27 @@
+import type {TourPlacement, TourStep} from './tour-step.type.js';
+
+/**
+ * Props of a custom `TooltipComponent`. The component only renders the card's content: the tour
+ * measures, positions, animates and focuses it, and keeps it on screen.
+ */
+export type TourTooltipProps = {
+  readonly step: TourStep;
+  /** Zero-based index of the step. */
+  readonly currentStep: number;
+  readonly totalSteps: number;
+  readonly onNext: () => void;
+  readonly onPrev: () => void;
+  readonly onClose: () => void;
+  readonly onGoToStep: (index: number) => void;
+  /** Side of the target the tooltip ended up on, or `'center'` for steps without a target. Use it to draw an arrow. */
+  readonly placement: TourPlacement | 'center';
+  /**
+   * Distance in pixels from the tooltip's left edge (for `top`/`bottom`) or top edge (for
+   * `left`/`right`) to where an arrow should point. `undefined` when no arrow should be drawn.
+   */
+  readonly arrowOffset: number | undefined;
+  /** Put `id={titleId}` on the element showing the title so screen readers announce it. */
+  readonly titleId: string;
+  /** Put `id={descriptionId}` on the element showing the content. */
+  readonly descriptionId: string;
+};

package/src/shared/utils/frame.util.ts

@@ -0,0 +1,21 @@
+const frameMs = 16;
+
+/**
+ * Calls `callback` before the next frame is drawn, or after about one frame where there are no
+ * frames (test environments without `requestAnimationFrame`). Returns the cancellation.
+ */
+export function requestFrame(callback: () => void): () => void {
+  if (typeof globalThis.requestAnimationFrame === 'function') {
+    const frame = globalThis.requestAnimationFrame(() => {
+      callback();
+    });
+    return () => {
+      globalThis.cancelAnimationFrame(frame);
+    };
+  }
+
+  const timer = setTimeout(callback, frameMs);
+  return () => {
+    clearTimeout(timer);
+  };
+}

package/src/shared/utils/get-truncated-dots.util.ts

@@ -0,0 +1,46 @@
+/** One item in the step indicator: a dot for a step, or an ellipsis standing in for several steps. */
+export type DotItem =
+  {readonly type: 'dot'; readonly index: number} | {readonly type: 'ellipsis'; readonly position: 'start' | 'end'};
+
+const maxVisible = 7;
+const siblings = (maxVisible - 5) / 2;
+
+function range(from: number, to: number): DotItem[] {
+  return Array.from({length: to - from + 1}, (_, offset) => ({type: 'dot', index: from + offset}));
+}
+
+/**
+ * The step indicator for `totalSteps` steps with `currentStep` (zero-based) selected.
+ *
+ * Up to 7 steps every step gets a dot. Above that the result always has exactly 7 items, so the
+ * indicator keeps a constant width: the first and last step, the current step and its neighbours,
+ * and ellipses for the rest. An ellipsis always stands for at least two steps.
+ */
+export function getTruncatedDots(currentStep: number, totalSteps: number): DotItem[] {
+  const total = Number.isFinite(totalSteps) ? Math.max(0, Math.floor(totalSteps)) : 0;
+  if (total === 0) {
+    return [];
+  }
+
+  if (total <= maxVisible) {
+    return range(0, total - 1);
+  }
+
+  const last = total - 1;
+  const current = Math.min(Math.max(Number.isFinite(currentStep) ? Math.floor(currentStep) : 0, 0), last);
+  if (current <= maxVisible - 3 - siblings) {
+    return [...range(0, maxVisible - 3), {type: 'ellipsis', position: 'end'}, {type: 'dot', index: last}];
+  }
+
+  if (current >= total - (maxVisible - 2) + siblings) {
+    return [{type: 'dot', index: 0}, {type: 'ellipsis', position: 'start'}, ...range(total - (maxVisible - 2), last)];
+  }
+
+  return [
+    {type: 'dot', index: 0},
+    {type: 'ellipsis', position: 'start'},
+    ...range(current - siblings, current + siblings),
+    {type: 'ellipsis', position: 'end'},
+    {type: 'dot', index: last},
+  ];
+}

package/src/shared/utils/i18n.util.ts

@@ -0,0 +1,44 @@
+import type {TourI18n} from '../types/tour-i18n.type.js';
+
+export type ResolvedI18n = Required<TourI18n>;
+
+export const defaultI18n: ResolvedI18n = {
+  nextLabel: 'Next',
+  prevLabel: 'Back',
+  finishLabel: 'Finish',
+  stepCounterTemplate: '{current} of {total}',
+  closeAriaLabel: 'Close tour',
+  dotAriaLabelTemplate: 'Go to step {step}',
+};
+
+const i18nKeys = [
+  'nextLabel',
+  'prevLabel',
+  'finishLabel',
+  'stepCounterTemplate',
+  'closeAriaLabel',
+  'dotAriaLabelTemplate',
+] as const satisfies ReadonlyArray<keyof TourI18n>;
+
+export function resolveI18n(i18n: TourI18n | undefined): ResolvedI18n {
+  if (!i18n) {
+    return defaultI18n;
+  }
+
+  const resolved = {...defaultI18n};
+  for (const key of i18nKeys) {
+    const value = i18n[key];
+    if (typeof value === 'string') {
+      resolved[key] = value;
+    }
+  }
+
+  return resolved;
+}
+
+/** Replaces every `{name}` placeholder with its value; unknown placeholders are left as they are. */
+export function formatTemplate(template: string, values: Readonly<Record<string, string | number>>): string {
+  return template.replaceAll(/\{(\w+)\}/gu, (match, name: string) =>
+    Object.hasOwn(values, name) ? String(values[name]) : match,
+  );
+}

package/src/shared/utils/theme.util.ts

@@ -0,0 +1,38 @@
+import type {TourTheme} from '../types/tour-theme.type.js';
+
+export type ResolvedTheme = Required<TourTheme>;
+
+export const defaultTheme: ResolvedTheme = {
+  primaryColor: '#2563eb',
+  primaryTextColor: '#ffffff',
+  tooltipBackground: '#ffffff',
+  titleColor: '#111827',
+  contentColor: '#4b5563',
+  overlayColor: 'rgba(0, 0, 0, 0.5)',
+};
+
+const themeKeys = [
+  'primaryColor',
+  'primaryTextColor',
+  'tooltipBackground',
+  'titleColor',
+  'contentColor',
+  'overlayColor',
+] as const satisfies ReadonlyArray<keyof TourTheme>;
+
+/** Fills in defaults for missing (or `undefined`) keys. */
+export function resolveTheme(theme: TourTheme | undefined): ResolvedTheme {
+  if (!theme) {
+    return defaultTheme;
+  }
+
+  const resolved = {...defaultTheme};
+  for (const key of themeKeys) {
+    const value = theme[key];
+    if (typeof value === 'string' && value.length > 0) {
+      resolved[key] = value;
+    }
+  }
+
+  return resolved;
+}

package/dist/react-native-platform/components/index.d.ts

@@ -1,2 +0,0 @@
-export { TourOverlay } from './tour-overlay';
-export { TourTooltip } from './tour-tooltip';

package/dist/react-native-platform/components/index.js

@@ -1,3 +0,0 @@
-export { TourOverlay } from './tour-overlay';
-export { TourTooltip } from './tour-tooltip';
-//# sourceMappingURL=index.js.map

package/dist/react-native-platform/components/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/react-native-platform/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC"}

package/dist/react-native-platform/components/tour-overlay.d.ts

@@ -1,3 +0,0 @@
-import { type ReactNode } from 'react';
-import { type TourOverlayProps } from '../../shared';
-export declare function TourOverlay({ highlightRect, onClose, theme, closeOnOverlayClick }: TourOverlayProps): ReactNode;

package/dist/react-native-platform/components/tour-overlay.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const { View, StyleSheet, TouchableWithoutFeedback } = require('react-native');
-const { default: Svg, Defs, Mask, Rect } = require('react-native-svg');
-const highlightPadding = 8;
-const highlightBorderRadius = 8;
-export function TourOverlay({ highlightRect, onClose, theme, closeOnOverlayClick }) {
-    const x = highlightRect.left - highlightPadding;
-    const y = highlightRect.top - highlightPadding;
-    const width = highlightRect.width + highlightPadding * 2;
-    const height = highlightRect.height + highlightPadding * 2;
-    const overlayContent = (_jsxs(View, { style: StyleSheet.absoluteFill, pointerEvents: closeOnOverlayClick ? 'auto' : 'none', children: [_jsxs(Svg, { style: StyleSheet.absoluteFill, children: [_jsx(Defs, { children: _jsxs(Mask, { id: "tour-mask", children: [_jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "white" }), _jsx(Rect, { x: x, y: y, width: width, height: height, rx: highlightBorderRadius, fill: "black" })] }) }), _jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: theme.overlayColor, mask: "url(#tour-mask)" })] }), _jsx(View, { pointerEvents: "none", style: {
-                    position: 'absolute',
-                    top: y,
-                    left: x,
-                    width,
-                    height,
-                    borderRadius: highlightBorderRadius,
-                    borderWidth: 2,
-                    borderColor: theme.primaryColor,
-                } })] }));
-    if (closeOnOverlayClick) {
-        return _jsx(TouchableWithoutFeedback, { onPress: onClose, children: overlayContent });
-    }
-    return overlayContent;
-}
-//# sourceMappingURL=tour-overlay.js.map

package/dist/react-native-platform/components/tour-overlay.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tour-overlay.js","sourceRoot":"","sources":["../../../src/react-native-platform/components/tour-overlay.tsx"],"names":[],"mappings":";AAGA,MAAM,EAAC,IAAI,EAAE,UAAU,EAAE,wBAAwB,EAAC,GAAG,OAAO,CAAC,cAAc,CAAkC,CAAC;AAC9G,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,GAAG,OAAO,CAAC,kBAAkB,CAAsC,CAAC;AAE1G,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAC3B,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAMhC,MAAM,UAAU,WAAW,CAAC,EAAC,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,mBAAmB,EAAmB;IAChG,MAAM,CAAC,GAAG,aAAa,CAAC,IAAI,GAAG,gBAAgB,CAAC;IAChD,MAAM,CAAC,GAAG,aAAa,CAAC,GAAG,GAAG,gBAAgB,CAAC;IAC/C,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,GAAG,gBAAgB,GAAG,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,aAAa,CAAC,MAAM,GAAG,gBAAgB,GAAG,CAAC,CAAC;IAE3D,MAAM,cAAc,GAAG,CACrB,MAAC,IAAI,IAAC,KAAK,EAAE,UAAU,CAAC,YAAY,EAAE,aAAa,EAAE,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,aAIxF,MAAC,GAAG,IAAC,KAAK,EAAE,UAAU,CAAC,YAAY,aACjC,KAAC,IAAI,cACH,MAAC,IAAI,IAAC,EAAE,EAAC,WAAW,aAElB,KAAC,IAAI,IAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,GAAG,EAE5D,KAAC,IAAI,IAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAC,OAAO,GAAG,IACrF,GACF,EAEP,KAAC,IAAI,IAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAE,KAAK,CAAC,YAAY,EAAE,IAAI,EAAC,iBAAiB,GAAG,IAC5F,EAEN,KAAC,IAAI,IACH,aAAa,EAAC,MAAM,EACpB,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,GAAG,EAAE,CAAC;oBACN,IAAI,EAAE,CAAC;oBACP,KAAK;oBACL,MAAM;oBACN,YAAY,EAAE,qBAAqB;oBACnC,WAAW,EAAE,CAAC;oBACd,WAAW,EAAE,KAAK,CAAC,YAAY;iBAChC,GACD,IACG,CACR,CAAC;IAEF,IAAI,mBAAmB,EAAE,CAAC;QACxB,OAAO,KAAC,wBAAwB,IAAC,OAAO,EAAE,OAAO,YAAG,cAAc,GAA4B,CAAC;IACjG,CAAC;IAED,OAAO,cAAc,CAAC;AACxB,CAAC"}

package/dist/react-native-platform/components/tour-tooltip.d.ts

@@ -1,3 +0,0 @@
-import type { View as ViewType } from 'react-native';
-import { type TourTooltipProps } from '../../shared';
-export declare const TourTooltip: import("react").ForwardRefExoticComponent<TourTooltipProps & import("react").RefAttributes<ViewType>>;

package/dist/react-native-platform/components/tour-tooltip.js

@@ -1,167 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useMemo } from 'react';
-import { getTruncatedDots, DOTS_CONTAINER_WIDTH, DOT_SIZE, DOT_GAP } from '../../shared/utils';
-const { View, Text, TouchableOpacity, StyleSheet } = require('react-native');
-const defaultI18n = {
-    nextLabel: 'Next',
-    prevLabel: 'Back',
-    finishLabel: 'Done',
-    stepCounterTemplate: 'Step {current} of {total}',
-};
-export const TourTooltip = forwardRef(function TourTooltip({ title, content, currentStep, totalSteps, position, isPositioned, onClose, onNext, onPrev, onMeasured, theme, i18n, }, ref) {
-    const { nextLabel, prevLabel, finishLabel, stepCounterTemplate } = { ...defaultI18n, ...i18n };
-    const isFirstStep = currentStep === 0;
-    const isLastStep = currentStep === totalSteps - 1;
-    const handleLayout = useCallback((event) => {
-        if (!onMeasured) {
-            return;
-        }
-        const { width, height } = event.nativeEvent.layout;
-        onMeasured({ width, height });
-    }, [onMeasured]);
-    const themedStyles = useMemo(() => ({
-        container: {
-            backgroundColor: theme.tooltipBackground,
-        },
-        stepBadge: {
-            backgroundColor: theme.primaryColor,
-        },
-        closeButtonText: {
-            color: theme.contentColor,
-        },
-        title: {
-            color: theme.titleColor,
-        },
-        content: {
-            color: theme.contentColor,
-        },
-        nextButton: {
-            backgroundColor: theme.primaryColor,
-        },
-        dotActive: {
-            backgroundColor: theme.primaryColor,
-        },
-    }), [theme]);
-    return (_jsxs(View, { ref: ref, style: [
-            styles.container,
-            themedStyles.container,
-            {
-                top: position.top,
-                left: position.left,
-                opacity: isPositioned ? 1 : 0,
-            },
-        ], onLayout: handleLayout, children: [_jsxs(View, { style: styles.header, children: [_jsx(View, { style: [styles.stepBadge, themedStyles.stepBadge], children: _jsx(Text, { style: styles.stepBadgeText, children: stepCounterTemplate.replace('{current}', String(currentStep + 1)).replace('{total}', String(totalSteps)) }) }), _jsx(TouchableOpacity, { style: styles.closeButton, onPress: onClose, children: _jsx(Text, { style: [styles.closeButtonText, themedStyles.closeButtonText], children: "\u00D7" }) })] }), _jsxs(View, { style: styles.body, children: [_jsx(Text, { style: [styles.title, themedStyles.title], children: title }), _jsx(Text, { style: [styles.content, themedStyles.content], children: content })] }), _jsxs(View, { style: styles.footer, children: [_jsx(TouchableOpacity, { disabled: isFirstStep, style: [styles.navButton, styles.prevButton, isFirstStep && styles.buttonDisabled], onPress: onPrev, children: _jsx(Text, { style: [styles.prevButtonText, isFirstStep && styles.buttonTextDisabled], children: prevLabel }) }), _jsx(View, { style: styles.dots, children: getTruncatedDots(currentStep, totalSteps).map((item, i) => item.type === 'ellipsis' ? (_jsxs(View, { style: styles.ellipsis, children: [_jsx(View, { style: styles.ellipsisDot }), _jsx(View, { style: styles.ellipsisDot })] }, `ellipsis-${i}`)) : (_jsx(View, { style: [styles.dot, item.index === currentStep && themedStyles.dotActive] }, item.index))) }), _jsx(TouchableOpacity, { style: [styles.navButton, themedStyles.nextButton], onPress: onNext, children: _jsx(Text, { style: styles.nextButtonText, children: isLastStep ? finishLabel : nextLabel }) })] })] }));
-});
-const styles = StyleSheet.create({
-    container: {
-        position: 'absolute',
-        width: 320,
-        borderRadius: 12,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.15,
-        shadowRadius: 12,
-        elevation: 8,
-    },
-    header: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingHorizontal: 16,
-        paddingTop: 16,
-        paddingBottom: 12,
-        borderBottomWidth: 1,
-        borderBottomColor: '#e5e7eb',
-    },
-    stepBadge: {
-        paddingHorizontal: 10,
-        paddingVertical: 4,
-        borderRadius: 6,
-    },
-    stepBadgeText: {
-        color: '#ffffff',
-        fontSize: 12,
-        fontWeight: '600',
-    },
-    closeButton: {
-        padding: 4,
-    },
-    closeButtonText: {
-        fontSize: 24,
-        lineHeight: 24,
-    },
-    body: {
-        padding: 16,
-    },
-    title: {
-        fontSize: 18,
-        fontWeight: '600',
-        marginBottom: 8,
-    },
-    content: {
-        fontSize: 14,
-        lineHeight: 20,
-    },
-    footer: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingHorizontal: 16,
-        paddingBottom: 16,
-        paddingTop: 8,
-    },
-    navButton: {
-        paddingHorizontal: 16,
-        paddingVertical: 10,
-        borderRadius: 8,
-        minWidth: 80,
-        alignItems: 'center',
-    },
-    prevButton: {
-        backgroundColor: '#f3f4f6',
-    },
-    prevButtonText: {
-        fontSize: 14,
-        fontWeight: '500',
-        color: '#1f2937',
-    },
-    nextButtonText: {
-        fontSize: 14,
-        fontWeight: '500',
-        color: '#ffffff',
-    },
-    buttonDisabled: {
-        opacity: 0.5,
-    },
-    buttonTextDisabled: {
-        color: '#9ca3af',
-    },
-    dots: {
-        flexDirection: 'row',
-        gap: DOT_GAP,
-        width: DOTS_CONTAINER_WIDTH,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    dot: {
-        width: DOT_SIZE,
-        height: DOT_SIZE,
-        borderRadius: DOT_SIZE / 2,
-        backgroundColor: '#d1d5db',
-    },
-    ellipsis: {
-        width: DOT_SIZE,
-        height: DOT_SIZE,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 2,
-    },
-    ellipsisDot: {
-        width: 3,
-        height: 3,
-        borderRadius: 1.5,
-        backgroundColor: '#d1d5db',
-    },
-});
-//# sourceMappingURL=tour-tooltip.js.map

package/dist/react-native-platform/components/tour-tooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tour-tooltip.js","sourceRoot":"","sources":["../../../src/react-native-platform/components/tour-tooltip.tsx"],"names":[],"mappings":"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"}

package/dist/react-native-platform/hooks/index.d.ts

@@ -1 +0,0 @@
-export { useTourTarget } from './use-tour-target';

package/dist/react-native-platform/hooks/index.js

@@ -1,2 +0,0 @@
-export { useTourTarget } from './use-tour-target';
-//# sourceMappingURL=index.js.map

package/dist/react-native-platform/hooks/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/react-native-platform/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC"}

package/dist/react-native-platform/hooks/use-tour-target.d.ts

@@ -1,2 +0,0 @@
-import { type RefObject } from 'react';
-export declare function useTourTarget<T = unknown>(id: string): RefObject<T | null>;

package/dist/react-native-platform/hooks/use-tour-target.js

@@ -1,13 +0,0 @@
-import { useRef, useEffect } from 'react';
-import { targetRegistry } from '../target-registry';
-export function useTourTarget(id) {
-    const ref = useRef(null);
-    useEffect(() => {
-        targetRegistry.register(id, ref);
-        return () => {
-            targetRegistry.unregister(id);
-        };
-    }, [id]);
-    return ref;
-}
-//# sourceMappingURL=use-tour-target.js.map

package/dist/react-native-platform/hooks/use-tour-target.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-tour-target.js","sourceRoot":"","sources":["../../../src/react-native-platform/hooks/use-tour-target.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAC;AACxD,OAAO,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAsBlD,MAAM,UAAU,aAAa,CAAc,EAAU;IACnD,MAAM,GAAG,GAAG,MAAM,CAAW,IAAI,CAAC,CAAC;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,QAAQ,CAAC,EAAE,EAAE,GAAyB,CAAC,CAAC;QAEvD,OAAO,GAAS,EAAE;YAChB,cAAc,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;QAChC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAET,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/react-native-platform/index.d.ts

@@ -1,7 +0,0 @@
-export { TourProvider } from './tour-provider';
-export type { TourProviderProps } from './types/tour-provider.props.type';
-export { TourOverlay } from './components/tour-overlay';
-export { TourTooltip } from './components/tour-tooltip';
-export { useTourTarget } from './hooks';
-export { nativePlatformAdapter } from './platform-adapter';
-export { targetRegistry } from './target-registry';

package/dist/react-native-platform/index.js

@@ -1,7 +0,0 @@
-export { TourProvider } from './tour-provider';
-export { TourOverlay } from './components/tour-overlay';
-export { TourTooltip } from './components/tour-tooltip';
-export { useTourTarget } from './hooks';
-export { nativePlatformAdapter } from './platform-adapter';
-export { targetRegistry } from './target-registry';
-//# sourceMappingURL=index.js.map

package/dist/react-native-platform/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react-native-platform/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAG7C,OAAO,EAAC,WAAW,EAAC,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAC,WAAW,EAAC,MAAM,2BAA2B,CAAC;AAItD,OAAO,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAItC,OAAO,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAC"}

package/dist/react-native-platform/platform-adapter.d.ts

@@ -1,2 +0,0 @@
-import { type PlatformAdapter } from '../shared/index.js';
-export declare const nativePlatformAdapter: PlatformAdapter;