phx-react 1.3.1836 → 1.3.1838

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":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE1D,OAAO,EAAE,SAAS,EAAgB,MAAM,cAAc,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAUtC,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EACpE,QAAQ,EACR,MAAM,EACN,WAAW,EACX,IAAI,EACJ,MAAM,GACP,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,MAAM,CAAe,IAAI,CAAC,CAAA;IAC5C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEnD,4DAA4D;IAC5D,MAAM,YAAY,GAAG,YAAY,KAAK,CAAC,CAAA;IACvC,MAAM,WAAW,GAAG,YAAY,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,CAAA;IAEtD;;;OAGG;IACH,MAAM,YAAY,GAAG,GAAG,EAAE;;QACxB,IAAI,YAAY;YAAE,OAAM;QACxB,MAAA,SAAS,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAA;IAC3B,CAAC,CAAA;IAED;;;OAGG;IACH,MAAM,QAAQ,GAAG,GAAG,EAAE;;QACpB,IAAI,WAAW;YAAE,OAAM;QACvB,MAAA,SAAS,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAA;IAC3B,CAAC,CAAA;IAED;;;OAGG;IACH,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,IAAI,EAAE,CAAC;YACT,MAAA,SAAS,CAAC,OAAO,0CAAE,IAAI,CAAC,CAAC,CAAC,CAAA;YAC1B,eAAe,CAAC,CAAC,CAAC,CAAA;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,MAAM,qBAAqB,GAAG,CAC5B,oBAAC,MAAM,IAAC,SAAS,QAAC,CAAC,EAAC,QAAQ;QAC1B,oBAAC,kBAAkB,IAAC,SAAS,QAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS;YAC3D,YAAY,CAAC,CAAC,CAAC,CACd,iCAAQ,CACT,CAAC,CAAC,CAAC,CACF,oBAAC,SAAS,IAAC,OAAO,EAAE,YAAY,EAAE,SAAS,0BAE/B,CACb;YAED,oBAAC,kBAAkB,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ;gBAC7C,oBAAC,SAAS,IAAC,OAAO,EAAE,MAAM,EAAE,SAAS,wBAEzB;gBAEX,WAAW,CAAC,CAAC,CAAC,CACb,QAAQ,CAAC,CAAC,CAAC,CACT,oBAAC,SAAS,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,wCAE5B,CACb,CAAC,CAAC,CAAC,CACF,oBAAC,SAAS,IAAC,OAAO,EAAE,MAAM,EAAE,OAAO,+BAEvB,CACb,CACF,CAAC,CAAC,CAAC,CACF,oBAAC,SAAS,IAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,2BAEzB,CACb,CACkB,CACF,CACd,CACV,CAAA;IAED,OAAO,CACL,oBAAC,QAAQ,IACP,YAAY,EAAE,qBAAqB,EACnC,MAAM,EAAE,KAAK,EACb,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,YAAY,EACjB,KAAK,EAAC,4CAAmB;QAEzB,oBAAC,SAAS,IAAC,GAAG,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,aAAa,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,IACjG,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CACzB,6BAAK,GAAG,EAAE,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,SAAS,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,CAAC,KAAK,GAAI,CACvE,CAAC,CACQ,CACH,CACZ,CAAA;AACH,CAAC,CAAA"}

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;

package/dist/esm/components/Onboarding/onbroading-demo.js

@@ -0,0 +1,203 @@
+'use client';
+import { PHXOnboardingProvider, usePHXOnboarding } from './contexts/onboarding-context';
+import React from 'react';
+import { usePHXOnboardingInit } from './hooks/use-onboarding-init';
+import { PHXBadge } from '../Badge';
+import { PHXTextV2 } from '../TextV2';
+import { PHXButton } from '../Button';
+import { PHXCard } from '../Card';
+import { PHXBox } from '../Box';
+import { PHXHorizontalStack } from '../HorizontalStack';
+import { PHXBlockStack } from '../BlockStack';
+const sharedSlides = [
+    {
+        id: 1,
+        image: 'https://cdn.dribbble.com/userupload/43777200/file/original-b6b996f3118cec5deba3cf770e2943f8.png?resize=1024x768&vertical=center',
+    },
+    {
+        id: 2,
+        image: 'https://cdn.dribbble.com/userupload/16613267/file/original-46564ba6e70008893ec7c252183d4376.png?resize=1024x768&vertical=center',
+    },
+    {
+        id: 3,
+        image: 'https://cdn.dribbble.com/userupload/11165677/file/original-8f6d2e9ce6891d724ff10cf478b6e1a7.png?resize=1024x763&vertical=center',
+    },
+];
+// ─── Demo Flow 1: Chỉ có Slides (không có Tour) ───────────────────────────────
+export const slidesOnlyFlow = {
+    name: 'demo-slides-only',
+    slides: sharedSlides,
+    // steps: undefined → không có tour
+};
+// ─── Demo Flow 2: Chỉ có Tour (không có Slides) ───────────────────────────────
+export const tourOnlyFlow = {
+    name: 'demo-tour-only',
+    // slides: undefined → không có slides
+    steps: [
+        {
+            element: '#tour-step-1',
+            popover: {
+                title: 'Bước 1: Tìm kiếm',
+                description: 'Sử dụng thanh tìm kiếm để nhanh chóng tìm nội dung cần thiết.',
+                side: 'bottom',
+                align: 'start',
+            },
+        },
+        {
+            element: '#tour-step-2',
+            popover: {
+                title: 'Bước 2: Bộ lọc',
+                description: 'Áp dụng bộ lọc để thu hẹp kết quả theo ngày, loại hoặc trạng thái.',
+                side: 'bottom',
+                align: 'center',
+            },
+        },
+        {
+            element: '#tour-step-3',
+            popover: {
+                title: 'Bước 3: Tạo mới',
+                description: 'Nhấn nút này để tạo chiến dịch hoặc nội dung mới.',
+                side: 'left',
+                align: 'center',
+            },
+        },
+    ],
+};
+// ─── Demo Flow 3: Cả Slides lẫn Tour ─────────────────────────────────────────
+export const slidesAndTourFlow = {
+    name: 'demo-slides-and-tour',
+    slides: [
+        {
+            id: 1,
+            title: 'Tổng quan hệ thống',
+            description: 'Xem qua các tính năng chính trước khi hướng dẫn chi tiết.',
+            content: 'Phần hướng dẫn này sẽ giới thiệu tổng quan rồi dẫn bạn qua từng tính năng cụ thể trên giao diện thật.',
+            image: 'https://cdn.dribbble.com/userupload/15135632/file/original-00d7aa66ca52d41e6fdaeaefc96af599.png?resize=1024x768&vertical=center',
+        },
+        {
+            id: 2,
+            title: 'Sẵn sàng bắt đầu?',
+            description: 'Nhấn "Bắt đầu Tour" để xem hướng dẫn trực tiếp trên màn hình.',
+            content: 'Tour sẽ dẫn bạn qua từng thành phần quan trọng. Bạn có thể đóng bất cứ lúc nào.',
+            image: 'https://cdn.dribbble.com/userupload/43777200/file/original-b6b996f3118cec5deba3cf770e2943f8.png?resize=1024x768&vertical=center',
+        },
+    ],
+    steps: [
+        {
+            element: '#combo-step-1',
+            popover: {
+                title: 'Bảng điều khiển',
+                description: 'Đây là trung tâm điều hành. Mọi thứ bắt đầu từ đây.',
+                side: 'right',
+                align: 'start',
+            },
+        },
+        {
+            element: '#combo-step-2',
+            popover: {
+                title: 'Danh sách chiến dịch',
+                description: 'Xem toàn bộ chiến dịch đang hoạt động và đã lưu trữ.',
+                side: 'bottom',
+                align: 'center',
+            },
+        },
+        {
+            element: '#combo-step-3',
+            popover: {
+                title: 'Tạo chiến dịch mới',
+                description: 'Nhấn đây để bắt đầu một chiến dịch hoàn toàn mới.',
+                side: 'left',
+                align: 'end',
+            },
+        },
+    ],
+};
+const demoFlows = [slidesOnlyFlow, tourOnlyFlow, slidesAndTourFlow];
+/**
+ * Demo OnBroading
+ */
+function DemoContent() {
+    usePHXOnboardingInit(demoFlows);
+    const { getFlowStatus, resetStatusOnboarding, startFlow } = usePHXOnboarding();
+    const demos = [
+        {
+            flowName: 'demo-slides-only',
+            badge: 'Slides Only',
+            badgeColor: '#3b82f6',
+            title: 'Chỉ có Slides',
+            description: 'Hiển thị modal giới thiệu tổng quan với nhiều trang slide. Không có tour hướng dẫn trực tiếp trên màn hình.',
+            features: ['✅ Modal slides', '❌ Không có Tour'],
+            buttonLabel: 'Mở Slides',
+            elements: null,
+        },
+        {
+            flowName: 'demo-tour-only',
+            badge: 'Tour Only',
+            badgeColor: '#10b981',
+            title: 'Chỉ có Tour',
+            description: 'Hướng dẫn trực tiếp từng thành phần trên giao diện thật. Không có modal slides giới thiệu.',
+            features: ['❌ Không có Slides', '✅ Tour trực tiếp'],
+            buttonLabel: 'Bắt đầu Tour',
+            elements: [
+                { id: 'tour-step-1', label: '🔍 Tìm kiếm' },
+                { id: 'tour-step-2', label: '🗂 Bộ lọc' },
+                { id: 'tour-step-3', label: '➕ Tạo mới' },
+            ],
+        },
+        {
+            flowName: 'demo-slides-and-tour',
+            badge: 'Slides + Tour',
+            badgeColor: '#8b5cf6',
+            title: 'Slides & Tour kết hợp',
+            description: 'Mở slides giới thiệu tổng quan trước. Sau đó có nút "Bắt đầu Tour" để chuyển sang hướng dẫn chi tiết.',
+            features: ['✅ Modal slides', '✅ Tour trực tiếp'],
+            buttonLabel: 'Bắt đầu',
+            elements: [
+                { id: 'combo-step-1', label: '🏠 Dashboard' },
+                { id: 'combo-step-2', label: '📋 Chiến dịch' },
+                { id: 'combo-step-3', label: '🆕 Tạo mới' },
+            ],
+        },
+    ];
+    return (React.createElement("div", { className: 'mx-auto max-w-6xl' },
+        React.createElement("div", { className: 'mb-12' },
+            React.createElement("h1", { className: 'mb-3 text-3xl font-bold text-slate-900' }, "Onboarding Demo"),
+            React.createElement("p", { className: 'text-base text-slate-500' }, "3 tr\u01B0\u1EDDng h\u1EE3p: ch\u1EC9 slides, ch\u1EC9 tour, v\u00E0 k\u1EBFt h\u1EE3p c\u1EA3 hai.")),
+        React.createElement("div", { className: 'grid gap-6 [grid-template-columns:repeat(auto-fit,minmax(280px,1fr))]' }, demos.map((demo) => {
+            const status = getFlowStatus(demo.flowName);
+            return (React.createElement(PHXCard, { key: demo.flowName },
+                React.createElement(PHXBadge, { text: demo.badge, type: 'success' }),
+                React.createElement(PHXBlockStack, { gap: 'base' },
+                    React.createElement(PHXTextV2, { size: 'body', color: 'primary', lineHeight: 'loose' }, demo.title),
+                    React.createElement(PHXTextV2, { size: 'caption', lineHeight: 'base' }, demo.description),
+                    React.createElement("ul", { className: 'flex flex-col gap-3' }, demo.features.map((feature) => (React.createElement(PHXTextV2, { size: 'caption', key: feature },
+                        "\u2022 ",
+                        feature))))),
+                React.createElement("div", { className: 'flex flex-col gap-1 mt-5 rounded-lg bg-slate-50 p-3 text-xs text-slate-500' },
+                    React.createElement("span", { className: 'mb-1 font-semibold text-slate-600' }, "Tr\u1EA1ng th\u00E1i (in-memory):"),
+                    React.createElement(PHXHorizontalStack, { gapX: 'base', items: 'center' },
+                        "Slides:",
+                        ' ',
+                        React.createElement(PHXBox, { pt: 'atomic' },
+                            React.createElement(PHXTextV2, { color: status.slidesCompleted ? 'success' : 'default', size: 'caption', weight: 'bold' }, status.slidesCompleted ? '✅ Đã xem' : '⏳ Chưa xem'))),
+                    React.createElement(PHXBox, { pt: 'atomic' },
+                        React.createElement(PHXHorizontalStack, { gapX: 'base', items: 'center' },
+                            "Tour:",
+                            ' ',
+                            React.createElement(PHXTextV2, { color: 'success', size: 'caption', weight: 'bold' }, status.toursCompleted ? '✅ Đã hoàn thành' : '⏳ Chưa làm')))),
+                demo.elements && (React.createElement("div", { className: 'flex flex-wrap gap-2 border-t border-slate-100 pt-4' }, demo.elements.map((el) => (React.createElement("div", { key: el.id, id: el.id, className: 'cursor-default rounded-lg border border-slate-200 bg-slate-50 px-3.5 py-1.5 text-sm font-medium text-slate-600' }, el.label))))),
+                React.createElement("div", { className: 'mt-5 flex flex-col gap-2' },
+                    React.createElement(PHXButton, { id: `btn-${demo.flowName}`, primary: true, onClick: () => {
+                            resetStatusOnboarding(demo.flowName);
+                            startFlow(demo.flowName);
+                        } }, demo.buttonLabel))));
+        }))));
+}
+/**
+ * Demo cách sử dụng Onboarding
+ */
+export default function OnboardingDemo() {
+    return (React.createElement(PHXOnboardingProvider, null,
+        React.createElement(DemoContent, null)));
+}
+//# sourceMappingURL=onbroading-demo.js.map

package/dist/esm/components/Onboarding/onbroading-demo.js.map

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

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

@@ -0,0 +1,2 @@
+export { PHXSlider } from './phx-slider';
+export type { PHXSliderProps, PHXSliderRef } from './phx-slider';

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

@@ -0,0 +1,2 @@
+export { PHXSlider } from './phx-slider';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA"}

package/dist/esm/components/Slider/phx-slider-item.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from 'react';
+export interface PHXSliderItemProps {
+    children: ReactNode;
+    onWidthChange?(width: number): void;
+}
+export declare const PHXSliderItem: FC<PHXSliderItemProps>;

package/dist/esm/components/Slider/phx-slider-item.js

@@ -0,0 +1,33 @@
+'use client';
+import React, { useEffect, useRef } from 'react';
+export const PHXSliderItem = ({ children, onWidthChange }) => {
+    const observerRef = useRef(null);
+    const prevWidthRef = useRef(0);
+    const containerRef = useRef(null);
+    /**
+     *  Callback when observer get the width of children
+     * @param entries
+     */
+    const handleObserver = (entries) => {
+        for (const entry of entries) {
+            if (prevWidthRef.current !== entry.contentRect.width) {
+                onWidthChange === null || onWidthChange === void 0 ? void 0 : onWidthChange(entry.contentRect.width);
+                prevWidthRef.current = entry.contentRect.width;
+            }
+        }
+    };
+    /**
+     *  Observes the width of the child element
+     * @returns
+     */
+    useEffect(() => {
+        observerRef.current = new ResizeObserver(handleObserver);
+        observerRef.current.observe(containerRef.current);
+        return () => {
+            var _a;
+            (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        };
+    }, []);
+    return (React.createElement("div", { ref: containerRef, className: 'shrink-0 [&_img]:pointer-events-none [&_img]:block', style: { width: 'var(--phx-slider-item-width)' } }, children));
+};
+//# sourceMappingURL=phx-slider-item.js.map

package/dist/esm/components/Slider/phx-slider-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"phx-slider-item.js","sourceRoot":"","sources":["../../../../src/components/Slider/phx-slider-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,EAAE,EAAiB,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAO/D,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE;IACnF,MAAM,WAAW,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAA;IACvD,MAAM,YAAY,GAAG,MAAM,CAAS,CAAC,CAAC,CAAA;IACtC,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACjD;;;OAGG;IACH,MAAM,cAAc,GAAG,CAAC,OAAmC,EAAE,EAAE;QAC7D,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;YAC5B,IAAI,YAAY,CAAC,OAAO,KAAK,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;gBACrD,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;gBACxC,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAA;YAChD,CAAC;QACH,CAAC;IACH,CAAC,CAAA;IACD;;;OAGG;IACH,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,cAAc,CAAC,CAAA;QACxD,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAQ,CAAC,CAAA;QAElD,OAAO,GAAG,EAAE;;YACV,MAAA,WAAW,CAAC,OAAO,0CAAE,UAAU,EAAE,CAAA;QACnC,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,6BACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAC,oDAAoD,EAC9D,KAAK,EAAE,EAAE,KAAK,EAAE,8BAA8B,EAAE,IAE/C,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Slider/phx-slider.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import React from 'react';
+export interface PHXSliderProps {
+    perView?: number;
+    gap?: number;
+    children: ReactNode;
+    onIndexChange?(index: number): void;
+    enableNavigate?: boolean;
+}
+export interface PHXSliderRef {
+    prev(): void;
+    next(): void;
+    goTo(index: number): void;
+    currentIndex: number;
+    isFirstSlide: boolean;
+    isLastSlide: boolean;
+}
+export declare const PHXSlider: React.ForwardRefExoticComponent<PHXSliderProps & React.RefAttributes<PHXSliderRef>>;