@particle-academy/react-fancy 5.12.0 → 5.14.0

package/dist/chunk-DZD2RJVD.js

@@ -0,0 +1,47 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var PdfViewer = forwardRef(
+  ({ src, title = "PDF document", className, style }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-react-fancy-pdf-viewer": "",
+        className: cn(
+          "relative h-full min-h-[20rem] w-full overflow-hidden rounded-md bg-zinc-100 dark:bg-zinc-900",
+          className
+        ),
+        style,
+        children: /* @__PURE__ */ jsxs("object", { data: src, type: "application/pdf", className: "h-full w-full", children: [
+          /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              src,
+              title,
+              className: "h-full w-full border-0"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2 p-4 text-center text-sm text-zinc-500 dark:text-zinc-400", children: [
+            /* @__PURE__ */ jsx("span", { children: "This browser can't display the PDF inline." }),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: src,
+                download: true,
+                className: "font-medium text-blue-600 hover:underline dark:text-blue-400",
+                children: "Download PDF"
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+);
+PdfViewer.displayName = "PdfViewer";
+
+export { PdfViewer };
+//# sourceMappingURL=chunk-DZD2RJVD.js.map
+//# sourceMappingURL=chunk-DZD2RJVD.js.map

package/dist/chunk-DZD2RJVD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PdfViewer/PdfViewer.tsx"],"names":[],"mappings":";;;;AAcO,IAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CAAC,EAAE,GAAA,EAAK,KAAA,GAAQ,gBAAgB,SAAA,EAAW,KAAA,IAAS,GAAA,KAAQ;AAC1D,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,6BAAA,EAA4B,EAAA;AAAA,QAC5B,SAAA,EAAW,EAAA;AAAA,UACT,8FAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QAEA,+BAAC,QAAA,EAAA,EAAO,IAAA,EAAM,KAAK,IAAA,EAAK,iBAAA,EAAkB,WAAU,eAAA,EAClD,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,KAAA;AAAA,cACA,SAAA,EAAU;AAAA;AAAA,WACZ;AAAA,0BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iHAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,UAAK,QAAA,EAAA,4CAAA,EAA+C,CAAA;AAAA,4BACrD,GAAA;AAAA,cAAC,GAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAM,GAAA;AAAA,gBACN,QAAA,EAAQ,IAAA;AAAA,gBACR,SAAA,EAAU,8DAAA;AAAA,gBACX,QAAA,EAAA;AAAA;AAAA;AAED,WAAA,EACF;AAAA,SAAA,EACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-DZD2RJVD.js","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { PdfViewerProps } from \"./PdfViewer.types\";\n\n/**\n * A standalone PDF viewer — embeds the document via the browser's native PDF\n * plugin (`<object>`), falling back to an `<iframe>`, then to a download link.\n * Fills its container, so give it a height (a `min-h` floor is built in).\n * Renders for PDF sources inside `<MediaViewer>`.\n *\n * ```tsx\n * <PdfViewer src=\"/report.pdf\" title=\"report.pdf\" style={{ height: 600 }} />\n * ```\n */\nexport const PdfViewer = forwardRef<HTMLDivElement, PdfViewerProps>(\n  ({ src, title = \"PDF document\", className, style }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-pdf-viewer=\"\"\n        className={cn(\n          \"relative h-full min-h-[20rem] w-full overflow-hidden rounded-md bg-zinc-100 dark:bg-zinc-900\",\n          className,\n        )}\n        style={style}\n      >\n        <object data={src} type=\"application/pdf\" className=\"h-full w-full\">\n          <iframe\n            src={src}\n            title={title}\n            className=\"h-full w-full border-0\"\n          />\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-4 text-center text-sm text-zinc-500 dark:text-zinc-400\">\n            <span>This browser can&apos;t display the PDF inline.</span>\n            <a\n              href={src}\n              download\n              className=\"font-medium text-blue-600 hover:underline dark:text-blue-400\"\n            >\n              Download PDF\n            </a>\n          </div>\n        </object>\n      </div>\n    );\n  },\n);\n\nPdfViewer.displayName = \"PdfViewer\";\n"]}

package/dist/chunk-E4LFD44D.js

@@ -0,0 +1,69 @@
+import { useFloatingPosition } from './chunk-MQ6VGG62.js';
+import { Portal } from './chunk-WHEXTDPV.js';
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef, useState, useRef, useCallback, cloneElement } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var Tooltip = forwardRef(
+  function Tooltip2({ children, content, placement = "top", delay = 200, offset = 8, className }, _ref) {
+    const [open, setOpen] = useState(false);
+    const anchorRef = useRef(null);
+    const floatingRef = useRef(null);
+    const timeoutRef = useRef(void 0);
+    const position = useFloatingPosition(anchorRef, floatingRef, {
+      placement,
+      offset,
+      enabled: open
+    });
+    const show = useCallback(() => {
+      timeoutRef.current = setTimeout(() => setOpen(true), delay);
+    }, [delay]);
+    const hide = useCallback(() => {
+      clearTimeout(timeoutRef.current);
+      setOpen(false);
+    }, []);
+    const trigger = cloneElement(children, {
+      ref: anchorRef,
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide
+    });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      trigger,
+      open && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: floatingRef,
+          "data-react-fancy-tooltip": "",
+          role: "tooltip",
+          className: cn(
+            "fancy-fade-in pointer-events-none fixed z-50 max-w-xs rounded-lg bg-zinc-900 px-3 py-1.5 text-sm text-white shadow-lg dark:bg-zinc-700 dark:text-zinc-100",
+            className
+          ),
+          style: { left: position.x, top: position.y },
+          children: [
+            content,
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute h-2 w-2 rotate-45 bg-zinc-900 dark:bg-zinc-700",
+                  position.placement.startsWith("top") && "bottom-[-4px] left-1/2 -translate-x-1/2",
+                  position.placement.startsWith("bottom") && "top-[-4px] left-1/2 -translate-x-1/2",
+                  position.placement.startsWith("left") && "right-[-4px] top-1/2 -translate-y-1/2",
+                  position.placement.startsWith("right") && "left-[-4px] top-1/2 -translate-y-1/2"
+                )
+              }
+            )
+          ]
+        }
+      ) })
+    ] });
+  }
+);
+Tooltip.displayName = "Tooltip";
+
+export { Tooltip };
+//# sourceMappingURL=chunk-E4LFD44D.js.map
+//# sourceMappingURL=chunk-E4LFD44D.js.map

package/dist/chunk-E4LFD44D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tooltip/Tooltip.tsx"],"names":["Tooltip"],"mappings":";;;;;;AAaO,IAAM,OAAA,GAAU,UAAA;AAAA,EACrB,SAASA,QAAAA,CACP,EAAE,QAAA,EAAU,OAAA,EAAS,SAAA,GAAY,KAAA,EAAO,KAAA,GAAQ,GAAA,EAAK,MAAA,GAAS,CAAA,EAAG,SAAA,IACjE,IAAA,EACA;AACA,IAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,IAAA,MAAM,SAAA,GAAY,OAAoB,IAAI,CAAA;AAC1C,IAAA,MAAM,WAAA,GAAc,OAAuB,IAAI,CAAA;AAC/C,IAAA,MAAM,UAAA,GAAa,OAAsC,MAAS,CAAA;AAElE,IAAA,MAAM,QAAA,GAAW,mBAAA,CAAoB,SAAA,EAAW,WAAA,EAAa;AAAA,MAC3D,SAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA,EAAS;AAAA,KACV,CAAA;AAED,IAAA,MAAM,IAAA,GAAO,YAAY,MAAM;AAC7B,MAAA,UAAA,CAAW,UAAU,UAAA,CAAW,MAAM,OAAA,CAAQ,IAAI,GAAG,KAAK,CAAA;AAAA,IAC5D,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,IAAA,MAAM,IAAA,GAAO,YAAY,MAAM;AAC7B,MAAA,YAAA,CAAa,WAAW,OAAO,CAAA;AAC/B,MAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,IACf,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,OAAA,GAAU,aAAa,QAAA,EAAmD;AAAA,MAC9E,GAAA,EAAK,SAAA;AAAA,MACL,YAAA,EAAc,IAAA;AAAA,MACd,YAAA,EAAc,IAAA;AAAA,MACd,OAAA,EAAS,IAAA;AAAA,MACT,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,MAAA,OAAA;AAAA,MACA,IAAA,wBACE,MAAA,EAAA,EACC,QAAA,kBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,WAAA;AAAA,UACL,0BAAA,EAAyB,EAAA;AAAA,UACzB,IAAA,EAAK,SAAA;AAAA,UACL,SAAA,EAAW,EAAA;AAAA,YACT,2JAAA;AAAA,YACA;AAAA,WACF;AAAA,UACA,OAAO,EAAE,IAAA,EAAM,SAAS,CAAA,EAAG,GAAA,EAAK,SAAS,CAAA,EAAE;AAAA,UAE1C,QAAA,EAAA;AAAA,YAAA,OAAA;AAAA,4BACD,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,EAAA;AAAA,kBACT,yDAAA;AAAA,kBACA,QAAA,CAAS,SAAA,CAAU,UAAA,CAAW,KAAK,CAAA,IACjC,yCAAA;AAAA,kBACF,QAAA,CAAS,SAAA,CAAU,UAAA,CAAW,QAAQ,CAAA,IACpC,sCAAA;AAAA,kBACF,QAAA,CAAS,SAAA,CAAU,UAAA,CAAW,MAAM,CAAA,IAClC,uCAAA;AAAA,kBACF,QAAA,CAAS,SAAA,CAAU,UAAA,CAAW,OAAO,CAAA,IACnC;AAAA;AACJ;AAAA;AACF;AAAA;AAAA,OACF,EACF;AAAA,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-E4LFD44D.js","sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type ReactElement,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { useFloatingPosition } from \"../../hooks/use-floating-position\";\nimport type { TooltipProps } from \"./Tooltip.types\";\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(\n    { children, content, placement = \"top\", delay = 200, offset = 8, className },\n    _ref,\n  ) {\n    const [open, setOpen] = useState(false);\n    const anchorRef = useRef<HTMLElement>(null);\n    const floatingRef = useRef<HTMLDivElement>(null);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n    const position = useFloatingPosition(anchorRef, floatingRef, {\n      placement,\n      offset,\n      enabled: open,\n    });\n\n    const show = useCallback(() => {\n      timeoutRef.current = setTimeout(() => setOpen(true), delay);\n    }, [delay]);\n\n    const hide = useCallback(() => {\n      clearTimeout(timeoutRef.current);\n      setOpen(false);\n    }, []);\n\n    const trigger = cloneElement(children as ReactElement<Record<string, unknown>>, {\n      ref: anchorRef,\n      onMouseEnter: show,\n      onMouseLeave: hide,\n      onFocus: show,\n      onBlur: hide,\n    });\n\n    return (\n      <>\n        {trigger}\n        {open && (\n          <Portal>\n            <div\n              ref={floatingRef}\n              data-react-fancy-tooltip=\"\"\n              role=\"tooltip\"\n              className={cn(\n                \"fancy-fade-in pointer-events-none fixed z-50 max-w-xs rounded-lg bg-zinc-900 px-3 py-1.5 text-sm text-white shadow-lg dark:bg-zinc-700 dark:text-zinc-100\",\n                className,\n              )}\n              style={{ left: position.x, top: position.y }}\n            >\n              {content}\n              <div\n                className={cn(\n                  \"absolute h-2 w-2 rotate-45 bg-zinc-900 dark:bg-zinc-700\",\n                  position.placement.startsWith(\"top\") &&\n                    \"bottom-[-4px] left-1/2 -translate-x-1/2\",\n                  position.placement.startsWith(\"bottom\") &&\n                    \"top-[-4px] left-1/2 -translate-x-1/2\",\n                  position.placement.startsWith(\"left\") &&\n                    \"right-[-4px] top-1/2 -translate-y-1/2\",\n                  position.placement.startsWith(\"right\") &&\n                    \"left-[-4px] top-1/2 -translate-y-1/2\",\n                )}\n              />\n            </div>\n          </Portal>\n        )}\n      </>\n    );\n  },\n);\n\nTooltip.displayName = \"Tooltip\";\n"]}

package/dist/chunk-E7PHL3TD.cjs

@@ -0,0 +1,144 @@
+'use strict';
+
+var chunkKJ22KE56_cjs = require('./chunk-KJ22KE56.cjs');
+var chunkL3V3BYVS_cjs = require('./chunk-L3V3BYVS.cjs');
+var chunkOUOEQZHY_cjs = require('./chunk-OUOEQZHY.cjs');
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var OtpInput = react.forwardRef(
+  function OtpInput2({
+    length = 6,
+    value: controlledValue,
+    onChange,
+    disabled = false,
+    autoFocus = false,
+    className,
+    mode
+  }, ref) {
+    const [value, setValue] = chunkOUOEQZHY_cjs.useControllableState(
+      controlledValue,
+      "",
+      onChange
+    );
+    const resolvedMode = chunkL3V3BYVS_cjs.useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = chunkKJ22KE56_cjs.useInlineEdit(resolvedMode, disabled);
+    const inputsRef = react.useRef([]);
+    const focusInput = react.useCallback(
+      (index) => {
+        const clamped = Math.max(0, Math.min(index, length - 1));
+        inputsRef.current[clamped]?.focus();
+      },
+      [length]
+    );
+    const handleChange = react.useCallback(
+      (index, char) => {
+        const digit = char.replace(/[^0-9]/g, "");
+        if (!digit) return;
+        const chars = value.padEnd(length, " ").split("");
+        chars[index] = digit[0];
+        const newValue = chars.join("").trimEnd();
+        setValue(newValue);
+        if (index < length - 1) {
+          focusInput(index + 1);
+        }
+      },
+      [value, length, setValue, focusInput]
+    );
+    const handleKeyDown = react.useCallback(
+      (index, e) => {
+        if (e.key === "Backspace") {
+          e.preventDefault();
+          const chars = value.padEnd(length, " ").split("");
+          if (chars[index]?.trim()) {
+            chars[index] = " ";
+            setValue(chars.join("").trimEnd());
+          } else if (index > 0) {
+            chars[index - 1] = " ";
+            setValue(chars.join("").trimEnd());
+            focusInput(index - 1);
+          }
+        } else if (e.key === "ArrowLeft") {
+          focusInput(index - 1);
+        } else if (e.key === "ArrowRight") {
+          focusInput(index + 1);
+        }
+      },
+      [value, length, setValue, focusInput]
+    );
+    const handlePaste = react.useCallback(
+      (e) => {
+        e.preventDefault();
+        const pasted = e.clipboardData.getData("text").replace(/[^0-9]/g, "");
+        const newValue = pasted.slice(0, length);
+        setValue(newValue);
+        focusInput(Math.min(newValue.length, length - 1));
+      },
+      [length, setValue, focusInput]
+    );
+    if (!showControl) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-react-fancy-otp-input": "",
+          "data-mode": "view",
+          ref,
+          role: interactive ? "button" : void 0,
+          tabIndex: interactive ? 0 : void 0,
+          title: interactive ? "Click to edit" : void 0,
+          onClick: interactive ? enterEdit : void 0,
+          onKeyDown: interactive ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              enterEdit();
+            }
+          } : void 0,
+          className: chunk3Z6ALUWP_cjs.cn(
+            "font-mono text-lg tracking-[0.4em] text-zinc-900 dark:text-zinc-100",
+            interactive && "cursor-pointer rounded-md outline-none transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-blue-500/40",
+            className
+          ),
+          children: value || "\u2014"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-react-fancy-otp-input": "",
+        ref,
+        className: chunk3Z6ALUWP_cjs.cn("flex gap-2", className),
+        onBlur: (e) => {
+          if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
+        },
+        children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: (el) => {
+              inputsRef.current[i] = el;
+            },
+            type: "text",
+            inputMode: "numeric",
+            maxLength: 1,
+            value: value[i] ?? "",
+            onChange: (e) => handleChange(i, e.target.value),
+            onKeyDown: (e) => handleKeyDown(i, e),
+            onPaste: handlePaste,
+            onFocus: (e) => e.target.select(),
+            disabled,
+            autoFocus: (autoFocus || interactive) && i === 0,
+            className: "h-12 w-10 rounded-lg border border-zinc-200 bg-white text-center text-lg font-medium text-zinc-900 outline-none transition-[border-color,box-shadow] duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40 dark:border-zinc-700 dark:bg-[#1e1e24] dark:text-zinc-100 dark:focus:border-blue-400 dark:focus:ring-blue-400/20",
+            "aria-label": `Digit ${i + 1}`
+          },
+          i
+        ))
+      }
+    );
+  }
+);
+OtpInput.displayName = "OtpInput";
+
+exports.OtpInput = OtpInput;
+//# sourceMappingURL=chunk-E7PHL3TD.cjs.map
+//# sourceMappingURL=chunk-E7PHL3TD.cjs.map

package/dist/chunk-E7PHL3TD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OtpInput/OtpInput.tsx"],"names":["forwardRef","OtpInput","useControllableState","useFieldMode","useInlineEdit","useRef","useCallback","jsx","cn"],"mappings":"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","file":"chunk-E7PHL3TD.cjs","sourcesContent":["import { forwardRef, useCallback, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { useFieldMode } from \"../inputs/mode/FieldMode.context\";\nimport { useInlineEdit } from \"../inputs/mode/useInlineEdit\";\nimport type { OtpInputProps } from \"./OtpInput.types\";\n\nexport const OtpInput = forwardRef<HTMLDivElement, OtpInputProps>(\n  function OtpInput(\n    {\n      length = 6,\n      value: controlledValue,\n      onChange,\n      disabled = false,\n      autoFocus = false,\n      className,\n      mode,\n    },\n    ref,\n  ) {\n    const [value, setValue] = useControllableState(\n      controlledValue,\n      \"\",\n      onChange,\n    );\n    const resolvedMode = useFieldMode(mode);\n    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n    const inputsRef = useRef<(HTMLInputElement | null)[]>([]);\n\n    const focusInput = useCallback(\n      (index: number) => {\n        const clamped = Math.max(0, Math.min(index, length - 1));\n        inputsRef.current[clamped]?.focus();\n      },\n      [length],\n    );\n\n    const handleChange = useCallback(\n      (index: number, char: string) => {\n        const digit = char.replace(/[^0-9]/g, \"\");\n        if (!digit) return;\n\n        const chars = value.padEnd(length, \" \").split(\"\");\n        chars[index] = digit[0];\n        const newValue = chars.join(\"\").trimEnd();\n        setValue(newValue);\n\n        if (index < length - 1) {\n          focusInput(index + 1);\n        }\n      },\n      [value, length, setValue, focusInput],\n    );\n\n    const handleKeyDown = useCallback(\n      (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === \"Backspace\") {\n          e.preventDefault();\n          const chars = value.padEnd(length, \" \").split(\"\");\n          if (chars[index]?.trim()) {\n            chars[index] = \" \";\n            setValue(chars.join(\"\").trimEnd());\n          } else if (index > 0) {\n            chars[index - 1] = \" \";\n            setValue(chars.join(\"\").trimEnd());\n            focusInput(index - 1);\n          }\n        } else if (e.key === \"ArrowLeft\") {\n          focusInput(index - 1);\n        } else if (e.key === \"ArrowRight\") {\n          focusInput(index + 1);\n        }\n      },\n      [value, length, setValue, focusInput],\n    );\n\n    const handlePaste = useCallback(\n      (e: React.ClipboardEvent) => {\n        e.preventDefault();\n        const pasted = e.clipboardData.getData(\"text\").replace(/[^0-9]/g, \"\");\n        const newValue = pasted.slice(0, length);\n        setValue(newValue);\n        focusInput(Math.min(newValue.length, length - 1));\n      },\n      [length, setValue, focusInput],\n    );\n\n    if (!showControl) {\n      return (\n        <div\n          data-react-fancy-otp-input=\"\"\n          data-mode=\"view\"\n          ref={ref}\n          role={interactive ? \"button\" : undefined}\n          tabIndex={interactive ? 0 : undefined}\n          title={interactive ? \"Click to edit\" : undefined}\n          onClick={interactive ? enterEdit : undefined}\n          onKeyDown={\n            interactive\n              ? (e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    enterEdit();\n                  }\n                }\n              : undefined\n          }\n          className={cn(\n            \"font-mono text-lg tracking-[0.4em] text-zinc-900 dark:text-zinc-100\",\n            interactive &&\n              \"cursor-pointer rounded-md outline-none transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-blue-500/40\",\n            className,\n          )}\n        >\n          {value || \"—\"}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        data-react-fancy-otp-input=\"\"\n        ref={ref}\n        className={cn(\"flex gap-2\", className)}\n        onBlur={(e) => {\n          if (interactive && !e.currentTarget.contains(e.relatedTarget as Node)) exitEdit();\n        }}\n      >\n        {Array.from({ length }, (_, i) => (\n          <input\n            key={i}\n            ref={(el) => {\n              inputsRef.current[i] = el;\n            }}\n            type=\"text\"\n            inputMode=\"numeric\"\n            maxLength={1}\n            value={value[i] ?? \"\"}\n            onChange={(e) => handleChange(i, e.target.value)}\n            onKeyDown={(e) => handleKeyDown(i, e)}\n            onPaste={handlePaste}\n            onFocus={(e) => e.target.select()}\n            disabled={disabled}\n            autoFocus={(autoFocus || interactive) && i === 0}\n            className=\"h-12 w-10 rounded-lg border border-zinc-200 bg-white text-center text-lg font-medium text-zinc-900 outline-none transition-[border-color,box-shadow] duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40 dark:border-zinc-700 dark:bg-[#1e1e24] dark:text-zinc-100 dark:focus:border-blue-400 dark:focus:ring-blue-400/20\"\n            aria-label={`Digit ${i + 1}`}\n          />\n        ))}\n      </div>\n    );\n  },\n);\n\nOtpInput.displayName = \"OtpInput\";\n"]}