uo287827-react-native-tour-component 1.0.0

package/README.md

@@ -0,0 +1,175 @@
+# feature-tour
+
+Componente de tour/onboarding para React Native.
+
+## Instalación
+
+Requiere `react-native-svg`:
+
+```bash
+npx expo install react-native-svg
+```
+
+## Uso básico
+
+```tsx
+import { useRef } from 'react';
+import { View, Text, Button } from 'react-native';
+import { Tour, TourProvider, TourHandle, TourStepConfig } from './feature-tour';
+
+export default function MyScreen() {
+  // tourRef expone start() y stop() para controlar el tour de forma imperativa
+  const tourRef = useRef<TourHandle>(null);
+
+  // Cada ref se asigna al elemento de UI que el tour resaltará
+  const headerRef = useRef<View>(null);
+  const buttonRef = useRef<View>(null);
+
+  // Define la lista ordenada de pasos; cada paso apunta a un ref y contiene los datos del tooltip
+  const steps: TourStepConfig[] = [
+    {
+      id: 'header',       
+      ref: headerRef,     // El elemento a resaltar
+      title: 'Cabecera',
+      content: 'Aquí está el título principal.',
+      tooltipPosition: 'bottom', // El tooltip aparece debajo del elemento resaltado
+    },
+    {
+      id: 'button',
+      ref: buttonRef,
+      title: 'Acción',
+      content: 'Pulsa aquí para continuar.',
+      tooltipPosition: 'top',  // El tooltip aparece encima del elemento resaltado
+      tooltipSize: 'lg',       // Usa la variante de tooltip más ancha (320px en lugar de 260px)
+    },
+  ];
+
+  return (
+    // TourProvider provee el tema y el contexto compartido a todos los componentes del tour
+    <TourProvider>
+      {/* <Tour> renderiza el overlay y el tooltip; es invisible hasta que se llama a start() */}
+      <Tour ref={tourRef} steps={steps} />
+
+      {/* Asigna los refs a los elementos que quieres resaltar en cada paso */}
+      <Text ref={headerRef}>Mi app</Text>
+
+      {/* Llamar a tourRef.current.start() inicia el tour en el paso 0 */}
+      <Button title="Iniciar tour" onPress={() => tourRef.current?.start()} />
+    </TourProvider>
+  );
+}
+```
+
+## Props de `<Tour>`
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `steps` | `TourStepConfig[]` | — | Pasos del tour |
+| `skipLabel` | `string` | `'Saltar'` | Texto del botón "Saltar" |
+| `nextLabel` | `string` | `'Siguiente'` | Texto del botón "Siguiente" |
+| `finishLabel` | `string` | `'Finalizar'` | Texto del botón del último paso |
+| `showSkipButton` | `boolean` | `true` | Muestra u oculta el botón de omitir |
+
+Ejemplo con etiquetas en inglés:
+
+```tsx
+// Sobreescribe las etiquetas predeterminadas
+<Tour ref={tourRef} steps={steps} skipLabel="Skip" nextLabel="Next" finishLabel="Done" />
+```
+
+### Contenido personalizado en un paso
+
+`content` acepta tanto un `string` (texto simple) como cualquier `ReactNode`:
+
+```tsx
+// --- Opción 1: string simple ---
+// El tooltip renderiza el texto directamente dentro de un componente <Text>.
+{ id: 'step1', ref, title: 'Título', content: 'Descripción sencilla.' }
+
+// --- Opción 2: ReactNode personalizado ---
+// Cuando content es un ReactNode, se envuelve en un <View> simple;
+// tienes control total sobre el layout y los estilos.
+{
+  id: 'stats',
+  ref: statsRef,
+  title: 'Estadísticas',
+  content: (
+    <View style={{ gap: 4 }}>
+      {/* Fila de texto descriptivo */}
+      <Text style={{ fontSize: 13, color: '#475569' }}>Aquí ves un resumen de tu actividad.</Text>
+
+      {/* Fila de badges — cada badge es una píldora pequeña con fondo de color */}
+      <View style={{ flexDirection: 'row', gap: 8, marginTop: 4 }}>
+        <Text style={{ fontSize: 12, backgroundColor: '#e0f2fe', paddingHorizontal: 8,
+        paddingVertical: 2, borderRadius: 10 }}>12 proyectos</Text>
+        <Text style={{ fontSize: 12, backgroundColor: '#dcfce7', paddingHorizontal: 8,
+        paddingVertical: 2, borderRadius: 10 }}>48 tareas</Text>
+      </View>
+    </View>
+  ),
+  tooltipPosition: 'bottom', // Coloca el tooltip debajo del elemento de estadísticas
+}
+```
+
+## Props de `TourStepConfig`
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `id` | `string` | — | Identificador único del paso |
+| `ref` | `RefObject<View>` | — | Referencia al elemento a destacar |
+| `title` | `string` | — | Título del tooltip |
+| `content` | `string \| ReactNode` | — | Texto simple o componente React personalizado |
+| `tooltipPosition` | `'top' \| 'bottom' \| 'auto'` | `'auto'` | Posición del tooltip |
+| `tooltipSize` | `'sm' \| 'lg'` | `'sm'` | Tamaño del tooltip |
+| `highlightPadding` | `number` | `8` | Espacio extra alrededor del elemento |
+
+## Tema
+
+Personaliza el aspecto visual pasando un objeto `theme` parcial a `<TourProvider>`:
+
+```tsx
+import { Tour, TourProvider, TourTheme } from './feature-tour';
+
+// Define el tema fuera del componente para evitar recrearlo en cada render
+// Partial<TourTheme> permite sobreescribir solo los tokens deseados
+const miTema: Partial<TourTheme> = {
+  primaryColor: '#7c3aed',        // Botón "Siguiente" en morado
+  tooltipBackgroundColor: '#1e1e2e', // Fondo oscuro para el tooltip
+  tooltipTitleColor: '#ffffff',
+  tooltipDescriptionColor: '#a0a0b0',
+  overlayColor: 'rgba(0,0,0,0.75)',
+};
+
+// Pasa el tema al provider; solo los tokens definidos sobreescriben el DEFAULT_TOUR_THEME
+export default function App() {
+  return (
+    <TourProvider theme={miTema}>
+      {/* resto de la app */}
+    </TourProvider>
+  );
+}
+```
+
+También puedes pasar los tokens directamente como objeto literal:
+
+```tsx
+// Proporciona solo los tokens que quieras sobreescribir; 
+// el resto tomará los valores de DEFAULT_TOUR_THEME.
+// Aquí cambiamos el color de acción principal y suavizamos las esquinas del highlight.
+<TourProvider theme={{ primaryColor: '#2563eb', highlightBorderRadius: 12 }}>
+```
+
+| Token | Default | Descripción |
+|---|---|---|
+| `primaryColor` | `'#2563eb'` | Color de fondo del botón "Siguiente" |
+| `primaryTextColor` | `'#ffffff'` | Color del texto del botón "Siguiente" |
+| `skipButtonTextColor` | `'#888888'` | Color del texto del botón "Saltar" |
+| `skipButtonBackgroundColor` | `'transparent'` | Color de fondo del botón "Saltar" |
+| `tooltipBackgroundColor` | `'#ffffff'` | Fondo del tooltip |
+| `tooltipTitleColor` | `'#111111'` | Color del título |
+| `tooltipDescriptionColor` | `'#444444'` | Color de la descripción |
+| `tooltipProgressColor` | `'#888888'` | Color del contador de pasos |
+| `tooltipBorderRadius` | `10` | Radio del tooltip |
+| `overlayColor` | `'rgba(0,0,0,0.6)'` | Color del fondo oscuro |
+| `highlightBorderColor` | `'#ffffff'` | Color del borde del elemento destacado |
+| `highlightBorderRadius` | `10` | Radio del recuadro de highlight |

package/dist/components/tour-highlight.component.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ElementMeasure } from '../tour.types';
+interface TourHighlightProps {
+    measure: ElementMeasure;
+    padding: number;
+}
+export declare const TourHighlight: React.FC<TourHighlightProps>;
+export {};
+//# sourceMappingURL=tour-highlight.component.d.ts.map

package/dist/components/tour-highlight.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour-highlight.component.d.ts","sourceRoot":"","sources":["../../components/tour-highlight.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,UAAU,kBAAkB;IACxB,OAAO,EAAE,cAAc,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;CACnB;AAGD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgBtD,CAAC"}

package/dist/components/tour-highlight.component.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, View } from 'react-native';
+import { useTourTheme } from '../service/tour-theme.context';
+// Componente que dibuja un borde resaltado alrededor del elemento destacado.
+export const TourHighlight = ({ measure, padding }) => {
+    const theme = useTourTheme();
+    const { x, y, width, height } = measure;
+    return (_jsx(View, { style: [styles.highlight, {
+                top: y - padding,
+                left: x - padding,
+                width: width + padding * 2,
+                height: height + padding * 2,
+                borderColor: theme.highlightBorderColor,
+                borderRadius: theme.highlightBorderRadius,
+            }] }));
+};
+const styles = StyleSheet.create({
+    highlight: {
+        position: 'absolute',
+        borderWidth: 2,
+        backgroundColor: 'transparent',
+    },
+});

package/dist/components/tour-overlay.component.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TourStepConfig } from '../tour.types';
+interface TourOverlayProps {
+    step: TourStepConfig;
+    stepIndex: number;
+    totalSteps: number;
+    onNext: () => void;
+    onSkip: () => void;
+    skipLabel: string;
+    nextLabel: string;
+    finishLabel: string;
+    showSkipButton: boolean;
+}
+export declare const TourOverlay: React.FC<TourOverlayProps>;
+export {};
+//# sourceMappingURL=tour-overlay.component.d.ts.map

package/dist/components/tour-overlay.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour-overlay.component.d.ts","sourceRoot":"","sources":["../../components/tour-overlay.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAkB,cAAc,EAAE,MAAM,eAAe,CAAC;AAK/D,UAAU,gBAAgB;IACtB,IAAI,EAAE,cAAc,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;CAC3B;AAwBD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkElD,CAAC"}

package/dist/components/tour-overlay.component.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Dimensions, Modal, StyleSheet, View } from 'react-native';
+import { Path, Svg } from 'react-native-svg';
+import { useTourTheme } from '../service/tour-theme.context';
+import { TourHighlight } from './tour-highlight.component';
+import { TourTooltip } from './tour-tooltip.component';
+/** Este SVG sirve para oscurecer toda la pantalla excepto el área del elemento destacado, creando un efecto de "agujero". */
+function buildCutoutPath(sw, sh, x, y, w, h, r) {
+    return [
+        // rectángulo exterior (pantalla completa)
+        `M 0 0 H ${sw} V ${sh} H 0 Z`,
+        // rectángulo redondeado interior (el "agujero")
+        `M ${x + r} ${y}`,
+        `H ${x + w - r}`,
+        `A ${r} ${r} 0 0 1 ${x + w} ${y + r}`,
+        `V ${y + h - r}`,
+        `A ${r} ${r} 0 0 1 ${x + w - r} ${y + h}`,
+        `H ${x + r}`,
+        `A ${r} ${r} 0 0 1 ${x} ${y + h - r}`,
+        `V ${y + r}`,
+        `A ${r} ${r} 0 0 1 ${x + r} ${y} Z`,
+    ].join(' ');
+}
+export const TourOverlay = ({ step, stepIndex, totalSteps, onNext, onSkip, skipLabel, nextLabel, finishLabel, showSkipButton }) => {
+    var _a;
+    const theme = useTourTheme();
+    const [measure, setMeasure] = useState(null);
+    const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+    useEffect(() => {
+        var _a;
+        if (!((_a = step.ref) === null || _a === void 0 ? void 0 : _a.current))
+            return;
+        const timer = setTimeout(() => {
+            step.ref.current.measureInWindow((x, y, width, height) => {
+                // measureInWindow devuelve coordenadas relativas a la ventana visible
+                setMeasure({ x, y, width, height });
+            });
+        }, 100);
+        return () => clearTimeout(timer);
+    }, [step.id]);
+    const pad = (_a = step.highlightPadding) !== null && _a !== void 0 ? _a : 8;
+    const hx = measure ? measure.x - pad : 0;
+    const hy = measure ? measure.y - pad : 0;
+    const hw = measure ? measure.width + pad * 2 : 0;
+    const hh = measure ? measure.height + pad * 2 : 0;
+    return (
+    // Modal que cubre toda la pantalla con un fondo semitransparente, dejando un "agujero" alrededor del elemento destacado.
+    _jsx(Modal, { transparent: true, visible: true, animationType: "fade", children: _jsxs(View, { style: StyleSheet.absoluteFill, pointerEvents: "box-none", children: [_jsx(Svg, { style: StyleSheet.absoluteFill, width: screenWidth, height: screenHeight, pointerEvents: "none", children: _jsx(Path, { d: buildCutoutPath(screenWidth, screenHeight, hx, hy, hw, hh, theme.highlightBorderRadius), fill: theme.overlayColor, fillRule: "evenodd" }) }), measure && (_jsxs(_Fragment, { children: [_jsx(TourHighlight, { measure: measure, padding: pad }), _jsx(TourTooltip, { step: step, measure: measure, screenWidth: screenWidth, screenHeight: screenHeight, stepIndex: stepIndex, totalSteps: totalSteps, onNext: onNext, onSkip: onSkip, skipLabel: skipLabel, nextLabel: nextLabel, finishLabel: finishLabel, showSkipButton: showSkipButton })] }))] }) }));
+};
+const styles = StyleSheet.create({});

package/dist/components/tour-tooltip-position.component.d.ts

@@ -0,0 +1,7 @@
+import { ElementMeasure, TooltipPosition } from '../tour.types';
+export interface TooltipCoords {
+    top: number;
+    left: number;
+}
+export declare const calculateTooltipPosition: (measure: ElementMeasure, screenWidth: number, screenHeight: number, preferred?: TooltipPosition) => TooltipCoords;
+//# sourceMappingURL=tour-tooltip-position.component.d.ts.map

package/dist/components/tour-tooltip-position.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour-tooltip-position.component.d.ts","sourceRoot":"","sources":["../../components/tour-tooltip-position.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAKhE,MAAM,WAAW,aAAa;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CAChB;AAGD,eAAO,MAAM,wBAAwB,GACjC,SAAS,cAAc,EACvB,aAAa,MAAM,EACnB,cAAc,MAAM,EACpB,YAAW,eAAwB,KACpC,aAgBF,CAAC"}

package/dist/components/tour-tooltip-position.component.js

@@ -0,0 +1,16 @@
+const TOOLTIP_HEIGHT = 120;
+const TOOLTIP_MARGIN = 12;
+// Calcula la posición del tooltip basado en la medida del elemento destacado, el tamaño de la pantalla y la preferencia de posición.
+export const calculateTooltipPosition = (measure, screenWidth, screenHeight, preferred = 'auto') => {
+    const spaceBelow = screenHeight - (measure.y + measure.height);
+    const spaceAbove = measure.y;
+    const position = preferred !== 'auto' ? preferred
+        : spaceBelow >= TOOLTIP_HEIGHT + TOOLTIP_MARGIN ? 'bottom'
+            : spaceAbove >= TOOLTIP_HEIGHT + TOOLTIP_MARGIN ? 'top'
+                : 'bottom'; // valor por defecto
+    const left = Math.max(16, Math.min(measure.x, screenWidth - 240));
+    if (position === 'bottom') {
+        return { top: measure.y + measure.height + TOOLTIP_MARGIN, left };
+    }
+    return { top: measure.y - TOOLTIP_HEIGHT - TOOLTIP_MARGIN, left };
+};

package/dist/components/tour-tooltip.component.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ElementMeasure, TourStepConfig } from '../tour.types';
+interface TourTooltipProps {
+    step: TourStepConfig;
+    measure: ElementMeasure;
+    screenWidth: number;
+    screenHeight: number;
+    stepIndex: number;
+    totalSteps: number;
+    onNext: () => void;
+    onSkip: () => void;
+    skipLabel: string;
+    nextLabel: string;
+    finishLabel: string;
+    showSkipButton: boolean;
+}
+export declare const TourTooltip: React.FC<TourTooltipProps>;
+export {};
+//# sourceMappingURL=tour-tooltip.component.d.ts.map

package/dist/components/tour-tooltip.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour-tooltip.component.d.ts","sourceRoot":"","sources":["../../components/tour-tooltip.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAI/D,UAAU,gBAAgB;IACtB,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,EAAE,cAAc,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;CAC3B;AAGD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4DlD,CAAC"}

package/dist/components/tour-tooltip.component.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useTourTheme } from '../service/tour-theme.context';
+import { calculateTooltipPosition } from '../utils/tour-tooltip-position';
+// Componente que muestra el tooltip con la información de la etapa actual, posicionado cerca del elemento destacado.
+export const TourTooltip = ({ step, measure, screenWidth, screenHeight, stepIndex, totalSteps, onNext, onSkip, skipLabel, nextLabel, finishLabel, showSkipButton, }) => {
+    const theme = useTourTheme();
+    const [tooltipHeight, setTooltipHeight] = useState(0);
+    const isLast = stepIndex === totalSteps - 1;
+    const tooltipWidth = step.tooltipSize === 'lg' ? 320 : 260;
+    const { top, left } = calculateTooltipPosition(measure, screenWidth, screenHeight, step.tooltipPosition, tooltipHeight);
+    const handleLayout = (e) => {
+        const h = e.nativeEvent.layout.height;
+        if (h !== tooltipHeight)
+            setTooltipHeight(h);
+    };
+    return (_jsxs(View, { style: [styles.container, {
+                top, left,
+                width: tooltipWidth,
+                opacity: tooltipHeight === 0 ? 0 : 1,
+                backgroundColor: theme.tooltipBackgroundColor,
+                borderRadius: theme.tooltipBorderRadius,
+            }], onLayout: handleLayout, children: [_jsxs(View, { style: styles.header, children: [_jsx(Text, { style: [styles.title, { color: theme.tooltipTitleColor }], children: step.title }), _jsxs(Text, { style: [styles.progress, { color: theme.tooltipProgressColor }], children: [stepIndex + 1, " / ", totalSteps] })] }), step.content != null && (typeof step.content === 'string'
+                ? _jsx(Text, { style: [styles.description, { color: theme.tooltipDescriptionColor }], children: step.content })
+                : _jsx(View, { style: styles.customContent, children: step.content })), _jsxs(View, { style: [styles.actions, !showSkipButton && styles.actionsEnd], children: [showSkipButton && (_jsx(TouchableOpacity, { style: [styles.skipBtn, { backgroundColor: theme.skipButtonBackgroundColor, borderRadius: theme.tooltipBorderRadius - 2 }], onPress: onSkip, children: _jsx(Text, { style: [styles.skipBtnText, { color: theme.skipButtonTextColor }], children: skipLabel }) })), _jsx(TouchableOpacity, { style: [styles.nextBtn, { backgroundColor: theme.primaryColor, borderRadius: theme.tooltipBorderRadius - 2 }], onPress: onNext, children: _jsx(Text, { style: [styles.nextBtnText, { color: theme.primaryTextColor }], children: isLast ? finishLabel : nextLabel }) })] })] }));
+};
+// Estilos básicos del tooltip, algunos de ellos se pueden personalizar o sobreescribir con un TourTheme.
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        padding: 16,
+        shadowColor: '#000',
+        shadowOpacity: 0.2,
+        shadowRadius: 8,
+        elevation: 6,
+    },
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 6,
+    },
+    title: { fontSize: 15, fontWeight: '700' },
+    progress: { fontSize: 12 },
+    description: { fontSize: 13, lineHeight: 20, marginBottom: 14 },
+    customContent: { marginBottom: 14 },
+    actions: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    actionsEnd: {
+        justifyContent: 'flex-end',
+    },
+    skipBtn: { paddingVertical: 7, paddingHorizontal: 12 },
+    skipBtnText: { fontSize: 13 },
+    nextBtn: { paddingVertical: 7, paddingHorizontal: 16 },
+    nextBtnText: { fontSize: 13, fontWeight: '600' },
+});

package/dist/components/tour.component.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TourHandle, TourStepConfig } from '../tour.types';
+interface TourProps {
+    steps: TourStepConfig[];
+    /** Texto del botón "Saltar" (por defecto 'Saltar') */
+    skipLabel?: string;
+    /** Texto del botón "Siguiente" (por defecto 'Siguiente') */
+    nextLabel?: string;
+    /** Texto del botón del último paso (por defecto 'Finalizar') */
+    finishLabel?: string;
+    /** Muestra u oculta el botón de omitir. Por defecto `true`. */
+    showSkipButton?: boolean;
+}
+/**
+ * <Tour ref={tourRef} steps={steps} />
+ *
+ * Coloca este componente dentro de TourProvider. Se puede iniciar el tour con:
+ *   tourRef.current?.start()
+ */
+export declare const Tour: React.ForwardRefExoticComponent<TourProps & React.RefAttributes<TourHandle>>;
+export {};
+//# sourceMappingURL=tour.component.d.ts.map

package/dist/components/tour.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour.component.d.ts","sourceRoot":"","sources":["../../components/tour.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG3D,UAAU,SAAS;IACf,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;GAKG;AACH,eAAO,MAAM,IAAI,8EAqCf,CAAC"}

package/dist/components/tour.component.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { TourOverlay } from './tour-overlay.component';
+/**
+ * <Tour ref={tourRef} steps={steps} />
+ *
+ * Coloca este componente dentro de TourProvider. Se puede iniciar el tour con:
+ *   tourRef.current?.start()
+ */
+export const Tour = forwardRef(({ steps, skipLabel = 'Saltar', nextLabel = 'Siguiente', finishLabel = 'Finalizar', showSkipButton = true }, ref) => {
+    const [running, setRunning] = useState(false);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    useImperativeHandle(ref, () => ({
+        start: () => {
+            setCurrentIndex(0);
+            setRunning(true);
+        },
+        stop: () => setRunning(false),
+    }));
+    const handleNext = () => {
+        if (currentIndex >= steps.length - 1) {
+            setRunning(false);
+        }
+        else {
+            setCurrentIndex(prev => prev + 1);
+        }
+    };
+    const handleSkip = () => setRunning(false);
+    if (!running || steps.length === 0)
+        return null;
+    return (_jsx(TourOverlay, { step: steps[currentIndex], stepIndex: currentIndex, totalSteps: steps.length, onNext: handleNext, onSkip: handleSkip, skipLabel: skipLabel, nextLabel: nextLabel, finishLabel: finishLabel, showSkipButton: showSkipButton }));
+});

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { TourProvider } from './service/tour.context';
+export { useTourTheme } from './service/tour-theme.context';
+export { Tour } from './components/tour.component';
+export type { TourStepConfig, TourHandle, TooltipPosition, TourTheme, TourStepSize, TourStepContent } from './tour.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,eAAe,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+// Única puerta de entrada al módulo
+export { TourProvider } from './service/tour.context';
+export { useTourTheme } from './service/tour-theme.context';
+export { Tour } from './components/tour.component';

package/dist/service/tour-theme.context.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TourTheme } from '../tour.types';
+export declare const TourThemeProvider: React.FC<{
+    theme: TourTheme;
+    children: React.ReactNode;
+}>;
+export declare const useTourTheme: () => TourTheme;
+//# sourceMappingURL=tour-theme.context.d.ts.map

package/dist/service/tour-theme.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour-theme.context.d.ts","sourceRoot":"","sources":["../../service/tour-theme.context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAsB,SAAS,EAAE,MAAM,eAAe,CAAC;AAI9D,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAIA,CAAC;AAEF,eAAO,MAAM,YAAY,QAAO,SAAyC,CAAC"}

package/dist/service/tour-theme.context.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { DEFAULT_TOUR_THEME } from '../tour.types';
+const TourThemeContext = createContext(DEFAULT_TOUR_THEME);
+export const TourThemeProvider = ({ theme, children }) => (_jsx(TourThemeContext.Provider, { value: theme, children: children }));
+export const useTourTheme = () => useContext(TourThemeContext);

package/dist/service/tour.context.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TourTheme } from '../tour.types';
+/** Proveedor raíz — colócalo una vez en la raíz de la app para configurar el tema del tour. */
+export declare const TourProvider: React.FC<{
+    children: React.ReactNode;
+    theme?: Partial<TourTheme>;
+}>;
+//# sourceMappingURL=tour.context.d.ts.map

package/dist/service/tour.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour.context.d.ts","sourceRoot":"","sources":["../../service/tour.context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,SAAS,EAAE,MAAM,eAAe,CAAC;AAG9D,+FAA+F;AAC/F,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;CAAE,CAO5F,CAAC"}

package/dist/service/tour.context.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DEFAULT_TOUR_THEME } from '../tour.types';
+import { TourThemeProvider } from './tour-theme.context';
+/** Proveedor raíz — colócalo una vez en la raíz de la app para configurar el tema del tour. */
+export const TourProvider = ({ children, theme }) => {
+    const resolvedTheme = Object.assign(Object.assign({}, DEFAULT_TOUR_THEME), theme);
+    return (_jsx(TourThemeProvider, { theme: resolvedTheme, children: children }));
+};

package/dist/tour.types.d.ts

@@ -0,0 +1,58 @@
+import { RefObject } from "react";
+import { View } from "react-native";
+import type { ReactNode } from "react";
+export type TourStepContent = string | ReactNode;
+export type TourState = 'IDLE' | 'RUNNING' | 'FINISHED';
+export type TooltipPosition = 'top' | 'bottom' | 'auto';
+/** Controla el tamaño del tooltip. 'sm' = compacto (predeterminado), 'lg' = ancho. */
+export type TourStepSize = 'sm' | 'lg';
+export interface TourTheme {
+    /** Color principal: botón "Siguiente", badge de progreso */
+    primaryColor: string;
+    /** Color del texto sobre el botón primario */
+    primaryTextColor: string;
+    /** Color de fondo del tooltip */
+    tooltipBackgroundColor: string;
+    /** Color del título del tooltip */
+    tooltipTitleColor: string;
+    /** Color del texto de descripción */
+    tooltipDescriptionColor: string;
+    /** Color del texto de progreso ("1 / 6") */
+    tooltipProgressColor: string;
+    /** Color del botón "Saltar" */
+    skipButtonTextColor: string;
+    /** Color de fondo del botón "Saltar" (por defecto transparente) */
+    skipButtonBackgroundColor: string;
+    /** Border radius del tooltip */
+    tooltipBorderRadius: number;
+    /** Color del overlay semitransparente */
+    overlayColor: string;
+    /** Color del borde del highlight */
+    highlightBorderColor: string;
+    /** Border radius del highlight */
+    highlightBorderRadius: number;
+}
+export declare const DEFAULT_TOUR_THEME: TourTheme;
+export interface TourStepConfig {
+    id: string;
+    ref: RefObject<View | null>;
+    title: string;
+    /** Contenido del tooltip. Puede ser un string (texto simple) o un ReactNode (contenido personalizado). */
+    content?: TourStepContent;
+    tooltipPosition?: TooltipPosition;
+    highlightPadding?: number;
+    /** Controla el tamaño del tooltip. */
+    tooltipSize?: TourStepSize;
+}
+/** Handle imperativo expuesto por <Tour> mediante forwardRef */
+export interface TourHandle {
+    start: () => void;
+    stop: () => void;
+}
+export interface ElementMeasure {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+//# sourceMappingURL=tour.types.d.ts.map

package/dist/tour.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour.types.d.ts","sourceRoot":"","sources":["../tour.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAExD,sFAAsF;AACtF,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvC,MAAM,WAAW,SAAS;IACtB,4DAA4D;IAC5D,YAAY,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,gBAAgB,EAAE,MAAM,CAAC;IACzB,iCAAiC;IACjC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,mCAAmC;IACnC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qCAAqC;IACrC,uBAAuB,EAAE,MAAM,CAAC;IAChC,4CAA4C;IAC5C,oBAAoB,EAAE,MAAM,CAAC;IAC7B,+BAA+B;IAC/B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mEAAmE;IACnE,yBAAyB,EAAE,MAAM,CAAC;IAClC,gCAAgC;IAChC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,yCAAyC;IACzC,YAAY,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,oBAAoB,EAAE,MAAM,CAAC;IAC7B,kCAAkC;IAClC,qBAAqB,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,kBAAkB,EAAE,SAahC,CAAC;AAEF,MAAM,WAAW,cAAc;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,0GAA0G;IAC1G,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sCAAsC;IACtC,WAAW,CAAC,EAAE,YAAY,CAAC;CAC9B;AAED,gEAAgE;AAChE,MAAM,WAAW,UAAU;IACvB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB"}

package/dist/tour.types.js

@@ -0,0 +1,14 @@
+export const DEFAULT_TOUR_THEME = {
+    primaryColor: '#2563eb',
+    primaryTextColor: '#ffffff',
+    tooltipBackgroundColor: '#ffffff',
+    tooltipTitleColor: '#111111',
+    tooltipDescriptionColor: '#444444',
+    tooltipProgressColor: '#888888',
+    skipButtonTextColor: '#888888',
+    skipButtonBackgroundColor: 'transparent',
+    tooltipBorderRadius: 10,
+    overlayColor: 'rgba(0,0,0,0.6)',
+    highlightBorderColor: '#ffffff',
+    highlightBorderRadius: 10,
+};

package/dist/utils/tour-tooltip-position.d.ts

@@ -0,0 +1,8 @@
+import { ElementMeasure, TooltipPosition } from '../tour.types';
+export interface TooltipCoords {
+    top: number;
+    left: number;
+}
+/** Calcula la posición del tooltip basado en las medidas del elemento destacado, el tamaño de la pantalla y la posición preferida. */
+export declare const calculateTooltipPosition: (measure: ElementMeasure, screenWidth: number, screenHeight: number, preferred?: TooltipPosition, tooltipHeight?: number) => TooltipCoords;
+//# sourceMappingURL=tour-tooltip-position.d.ts.map

package/dist/utils/tour-tooltip-position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour-tooltip-position.d.ts","sourceRoot":"","sources":["../../utils/tour-tooltip-position.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAKhE,MAAM,WAAW,aAAa;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,sIAAsI;AACtI,eAAO,MAAM,wBAAwB,GACjC,SAAS,cAAc,EACvB,aAAa,MAAM,EACnB,cAAc,MAAM,EACpB,YAAW,eAAwB,EACnC,gBAAe,MAAU,KAC1B,aAgBF,CAAC"}

package/dist/utils/tour-tooltip-position.js

@@ -0,0 +1,16 @@
+const TOOLTIP_WIDTH = 260;
+const TOOLTIP_MARGIN = 10;
+/** Calcula la posición del tooltip basado en las medidas del elemento destacado, el tamaño de la pantalla y la posición preferida. */
+export const calculateTooltipPosition = (measure, screenWidth, screenHeight, preferred = 'auto', tooltipHeight = 0) => {
+    const spaceBelow = screenHeight - (measure.y + measure.height);
+    const spaceAbove = measure.y;
+    const position = preferred !== 'auto' ? preferred
+        : spaceBelow >= tooltipHeight + TOOLTIP_MARGIN ? 'bottom'
+            : spaceAbove >= tooltipHeight + TOOLTIP_MARGIN ? 'top'
+                : 'bottom';
+    const clampedLeft = Math.max(16, Math.min(measure.x, screenWidth - TOOLTIP_WIDTH - 16));
+    if (position === 'bottom') {
+        return { top: measure.y + measure.height + TOOLTIP_MARGIN, left: clampedLeft };
+    }
+    return { top: measure.y - tooltipHeight - TOOLTIP_MARGIN, left: clampedLeft };
+};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "uo287827-react-native-tour-component",
+  "version": "1.0.0",
+  "description": "Componente de tour/onboarding interactivo para React Native",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "keywords": [
+    "react-native",
+    "tour",
+    "onboarding",
+    "tutorial",
+    "guide",
+    "walkthrough"
+  ],
+  "author": "Raúl Mera Soto <UO287827@uniovi.es>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0",
+    "react-native-svg": ">=13.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepare": "npm run build"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "devDependencies": {
+    "typescript": "^5.3.0",
+    "@types/react": "^19.2.14",
+    "@types/react-native": "^0.73.0"
+  }
+}