@worldcoin/idkit 2.4.0 → 2.4.2

package/build/index.cjs

@@ -351,13 +351,13 @@ var import_react2 = require("react");
 var useMedia = () => {
   const getInitialState = () => {
     if (typeof window !== "undefined") {
-      return window.matchMedia("(max-width: 768px)").matches ? "mobile" : "desktop";
+      return window.matchMedia("(max-width: 1024px)").matches ? "mobile" : "desktop";
     }
     return "desktop";
   };
   const [media, setMedia] = (0, import_react2.useState)(getInitialState());
   (0, import_react2.useEffect)(() => {
-    const mql = window.matchMedia("(max-width: 768px)");
+    const mql = window.matchMedia("(max-width: 1024px)");
     const handleChange = (mql2) => setMedia(mql2.matches ? "mobile" : "desktop");
     handleChange(mql);
     mql.addEventListener("change", handleChange);
@@ -1653,6 +1653,9 @@ input[type='number']::-webkit-inner-spin-button,
   .md\\:mt-2 {
     margin-top: 8px;
   }
+  .md\\:block {
+    display: block;
+  }
   .md\\:hidden {
     display: none;
   }
@@ -1679,6 +1682,15 @@ input[type='number']::-webkit-inner-spin-button,
     padding: 16px;
   }
 }
+
+@media (min-width: 1280px) {
+  .xl\\:block {
+    display: block;
+  }
+  .xl\\:hidden {
+    display: none;
+  }
+}
 `;
 
 // src/components/Styles.tsx
@@ -2165,7 +2177,6 @@ var QRPlaceholderIcon_default = QRPlaceholderIcon;
 // src/components/IDKitWidget/States/WorldID/QRState.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var QRState = ({ qrData, showQR, setShowQR }) => {
-  const media = useMedia_default();
   const [copiedLink, setCopiedLink] = (0, import_react6.useState)(false);
   const copyLink = (0, import_react6.useCallback)(() => {
     (0, import_copy_to_clipboard.default)(qrData ?? "");
@@ -2173,15 +2184,22 @@ var QRState = ({ qrData, showQR, setShowQR }) => {
     setTimeout(() => setCopiedLink(false), 2e3);
   }, [qrData]);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: clsx_default("md:hidden", { "mb-10 space-y-4": !showQR }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "md:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "a",
+      {
+        href: qrData ?? void 0,
+        className: "flex w-full items-center space-x-2 rounded-2xl border border-transparent bg-0d151d p-4 font-medium text-white shadow-sm dark:bg-white dark:text-0d151d",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(WorldcoinIcon_default, { className: "size-5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex-1 text-center", children: __("Open World App") })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: clsx_default("hidden md:block xl:hidden", { "mb-10 space-y-4": !showQR }), children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-        import_framer_motion.motion.a,
+        "a",
         {
-          href: qrData ?? "",
-          whileTap: { scale: 0.95 },
-          whileHover: { scale: 1.05 },
-          transition: { layout: { duration: 0.15 } },
-          layoutId: media == "desktop" ? void 0 : "worldid-button",
+          href: qrData ?? void 0,
           className: clsx_default(
             "flex w-full items-center space-x-2 rounded-2xl border border-transparent p-4 font-medium shadow-sm",
             "bg-0d151d text-white dark:bg-white dark:text-0d151d",
@@ -2189,20 +2207,12 @@ var QRState = ({ qrData, showQR, setShowQR }) => {
           ),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(WorldcoinIcon_default, { className: "size-5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              import_framer_motion.motion.span,
-              {
-                className: "flex-1 text-center",
-                transition: { layout: { duration: 0.15 } },
-                layoutId: media == "desktop" ? void 0 : "worldid-text",
-                children: __("Open World App")
-              }
-            )
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex-1 text-center", children: __("Open World App") })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: clsx_default("mb-3", { "space-y-4": !showQR, hidden: media === "mobile" }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: clsx_default("flex items-center space-x-4 ", { hidden: showQR }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: clsx_default("mb-3 space-y-4", { hidden: showQR }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center space-x-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("hr", { className: "flex-1" }),
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xs font-medium text-9ba3ae", children: "or" }),
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("hr", { className: "flex-1" })
@@ -2212,12 +2222,61 @@ var QRState = ({ qrData, showQR, setShowQR }) => {
           {
             className: "w-full rounded-2xl border border-ebecef p-4 text-lg font-medium text-3c424b",
             onClick: () => setShowQR((state) => !state),
-            children: showQR ? __("Hide QR Code") : __("Display QR Code")
+            children: __("Display QR Code")
           }
         )
       ] })
     ] }),
-    (media == "desktop" || showQR) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    showQR && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "hidden md:block xl:hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        import_framer_motion.motion.button,
+        {
+          className: "w-full rounded-2xl border border-ebecef p-4 text-lg font-medium text-3c424b",
+          onClick: () => setShowQR(false),
+          children: __("Hide QR Code")
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "relative inline-flex items-center justify-center rounded-2xl border border-f1f5f8 p-3 dark:border-f1f5f8/10", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-29343f dark:text-white", children: qrData ? (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { onClick: copyLink, className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(QRCode_default, { data: qrData, size: 200 }) })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex size-[200px] items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(QRPlaceholderIcon_default, { className: "size-[200px] animate-pulse" }) }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_framer_motion.AnimatePresence, { children: copiedLink && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        import_framer_motion.motion.div,
+        {
+          className: "text-center text-sm text-9eafc0",
+          initial: "hidden",
+          animate: "visible",
+          exit: "exit",
+          variants: {
+            hidden: { opacity: 0, height: 0, marginTop: 0 },
+            visible: {
+              opacity: 1,
+              height: "auto",
+              marginTop: 8,
+              transition: {
+                duration: 0.25,
+                opacity: { delay: 0.05, duration: 0.2 },
+                ease: "easeInOut"
+              }
+            },
+            exit: {
+              opacity: 0,
+              height: 0,
+              marginTop: 0,
+              transition: {
+                duration: 0.4,
+                delay: 0.1,
+                opacity: { duration: 0.25, delay: 0 },
+                ease: "easeInOut"
+              }
+            }
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rounded-lg border border-f1f5f8 px-2 py-1 text-sm", children: __("QR Code copied") })
+        },
+        "copied"
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "hidden xl:block", children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_framer_motion.AnimatePresence, { children: copiedLink && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         import_framer_motion.motion.div,
         {

package/build/index.js

@@ -34,13 +34,13 @@ import { useEffect as useEffect2, useState } from "react";
 var useMedia = () => {
   const getInitialState = () => {
     if (typeof window !== "undefined") {
-      return window.matchMedia("(max-width: 768px)").matches ? "mobile" : "desktop";
+      return window.matchMedia("(max-width: 1024px)").matches ? "mobile" : "desktop";
     }
     return "desktop";
   };
   const [media, setMedia] = useState(getInitialState());
   useEffect2(() => {
-    const mql = window.matchMedia("(max-width: 768px)");
+    const mql = window.matchMedia("(max-width: 1024px)");
     const handleChange = (mql2) => setMedia(mql2.matches ? "mobile" : "desktop");
     handleChange(mql);
     mql.addEventListener("change", handleChange);
@@ -1318,6 +1318,9 @@ input[type='number']::-webkit-inner-spin-button,
   .md\\:mt-2 {
     margin-top: 8px;
   }
+  .md\\:block {
+    display: block;
+  }
   .md\\:hidden {
     display: none;
   }
@@ -1344,6 +1347,14 @@ input[type='number']::-webkit-inner-spin-button,
     padding: 16px;
   }
 }
+@media (min-width: 1280px) {
+  .xl\\:block {
+    display: block;
+  }
+  .xl\\:hidden {
+    display: none;
+  }
+}
 `;
 
 // src/components/Styles.tsx
@@ -1755,7 +1766,6 @@ var QRPlaceholderIcon_default = QRPlaceholderIcon;
 // src/components/IDKitWidget/States/WorldID/QRState.tsx
 import { Fragment, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var QRState = ({ qrData, showQR, setShowQR }) => {
-  const media = useMedia_default();
   const [copiedLink, setCopiedLink] = useState3(false);
   const copyLink = useCallback2(() => {
     copy(qrData ?? "");
@@ -1763,15 +1773,22 @@ var QRState = ({ qrData, showQR, setShowQR }) => {
     setTimeout(() => setCopiedLink(false), 2e3);
   }, [qrData]);
   return /* @__PURE__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsxs7("div", { className: clsx_default("md:hidden", { "mb-10 space-y-4": !showQR }), children: [
+    /* @__PURE__ */ jsx11("div", { className: "md:hidden", children: /* @__PURE__ */ jsxs7(
+      "a",
+      {
+        href: qrData ?? void 0,
+        className: "flex w-full items-center space-x-2 rounded-2xl border border-transparent bg-0d151d p-4 font-medium text-white shadow-sm dark:bg-white dark:text-0d151d",
+        children: [
+          /* @__PURE__ */ jsx11(WorldcoinIcon_default, { className: "size-5" }),
+          /* @__PURE__ */ jsx11("span", { className: "flex-1 text-center", children: __("Open World App") })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs7("div", { className: clsx_default("hidden md:block xl:hidden", { "mb-10 space-y-4": !showQR }), children: [
       /* @__PURE__ */ jsxs7(
-        motion.a,
+        "a",
         {
-          href: qrData ?? "",
-          whileTap: { scale: 0.95 },
-          whileHover: { scale: 1.05 },
-          transition: { layout: { duration: 0.15 } },
-          layoutId: media == "desktop" ? void 0 : "worldid-button",
+          href: qrData ?? void 0,
           className: clsx_default(
             "flex w-full items-center space-x-2 rounded-2xl border border-transparent p-4 font-medium shadow-sm",
             "bg-0d151d text-white dark:bg-white dark:text-0d151d",
@@ -1779,20 +1796,12 @@ var QRState = ({ qrData, showQR, setShowQR }) => {
           ),
           children: [
             /* @__PURE__ */ jsx11(WorldcoinIcon_default, { className: "size-5" }),
-            /* @__PURE__ */ jsx11(
-              motion.span,
-              {
-                className: "flex-1 text-center",
-                transition: { layout: { duration: 0.15 } },
-                layoutId: media == "desktop" ? void 0 : "worldid-text",
-                children: __("Open World App")
-              }
-            )
+            /* @__PURE__ */ jsx11("span", { className: "flex-1 text-center", children: __("Open World App") })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs7("div", { className: clsx_default("mb-3", { "space-y-4": !showQR, hidden: media === "mobile" }), children: [
-        /* @__PURE__ */ jsxs7("div", { className: clsx_default("flex items-center space-x-4 ", { hidden: showQR }), children: [
+      /* @__PURE__ */ jsxs7("div", { className: clsx_default("mb-3 space-y-4", { hidden: showQR }), children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center space-x-4", children: [
           /* @__PURE__ */ jsx11("hr", { className: "flex-1" }),
           /* @__PURE__ */ jsx11("span", { className: "text-xs font-medium text-9ba3ae", children: "or" }),
           /* @__PURE__ */ jsx11("hr", { className: "flex-1" })
@@ -1802,12 +1811,61 @@ var QRState = ({ qrData, showQR, setShowQR }) => {
           {
             className: "w-full rounded-2xl border border-ebecef p-4 text-lg font-medium text-3c424b",
             onClick: () => setShowQR((state) => !state),
-            children: showQR ? __("Hide QR Code") : __("Display QR Code")
+            children: __("Display QR Code")
           }
         )
       ] })
     ] }),
-    (media == "desktop" || showQR) && /* @__PURE__ */ jsxs7(Fragment, { children: [
+    showQR && /* @__PURE__ */ jsxs7("div", { className: "hidden md:block xl:hidden", children: [
+      /* @__PURE__ */ jsx11("div", { className: "mb-4", children: /* @__PURE__ */ jsx11(
+        motion.button,
+        {
+          className: "w-full rounded-2xl border border-ebecef p-4 text-lg font-medium text-3c424b",
+          onClick: () => setShowQR(false),
+          children: __("Hide QR Code")
+        }
+      ) }),
+      /* @__PURE__ */ jsx11("div", { className: "relative inline-flex items-center justify-center rounded-2xl border border-f1f5f8 p-3 dark:border-f1f5f8/10", children: /* @__PURE__ */ jsx11("div", { className: "text-29343f dark:text-white", children: qrData ? (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        /* @__PURE__ */ jsx11("div", { onClick: copyLink, className: "cursor-pointer", children: /* @__PURE__ */ jsx11(QRCode_default, { data: qrData, size: 200 }) })
+      ) : /* @__PURE__ */ jsx11("div", { className: "flex size-[200px] items-center justify-center", children: /* @__PURE__ */ jsx11(QRPlaceholderIcon_default, { className: "size-[200px] animate-pulse" }) }) }) }),
+      /* @__PURE__ */ jsx11(AnimatePresence, { children: copiedLink && /* @__PURE__ */ jsx11(
+        motion.div,
+        {
+          className: "text-center text-sm text-9eafc0",
+          initial: "hidden",
+          animate: "visible",
+          exit: "exit",
+          variants: {
+            hidden: { opacity: 0, height: 0, marginTop: 0 },
+            visible: {
+              opacity: 1,
+              height: "auto",
+              marginTop: 8,
+              transition: {
+                duration: 0.25,
+                opacity: { delay: 0.05, duration: 0.2 },
+                ease: "easeInOut"
+              }
+            },
+            exit: {
+              opacity: 0,
+              height: 0,
+              marginTop: 0,
+              transition: {
+                duration: 0.4,
+                delay: 0.1,
+                opacity: { duration: 0.25, delay: 0 },
+                ease: "easeInOut"
+              }
+            }
+          },
+          children: /* @__PURE__ */ jsx11("span", { className: "rounded-lg border border-f1f5f8 px-2 py-1 text-sm", children: __("QR Code copied") })
+        },
+        "copied"
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "hidden xl:block", children: [
       /* @__PURE__ */ jsx11(AnimatePresence, { children: copiedLink && /* @__PURE__ */ jsx11(
         motion.div,
         {

package/package.json

@@ -37,6 +37,9 @@
     "tsup": "^8.1.0",
     "typescript": "^5.5.3"
   },
+  "overrides": {
+    "rollup": "^4.22.4"
+  },
   "engines": {
     "node": ">=12.4"
   },
@@ -103,7 +106,7 @@
       ]
     }
   },
-  "version": "2.4.0",
+  "version": "2.4.2",
   "scripts": {
     "build": "npm run build:css && tsup",
     "build:css": "npx tailwindcss -i ./src/styles/styles.css -o ./build/index.css --minify",