@worldcoin/mini-apps-ui-kit-react 1.0.0-canary.16 → 1.0.0-canary.18

package/dist/components/OTPField/OTPField.d.ts

@@ -8,7 +8,54 @@ declare const patternDictionary: {
     chars: string;
     digitsAndChars: string;
 };
-export declare const OTPField: React.ForwardRefExoticComponent<Omit<OTPInputProps, "className" | "inputMode" | "maxLength" | "placeholder" | "textAlign" | "pushPasswordManagerStrategy" | "containerClassName" | "noScriptCSSFallback" | "render"> & {
+type OTPFieldProps = Omit<OTPInputProps, "render" | "className" | "containerClassName" | "textAlign" | "inputMode" | "pushPasswordManagerStrategy" | "noScriptCSSFallback" | "maxLength" | "placeholder"> & {
+    /**
+     * The number of input slots/characters in the OTP field.
+     * Defaults to 6 if not specified.
+     */
+    maxLength?: number;
+    /**
+     * Whether the OTP field is in an error state.
+     * When true, displays error styling.
+     */
+    error?: boolean;
+    /**
+     * Custom regex pattern to validate the input.
+     * If not provided, uses the pattern from the selected mode.
+     */
+    pattern?: string;
+    /**
+     * The input mode that determines allowed characters.
+     * - digits: Only numbers 0-9
+     * - chars: Only letters A-Z
+     * - digitsAndChars: Both numbers and letters
+     * Defaults to "digits" if not specified.
+     */
+    mode?: keyof typeof patternDictionary;
+    /**
+     * The current value of the OTP input.
+     * Used for controlled component behavior.
+     */
+    value?: string;
+    /**
+     * Callback fired when the input value changes.
+     * @param newValue The new input value
+     */
+    onChange?: (newValue: string) => unknown;
+    /**
+     * Callback fired when all slots are filled.
+     * Called with the complete OTP value.
+     */
+    onComplete?: (...args: any[]) => unknown;
+    /**
+     * Function to transform pasted text before inserting.
+     * Useful for handling formatted strings, e.g. "123-456" -> "123456"
+     * @param pastedText The text being pasted
+     * @returns The transformed text to insert
+     */
+    pasteTransformer?: (pastedText: string) => string;
+};
+declare const OTPField: React.ForwardRefExoticComponent<Omit<OTPInputProps, "className" | "inputMode" | "maxLength" | "placeholder" | "textAlign" | "pushPasswordManagerStrategy" | "containerClassName" | "noScriptCSSFallback" | "render"> & {
     /**
      * The number of input slots/characters in the OTP field.
      * Defaults to 6 if not specified.
@@ -55,4 +102,5 @@ export declare const OTPField: React.ForwardRefExoticComponent<Omit<OTPInputProp
      */
     pasteTransformer?: (pastedText: string) => string;
 } & React.RefAttributes<HTMLInputElement>>;
-export default OTPField;
+export { OTPField };
+export type { OTPFieldProps };

package/dist/components/OTPField/OTPField.js

@@ -1,12 +1,12 @@
 "use client";
-import { jsx as r, Fragment as u } from "react/jsx-runtime";
-import { cn as o } 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 { OTPInput as g, REGEXP_ONLY_DIGITS as f, REGEXP_ONLY_CHARS as b, REGEXP_ONLY_DIGITS_AND_CHARS as y } from "../../node_modules/.pnpm/input-otp@1.4.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/input-otp/dist/index.js";
-import * as h from "react";
-import { typographyVariants as x } from "../Typography/Typography.js";
-const _ = m(
-  o(
+import { jsx, Fragment } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { cva } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { OTPInput as Lt, REGEXP_ONLY_DIGITS as Kt, REGEXP_ONLY_CHARS as Jt, REGEXP_ONLY_DIGITS_AND_CHARS as Qt } from "../../node_modules/.pnpm/input-otp@1.4.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/input-otp/dist/index.js";
+import * as React from "react";
+import { typographyVariants } from "../Typography/Typography.js";
+const inputVariants = cva(
+  cn(
     "peer h-[3.5rem] w-full rounded-[0.625rem] border border-gray-100 bg-gray-100 px-4 outline-none transition duration-300",
     "placeholder:text-gray-500",
     "focus:border-gray-300 focus:bg-gray-0 focus-visible:outline-none",
@@ -19,47 +19,52 @@ const _ = m(
       }
     },
     defaultVariants: {
-      error: !1
+      error: false
     }
   }
-), R = {
-  digits: f,
-  chars: b,
-  digitsAndChars: y
-}, v = {
+);
+const patternDictionary = {
+  digits: Kt,
+  chars: Jt,
+  digitsAndChars: Qt
+};
+const inputModeDictionary = {
   digits: "numeric",
   chars: "text",
   digitsAndChars: "text"
-}, I = h.forwardRef(
-  ({ maxLength: i = 6, error: e, children: E, mode: t = "digits", pattern: n, ...s }, a) => /* @__PURE__ */ r(
-    g,
-    {
-      ref: a,
-      ...s,
-      maxLength: i,
-      inputMode: v[t],
-      pattern: n || R[t],
-      containerClassName: "flex items-center gap-2 has-[:disabled]:opacity-50",
-      render: ({ slots: d }) => /* @__PURE__ */ r(u, { children: d.map(({ isActive: c, char: l }, p) => /* @__PURE__ */ r(
-        "div",
-        {
-          ref: a,
-          role: "textbox",
-          className: o(
-            _({ error: e }),
-            x({ variant: "body", level: 2 }),
-            "w-12 h-[4.25rem] rounded-lg flex items-center justify-center",
-            (c || e) && "z-10 bg-gray-0"
-          ),
-          children: l
-        },
-        p
-      )) })
-    }
-  )
+};
+const OTPField = React.forwardRef(
+  ({ maxLength = 6, error, children, mode = "digits", pattern, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Lt,
+      {
+        ref,
+        ...props,
+        maxLength,
+        inputMode: inputModeDictionary[mode],
+        pattern: pattern || patternDictionary[mode],
+        containerClassName: "flex items-center gap-2 has-[:disabled]:opacity-50",
+        render: ({ slots }) => /* @__PURE__ */ jsx(Fragment, { children: slots.map(({ isActive, char }, idx) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            role: "textbox",
+            className: cn(
+              inputVariants({ error }),
+              typographyVariants({ variant: "body", level: 2 }),
+              "w-12 h-[4.25rem] rounded-lg flex items-center justify-center",
+              (isActive || error) && "z-10 bg-gray-0"
+            ),
+            children: char
+          },
+          idx
+        )) })
+      }
+    );
+  }
 );
+OTPField.displayName = "OTPField";
 export {
-  I as OTPField,
-  I as default,
-  _ as inputVariants
+  OTPField,
+  inputVariants
 };

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

@@ -1 +1 @@
-export * from './OTPField';
+export { OTPField, type OTPFieldProps } from './OTPField';

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

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

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

@@ -1 +1 @@
-export * from './PasswordField';
+export { PasswordField, type PasswordFieldProps } from './PasswordField';

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

@@ -16,4 +16,5 @@ interface PasteButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
     onPaste?: (value: string) => void;
 }
 declare const PasteButton: React.ForwardRefExoticComponent<PasteButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default PasteButton;
+export { PasteButton };
+export type { PasteButtonProps };

package/dist/components/PasteButton/PasteButton.js

@@ -1,40 +1,41 @@
-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 f = d.forwardRef(
-  ({ children: x, inputRef: r, label: o = "Paste", className: l, onPaste: a, ...n }, c) => {
-    const i = async () => {
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { MagicWand } from "../Icons/MagicWand.js";
+import { Typography } from "../Typography/Typography.js";
+const PasteButton = React.forwardRef(
+  ({ children, inputRef, label = "Paste", className, onPaste, ...props }, ref) => {
+    const handlePaste = async () => {
       try {
-        if (r && "current" in r && r.current) {
-          const t = await navigator.clipboard.readText();
-          r.current.value = t, a == null || a(t);
+        if (inputRef && "current" in inputRef && inputRef.current) {
+          const text = await navigator.clipboard.readText();
+          inputRef.current.value = text;
+          onPaste == null ? void 0 : onPaste(text);
         }
-      } catch (t) {
-        console.error("Failed to read clipboard:", t);
+      } catch (error) {
+        console.error("Failed to read clipboard:", error);
       }
     };
-    return /* @__PURE__ */ s(
+    return /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
-        ref: c,
-        className: m(
-          l,
-          "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"
+        ref,
+        className: cn(
+          className,
+          "flex h-full w-full items-center justify-center gap-1 text-gray-900 transition duration-300 bg-transparent disabled:cursor-not-allowed"
         ),
-        onClick: i,
-        ...n,
+        onClick: handlePaste,
+        ...props,
         children: [
-          /* @__PURE__ */ e(p, { variant: "subtitle", level: 3, children: o }),
-          /* @__PURE__ */ e(u, {})
+          /* @__PURE__ */ jsx(Typography, { variant: "subtitle", level: 3, children: label }),
+          /* @__PURE__ */ jsx(MagicWand, {})
         ]
       }
     );
   }
 );
-f.displayName = "PasteButton";
+PasteButton.displayName = "PasteButton";
 export {
-  f as default
+  PasteButton
 };

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

@@ -1 +1 @@
-export { default } from './PasteButton';
+export { PasteButton, type PasteButtonProps } from './PasteButton';

package/dist/components/PhoneField/CountryListItem.js

@@ -1,35 +1,36 @@
-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: t,
-  countryName: a,
-  onClick: e,
-  isSelected: s
-}) => /* @__PURE__ */ i(
-  "button",
-  {
-    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__ */ r(m, { countryCode: t, size: 32 }),
-      /* @__PURE__ */ r(
-        l,
-        {
-          variant: "subtitle",
-          level: 2,
-          className: "mx-2 overflow-hidden text-ellipsis whitespace-nowrap",
-          children: a
-        }
-      )
-    ]
-  }
-);
-p.displayName = "CountryListItem";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Flag } from "../Flag/Flag.js";
+import { Typography } from "../Typography/Typography.js";
+const CountryListItem = ({
+  countryCode,
+  countryName,
+  onClick,
+  isSelected
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-country": countryCode,
+      className: "h-[3.75rem] flex items-center w-full gap-2 cursor-pointer",
+      onClick: () => onClick == null ? void 0 : onClick(countryCode),
+      ...isSelected && { "data-selected": true },
+      children: [
+        /* @__PURE__ */ jsx(Flag, { countryCode, size: 32 }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "subtitle",
+            level: 2,
+            className: "mx-2 overflow-hidden text-ellipsis whitespace-nowrap",
+            children: countryName
+          }
+        )
+      ]
+    }
+  );
+};
+CountryListItem.displayName = "CountryListItem";
 export {
-  p as default
+  CountryListItem as default
 };

package/dist/components/PhoneField/CountrySelectorButton.js

@@ -1,12 +1,11 @@
-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";
-const p = m(
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { cva } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef } from "react";
+import { ArrowDown } from "../Icons/ArrowDown.js";
+import { Typography } from "../Typography/Typography.js";
+import { Flag } from "../Flag/Flag.js";
+const triggerVariants = cva(
   "flex items-center bg-transparent focus:outline-none cursor-pointer text-gray-900",
   {
     variants: {
@@ -16,26 +15,29 @@ const p = m(
       }
     },
     defaultVariants: {
-      disabled: !1
+      disabled: false
     }
   }
-), y = c(
-  ({ disabled: t, className: o, value: e, label: a, ...s }, i) => /* @__PURE__ */ n(
-    "div",
-    {
-      ref: i,
-      ...s,
-      className: l(p({ disabled: t, className: o })),
-      "data-testid": "country-selector-button",
-      children: [
-        /* @__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, {})
-      ]
-    }
-  )
 );
-y.displayName = "CountrySelectorButton";
+const CountrySelectorButton = forwardRef(
+  ({ disabled, className, value, label, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cn(triggerVariants({ disabled, className })),
+        "data-testid": "country-selector-button",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mr-2", children: /* @__PURE__ */ jsx(Flag, { countryCode: value, size: 24 }) }),
+          /* @__PURE__ */ jsx(Typography, { variant: "subtitle", level: 3, className: "mr-2", children: label }),
+          /* @__PURE__ */ jsx(ArrowDown, {})
+        ]
+      }
+    );
+  }
+);
+CountrySelectorButton.displayName = "CountrySelectorButton";
 export {
-  y as default
+  CountrySelectorButton as default
 };

package/dist/components/PhoneField/GroupedCountryList.js

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

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

@@ -1,6 +1,6 @@
-import { CountryCode } from '../Flag/Flag';
+import { CountryCode } from '../Flag/types';
 import { InputProps } from '../Input';
-export interface PhoneFieldProps extends Omit<InputProps, "onChange" | "startAdornment" | "placeholder"> {
+interface PhoneFieldProps extends Omit<InputProps, "onChange" | "startAdornment" | "placeholder"> {
     /**
      * Current phone number value.
      */
@@ -49,5 +49,6 @@ export interface PhoneFieldProps extends Omit<InputProps, "onChange" | "startAdo
      */
     endAdornment?: React.ReactNode;
 }
-export declare const PhoneField: import('react').ForwardRefExoticComponent<PhoneFieldProps & import('react').RefAttributes<HTMLDivElement>>;
-export default PhoneField;
+declare const PhoneField: import('react').ForwardRefExoticComponent<PhoneFieldProps & import('react').RefAttributes<HTMLDivElement>>;
+export { PhoneField };
+export type { PhoneFieldProps };