shad-m 1.0.2 → 1.0.3

package/dist/common/interactive/otp-dialog/otp-dialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/otp-dialog/otp-dialog.tsx"],"names":[],"mappings":"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","file":"otp-dialog.mjs","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Button } from '../../../components/button';\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../../../components/input-otp';\nimport { Spinner } from '../../../components/spinner';\nimport { debounce } from '../../../lib/helpers';\nimport { Countdown } from '../../display/countdown';\nimport { AlertDialogWrapper } from '../alert-dialog-wrapper';\nimport { initialOtpDialogState, otpDialogReducer } from './reducer';\nimport { OtpDialogActionType, type OtpDialogProps } from './types';\nimport { maskPhoneNumber, normalizeErrorMessage } from './utils';\nimport { cn } from '@/lib';\n\n/**\n * OtpDialog - A reusable OTP verification dialog component\n *\n * @example\n * // Controlled pattern (with external state)\n * const [open, setOpen] = useState(false);\n * <OtpDialog\n *   open={open}\n *   onOpenChange={setOpen}\n *   onVerifyOtp={async (otp) => {\n *     try {\n *       await verifyApi(otp);\n *       return { success: true };\n *     } catch (error) {\n *       return { success: false, error: 'Invalid OTP' };\n *     }\n *   }}\n * />\n *\n * @example\n * // Uncontrolled pattern (with trigger button)\n * <OtpDialog\n *   trigger={<Button>Verify Phone</Button>}\n *   onVerifyOtp={async (otp) => {\n *     await verifyApi(otp); // throws on error\n *   }}\n * />\n */\n\nconst OtpDialog: React.FC<OtpDialogProps> = ({\n  trigger,\n  triggerAsChild,\n  triggerClassName,\n  open,\n  onOpenChange,\n  defaultOpen,\n  title = 'Nhập mã OTP',\n  description,\n  size = 'lg',\n  hasCloseButton,\n  contentClassName,\n  phoneNumber,\n  needToMaskPhoneNumber = true,\n  countdownDuration = 300,\n  onVerifyOtp,\n  onResendOtp,\n  isVerifying = false,\n  isResending = false,\n  error,\n  onSuccess,\n  onError,\n  verifyButtonText = 'Xác nhận',\n  resendButtonText = 'Gửi lại OTP',\n  phonePromptText = 'OTP được gửi qua số điện thoại',\n  customInstructions,\n  otpLength = 6,\n  otpPattern = '^[0-9]+$',\n  autoFocus = true,\n  autoSubmit = true, // Default to auto-submit\n  trackingNameView,\n  trackingNameClose,\n  trackingData,\n  trackingIndex,\n}) => {\n  const [state, dispatch] = React.useReducer(otpDialogReducer, initialOtpDialogState);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const isVerifyingRef = React.useRef(false); // Prevent double submission\n\n  // Use external error if provided, otherwise use internal error\n  const displayError = error || state.internalError;\n\n  // Mask phone number for display\n  const maskedPhone = React.useMemo(\n    () => (needToMaskPhoneNumber ? maskPhoneNumber(phoneNumber) : phoneNumber),\n    [phoneNumber, needToMaskPhoneNumber],\n  );\n\n  // Reset state when dialog opens/closes and handle auto-focus\n  React.useEffect(() => {\n    if (open) {\n      dispatch({ type: OtpDialogActionType.RESET });\n      isVerifyingRef.current = false; // Reset verifying flag\n\n      if (autoFocus) {\n        // Focus input after dialog animation completes\n        // Using requestAnimationFrame + setTimeout for better timing\n        let rafId: number;\n        let timerId: NodeJS.Timeout;\n\n        rafId = requestAnimationFrame(() => {\n          timerId = setTimeout(() => {\n            const otpInput = document.querySelector('[data-input-otp]');\n            if (otpInput instanceof HTMLInputElement) {\n              otpInput.focus();\n            }\n          }, 150);\n        });\n\n        return () => {\n          cancelAnimationFrame(rafId);\n          clearTimeout(timerId);\n        };\n      }\n    }\n  }, [open, autoFocus]);\n\n  const handleResendOtp = async () => {\n    if (!onResendOtp) return;\n\n    try {\n      dispatch({ type: OtpDialogActionType.SET_ERROR, payload: null });\n      await onResendOtp();\n\n      // Reset countdown and OTP input on successful resend\n      dispatch({ type: OtpDialogActionType.SET_COUNTDOWN_ACTIVE, payload: true });\n      dispatch({ type: OtpDialogActionType.INCREMENT_COUNTDOWN_KEY });\n      dispatch({ type: OtpDialogActionType.SET_OTP, payload: '' });\n    } catch (err: any) {\n      const errorMessage = normalizeErrorMessage(err) || 'Gửi lại OTP thất bại';\n      dispatch({ type: OtpDialogActionType.SET_ERROR, payload: errorMessage });\n      if (onError) {\n        onError(errorMessage);\n      }\n    }\n  };\n\n  const handleVerifyOtp = React.useCallback(\n    async (otpValue?: string) => {\n      const otpToVerify = otpValue || state.otp;\n\n      // Prevent double submission - use both ref and state check\n      if (isVerifyingRef.current || state.isVerifying) {\n        console.warn('[OTP] Verification already in progress, skipping');\n        return;\n      }\n\n      if (otpToVerify.length !== otpLength) {\n        const errorMessage = `Vui lòng nhập đủ ${otpLength} số OTP`;\n        dispatch({ type: OtpDialogActionType.SET_ERROR, payload: errorMessage });\n        if (onError) {\n          onError(errorMessage);\n        }\n        return;\n      }\n\n      try {\n        // Set both ref and state to prevent any race conditions\n        isVerifyingRef.current = true;\n        dispatch({ type: OtpDialogActionType.SET_IS_VERIFYING, payload: true });\n        dispatch({ type: OtpDialogActionType.SET_ERROR, payload: null });\n\n        console.log('[OTP] Starting verification with value:', otpToVerify);\n\n        // Call onVerifyOtp and handle both return value and thrown errors\n        const result = await onVerifyOtp(otpToVerify);\n\n        console.log('[OTP] Verification result:', result);\n\n        // IMPORTANT: Only close dialog if explicitly returns { success: true }\n        // Any other return value is treated as failure to keep dialog open\n        if (result?.success === true) {\n          // Verification successful - execute success callback and close dialog\n          if (onSuccess) {\n            await onSuccess();\n          }\n\n          // Close dialog after all success handlers complete\n          if (onOpenChange) {\n            onOpenChange(false);\n          }\n        } else {\n          // Verification failed or returned non-success - keep dialog open\n          const errorMessage = result?.error || 'Mã OTP không đúng hoặc hết hạn';\n          dispatch({ type: OtpDialogActionType.SET_ERROR, payload: errorMessage });\n          dispatch({ type: OtpDialogActionType.SET_OTP, payload: '' }); // Clear OTP for retry\n\n          if (onError) {\n            onError(errorMessage);\n          }\n\n          // Re-focus input after clearing OTP\n          setTimeout(() => {\n            const otpInput = document.querySelector('[data-input-otp]');\n            if (otpInput instanceof HTMLInputElement) {\n              otpInput.focus();\n            }\n          }, 100);\n        }\n      } catch (err: any) {\n        // Thrown error - treat as verification failure\n        console.error('[OTP] Verification error:', err);\n        const errorMessage = normalizeErrorMessage(err);\n        dispatch({ type: OtpDialogActionType.SET_ERROR, payload: errorMessage });\n        dispatch({ type: OtpDialogActionType.SET_OTP, payload: '' }); // Clear OTP for retry\n\n        if (onError) {\n          onError(errorMessage);\n        }\n\n        // Re-focus input after clearing OTP\n        setTimeout(() => {\n          const otpInput = document.querySelector('[data-input-otp]');\n          if (otpInput instanceof HTMLInputElement) {\n            otpInput.focus();\n          }\n        }, 100);\n      } finally {\n        // CRITICAL: Always reset both ref and state in finally block\n        // This ensures cleanup even if there's an early return or exception\n        console.log('[OTP] Verification complete, resetting flags');\n        isVerifyingRef.current = false;\n        dispatch({ type: OtpDialogActionType.SET_IS_VERIFYING, payload: false });\n      }\n    },\n    // Include state.otp to ensure fresh value is captured in closure\n    // Even though we prefer passed otpValue, state.otp is used as fallback\n    [otpLength, onVerifyOtp, onSuccess, onOpenChange, onError, state.otp],\n  );\n\n  const handleCountdownComplete = () => {\n    dispatch({ type: OtpDialogActionType.SET_COUNTDOWN_ACTIVE, payload: false });\n  };\n\n  // Debounced auto-submit function with longer delay to prevent race conditions\n  // Using 300ms to ensure user has finished typing and to give enough time\n  // for any pending state updates to complete before submission\n  //\n  // FIXED: Store debounce instance in ref, but pass fresh handleVerifyOtp on each call\n  // to avoid stale closure issues while maintaining stable debounce timer\n  const debouncedAutoSubmitRef = React.useRef(\n    debounce(async (otpValue: string) => {\n      // Additional check: only submit if not currently verifying\n      if (isVerifyingRef.current) {\n        console.warn('[OTP] Skipping auto-submit, verification in progress');\n        return;\n      }\n\n      console.log('[OTP] Auto-submitting OTP:', otpValue);\n      // Don't pass verifyFn as param - will be accessed via closure from latest render\n    }, 300),\n  );\n\n  // Cancel debounce when dialog closes or component unmounts\n  React.useEffect(() => {\n    if (!open) {\n      // Cancel any pending debounced calls when dialog closes\n      debouncedAutoSubmitRef.current.cancel();\n    }\n\n    return () => {\n      // Cleanup on unmount\n      debouncedAutoSubmitRef.current.cancel();\n    };\n  }, [open]); // Re-run when dialog open state changes\n\n  const handleOtpChange = (value: string) => {\n    // Prevent input changes when verifying or resending\n    if (state.isVerifying || isResending) {\n      console.warn('[OTP] Input locked during verification/resend');\n      return;\n    }\n\n    console.log('[OTP] Value changed:', value, 'Length:', value.length);\n    dispatch({ type: OtpDialogActionType.SET_OTP, payload: value });\n    // Clear errors when user starts typing\n    dispatch({ type: OtpDialogActionType.SET_ERROR, payload: null });\n\n    // Auto-submit when OTP is complete\n    if (autoSubmit && value.length === otpLength) {\n      console.log('[OTP] Auto-submit triggered for complete OTP');\n      // Debounce the submission, then call latest handleVerifyOtp\n      // This ensures we always use the most recent handleVerifyOtp reference\n      debouncedAutoSubmitRef\n        .current(value)\n        .then(() => {\n          // After debounce completes, call the current handleVerifyOtp\n          // This avoids stale closure by accessing handleVerifyOtp at execution time\n          return handleVerifyOtp(value);\n        })\n        .catch((err) => {\n          // Error is already handled in handleVerifyOtp\n          console.error('[OTP] Auto-submit error:', err);\n        });\n    }\n  };\n\n  const renderCountdownComp = React.useCallback(() => {\n    return (\n      <Countdown\n        key={state.countdownKey}\n        duration={countdownDuration}\n        className=\"text-primary\"\n        active={state.isCountdownActive}\n        onComplete={handleCountdownComplete}\n        formatTime={(minutes: number, seconds: number) =>\n          `(${minutes}:${seconds.toString().padStart(2, '0')})`\n        }\n      />\n    );\n  }, [countdownDuration, state.isCountdownActive, state.countdownKey]);\n\n  return (\n    <AlertDialogWrapper\n      trigger={trigger}\n      triggerAsChild={triggerAsChild}\n      triggerClassName={triggerClassName}\n      open={open}\n      onOpenChange={onOpenChange}\n      defaultOpen={defaultOpen}\n      title={title}\n      description={description}\n      hasCloseButton={hasCloseButton}\n      contentClassName={contentClassName}\n      showDefaultActions={false}\n      size={size}\n      autoHeight\n      childrenClassName=\"h-full p-4 pt-0\"\n      showFooter={!autoSubmit}\n      trackingNameView={trackingNameView}\n      trackingNameClose={trackingNameClose}\n      trackingData={trackingData}\n      trackingIndex={trackingIndex}\n      footerContent={\n        <div className=\"flex w-full flex-col gap-3\">\n          <Button\n            onClick={() => handleVerifyOtp()}\n            disabled={state.otp.length !== otpLength || isVerifying}\n            loading={isVerifying}\n            className=\"w-full\"\n          >\n            {verifyButtonText}\n          </Button>\n        </div>\n      }\n    >\n      <div className=\"flex h-full flex-col items-center justify-center gap-4\">\n        {/* Phone number info */}\n        {phoneNumber && (\n          <div className=\"text-center\">\n            <p className=\"text-ink-500s font-medium\">\n              {phonePromptText} <span className=\"font-medium\">{maskedPhone}</span>\n            </p>\n          </div>\n        )}\n\n        {/* Custom instructions */}\n        {customInstructions && <div className=\"text-center\">{customInstructions}</div>}\n\n        {/* OTP Input */}\n        <div className=\"flex justify-center\">\n          <InputOTP\n            ref={inputRef}\n            maxLength={otpLength}\n            value={state.otp}\n            onChange={handleOtpChange}\n            pattern={otpPattern}\n            error={!!displayError}\n            disabled={state.isVerifying || isResending}\n          >\n            <InputOTPGroup>\n              {Array.from({ length: otpLength }, (_, index) => (\n                <InputOTPSlot key={index} index={index} />\n              ))}\n            </InputOTPGroup>\n          </InputOTP>\n        </div>\n\n        {/* Error message */}\n        {displayError && (\n          <div className=\"text-center\">\n            <p className=\"text-red-500\">{displayError}</p>\n          </div>\n        )}\n\n        {/* Countdown and resend */}\n        {onResendOtp && (\n          <div className=\"text-ink-400s flex items-center justify-center gap-1\">\n            {state.isVerifying && (\n              <>\n                <span>Đang xác minh</span>\n                <Spinner size=\"sm\" />\n              </>\n            )}\n            <div\n              className={cn({\n                hidden: !state.isCountdownActive || state.isVerifying,\n              })}\n            >\n              {resendButtonText} {renderCountdownComp()}\n            </div>\n\n            {!state.isVerifying && !state.isCountdownActive && (\n              <Button\n                variant=\"plain\"\n                size=\"sm\"\n                onClick={handleResendOtp}\n                disabled={isResending}\n                loading={isResending}\n              >\n                {resendButtonText}\n              </Button>\n            )}\n          </div>\n        )}\n      </div>\n    </AlertDialogWrapper>\n  );\n};\n\nexport { OtpDialog };\nexport type { OtpDialogProps };\n"]}

package/dist/common/interactive/otp-dialog/reducer.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var types = require('./types');
+
+const otpDialogReducer = (state, action) => {
+  switch (action.type) {
+    case types.OtpDialogActionType.SET_OTP:
+      return { ...state, otp: action.payload };
+    case types.OtpDialogActionType.SET_ERROR:
+      return { ...state, internalError: action.payload };
+    case types.OtpDialogActionType.SET_COUNTDOWN_ACTIVE:
+      return { ...state, isCountdownActive: action.payload };
+    case types.OtpDialogActionType.INCREMENT_COUNTDOWN_KEY:
+      return { ...state, countdownKey: state.countdownKey + 1 };
+    case types.OtpDialogActionType.SET_IS_VERIFYING:
+      return { ...state, isVerifying: action.payload };
+    case types.OtpDialogActionType.RESET:
+      return {
+        otp: "",
+        isCountdownActive: true,
+        countdownKey: state.countdownKey + 1,
+        internalError: null,
+        isVerifying: false
+      };
+    default:
+      return state;
+  }
+};
+const initialOtpDialogState = {
+  otp: "",
+  isCountdownActive: true,
+  countdownKey: 0,
+  internalError: null,
+  isVerifying: false
+};
+
+exports.initialOtpDialogState = initialOtpDialogState;
+exports.otpDialogReducer = otpDialogReducer;
+//# sourceMappingURL=reducer.js.map
+//# sourceMappingURL=reducer.js.map

package/dist/common/interactive/otp-dialog/reducer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/otp-dialog/reducer.ts"],"names":["OtpDialogActionType"],"mappings":";;;;AAMO,MAAM,gBAAA,GAAmB,CAC9B,KAAA,EACA,MAAA,KACmB;AACnB,EAAA,QAAQ,OAAO,IAAA;AAAM,IACnB,KAAKA,yBAAA,CAAoB,OAAA;AACvB,MAAA,OAAO,EAAE,GAAG,KAAA,EAAO,GAAA,EAAK,OAAO,OAAA,EAAQ;AAAA,IAEzC,KAAKA,yBAAA,CAAoB,SAAA;AACvB,MAAA,OAAO,EAAE,GAAG,KAAA,EAAO,aAAA,EAAe,OAAO,OAAA,EAAQ;AAAA,IAEnD,KAAKA,yBAAA,CAAoB,oBAAA;AACvB,MAAA,OAAO,EAAE,GAAG,KAAA,EAAO,iBAAA,EAAmB,OAAO,OAAA,EAAQ;AAAA,IAEvD,KAAKA,yBAAA,CAAoB,uBAAA;AACvB,MAAA,OAAO,EAAE,GAAG,KAAA,EAAO,YAAA,EAAc,KAAA,CAAM,eAAe,CAAA,EAAE;AAAA,IAE1D,KAAKA,yBAAA,CAAoB,gBAAA;AACvB,MAAA,OAAO,EAAE,GAAG,KAAA,EAAO,WAAA,EAAa,OAAO,OAAA,EAAQ;AAAA,IAEjD,KAAKA,yBAAA,CAAoB,KAAA;AACvB,MAAA,OAAO;AAAA,QACL,GAAA,EAAK,EAAA;AAAA,QACL,iBAAA,EAAmB,IAAA;AAAA,QACnB,YAAA,EAAc,MAAM,YAAA,GAAe,CAAA;AAAA,QACnC,aAAA,EAAe,IAAA;AAAA,QACf,WAAA,EAAa;AAAA,OACf;AAAA,IAEF;AACE,MAAA,OAAO,KAAA;AAAA;AAEb;AAKO,MAAM,qBAAA,GAAwC;AAAA,EACnD,GAAA,EAAK,EAAA;AAAA,EACL,iBAAA,EAAmB,IAAA;AAAA,EACnB,YAAA,EAAc,CAAA;AAAA,EACd,aAAA,EAAe,IAAA;AAAA,EACf,WAAA,EAAa;AACf","file":"reducer.js","sourcesContent":["import { OtpDialogActionType, type OtpDialogState, type OtpDialogAction } from './types';\n\n/**\n * OTP Dialog Reducer\n * Manages state transitions for the OTP dialog component\n */\nexport const otpDialogReducer = (\n  state: OtpDialogState,\n  action: OtpDialogAction,\n): OtpDialogState => {\n  switch (action.type) {\n    case OtpDialogActionType.SET_OTP:\n      return { ...state, otp: action.payload };\n\n    case OtpDialogActionType.SET_ERROR:\n      return { ...state, internalError: action.payload };\n\n    case OtpDialogActionType.SET_COUNTDOWN_ACTIVE:\n      return { ...state, isCountdownActive: action.payload };\n\n    case OtpDialogActionType.INCREMENT_COUNTDOWN_KEY:\n      return { ...state, countdownKey: state.countdownKey + 1 };\n\n    case OtpDialogActionType.SET_IS_VERIFYING:\n      return { ...state, isVerifying: action.payload };\n\n    case OtpDialogActionType.RESET:\n      return {\n        otp: '',\n        isCountdownActive: true,\n        countdownKey: state.countdownKey + 1,\n        internalError: null,\n        isVerifying: false,\n      };\n\n    default:\n      return state;\n  }\n};\n\n/**\n * Initial state for OTP dialog\n */\nexport const initialOtpDialogState: OtpDialogState = {\n  otp: '',\n  isCountdownActive: true,\n  countdownKey: 0,\n  internalError: null,\n  isVerifying: false,\n};\n"]}

package/dist/common/interactive/otp-dialog/reducer.mjs

@@ -0,0 +1,37 @@
+import { OtpDialogActionType } from './types';
+
+const otpDialogReducer = (state, action) => {
+  switch (action.type) {
+    case OtpDialogActionType.SET_OTP:
+      return { ...state, otp: action.payload };
+    case OtpDialogActionType.SET_ERROR:
+      return { ...state, internalError: action.payload };
+    case OtpDialogActionType.SET_COUNTDOWN_ACTIVE:
+      return { ...state, isCountdownActive: action.payload };
+    case OtpDialogActionType.INCREMENT_COUNTDOWN_KEY:
+      return { ...state, countdownKey: state.countdownKey + 1 };
+    case OtpDialogActionType.SET_IS_VERIFYING:
+      return { ...state, isVerifying: action.payload };
+    case OtpDialogActionType.RESET:
+      return {
+        otp: "",
+        isCountdownActive: true,
+        countdownKey: state.countdownKey + 1,
+        internalError: null,
+        isVerifying: false
+      };
+    default:
+      return state;
+  }
+};
+const initialOtpDialogState = {
+  otp: "",
+  isCountdownActive: true,
+  countdownKey: 0,
+  internalError: null,
+  isVerifying: false
+};
+
+export { initialOtpDialogState, otpDialogReducer };
+//# sourceMappingURL=reducer.mjs.map
+//# sourceMappingURL=reducer.mjs.map

package/dist/common/interactive/otp-dialog/reducer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/otp-dialog/reducer.ts"],"names":[],"mappings":";;AAMO,MAAM,gBAAA,GAAmB,CAC9B,KAAA,EACA,MAAA,KACmB;AACnB,EAAA,QAAQ,OAAO,IAAA;AAAM,IACnB,KAAK,mBAAA,CAAoB,OAAA;AACvB,MAAA,OAAO,EAAE,GAAG,KAAA,EAAO,GAAA,EAAK,OAAO,OAAA,EAAQ;AAAA,IAEzC,KAAK,mBAAA,CAAoB,SAAA;AACvB,MAAA,OAAO,EAAE,GAAG,KAAA,EAAO,aAAA,EAAe,OAAO,OAAA,EAAQ;AAAA,IAEnD,KAAK,mBAAA,CAAoB,oBAAA;AACvB,MAAA,OAAO,EAAE,GAAG,KAAA,EAAO,iBAAA,EAAmB,OAAO,OAAA,EAAQ;AAAA,IAEvD,KAAK,mBAAA,CAAoB,uBAAA;AACvB,MAAA,OAAO,EAAE,GAAG,KAAA,EAAO,YAAA,EAAc,KAAA,CAAM,eAAe,CAAA,EAAE;AAAA,IAE1D,KAAK,mBAAA,CAAoB,gBAAA;AACvB,MAAA,OAAO,EAAE,GAAG,KAAA,EAAO,WAAA,EAAa,OAAO,OAAA,EAAQ;AAAA,IAEjD,KAAK,mBAAA,CAAoB,KAAA;AACvB,MAAA,OAAO;AAAA,QACL,GAAA,EAAK,EAAA;AAAA,QACL,iBAAA,EAAmB,IAAA;AAAA,QACnB,YAAA,EAAc,MAAM,YAAA,GAAe,CAAA;AAAA,QACnC,aAAA,EAAe,IAAA;AAAA,QACf,WAAA,EAAa;AAAA,OACf;AAAA,IAEF;AACE,MAAA,OAAO,KAAA;AAAA;AAEb;AAKO,MAAM,qBAAA,GAAwC;AAAA,EACnD,GAAA,EAAK,EAAA;AAAA,EACL,iBAAA,EAAmB,IAAA;AAAA,EACnB,YAAA,EAAc,CAAA;AAAA,EACd,aAAA,EAAe,IAAA;AAAA,EACf,WAAA,EAAa;AACf","file":"reducer.mjs","sourcesContent":["import { OtpDialogActionType, type OtpDialogState, type OtpDialogAction } from './types';\n\n/**\n * OTP Dialog Reducer\n * Manages state transitions for the OTP dialog component\n */\nexport const otpDialogReducer = (\n  state: OtpDialogState,\n  action: OtpDialogAction,\n): OtpDialogState => {\n  switch (action.type) {\n    case OtpDialogActionType.SET_OTP:\n      return { ...state, otp: action.payload };\n\n    case OtpDialogActionType.SET_ERROR:\n      return { ...state, internalError: action.payload };\n\n    case OtpDialogActionType.SET_COUNTDOWN_ACTIVE:\n      return { ...state, isCountdownActive: action.payload };\n\n    case OtpDialogActionType.INCREMENT_COUNTDOWN_KEY:\n      return { ...state, countdownKey: state.countdownKey + 1 };\n\n    case OtpDialogActionType.SET_IS_VERIFYING:\n      return { ...state, isVerifying: action.payload };\n\n    case OtpDialogActionType.RESET:\n      return {\n        otp: '',\n        isCountdownActive: true,\n        countdownKey: state.countdownKey + 1,\n        internalError: null,\n        isVerifying: false,\n      };\n\n    default:\n      return state;\n  }\n};\n\n/**\n * Initial state for OTP dialog\n */\nexport const initialOtpDialogState: OtpDialogState = {\n  otp: '',\n  isCountdownActive: true,\n  countdownKey: 0,\n  internalError: null,\n  isVerifying: false,\n};\n"]}

package/dist/common/interactive/otp-dialog/types.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var OtpDialogActionType = /* @__PURE__ */ ((OtpDialogActionType2) => {
+  OtpDialogActionType2["SET_OTP"] = "SET_OTP";
+  OtpDialogActionType2["SET_ERROR"] = "SET_ERROR";
+  OtpDialogActionType2["SET_COUNTDOWN_ACTIVE"] = "SET_COUNTDOWN_ACTIVE";
+  OtpDialogActionType2["INCREMENT_COUNTDOWN_KEY"] = "INCREMENT_COUNTDOWN_KEY";
+  OtpDialogActionType2["SET_IS_VERIFYING"] = "SET_IS_VERIFYING";
+  OtpDialogActionType2["RESET"] = "RESET";
+  return OtpDialogActionType2;
+})(OtpDialogActionType || {});
+
+exports.OtpDialogActionType = OtpDialogActionType;
+//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

package/dist/common/interactive/otp-dialog/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/otp-dialog/types.ts"],"names":["OtpDialogActionType"],"mappings":";;AAMO,IAAK,mBAAA,qBAAAA,oBAAAA,KAAL;AACL,EAAAA,qBAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,qBAAA,WAAA,CAAA,GAAY,WAAA;AACZ,EAAAA,qBAAA,sBAAA,CAAA,GAAuB,sBAAA;AACvB,EAAAA,qBAAA,yBAAA,CAAA,GAA0B,yBAAA;AAC1B,EAAAA,qBAAA,kBAAA,CAAA,GAAmB,kBAAA;AACnB,EAAAA,qBAAA,OAAA,CAAA,GAAQ,OAAA;AANE,EAAA,OAAAA,oBAAAA;AAAA,CAAA,EAAA,mBAAA,IAAA,EAAA","file":"types.js","sourcesContent":["/**\n * OTP Dialog Types\n */\n\nimport * as React from 'react';\n\nexport enum OtpDialogActionType {\n  SET_OTP = 'SET_OTP',\n  SET_ERROR = 'SET_ERROR',\n  SET_COUNTDOWN_ACTIVE = 'SET_COUNTDOWN_ACTIVE',\n  INCREMENT_COUNTDOWN_KEY = 'INCREMENT_COUNTDOWN_KEY',\n  SET_IS_VERIFYING = 'SET_IS_VERIFYING',\n  RESET = 'RESET',\n}\n\nexport type OtpDialogState = {\n  otp: string;\n  isCountdownActive: boolean;\n  countdownKey: number;\n  internalError: string | null;\n  isVerifying: boolean;\n};\n\nexport type OtpDialogAction =\n  | { type: OtpDialogActionType.SET_OTP; payload: string }\n  | { type: OtpDialogActionType.SET_ERROR; payload: string | null }\n  | { type: OtpDialogActionType.SET_COUNTDOWN_ACTIVE; payload: boolean }\n  | { type: OtpDialogActionType.INCREMENT_COUNTDOWN_KEY }\n  | { type: OtpDialogActionType.SET_IS_VERIFYING; payload: boolean }\n  | { type: OtpDialogActionType.RESET };\n\nexport interface OtpDialogProps {\n  // Dialog control - supports both controlled and uncontrolled patterns\n  trigger?: React.ReactNode; // Optional trigger button (uncontrolled)\n  triggerAsChild?: boolean; // Whether trigger should be rendered as child\n  triggerClassName?: string; // Custom className for trigger\n  open?: boolean; // For controlled usage\n  onOpenChange?: (open: boolean) => void; // For controlled usage\n  defaultOpen?: boolean; // For uncontrolled usage with trigger\n\n  // Dialog customization\n  title?: string;\n  description?: string; // Additional description under title\n  size?: 'sm' | 'md' | 'lg' | 'xl';\n  hasCloseButton?: boolean; // Show/hide close button (X)\n  contentClassName?: string; // Custom className for dialog content\n\n  // OTP specific props\n  phoneNumber?: string;\n  countdownDuration?: number; // in seconds, default 300 (5 minutes)\n  needToMaskPhoneNumber?: boolean; // Whether to mask phone number, default true\n  /**\n   * Verify OTP function\n   * Should return:\n   * - { success: true } on successful verification\n   * - { success: false, error: string } on failed verification\n   * - Or throw error (will be caught and treated as failure)\n   */\n  onVerifyOtp: (otp: string) => Promise<{ success: boolean; error?: string } | void>;\n  onResendOtp?: () => Promise<void>;\n  isVerifying?: boolean;\n  isResending?: boolean;\n  error?: string | null;\n  onSuccess?: () => void | Promise<void>;\n  onError?: (error: string) => void;\n\n  // Customization props\n  verifyButtonText?: string;\n  resendButtonText?: string;\n  phonePromptText?: string;\n  customInstructions?: React.ReactNode;\n\n  // OTP input customization\n  otpLength?: number;\n  otpPattern?: string;\n  autoFocus?: boolean;\n\n  // Auto-submit behavior\n  autoSubmit?: boolean; // Default true - auto verify when OTP is complete\n\n  // Tracking props (from AlertDialogWrapper)\n  trackingNameView?: string;\n  trackingNameClose?: string;\n  trackingData?: Record<string, any>;\n  trackingIndex?: number;\n}\n"]}

package/dist/common/interactive/otp-dialog/types.mjs

@@ -0,0 +1,13 @@
+var OtpDialogActionType = /* @__PURE__ */ ((OtpDialogActionType2) => {
+  OtpDialogActionType2["SET_OTP"] = "SET_OTP";
+  OtpDialogActionType2["SET_ERROR"] = "SET_ERROR";
+  OtpDialogActionType2["SET_COUNTDOWN_ACTIVE"] = "SET_COUNTDOWN_ACTIVE";
+  OtpDialogActionType2["INCREMENT_COUNTDOWN_KEY"] = "INCREMENT_COUNTDOWN_KEY";
+  OtpDialogActionType2["SET_IS_VERIFYING"] = "SET_IS_VERIFYING";
+  OtpDialogActionType2["RESET"] = "RESET";
+  return OtpDialogActionType2;
+})(OtpDialogActionType || {});
+
+export { OtpDialogActionType };
+//# sourceMappingURL=types.mjs.map
+//# sourceMappingURL=types.mjs.map

package/dist/common/interactive/otp-dialog/types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/otp-dialog/types.ts"],"names":["OtpDialogActionType"],"mappings":"AAMO,IAAK,mBAAA,qBAAAA,oBAAAA,KAAL;AACL,EAAAA,qBAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,qBAAA,WAAA,CAAA,GAAY,WAAA;AACZ,EAAAA,qBAAA,sBAAA,CAAA,GAAuB,sBAAA;AACvB,EAAAA,qBAAA,yBAAA,CAAA,GAA0B,yBAAA;AAC1B,EAAAA,qBAAA,kBAAA,CAAA,GAAmB,kBAAA;AACnB,EAAAA,qBAAA,OAAA,CAAA,GAAQ,OAAA;AANE,EAAA,OAAAA,oBAAAA;AAAA,CAAA,EAAA,mBAAA,IAAA,EAAA","file":"types.mjs","sourcesContent":["/**\n * OTP Dialog Types\n */\n\nimport * as React from 'react';\n\nexport enum OtpDialogActionType {\n  SET_OTP = 'SET_OTP',\n  SET_ERROR = 'SET_ERROR',\n  SET_COUNTDOWN_ACTIVE = 'SET_COUNTDOWN_ACTIVE',\n  INCREMENT_COUNTDOWN_KEY = 'INCREMENT_COUNTDOWN_KEY',\n  SET_IS_VERIFYING = 'SET_IS_VERIFYING',\n  RESET = 'RESET',\n}\n\nexport type OtpDialogState = {\n  otp: string;\n  isCountdownActive: boolean;\n  countdownKey: number;\n  internalError: string | null;\n  isVerifying: boolean;\n};\n\nexport type OtpDialogAction =\n  | { type: OtpDialogActionType.SET_OTP; payload: string }\n  | { type: OtpDialogActionType.SET_ERROR; payload: string | null }\n  | { type: OtpDialogActionType.SET_COUNTDOWN_ACTIVE; payload: boolean }\n  | { type: OtpDialogActionType.INCREMENT_COUNTDOWN_KEY }\n  | { type: OtpDialogActionType.SET_IS_VERIFYING; payload: boolean }\n  | { type: OtpDialogActionType.RESET };\n\nexport interface OtpDialogProps {\n  // Dialog control - supports both controlled and uncontrolled patterns\n  trigger?: React.ReactNode; // Optional trigger button (uncontrolled)\n  triggerAsChild?: boolean; // Whether trigger should be rendered as child\n  triggerClassName?: string; // Custom className for trigger\n  open?: boolean; // For controlled usage\n  onOpenChange?: (open: boolean) => void; // For controlled usage\n  defaultOpen?: boolean; // For uncontrolled usage with trigger\n\n  // Dialog customization\n  title?: string;\n  description?: string; // Additional description under title\n  size?: 'sm' | 'md' | 'lg' | 'xl';\n  hasCloseButton?: boolean; // Show/hide close button (X)\n  contentClassName?: string; // Custom className for dialog content\n\n  // OTP specific props\n  phoneNumber?: string;\n  countdownDuration?: number; // in seconds, default 300 (5 minutes)\n  needToMaskPhoneNumber?: boolean; // Whether to mask phone number, default true\n  /**\n   * Verify OTP function\n   * Should return:\n   * - { success: true } on successful verification\n   * - { success: false, error: string } on failed verification\n   * - Or throw error (will be caught and treated as failure)\n   */\n  onVerifyOtp: (otp: string) => Promise<{ success: boolean; error?: string } | void>;\n  onResendOtp?: () => Promise<void>;\n  isVerifying?: boolean;\n  isResending?: boolean;\n  error?: string | null;\n  onSuccess?: () => void | Promise<void>;\n  onError?: (error: string) => void;\n\n  // Customization props\n  verifyButtonText?: string;\n  resendButtonText?: string;\n  phonePromptText?: string;\n  customInstructions?: React.ReactNode;\n\n  // OTP input customization\n  otpLength?: number;\n  otpPattern?: string;\n  autoFocus?: boolean;\n\n  // Auto-submit behavior\n  autoSubmit?: boolean; // Default true - auto verify when OTP is complete\n\n  // Tracking props (from AlertDialogWrapper)\n  trackingNameView?: string;\n  trackingNameClose?: string;\n  trackingData?: Record<string, any>;\n  trackingIndex?: number;\n}\n"]}

package/dist/common/interactive/otp-dialog/utils.js

@@ -0,0 +1,24 @@
+'use strict';
+
+const maskPhoneNumber = (phoneNumber) => {
+  if (!phoneNumber) return "";
+  const cleanPhone = phoneNumber.replace(/[^\d]/g, "");
+  if (cleanPhone.length >= 10) {
+    return cleanPhone.replace(/(\d{4})(\d+)(\d{3})/, "$1***$3");
+  } else if (cleanPhone.length >= 7) {
+    return cleanPhone.replace(/(\d{3})(\d+)(\d{2})/, "$1***$3");
+  }
+  return phoneNumber;
+};
+const normalizeErrorMessage = (err) => {
+  const errorMessage = err?.message || err?.meta?.message || "";
+  if (errorMessage.toLowerCase().includes("invalid") || errorMessage.toLowerCase().includes("wrong") || errorMessage.toLowerCase().includes("expired")) {
+    return "M\xE3 OTP kh\xF4ng \u0111\xFAng ho\u1EB7c h\u1EBFt h\u1EA1n";
+  }
+  return errorMessage || "\u0110\xE3 c\xF3 l\u1ED7i x\u1EA3y ra";
+};
+
+exports.maskPhoneNumber = maskPhoneNumber;
+exports.normalizeErrorMessage = normalizeErrorMessage;
+//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

package/dist/common/interactive/otp-dialog/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/otp-dialog/utils.ts"],"names":[],"mappings":";;AASO,MAAM,eAAA,GAAkB,CAAC,WAAA,KAAiC;AAC/D,EAAA,IAAI,CAAC,aAAa,OAAO,EAAA;AAGzB,EAAA,MAAM,UAAA,GAAa,WAAA,CAAY,OAAA,CAAQ,QAAA,EAAU,EAAE,CAAA;AAEnD,EAAA,IAAI,UAAA,CAAW,UAAU,EAAA,EAAI;AAE3B,IAAA,OAAO,UAAA,CAAW,OAAA,CAAQ,qBAAA,EAAuB,SAAS,CAAA;AAAA,EAC5D,CAAA,MAAA,IAAW,UAAA,CAAW,MAAA,IAAU,CAAA,EAAG;AAEjC,IAAA,OAAO,UAAA,CAAW,OAAA,CAAQ,qBAAA,EAAuB,SAAS,CAAA;AAAA,EAC5D;AAEA,EAAA,OAAO,WAAA;AACT;AAQO,MAAM,qBAAA,GAAwB,CAAC,GAAA,KAAqB;AACzD,EAAA,MAAM,YAAA,GAAe,GAAA,EAAK,OAAA,IAAW,GAAA,EAAK,MAAM,OAAA,IAAW,EAAA;AAG3D,EAAA,IACE,aAAa,WAAA,EAAY,CAAE,QAAA,CAAS,SAAS,KAC7C,YAAA,CAAa,WAAA,EAAY,CAAE,QAAA,CAAS,OAAO,CAAA,IAC3C,YAAA,CAAa,aAAY,CAAE,QAAA,CAAS,SAAS,CAAA,EAC7C;AACA,IAAA,OAAO,6DAAA;AAAA,EACT;AAGA,EAAA,OAAO,YAAA,IAAgB,uCAAA;AACzB","file":"utils.js","sourcesContent":["/**\n * OTP Dialog Utilities\n */\n\n/**\n * Mask phone number for display\n * @param phoneNumber - Phone number to mask\n * @returns Masked phone number (e.g., \"0987***222\")\n */\nexport const maskPhoneNumber = (phoneNumber?: string): string => {\n  if (!phoneNumber) return '';\n\n  // Handle different phone number formats\n  const cleanPhone = phoneNumber.replace(/[^\\d]/g, '');\n\n  if (cleanPhone.length >= 10) {\n    // For 10+ digit numbers: show first 4 and last 3 digits\n    return cleanPhone.replace(/(\\d{4})(\\d+)(\\d{3})/, '$1***$3');\n  } else if (cleanPhone.length >= 7) {\n    // For 7-9 digit numbers: show first 3 and last 2 digits\n    return cleanPhone.replace(/(\\d{3})(\\d+)(\\d{2})/, '$1***$3');\n  }\n\n  return phoneNumber; // Return as-is if too short\n};\n\n/**\n * Normalize error messages for better UX\n * Converts various error messages to user-friendly Vietnamese\n * @param err - Error object\n * @returns Normalized error message\n */\nexport const normalizeErrorMessage = (err: any): string => {\n  const errorMessage = err?.message || err?.meta?.message || '';\n\n  // Check for OTP validation errors\n  if (\n    errorMessage.toLowerCase().includes('invalid') ||\n    errorMessage.toLowerCase().includes('wrong') ||\n    errorMessage.toLowerCase().includes('expired')\n  ) {\n    return 'Mã OTP không đúng hoặc hết hạn';\n  }\n\n  // Default messages\n  return errorMessage || 'Đã có lỗi xảy ra';\n};\n"]}

package/dist/common/interactive/otp-dialog/utils.mjs

@@ -0,0 +1,21 @@
+const maskPhoneNumber = (phoneNumber) => {
+  if (!phoneNumber) return "";
+  const cleanPhone = phoneNumber.replace(/[^\d]/g, "");
+  if (cleanPhone.length >= 10) {
+    return cleanPhone.replace(/(\d{4})(\d+)(\d{3})/, "$1***$3");
+  } else if (cleanPhone.length >= 7) {
+    return cleanPhone.replace(/(\d{3})(\d+)(\d{2})/, "$1***$3");
+  }
+  return phoneNumber;
+};
+const normalizeErrorMessage = (err) => {
+  const errorMessage = err?.message || err?.meta?.message || "";
+  if (errorMessage.toLowerCase().includes("invalid") || errorMessage.toLowerCase().includes("wrong") || errorMessage.toLowerCase().includes("expired")) {
+    return "M\xE3 OTP kh\xF4ng \u0111\xFAng ho\u1EB7c h\u1EBFt h\u1EA1n";
+  }
+  return errorMessage || "\u0110\xE3 c\xF3 l\u1ED7i x\u1EA3y ra";
+};
+
+export { maskPhoneNumber, normalizeErrorMessage };
+//# sourceMappingURL=utils.mjs.map
+//# sourceMappingURL=utils.mjs.map

package/dist/common/interactive/otp-dialog/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/otp-dialog/utils.ts"],"names":[],"mappings":"AASO,MAAM,eAAA,GAAkB,CAAC,WAAA,KAAiC;AAC/D,EAAA,IAAI,CAAC,aAAa,OAAO,EAAA;AAGzB,EAAA,MAAM,UAAA,GAAa,WAAA,CAAY,OAAA,CAAQ,QAAA,EAAU,EAAE,CAAA;AAEnD,EAAA,IAAI,UAAA,CAAW,UAAU,EAAA,EAAI;AAE3B,IAAA,OAAO,UAAA,CAAW,OAAA,CAAQ,qBAAA,EAAuB,SAAS,CAAA;AAAA,EAC5D,CAAA,MAAA,IAAW,UAAA,CAAW,MAAA,IAAU,CAAA,EAAG;AAEjC,IAAA,OAAO,UAAA,CAAW,OAAA,CAAQ,qBAAA,EAAuB,SAAS,CAAA;AAAA,EAC5D;AAEA,EAAA,OAAO,WAAA;AACT;AAQO,MAAM,qBAAA,GAAwB,CAAC,GAAA,KAAqB;AACzD,EAAA,MAAM,YAAA,GAAe,GAAA,EAAK,OAAA,IAAW,GAAA,EAAK,MAAM,OAAA,IAAW,EAAA;AAG3D,EAAA,IACE,aAAa,WAAA,EAAY,CAAE,QAAA,CAAS,SAAS,KAC7C,YAAA,CAAa,WAAA,EAAY,CAAE,QAAA,CAAS,OAAO,CAAA,IAC3C,YAAA,CAAa,aAAY,CAAE,QAAA,CAAS,SAAS,CAAA,EAC7C;AACA,IAAA,OAAO,6DAAA;AAAA,EACT;AAGA,EAAA,OAAO,YAAA,IAAgB,uCAAA;AACzB","file":"utils.mjs","sourcesContent":["/**\n * OTP Dialog Utilities\n */\n\n/**\n * Mask phone number for display\n * @param phoneNumber - Phone number to mask\n * @returns Masked phone number (e.g., \"0987***222\")\n */\nexport const maskPhoneNumber = (phoneNumber?: string): string => {\n  if (!phoneNumber) return '';\n\n  // Handle different phone number formats\n  const cleanPhone = phoneNumber.replace(/[^\\d]/g, '');\n\n  if (cleanPhone.length >= 10) {\n    // For 10+ digit numbers: show first 4 and last 3 digits\n    return cleanPhone.replace(/(\\d{4})(\\d+)(\\d{3})/, '$1***$3');\n  } else if (cleanPhone.length >= 7) {\n    // For 7-9 digit numbers: show first 3 and last 2 digits\n    return cleanPhone.replace(/(\\d{3})(\\d+)(\\d{2})/, '$1***$3');\n  }\n\n  return phoneNumber; // Return as-is if too short\n};\n\n/**\n * Normalize error messages for better UX\n * Converts various error messages to user-friendly Vietnamese\n * @param err - Error object\n * @returns Normalized error message\n */\nexport const normalizeErrorMessage = (err: any): string => {\n  const errorMessage = err?.message || err?.meta?.message || '';\n\n  // Check for OTP validation errors\n  if (\n    errorMessage.toLowerCase().includes('invalid') ||\n    errorMessage.toLowerCase().includes('wrong') ||\n    errorMessage.toLowerCase().includes('expired')\n  ) {\n    return 'Mã OTP không đúng hoặc hết hạn';\n  }\n\n  // Default messages\n  return errorMessage || 'Đã có lỗi xảy ra';\n};\n"]}

package/dist/common/interactive/pagination/PaginationSkeleton.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var skeleton = require('../../../components/skeleton');
+var utils = require('../../../lib/utils');
+
+function PaginationSkeleton({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-48" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-center gap-1 sm:gap-2 lg:flex-1 lg:gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-9" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2 lg:hidden", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-9" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden items-center gap-3 lg:flex", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-9" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-10" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-9" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-1 lg:hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-32" }),
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-12" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden shrink-0 items-center gap-1 lg:flex", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-32" }),
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-12" })
+        ] })
+      ]
+    }
+  );
+}
+
+exports.PaginationSkeleton = PaginationSkeleton;
+//# sourceMappingURL=PaginationSkeleton.js.map
+//# sourceMappingURL=PaginationSkeleton.js.map

package/dist/common/interactive/pagination/PaginationSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/pagination/PaginationSkeleton.tsx"],"names":["jsxs","cn","jsx","Skeleton"],"mappings":";;;;;;AAOO,SAAS,kBAAA,CAAmB,EAAE,SAAA,EAAU,EAA4B;AACzE,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,QAAA;AAAA,QACT,oEAAA;AAAA,QACA;AAAA,OACF;AAAA,MAGA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,SAAI,SAAA,EAAU,iBAAA,EACb,yCAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,YAAW,CAAA,EACjC,CAAA;AAAA,wBAGAH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2EAAA,EAEb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAACC,iBAAA,EAAA,EAAS,WAAU,SAAA,EAAU,CAAA;AAAA,0BAG9BH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4CAAA,EACb,QAAA,EAAA;AAAA,4BAAAE,cAAA,CAACC,iBAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,4BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,SAAA,EAAU;AAAA,WAAA,EAChC,CAAA;AAAA,0BAGAH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mCAAA,EACb,QAAA,EAAA;AAAA,4BAAAE,cAAA,CAACC,iBAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,4BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,SAAA,EAAU,CAAA;AAAA,4BAC9BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW;AAAA,WAAA,EACjC,CAAA;AAAA,0BAGAD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,SAAA,EAAU;AAAA,SAAA,EAChC,CAAA;AAAA,wBAGAH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+CAAA,EACb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAACC,iBAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,0BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW;AAAA,SAAA,EACjC,CAAA;AAAA,wBAGAH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4CAAA,EACb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAACC,iBAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,0BAC/BD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW;AAAA,SAAA,EACjC;AAAA;AAAA;AAAA,GACF;AAEJ","file":"PaginationSkeleton.js","sourcesContent":["import { Skeleton } from '../../../components/skeleton';\nimport { cn } from '../../../lib/utils';\n\ninterface PaginationSkeletonProps {\n  className?: string;\n}\n\nexport function PaginationSkeleton({ className }: PaginationSkeletonProps) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between',\n        className,\n      )}\n    >\n      {/* Info text skeleton - hidden on mobile, shown on desktop */}\n      <div className=\"hidden lg:block\">\n        <Skeleton className=\"h-5 w-48\" />\n      </div>\n\n      {/* Pagination controls skeleton */}\n      <div className=\"flex w-full items-center justify-center gap-1 sm:gap-2 lg:flex-1 lg:gap-3\">\n        {/* Previous button */}\n        <Skeleton className=\"h-9 w-9\" />\n\n        {/* Mobile: 3 page buttons + ellipsis */}\n        <div className=\"flex items-center gap-1 sm:gap-2 lg:hidden\">\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-9\" />\n        </div>\n\n        {/* Desktop: More page buttons */}\n        <div className=\"hidden items-center gap-3 lg:flex\">\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-9\" />\n          <Skeleton className=\"h-9 w-10\" />\n        </div>\n\n        {/* Next button */}\n        <Skeleton className=\"h-9 w-9\" />\n      </div>\n\n      {/* Mobile: Page size selector skeleton */}\n      <div className=\"flex items-center justify-end gap-1 lg:hidden\">\n        <Skeleton className=\"h-5 w-32\" />\n        <Skeleton className=\"h-5 w-12\" />\n      </div>\n\n      {/* Desktop: Page size selector skeleton */}\n      <div className=\"hidden shrink-0 items-center gap-1 lg:flex\">\n        <Skeleton className=\"h-5 w-32\" />\n        <Skeleton className=\"h-5 w-12\" />\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/common/interactive/pagination/PaginationSkeleton.mjs

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Skeleton } from '../../../components/skeleton';
+import { cn } from '../../../lib/utils';
+
+function PaginationSkeleton({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-48" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-center gap-1 sm:gap-2 lg:flex-1 lg:gap-3", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-9" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2 lg:hidden", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-9" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-3 lg:flex", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-10" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-9" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-10" })
+          ] }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-9" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-1 lg:hidden", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-32" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-12" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "hidden shrink-0 items-center gap-1 lg:flex", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-32" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-12" })
+        ] })
+      ]
+    }
+  );
+}
+
+export { PaginationSkeleton };
+//# sourceMappingURL=PaginationSkeleton.mjs.map
+//# sourceMappingURL=PaginationSkeleton.mjs.map

package/dist/common/interactive/pagination/PaginationSkeleton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/pagination/PaginationSkeleton.tsx"],"names":[],"mappings":";;;;AAOO,SAAS,kBAAA,CAAmB,EAAE,SAAA,EAAU,EAA4B;AACzE,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,oEAAA;AAAA,QACA;AAAA,OACF;AAAA,MAGA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,SAAA,EAAU,iBAAA,EACb,8BAAC,QAAA,EAAA,EAAS,SAAA,EAAU,YAAW,CAAA,EACjC,CAAA;AAAA,wBAGA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2EAAA,EAEb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,SAAA,EAAU,CAAA;AAAA,0BAG9B,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4CAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,4BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,SAAA,EAAU;AAAA,WAAA,EAChC,CAAA;AAAA,0BAGA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mCAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,4BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,4BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,SAAA,EAAU,CAAA;AAAA,4BAC9B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW;AAAA,WAAA,EACjC,CAAA;AAAA,0BAGA,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,SAAA,EAAU;AAAA,SAAA,EAChC,CAAA;AAAA,wBAGA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+CAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,0BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW;AAAA,SAAA,EACjC,CAAA;AAAA,wBAGA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4CAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,0BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW;AAAA,SAAA,EACjC;AAAA;AAAA;AAAA,GACF;AAEJ","file":"PaginationSkeleton.mjs","sourcesContent":["import { Skeleton } from '../../../components/skeleton';\nimport { cn } from '../../../lib/utils';\n\ninterface PaginationSkeletonProps {\n  className?: string;\n}\n\nexport function PaginationSkeleton({ className }: PaginationSkeletonProps) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between',\n        className,\n      )}\n    >\n      {/* Info text skeleton - hidden on mobile, shown on desktop */}\n      <div className=\"hidden lg:block\">\n        <Skeleton className=\"h-5 w-48\" />\n      </div>\n\n      {/* Pagination controls skeleton */}\n      <div className=\"flex w-full items-center justify-center gap-1 sm:gap-2 lg:flex-1 lg:gap-3\">\n        {/* Previous button */}\n        <Skeleton className=\"h-9 w-9\" />\n\n        {/* Mobile: 3 page buttons + ellipsis */}\n        <div className=\"flex items-center gap-1 sm:gap-2 lg:hidden\">\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-9\" />\n        </div>\n\n        {/* Desktop: More page buttons */}\n        <div className=\"hidden items-center gap-3 lg:flex\">\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-10\" />\n          <Skeleton className=\"h-9 w-9\" />\n          <Skeleton className=\"h-9 w-10\" />\n        </div>\n\n        {/* Next button */}\n        <Skeleton className=\"h-9 w-9\" />\n      </div>\n\n      {/* Mobile: Page size selector skeleton */}\n      <div className=\"flex items-center justify-end gap-1 lg:hidden\">\n        <Skeleton className=\"h-5 w-32\" />\n        <Skeleton className=\"h-5 w-12\" />\n      </div>\n\n      {/* Desktop: Page size selector skeleton */}\n      <div className=\"hidden shrink-0 items-center gap-1 lg:flex\">\n        <Skeleton className=\"h-5 w-32\" />\n        <Skeleton className=\"h-5 w-12\" />\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/common/interactive/pagination/index.js

@@ -0,0 +1,235 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var button = require('../../../components/button');
+var pagination = require('../../../components/pagination');
+var utils = require('../../../lib/utils');
+var select = require('../select');
+var usePagination = require('./usePagination');
+var PaginationSkeleton = require('./PaginationSkeleton');
+
+const Pagination = ({
+  current = 1,
+  pageSize = 20,
+  total = 0,
+  onChange,
+  loading,
+  className,
+  showInfo = true,
+  showPageSizeSelector = true
+}) => {
+  const [paginationOptions, setPaginationOptions] = react.useState([
+    { value: "10", name: "10" },
+    { value: "20", name: "20" },
+    { value: "30", name: "30" },
+    { value: "50", name: "50" },
+    { value: "100", name: "100" }
+  ]);
+  react.useEffect(() => {
+    setPaginationOptions((prev) => {
+      const options = [...prev];
+      const pageSizeStr = String(pageSize);
+      const pageSizeExists = options.some((option) => option.value === pageSizeStr);
+      if (!pageSizeExists && pageSize) {
+        options.unshift({ value: pageSizeStr, name: pageSizeStr });
+      }
+      options.sort((a, b) => Number(a.value) - Number(b.value));
+      return options;
+    });
+  }, [pageSize]);
+  const totalPages = Math.ceil(total / pageSize);
+  const onPageChange = (page) => {
+    if (typeof page === "number" && page >= 1 && page <= totalPages && page !== current) {
+      onChange?.(page, pageSize);
+    }
+  };
+  const onNext = () => {
+    if (current < totalPages) {
+      onPageChange(current + 1);
+    }
+  };
+  const onPrevious = () => {
+    if (current > 1) {
+      onPageChange(current - 1);
+    }
+  };
+  const range = (start, end) => {
+    const length = end - start + 1;
+    return Array.from({ length }, (_, idx) => idx + start);
+  };
+  const startIndex = (current - 1) * pageSize + 1;
+  const endIndex = Math.min(current * pageSize, total);
+  const paginationRange = usePagination.usePagination({
+    current,
+    total,
+    pageSize,
+    siblingCount: 1
+    // Bạn có thể tùy chỉnh số trang hiển thị bên cạnh trang hiện tại
+  });
+  const mobilePaginationRange = react.useMemo(() => {
+    if (totalPages <= 3) {
+      return range(1, totalPages);
+    }
+    return [1, 2, 3, usePagination.DOTS];
+  }, [totalPages]);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(PaginationSkeleton.PaginationSkeleton, { className });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
+        className
+      ),
+      children: [
+        showInfo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-t14m text-muted-foreground hidden text-nowrap lg:block", children: total > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          "Hi\u1EC3n th\u1ECB ",
+          startIndex,
+          " - ",
+          endIndex,
+          " trong t\u1ED5ng s\u1ED1 ",
+          total
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Hi\u1EC3n th\u1ECB 0 - 0 trong t\u1ED5ng s\u1ED1 0" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(pagination.Pagination, { className: "w-full justify-center lg:flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(pagination.PaginationContent, { className: "gap-1 sm:gap-2 lg:gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "px-2",
+              onClick: (e) => {
+                e.preventDefault();
+                onPrevious();
+              },
+              disabled: current <= 1,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: "text-ink-400s !size-4 sm:!size-6" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "contents lg:hidden", children: mobilePaginationRange.map((pageNumber, index) => {
+            if (pageNumber === usePagination.DOTS) {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                pagination.PaginationItem,
+                {
+                  className: "text-t14m text-foreground",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(pagination.PaginationEllipsis, {})
+                },
+                `dots-mobile-${index}`
+              );
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx(pagination.PaginationItem, { className: "text-t14m text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                size: "sm",
+                variant: pageNumber === current ? "soft-info" : "ghost",
+                className: utils.cn("text-t14m !min-w-[40px] border-none"),
+                onClick: (e) => {
+                  e.preventDefault();
+                  onPageChange(pageNumber);
+                },
+                loading: pageNumber === current ? loading : false,
+                children: !(loading && pageNumber === current) && pageNumber
+              }
+            ) }, pageNumber);
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:contents", children: paginationRange.map((pageNumber, index) => {
+            if (pageNumber === usePagination.DOTS) {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                pagination.PaginationItem,
+                {
+                  className: "text-t14m text-foreground",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(pagination.PaginationEllipsis, {})
+                },
+                `dots-desktop-${index}`
+              );
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx(pagination.PaginationItem, { className: "text-t14m text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                size: "sm",
+                variant: pageNumber === current ? "soft-info" : "ghost",
+                className: utils.cn("text-t14m !min-w-[40px] border-none"),
+                onClick: (e) => {
+                  e.preventDefault();
+                  onPageChange(pageNumber);
+                },
+                loading: pageNumber === current ? loading : false,
+                children: !(loading && pageNumber === current) && pageNumber
+              }
+            ) }, `desktop-${pageNumber}`);
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "px-2",
+              onClick: (e) => {
+                e.preventDefault();
+                onNext();
+              },
+              disabled: current >= totalPages,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "text-ink-400s !size-4 sm:!size-6" })
+            }
+          )
+        ] }) }),
+        showPageSizeSelector && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-1 lg:hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-t14m text-nowrap", children: "S\u1ED1 m\u1EE5c m\u1ED7i trang:" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            select.Select,
+            {
+              value: [{ value: pageSize.toString(), name: pageSize.toString() }],
+              onValueChange: (values) => {
+                values.length > 0 && onChange?.(1, parseInt(values?.[0]?.value ?? "0", 10));
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { isCustomMode: true, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex cursor-pointer items-center gap-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-blue-500", children: pageSize }),
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 text-blue-500" })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(select.SelectBody, { align: "end", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectContentAutoLayout, { options: paginationOptions }) })
+              ]
+            }
+          )
+        ] }),
+        showPageSizeSelector && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden shrink-0 items-center gap-1 lg:flex", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-t14m text-nowrap", children: "S\u1ED1 m\u1EE5c m\u1ED7i trang:" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            select.Select,
+            {
+              value: [{ value: pageSize.toString(), name: pageSize.toString() }],
+              onValueChange: (values) => {
+                values.length > 0 && onChange?.(1, parseInt(values?.[0]?.value ?? "0", 10));
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { isCustomMode: true, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex cursor-pointer items-center gap-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-blue-500", children: pageSize }),
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 text-blue-500" })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(select.SelectBody, { align: "end", side: "bottom", className: "ml-0 min-w-[120px]", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectContentAutoLayout, { options: paginationOptions }) })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+Object.defineProperty(exports, "DOTS", {
+  enumerable: true,
+  get: function () { return usePagination.DOTS; }
+});
+Object.defineProperty(exports, "usePagination", {
+  enumerable: true,
+  get: function () { return usePagination.usePagination; }
+});
+Object.defineProperty(exports, "PaginationSkeleton", {
+  enumerable: true,
+  get: function () { return PaginationSkeleton.PaginationSkeleton; }
+});
+exports.Pagination = Pagination;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map