npm - irismail - Versions diffs - 0.1.0 → 0.5.0 - Mend

irismail 0.1.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/dist/react/index.d.mts CHANGED Viewed

@@ -1,60 +1,81 @@
-import * as input_otp from 'input-otp';
+import { OTPInput } from 'input-otp';
 import * as React from 'react';
-declare const InputOTP: React.ForwardRefExoticComponent<(Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "maxLength" | "value" | "onChange" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
-    value?: string;
-    onChange?: (newValue: string) => unknown;
-    maxLength: number;
-    textAlign?: "left" | "center" | "right";
-    onComplete?: (...args: any[]) => unknown;
-    pushPasswordManagerStrategy?: "increase-width" | "none";
-    pasteTransformer?: (pasted: string) => string;
-    containerClassName?: string;
-    noScriptCSSFallback?: string | null;
-} & {
-    render: (props: input_otp.RenderProps) => React.ReactNode;
-    children?: never;
-} & React.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "maxLength" | "value" | "onChange" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
-    value?: string;
-    onChange?: (newValue: string) => unknown;
-    maxLength: number;
-    textAlign?: "left" | "center" | "right";
-    onComplete?: (...args: any[]) => unknown;
-    pushPasswordManagerStrategy?: "increase-width" | "none";
-    pasteTransformer?: (pasted: string) => string;
-    containerClassName?: string;
-    noScriptCSSFallback?: string | null;
-} & {
-    render?: never;
-    children: React.ReactNode;
-} & React.RefAttributes<HTMLInputElement>, "ref">) & React.RefAttributes<HTMLInputElement>>;
+type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput> & {
+    /** Show error styling */
+    error?: boolean;
+};
+/**
+ * Low-level OTP input wrapper for the composition pattern.
+ * Use this when you need custom slot arrangements.
+ *
+ * @example
+ * ```tsx
+ * <InputOTP maxLength={6} value={code} onChange={setCode}>
+ *   <InputOTPGroup>
+ *     <InputOTPSlot index={0} />
+ *     <InputOTPSlot index={1} />
+ *     <InputOTPSlot index={2} />
+ *   </InputOTPGroup>
+ *   <InputOTPSeparator />
+ *   <InputOTPGroup>
+ *     <InputOTPSlot index={3} />
+ *     <InputOTPSlot index={4} />
+ *     <InputOTPSlot index={5} />
+ *   </InputOTPGroup>
+ * </InputOTP>
+ * ```
+ */
+declare const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<HTMLInputElement>>;
 declare const InputOTPGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const InputOTPSlot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     index: number;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const InputOTPSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-interface UseOTPOptions {
-    email: string;
-    onRateLimit?: (resetTime: number) => void;
-}
-declare function useOTP({ email, onRateLimit }: UseOTPOptions): {
-    otpTimeLeft: number;
-    resendTimeLeft: number;
-    attemptsLeft: number;
-    isRateLimited: boolean;
-    rateLimitResetTime: number | null;
-    formatTime: (seconds: number) => string;
-    recordSentOTP: () => void;
-    checkRateLimit: () => {
-        limited: boolean;
-        attemptsLeft: number;
-        resetTime?: undefined;
-    } | {
-        limited: boolean;
-        attemptsLeft: number;
-        resetTime: number | undefined;
-    };
+type OTPProps = {
+    /** Number of OTP digits (default: 6) */
+    length?: number;
+    /** Controlled input value */
+    value?: string;
+    /** Called when value changes */
+    onChange?: (value: string) => void;
+    /** Called when all digits are entered */
+    onComplete?: (value: string) => void;
+    /** Disable the input */
+    disabled?: boolean;
+    /** Show error styling */
+    error?: boolean;
+    /** Auto focus the first input on mount */
+    autoFocus?: boolean;
+    /** Name attribute for form integration */
+    name?: string;
+    /** Additional className for the container */
+    className?: string;
+    /** Pattern to match input against (default: digits only) */
+    pattern?: string;
 };
+/**
+ * Simple, easy-to-use OTP input component.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <OTP value={code} onChange={setCode} />
+ *
+ * // With completion callback
+ * <OTP
+ *   value={code}
+ *   onChange={setCode}
+ *   onComplete={(value) => verify(value)}
+ * />
+ *
+ * // With error state
+ * <OTP value={code} onChange={setCode} error={isInvalid} />
+ *
+ * // Custom length
+ * <OTP length={4} value={code} onChange={setCode} />
+ * ```
+ */
+declare const OTP: React.ForwardRefExoticComponent<OTPProps & React.RefAttributes<HTMLInputElement>>;
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, useOTP };
+export { InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, OTP, type OTPProps };

package/dist/react/index.d.ts CHANGED Viewed

@@ -1,60 +1,81 @@
-import * as input_otp from 'input-otp';
+import { OTPInput } from 'input-otp';
 import * as React from 'react';
-declare const InputOTP: React.ForwardRefExoticComponent<(Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "maxLength" | "value" | "onChange" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
-    value?: string;
-    onChange?: (newValue: string) => unknown;
-    maxLength: number;
-    textAlign?: "left" | "center" | "right";
-    onComplete?: (...args: any[]) => unknown;
-    pushPasswordManagerStrategy?: "increase-width" | "none";
-    pasteTransformer?: (pasted: string) => string;
-    containerClassName?: string;
-    noScriptCSSFallback?: string | null;
-} & {
-    render: (props: input_otp.RenderProps) => React.ReactNode;
-    children?: never;
-} & React.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "maxLength" | "value" | "onChange" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
-    value?: string;
-    onChange?: (newValue: string) => unknown;
-    maxLength: number;
-    textAlign?: "left" | "center" | "right";
-    onComplete?: (...args: any[]) => unknown;
-    pushPasswordManagerStrategy?: "increase-width" | "none";
-    pasteTransformer?: (pasted: string) => string;
-    containerClassName?: string;
-    noScriptCSSFallback?: string | null;
-} & {
-    render?: never;
-    children: React.ReactNode;
-} & React.RefAttributes<HTMLInputElement>, "ref">) & React.RefAttributes<HTMLInputElement>>;
+type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput> & {
+    /** Show error styling */
+    error?: boolean;
+};
+/**
+ * Low-level OTP input wrapper for the composition pattern.
+ * Use this when you need custom slot arrangements.
+ *
+ * @example
+ * ```tsx
+ * <InputOTP maxLength={6} value={code} onChange={setCode}>
+ *   <InputOTPGroup>
+ *     <InputOTPSlot index={0} />
+ *     <InputOTPSlot index={1} />
+ *     <InputOTPSlot index={2} />
+ *   </InputOTPGroup>
+ *   <InputOTPSeparator />
+ *   <InputOTPGroup>
+ *     <InputOTPSlot index={3} />
+ *     <InputOTPSlot index={4} />
+ *     <InputOTPSlot index={5} />
+ *   </InputOTPGroup>
+ * </InputOTP>
+ * ```
+ */
+declare const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<HTMLInputElement>>;
 declare const InputOTPGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const InputOTPSlot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     index: number;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const InputOTPSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-interface UseOTPOptions {
-    email: string;
-    onRateLimit?: (resetTime: number) => void;
-}
-declare function useOTP({ email, onRateLimit }: UseOTPOptions): {
-    otpTimeLeft: number;
-    resendTimeLeft: number;
-    attemptsLeft: number;
-    isRateLimited: boolean;
-    rateLimitResetTime: number | null;
-    formatTime: (seconds: number) => string;
-    recordSentOTP: () => void;
-    checkRateLimit: () => {
-        limited: boolean;
-        attemptsLeft: number;
-        resetTime?: undefined;
-    } | {
-        limited: boolean;
-        attemptsLeft: number;
-        resetTime: number | undefined;
-    };
+type OTPProps = {
+    /** Number of OTP digits (default: 6) */
+    length?: number;
+    /** Controlled input value */
+    value?: string;
+    /** Called when value changes */
+    onChange?: (value: string) => void;
+    /** Called when all digits are entered */
+    onComplete?: (value: string) => void;
+    /** Disable the input */
+    disabled?: boolean;
+    /** Show error styling */
+    error?: boolean;
+    /** Auto focus the first input on mount */
+    autoFocus?: boolean;
+    /** Name attribute for form integration */
+    name?: string;
+    /** Additional className for the container */
+    className?: string;
+    /** Pattern to match input against (default: digits only) */
+    pattern?: string;
 };
+/**
+ * Simple, easy-to-use OTP input component.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <OTP value={code} onChange={setCode} />
+ *
+ * // With completion callback
+ * <OTP
+ *   value={code}
+ *   onChange={setCode}
+ *   onComplete={(value) => verify(value)}
+ * />
+ *
+ * // With error state
+ * <OTP value={code} onChange={setCode} error={isInvalid} />
+ *
+ * // Custom length
+ * <OTP length={4} value={code} onChange={setCode} />
+ * ```
+ */
+declare const OTP: React.ForwardRefExoticComponent<OTPProps & React.RefAttributes<HTMLInputElement>>;
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, useOTP };
+export { InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, OTP, type OTPProps };

package/dist/react/index.js CHANGED Viewed

@@ -34,13 +34,13 @@ __export(react_exports, {
   InputOTPGroup: () => InputOTPGroup,
   InputOTPSeparator: () => InputOTPSeparator,
   InputOTPSlot: () => InputOTPSlot,
-  useOTP: () => useOTP
+  OTP: () => OTP
 });
 module.exports = __toCommonJS(react_exports);
 // src/react/components/input-otp.tsx
-var React = __toESM(require("react"));
 var import_input_otp = require("input-otp");
+var React = __toESM(require("react"));
 // src/utils/constants.ts
 var import_clsx = require("clsx");
@@ -48,214 +48,119 @@ var import_tailwind_merge = require("tailwind-merge");
 function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
-var OTP_DEFAULTS = {
-  LENGTH: 6,
-  EXPIRY_MINUTES: 5,
-  RESEND_COOLDOWN_SECONDS: 120,
-  // 2 minutes
-  MAX_ATTEMPTS: 5,
-  RATE_LIMIT_RESET_HOURS: 1
-};
 // src/react/components/input-otp.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  "svg",
+var InputOTPStyleContext = React.createContext({});
+var InputOTP = React.forwardRef(({ className, containerClassName, error, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputOTPStyleContext.Provider, { value: { error }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_input_otp.OTPInput,
   {
-    width: "15",
-    height: "15",
-    viewBox: "0 0 15 15",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: "h-4 w-4",
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "path",
-      {
-        d: "M7.5 7.5C7.5 8.32843 6.82843 9 6 9C5.17157 9 4.5 8.32843 4.5 7.5C4.5 6.67157 5.17157 6 6 6C6.82843 6 7.5 6.67157 7.5 7.5Z",
-        fill: "currentColor",
-        fillRule: "evenodd",
-        clipRule: "evenodd"
-      }
-    )
+    ref,
+    containerClassName: cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    ),
+    className: cn("disabled:cursor-not-allowed", className),
+    ...props
   }
-);
-var InputOTP = React.forwardRef(
-  ({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_input_otp.OTPInput,
-    {
-      ref,
-      containerClassName: cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName),
-      className: cn("disabled:cursor-not-allowed", className),
-      ...props
-    }
-  )
-);
+) }));
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: cn("flex items-center", className), ...props })
-);
+var InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center gap-2", className),
+    ...props
+  }
+));
 InputOTPGroup.displayName = "InputOTPGroup";
 var InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
   const inputOTPContext = React.useContext(import_input_otp.OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+  const { error } = React.useContext(InputOTPStyleContext);
+  const slot = inputOTPContext.slots[index];
+  const { char, hasFakeCaret, isActive } = slot;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ref,
       className: cn(
-        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        // Base styles
+        "relative flex h-12 w-10 items-center justify-center",
+        "border-2 rounded-lg",
+        "font-mono text-lg font-medium",
+        "transition-all duration-150",
+        // Default state
+        "border-zinc-700 bg-zinc-900 text-white",
+        // Filled state
+        char && "border-zinc-500",
+        // Active/focus state
+        isActive && "ring-2 ring-offset-2 ring-offset-zinc-950 ring-indigo-500 border-indigo-500",
+        // Error state
+        error && "border-red-500/70 bg-red-500/10",
+        error && isActive && "ring-red-500",
         className
       ),
+      "data-active": isActive,
+      "data-filled": Boolean(char),
       ...props,
       children: [
         char,
-        hasFakeCaret && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
+        hasFakeCaret && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-5 w-0.5 animate-caret-blink rounded-full bg-indigo-400" }) })
       ]
     }
   );
 });
 InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React.forwardRef(
-  ({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dot, {}) })
-);
+var InputOTPSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    ref,
+    role: "separator",
+    className: cn("flex items-center justify-center text-zinc-500", className),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-3 h-0.5 bg-zinc-600 rounded-full" })
+  }
+));
 InputOTPSeparator.displayName = "InputOTPSeparator";
-// src/react/hooks/use-otp.ts
-var import_react = require("react");
-function useOTP({ email, onRateLimit }) {
-  const [otpTimeLeft, setOtpTimeLeft] = (0, import_react.useState)(OTP_DEFAULTS.EXPIRY_MINUTES * 60);
-  const [resendTimeLeft, setResendTimeLeft] = (0, import_react.useState)(0);
-  const [attemptsLeft, setAttemptsLeft] = (0, import_react.useState)(OTP_DEFAULTS.MAX_ATTEMPTS);
-  const [isRateLimited, setIsRateLimited] = (0, import_react.useState)(false);
-  const [rateLimitResetTime, setRateLimitResetTime] = (0, import_react.useState)(null);
-  const getStorageKey = (prefix) => `${prefix}_${email}`;
-  const getStoredData = (key) => {
-    if (typeof window === "undefined") return null;
-    const data = sessionStorage.getItem(key);
-    return data ? JSON.parse(data) : null;
-  };
-  const setStoredData = (key, data) => {
-    if (typeof window !== "undefined") {
-      sessionStorage.setItem(key, JSON.stringify(data));
-    }
-  };
-  const removeStoredData = (key) => {
-    if (typeof window !== "undefined") {
-      sessionStorage.removeItem(key);
-    }
-  };
-  const checkRateLimit = () => {
-    const key = getStorageKey("rate_limit");
-    const data = getStoredData(key);
-    if (!data) {
-      setAttemptsLeft(OTP_DEFAULTS.MAX_ATTEMPTS);
-      setIsRateLimited(false);
-      return { limited: false, attemptsLeft: OTP_DEFAULTS.MAX_ATTEMPTS };
-    }
-    const currentTime = Date.now();
-    const resetTime = OTP_DEFAULTS.RATE_LIMIT_RESET_HOURS * 60 * 60 * 1e3;
-    if (currentTime - data.firstAttemptTime > resetTime) {
-      removeStoredData(key);
-      setAttemptsLeft(OTP_DEFAULTS.MAX_ATTEMPTS);
-      setIsRateLimited(false);
-      return { limited: false, attemptsLeft: OTP_DEFAULTS.MAX_ATTEMPTS };
-    }
-    const attempts = OTP_DEFAULTS.MAX_ATTEMPTS - data.attempts;
-    const limited = data.attempts >= OTP_DEFAULTS.MAX_ATTEMPTS;
-    const limitResetTime = data.firstAttemptTime + resetTime;
-    setAttemptsLeft(Math.max(0, attempts));
-    setIsRateLimited(limited);
-    setRateLimitResetTime(limited ? limitResetTime : null);
-    if (limited && onRateLimit) {
-      onRateLimit(limitResetTime);
-    }
-    return { limited, attemptsLeft: Math.max(0, attempts), resetTime: limited ? limitResetTime : void 0 };
-  };
-  const updateRateLimit = () => {
-    const key = getStorageKey("rate_limit");
-    const data = getStoredData(key);
-    const currentTime = Date.now();
-    let newData;
-    if (!data) {
-      newData = {
-        attempts: 1,
-        firstAttemptTime: currentTime,
-        lastAttemptTime: currentTime
-      };
-    } else {
-      const resetTime = OTP_DEFAULTS.RATE_LIMIT_RESET_HOURS * 60 * 60 * 1e3;
-      if (currentTime - data.firstAttemptTime > resetTime) {
-        newData = {
-          attempts: 1,
-          firstAttemptTime: currentTime,
-          lastAttemptTime: currentTime
-        };
-      } else {
-        newData = {
-          ...data,
-          attempts: data.attempts + 1,
-          lastAttemptTime: currentTime
-        };
+var OTP = React.forwardRef(
+  ({
+    length = 6,
+    value,
+    onChange,
+    onComplete,
+    disabled,
+    error,
+    autoFocus,
+    name,
+    className,
+    pattern = "^[0-9]*$"
+  }, ref) => {
+    const slotIndices = Array.from({ length }, (_, i) => i);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      InputOTP,
+      {
+        ref,
+        maxLength: length,
+        value,
+        onChange,
+        onComplete,
+        disabled,
+        error,
+        autoFocus,
+        name,
+        pattern,
+        containerClassName: className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputOTPGroup, { children: slotIndices.map((index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputOTPSlot, { index }, index)) })
       }
-    }
-    setStoredData(key, newData);
-    checkRateLimit();
-    return newData;
-  };
-  const checkResendCooldown = () => {
-    const key = getStorageKey("last_sent");
-    const lastSentTime = getStoredData(key);
-    if (!lastSentTime) {
-      setResendTimeLeft(0);
-      return { canResend: true, timeLeft: 0 };
-    }
-    const currentTime = Date.now();
-    const timeSinceLastSent = currentTime - lastSentTime;
-    const cooldown = OTP_DEFAULTS.RESEND_COOLDOWN_SECONDS * 1e3;
-    const canResend = timeSinceLastSent >= cooldown;
-    const timeLeft = canResend ? 0 : Math.ceil((cooldown - timeSinceLastSent) / 1e3);
-    setResendTimeLeft(timeLeft);
-    return { canResend, timeLeft };
-  };
-  const recordSentOTP = () => {
-    const key = getStorageKey("last_sent");
-    setStoredData(key, Date.now());
-    updateRateLimit();
-    setOtpTimeLeft(OTP_DEFAULTS.EXPIRY_MINUTES * 60);
-    setResendTimeLeft(OTP_DEFAULTS.RESEND_COOLDOWN_SECONDS);
-  };
-  (0, import_react.useEffect)(() => {
-    checkRateLimit();
-    checkResendCooldown();
-    const timer = setInterval(() => {
-      setOtpTimeLeft((prev) => Math.max(0, prev - 1));
-      const { timeLeft } = checkResendCooldown();
-      setResendTimeLeft(timeLeft);
-    }, 1e3);
-    return () => clearInterval(timer);
-  }, [email]);
-  const formatTime = (seconds) => {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return `${mins}:${secs.toString().padStart(2, "0")}`;
-  };
-  return {
-    otpTimeLeft,
-    resendTimeLeft,
-    attemptsLeft,
-    isRateLimited,
-    rateLimitResetTime,
-    formatTime,
-    recordSentOTP,
-    checkRateLimit
-  };
-}
+    );
+  }
+);
+OTP.displayName = "OTP";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   InputOTP,
   InputOTPGroup,
   InputOTPSeparator,
   InputOTPSlot,
-  useOTP
+  OTP
 });

package/dist/react/index.mjs CHANGED Viewed

@@ -3,13 +3,13 @@ import {
   InputOTPGroup,
   InputOTPSeparator,
   InputOTPSlot,
-  useOTP
-} from "../chunk-FTNSOYOW.mjs";
+  OTP
+} from "../chunk-IQG3OBQL.mjs";
 import "../chunk-QZ7TP4HQ.mjs";
 export {
   InputOTP,
   InputOTPGroup,
   InputOTPSeparator,
   InputOTPSlot,
-  useOTP
+  OTP
 };