@worldcoin/mini-apps-ui-kit-react 1.3.3 → 1.3.5

package/dist/components/Icons/Eye.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function Eye({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: cn("size-6", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M3 13C6.6 5 17.4 5 21 13",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "square",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 17C10.3431 17 9 15.6569 9 14C9 12.3431 10.3431 11 12 11C13.6569 11 15 12.3431 15 14C15 15.6569 13.6569 17 12 17Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "square",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Eye
+};

package/dist/components/Icons/EyeClosed.js

@@ -0,0 +1,60 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function EyeClosed({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: cn("size-6", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M19.5001 16L17.0249 12.6038",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 17.5V14",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M4.5 16L6.96895 12.6124",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M3 8C6.6 16 17.4 16 21 8",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  EyeClosed
+};

package/dist/components/PasswordField/PasswordField.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import haptics from "../../lib/haptics.js";
+import { forwardRef, useState } from "react";
+import { Eye } from "../Icons/Eye.js";
+import { EyeClosed } from "../Icons/EyeClosed.js";
+import { Input } from "../Input/Input.js";
+const PasswordField = forwardRef(
+  ({
+    isValid,
+    disabled,
+    type = "password",
+    autoComplete = "current-password",
+    spellCheck = "false",
+    inputMode = "text",
+    autoCapitalize = "off",
+    autoCorrect = "off",
+    ...props
+  }, ref) => {
+    const [showPassword, setShowPassword] = useState(false);
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...props,
+        ref,
+        isValid,
+        disabled,
+        endAdornment: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setShowPassword(!showPassword);
+              haptics.impact("light");
+            },
+            children: showPassword ? /* @__PURE__ */ jsx(EyeClosed, {}) : /* @__PURE__ */ jsx(Eye, {})
+          }
+        ),
+        type: showPassword ? "text" : "password",
+        autoComplete,
+        spellCheck,
+        inputMode,
+        autoCapitalize,
+        autoCorrect
+      }
+    );
+  }
+);
+PasswordField.displayName = "PasswordField";
+export {
+  PasswordField
+};

package/dist/components/SafeAreaView/SafeAreaView.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { cn } from "../../lib/utils.js";

package/dist/components/SafeAreaView/useSafeAreaInsets.js

@@ -1,7 +1,29 @@
+"use client";
+import { useState, useEffect } from "react";
+const defaultSafeAreaInsets = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+};
 function useSafeAreaInsets() {
-  var _a, _b;
-  const safeAreaInsets = (_b = (_a = window == null ? void 0 : window.MiniKit) == null ? void 0 : _a.deviceProperties) == null ? void 0 : _b.safeAreaInsets;
-  return safeAreaInsets ?? { top: 0, right: 0, bottom: 0, left: 0 };
+  const [safeAreaInsets, setSafeAreaInsets] = useState(() => {
+    var _a, _b;
+    if (typeof window !== "undefined") {
+      return ((_b = (_a = window == null ? void 0 : window.MiniKit) == null ? void 0 : _a.deviceProperties) == null ? void 0 : _b.safeAreaInsets) ?? defaultSafeAreaInsets;
+    }
+    return defaultSafeAreaInsets;
+  });
+  useEffect(() => {
+    var _a, _b;
+    if (typeof window !== "undefined") {
+      const insets = (_b = (_a = window == null ? void 0 : window.MiniKit) == null ? void 0 : _a.deviceProperties) == null ? void 0 : _b.safeAreaInsets;
+      if (insets && JSON.stringify(insets) !== JSON.stringify(safeAreaInsets)) {
+        setSafeAreaInsets(insets);
+      }
+    }
+  }, [safeAreaInsets]);
+  return safeAreaInsets;
 }
 export {
   useSafeAreaInsets

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { Input } from './components/Input';
 export { ListItem } from './components/ListItem';
 export { NumberPad } from './components/NumberPad';
 export { OTPField } from './components/OTPField';
+export { PasswordField } from './components/PasswordField';
 export { Pill } from './components/Pill';
 export { RadioGroup, RadioGroupItem } from './components/RadioGroup';
 export { Select } from './components/Select';

package/dist/index.js

@@ -11,6 +11,7 @@ import { Input } from "./components/Input/Input.js";
 import { ListItem } from "./components/ListItem/ListItem.js";
 import { NumberPad } from "./components/NumberPad/NumberPad.js";
 import { OTPField } from "./components/OTPField/OTPField.js";
+import { PasswordField } from "./components/PasswordField/PasswordField.js";
 import { Pill } from "./components/Pill/Pill.js";
 import { RadioGroup } from "./components/RadioGroup/RadioGroup.js";
 import { RadioGroupItem } from "./components/RadioGroup/RadioGroupItem.js";
@@ -78,6 +79,7 @@ export {
   Marble,
   NumberPad,
   OTPField,
+  PasswordField,
   PhoneField,
   Pill,
   Progress,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worldcoin/mini-apps-ui-kit-react",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",