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

package/dist/components/Icons/Magnifier.js

@@ -1,31 +1,40 @@
-import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
 import { cn as t } from "../../lib/utils.js";
-function h({ className: r }) {
+function s({ className: o }) {
   return /* @__PURE__ */ e(
     "svg",
     {
-      width: "20",
-      height: "20",
-      viewBox: "0 0 20 20",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className: t("h-4 w-4", r),
+      className: t("size-6", o),
       children: [
-        /* @__PURE__ */ i("g", { clipPath: "url(#clip0_352_148)", children: /* @__PURE__ */ i(
+        /* @__PURE__ */ r(
           "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",
+            d: "M17 17L21 21",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "square",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ r(
+          "path",
+          {
+            d: "M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z",
             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
+  s as Magnifier
 };

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

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

package/dist/components/Icons/Success.js

@@ -0,0 +1,82 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { cn as r } from "../../lib/utils.js";
+const a = ({ className: i }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: "25",
+    height: "24",
+    viewBox: "0 0 25 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: r("size-6 text-success-600", i),
+    children: [
+      /* @__PURE__ */ t("rect", { x: "0.5", width: "24", height: "24", rx: "12", fill: "currentColor" }),
+      /* @__PURE__ */ t(
+        "rect",
+        {
+          opacity: "0.2",
+          x: "0.5",
+          width: "24",
+          height: "24",
+          rx: "12",
+          fill: "url(#paint0_radial_578_332)"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "rect",
+        {
+          x: "0.636364",
+          y: "0.136364",
+          width: "23.7273",
+          height: "23.7273",
+          rx: "11.8636",
+          stroke: "url(#paint1_linear_578_332)",
+          strokeWidth: "0.272727"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M8.54541 12.4091L10.7272 14.5909L16.1818 9.13633",
+          stroke: "white",
+          strokeWidth: "1.5"
+        }
+      ),
+      /* @__PURE__ */ e("defs", { children: [
+        /* @__PURE__ */ e(
+          "radialGradient",
+          {
+            id: "paint0_radial_578_332",
+            cx: "0",
+            cy: "0",
+            r: "1",
+            gradientUnits: "userSpaceOnUse",
+            gradientTransform: "translate(5.95455) rotate(63.4349) scale(26.8328 26.7171)",
+            children: [
+              /* @__PURE__ */ t("stop", { stopColor: "white" }),
+              /* @__PURE__ */ t("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          "linearGradient",
+          {
+            id: "paint1_linear_578_332",
+            x1: "12.5",
+            y1: "0",
+            x2: "12.5",
+            y2: "24",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ t("stop", { stopColor: "white", stopOpacity: "0.3" }),
+              /* @__PURE__ */ t("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
+            ]
+          }
+        )
+      ] })
+    ]
+  }
+);
+export {
+  a as Success
+};

package/dist/components/Icons/Tick.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
-import { cn as r } from "../../lib/utils.js";
-function n({ className: o }) {
+import { cn as o } from "../../lib/utils.js";
+function n({ className: r }) {
   return /* @__PURE__ */ t(
     "svg",
     {
@@ -9,16 +9,15 @@ function n({ className: o }) {
       viewBox: "0 0 16 16",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className: r("h-4 w-4", o),
+      className: o("h-4 w-4", r),
       "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",
+          d: "M3.33334 8.66669L6.00001 11.3334L12.6667 4.66669",
           stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          strokeWidth: "1.5",
+          strokeLinecap: "square"
         }
       )
     }

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

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

package/dist/components/Icons/XMark.js

@@ -0,0 +1,27 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as o } from "../../lib/utils.js";
+function n({ className: t }) {
+  return /* @__PURE__ */ r(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: o("h-6 w-6", t),
+      children: /* @__PURE__ */ r(
+        "path",
+        {
+          d: "M6.75729 17.2426L11.9999 12M17.2426 6.75736L11.9999 12M11.9999 12L6.75729 6.75736M11.9999 12L17.2426 17.2426",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "square"
+        }
+      )
+    }
+  );
+}
+export {
+  n as XMark
+};

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

@@ -2,14 +2,15 @@ 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;
-    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> {
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "style" | "placeholder">, VariantProps<typeof inputVariants> {
     /**
      * If true, the input will display in an error state with error styling
      */
@@ -49,6 +50,29 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      * @default false
      */
     isFocused?: boolean;
+    /**
+     * Additional class name for the input
+     */
+    className?: string;
+    /**
+     * Label text to be displayed above the input
+     */
+    label?: string;
+    /**
+     * Variant of the input
+     * @default "default"
+     */
+    variant?: "default" | "floating-label";
+    /**
+     * If true, the dividers will be shown
+     * @default true
+     */
+    showStartDivider?: boolean;
+    /**
+     * If true, the end divider will be shown
+     * @default true
+     */
+    showEndDivider?: boolean;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/dist/components/Input/Input.js

@@ -1,98 +1,163 @@
-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",
+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"
+  ),
   {
     variants: {
       error: {
-        true: "border-error-700 bg-error-100 focus:border-error-700 focus:bg-error-100"
+        true: "border-error-600 focus:border-error-600 bg-gray-0"
+      },
+      isLabel: {
+        true: "pt-6 pb-2 placeholder:text-transparent",
+        false: ""
       },
       isFocused: {
-        true: "border-gray-200 bg-gray-0 shadow-card",
+        true: "focus:border-gray-300 focus:bg-gray-0 focus-visible:outline-none",
         false: ""
+      },
+      variant: {
+        "floating-label": "pt-6 pb-2 placeholder:text-transparent",
+        default: ""
       }
     },
     defaultVariants: {
       error: !1,
-      isFocused: !1
+      isFocused: !1,
+      variant: "default"
     }
   }
-), d = u(
+), v = c(
   "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"
+        start: "left-0",
+        end: "right-0"
       }
+    }
+  }
+), h = c("border-r  h-[1.625rem] absolute", {
+  variants: {
+    position: {
+      start: "left-0",
+      end: "right-0"
     },
-    defaultVariants: {
-      error: !1
+    error: {
+      true: "border-error-600",
+      false: "border-gray-300"
     }
+  },
+  defaultVariants: {
+    error: !1
   }
-), w = y.forwardRef(
+}), T = L.forwardRef(
   ({
-    type: f = "text",
-    error: e,
-    startAdornment: t,
+    type: x = "text",
+    error: t,
+    startAdornment: a,
     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(
+    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(
       "div",
       {
-        className: i(d({ error: e, disabled: s, position: "start" })),
-        style: { width: `${c + 0.75}rem` },
-        children: t
+        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: m,
-        type: f,
-        disabled: s,
-        className: i(h({ error: e, isFocused: p })),
-        ...g,
+        ref: $,
+        id: u,
+        type: x,
+        placeholder: f,
+        disabled: i,
+        className: e(
+          F({ error: t, isLabel: m === "floating-label" }),
+          y({ variant: "body", level: 3 }),
+          N
+        ),
+        ...w,
         style: {
-          ...t && {
-            paddingLeft: `${1 + c}rem`
+          ...a && {
+            paddingLeft: `${(b ? 1.6 : 1) + l}rem`
           },
           ...o && {
-            paddingRight: `${1 + n}rem`
+            paddingRight: `${(g ? 1.6 : 1) + p}rem`
           },
-          ...a && { paddingRight: `${1 + l}rem` }
+          ...s && { paddingRight: `${1 + d}rem` }
         }
       }
     ),
-    (a || o) && /* @__PURE__ */ r(
+    (s || o) && /* @__PURE__ */ n(
       "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
+        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 }) })
+        ]
+      }
+    ),
+    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
       }
     )
   ] })
 );
-w.displayName = "Input";
+T.displayName = "Input";
 export {
-  w as Input,
-  w as default,
-  d as iconVariants,
-  h as inputVariants
+  T as Input,
+  T as default,
+  v as iconVariants,
+  F as inputVariants
 };

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

@@ -1,9 +1,20 @@
-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"> {
+/**
+ * Props for the ListItem component
+ * @extends {Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "style">}
+ */
+interface ListItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "style"> {
+    /** The main text label to display */
+    label?: string;
+    /** Secondary descriptive text to show below the label */
+    description?: string;
+    /** Content to render at the start/left of the list item */
+    startAdornment?: React.ReactNode;
+    /** Content to render at the end/right of the list item */
+    endAdornment?: React.ReactNode;
+    /** Child content to render inside the list item */
     children?: React.ReactNode;
+    /** Whether the list item is disabled */
+    disabled?: boolean;
 }
-export declare const ListItem: import('react').ForwardRefExoticComponent<ListItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ListItem: import('react').ForwardRefExoticComponent<ListItemProps & import('react').RefAttributes<HTMLButtonElement>>;
 export default ListItem;

package/dist/components/ListItem/ListItem.js

@@ -1,25 +1,32 @@
-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 })
+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(
+  "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 })
+  ] })
 );
-n.displayName = "ListItem";
+g.displayName = "ListItem";
 export {
-  n as ListItem,
-  n as default
+  g as ListItem,
+  g as default
 };

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

@@ -0,0 +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;

package/dist/components/Marble/Marble.js

@@ -0,0 +1,23 @@
+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(
+    "img",
+    {
+      ref: e,
+      alt: "Marble",
+      className: t(
+        "rounded-full border-2 border-gray-100 p-[3px] aspect-square w-[7.5rem] object-cover",
+        a
+      ),
+      ...o
+    }
+  );
+});
+l.displayName = "Marble";
+export {
+  l as Marble,
+  l as default
+};

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

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

package/dist/components/Marble/index.js

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

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

@@ -1,8 +1 @@
-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 {};
+export declare function Delete(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/NumberPad/Delete.js

@@ -1,6 +1,6 @@
-import { jsx as t } from "react/jsx-runtime";
-function r({ className: e }) {
-  return /* @__PURE__ */ t(
+import { jsx as e } from "react/jsx-runtime";
+function o(t) {
+  return /* @__PURE__ */ e(
     "svg",
     {
       width: "24",
@@ -8,20 +8,19 @@ function r({ className: e }) {
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className: e,
-      "data-testid": "delete-icon",
-      children: /* @__PURE__ */ t(
+      ...t,
+      children: /* @__PURE__ */ e(
         "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",
+          d: "M15 6L9 12L15 18",
           stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round"
+          strokeWidth: "2.5",
+          strokeLinecap: "square"
         }
       )
     }
   );
 }
 export {
-  r as Delete
+  o as Delete
 };