@worldcoin/mini-apps-ui-kit-react 0.0.8 → 1.0.0-canary.0

package/dist/components/NumberPad/NumberPad.js

@@ -1,8 +1,10 @@
 "use client";
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
+import { cn as c } from "../../lib/utils.js";
 import { useLongPress as d } from "../../node_modules/.pnpm/@uidotdev_usehooks@2.4.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@uidotdev/usehooks/index.js";
-import { Delete as c } from "./Delete.js";
-const m = [
+import { typographyVariants as m } from "../Typography/Typography.js";
+import { Delete as v } from "./Delete.js";
+const f = [
   { value: "1" },
   { value: "2" },
   { value: "3" },
@@ -14,45 +16,49 @@ const m = [
   { value: "9" },
   { value: "." },
   { value: "0" },
-  { value: "del", label: /* @__PURE__ */ s(c, { className: "size-6" }) }
-], N = ({
-  value: l = "",
-  onChange: r,
+  { value: "del", label: /* @__PURE__ */ l(v, { className: "size-6" }) }
+], h = ({
+  value: r = "",
+  onChange: s,
   disabled: a = !1,
-  onLongDeletePress: i = () => {
+  onLongDeletePress: t = () => {
   },
-  longPressOptions: o = {
+  longPressOptions: n = {
     threshold: 1500
   }
 }) => {
-  l !== "" && isNaN(Number(l)) && console.error("NumberPad value must be a valid number or empty string");
-  const u = (e) => {
-    if (!(!r || a))
+  r !== "" && isNaN(Number(r)) && console.error("NumberPad value must be a valid number or empty string");
+  const o = (e) => {
+    if (!(!s || a))
       if (e === "del")
-        r(l.slice(0, -1));
+        s(r.slice(0, -1));
       else {
-        if (e === "." && l.includes("."))
+        if (e === "." && r.includes("."))
           return;
         {
-          const t = l + e;
-          isNaN(Number(t)) || r(t);
+          const i = r + e;
+          (e === "." || !isNaN(Number(i))) && s(i);
         }
       }
-  }, n = d(i, o);
-  return /* @__PURE__ */ s("div", { className: "grid grid-cols-3 grid-rows-4 gap-1 w-full", children: m.map((e) => /* @__PURE__ */ s(
+  }, u = d(t, n);
+  return /* @__PURE__ */ l("div", { className: "grid grid-cols-3 grid-rows-4 gap-1 w-full", children: f.map((e) => /* @__PURE__ */ l(
     "button",
     {
       type: "button",
-      onClick: () => u(e.value),
+      onClick: () => o(e.value),
       disabled: a,
-      className: "h-12 min-w-28 flex items-center justify-center text-[1.625rem] font-semibold font-display rounded-md transition-colors duration-200 active:bg-gray-50 select-none disabled:text-gray-300 disabled:cursor-not-allowed disabled:active:bg-transparent",
-      ...e.value === "del" ? n : {},
-      children: e.label || e.value
+      className: c(
+        m({ variant: "heading", level: 3 }),
+        "h-12 min-w-28 flex items-center justify-center select-none group",
+        "disabled:text-gray-300 disabled:cursor-not-allowed disabled:active:bg-transparent"
+      ),
+      ...e.value === "del" ? u : {},
+      children: /* @__PURE__ */ l("span", { className: "duration-200 transition-colors size-12 flex items-center justify-center rounded-full group-active:bg-gray-50", children: e.label || e.value })
     },
     e.value
   )) });
 };
 export {
-  N as NumberPad,
-  N as default
+  h as NumberPad,
+  h as default
 };

package/dist/components/OTPField/OTPField.js

@@ -14,25 +14,25 @@ const R = {
   chars: "text",
   digitsAndChars: "text"
 }, O = x.forwardRef(
-  ({ maxLength: i = 6, error: a, children: N, mode: r = "digits", pattern: s, ...n }, e) => /* @__PURE__ */ t(
+  ({ maxLength: a = 6, error: r, children: N, mode: i = "digits", pattern: n, ...s }, e) => /* @__PURE__ */ t(
     f,
     {
       ref: e,
-      ...n,
-      maxLength: i,
-      inputMode: E[r],
-      pattern: s || R[r],
-      containerClassName: "flex items-center gap-1 has-[:disabled]:opacity-50",
+      ...s,
+      maxLength: a,
+      inputMode: E[i],
+      pattern: n || R[i],
+      containerClassName: "flex items-center gap-2 has-[:disabled]:opacity-50",
       render: ({ slots: o }) => /* @__PURE__ */ t(p, { children: o.map(({ isActive: d, char: c }, m) => /* @__PURE__ */ t(
         "div",
         {
           ref: e,
           role: "textbox",
           className: l(
-            y({ error: a }),
+            y({ error: r }),
             _({ variant: "body", level: 2 }),
             "w-12 h-[4.25rem] rounded-lg flex items-center justify-center",
-            d && "z-10 bg-gray-0 shadow-card"
+            (d || r) && "z-10 bg-gray-0"
           ),
           children: c
         },

package/dist/components/PasswordField/PasswordField.d.ts

@@ -0,0 +1,13 @@
+import { InputProps } from '../Input';
+export interface PasswordFieldProps extends Omit<InputProps, "startAdornment" | "startAdornmentWidth"> {
+    /**
+     * If true, the input will display in an error state with error styling
+     */
+    error?: boolean;
+    /**
+     * If true, the input will display in a valid state with success styling
+     */
+    isValid?: boolean;
+}
+export declare const PasswordField: import('react').ForwardRefExoticComponent<PasswordFieldProps & import('react').RefAttributes<HTMLInputElement>>;
+export default PasswordField;

package/dist/components/PasswordField/PasswordField.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as l, useState as w } from "react";
+import { Eye as u } from "../Icons/Eye.js";
+import { EyeClosed as c } from "../Icons/EyeClosed.js";
+import { Input as h } from "../Input/Input.js";
+const y = l(
+  ({
+    isValid: t,
+    disabled: r,
+    type: A = "password",
+    autoComplete: d = "current-password",
+    spellCheck: n = "false",
+    inputMode: s = "text",
+    autoCapitalize: m = "off",
+    autoCorrect: p = "off",
+    endAdornment: P,
+    endAdornmentWidth: x,
+    ...a
+  }, f) => {
+    const [e, i] = w(!1);
+    return /* @__PURE__ */ o(
+      h,
+      {
+        ...a,
+        ref: f,
+        isValid: t,
+        disabled: r,
+        endAdornmentWidth: 2.4,
+        endAdornment: /* @__PURE__ */ o("button", { type: "button", onClick: () => i(!e), children: e ? /* @__PURE__ */ o(c, {}) : /* @__PURE__ */ o(u, {}) }),
+        type: e ? "text" : "password",
+        autoComplete: d,
+        spellCheck: n,
+        inputMode: s,
+        autoCapitalize: m,
+        autoCorrect: p
+      }
+    );
+  }
+);
+y.displayName = "PasswordField";
+export {
+  y as PasswordField,
+  y as default
+};

package/dist/components/PasswordField/index.d.ts

@@ -0,0 +1 @@
+export * from './PasswordField';

package/dist/components/PasswordField/index.js

@@ -0,0 +1,4 @@
+import { PasswordField as d } from "./PasswordField.js";
+export {
+  d as PasswordField
+};

package/dist/components/PasteButton/PasteButton.d.ts

@@ -15,6 +15,6 @@ interface PasteButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
      */
     onPaste?: (value: string) => void;
 }
-export declare const PASTE_BUTTON_WIDTH = 3.875;
+export declare const PASTE_BUTTON_WIDTH = 5;
 declare const PasteButton: React.ForwardRefExoticComponent<PasteButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default PasteButton;

package/dist/components/PasteButton/PasteButton.js

@@ -1,37 +1,41 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as s from "react";
-import { cn as d } from "../../lib/utils.js";
-import { Typography as u } from "../Typography/Typography.js";
-const b = 3.875, m = s.forwardRef(
-  ({ children: p, inputRef: r, label: o = "Paste", className: c, onPaste: e, ...l }, n) => {
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import * as d from "react";
+import { cn as m } from "../../lib/utils.js";
+import { MagicWand as u } from "../Icons/MagicWand.js";
+import { Typography as p } from "../Typography/Typography.js";
+const T = 5, f = d.forwardRef(
+  ({ children: x, inputRef: r, label: o = "Paste", className: n, onPaste: a, ...c }, l) => {
     const i = async () => {
       try {
         if (r && "current" in r && r.current) {
           const t = await navigator.clipboard.readText();
-          r.current.value = t, e == null || e(t);
+          r.current.value = t, a == null || a(t);
         }
       } catch (t) {
         console.error("Failed to read clipboard:", t);
       }
     };
-    return /* @__PURE__ */ a(
+    return /* @__PURE__ */ s(
       "button",
       {
         type: "button",
-        ref: n,
-        className: d(
-          c,
-          "flex h-full w-full items-center justify-center rounded-lg px-4 text-base font-medium text-gray-500 transition duration-300 bg-gray-0 group-focus-within:bg-gray-100 disabled:cursor-not-allowed"
+        ref: l,
+        className: m(
+          n,
+          "flex h-full w-full items-center justify-center px-4 gap-1 text-gray-900 transition duration-300 bg-transparent disabled:cursor-not-allowed"
         ),
         onClick: i,
-        ...l,
-        children: /* @__PURE__ */ a(u, { variant: "subtitle", level: 4, className: "uppercase text-gray-900", children: o })
+        ...c,
+        children: [
+          /* @__PURE__ */ e(p, { variant: "subtitle", level: 3, children: o }),
+          /* @__PURE__ */ e(u, {})
+        ]
       }
     );
   }
 );
-m.displayName = "PasteButton";
+f.displayName = "PasteButton";
 export {
-  b as PASTE_BUTTON_WIDTH,
-  m as default
+  T as PASTE_BUTTON_WIDTH,
+  f as default
 };

package/dist/components/PhoneField/CountryListItem.d.ts

@@ -2,12 +2,11 @@ import { CountryCode } from '../Flag';
 interface CountryListItemProps {
     countryCode: CountryCode;
     countryName: string;
-    dialCode: string;
-    isSelected: boolean;
-    onClick?: () => void;
+    isSelected?: boolean;
+    onClick?: (value: CountryCode) => void;
 }
 declare const CountryListItem: {
-    ({ countryCode, countryName, dialCode, isSelected, onClick, }: CountryListItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ countryCode, countryName, onClick, isSelected, }: CountryListItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default CountryListItem;

package/dist/components/PhoneField/CountryListItem.js

@@ -1,35 +1,31 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { cn as m } from "../../lib/utils.js";
-import { Flag as n } from "../Flag/Flag.js";
-import "../Flag/LazyFlag.js";
-import { Typography as a } from "../Typography/Typography.js";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import "../Flag/Flag.js";
+import { LazyFlag as m } from "../Flag/LazyFlag.js";
+import { Typography as l } from "../Typography/Typography.js";
 const p = ({
-  countryCode: r,
-  countryName: t,
-  dialCode: o,
-  isSelected: s,
-  onClick: i
-}) => /* @__PURE__ */ l(
-  "div",
+  countryCode: t,
+  countryName: a,
+  onClick: e,
+  isSelected: s
+}) => /* @__PURE__ */ i(
+  "button",
   {
-    "data-country": r,
-    className: m(
-      "flex items-center w-full cursor-pointer rounded-md p-2 hover:bg-gray-100",
-      s && "bg-gray-200"
-    ),
-    onClick: i,
+    type: "button",
+    "data-country": t,
+    className: "h-[3.75rem] flex items-center w-full gap-2 cursor-pointer",
+    onClick: () => e == null ? void 0 : e(t),
+    ...s && { "data-selected": !0 },
     children: [
-      /* @__PURE__ */ e("span", { className: "w-6 h-6", children: /* @__PURE__ */ e(n, { countryCode: r, size: 24 }) }),
-      /* @__PURE__ */ e(
-        a,
+      /* @__PURE__ */ r(m, { countryCode: t, size: 32 }),
+      /* @__PURE__ */ r(
+        l,
         {
-          variant: "body",
+          variant: "subtitle",
           level: 2,
           className: "mx-2 overflow-hidden text-ellipsis whitespace-nowrap",
-          children: t
+          children: a
         }
-      ),
-      /* @__PURE__ */ e(a, { variant: "body", level: 2, className: "ml-auto", children: o })
+      )
     ]
   }
 );

package/dist/components/PhoneField/CountrySelectorButton.d.ts

@@ -1,9 +1,8 @@
 import { CountryCode } from '../Flag';
 interface CountrySelectorButtonProps extends React.HTMLAttributes<HTMLDivElement> {
-    disabled: boolean;
-    countryCode: CountryCode;
-    hideDialCode: boolean;
-    dialCode: string;
+    disabled?: boolean;
+    value: CountryCode;
+    label: string;
 }
 declare const CountrySelectorButton: import('react').ForwardRefExoticComponent<CountrySelectorButtonProps & import('react').RefAttributes<HTMLDivElement>>;
 export default CountrySelectorButton;

package/dist/components/PhoneField/CountrySelectorButton.js

@@ -1,13 +1,13 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { cn as m } from "../../lib/utils.js";
-import { cva as c } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { forwardRef as d } from "react";
-import { Flag as p } from "../Flag/Flag.js";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { cn as l } from "../../lib/utils.js";
+import { cva as m } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef as c } from "react";
+import { Flag as d } from "../Flag/Flag.js";
 import "../Flag/LazyFlag.js";
+import { ArrowDown as u } from "../Icons/ArrowDown.js";
 import { Typography as f } from "../Typography/Typography.js";
-import { ArrowDown as u } from "./ArrowDown.js";
-const y = c(
-  "flex items-center bg-transparent border-none focus:outline-none cursor-pointer",
+const p = m(
+  "flex items-center bg-transparent focus:outline-none cursor-pointer text-gray-900",
   {
     variants: {
       disabled: {
@@ -19,23 +19,23 @@ const y = c(
       disabled: !1
     }
   }
-), g = d(
-  ({ disabled: t, className: e, countryCode: o, hideDialCode: a, dialCode: s, ...n }, i) => /* @__PURE__ */ l(
+), y = c(
+  ({ disabled: t, className: o, value: e, label: a, ...s }, i) => /* @__PURE__ */ n(
     "div",
     {
       ref: i,
-      ...n,
-      className: m(y({ disabled: t, className: e })),
+      ...s,
+      className: l(p({ disabled: t, className: o })),
       "data-testid": "country-selector-button",
       children: [
-        /* @__PURE__ */ r("div", { className: "w-6 h-6 mr-2", children: /* @__PURE__ */ r(p, { countryCode: o, size: 24 }) }),
-        !a && /* @__PURE__ */ r(f, { variant: "subtitle", level: 2, className: "mr-2 text-gray-900", children: s }),
-        /* @__PURE__ */ r("span", { className: "w-2.5 h-1.5", children: /* @__PURE__ */ r(u, { className: "text-gray-400" }) })
+        /* @__PURE__ */ r("div", { className: "mr-2", children: /* @__PURE__ */ r(d, { countryCode: e, size: 24 }) }),
+        /* @__PURE__ */ r(f, { variant: "subtitle", level: 3, className: "mr-2", children: a }),
+        /* @__PURE__ */ r(u, {})
       ]
     }
   )
 );
-g.displayName = "CountrySelectorButton";
+y.displayName = "CountrySelectorButton";
 export {
-  g as default
+  y as default
 };

package/dist/components/PhoneField/GroupedCountryList.d.ts

@@ -0,0 +1,14 @@
+import { CountryCode } from '../Flag';
+interface GroupedCountries {
+    [key: string]: {
+        countryCode: CountryCode;
+        name: string;
+    }[];
+}
+interface GroupedCountryListProps {
+    groupedCountries: GroupedCountries;
+    value: CountryCode;
+    onSelect: (countryCode: CountryCode) => void;
+}
+export declare function GroupedCountryList({ groupedCountries, onSelect, value, }: GroupedCountryListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/PhoneField/GroupedCountryList.js

@@ -0,0 +1,30 @@
+import { jsxs as i, jsx as e, Fragment as n } from "react/jsx-runtime";
+import { DrawerClose as c } from "../Drawer/Drawer.js";
+import { Magnifier as d } from "../Icons/Magnifier.js";
+import { Typography as l } from "../Typography/Typography.js";
+import p from "./CountryListItem.js";
+function C({
+  groupedCountries: o,
+  onSelect: s,
+  value: m
+}) {
+  return Object.keys(o).length === 0 ? /* @__PURE__ */ i("div", { className: "flex flex-col items-center justify-center grow text-gray-400 gap-2 h-full", children: [
+    /* @__PURE__ */ e(d, { className: "size-8" }),
+    /* @__PURE__ */ e(l, { variant: "body", level: 3, children: "No search results" })
+  ] }) : /* @__PURE__ */ e(n, { children: Object.entries(o).sort(([r], [a]) => r.localeCompare(a)).map(([r, a]) => /* @__PURE__ */ i("div", { className: "group", children: [
+    /* @__PURE__ */ e(l, { variant: "subtitle", level: 3, className: "text-gray-400 mb-2", children: r }),
+    a.map((t) => /* @__PURE__ */ e(c, { asChild: !0, children: /* @__PURE__ */ e(
+      p,
+      {
+        countryCode: t.countryCode,
+        countryName: t.name,
+        onClick: s,
+        isSelected: m === t.countryCode
+      }
+    ) }, t.countryCode)),
+    /* @__PURE__ */ e("div", { className: "h-[1px] bg-gray-200 my-4 group-last:hidden" })
+  ] }, r)) });
+}
+export {
+  C as GroupedCountryList
+};

package/dist/components/PhoneField/PhoneField.d.ts

@@ -1,6 +1,6 @@
 import { CountryCode } from '../Flag/Flag';
 import { InputProps } from '../Input';
-export interface PhoneFieldProps extends Omit<InputProps, "onChange" | "startAdornment" | "startAdornmentWidth"> {
+export interface PhoneFieldProps extends Omit<InputProps, "onChange" | "startAdornment" | "startAdornmentWidth" | "placeholder"> {
     /**
      * Current phone number value.
      */
@@ -14,12 +14,6 @@ export interface PhoneFieldProps extends Omit<InputProps, "onChange" | "startAdo
      * If not provided, all countries will be displayed.
      */
     countries?: CountryCode[];
-    /**
-     * If true, the dial code will be hidden.
-     * The dial code is still displayed at the start of the input and in the dropdown.
-     * @default false
-     */
-    hideDialCode?: boolean;
     /**
      * Disable dial code prefill on initialization.
      * Dial code prefill works only when empty phone value have been provided.
@@ -35,9 +29,9 @@ export interface PhoneFieldProps extends Omit<InputProps, "onChange" | "startAdo
      */
     isValid?: boolean;
     /**
-     * The placeholder text to display when no value is selected.
+     * The label text to display
      */
-    placeholder?: string;
+    label?: string;
     /**
      * When true, prevents the user from interacting with phone field.
      * @default false
@@ -59,11 +53,6 @@ export interface PhoneFieldProps extends Omit<InputProps, "onChange" | "startAdo
      * @default 1.25
      */
     endAdornmentWidth?: number;
-    /**
-     * Display mode for the country selector: "dropdown" for desktop or "drawer" for mobile.
-     * @default "dropdown"
-     */
-    countrySelectorMode?: "dropdown" | "drawer";
 }
 export declare const PhoneField: import('react').ForwardRefExoticComponent<PhoneFieldProps & import('react').RefAttributes<HTMLDivElement>>;
 export default PhoneField;