phx-react 1.3.1837 → 1.3.1838

package/dist/esm/components/Onboarding/contexts/onboarding-context.d.ts

@@ -0,0 +1,63 @@
+import 'driver.js/dist/driver.css';
+import React from 'react';
+export interface IPHXOnboardingStep {
+    element: string;
+    popover: {
+        title: string;
+        description: string;
+        side?: 'left' | 'right' | 'top' | 'bottom';
+        align?: 'start' | 'center' | 'end';
+    };
+}
+export interface IPHXOnboardingSlideStep {
+    id: number;
+    title?: string;
+    description?: string;
+    content?: string;
+    image: string;
+}
+/**
+ * Một flow onboarding có thể có slides, tour steps, hoặc cả hai.
+ * - Chỉ slides: hiện modal slides, không có tour
+ * - Chỉ tour: chạy driver.js tour trực tiếp
+ * - Cả hai: hiện modal slides → nút "Bắt đầu Tour" → chạy tour
+ */
+export interface IPHXOnboardingFlow {
+    name: string;
+    slides?: Array<IPHXOnboardingSlideStep>;
+    steps?: Array<IPHXOnboardingStep>;
+}
+export interface IPHXOnboardingStatus {
+    slidesCompleted: boolean;
+    toursCompleted: boolean;
+}
+export interface IPHXOnboardingContextType {
+    currentFlow: string | null;
+    isRunning: boolean;
+    registerFlow(flow: IPHXOnboardingFlow): void;
+    startFlow(flowName: string): void;
+    endFlow(): void;
+    nextStep(): void;
+    previousStep(): void;
+    skipFlow(): void;
+    resetStatusOnboarding(flowName: string): void;
+    isSlidesOpen: boolean;
+    closeSlides(): void;
+    /**
+     * Lưu trạng thái hoàn thành của flow vào localStorage.
+     * Mặc định trạng thái chỉ được giữ trong bộ nhớ (in-memory).
+     * Gọi hàm này khi muốn persist để không hiện lại lần sau.
+     */
+    persistFlowStatus(flowName: string): void;
+    /**
+     * Đọc trạng thái hiện tại của flow từ bộ nhớ.
+     */
+    getFlowStatus(flowName: string): IPHXOnboardingStatus;
+}
+export declare const PHXOnboardingProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+/**
+ * Hook để sử dụng context
+ */
+export declare const usePHXOnboarding: () => IPHXOnboardingContextType;

package/dist/esm/components/Onboarding/contexts/onboarding-context.js

@@ -0,0 +1,276 @@
+'use client';
+import { driver } from 'driver.js';
+import 'driver.js/dist/driver.css';
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { PHXOnboardingModal } from '../modal-slides/modal-slides';
+import { styleOnboarding } from './style';
+const ONBOARDING_STATUS_KEY = 'phx-onboarding-status';
+const PHXOnboardingContext = createContext(undefined);
+export const PHXOnboardingProvider = ({ children }) => {
+    const [currentFlow, setCurrentFlow] = useState(null);
+    const [isRunning, setIsRunning] = useState(false);
+    const [flows, setFlows] = useState(new Map());
+    const [driverInstance, setDriverInstance] = useState(null);
+    // Modal slides state
+    const [isSlidesOpen, setIsSlidesOpen] = useState(false);
+    const [activeSlides, setActiveSlides] = useState([]);
+    const [hasTours, setHasTours] = useState(false);
+    const [pendingTourFlowName, setPendingTourFlowName] = useState(null);
+    // In-memory status only — không tự động ghi localStorage
+    const [onboardingStatus, setOnboardingStatus] = useState({});
+    // Đọc trạng thái đã persist từ localStorage khi khởi động
+    useEffect(() => {
+        const saved = localStorage.getItem(ONBOARDING_STATUS_KEY);
+        if (saved) {
+            try {
+                setOnboardingStatus(JSON.parse(saved));
+            }
+            catch (_a) {
+                // ignore parse error
+            }
+        }
+    }, []);
+    /**
+     * Cập nhật trạng thái trong bộ nhớ (KHÔNG ghi localStorage)
+     * @param flowName Tên flow
+     * @param patch Trạng thái muốn cập nhật
+     */
+    const updateStatus = (flowName, patch) => {
+        setOnboardingStatus((prev) => {
+            var _a;
+            const current = (_a = prev[flowName]) !== null && _a !== void 0 ? _a : {
+                slidesCompleted: false,
+                toursCompleted: false,
+            };
+            return {
+                ...prev,
+                [flowName]: { ...current, ...patch },
+            };
+        });
+    };
+    /** Lưu trạng thái của flow vào localStorage
+     * @param flowName Tên flow
+     */
+    const persistFlowStatus = (flowName) => {
+        setOnboardingStatus((prev) => {
+            var _a;
+            const status = (_a = prev[flowName]) !== null && _a !== void 0 ? _a : {
+                slidesCompleted: false,
+                toursCompleted: false,
+            };
+            const updated = { ...prev, [flowName]: status };
+            localStorage.setItem(ONBOARDING_STATUS_KEY, JSON.stringify(updated));
+            return updated;
+        });
+    };
+    /**
+     * Lấy trạng thái của flow
+     * @param flowName Tên flow
+     */
+    const getFlowStatus = (flowName) => {
+        var _a;
+        return (_a = onboardingStatus[flowName]) !== null && _a !== void 0 ? _a : {
+            slidesCompleted: false,
+            toursCompleted: false,
+        };
+    };
+    /**
+     * Đăng ký flow
+     * @param flow Flow cần đăng ký
+     */
+    const registerFlow = (flow) => {
+        setFlows((prev) => new Map(prev).set(flow.name, flow));
+    };
+    /**
+     * Chạy tour
+     * @param flowName Tên flow
+     * @param flow Flow cần chạy tour
+     */
+    const runTour = (flowName, flow) => {
+        var _a;
+        if (!((_a = flow.steps) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        if (driverInstance) {
+            driverInstance.destroy();
+        }
+        /**
+         * Tạo driver instance
+         */
+        const newDriver = driver({
+            showProgress: true,
+            showButtons: ['next', 'previous', 'close'],
+            nextBtnText: 'Tiếp theo',
+            prevBtnText: 'Quay lại',
+            doneBtnText: 'Hoàn tất',
+            stageRadius: 12,
+            allowClose: true,
+            onDestroyed: () => {
+                setDriverInstance(null);
+                setCurrentFlow(null);
+                setIsRunning(false);
+                // Chỉ cập nhật in-memory, không tự động persist
+                updateStatus(flowName, { toursCompleted: true });
+            },
+        });
+        newDriver.setSteps(flow.steps.map((step) => {
+            var _a, _b;
+            return ({
+                element: step.element,
+                popover: {
+                    title: step.popover.title,
+                    description: step.popover.description,
+                    side: (_a = step.popover.side) !== null && _a !== void 0 ? _a : 'bottom',
+                    align: (_b = step.popover.align) !== null && _b !== void 0 ? _b : 'center',
+                },
+            });
+        }));
+        setDriverInstance(newDriver);
+        setCurrentFlow(flowName);
+        setIsRunning(true);
+        newDriver.drive();
+    };
+    /**
+     * Bắt đầu flow
+     * @param flowName Tên flow
+     */
+    const startFlow = (flowName) => {
+        var _a, _b;
+        const flow = flows.get(flowName);
+        if (!flow) {
+            console.warn(`[Onboarding] Flow "${flowName}" not registered`);
+            return;
+        }
+        const hasSlides = Boolean((_a = flow.slides) === null || _a === void 0 ? void 0 : _a.length);
+        const hasTourSteps = Boolean((_b = flow.steps) === null || _b === void 0 ? void 0 : _b.length);
+        const status = getFlowStatus(flowName);
+        // Case 1: chỉ có tour (không có slides)
+        if (!hasSlides && hasTourSteps) {
+            runTour(flowName, flow);
+            return;
+        }
+        // Case 2: chỉ có slides (không có tour)
+        if (hasSlides && !hasTourSteps) {
+            if (!status.slidesCompleted) {
+                setActiveSlides(flow.slides);
+                setHasTours(false);
+                setPendingTourFlowName(null);
+                setCurrentFlow(flowName);
+                setIsSlidesOpen(true);
+            }
+            return;
+        }
+        // Case 3: cả slides lẫn tour
+        if (hasSlides && hasTourSteps) {
+            if (!status.slidesCompleted) {
+                setActiveSlides(flow.slides);
+                setHasTours(true);
+                setPendingTourFlowName(flowName);
+                setCurrentFlow(flowName);
+                setIsSlidesOpen(true);
+            }
+            else if (!status.toursCompleted) {
+                runTour(flowName, flow);
+            }
+            return;
+        }
+        console.warn(`[Onboarding] Flow "${flowName}" has no slides or steps`);
+    };
+    /**
+     * Cập nhật trạng thái của flow
+     */
+    const updateStatusFlow = () => {
+        if (currentFlow) {
+            // Chỉ cập nhật in-memory, không tự động persist
+            updateStatus(currentFlow, { slidesCompleted: true });
+        }
+    };
+    /**
+     * Đóng slides
+     */
+    const closeSlides = () => {
+        setIsSlidesOpen(false);
+        updateStatusFlow();
+    };
+    /**
+     * Bắt đầu tour từ slides
+     */
+    const startTourFromSlides = () => {
+        setIsSlidesOpen(false);
+        updateStatusFlow();
+        if (pendingTourFlowName) {
+            const flow = flows.get(pendingTourFlowName);
+            if (flow) {
+                runTour(pendingTourFlowName, flow);
+            }
+        }
+    };
+    /**
+     * Kết thúc flow
+     */
+    const endFlow = () => {
+        if (driverInstance) {
+            driverInstance.destroy();
+            setDriverInstance(null);
+        }
+        setIsRunning(false);
+        setCurrentFlow(null);
+    };
+    /**
+     * Chuyển đến bước tiếp theo
+     */
+    const nextStep = () => {
+        driverInstance === null || driverInstance === void 0 ? void 0 : driverInstance.moveNext();
+    };
+    /**
+     * Chuyển đến bước trước đó
+     */
+    const previousStep = () => {
+        driverInstance === null || driverInstance === void 0 ? void 0 : driverInstance.movePrevious();
+    };
+    /**
+     * Bỏ qua flow
+     */
+    const skipFlow = () => {
+        endFlow();
+    };
+    /**
+     * Reset trạng thái của flow
+     * @param flowName Tên flow
+     */
+    const resetStatusOnboarding = (flowName) => {
+        updateStatus(flowName, {
+            slidesCompleted: false,
+            toursCompleted: false,
+        });
+    };
+    const value = {
+        currentFlow,
+        isRunning,
+        registerFlow,
+        startFlow,
+        endFlow,
+        nextStep,
+        previousStep,
+        skipFlow,
+        isSlidesOpen,
+        closeSlides,
+        persistFlowStatus,
+        getFlowStatus,
+        resetStatusOnboarding,
+    };
+    return (React.createElement(PHXOnboardingContext.Provider, { value: value },
+        React.createElement("style", { dangerouslySetInnerHTML: { __html: styleOnboarding } }),
+        children,
+        React.createElement(PHXOnboardingModal, { hasTours: hasTours, onHide: closeSlides, onStartTour: startTourFromSlides, show: isSlidesOpen, slides: activeSlides })));
+};
+/**
+ * Hook để sử dụng context
+ */
+export const usePHXOnboarding = () => {
+    const context = useContext(PHXOnboardingContext);
+    if (!context) {
+        throw new Error('useOnboarding must be used within OnboardingProvider');
+    }
+    return context;
+};
+//# sourceMappingURL=onboarding-context.js.map

package/dist/esm/components/Onboarding/contexts/onboarding-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"onboarding-context.js","sourceRoot":"","sources":["../../../../../src/components/Onboarding/contexts/onboarding-context.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Onboarding/contexts/style.d.ts

@@ -0,0 +1 @@
+export declare const styleOnboarding = "\n.driver-popover-footer button {\n  all: unset;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 6px 12px;\n  font-weight: 400 !important;\n  text-decoration: none;\n  text-shadow: 1px 1px 0 #fff;\n  background-color: #fff;\n  color: rgb(3 7 18 / 1);\n  font-size: 14px;\n  line-height: normal;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI,\n    Roboto, Helvetica Neue, sans-serif;\n  cursor: pointer;\n  outline: 0;\n  border: 1px solid rgb(209 213 219 / 1);\n  border-radius: 8px;\n  transition-duration: 0.3s;\n  transition-property: color, background-color, border-color,\n    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n    backdrop-filter;\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.driver-popover-footer button:active {\n  --tw-shadow: 0rem 0.125rem 0.1rem 0rem #0004 inset;\n  --tw-shadow-colored: inset 0rem 0.125rem 0.1rem 0rem var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n  padding-top: 0.3rem;\n  padding-bottom: 0.2rem;\n  background-color: rgb(229 231 235 / 1);\n  border-bottom-color: rgb(209 213 219 / 1);\n  transition-timing-function: cubic-bezier(0.4, 0.36, 0, 1);\n}\n.driver-popover {\n  font-weight: 400 !important;\n  font-size: 14px;\n  line-height: normal;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI,\n    Roboto, Helvetica Neue, sans-serif;\n  border-radius: 12px;\n  color: #fff;\n  background-color: rgb(0 0 0 / 1);\n}\n\n.driver-popover-title {\n  font-family: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI,\n    Roboto, Helvetica Neue, sans-serif;\n}\n.driver-popover .driver-popover-arrow-side-left.driver-popover-arrow {\n  border-left-color: rgb(0 0 0 / 1);\n}\n\n.driver-popover .driver-popover-arrow-side-right.driver-popover-arrow {\n  border-right-color: rgb(0 0 0 / 1);\n}\n\n.driver-popover .driver-popover-arrow-side-top.driver-popover-arrow {\n  border-top-color: rgb(0 0 0 / 1);\n}\n\n.driver-popover .driver-popover-arrow-side-bottom.driver-popover-arrow {\n  border-bottom-color: rgb(0 0 0 / 1);\n}\n";

package/dist/esm/components/Onboarding/contexts/style.js

@@ -0,0 +1,74 @@
+export const styleOnboarding = `
+.driver-popover-footer button {
+  all: unset;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 6px 12px;
+  font-weight: 400 !important;
+  text-decoration: none;
+  text-shadow: 1px 1px 0 #fff;
+  background-color: #fff;
+  color: rgb(3 7 18 / 1);
+  font-size: 14px;
+  line-height: normal;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI,
+    Roboto, Helvetica Neue, sans-serif;
+  cursor: pointer;
+  outline: 0;
+  border: 1px solid rgb(209 213 219 / 1);
+  border-radius: 8px;
+  transition-duration: 0.3s;
+  transition-property: color, background-color, border-color,
+    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
+    backdrop-filter;
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.driver-popover-footer button:active {
+  --tw-shadow: 0rem 0.125rem 0.1rem 0rem #0004 inset;
+  --tw-shadow-colored: inset 0rem 0.125rem 0.1rem 0rem var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  padding-top: 0.3rem;
+  padding-bottom: 0.2rem;
+  background-color: rgb(229 231 235 / 1);
+  border-bottom-color: rgb(209 213 219 / 1);
+  transition-timing-function: cubic-bezier(0.4, 0.36, 0, 1);
+}
+.driver-popover {
+  font-weight: 400 !important;
+  font-size: 14px;
+  line-height: normal;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI,
+    Roboto, Helvetica Neue, sans-serif;
+  border-radius: 12px;
+  color: #fff;
+  background-color: rgb(0 0 0 / 1);
+}
+
+.driver-popover-title {
+  font-family: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI,
+    Roboto, Helvetica Neue, sans-serif;
+}
+.driver-popover .driver-popover-arrow-side-left.driver-popover-arrow {
+  border-left-color: rgb(0 0 0 / 1);
+}
+
+.driver-popover .driver-popover-arrow-side-right.driver-popover-arrow {
+  border-right-color: rgb(0 0 0 / 1);
+}
+
+.driver-popover .driver-popover-arrow-side-top.driver-popover-arrow {
+  border-top-color: rgb(0 0 0 / 1);
+}
+
+.driver-popover .driver-popover-arrow-side-bottom.driver-popover-arrow {
+  border-bottom-color: rgb(0 0 0 / 1);
+}
+`;
+//# sourceMappingURL=style.js.map

package/dist/esm/components/Onboarding/contexts/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../../../src/components/Onboarding/contexts/style.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwE9B,CAAA"}

package/dist/esm/components/Onboarding/hooks/use-onboarding-init.d.ts

@@ -0,0 +1,7 @@
+import { IPHXOnboardingFlow } from '../contexts/onboarding-context';
+/**
+ * Đăng ký danh sách flows vào OnboardingProvider.
+ * Gọi hook này một lần trong component gốc của mỗi module.
+ * @param flows Danh sách flows cần đăng ký
+ */
+export declare const usePHXOnboardingInit: (flows: Array<IPHXOnboardingFlow>) => void;

package/dist/esm/components/Onboarding/hooks/use-onboarding-init.js

@@ -0,0 +1,15 @@
+'use client';
+import { useEffect } from 'react';
+import { usePHXOnboarding } from '../contexts/onboarding-context';
+/**
+ * Đăng ký danh sách flows vào OnboardingProvider.
+ * Gọi hook này một lần trong component gốc của mỗi module.
+ * @param flows Danh sách flows cần đăng ký
+ */
+export const usePHXOnboardingInit = (flows) => {
+    const { registerFlow } = usePHXOnboarding();
+    useEffect(() => {
+        flows.map((flow) => registerFlow(flow));
+    }, [registerFlow]);
+};
+//# sourceMappingURL=use-onboarding-init.js.map

package/dist/esm/components/Onboarding/hooks/use-onboarding-init.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-onboarding-init.js","sourceRoot":"","sources":["../../../../../src/components/Onboarding/hooks/use-onboarding-init.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAsB,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AAErF;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAE,EAAE;IACvE,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAA;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAA;IACzC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;AACpB,CAAC,CAAA"}

package/dist/esm/components/Onboarding/index.d.ts

@@ -0,0 +1,3 @@
+export * from './contexts/onboarding-context';
+export * from './hooks/use-onboarding-init';
+export * from './modal-slides/modal-slides';

package/dist/esm/components/Onboarding/index.js

@@ -0,0 +1,4 @@
+export * from './contexts/onboarding-context';
+export * from './hooks/use-onboarding-init';
+export * from './modal-slides/modal-slides';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Onboarding/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Onboarding/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA"}

package/dist/esm/components/Onboarding/modal-slides/modal-slides.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IPHXOnboardingSlideStep } from '../contexts/onboarding-context';
+export interface PHXOnboardingModalProps {
+    show: boolean;
+    slides: Array<IPHXOnboardingSlideStep>;
+    hasTours: boolean;
+    onHide(): void;
+    onStartTour(): void;
+}
+export declare const PHXOnboardingModal: React.FC<PHXOnboardingModalProps>;

package/dist/esm/components/Onboarding/modal-slides/modal-slides.js

@@ -0,0 +1,54 @@
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+import { PHXSlider } from '../../Slider';
+import { PHXBox } from '../../Box';
+import { PHXHorizontalStack } from '../../HorizontalStack';
+import { PHXButton } from '../../Button';
+import { PHXModal } from '../../Modal';
+export const PHXOnboardingModal = ({ hasTours, onHide, onStartTour, show, slides, }) => {
+    const sliderRef = useRef(null);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    // Derive from state — triggers re-render when index changes
+    const isFirstSlide = currentIndex === 0;
+    const isLastSlide = currentIndex === slides.length - 1;
+    /**
+     *  Goes to previous slide
+     * @returns
+     */
+    const goToPrevious = () => {
+        var _a;
+        if (isFirstSlide)
+            return;
+        (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.prev();
+    };
+    /**
+     * Goes to next slide
+     * @returns
+     */
+    const goToNext = () => {
+        var _a;
+        if (isLastSlide)
+            return;
+        (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.next();
+    };
+    /**
+     * Reset slider to first slide when modal opens
+     * @returns
+     */
+    useEffect(() => {
+        var _a;
+        if (show) {
+            (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.goTo(0);
+            setCurrentIndex(0);
+        }
+    }, [show]);
+    const customFooterComponent = (React.createElement(PHXBox, { fullWidth: true, p: 'snappy' },
+        React.createElement(PHXHorizontalStack, { fullWidth: true, items: 'center', justify: 'between' },
+            isFirstSlide ? (React.createElement("span", null)) : (React.createElement(PHXButton, { onClick: goToPrevious, secondary: true }, "Quay l\u1EA1i")),
+            React.createElement(PHXHorizontalStack, { gapX: 'tight', items: 'center' },
+                React.createElement(PHXButton, { onClick: onHide, secondary: true }, "B\u1ECF qua"),
+                isLastSlide ? (hasTours ? (React.createElement(PHXButton, { onClick: onStartTour, primary: true }, "B\u1EAFt \u0111\u1EA7u Tour")) : (React.createElement(PHXButton, { onClick: onHide, primary: true }, "Ho\u00E0n t\u1EA5t"))) : (React.createElement(PHXButton, { onClick: goToNext, primary: true }, "Ti\u1EBFp theo"))))));
+    return (React.createElement(PHXModal, { customFooter: customFooterComponent, inCard: false, onHide: onHide, show: show, size: 'large-plus', title: 'H\u01B0\u1EDBng d\u1EABn s\u1EED d\u1EE5ng' },
+        React.createElement(PHXSlider, { ref: sliderRef, enableNavigate: false, gap: 0, onIndexChange: setCurrentIndex, perView: 1 }, slides.map((slideItem) => (React.createElement("img", { key: slideItem.id, alt: slideItem.title, src: slideItem.image }))))));
+};
+//# sourceMappingURL=modal-slides.js.map

package/dist/esm/components/Onboarding/modal-slides/modal-slides.js.map

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

package/dist/esm/components/Onboarding/onbroading-demo.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IPHXOnboardingFlow } from './contexts/onboarding-context';
+export declare const slidesOnlyFlow: IPHXOnboardingFlow;
+export declare const tourOnlyFlow: IPHXOnboardingFlow;
+export declare const slidesAndTourFlow: IPHXOnboardingFlow;
+/**
+ * Demo cách sử dụng Onboarding
+ */
+export default function OnboardingDemo(): React.JSX.Element;