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

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

@@ -1,16 +1,5 @@
-import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
-export declare const inputVariants: (props?: ({
-    error?: boolean | null | undefined;
-    isLabel?: boolean | null | undefined;
-    isFocused?: boolean | null | undefined;
-    variant?: "default" | "floating-label" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const iconVariants: (props?: ({
-    disabled?: 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" | "placeholder">, VariantProps<typeof inputVariants> {
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "style" | "placeholder" | "size"> {
     /**
      * If true, the input will display in an error state with error styling
      */
@@ -21,41 +10,18 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     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;
-    /**
-     * Additional class name for the input
+     * Additional class name for the input container
      */
     className?: string;
     /**
-     * Label text to be displayed above the input
+     * Label text to be displayed above the input or as floating label
      */
     label?: string;
     /**
@@ -64,15 +30,19 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      */
     variant?: "default" | "floating-label";
     /**
-     * If true, the dividers will be shown
-     * @default true
+     * If true, the start divider will be shown when startAdornment is present.
+     * @default false // Default dividers to false
      */
     showStartDivider?: boolean;
     /**
-     * If true, the end divider will be shown
-     * @default true
+     * If true, the end divider will be shown when endAdornment or isValid is present.
+     * @default false // Default dividers to false
      */
     showEndDivider?: boolean;
+    /**
+     * Id for the input element, used for label association. Auto-generated if not provided.
+     */
+    id?: string;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/dist/components/Input/Input.js

@@ -1,60 +1,110 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { cva as p } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import * as L from "react";
-import { cn as e } from "../../lib/utils.js";
-import { Tick as R } from "../Icons/Tick.js";
-import { typographyVariants as y } from "../Typography/Typography.js";
-const c = 1.5, F = p(
-  e(
-    "peer h-[3.5rem] w-full rounded-[0.625rem] border border-gray-100 bg-gray-100 px-4 outline-none transition duration-300",
-    "file:hidden",
-    "placeholder:text-gray-500",
-    "focus:border-gray-300 focus:bg-gray-0 focus-visible:outline-none",
-    "disabled:cursor-not-allowed disabled:opacity-50"
-  ),
+"use client";
+import { jsxs as t, Fragment as l, jsx as e } from "react/jsx-runtime";
+import { cva as o } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import * as x from "react";
+import { cn as s } from "../../lib/utils.js";
+import { Tick as F } from "../Icons/Tick.js";
+import { typographyVariants as c } from "../Typography/Typography.js";
+const R = o(
+  [
+    "bg-gray-100",
+    "text-gray-900",
+    "h-[3.5rem]",
+    "inline-flex",
+    "w-full",
+    "shrink",
+    "cursor-text",
+    "items-center",
+    "overflow-hidden",
+    "border",
+    "border-gray-100",
+    "rounded-[0.625rem]",
+    "outline-none",
+    "transition-all",
+    "duration-300",
+    "ease-out",
+    "px-4",
+    // Focus state
+    "focus-within:border-gray-300",
+    "focus-within:bg-gray-0",
+    "focus-within:isolate",
+    // Disabled state (applied via group-disabled on parent if needed, or directly)
+    "has-[input:disabled]:cursor-not-allowed",
+    "has-[input:disabled]:opacity-50"
+  ],
   {
     variants: {
       error: {
-        true: "border-error-600 focus:border-error-600 bg-gray-0"
-      },
-      isLabel: {
-        true: "pt-6 pb-2 placeholder:text-transparent",
-        false: ""
-      },
-      isFocused: {
-        true: "focus:border-gray-300 focus:bg-gray-0 focus-visible:outline-none",
+        true: ["bg-gray-0", "border-error-600", "focus-within:border-error-600"],
         false: ""
       },
-      variant: {
-        "floating-label": "pt-6 pb-2 placeholder:text-transparent",
-        default: ""
+      areDividers: {
+        true: "gap-2.5",
+        false: "gap-2"
       }
     },
     defaultVariants: {
       error: !1,
-      isFocused: !1,
-      variant: "default"
+      areDividers: !1
     }
   }
-), h = p(
-  "absolute top-1 bottom-1 flex items-center justify-center overflow-hidden text-gray-400",
+), y = o(
+  [
+    "peer",
+    "inline-block",
+    "h-full",
+    "grow",
+    "w-full",
+    "appearance-none",
+    "bg-transparent",
+    "border-none",
+    "text-gray-900",
+    "placeholder:text-transparent",
+    "focus:outline-none",
+    "focus-visible:outline-none",
+    "disabled:cursor-not-allowed"
+  ],
   {
     variants: {
-      disabled: {
-        true: "text-gray-300 cursor-not-allowed"
-      },
-      position: {
-        start: "left-0",
-        end: "right-0"
+      variant: {
+        default: "placeholder:text-gray-500",
+        "floating-label": ["pt-6 pb-2"]
       }
+    },
+    defaultVariants: {
+      variant: "default"
     }
   }
-), x = p("border-r  h-[1.625rem] absolute", {
+), C = o([
+  "text-gray-500",
+  "pointer-events-none",
+  "absolute",
+  "start-0",
+  "w-fit",
+  "max-w-full",
+  "top-1/2",
+  "overflow-hidden",
+  "bg-transparent",
+  "text-ellipsis",
+  "whitespace-nowrap",
+  // Prevent wrapping
+  // Positioning & Transition
+  "translate-y-[-50%]",
+  "transition-[top,transform,scale,opacity,color]",
+  "duration-100",
+  "ease-out",
+  // Peer states for floating effect (when input has value or is focused)
+  "peer-focus:pointer-events-auto",
+  "peer-focus:top-[1.125rem]",
+  "peer-focus:text-xs",
+  "peer-focus:bg-base-100",
+  // Match input background
+  // State when placeholder is not shown (i.e., input has value)
+  "peer-[:not(:placeholder-shown)]:pointer-events-auto",
+  "peer-[:not(:placeholder-shown)]:top-[1.125rem]",
+  "peer-[:not(:placeholder-shown)]:text-xs"
+]), w = o("border-r h-[1.625rem] w-1", {
   variants: {
-    position: {
-      start: "left-0",
-      end: "right-0"
-    },
     error: {
       true: "border-error-600",
       false: "border-gray-300"
@@ -63,100 +113,97 @@ const c = 1.5, F = p(
   defaultVariants: {
     error: !1
   }
-}), T = L.forwardRef(
+}), D = x.forwardRef(
   ({
-    type: v = "text",
-    error: a,
-    startAdornment: t,
-    endAdornment: o,
-    isValid: s,
-    startAdornmentWidth: l = c,
-    endAdornmentWidth: d = c,
-    disabled: i,
+    type: d = "text",
+    error: r = !1,
+    startAdornment: u,
+    endAdornment: p,
+    isValid: f,
+    disabled: h,
     className: N,
-    label: f,
-    id: u,
-    showStartDivider: m,
-    showEndDivider: b,
-    variant: g = "default",
-    ...w
-  }, $) => /* @__PURE__ */ n("div", { className: "relative flex w-full items-center group", children: [
-    t && /* @__PURE__ */ n(
+    label: a,
+    id: V,
+    showStartDivider: m = !1,
+    showEndDivider: g = !1,
+    variant: i = "default",
+    ...v
+  }, b) => {
+    const k = x.useId(), n = V || k, j = !!u, I = f || !!p;
+    return /* @__PURE__ */ t(
       "div",
       {
-        className: e(h({ disabled: i, position: "start" })),
-        style: { width: `${l + 1}rem` },
-        children: [
-          t,
-          m && /* @__PURE__ */ r("div", { className: x({ position: "end", error: a }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ r(
-      "input",
-      {
-        ref: $,
-        id: u,
-        type: v,
-        placeholder: f,
-        disabled: i,
-        className: e(
-          F({ error: a, isLabel: g === "floating-label" }),
-          y({ variant: "body", level: 2 }),
+        className: s(
+          R({ error: r, areDividers: m || g }),
           N
         ),
-        ...w,
-        style: {
-          ...t && {
-            paddingLeft: `${(m ? 1.6 : 1) + l}rem`
-          },
-          ...o && {
-            paddingRight: `${(b ? 1.6 : 1) + d}rem`
-          },
-          ...s && { paddingRight: `${1 + c}rem` }
-        }
-      }
-    ),
-    (s || o) && /* @__PURE__ */ n(
-      "div",
-      {
-        className: e(h({ disabled: i, position: "end" })),
-        style: { width: `${d + 1}rem` },
         children: [
-          s ? /* @__PURE__ */ r(R, { className: "text-success-700" }) : o,
-          b && /* @__PURE__ */ r("div", { className: x({ position: "start", error: a }) })
+          j && /* @__PURE__ */ t(l, { children: [
+            /* @__PURE__ */ e("div", { className: "inline-flex items-center justify-center shrink-0 text-gray-500", children: u }),
+            m && /* @__PURE__ */ e("div", { className: w({ error: r }) })
+          ] }),
+          i === "floating-label" ? /* @__PURE__ */ t("div", { className: "relative grow h-full", children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                ref: b,
+                id: n,
+                type: d,
+                placeholder: a || " ",
+                disabled: h,
+                "aria-invalid": r,
+                className: s(
+                  c({ variant: "body", level: 3 }),
+                  y({
+                    variant: i
+                  })
+                ),
+                ...v
+              }
+            ),
+            /* @__PURE__ */ e(
+              "label",
+              {
+                className: s(
+                  C(),
+                  c({ variant: "body", level: 3 })
+                ),
+                htmlFor: n,
+                children: a
+              }
+            )
+          ] }) : /* @__PURE__ */ t(l, { children: [
+            a && /* @__PURE__ */ e("label", { className: "sr-only", htmlFor: n, children: a }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                ref: b,
+                id: n,
+                type: d,
+                placeholder: a,
+                disabled: h,
+                "aria-invalid": r,
+                className: s(
+                  y({
+                    variant: i
+                  }),
+                  c({ variant: "body", level: 3 })
+                ),
+                ...v
+              }
+            )
+          ] }),
+          I && /* @__PURE__ */ t(l, { children: [
+            g && /* @__PURE__ */ e("div", { className: w({ error: r }) }),
+            /* @__PURE__ */ e("div", { className: "inline-flex items-center justify-center shrink-0 text-gray-500", children: f ? /* @__PURE__ */ e(F, { className: "text-success-700" }) : p })
+          ] })
         ]
       }
-    ),
-    g === "floating-label" && /* @__PURE__ */ r(
-      "label",
-      {
-        htmlFor: u,
-        className: e(
-          y({ variant: "body", level: 3 }),
-          e(
-            // Initial state
-            "peer-placeholder-shown:text-sm peer-placeholder-shown:translate-y-0",
-            "peer-focus:-translate-y-[0.6rem] peer-focus:text-xs",
-            // End state
-            "absolute text-gray-500 duration-300 transform text-xs",
-            "-translate-y-[0.6rem] z-10 pl-4"
-          )
-        ),
-        style: {
-          ...t && {
-            paddingLeft: `${1 + l}rem`
-          }
-        },
-        children: f
-      }
-    )
-  ] })
+    );
+  }
 );
-T.displayName = "Input";
+D.displayName = "Input";
 export {
-  T as Input,
-  T as default,
-  h as iconVariants,
-  F as inputVariants
+  D as Input,
+  D as default
 };

package/dist/components/Input/index.js

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

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

@@ -1,5 +1,8 @@
 import { OTPInputProps } from 'input-otp';
 import * as React from "react";
+export declare const inputVariants: (props?: ({
+    error?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const patternDictionary: {
     digits: string;
     chars: string;

package/dist/components/OTPField/OTPField.js

@@ -1,47 +1,65 @@
 "use client";
-import { jsx as t, Fragment as p } from "react/jsx-runtime";
-import { cn as l } from "../../lib/utils.js";
-import { OTPInput as f, REGEXP_ONLY_DIGITS as g, REGEXP_ONLY_CHARS as h, REGEXP_ONLY_DIGITS_AND_CHARS as u } 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 x from "react";
-import { inputVariants as y } from "../Input/Input.js";
-import { typographyVariants as _ } from "../Typography/Typography.js";
-const R = {
-  digits: g,
-  chars: h,
-  digitsAndChars: u
-}, E = {
+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(
+    "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",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  ),
+  {
+    variants: {
+      error: {
+        true: "border-error-600 focus:border-error-600 bg-gray-0"
+      }
+    },
+    defaultVariants: {
+      error: !1
+    }
+  }
+), R = {
+  digits: f,
+  chars: b,
+  digitsAndChars: y
+}, v = {
   digits: "numeric",
   chars: "text",
   digitsAndChars: "text"
-}, O = x.forwardRef(
-  ({ maxLength: a = 6, error: r, children: N, mode: i = "digits", pattern: n, ...s }, e) => /* @__PURE__ */ t(
-    f,
+}, I = h.forwardRef(
+  ({ maxLength: i = 6, error: e, children: E, mode: t = "digits", pattern: n, ...s }, a) => /* @__PURE__ */ r(
+    g,
     {
-      ref: e,
+      ref: a,
       ...s,
-      maxLength: a,
-      inputMode: E[i],
-      pattern: n || R[i],
+      maxLength: i,
+      inputMode: v[t],
+      pattern: n || R[t],
       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(
+      render: ({ slots: d }) => /* @__PURE__ */ r(u, { children: d.map(({ isActive: c, char: l }, p) => /* @__PURE__ */ r(
         "div",
         {
-          ref: e,
+          ref: a,
           role: "textbox",
-          className: l(
-            y({ error: r }),
-            _({ variant: "body", level: 2 }),
+          className: o(
+            _({ error: e }),
+            x({ variant: "body", level: 2 }),
             "w-12 h-[4.25rem] rounded-lg flex items-center justify-center",
-            (d || r) && "z-10 bg-gray-0"
+            (c || e) && "z-10 bg-gray-0"
           ),
-          children: c
+          children: l
         },
-        m
+        p
       )) })
     }
   )
 );
 export {
-  O as OTPField,
-  O as default
+  I as OTPField,
+  I as default,
+  _ as inputVariants
 };

package/dist/components/OTPField/index.js

@@ -1,4 +1,5 @@
-import { OTPField as r } from "./OTPField.js";
+import { OTPField as t, inputVariants as a } from "./OTPField.js";
 export {
-  r as OTPField
+  t as OTPField,
+  a as inputVariants
 };

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

@@ -1,5 +1,5 @@
 import { InputProps } from '../Input';
-export interface PasswordFieldProps extends Omit<InputProps, "startAdornment" | "startAdornmentWidth"> {
+export interface PasswordFieldProps extends Omit<InputProps, "startAdornment"> {
     /**
      * If true, the input will display in an error state with error styling
      */

package/dist/components/PasswordField/PasswordField.js

@@ -3,43 +3,40 @@ 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(
+import { Input as y } from "../Input/Input.js";
+const x = l(
   ({
-    isValid: t,
+    isValid: e,
     disabled: r,
-    type: A = "password",
-    autoComplete: d = "current-password",
-    spellCheck: n = "false",
-    inputMode: s = "text",
-    autoCapitalize: m = "off",
+    type: P = "password",
+    autoComplete: s = "current-password",
+    spellCheck: d = "false",
+    inputMode: a = "text",
+    autoCapitalize: f = "off",
     autoCorrect: p = "off",
-    endAdornment: P,
-    endAdornmentWidth: x,
-    ...a
-  }, f) => {
-    const [e, i] = w(!1);
+    ...n
+  }, m) => {
+    const [t, i] = w(!1);
     return /* @__PURE__ */ o(
-      h,
+      y,
       {
-        ...a,
-        ref: f,
-        isValid: t,
+        ...n,
+        ref: m,
+        isValid: e,
         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,
+        endAdornment: /* @__PURE__ */ o("button", { type: "button", onClick: () => i(!t), children: t ? /* @__PURE__ */ o(c, {}) : /* @__PURE__ */ o(u, {}) }),
+        type: t ? "text" : "password",
+        autoComplete: s,
+        spellCheck: d,
+        inputMode: a,
+        autoCapitalize: f,
         autoCorrect: p
       }
     );
   }
 );
-y.displayName = "PasswordField";
+x.displayName = "PasswordField";
 export {
-  y as PasswordField,
-  y as default
+  x as PasswordField,
+  x as default
 };

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

@@ -15,6 +15,5 @@ interface PasteButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
      */
     onPaste?: (value: string) => void;
 }
-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

@@ -3,8 +3,8 @@ 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 f = d.forwardRef(
+  ({ children: x, inputRef: r, label: o = "Paste", className: l, onPaste: a, ...n }, c) => {
     const i = async () => {
       try {
         if (r && "current" in r && r.current) {
@@ -19,13 +19,13 @@ const T = 5, f = d.forwardRef(
       "button",
       {
         type: "button",
-        ref: l,
+        ref: c,
         className: m(
-          n,
+          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"
         ),
         onClick: i,
-        ...c,
+        ...n,
         children: [
           /* @__PURE__ */ e(p, { variant: "subtitle", level: 3, children: o }),
           /* @__PURE__ */ e(u, {})
@@ -36,6 +36,5 @@ const T = 5, f = d.forwardRef(
 );
 f.displayName = "PasteButton";
 export {
-  T as PASTE_BUTTON_WIDTH,
   f as default
 };