@opexa/portal-components 0.0.365 → 0.0.367

package/dist/components/Quests/MultiWageringQuest.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useCallback, useMemo } from 'react';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { Lock01Icon } from '../../icons/Lock01Icon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Badge } from '../../ui/Badge/index.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { Progress } from '../../ui/Progress/index.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { useQuestContext } from './QuestsContext.js';
+import { RemainingTime } from './RemainingTime.js';
+export function MultiWageringQuest() {
+    const disclosure = useDisclosure();
+    const quest = useQuestContext();
+    const { stages, totalStage, currentStage, progressPercentage } = useMemo(() => {
+        const currentStage = quest.stages.filter((m) => m.cleared).length;
+        const progress = [];
+        const turnover = parseFloat(quest.turnover || '0');
+        let remaining = turnover;
+        const stageTargets = quest.stages.map((s) => parseFloat(s.targetTurnover));
+        for (const target of stageTargets) {
+            if (remaining <= 0) {
+                progress.push(0);
+            }
+            else if (remaining >= target) {
+                progress.push(100);
+            }
+            else {
+                progress.push((remaining / target) * 100);
+            }
+            remaining -= target;
+        }
+        if (!quest?.stages) {
+            return {
+                stages: [],
+                totalStage: 0,
+                currentStage: 0,
+                progressPercentage: 0,
+            };
+        }
+        const transformedStages = quest.stages.map((stage, idx) => ({
+            ...stage,
+            progressValue: progress[idx],
+        }));
+        return {
+            stages: transformedStages,
+            totalStage: quest.stages.length,
+            currentStage: currentStage === 0 ? 1 : currentStage,
+            progressPercentage: +quest.progressPercentage,
+        };
+    }, [quest]);
+    const handleViewDetails = useCallback(() => {
+        disclosure.setOpen(true);
+    }, [disclosure]);
+    const localeInfo = useLocaleInfo();
+    const params = useSearchParams();
+    const questId = params.get('id');
+    const isOpen = useMemo(() => {
+        return questId === quest.id;
+    }, [questId, quest.id]);
+    const router = useRouter();
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex h-full w-full flex-col space-y-6 rounded-2xl border border-border-primary bg-bg-tertiary px-4 pt-5 pb-6", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx("div", { className: "flex max-h-7.5 items-center justify-between", children: _jsx(RemainingTime, { endOfDay: true }) }), _jsx("p", { className: "font-semibold text-xl", children: quest?.name || 'Multi Stage Wagering Quest' }), _jsx("div", { className: "text-[#CECFD2] text-sm", dangerouslySetInnerHTML: {
+                                    __html: quest?.description ||
+                                        'Ready for a challenge? Complete them all and get amazing rewards!',
+                                } }), _jsxs("div", { className: "flex items-center justify-between pt-5", children: [_jsxs("p", { className: "text-[#F5F5F6] text-sm", children: ["Progress: ", quest.progressPercentage, "%"] }), _jsxs("p", { className: "text-[#F5F5F6] text-sm", children: [quest.turnover, _jsxs("span", { className: "text-[#94969C]", children: ["/", quest.targetTurnover, " PHP"] })] })] }), _jsx(Progress.Root, { max: 100, className: "h-2 rounded-full bg-bg-primary", value: progressPercentage, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, { className: "bg-utility-brand-600" }) }) }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "text-[#F5F5F6] text-sm", children: ["Stage ", currentStage, " of ", totalStage] }), _jsx(Badge.Root, { size: "lg", className: "border border-border-badge bg-bg-badge", round: false, children: _jsxs(Badge.Label, { className: "!text-text-badge flex items-center justify-center text-xs", children: [_jsx("p", { className: "flex h-[10px] items-center justify-center", children: "+" }), ' ', formatNumber(quest.stages?.reduce((curr, prev) => {
+                                                    return curr + Number(prev.bonusAmount || 0);
+                                                }, 0), {
+                                                    currency: localeInfo.currency.code,
+                                                    maxDecimalPlaces: 0,
+                                                    minDecimalPlaces: 0,
+                                                }), ' ', "Bonus"] }) })] })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx(Button, { size: "sm", onClick: handleViewDetails, "aria-label": "View Details", disabled: quest.status === 'FAILED' || quest.status === 'COMPLETED', className: "disabled:bg-bg-primary disabled:text-text-disabled", children: "View Details" }) })] }), _jsx(Stages, { open: disclosure.open || isOpen, onOpenChange: (open) => {
+                    disclosure.setOpen(open);
+                    router.push('/quests');
+                }, quest: quest, stages: stages })] }));
+}
+function Stages(props) {
+    const [open, setOpen] = useControllableState({
+        value: props.open,
+        defaultValue: props.defaultOpen ?? false,
+        onChange: props.onOpenChange,
+    });
+    const currentStage = useMemo(() => {
+        const stage = props?.stages?.findLastIndex((stage) => stage.cleared) ?? 0;
+        return stage !== -1 ? stage + 1 : 1;
+    }, [props.stages]);
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto mt-40 min-h-auto min-w-[23rem] max-w-[25rem] overflow-y-auto rounded-xl border border-border-wagering-popup px-4 py-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "group flex flex-col space-y-5 text-sm text-text-quarterary-brand", children: [_jsx("h2", { className: "font-semibold text-lg text-text-primary-900", children: props.quest?.name || 'Quest' }), _jsx("div", { className: "font-normal text-[#94969C] text-sm", dangerouslySetInnerHTML: {
+                                            __html: props.quest?.description ||
+                                                'Ready for a challenge? Complete them all and get amazing rewards!',
+                                        } }), _jsx("div", { className: "flex w-full flex-col space-y-3", children: props.stages.map((stage, idx) => {
+                                            if (currentStage >= idx + 1) {
+                                                return (_jsx(QuestWageringStageUnlocked, { data: stage, progressValue: stage.progressValue, bonus: stage.bonusAmount, stage: idx, isCompleted: stage.cleared }, idx));
+                                            }
+                                            else {
+                                                return _jsx(QuestWageringStageLocked, { stage: idx }, idx);
+                                            }
+                                        }) }), _jsx(Button, { size: "sm", onClick: () => setOpen(false), "aria-label": "Close", className: "w-full", children: "Close" })] })] }) })] }) }));
+}
+function QuestWageringStageUnlocked({ bonus, stage, progressValue, data, isCompleted = false, }) {
+    const localeInfo = useLocaleInfo();
+    return (_jsxs("div", { className: "mb-4 flex flex-col justify-between rounded-xl border border-border-wagering-stage-popup bg-bg-wagering-stage-popup p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", stage + 1] }), _jsx(Badge.Root, { colorScheme: isCompleted ? 'success' : 'blue', size: "md", round: true, children: _jsx(Badge.Label, { children: data.cleared ? 'Completed' : 'Ongoing' }) })] }), _jsxs("div", { className: "mt-2.5 flex items-center justify-between", children: [_jsxs("p", { children: ["Progress ", progressValue, "%"] }), _jsx(Badge.Root, { size: "md", className: "border border-border-badge bg-bg-badge", round: false, children: _jsxs(Badge.Label, { className: "!text-text-badge", children: ["+", formatNumber(bonus, {
+                                    currency: localeInfo.currency.code,
+                                }), ' ', "Bonus"] }) })] }), _jsx(Progress.Root, { max: 100, className: "mt-2 h-2 rounded-full bg-bg-primary", value: progressValue ?? 0, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, { className: "bg-utility-brand-600" }) }) })] }));
+}
+function QuestWageringStageLocked({ stage }) {
+    return (_jsxs("div", { className: "mb-4 flex items-center justify-between rounded-xl border border-border-wagering-stage-popup bg-bg-wagering-stage-popup p-3", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", stage + 1] }), _jsx("div", { className: "flex items-center justify-center rounded-full border border-border-lock bg-bg-lock p-1", children: _jsx(Lock01Icon, { className: "size-3 stroke-3 font-medium text-text-lock" }) })] }));
+}

package/dist/components/Quests/NoQuests.d.ts

@@ -0,0 +1,6 @@
+interface NoQuestsProps {
+    heading?: string;
+    description?: string;
+}
+export declare const NoQuests: ({ heading, description }: NoQuestsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Quests/NoQuests.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Image from 'next/image';
+import closeChest from '../../images/close-chest.png';
+export const NoQuests = ({ heading, description }) => {
+    return (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mb-3 font-semibold text-lg capitalize", children: heading ?? 'Quests' }), _jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { src: closeChest, width: 100, height: 100, alt: "No Quests Available", className: "mix-blend-luminosity" }), _jsx("div", { className: "mt-3 text-center text-sm text-text-tertiary-600", children: description ?? 'No available quests. Please check back later!' })] })] }));
+};

package/dist/components/SignIn/MobileNumberSignIn.js

@@ -171,7 +171,7 @@ export function MobileNumberSignIn() {
                                                 o.field.onBlur();
                                             }, otp: true, onValueComplete: () => {
                                                 form2Ref.current?.requestSubmit();
-                                            }, blurOnComplete: true, readOnly: step2Form.formState.isSubmitting, type: "numeric", children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "font-medium text-2xl text-text-placeholder-subtle", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "font-semibold text-button-secondary-fg", disabled: cooldown.cooling, onClick: async () => {
+                                            }, blurOnComplete: true, readOnly: step2Form.formState.isSubmitting, type: "numeric", children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "font-medium text-2xl text-text-placeholder-subtle", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't receive the code?" }), _jsx("button", { type: "button", className: "font-semibold text-button-secondary-fg", disabled: cooldown.cooling, onClick: async () => {
                                             await sendVerificationCodeMutation.mutateAsync({
                                                 channel: 'SMS',
                                                 recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),

package/dist/components/SignUp/SignUpDefault/SignUpDefaultForm.js

@@ -290,7 +290,7 @@ export function SignUpDefaultForm() {
                                                 o.field.onChange(details.value);
                                             }, onValueComplete: () => {
                                                 form2Ref.current?.requestSubmit();
-                                            }, blurOnComplete: true, readOnly: step2Form.formState.isSubmitting, type: "numeric", children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "font-medium text-2xl text-text-placeholder-subtle", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "font-semibold text-button-secondary-fg disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
+                                            }, blurOnComplete: true, readOnly: step2Form.formState.isSubmitting, type: "numeric", children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "font-medium text-2xl text-text-placeholder-subtle", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't receive the code?" }), _jsx("button", { type: "button", className: "font-semibold text-button-secondary-fg disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
                                             await sendVerificationCodeMutation.mutateAsync({
                                                 channel: 'SMS',
                                                 recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),

package/dist/components/SignUp/SignUpKYC/SignUpKYCForm.js

@@ -436,7 +436,7 @@ export function SignUpKYCForm() {
                                                 o.field.onChange(details.value);
                                             }, onValueComplete: () => {
                                                 form2Ref.current?.requestSubmit();
-                                            }, children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "font-medium text-2xl text-text-placeholder-subtle", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "font-semibold text-button-secondary-fg disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
+                                            }, children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "font-medium text-2xl text-text-placeholder-subtle", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't receive the code?" }), _jsx("button", { type: "button", className: "font-semibold text-button-secondary-fg disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
                                             await sendVerificationCodeMutation.mutateAsync({
                                                 channel: 'SMS',
                                                 recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),

package/dist/components/TopProgress/TopProgressBar.d.ts

@@ -0,0 +1,6 @@
+type TopProgressBarPreset = 'Sunset' | 'Poppy' | 'Rosebud' | 'Sunshine' | 'Gold' | 'Twilight' | 'Powder' | 'Holly' | 'Northern Lights' | 'Raw Green' | 'Lime' | 'Nemesia' | 'Snowflake' | 'Blue Bird' | 'Blueprint' | 'Salvia' | 'Heartsease' | 'Amaranthus' | 'Candy' | 'Verbena';
+export declare const TopProgressBar: ({ preset, customPreset, }: {
+    preset?: TopProgressBarPreset;
+    customPreset?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TopProgress/TopProgressBar.js

@@ -0,0 +1,145 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+// CSS gradient presets (inline styles), approximate Tailwind palette colors
+// --> check presets here <3 https://www.creative-tim.com/twcomponents/gradient-generator
+const PRESET_BG = {
+    Sunset: 'linear-gradient(90deg, #ef4444 0%, #f97316 100%)',
+    Poppy: 'linear-gradient(90deg, #fb7185 0%, #ef4444 100%)',
+    Rosebud: 'linear-gradient(90deg, #ec4899 0%, #f43f5e 100%)',
+    Sunshine: 'linear-gradient(90deg, #fde68a 0%, #facc15 100%)',
+    Gold: 'linear-gradient(90deg, #fde68a 0%, #eab308 100%)',
+    Twilight: 'linear-gradient(90deg, #f59e0b 0%, #ec4899 100%)',
+    Powder: 'linear-gradient(90deg, #ddd6fe 0%, #fbcfe8 100%)',
+    Holly: 'linear-gradient(90deg, #bfdbfe 0%, #a5f3fc 100%)',
+    'Northern Lights': 'linear-gradient(90deg, #99f6e4 0%, #14b8a6 100%)',
+    'Raw Green': 'linear-gradient(90deg, #a3e635 0%, #84cc16 100%)',
+    Lime: 'linear-gradient(90deg, #2dd4bf 0%, #fef08a 100%)',
+    Nemesia: 'linear-gradient(90deg, #34d399 0%, #22d3ee 100%)',
+    Snowflake: 'linear-gradient(90deg, #d946ef 0%, #22d3ee 100%)',
+    'Blue Bird': 'linear-gradient(90deg, #06b6d4 0%, #3b82f6 100%)',
+    Blueprint: 'linear-gradient(90deg, #6366f1 0%, #3b82f6 100%)',
+    Salvia: 'linear-gradient(90deg, #2563eb 0%, #7c3aed 100%)',
+    Heartsease: 'linear-gradient(90deg, #c026d3 0%, #db2777 100%)',
+    Amaranthus: 'linear-gradient(90deg, #c026d3 0%, #9333ea 100%)',
+    Candy: 'linear-gradient(90deg, #d946ef 0%, #ec4899 100%)',
+    Verbena: 'linear-gradient(90deg, #8b5cf6 0%, #a855f7 100%)',
+};
+export const TopProgressBar = ({ preset = 'Gold', customPreset, }) => {
+    const [progress, setProgress] = useState(0);
+    const [visible, setVisible] = useState(false);
+    const incrementTimerRef = useRef(null);
+    const hideTimerRef = useRef(null);
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const currentUrl = useMemo(() => {
+        const sp = searchParams?.toString();
+        return `${pathname ?? ''}${sp ? `?${sp}` : ''}`;
+    }, [pathname, searchParams]);
+    const clearTimers = useCallback(() => {
+        if (incrementTimerRef.current) {
+            clearInterval(incrementTimerRef.current);
+            incrementTimerRef.current = null;
+        }
+        if (hideTimerRef.current) {
+            clearTimeout(hideTimerRef.current);
+            hideTimerRef.current = null;
+        }
+    }, []);
+    const startProgress = useCallback(() => {
+        clearTimers();
+        setVisible(true);
+        setProgress(8);
+        incrementTimerRef.current = window.setInterval(() => {
+            setProgress((prev) => {
+                if (prev >= 90)
+                    return prev;
+                const delta = Math.max(1, Math.min(10, 10 * Math.random()));
+                return Math.min(prev + delta, 90);
+            });
+        }, 250);
+    }, [clearTimers]);
+    const finishProgress = useCallback(() => {
+        setProgress(100);
+        if (incrementTimerRef.current) {
+            clearInterval(incrementTimerRef.current);
+            incrementTimerRef.current = null;
+        }
+        if (hideTimerRef.current) {
+            window.clearTimeout(hideTimerRef.current);
+        }
+        hideTimerRef.current = window.setTimeout(() => {
+            setVisible(false);
+            // Reset for next time after fade-out transition
+            hideTimerRef.current = window.setTimeout(() => setProgress(0), 200);
+        }, 150);
+    }, []);
+    // Trigger progress completion when URL changes
+    const previousUrl = useRef('');
+    useEffect(() => {
+        if (previousUrl.current !== currentUrl) {
+            previousUrl.current = currentUrl;
+            finishProgress();
+        }
+    }, [currentUrl, finishProgress]);
+    useEffect(() => {
+        const handleAnchorClick = (event) => {
+            const target = event.currentTarget;
+            if (!target)
+                return;
+            const href = target.getAttribute('href');
+            if (!href)
+                return;
+            const targetUrl = new URL(href, window.location.origin);
+            const current = new URL(window.location.href);
+            const isDifferent = targetUrl.origin !== current.origin ||
+                targetUrl.pathname !== current.pathname ||
+                targetUrl.search !== current.search;
+            if (isDifferent) {
+                startProgress();
+            }
+        };
+        const attachListeners = () => {
+            const anchors = document.querySelectorAll('a[href]');
+            anchors.forEach((a) => {
+                a.removeEventListener('click', handleAnchorClick);
+                a.addEventListener('click', handleAnchorClick);
+            });
+        };
+        const observer = new MutationObserver(() => attachListeners());
+        observer.observe(document, { childList: true, subtree: true });
+        attachListeners();
+        const originalPush = window.history.pushState;
+        const originalReplace = window.history.replaceState;
+        window.history.pushState = new Proxy(originalPush, {
+            apply: (target, thisArg, argArray) => {
+                const result = Reflect.apply(target, thisArg, argArray);
+                requestAnimationFrame(() => finishProgress());
+                return result;
+            },
+        });
+        window.history.replaceState = new Proxy(originalReplace, {
+            apply: (target, thisArg, argArray) => {
+                const result = Reflect.apply(target, thisArg, argArray);
+                requestAnimationFrame(() => finishProgress());
+                return result;
+            },
+        });
+        // Cleanup
+        return () => {
+            observer.disconnect();
+            const anchors = document.querySelectorAll('a[href]');
+            anchors.forEach((a) => a.removeEventListener('click', handleAnchorClick));
+            window.history.pushState = originalPush;
+            window.history.replaceState = originalReplace;
+            clearTimers();
+        };
+    }, [clearTimers, finishProgress, startProgress]);
+    return (_jsx("div", { "aria-hidden": true, className: "pointer-events-none fixed top-0 right-0 left-0 z-[9999]", children: _jsx("div", { className: twMerge('h-[3px] transition-[width,opacity] duration-200 ease-out', visible ? 'opacity-100' : 'opacity-0'), style: {
+                width: `${progress}%`,
+                background: customPreset ?? PRESET_BG[preset],
+                boxShadow: '0 0 10px rgba(255, 255, 255, 0.6)',
+            } }) }));
+};

package/dist/components/TopProgress/index.d.ts

@@ -0,0 +1 @@
+export * from './TopProgressBar';

package/dist/components/TopProgress/index.js

@@ -0,0 +1 @@
+export * from './TopProgressBar.js';