@worldcoin/mini-apps-ui-kit-react 1.0.0-canary.2 → 1.0.0-canary.21

package/dist/components/Input/Input.js

@@ -1,163 +1,215 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { cva as c } 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 d = 1.5, F = c(
-  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",
-    "invalid:border-error-600 invalid:focus:border-error-600 invalid:bg-gray-0",
-    "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, Fragment, jsx } from "react/jsx-runtime";
+import { cva } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { Tick } from "../Icons/Tick.js";
+import { typographyVariants } from "../Typography/Typography.js";
+const inputContainerVariants = cva(
+  [
+    "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"
+      error: false,
+      areDividers: false
     }
   }
-), v = c(
-  "absolute top-1 bottom-1 flex items-center justify-center overflow-hidden text-gray-400",
+);
+const inputElementVariants = cva(
+  [
+    "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"
     }
   }
-), h = c("border-r  h-[1.625rem] absolute", {
+);
+const floatingLabelVariants = cva([
+  "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"
+]);
+const dividerVariants = cva("border-r h-[1.625rem] w-1", {
   variants: {
-    position: {
-      start: "left-0",
-      end: "right-0"
-    },
     error: {
       true: "border-error-600",
       false: "border-gray-300"
     }
   },
   defaultVariants: {
-    error: !1
+    error: false
   }
-}), T = L.forwardRef(
+});
+const Input = React.forwardRef(
   ({
-    type: x = "text",
-    error: t,
-    startAdornment: a,
-    endAdornment: o,
-    isValid: s,
-    startAdornmentWidth: l = d,
-    endAdornmentWidth: p = d,
-    disabled: i,
-    className: N,
-    label: f,
-    id: u,
-    showStartDivider: b,
-    showEndDivider: g,
-    variant: m = "default",
-    ...w
-  }, $) => /* @__PURE__ */ n("div", { className: "relative flex w-full items-center group", children: [
-    a && /* @__PURE__ */ n(
+    type = "text",
+    error = false,
+    startAdornment,
+    endAdornment,
+    isValid,
+    disabled,
+    className,
+    label,
+    id: providedId,
+    showStartDivider = false,
+    showEndDivider = false,
+    variant = "default",
+    ...props
+  }, ref) => {
+    const generatedId = React.useId();
+    const id = providedId || generatedId;
+    const hasStartAdornment = !!startAdornment;
+    const hasEndAdornment = isValid || !!endAdornment;
+    return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: e(v({ disabled: i, position: "start" })),
-        style: { width: `${l + 1}rem` },
-        children: [
-          a,
-          b && /* @__PURE__ */ r("div", { className: h({ position: "end", error: t }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ r(
-      "input",
-      {
-        ref: $,
-        id: u,
-        type: x,
-        placeholder: f,
-        disabled: i,
-        className: e(
-          F({ error: t, isLabel: m === "floating-label" }),
-          y({ variant: "body", level: 3 }),
-          N
+        className: cn(
+          inputContainerVariants({ error, areDividers: showStartDivider || showEndDivider }),
+          className
         ),
-        ...w,
-        style: {
-          ...a && {
-            paddingLeft: `${(b ? 1.6 : 1) + l}rem`
-          },
-          ...o && {
-            paddingRight: `${(g ? 1.6 : 1) + p}rem`
-          },
-          ...s && { paddingRight: `${1 + d}rem` }
-        }
-      }
-    ),
-    (s || o) && /* @__PURE__ */ n(
-      "div",
-      {
-        className: e(v({ disabled: i, position: "end" })),
-        style: { width: `${p + 1}rem` },
         children: [
-          s ? /* @__PURE__ */ r(R, { className: "text-success-700" }) : o,
-          g && /* @__PURE__ */ r("div", { className: h({ position: "start", error: t }) })
+          hasStartAdornment && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center shrink-0 text-gray-500", children: startAdornment }),
+            showStartDivider && /* @__PURE__ */ jsx("div", { className: dividerVariants({ error }) })
+          ] }),
+          variant === "floating-label" ? /* @__PURE__ */ jsxs("div", { className: "relative grow h-full", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                id,
+                type,
+                placeholder: label || " ",
+                disabled,
+                "aria-invalid": error,
+                className: cn(
+                  typographyVariants({ variant: "body", level: 3 }),
+                  inputElementVariants({
+                    variant
+                  })
+                ),
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                className: cn(
+                  floatingLabelVariants(),
+                  typographyVariants({ variant: "body", level: 3 })
+                ),
+                htmlFor: id,
+                children: label
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            label && /* @__PURE__ */ jsx("label", { className: "sr-only", htmlFor: id, children: label }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                id,
+                type,
+                placeholder: label,
+                disabled,
+                "aria-invalid": error,
+                className: cn(
+                  inputElementVariants({
+                    variant
+                  }),
+                  typographyVariants({ variant: "body", level: 3 })
+                ),
+                ...props
+              }
+            )
+          ] }),
+          hasEndAdornment && /* @__PURE__ */ jsxs(Fragment, { children: [
+            showEndDivider && /* @__PURE__ */ jsx("div", { className: dividerVariants({ error }) }),
+            /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center shrink-0 text-gray-500", children: isValid ? /* @__PURE__ */ jsx(Tick, { className: "text-success-700" }) : endAdornment })
+          ] })
         ]
       }
-    ),
-    m === "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: {
-          ...a && {
-            paddingLeft: `${1 + l}rem`
-          }
-        },
-        children: f
-      }
-    )
-  ] })
+    );
+  }
 );
-T.displayName = "Input";
+Input.displayName = "Input";
 export {
-  T as Input,
-  T as default,
-  v as iconVariants,
-  F as inputVariants
+  Input
 };

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

@@ -1 +1 @@
-export * from './Input';
+export { Input, type InputProps } from './Input';

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

@@ -16,5 +16,6 @@ interface ListItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElemen
     /** Whether the list item is disabled */
     disabled?: boolean;
 }
-export declare const ListItem: import('react').ForwardRefExoticComponent<ListItemProps & import('react').RefAttributes<HTMLButtonElement>>;
-export default ListItem;
+declare const ListItem: import('react').ForwardRefExoticComponent<ListItemProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { ListItem };
+export type { ListItemProps };

package/dist/components/ListItem/ListItem.js

@@ -1,32 +1,34 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { cn as f } from "../../lib/utils.js";
-import { cva as x } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { forwardRef as n } from "react";
-import { Typography as m } from "../Typography/Typography.js";
-const d = x(
+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 { Typography } from "../Typography/Typography.js";
+const listItemStyles = cva(
   "h-[4.75rem] bg-gray-50 p-4 rounded-2xl flex items-center text-gray-900 w-full disabled:text-gray-400 disabled:cursor-not-allowed"
-), g = n(
-  ({ children: h, label: t, description: l, startAdornment: r, endAdornment: a, disabled: s, ...c }, o) => /* @__PURE__ */ i("button", { ref: o, className: d(), ...c, disabled: s, children: [
-    r && /* @__PURE__ */ e("div", { className: "mr-3 flex-shrink-0", children: r }),
-    /* @__PURE__ */ i("div", { className: "flex flex-col flex-grow min-w-0 items-start gap-0.5", children: [
-      t && /* @__PURE__ */ e(m, { variant: "subtitle", level: 2, className: "truncate grow w-full text-left", children: t }),
-      l && /* @__PURE__ */ e(
-        m,
-        {
-          level: 4,
-          className: f(
-            "truncate grow w-full text-left",
-            s ? "text-gray-400" : "text-gray-500"
-          ),
-          children: l
-        }
-      )
-    ] }),
-    a && /* @__PURE__ */ e("div", { className: "ml-4 flex-shrink-0", children: a })
-  ] })
 );
-g.displayName = "ListItem";
+const ListItem = forwardRef(
+  ({ children, label, description, startAdornment, endAdornment, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs("button", { ref, className: listItemStyles(), ...props, disabled, children: [
+      startAdornment && /* @__PURE__ */ jsx("div", { className: "mr-3 flex-shrink-0", children: startAdornment }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-grow min-w-0 items-start gap-0.5", children: [
+        label && /* @__PURE__ */ jsx(Typography, { variant: "subtitle", level: 2, className: "truncate grow w-full text-left", children: label }),
+        description && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            level: 4,
+            className: cn(
+              "truncate grow w-full text-left",
+              disabled ? "text-gray-400" : "text-gray-500"
+            ),
+            children: description
+          }
+        )
+      ] }),
+      endAdornment && /* @__PURE__ */ jsx("div", { className: "ml-4 flex-shrink-0", children: endAdornment })
+    ] });
+  }
+);
+ListItem.displayName = "ListItem";
 export {
-  g as ListItem,
-  g as default
+  ListItem
 };

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

@@ -1 +1 @@
-export * from './ListItem';
+export { ListItem, type ListItemProps } from './ListItem';

package/dist/components/LiveFeedback/LiveFeedback.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+interface LiveFeedbackProps {
+    /** The current state of the feedback. Controls which icon and label are shown. */
+    state?: "pending" | "success" | "failed";
+    /** The content to wrap with live feedback, typically a button or form element */
+    children: React.ReactNode;
+    /** Optional className to apply to the wrapper div */
+    className?: string;
+    /** Optional labels to show next to the icons for each state */
+    label?: {
+        /** Text to show during the pending state */
+        pending: string;
+        /** Text to show when operation succeeds */
+        success: string;
+        /** Text to show when operation fails */
+        failed: string;
+    };
+}
+declare function LiveFeedback({ state, children, className, label }: LiveFeedbackProps): import("react/jsx-runtime").JSX.Element;
+export { LiveFeedback };
+export type { LiveFeedbackProps };

package/dist/components/LiveFeedback/LiveFeedback.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { Fail } from "../Icons/Fail.js";
+import { Success } from "../Icons/Success.js";
+import { Spinner } from "../Spinner/Spinner.js";
+import { Typography } from "../Typography/Typography.js";
+function LiveFeedback({ state, children, className, label }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "w-full h-full",
+          state && "invisible"
+          // Hide children but preserve space
+        ),
+        children
+      }
+    ),
+    state && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "absolute inset-0 flex items-center justify-center gap-2",
+          state === "success" && "text-success-600",
+          state === "failed" && "text-error-600"
+        ),
+        children: [
+          state === "pending" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Spinner, { className: "size-6" }),
+            (label == null ? void 0 : label.pending) && /* @__PURE__ */ jsx(Typography, { variant: "label", level: 2, children: label.pending })
+          ] }),
+          state === "success" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Success, { className: "size-6" }),
+            (label == null ? void 0 : label.success) && /* @__PURE__ */ jsx(Typography, { variant: "label", level: 2, children: label.success })
+          ] }),
+          state === "failed" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Fail, { className: "size-6" }),
+            (label == null ? void 0 : label.failed) && /* @__PURE__ */ jsx(Typography, { variant: "label", level: 2, children: label.failed })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  LiveFeedback
+};

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

@@ -0,0 +1 @@
+export { LiveFeedback, type LiveFeedbackProps } from './LiveFeedback';

package/dist/components/Marble/Marble.d.ts

@@ -1,2 +1,2 @@
-export declare const Marble: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & import('react').RefAttributes<HTMLImageElement>>;
-export default Marble;
+declare const Marble: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & import('react').RefAttributes<HTMLImageElement>>;
+export { Marble };

package/dist/components/Marble/Marble.js

@@ -1,23 +1,22 @@
-import { jsx as s } from "react/jsx-runtime";
-import { cn as t } from "../../lib/utils.js";
-import { forwardRef as m } from "react";
-const l = m((r, e) => {
-  const { className: a, ...o } = r;
-  return /* @__PURE__ */ s(
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { forwardRef } from "react";
+const Marble = forwardRef((props, ref) => {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
     "img",
     {
-      ref: e,
+      ref,
       alt: "Marble",
-      className: t(
+      className: cn(
         "rounded-full border-2 border-gray-100 p-[3px] aspect-square w-[7.5rem] object-cover",
-        a
+        className
       ),
-      ...o
+      ...rest
     }
   );
 });
-l.displayName = "Marble";
+Marble.displayName = "Marble";
 export {
-  l as Marble,
-  l as default
+  Marble
 };

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

@@ -1 +1 @@
-export * from './Marble';
+export { Marble } from './Marble';

package/dist/components/NumberPad/Delete.js

@@ -1,6 +1,6 @@
-import { jsx as e } from "react/jsx-runtime";
-function o(t) {
-  return /* @__PURE__ */ e(
+import { jsx } from "react/jsx-runtime";
+function Delete(props) {
+  return /* @__PURE__ */ jsx(
     "svg",
     {
       width: "24",
@@ -8,8 +8,8 @@ function o(t) {
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      ...t,
-      children: /* @__PURE__ */ e(
+      ...props,
+      children: /* @__PURE__ */ jsx(
         "path",
         {
           d: "M15 6L9 12L15 18",
@@ -22,5 +22,5 @@ function o(t) {
   );
 }
 export {
-  o as Delete
+  Delete
 };

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

@@ -27,5 +27,6 @@ interface NumberPadProps {
      */
     longPressOptions?: LongPressOptions;
 }
-export declare const NumberPad: ({ value, onChange, disabled, onLongDeletePress, longPressOptions, }: NumberPadProps) => import("react/jsx-runtime").JSX.Element;
-export default NumberPad;
+declare const NumberPad: ({ value, onChange, disabled, onLongDeletePress, longPressOptions, }: NumberPadProps) => import("react/jsx-runtime").JSX.Element;
+export { NumberPad };
+export type { NumberPadProps };