phx-react 1.3.1837 → 1.3.1839

package/dist/cjs/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,iCAAiC;AACjC,uEAAqF;AAErF;;;;GAIG;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAE,EAAE;IACvE,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,qCAAgB,GAAE,CAAA;IAE3C,IAAA,iBAAS,EAAC,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;AANY,QAAA,oBAAoB,wBAMhC"}

package/dist/cjs/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/cjs/components/Onboarding/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./contexts/onboarding-context"), exports);
+tslib_1.__exportStar(require("./hooks/use-onboarding-init"), exports);
+tslib_1.__exportStar(require("./modal-slides/modal-slides"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Onboarding/index.ts"],"names":[],"mappings":";;;AAAA,wEAA6C;AAC7C,sEAA2C;AAC3C,sEAA2C"}

package/dist/cjs/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/cjs/components/Onboarding/modal-slides/modal-slides.js

@@ -0,0 +1,59 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PHXOnboardingModal = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const Slider_1 = require("../../Slider");
+const Box_1 = require("../../Box");
+const HorizontalStack_1 = require("../../HorizontalStack");
+const Button_1 = require("../../Button");
+const Modal_1 = require("../../Modal");
+const PHXOnboardingModal = ({ hasTours, onHide, onStartTour, show, slides, }) => {
+    const sliderRef = (0, react_1.useRef)(null);
+    const [currentIndex, setCurrentIndex] = (0, react_1.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
+     */
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (show) {
+            (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.goTo(0);
+            setCurrentIndex(0);
+        }
+    }, [show]);
+    const customFooterComponent = (react_1.default.createElement(Box_1.PHXBox, { fullWidth: true, p: 'snappy' },
+        react_1.default.createElement(HorizontalStack_1.PHXHorizontalStack, { fullWidth: true, items: 'center', justify: 'between' },
+            isFirstSlide ? (react_1.default.createElement("span", null)) : (react_1.default.createElement(Button_1.PHXButton, { onClick: goToPrevious, secondary: true }, "Quay l\u1EA1i")),
+            react_1.default.createElement(HorizontalStack_1.PHXHorizontalStack, { gapX: 'tight', items: 'center' },
+                react_1.default.createElement(Button_1.PHXButton, { onClick: onHide, secondary: true }, "B\u1ECF qua"),
+                isLastSlide ? (hasTours ? (react_1.default.createElement(Button_1.PHXButton, { onClick: onStartTour, primary: true }, "B\u1EAFt \u0111\u1EA7u Tour")) : (react_1.default.createElement(Button_1.PHXButton, { onClick: onHide, primary: true }, "Ho\u00E0n t\u1EA5t"))) : (react_1.default.createElement(Button_1.PHXButton, { onClick: goToNext, primary: true }, "Ti\u1EBFp theo"))))));
+    return (react_1.default.createElement(Modal_1.PHXModal, { customFooter: customFooterComponent, inCard: false, onHide: onHide, show: show, size: 'large-plus', title: 'H\u01B0\u1EDBng d\u1EABn s\u1EED d\u1EE5ng' },
+        react_1.default.createElement(Slider_1.PHXSlider, { ref: sliderRef, enableNavigate: false, gap: 0, onIndexChange: setCurrentIndex, perView: 1 }, slides.map((slideItem) => (react_1.default.createElement("img", { key: slideItem.id, alt: slideItem.title, src: slideItem.image }))))));
+};
+exports.PHXOnboardingModal = PHXOnboardingModal;
+//# sourceMappingURL=modal-slides.js.map

package/dist/cjs/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/cjs/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/cjs/components/Onboarding/onbroading-demo.js

@@ -0,0 +1,208 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.slidesAndTourFlow = exports.tourOnlyFlow = exports.slidesOnlyFlow = void 0;
+exports.default = OnboardingDemo;
+const tslib_1 = require("tslib");
+const onboarding_context_1 = require("./contexts/onboarding-context");
+const react_1 = tslib_1.__importDefault(require("react"));
+const use_onboarding_init_1 = require("./hooks/use-onboarding-init");
+const Badge_1 = require("../Badge");
+const TextV2_1 = require("../TextV2");
+const Button_1 = require("../Button");
+const Card_1 = require("../Card");
+const Box_1 = require("../Box");
+const HorizontalStack_1 = require("../HorizontalStack");
+const BlockStack_1 = require("../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) ───────────────────────────────
+exports.slidesOnlyFlow = {
+    name: 'demo-slides-only',
+    slides: sharedSlides,
+    // steps: undefined → không có tour
+};
+// ─── Demo Flow 2: Chỉ có Tour (không có Slides) ───────────────────────────────
+exports.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 ─────────────────────────────────────────
+exports.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 = [exports.slidesOnlyFlow, exports.tourOnlyFlow, exports.slidesAndTourFlow];
+/**
+ * Demo OnBroading
+ */
+function DemoContent() {
+    (0, use_onboarding_init_1.usePHXOnboardingInit)(demoFlows);
+    const { getFlowStatus, resetStatusOnboarding, startFlow } = (0, onboarding_context_1.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_1.default.createElement("div", { className: 'mx-auto max-w-6xl' },
+        react_1.default.createElement("div", { className: 'mb-12' },
+            react_1.default.createElement("h1", { className: 'mb-3 text-3xl font-bold text-slate-900' }, "Onboarding Demo"),
+            react_1.default.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_1.default.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_1.default.createElement(Card_1.PHXCard, { key: demo.flowName },
+                react_1.default.createElement(Badge_1.PHXBadge, { text: demo.badge, type: 'success' }),
+                react_1.default.createElement(BlockStack_1.PHXBlockStack, { gap: 'base' },
+                    react_1.default.createElement(TextV2_1.PHXTextV2, { size: 'body', color: 'primary', lineHeight: 'loose' }, demo.title),
+                    react_1.default.createElement(TextV2_1.PHXTextV2, { size: 'caption', lineHeight: 'base' }, demo.description),
+                    react_1.default.createElement("ul", { className: 'flex flex-col gap-3' }, demo.features.map((feature) => (react_1.default.createElement(TextV2_1.PHXTextV2, { size: 'caption', key: feature },
+                        "\u2022 ",
+                        feature))))),
+                react_1.default.createElement("div", { className: 'flex flex-col gap-1 mt-5 rounded-lg bg-slate-50 p-3 text-xs text-slate-500' },
+                    react_1.default.createElement("span", { className: 'mb-1 font-semibold text-slate-600' }, "Tr\u1EA1ng th\u00E1i (in-memory):"),
+                    react_1.default.createElement(HorizontalStack_1.PHXHorizontalStack, { gapX: 'base', items: 'center' },
+                        "Slides:",
+                        ' ',
+                        react_1.default.createElement(Box_1.PHXBox, { pt: 'atomic' },
+                            react_1.default.createElement(TextV2_1.PHXTextV2, { color: status.slidesCompleted ? 'success' : 'default', size: 'caption', weight: 'bold' }, status.slidesCompleted ? '✅ Đã xem' : '⏳ Chưa xem'))),
+                    react_1.default.createElement(Box_1.PHXBox, { pt: 'atomic' },
+                        react_1.default.createElement(HorizontalStack_1.PHXHorizontalStack, { gapX: 'base', items: 'center' },
+                            "Tour:",
+                            ' ',
+                            react_1.default.createElement(TextV2_1.PHXTextV2, { color: 'success', size: 'caption', weight: 'bold' }, status.toursCompleted ? '✅ Đã hoàn thành' : '⏳ Chưa làm')))),
+                demo.elements && (react_1.default.createElement("div", { className: 'flex flex-wrap gap-2 border-t border-slate-100 pt-4' }, demo.elements.map((el) => (react_1.default.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_1.default.createElement("div", { className: 'mt-5 flex flex-col gap-2' },
+                    react_1.default.createElement(Button_1.PHXButton, { id: `btn-${demo.flowName}`, primary: true, onClick: () => {
+                            resetStatusOnboarding(demo.flowName);
+                            startFlow(demo.flowName);
+                        } }, demo.buttonLabel))));
+        }))));
+}
+/**
+ * Demo cách sử dụng Onboarding
+ */
+function OnboardingDemo() {
+    return (react_1.default.createElement(onboarding_context_1.PHXOnboardingProvider, null,
+        react_1.default.createElement(DemoContent, null)));
+}
+//# sourceMappingURL=onbroading-demo.js.map

package/dist/cjs/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":";AAAA,YAAY,CAAA;;;AAyRZ,iCAMC;;AA7RD,sEAAuF;AACvF,0DAAyB;AACzB,qEAAkE;AAElE,oCAAmC;AACnC,sCAAqC;AACrC,sCAAqC;AACrC,kCAAiC;AACjC,gCAA+B;AAC/B,wDAAuD;AACvD,8CAA6C;AAE7C,MAAM,YAAY,GAAmC;IACnD;QACE,EAAE,EAAE,CAAC;QACL,KAAK,EACH,iIAAiI;KACpI;IACD;QACE,EAAE,EAAE,CAAC;QACL,KAAK,EACH,iIAAiI;KACpI;IACD;QACE,EAAE,EAAE,CAAC;QACL,KAAK,EACH,iIAAiI;KACpI;CACF,CAAA;AAED,iFAAiF;AAEpE,QAAA,cAAc,GAAuB;IAChD,IAAI,EAAE,kBAAkB;IACxB,MAAM,EAAE,YAAY;IACpB,mCAAmC;CACpC,CAAA;AAED,iFAAiF;AAEpE,QAAA,YAAY,GAAuB;IAC9C,IAAI,EAAE,gBAAgB;IACtB,sCAAsC;IACtC,KAAK,EAAE;QACL;YACE,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE;gBACP,KAAK,EAAE,kBAAkB;gBACzB,WAAW,EAAE,+DAA+D;gBAC5E,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,OAAO;aACf;SACF;QACD;YACE,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE;gBACP,KAAK,EAAE,gBAAgB;gBACvB,WAAW,EAAE,oEAAoE;gBACjF,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,QAAQ;aAChB;SACF;QACD;YACE,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE;gBACP,KAAK,EAAE,iBAAiB;gBACxB,WAAW,EAAE,mDAAmD;gBAChE,IAAI,EAAE,MAAM;gBACZ,KAAK,EAAE,QAAQ;aAChB;SACF;KACF;CACF,CAAA;AAED,gFAAgF;AAEnE,QAAA,iBAAiB,GAAuB;IACnD,IAAI,EAAE,sBAAsB;IAC5B,MAAM,EAAE;QACN;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,oBAAoB;YAC3B,WAAW,EAAE,2DAA2D;YACxE,OAAO,EAAE,uGAAuG;YAChH,KAAK,EACH,iIAAiI;SACpI;QACD;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,mBAAmB;YAC1B,WAAW,EAAE,+DAA+D;YAC5E,OAAO,EAAE,iFAAiF;YAC1F,KAAK,EACH,iIAAiI;SACpI;KACF;IACD,KAAK,EAAE;QACL;YACE,OAAO,EAAE,eAAe;YACxB,OAAO,EAAE;gBACP,KAAK,EAAE,iBAAiB;gBACxB,WAAW,EAAE,qDAAqD;gBAClE,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,OAAO;aACf;SACF;QACD;YACE,OAAO,EAAE,eAAe;YACxB,OAAO,EAAE;gBACP,KAAK,EAAE,sBAAsB;gBAC7B,WAAW,EAAE,sDAAsD;gBACnE,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,QAAQ;aAChB;SACF;QACD;YACE,OAAO,EAAE,eAAe;YACxB,OAAO,EAAE;gBACP,KAAK,EAAE,oBAAoB;gBAC3B,WAAW,EAAE,mDAAmD;gBAChE,IAAI,EAAE,MAAM;gBACZ,KAAK,EAAE,KAAK;aACb;SACF;KACF;CACF,CAAA;AAED,MAAM,SAAS,GAAG,CAAC,sBAAc,EAAE,oBAAY,EAAE,yBAAiB,CAAC,CAAA;AAEnE;;GAEG;AACH,SAAS,WAAW;IAClB,IAAA,0CAAoB,EAAC,SAAS,CAAC,CAAA;IAE/B,MAAM,EAAE,aAAa,EAAE,qBAAqB,EAAE,SAAS,EAAE,GAAG,IAAA,qCAAgB,GAAE,CAAA;IAE9E,MAAM,KAAK,GAAG;QACZ;YACE,QAAQ,EAAE,kBAAkB;YAC5B,KAAK,EAAE,aAAa;YACpB,UAAU,EAAE,SAAS;YACrB,KAAK,EAAE,eAAe;YACtB,WAAW,EACT,6GAA6G;YAC/G,QAAQ,EAAE,CAAC,gBAAgB,EAAE,iBAAiB,CAAC;YAC/C,WAAW,EAAE,WAAW;YACxB,QAAQ,EAAE,IAAI;SACf;QACD;YACE,QAAQ,EAAE,gBAAgB;YAC1B,KAAK,EAAE,WAAW;YAClB,UAAU,EAAE,SAAS;YACrB,KAAK,EAAE,aAAa;YACpB,WAAW,EAAE,4FAA4F;YACzG,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,CAAC;YACnD,WAAW,EAAE,cAAc;YAC3B,QAAQ,EAAE;gBACR,EAAE,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;gBAC3C,EAAE,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,WAAW,EAAE;gBACzC,EAAE,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,WAAW,EAAE;aAC1C;SACF;QACD;YACE,QAAQ,EAAE,sBAAsB;YAChC,KAAK,EAAE,eAAe;YACtB,UAAU,EAAE,SAAS;YACrB,KAAK,EAAE,uBAAuB;YAC9B,WAAW,EACT,uGAAuG;YACzG,QAAQ,EAAE,CAAC,gBAAgB,EAAE,kBAAkB,CAAC;YAChD,WAAW,EAAE,SAAS;YACtB,QAAQ,EAAE;gBACR,EAAE,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;gBAC7C,EAAE,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE;gBAC9C,EAAE,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,YAAY,EAAE;aAC5C;SACF;KACF,CAAA;IAED,OAAO,CACL,uCAAK,SAAS,EAAC,mBAAmB;QAEhC,uCAAK,SAAS,EAAC,OAAO;YACpB,sCAAI,SAAS,EAAC,wCAAwC,sBAAqB;YAE3E,qCAAG,SAAS,EAAC,0BAA0B,0GAA2D,CAC9F;QAGN,uCAAK,SAAS,EAAC,uEAAuE,IACnF,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAClB,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;YAE3C,OAAO,CACL,8BAAC,cAAO,IAAC,GAAG,EAAE,IAAI,CAAC,QAAQ;gBACzB,8BAAC,gBAAQ,IAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,SAAS,GAAG;gBAE7C,8BAAC,0BAAa,IAAC,GAAG,EAAC,MAAM;oBACvB,8BAAC,kBAAS,IAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAC,SAAS,EAAC,UAAU,EAAE,OAAO,IACzD,IAAI,CAAC,KAAK,CACD;oBAEZ,8BAAC,kBAAS,IAAC,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,IAC3C,IAAI,CAAC,WAAW,CACP;oBAGZ,sCAAI,SAAS,EAAC,qBAAqB,IAChC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAC9B,8BAAC,kBAAS,IAAC,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO;;wBACnC,OAAO,CACA,CACb,CAAC,CACC,CACS;gBAGhB,uCAAK,SAAS,EAAC,4EAA4E;oBACzF,wCAAM,SAAS,EAAC,mCAAmC,wCAA+B;oBAElF,8BAAC,oCAAkB,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ;;wBACpC,GAAG;wBACX,8BAAC,YAAM,IAAC,EAAE,EAAE,QAAQ;4BAClB,8BAAC,kBAAS,IAAC,KAAK,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAC,MAAM,IAC7F,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CACzC,CACL,CACU;oBAErB,8BAAC,YAAM,IAAC,EAAE,EAAE,QAAQ;wBAClB,8BAAC,oCAAkB,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ;;4BACtC,GAAG;4BACT,8BAAC,kBAAS,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,SAAS,EAAE,MAAM,EAAC,MAAM,IACtD,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,YAAY,CAC/C,CACO,CACd,CACL;gBAGL,IAAI,CAAC,QAAQ,IAAI,CAChB,uCAAK,SAAS,EAAC,qDAAqD,IACjE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CACzB,uCACE,GAAG,EAAE,EAAE,CAAC,EAAE,EACV,EAAE,EAAE,EAAE,CAAC,EAAE,EACT,SAAS,EAAC,gHAAgH,IAEzH,EAAE,CAAC,KAAK,CACL,CACP,CAAC,CACE,CACP;gBAGD,uCAAK,SAAS,EAAC,0BAA0B;oBACvC,8BAAC,kBAAS,IACR,EAAE,EAAE,OAAO,IAAI,CAAC,QAAQ,EAAE,EAC1B,OAAO,QACP,OAAO,EAAE,GAAG,EAAE;4BACZ,qBAAqB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;4BACpC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;wBAC1B,CAAC,IAEA,IAAI,CAAC,WAAW,CACP,CACR,CACE,CACX,CAAA;QACH,CAAC,CAAC,CACE,CACF,CACP,CAAA;AACH,CAAC;AAED;;GAEG;AACH,SAAwB,cAAc;IACpC,OAAO,CACL,8BAAC,0CAAqB;QACpB,8BAAC,WAAW,OAAG,CACO,CACzB,CAAA;AACH,CAAC"}

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

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

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PHXSlider = void 0;
+var phx_slider_1 = require("./phx-slider");
+Object.defineProperty(exports, "PHXSlider", { enumerable: true, get: function () { return phx_slider_1.PHXSlider; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Slider/index.ts"],"names":[],"mappings":";;;AAAA,2CAAwC;AAA/B,uGAAA,SAAS,OAAA"}

package/dist/cjs/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/cjs/components/Slider/phx-slider-item.js

@@ -0,0 +1,38 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PHXSliderItem = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const PHXSliderItem = ({ children, onWidthChange }) => {
+    const observerRef = (0, react_1.useRef)(null);
+    const prevWidthRef = (0, react_1.useRef)(0);
+    const containerRef = (0, react_1.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
+     */
+    (0, react_1.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_1.default.createElement("div", { ref: containerRef, className: 'shrink-0 [&_img]:pointer-events-none [&_img]:block', style: { width: 'var(--phx-slider-item-width)' } }, children));
+};
+exports.PHXSliderItem = PHXSliderItem;
+//# sourceMappingURL=phx-slider-item.js.map

package/dist/cjs/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,uDAA+D;AAOxD,MAAM,aAAa,GAA2B,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE;IACnF,MAAM,WAAW,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAA;IACvD,MAAM,YAAY,GAAG,IAAA,cAAM,EAAS,CAAC,CAAC,CAAA;IACtC,MAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,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,IAAA,iBAAS,EAAC,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,uCACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAC,oDAAoD,EAC9D,KAAK,EAAE,EAAE,KAAK,EAAE,8BAA8B,EAAE,IAE/C,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAtCY,QAAA,aAAa,iBAsCzB"}

package/dist/cjs/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>>;

package/dist/cjs/components/Slider/phx-slider.js

@@ -0,0 +1,168 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PHXSlider = void 0;
+const tslib_1 = require("tslib");
+const outline_1 = require("@heroicons/react/24/outline");
+const react_1 = require("react");
+const phx_slider_item_1 = require("./phx-slider-item");
+const create_animate_1 = require("./ultis/create-animate");
+const react_2 = tslib_1.__importDefault(require("react"));
+exports.PHXSlider = (0, react_1.forwardRef)(({ children, enableNavigate = true, gap = 0, onIndexChange, perView = 1 }, ref) => {
+    const [itemWidth, setItemWidth] = (0, react_1.useState)('');
+    const [x, setX] = (0, react_1.useState)(0);
+    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
+    const [isFirstSlide, setIsFirstSlide] = (0, react_1.useState)(true);
+    const [isLastSlide, setIsLastSlide] = (0, react_1.useState)(false);
+    const [prevDisabled, setPrevDisabled] = (0, react_1.useState)(true);
+    const [nextDisabled, setNextDisabled] = (0, react_1.useState)(false);
+    const childs = react_1.Children.toArray(children).flatMap((child) => {
+        if (react_2.default.isValidElement(child) && child.type === react_2.default.Fragment) {
+            return react_1.Children.toArray(child.props.children);
+        }
+        return child;
+    });
+    const containerRef = (0, react_1.useRef)(null);
+    /**
+     * Giới hạn giá trị trong khoảng min và max
+     * @param value Giá trị cần clamp
+     * @param min Giá trị nhỏ nhất
+     * @param max Giá trị lớn nhất
+     */
+    const clampValue = (value, min, max) => Math.min(Math.max(value, min), max);
+    /**
+     * Scroll tới vị trí X bất kỳ
+     * @param targetX Vị trí X cần scroll
+     */
+    const scrollTo = (targetX) => {
+        const containerEl = containerRef.current;
+        if (!containerEl) {
+            return;
+        }
+        const innerEl = containerEl.firstElementChild;
+        const minX = containerEl.clientWidth - innerEl.scrollWidth;
+        const nextX = clampValue(targetX, minX, 0);
+        (0, create_animate_1.createAnimate)({
+            from: x,
+            to: nextX,
+            duration: 250,
+            /**
+             * Callback khi cập nhật giá trị
+             * @param value Giá trị hiện tại
+             */
+            onUpdate(value) {
+                setX(value);
+            },
+            /**
+             * Callback khi kết thúc animation
+             */
+            onEnd() {
+                const containerCurrent = containerRef.current;
+                if (!containerCurrent || containerCurrent.clientWidth === 0)
+                    return;
+                const index = Math.round(Math.abs(nextX) / containerCurrent.clientWidth);
+                setCurrentIndex(index);
+                setIsFirstSlide(index === 0);
+                setIsLastSlide(index === childs.length - 1);
+                onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(index);
+            },
+        });
+    };
+    /**
+     * Lấy các element cần thiết cho animation
+     */
+    const getElements = () => {
+        const containerEl = containerRef.current;
+        if (!containerEl) {
+            return null;
+        }
+        return {
+            containerEl,
+            innerEl: containerEl.firstElementChild,
+            width: containerEl.clientWidth,
+        };
+    };
+    /**
+     * Đến slide index bất kỳ
+     * @param index Index cần đến
+     */
+    const goTo = (index) => {
+        const containerEl = getElements();
+        if (!containerEl) {
+            return;
+        }
+        const width = containerEl.width;
+        scrollTo(-index * width);
+    };
+    const vars = {
+        '--phx-slider-item-width': itemWidth,
+        '--phx-slider-gap': `${gap}px`,
+        '--phx-slider-translate': `${x}px`,
+    };
+    /**
+     * Vô hiệu hóa nút next và prev khi đến cuối hoặc đầu
+     */
+    const handleDisable = () => {
+        const elements = getElements();
+        if (!elements) {
+            return;
+        }
+        const innerEl = elements.innerEl;
+        setPrevDisabled(x === 0);
+        setNextDisabled(x === elements.width - innerEl.scrollWidth);
+    };
+    (0, react_1.useLayoutEffect)(() => {
+        setItemWidth(`calc(${100 / perView}% - ${(gap * (perView - 1)) / perView}px)`);
+    }, [perView, gap]);
+    (0, react_1.useLayoutEffect)(() => {
+        handleDisable();
+    }, [x]);
+    /**
+     * Slide về slide trước
+     */
+    const handlePrev = () => {
+        const container = getElements();
+        if (!container) {
+            return;
+        }
+        const width = container.width;
+        scrollTo(x + width);
+    };
+    /**
+     * Slide tới slide sau
+     */
+    const handleNext = () => {
+        const el = getElements();
+        if (!el) {
+            return;
+        }
+        const width = el.width;
+        scrollTo(x - width);
+    };
+    /**
+     * exposes methods tới component cha
+     */
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        prev: handlePrev,
+        next: handleNext,
+        goTo,
+        currentIndex,
+        isFirstSlide,
+        isLastSlide,
+    }));
+    return (react_2.default.createElement("div", { ref: containerRef, className: 'relative select-none overflow-hidden', style: vars },
+        react_2.default.createElement("div", { className: 'flex will-change-transform', style: {
+                gap: 'var(--phx-slider-gap)',
+                transform: 'translate3d(var(--phx-slider-translate), 0, 0)',
+            } }, childs.map((child) => {
+            const _child = child;
+            return react_2.default.createElement(phx_slider_item_1.PHXSliderItem, { key: _child.key }, _child);
+        })),
+        enableNavigate && (react_2.default.createElement(react_2.default.Fragment, null,
+            react_2.default.createElement("button", { className: `absolute inset-y-0 left-0 z-10 flex w-20 cursor-pointer items-center justify-center bg-gradient-to-r from-white via-white/80 to-transparent ${prevDisabled ? 'hidden' : ''}`, onClick: handlePrev, type: 'button' },
+                react_2.default.createElement(outline_1.ChevronLeftIcon, { className: 'h-8 w-8' })),
+            react_2.default.createElement("button", { className: `absolute inset-y-0 right-0 z-10 flex w-20 cursor-pointer items-center justify-center bg-gradient-to-l from-white via-white/80 to-transparent ${nextDisabled ? 'hidden' : ''}`, onClick: handleNext, type: 'button' },
+                react_2.default.createElement(outline_1.ChevronRightIcon, { className: 'h-8 w-8' }))))));
+});
+exports.PHXSlider.displayName = 'PHXSlider';
+//# sourceMappingURL=phx-slider.js.map

package/dist/cjs/components/Slider/phx-slider.js.map

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

package/dist/cjs/components/Slider/ultis/create-animate.d.ts

@@ -0,0 +1,17 @@
+interface ICreateAnimateProps {
+    from: number;
+    to: number;
+    duration: number;
+    onUpdate(value: number): void;
+    onEnd?(): void;
+}
+/**
+ * Tạo animation
+ * @param duration Thời lượng animation
+ * @param from Giá trị bắt đầu
+ * @param onUpdate Callback khi cập nhật giá trị
+ * @param onEnd Callback khi kết thúc
+ * @param to Giá trị kết thúc
+ */
+export declare const createAnimate: ({ duration, from, onEnd, onUpdate, to }: ICreateAnimateProps) => void;
+export {};