@glowhop/react-tour 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @glowhop/react-tour
+
+## 1.0.0
+
+### Major Changes
+
+- e6da5bf: GlowTour.js V.1.0.0 release
+
+### Patch Changes
+
+- Updated dependencies [e6da5bf]
+  - @glowhop/core-tour@1.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 Glowhop
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,25 @@
+# @glowhop/react-tour
+
+ESM-only React 18/19 adapter with `useSyncExternalStore`-backed state. Content is React content. See the [Core guide](https://github.com/Glowhop/GlowTour.js/tree/main/packages/core) for workflow options and actions.
+
+Compatibility: React 18 and 19 (`^18.0.0 || ^19.0.0`). SSR: `DefaultTour` renders through `react-dom/server` and package imports are DOM-free; hydration is verified at package level and in a production Next.js app. Full contract: [compatibility](https://github.com/Glowhop/GlowTour.js/blob/main/docs/compatibility.md).
+
+<!-- glow-tour:snippet react-quick-start -->
+```tsx
+import { createRoot } from "react-dom/client";
+import "@glowhop/styles-tour/default.css";
+import { DefaultTour, createGlowTour } from "@glowhop/react-tour";
+
+const tour = createGlowTour();
+const workflow = tour.create("intro").step({ id: "welcome", target: "#welcome", title: "Welcome", content: "Hello." }).build();
+createRoot(document.getElementById("app")!).render(<><button id="welcome">Welcome</button><button type="button" onClick={() => void tour.run(workflow)}>Start tour</button><DefaultTour tour={tour} /></>);
+```
+
+<!-- glow-tour:snippet react-advanced -->
+```tsx
+import { GlowTour, createGlowTour } from "@glowhop/react-tour";
+const tour = createGlowTour(); const workflow = tour.create("custom").step({ id: "welcome", target: "#welcome", title: "Welcome", content: "Hello." }).build();
+export function CustomTour() { return <><button id="welcome">Target</button><button type="button" onClick={() => void tour.run(workflow)}>Start</button><GlowTour.Root tour={tour}><GlowTour.Overlay /><GlowTour.Pointer /><GlowTour.Popover><GlowTour.Header /><GlowTour.Content /><GlowTour.Footer><GlowTour.CancelTrigger /><GlowTour.AdvanceTrigger /></GlowTour.Footer></GlowTour.Popover></GlowTour.Root></>; }
+```
+
+Compose `GlowTour.Root`, `Overlay`, `Pointer`, `Popover`, `Header`, `Content`, `Footer`, and trigger primitives. `DefaultTour` is the complete default composition; `useTour()` exposes native reactive state. Static/dynamic targets, placement, interaction, scroll, callbacks, actions/events, cancellation, and cleanup follow Core.

package/components/default-tour.d.ts

@@ -0,0 +1,16 @@
+import type { GlowTour as CoreGlowTour } from "@glowhop/core-tour";
+import type { ReactTourContent } from "../glow-tour";
+/** Props for the DefaultTour component. */
+export interface DefaultTourProps {
+    /** Optional prefix for internal element IDs. */
+    readonly idPrefix?: string;
+    /** The tour controller instance. */
+    readonly tour: CoreGlowTour<ReactTourContent>;
+}
+/**
+ * A default tour UI component that includes overlay, pointer, popover with header, content, and footer.
+ * Provides all standard tour controls (previous, advance, cancel buttons).
+ * @param props The component props.
+ * @returns The rendered tour UI.
+ */
+export declare function DefaultTour({ idPrefix, tour }: DefaultTourProps): import("react").JSX.Element;

package/components/tour-components.d.ts

@@ -0,0 +1,125 @@
+import type { GlowTour as CoreGlowTour, TourState } from "@glowhop/core-tour";
+import * as React from "react";
+import type { ReactTourContent } from "../glow-tour";
+import { DefaultTour } from "./default-tour";
+type Tour = CoreGlowTour<ReactTourContent>;
+type RootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "id" | "ref"> & {
+    children?: React.ReactNode;
+    idPrefix?: string;
+    tour: Tour;
+};
+type ElementProps = Omit<React.HTMLAttributes<HTMLElement>, "id" | "ref"> & {
+    as?: React.ElementType;
+};
+type ContentProps = Omit<React.HTMLAttributes<HTMLElement>, "children" | "id">;
+type OverlayProps = Omit<React.SVGAttributes<SVGSVGElement>, "ref">;
+/** Content displayed in the pointer indicator for each direction. */
+export interface PointerDirectionContent {
+    readonly top?: React.ReactNode;
+    readonly bottom?: React.ReactNode;
+    readonly left?: React.ReactNode;
+    readonly right?: React.ReactNode;
+}
+type PointerProps = Omit<React.HTMLAttributes<HTMLElement>, "aria-hidden" | "children" | "ref"> & {
+    as?: React.ElementType;
+    directionContent?: PointerDirectionContent;
+};
+type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type"> & {
+    children?: React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>> | ((props: React.ButtonHTMLAttributes<HTMLButtonElement>) => React.ReactElement);
+};
+type BackTriggerProps = ButtonProps & {
+    backLabel?: string;
+};
+type AdvanceTriggerProps = ButtonProps & {
+    finishLabel?: string;
+    advanceLabel?: string;
+};
+type CancelTriggerProps = ButtonProps;
+/**
+ * Root component that must wrap all other tour components.
+ *
+ * Manages tour initialization and connects the tour instance to the DOM.
+ * All other tour components (Overlay, Pointer, Popover, etc.) must be rendered inside this root.
+ * @param props Component props including the tour instance and optional ID prefix.
+ * @returns The root provider component.
+ */
+export declare function Root({ children, idPrefix, tour, ...props }: RootProps): React.JSX.Element;
+/**
+ * The popover container that displays step content.
+ *
+ * Renders as a `<section>` by default, but can be customized via the `as` prop.
+ * Should contain Header, Content, and Footer components.
+ * @param props HTML attributes and the `as` prop for customizing the container element.
+ * @returns The popover container.
+ */
+export declare function Popover({ as: Component, style, ...props }: ElementProps): React.JSX.Element;
+/**
+ * Displays the title of the current step.
+ * @param props HTML attributes.
+ * @returns The step title header.
+ */
+export declare function Header(props: ContentProps): React.JSX.Element;
+/**
+ * Displays the body content of the current step.
+ * @param props HTML attributes.
+ * @returns The step content area.
+ */
+export declare function Content(props: ContentProps): React.JSX.Element;
+/**
+ * The footer section of the popover, typically containing navigation buttons.
+ * Automatically hidden if configured via `popover.hideFooter`.
+ * @param props HTML attributes and children.
+ * @returns The footer container, or null if hidden.
+ */
+export declare function Footer({ children, ...props }: ElementProps): React.JSX.Element | null;
+export declare function Overlay({ children, style, viewBox, ...props }: OverlayProps): React.JSX.Element;
+/**
+ * A pointer/indicator that visually highlights the target element.
+ * Displays directional content (emoji or custom content) based on pointer position.
+ * Renders as a `<div>` by default, but can be customized via the `as` prop.
+ * @param props HTML attributes, the `as` prop for customizing the container, and `directionContent`.
+ * @returns The pointer indicator element.
+ */
+export declare function Pointer({ as: Component, directionContent, style, ...props }: PointerProps): React.JSX.Element;
+/**
+ * Button that navigates to the previous step.
+ * Automatically hidden or disabled based on tour state.
+ * @param props Button props and an optional `backLabel` for the button text.
+ * @returns The back button, or null if hidden.
+ */
+export declare function BackTrigger({ backLabel, ...props }: BackTriggerProps): React.JSX.Element | null;
+/**
+ * Button that navigates to the next step, or finishes the tour on the last step.
+ * Automatically hidden or disabled based on tour state.
+ * @param props Button props, an optional `advanceLabel` for non-final steps, and `finishLabel` for the final step.
+ * @returns The advance button, or null if hidden.
+ */
+export declare function AdvanceTrigger({ finishLabel, advanceLabel, ...props }: AdvanceTriggerProps): React.JSX.Element | null;
+/**
+ * Button that cancels the tour.
+ * Automatically hidden if the tour is not cancellable.
+ * @param props Button props.
+ * @returns The cancel button, or null if the tour cannot be cancelled.
+ */
+export declare function CancelTrigger(props: CancelTriggerProps): React.JSX.Element | null;
+/**
+ * React hook that returns the current tour state.
+ *
+ * Must be called inside a component rendered within `<GlowTour.Root>`.
+ * @returns The current tour state.
+ */
+export declare function useTour(): TourState<ReactTourContent>;
+export declare const GlowTour: {
+    Default: typeof DefaultTour;
+    Root: typeof Root;
+    Popover: typeof Popover;
+    Header: typeof Header;
+    Content: typeof Content;
+    Footer: typeof Footer;
+    Overlay: typeof Overlay;
+    Pointer: typeof Pointer;
+    BackTrigger: typeof BackTrigger;
+    AdvanceTrigger: typeof AdvanceTrigger;
+    CancelTrigger: typeof CancelTrigger;
+};
+export {};

package/config.d.ts

@@ -0,0 +1,37 @@
+import type { BuiltinAction, ConfigValidationIssue, EventHandlerConfig as CoreEventHandlerConfig, LifecycleActionRef as CoreLifecycleActionRef, StepActionRef as CoreStepActionRef, StepConfig as CoreStepConfig, TransitionActionRef as CoreTransitionActionRef, WorkflowConfig as CoreWorkflowConfig, WorkflowDefinitionFromConfig as CoreWorkflowDefinitionFromConfig, CreateWorkflowFromConfigOptions, ValidateWorkflowConfigOptions } from "@glowhop/core-tour/config";
+import { ConfigValidationError } from "@glowhop/core-tour/config";
+import type { ReactTourContent } from "./glow-tour";
+export type { BuiltinAction, ConfigValidationIssue, CreateWorkflowFromConfigOptions, ValidateWorkflowConfigOptions, };
+export { ConfigValidationError };
+/** React workflow config: `WorkflowConfig` pre-bound to `ReactTourContent`. */
+export type WorkflowConfig = CoreWorkflowConfig<ReactTourContent>;
+/** React step config: `StepConfig` pre-bound to `ReactTourContent`. */
+export type StepConfig = CoreStepConfig<ReactTourContent>;
+/** React event handler config: `EventHandlerConfig` pre-bound to `ReactTourContent`. */
+export type EventHandlerConfig = CoreEventHandlerConfig<ReactTourContent>;
+/** React step action reference: `StepActionRef` pre-bound to `ReactTourContent`. */
+export type StepActionRef = CoreStepActionRef<ReactTourContent>;
+/** React transition action reference: `TransitionActionRef` pre-bound to `ReactTourContent`. */
+export type TransitionActionRef = CoreTransitionActionRef<ReactTourContent>;
+/** React lifecycle action reference: `LifecycleActionRef` pre-bound to `ReactTourContent`. */
+export type LifecycleActionRef = CoreLifecycleActionRef<ReactTourContent>;
+/** React workflow definition produced from config, pre-bound to `ReactTourContent`. */
+export type WorkflowDefinitionFromConfig = CoreWorkflowDefinitionFromConfig<ReactTourContent>;
+/**
+ * Builds a React `WorkflowDefinition` from a JSON-serializable config, pre-bound to
+ * `ReactTourContent` so the result is accepted by `createGlowTour().run(...)` with no generic
+ * and no cast.
+ * @param config The parsed JSON (or equivalent plain object) to build from.
+ * @param options Options; see `CreateWorkflowFromConfigOptions`.
+ * @throws {ConfigValidationError} When the config is invalid.
+ * @returns A frozen `WorkflowDefinition` with `.source` attached.
+ */
+export declare function createWorkflowFromConfig(config: unknown, options?: CreateWorkflowFromConfigOptions): WorkflowDefinitionFromConfig;
+/**
+ * Validates and narrows an unknown value to a React `WorkflowConfig`.
+ * @param config The parsed JSON (or equivalent plain object) to validate.
+ * @param options Validation options; see `ValidateWorkflowConfigOptions`.
+ * @throws {ConfigValidationError} When one or more issues are found.
+ * @returns The same value, narrowed to `WorkflowConfig`.
+ */
+export declare function validateWorkflowConfig(config: unknown, options?: ValidateWorkflowConfigOptions): WorkflowConfig;

package/config.js

@@ -0,0 +1,17 @@
+// packages/react/src/config.ts
+import {
+  ConfigValidationError,
+  createWorkflowFromConfig as createCoreWorkflowFromConfig,
+  validateWorkflowConfig as validateCoreWorkflowConfig
+} from "@glowhop/core-tour/config";
+function createWorkflowFromConfig(config, options = {}) {
+  return createCoreWorkflowFromConfig(config, options);
+}
+function validateWorkflowConfig(config, options = {}) {
+  return validateCoreWorkflowConfig(config, options);
+}
+export {
+  validateWorkflowConfig,
+  createWorkflowFromConfig,
+  ConfigValidationError
+};

package/glow-tour.d.ts

@@ -0,0 +1,20 @@
+import type { GlowTour as CoreGlowTour, StartOptions as CoreStartOptions, StepPropsStore as CoreStepPropsStore, TourState as CoreTourState, WorkflowDefinition as CoreWorkflowDefinition, GlowTourOptions } from "@glowhop/core-tour";
+import type { ReactNode } from "react";
+/** React content type: any valid React node. */
+export type ReactTourContent = ReactNode;
+/** React tour controller instance. */
+export type Tour = CoreGlowTour<ReactTourContent>;
+/** React tour state snapshot. */
+export type TourState = CoreTourState<ReactTourContent>;
+/** React step properties store. */
+export type StepPropsStore = CoreStepPropsStore<ReactTourContent>;
+/** React workflow definition. */
+export type WorkflowDefinition = CoreWorkflowDefinition<ReactTourContent>;
+/** React tour start options. */
+export type StartOptions = CoreStartOptions<ReactTourContent>;
+/**
+ * Creates a new GlowTour.js instance for React.
+ * @param options Tour options for error handling.
+ * @returns A tour controller ready to run React workflows.
+ */
+export declare function createGlowTour(options?: GlowTourOptions): Tour;

package/index.d.ts

@@ -0,0 +1,6 @@
+export type { GlowTourOptions } from "@glowhop/core-tour";
+export { DefaultTour, type DefaultTourProps } from "./components/default-tour";
+export type { PointerDirectionContent } from "./components/tour-components";
+export { AdvanceTrigger, BackTrigger, CancelTrigger, Content, Footer, GlowTour, Header, Overlay, Pointer, Popover, Root, useTour, } from "./components/tour-components";
+export type { ReactTourContent, StartOptions, StepPropsStore, Tour, TourState, WorkflowDefinition, } from "./glow-tour";
+export { createGlowTour } from "./glow-tour";

package/index.js

@@ -0,0 +1,328 @@
+// packages/react/src/components/tour-components.tsx
+import {
+  connectGlowTourRoot,
+  OVERLAY_IDLE_ATTRIBUTES,
+  OVERLAY_IDLE_STYLE,
+  OVERLAY_PATH_IDLE_ATTRIBUTES,
+  POINTER_IDLE_STYLE,
+  POPOVER_IDLE_ATTRIBUTES,
+  POPOVER_IDLE_STYLE,
+  styleRecordToCamelCase
+} from "@glowhop/core-tour/adapter";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_POINTER_DIRECTION_CONTENT = {
+  bottom: "\uD83D\uDC47",
+  left: "\uD83D\uDC48",
+  right: "\uD83D\uDC49",
+  top: "\uD83D\uDC46"
+};
+var OVERLAY_IDLE_STYLE_REACT = styleRecordToCamelCase(OVERLAY_IDLE_STYLE);
+var POINTER_IDLE_STYLE_REACT = styleRecordToCamelCase(POINTER_IDLE_STYLE);
+var POPOVER_IDLE_STYLE_REACT = styleRecordToCamelCase(POPOVER_IDLE_STYLE);
+var TourContext = React.createContext(null);
+function useTourContext() {
+  const context = React.useContext(TourContext);
+  if (!context) {
+    throw new Error("GlowTour components must be rendered inside <GlowTour.Root tour={...}>.");
+  }
+  return context;
+}
+function useTourSnapshot(tour) {
+  return React.useSyncExternalStore(tour.state.subscribe, tour.state.get, tour.state.get);
+}
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function useEffectEvent(fn) {
+  const ref = React.useRef(fn);
+  useIsomorphicLayoutEffect(() => {
+    ref.current = fn;
+  });
+  return React.useCallback((...args) => ref.current(...args), []);
+}
+function useBoundElement(bind) {
+  const { binding } = useTourContext();
+  const [element, setElement] = React.useState(null);
+  const binder = useEffectEvent(bind);
+  React.useEffect(() => {
+    if (!binding || !element)
+      return;
+    return binder(binding, element);
+  }, [binding, element, binder]);
+  return setElement;
+}
+function useStep(snapshot) {
+  return snapshot.currentStep?.currentProps;
+}
+function Root({ children, idPrefix, tour, ...props }) {
+  const mounted = React.useRef(null);
+  const [binding, setBinding] = React.useState(null);
+  const release = React.useCallback(() => {
+    const current = mounted.current;
+    if (!current)
+      return;
+    mounted.current = null;
+    current.binding.release();
+    setBinding((active) => active === current.binding ? null : active);
+  }, []);
+  const connect = React.useCallback((element) => {
+    release();
+    if (!element)
+      return;
+    const nextBinding = connectGlowTourRoot(tour, {
+      idPrefix,
+      root: element
+    });
+    mounted.current = { binding: nextBinding, element };
+    setBinding(nextBinding);
+  }, [idPrefix, release, tour]);
+  const context = React.useMemo(() => ({ binding, tour }), [binding, tour]);
+  return jsx(TourContext.Provider, {
+    value: context,
+    children: jsx("div", {
+      ...props,
+      "data-glow-tour-root": true,
+      ref: connect,
+      children
+    })
+  });
+}
+function Popover({ as: Component = "section", style, ...props }) {
+  const { binding } = useTourContext();
+  const ref = useBoundElement((activeBinding, element) => activeBinding.bindPopover(element));
+  return jsx(Component, {
+    ...props,
+    "aria-describedby": binding?.ids.description,
+    "aria-hidden": POPOVER_IDLE_ATTRIBUTES["aria-hidden"],
+    "aria-labelledby": binding?.ids.title,
+    "data-glow-tour-popover": true,
+    id: binding?.ids.popover,
+    inert: POPOVER_IDLE_ATTRIBUTES.inert === "true",
+    ref,
+    role: "dialog",
+    style: style ?? POPOVER_IDLE_STYLE_REACT,
+    tabIndex: -1
+  });
+}
+function Header(props) {
+  const { binding, tour } = useTourContext();
+  const step = useStep(useTourSnapshot(tour));
+  return jsx("header", {
+    ...props,
+    "data-glow-tour-header": true,
+    id: binding?.ids.title,
+    children: step?.title ?? null
+  });
+}
+function Content(props) {
+  const { binding, tour } = useTourContext();
+  const step = useStep(useTourSnapshot(tour));
+  return jsx("div", {
+    ...props,
+    "aria-live": "polite",
+    "data-glow-tour-content": true,
+    id: binding?.ids.description,
+    children: step?.content ?? null
+  });
+}
+function Footer({ children, ...props }) {
+  const { tour } = useTourContext();
+  const step = useStep(useTourSnapshot(tour));
+  if (step?.popover?.hideFooter)
+    return null;
+  return jsx("footer", {
+    ...props,
+    "data-glow-tour-footer": true,
+    children
+  });
+}
+var OVERLAY_INERT_PROP = {
+  inert: OVERLAY_IDLE_ATTRIBUTES.inert === "true"
+};
+function Overlay({ children, style, viewBox = "0 0 0 0", ...props }) {
+  const ref = useBoundElement((binding, element) => binding.bindOverlay(element));
+  return jsxs("svg", {
+    ...props,
+    ...OVERLAY_INERT_PROP,
+    "aria-hidden": OVERLAY_IDLE_ATTRIBUTES["aria-hidden"],
+    "data-glow-tour-allow-interaction": OVERLAY_IDLE_ATTRIBUTES["data-glow-tour-allow-interaction"],
+    "data-glow-tour-overlay": true,
+    focusable: "false",
+    ref,
+    role: "presentation",
+    style: style ?? OVERLAY_IDLE_STYLE_REACT,
+    viewBox,
+    children: [
+      jsx("path", {
+        cursor: OVERLAY_PATH_IDLE_ATTRIBUTES.cursor,
+        "data-glow-tour-overlay-path": true,
+        fillRule: "evenodd",
+        opacity: OVERLAY_PATH_IDLE_ATTRIBUTES.opacity,
+        pointerEvents: OVERLAY_PATH_IDLE_ATTRIBUTES["pointer-events"]
+      }),
+      children
+    ]
+  });
+}
+function Pointer({
+  as: Component = "div",
+  directionContent,
+  style,
+  ...props
+}) {
+  const ref = useBoundElement((binding, element) => binding.bindPointer(element));
+  const content = { ...DEFAULT_POINTER_DIRECTION_CONTENT, ...directionContent };
+  return jsx(Component, {
+    ...props,
+    "aria-hidden": "true",
+    "data-glow-tour-pointer": true,
+    ref,
+    style: style ?? POINTER_IDLE_STYLE_REACT,
+    children: Object.keys(DEFAULT_POINTER_DIRECTION_CONTENT).map((direction) => jsx("div", {
+      "data-glow-tour-pointer-direction": direction,
+      children: content[direction]
+    }, direction))
+  });
+}
+function Trigger({
+  children,
+  capabilityDisabled,
+  label,
+  marker,
+  onClick,
+  disabled: userDisabled,
+  ...props
+}) {
+  const { binding } = useTourContext();
+  const child = typeof children === "function" ? null : children;
+  const childProps = child?.props ?? {};
+  const consumerDisabled = userDisabled === true || childProps.disabled === true;
+  const disabled = capabilityDisabled || consumerDisabled;
+  const buttonProps = {
+    ...props,
+    "aria-controls": binding?.ids.popover,
+    "aria-label": props["aria-label"] || label,
+    "aria-disabled": disabled ? "true" : "false",
+    "data-glow-tour-cancel-trigger": marker === "cancel" || undefined,
+    "data-glow-tour-consumer-disabled": consumerDisabled ? "true" : undefined,
+    "data-glow-tour-advance-trigger": marker === "advance" || undefined,
+    "data-glow-tour-previous-trigger": marker === "previous" || undefined,
+    disabled,
+    onClick: (event) => {
+      childProps.onClick?.(event);
+      onClick?.(event);
+    },
+    type: "button"
+  };
+  if (typeof children === "function")
+    return children(buttonProps);
+  if (child)
+    return React.cloneElement(child, buttonProps);
+  return jsx("button", {
+    ...buttonProps,
+    children: label
+  });
+}
+function BackTrigger({ backLabel, ...props }) {
+  const { tour } = useTourContext();
+  const snapshot = useTourSnapshot(tour);
+  const step = useStep(snapshot);
+  if (step?.popover?.hidePreviousButton)
+    return null;
+  const label = backLabel ?? "Back step";
+  return jsx(Trigger, {
+    ...props,
+    capabilityDisabled: !snapshot.canPrevious || step?.popover?.disablePreviousButton === true,
+    label,
+    marker: "previous"
+  });
+}
+function AdvanceTrigger({ finishLabel, advanceLabel, ...props }) {
+  const { tour } = useTourContext();
+  const snapshot = useTourSnapshot(tour);
+  const step = useStep(snapshot);
+  if (step?.popover?.hideAdvanceButton)
+    return null;
+  const label = snapshot.isLastStep ? finishLabel ?? "Finish tour" : advanceLabel ?? "Advance step";
+  return jsx(Trigger, {
+    ...props,
+    capabilityDisabled: !snapshot.canAdvance || step?.popover?.disableAdvanceButton === true,
+    label,
+    marker: "advance"
+  });
+}
+function CancelTrigger(props) {
+  const { tour } = useTourContext();
+  const snapshot = useTourSnapshot(tour);
+  if (!snapshot.canCancel)
+    return null;
+  return jsx(Trigger, {
+    ...props,
+    capabilityDisabled: !snapshot.canCancel,
+    label: "Skip",
+    marker: "cancel"
+  });
+}
+function useTour() {
+  const { tour } = useTourContext();
+  return useTourSnapshot(tour);
+}
+var GlowTour = {
+  Default: DefaultTour,
+  Root,
+  Popover,
+  Header,
+  Content,
+  Footer,
+  Overlay,
+  Pointer,
+  BackTrigger,
+  AdvanceTrigger,
+  CancelTrigger
+};
+
+// packages/react/src/components/default-tour.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function DefaultTour({ idPrefix, tour }) {
+  return jsxs2(Root, {
+    idPrefix,
+    tour,
+    children: [
+      jsx2(Overlay, {}),
+      jsx2(Pointer, {}),
+      jsxs2(Popover, {
+        children: [
+          jsx2(Header, {}),
+          jsx2(Content, {}),
+          jsxs2(Footer, {
+            children: [
+              jsx2(CancelTrigger, {}),
+              jsx2(BackTrigger, {}),
+              jsx2(AdvanceTrigger, {})
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+// packages/react/src/glow-tour.ts
+import { createGlowTour as createCoreGlowTour } from "@glowhop/core-tour";
+function createGlowTour(options = {}) {
+  return createCoreGlowTour(options);
+}
+export {
+  useTour,
+  createGlowTour,
+  Root,
+  Popover,
+  Pointer,
+  Overlay,
+  Header,
+  GlowTour,
+  Footer,
+  DefaultTour,
+  Content,
+  CancelTrigger,
+  BackTrigger,
+  AdvanceTrigger
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@glowhop/react-tour",
+  "version": "1.0.0",
+  "description": "React adapter for GlowTour.js.",
+  "license": "MIT",
+  "homepage": "https://github.com/Glowhop/GlowTour.js#readme",
+  "bugs": {
+    "url": "https://github.com/Glowhop/GlowTour.js/issues"
+  },
+  "keywords": [
+    "tour",
+    "guided-tour",
+    "react",
+    "onboarding"
+  ],
+  "engines": {
+    "node": ">=18.19.1"
+  },
+  "files": [
+    "**/*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Glowhop/GlowTour.js.git",
+    "directory": "packages/react"
+  },
+  "type": "module",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./config": {
+      "types": "./config.d.ts",
+      "import": "./config.js"
+    }
+  },
+  "dependencies": {
+    "@glowhop/core-tour": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "sideEffects": false
+}