@worldcoin/mini-apps-ui-kit-react 0.0.1

package/dist/components/Flag/flag-components/zw.js

@@ -0,0 +1,97 @@
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+const t = (C) => /* @__PURE__ */ i(
+  "svg",
+  {
+    width: "512",
+    height: "512",
+    viewBox: "0 0 512 512",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...C,
+    children: [
+      /* @__PURE__ */ i("g", { clipPath: "url(#clip0_4_7334)", children: [
+        /* @__PURE__ */ l(
+          "path",
+          {
+            d: "M256 512C397.385 512 512 397.385 512 256C512 114.615 397.385 0 256 0C114.615 0 0 114.615 0 256C0 397.385 114.615 512 256 512Z",
+            fill: "#F0F0F0"
+          }
+        ),
+        /* @__PURE__ */ l(
+          "path",
+          {
+            d: "M487.497 146.603C474.491 119.129 456.74 94.346 435.3 73.301L256 55.652L76.6999 73.302C76.1279 73.863 75.5699 74.437 75.0039 75.004L146.604 146.604L256 149.945L487.497 146.603Z",
+            fill: "#FFDA44"
+          }
+        ),
+        /* @__PURE__ */ l(
+          "path",
+          {
+            d: "M75.001 436.999C75.943 437.941 76.883 438.884 77.839 439.812L256 456.348L434.159 439.812C455.82 418.812 473.788 394.027 486.977 366.51L155.825 356.174C127.332 384.668 94.468 417.53 75.001 436.999Z",
+            fill: "#FFDA44"
+          }
+        ),
+        /* @__PURE__ */ l(
+          "path",
+          {
+            d: "M509.454 219.905L211.478 211.478L256 256C242.813 269.187 223.127 288.873 211.478 300.522L509.298 293.208C511.068 281.059 512 268.639 512 256C512 243.746 511.12 231.7 509.454 219.905Z",
+            fill: "black"
+          }
+        ),
+        /* @__PURE__ */ l(
+          "path",
+          {
+            d: "M256 0C186.172 0 122.886 27.97 76.7002 73.302H435.3C389.114 27.97 325.828 0 256 0Z",
+            fill: "#6DA544"
+          }
+        ),
+        /* @__PURE__ */ l(
+          "path",
+          {
+            d: "M219.906 219.905H509.455C505.802 194.026 498.286 169.392 487.498 146.603H146.604L219.906 219.905Z",
+            fill: "#D80027"
+          }
+        ),
+        /* @__PURE__ */ l(
+          "path",
+          {
+            d: "M145.49 366.51H486.978C497.892 343.738 505.528 319.101 509.299 293.208H218.792C190.405 321.595 166.347 345.653 145.49 366.51Z",
+            fill: "#D80027"
+          }
+        ),
+        /* @__PURE__ */ l(
+          "path",
+          {
+            d: "M256 512C325.255 512 388.075 484.488 434.159 439.811H77.8408C123.925 484.488 186.745 512 256 512Z",
+            fill: "#6DA544"
+          }
+        ),
+        /* @__PURE__ */ l(
+          "path",
+          {
+            d: "M91.4155 59.934C85.7245 64.716 80.2335 69.729 74.9805 74.98L256 256L74.9805 437.02C80.2325 442.272 85.7245 447.284 91.4155 452.066L287.481 256L91.4155 59.934Z",
+            fill: "black"
+          }
+        ),
+        /* @__PURE__ */ l(
+          "path",
+          {
+            d: "M102.925 189.217L119.5 240.233H173.145L129.747 271.765L146.323 322.783L102.925 291.252L59.526 322.783L76.104 271.765L32.707 240.233H86.349L102.925 189.217Z",
+            fill: "#D80027"
+          }
+        ),
+        /* @__PURE__ */ l(
+          "path",
+          {
+            d: "M148.519 260.174L105.321 244.87C105.321 244.87 102.129 214.927 101.936 213.912C100.47 206.189 93.683 200.348 85.533 200.348C76.313 200.348 68.837 207.823 68.837 217.044C68.837 218.573 69.06 220.046 69.445 221.454L57.333 233.647H78.869C78.869 256 62.189 256 62.189 278.261L71.442 300.522H127.094L136.37 278.261H136.366C137.295 276.125 137.859 273.922 138.092 271.721C146.088 268.487 148.519 260.174 148.519 260.174Z",
+            fill: "#FFDA44"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l("defs", { children: /* @__PURE__ */ l("clipPath", { id: "clip0_4_7334", children: /* @__PURE__ */ l("rect", { width: "512", height: "512", fill: "white" }) }) })
+    ]
+  }
+);
+export {
+  t as default
+};

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

@@ -0,0 +1,3 @@
+export * from './Flag';
+export * from './LazyFlag';
+export type { CountryCode } from './Flag';

package/dist/components/Flag/index.js

@@ -0,0 +1,6 @@
+import { Flag as a } from "./Flag.js";
+import { LazyFlag as f } from "./LazyFlag.js";
+export {
+  a as Flag,
+  f as LazyFlag
+};

package/dist/components/Flag/utils.d.ts

@@ -0,0 +1,2 @@
+import { CountryCode } from './Flag';
+export declare const isSupportedCountryCode: (code: string) => code is CountryCode;

package/dist/components/Flag/utils.js

@@ -0,0 +1,5 @@
+import * as t from "./flag-components/index.js";
+const e = (o) => Object.prototype.hasOwnProperty.call(t, o.toUpperCase());
+export {
+  e as isSupportedCountryCode
+};

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,12 @@
+import { FormProps as RadixFormProps } from '@radix-ui/react-form';
+import * as RadixForm from "@radix-ui/react-form";
+export type FormProps = RadixFormProps;
+export declare const Root: import('react').ForwardRefExoticComponent<RadixFormProps & import('react').RefAttributes<HTMLFormElement>>;
+export declare const Field: import('react').ForwardRefExoticComponent<RadixForm.FormFieldProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Control: import('react').ForwardRefExoticComponent<RadixForm.FormControlProps & import('react').RefAttributes<HTMLInputElement>>;
+export declare const Message: import('react').ForwardRefExoticComponent<Omit<RadixForm.FormMessageProps & import('react').RefAttributes<HTMLSpanElement>, "ref"> & {
+    error?: boolean;
+    textAlign?: "left" | "center" | "right";
+} & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const ValidityState: typeof RadixForm.ValidityState;
+export declare const Submit: typeof RadixForm.Submit;

package/dist/components/Form/Form.js

@@ -0,0 +1,39 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as o } from "../../lib/utils.js";
+import { Message as i, Root as m, Field as l, Control as n, ValidityState as c, Submit as f } from "../../node_modules/.pnpm/@radix-ui_react-form@0.1.1_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18.3.18_z32yjmfa36dn2egycaeb5u52lm/node_modules/@radix-ui/react-form/dist/index.js";
+import { forwardRef as d } from "react";
+import { typographyVariants as y } from "../Typography/Typography.js";
+const b = m, g = l, h = n, R = d(({ className: p, error: s, textAlign: t = "left", ...r }, a) => /* @__PURE__ */ e(
+  "div",
+  {
+    className: o(
+      " px-2 flex items-center justify-center",
+      t === "left" && "justify-start",
+      t === "center" && "justify-center",
+      t === "right" && "justify-end"
+    ),
+    children: /* @__PURE__ */ e(
+      i,
+      {
+        ref: a,
+        className: o(
+          "h-[1.625rem] mt-1 flex items-center",
+          y({
+            variant: "body",
+            level: 3
+          }),
+          s ? "text-error-700" : "text-gray-500"
+        ),
+        ...r
+      }
+    )
+  }
+)), V = c, v = f;
+export {
+  h as Control,
+  g as Field,
+  R as Message,
+  b as Root,
+  v as Submit,
+  V as ValidityState
+};

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

@@ -0,0 +1,2 @@
+export * as Form from './Form';
+export type { FormProps } from './Form';

package/dist/components/Form/index.js

@@ -0,0 +1,4 @@
+import * as o from "./Form.js";
+export {
+  o as Form
+};

package/dist/components/Icons/Magnifier.d.ts

@@ -0,0 +1,8 @@
+interface MagnifierProps {
+    /**
+     * Additional CSS classes to apply to the Magnifier icon
+     */
+    className?: string;
+}
+export declare function Magnifier({ className }: MagnifierProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icons/Magnifier.js

@@ -0,0 +1,31 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import { cn as t } from "../../lib/utils.js";
+function h({ className: r }) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: t("h-4 w-4", r),
+      children: [
+        /* @__PURE__ */ i("g", { clipPath: "url(#clip0_352_148)", children: /* @__PURE__ */ i(
+          "path",
+          {
+            d: "M15.4167 15.4167L18.3334 18.3334M17.5001 9.58335C17.5001 5.2111 13.9557 1.66669 9.58342 1.66669C5.21116 1.66669 1.66675 5.2111 1.66675 9.58335C1.66675 13.9556 5.21116 17.5 9.58342 17.5C13.9557 17.5 17.5001 13.9556 17.5001 9.58335Z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ i("defs", { children: /* @__PURE__ */ i("clipPath", { id: "clip0_352_148", children: /* @__PURE__ */ i("rect", { width: "20", height: "20", fill: "white" }) }) })
+      ]
+    }
+  );
+}
+export {
+  h as Magnifier
+};

package/dist/components/Icons/Tick.d.ts

@@ -0,0 +1,8 @@
+interface TickProps {
+    /**
+     * Additional CSS classes to apply to the tick icon
+     */
+    className?: string;
+}
+export declare function Tick({ className }: TickProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icons/Tick.js

@@ -0,0 +1,29 @@
+import { jsx as t } from "react/jsx-runtime";
+import { cn as r } from "../../lib/utils.js";
+function n({ className: o }) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: r("h-4 w-4", o),
+      "data-testid": "tick-icon",
+      children: /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M3.33301 8.6665L5.68396 10.5473C6.2355 10.9885 7.03544 10.9231 7.50794 10.3981L12.6663 4.6665",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+export {
+  n as Tick
+};

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,54 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+export declare const inputVariants: (props?: ({
+    error?: boolean | null | undefined;
+    isFocused?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const iconVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    error?: boolean | null | undefined;
+    position?: "end" | "start" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "style">, VariantProps<typeof inputVariants> {
+    /**
+     * 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;
+    /**
+     * Element to be rendered at the start (left side) of the input.
+     * The component passed to this prop must accept a `style` prop.
+     * The component should use currentColor to match the Input's styling.
+     * To change styles based on input focus, use Tailwind's `group-*` modifiers
+     * since the input is wrapped in a group class.
+     */
+    startAdornment?: React.ReactNode;
+    /**
+     * Element to be rendered at the end (right side) of the input.
+     * The component passed to this prop must accept a `style` prop.
+     * The component should use currentColor to match the Input's styling.
+     * To change styles based on input focus, use Tailwind's `group-*` modifiers
+     * since the input is wrapped in a group class.
+     */
+    endAdornment?: React.ReactNode;
+    /**
+     * Width of the start adornment in rem
+     * @default 1.25
+     */
+    startAdornmentWidth?: number;
+    /**
+     * Width of the end adornment in rem
+     * @default 1.25
+     */
+    endAdornmentWidth?: number;
+    /**
+     * If true, the input will display in a focused state with focus styling
+     * @default false
+     */
+    isFocused?: boolean;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

package/dist/components/Input/Input.js

@@ -0,0 +1,98 @@
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
+import { cva as u } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import * as y from "react";
+import { cn as i } from "../../lib/utils.js";
+import { Tick as x } from "../Icons/Tick.js";
+const l = 1.5, h = u(
+  "peer h-[3.125rem] font-sans w-full rounded-xl border-2 border-gray-100 bg-gray-100 px-2.5 py-4 text-base leading-none text-gray-900 outline-none transition duration-300 file:hidden placeholder:focus:border-gray-200 focus:bg-gray-0 focus:shadow-card focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      error: {
+        true: "border-error-700 bg-error-100 focus:border-error-700 focus:bg-error-100"
+      },
+      isFocused: {
+        true: "border-gray-200 bg-gray-0 shadow-card",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      error: !1,
+      isFocused: !1
+    }
+  }
+), d = u(
+  "absolute top-1 bottom-1 flex items-center justify-center overflow-hidden text-gray-400",
+  {
+    variants: {
+      disabled: {
+        true: "text-gray-300 cursor-not-allowed"
+      },
+      error: {
+        true: "text-error-700"
+      },
+      position: {
+        start: "left-1",
+        end: "right-1"
+      }
+    },
+    defaultVariants: {
+      error: !1
+    }
+  }
+), w = y.forwardRef(
+  ({
+    type: f = "text",
+    error: e,
+    startAdornment: t,
+    endAdornment: o,
+    isValid: a,
+    startAdornmentWidth: c = l,
+    endAdornmentWidth: n = l,
+    isFocused: p = !1,
+    disabled: s,
+    ...g
+  }, m) => /* @__PURE__ */ b("div", { className: "relative flex w-full items-center group", children: [
+    t && /* @__PURE__ */ r(
+      "div",
+      {
+        className: i(d({ error: e, disabled: s, position: "start" })),
+        style: { width: `${c + 0.75}rem` },
+        children: t
+      }
+    ),
+    /* @__PURE__ */ r(
+      "input",
+      {
+        ref: m,
+        type: f,
+        disabled: s,
+        className: i(h({ error: e, isFocused: p })),
+        ...g,
+        style: {
+          ...t && {
+            paddingLeft: `${1 + c}rem`
+          },
+          ...o && {
+            paddingRight: `${1 + n}rem`
+          },
+          ...a && { paddingRight: `${1 + l}rem` }
+        }
+      }
+    ),
+    (a || o) && /* @__PURE__ */ r(
+      "div",
+      {
+        className: i(d({ error: e, disabled: s, position: "end" })),
+        style: { width: `${n + 0.75}rem` },
+        children: a ? /* @__PURE__ */ r(x, { className: "text-success-700" }) : o
+      }
+    )
+  ] })
+);
+w.displayName = "Input";
+export {
+  w as Input,
+  w as default,
+  d as iconVariants,
+  h as inputVariants
+};

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

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

package/dist/components/Input/index.js

@@ -0,0 +1,6 @@
+import { Input as a, iconVariants as i, inputVariants as r } from "./Input.js";
+export {
+  a as Input,
+  i as iconVariants,
+  r as inputVariants
+};

package/dist/components/ListItem/ListItem.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+declare const listItemStyles: (props?: ({
+    variant?: "ghost" | "duotone" | "outline" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface ListItemProps extends VariantProps<typeof listItemStyles>, Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style"> {
+    children?: React.ReactNode;
+}
+export declare const ListItem: import('react').ForwardRefExoticComponent<ListItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export default ListItem;

package/dist/components/ListItem/ListItem.js

@@ -0,0 +1,25 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cva as s } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef as i } from "react";
+const m = s(
+  "h-16 p-4 rounded-[0.875rem] flex items-center text-gray-900 w-full",
+  {
+    variants: {
+      variant: {
+        duotone: "bg-gray-50",
+        outline: "border border-gray-200",
+        ghost: ""
+      }
+    },
+    defaultVariants: {
+      variant: "duotone"
+    }
+  }
+), n = i(
+  ({ children: t, variant: r, ...e }, a) => /* @__PURE__ */ o("div", { ref: a, className: m({ variant: r }), ...e, children: t })
+);
+n.displayName = "ListItem";
+export {
+  n as ListItem,
+  n as default
+};

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

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

package/dist/components/ListItem/index.js

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

package/dist/components/NumberPad/Delete.d.ts

@@ -0,0 +1,8 @@
+interface DeleteProps {
+    /**
+     * Additional CSS classes to apply to the Delete icon
+     */
+    className?: string;
+}
+export declare function Delete({ className }: DeleteProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/NumberPad/Delete.js

@@ -0,0 +1,27 @@
+import { jsx as t } from "react/jsx-runtime";
+function r({ className: e }) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: e,
+      "data-testid": "delete-icon",
+      children: /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M17 9L14 12M14 12L11 15M14 12L11 9M14 12L17 15M3.52405 15.4403L7.34938 18.8689C8.16293 19.5981 9.2072 20 10.2882 20H17.5371C20.0019 20 22 17.9533 22 15.4286V8.57143C22 6.0467 20.0019 4 17.5371 4H10.2882C9.2072 4 8.16293 4.40191 7.34939 5.13108L3.52406 8.55965C1.49198 10.381 1.49198 13.619 3.52405 15.4403Z",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round"
+        }
+      )
+    }
+  );
+}
+export {
+  r as Delete
+};

package/dist/components/NumberPad/NumberPad.d.ts

@@ -0,0 +1,16 @@
+interface NumberPadProps {
+    /**
+     * The current value displayed in the number pad
+     */
+    value?: string;
+    /**
+     * Whether the number pad is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Callback fired when the value changes
+     */
+    onChange?: (value: string) => void;
+}
+export declare const NumberPad: ({ value, onChange, disabled }: NumberPadProps) => import("react/jsx-runtime").JSX.Element;
+export default NumberPad;

package/dist/components/NumberPad/NumberPad.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { Delete as u } from "./Delete.js";
+const n = [
+  { value: "1" },
+  { value: "2" },
+  { value: "3" },
+  { value: "4" },
+  { value: "5" },
+  { value: "6" },
+  { value: "7" },
+  { value: "8" },
+  { value: "9" },
+  { value: "." },
+  { value: "0" },
+  { value: "del", label: /* @__PURE__ */ r(u, { className: "size-6" }) }
+], c = ({ value: l = "", onChange: a, disabled: s = !1 }) => {
+  l !== "" && isNaN(Number(l)) && console.error("NumberPad value must be a valid number or empty string");
+  const t = (e) => {
+    if (!(!a || s))
+      if (e === "del")
+        a(l.slice(0, -1));
+      else {
+        if (e === "." && l.includes("."))
+          return;
+        {
+          const i = l + e;
+          isNaN(Number(i)) || a(i);
+        }
+      }
+  };
+  return /* @__PURE__ */ r("div", { className: "grid grid-cols-3 grid-rows-4 gap-1 w-full", children: n.map((e) => /* @__PURE__ */ r(
+    "button",
+    {
+      type: "button",
+      onClick: () => t(e.value),
+      disabled: s,
+      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",
+      children: e.label || e.value
+    },
+    e.value
+  )) });
+};
+export {
+  c as NumberPad,
+  c as default
+};

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

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

package/dist/components/NumberPad/index.js

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

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

@@ -0,0 +1,55 @@
+import { OTPInputProps } from 'input-otp';
+import * as React from "react";
+declare const patternDictionary: {
+    digits: string;
+    chars: string;
+    digitsAndChars: string;
+};
+export 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.
+     */
+    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;
+} & React.RefAttributes<HTMLInputElement>>;
+export default OTPField;