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

package/dist/components/Tabs/Tabs.js

@@ -1,55 +1,60 @@
 "use client";
-import { jsx as a, jsxs as c } from "react/jsx-runtime";
-import { Slot as s } from "../../node_modules/.pnpm/@radix-ui_react-slot@1.1.1_@types_react@18.3.18_react@18.3.1/node_modules/@radix-ui/react-slot/dist/index.js";
-import { Root as p, Item as f } from "../../node_modules/.pnpm/@radix-ui_react-toggle-group@1.1.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react_3smwloudr6a3igss4kifyxcwju/node_modules/@radix-ui/react-toggle-group/dist/index.js";
-import * as o from "react";
-import { cn as n } from "../../lib/utils.js";
-import { Typography as d } from "../Typography/Typography.js";
-const u = o.forwardRef(
-  ({ children: t, ...r }, e) => /* @__PURE__ */ a(
-    p,
-    {
-      ref: e,
-      type: "single",
-      className: "grid w-full px-5 items-center auto-cols-fr",
-      style: {
-        gridTemplateColumns: `repeat(${o.Children.count(t)}, 1fr)`
-      },
-      ...r,
-      children: t
-    }
-  )
+import { jsx, jsxs } from "react/jsx-runtime";
+import { withHaptics } from "../../lib/haptics.js";
+import { Slot } from "../../node_modules/.pnpm/@radix-ui_react-slot@1.1.1_@types_react@18.3.18_react@18.3.1/node_modules/@radix-ui/react-slot/dist/index.js";
+import { Root as Root2, Item as Item2 } from "../../node_modules/.pnpm/@radix-ui_react-toggle-group@1.1.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react_3smwloudr6a3igss4kifyxcwju/node_modules/@radix-ui/react-toggle-group/dist/index.js";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { Typography } from "../Typography/Typography.js";
+const Tabs = React.forwardRef(
+  ({ children, className, onValueChange, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Root2,
+      {
+        ref,
+        type: "single",
+        className: cn("grid w-full px-5 items-center auto-cols-fr", className),
+        style: {
+          gridTemplateColumns: `repeat(${React.Children.count(children)}, 1fr)`
+        },
+        onValueChange: withHaptics(onValueChange),
+        ...props,
+        children
+      }
+    );
+  }
 );
-u.displayName = "Tabs";
-const x = o.forwardRef(
-  ({ icon: t, label: r, altIcon: e, className: i, ...l }, m) => /* @__PURE__ */ c(
-    f,
+Tabs.displayName = "Tabs";
+const TabItem = React.forwardRef(
+  ({ icon, label, altIcon, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    Item2,
     {
-      ref: m,
-      className: (n(
+      ref,
+      className: cn(
         "w-full flex-1 flex flex-col items-center justify-center gap-1 relative min-w-0 group",
         "focus:outline-none transition-colors duration-200",
-        "text-gray-350 hover:text-gray-500 data-[state=on]:text-gray-900"
-      ), i),
-      ...l,
+        "text-gray-350 hover:text-gray-500 data-[state=on]:text-gray-900",
+        className
+      ),
+      ...props,
       children: [
-        /* @__PURE__ */ a(s, { className: n("h-[1.625rem] shrink-0", e && "group-data-[state=on]:hidden"), children: t }),
-        e && /* @__PURE__ */ a(s, { className: "h-[1.625rem] shrink-0 hidden group-data-[state=on]:block", children: e }),
-        r && /* @__PURE__ */ a(
-          d,
+        /* @__PURE__ */ jsx(Slot, { className: cn("h-[1.625rem] shrink-0", altIcon && "group-data-[state=on]:hidden"), children: icon }),
+        altIcon && /* @__PURE__ */ jsx(Slot, { className: "h-[1.625rem] shrink-0 hidden group-data-[state=on]:block", children: altIcon }),
+        label && /* @__PURE__ */ jsx(
+          Typography,
           {
             as: "span",
             variant: "subtitle",
             className: "text-2xs truncate w-full text-center px-1 leading-none",
-            children: r
+            children: label
           }
         )
       ]
     }
   )
 );
-x.displayName = "TabItem";
+TabItem.displayName = "TabItem";
 export {
-  x as TabItem,
-  u as Tabs
+  TabItem,
+  Tabs
 };

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

@@ -1,2 +1,2 @@
-export * from './Tabs';
-export * from './types';
+export { Tabs, TabItem } from './Tabs';
+export type { TabsProps, TabItemProps } from './types';

package/dist/components/TextArea/TextArea.d.ts

@@ -1,7 +1,11 @@
 import { VariantProps } from 'class-variance-authority';
-import { inputVariants } from '../Input/Input';
 import * as React from "react";
-export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "className" | "style" | "placeholder">, VariantProps<typeof inputVariants> {
+export declare const textAreaVariants: (props?: ({
+    error?: boolean | null | undefined;
+    isFocused?: boolean | null | undefined;
+    variant?: "default" | "floating-label" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "className" | "style" | "placeholder">, VariantProps<typeof textAreaVariants> {
     /**
      * If true, the textarea will display in an error state with error styling
      */
@@ -21,5 +25,6 @@ export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
      */
     variant?: "default" | "floating-label";
 }
-export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
-export default TextArea;
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { TextArea };
+export type { TextAreaProps };

package/dist/components/TextArea/TextArea.js

@@ -1,54 +1,75 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { cva as d } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import * as c from "react";
-import { cn as r } from "../../lib/utils.js";
-import { inputVariants as x } from "../Input/Input.js";
-import { typographyVariants as l } from "../Typography/Typography.js";
-const u = d("min-h-[7.5rem] resize-y", {
-  variants: {
-    variant: {
-      "floating-label": "pt-8",
-      default: "pt-4"
+import { jsxs, 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 { typographyVariants } from "../Typography/Typography.js";
+const textAreaVariants = cva(
+  cn(
+    "min-h-[7.5rem] resize-y peer 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"
+      },
+      isFocused: {
+        true: "focus:border-gray-300 focus:bg-gray-0 focus-visible:outline-none",
+        false: ""
+      },
+      variant: {
+        "floating-label": "pt-8 pb-2 placeholder:text-transparent",
+        default: "pt-4"
+      }
+    },
+    defaultVariants: {
+      error: false,
+      isFocused: false,
+      variant: "default"
     }
   }
-}), b = c.forwardRef(
-  ({ error: s, isFocused: m = !1, disabled: p, label: t, variant: e = "default", id: a, ...i }, f) => /* @__PURE__ */ n("div", { className: "relative flex w-full items-center group", children: [
-    /* @__PURE__ */ o(
-      "textarea",
-      {
-        ref: f,
-        id: a,
-        placeholder: t,
-        disabled: p,
-        className: r(
-          x({ error: s, isFocused: m, variant: e }),
-          l({ variant: "body", level: 3 }),
-          u({ variant: e })
-        ),
-        ...i
-      }
-    ),
-    e === "floating-label" && /* @__PURE__ */ o(
-      "label",
-      {
-        htmlFor: a,
-        className: r(
-          l({ variant: "body", level: 3 }),
-          r(
-            // Initial state
-            "peer-placeholder-shown:text-sm",
-            "peer-focus:text-xs peer-focus:border-gray-300 peer-focus:bg-gray-0",
-            // End state
-            "absolute text-gray-500 duration-300 transform text-xs top-0 pt-4 z-10 pl-4 w-full bg-gray-100 rounded-t-[0.625rem] border-t border-x border-gray-100"
-          )
-        ),
-        children: t
-      }
-    )
-  ] })
 );
-b.displayName = "TextArea";
+const TextArea = React.forwardRef(
+  ({ error, isFocused = false, disabled, label, variant = "default", id, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { className: "relative flex w-full items-center group", children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref,
+          id,
+          placeholder: label,
+          disabled,
+          className: cn(
+            textAreaVariants({ error, isFocused, variant }),
+            typographyVariants({ variant: "body" })
+          ),
+          ...props
+        }
+      ),
+      variant === "floating-label" && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: id,
+          className: cn(
+            typographyVariants({ variant: "body", level: 3 }),
+            cn(
+              // Initial state
+              "peer-placeholder-shown:text-sm",
+              "peer-focus:text-xs peer-focus:border-gray-300 peer-focus:bg-gray-0",
+              // End state
+              "absolute text-gray-500 duration-300 transform text-xs top-0 pt-4 z-10 pl-4 w-full bg-gray-100 rounded-t-[0.625rem] border-t border-x border-gray-100"
+            )
+          ),
+          children: label
+        }
+      )
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
 export {
-  b as TextArea,
-  b as default
+  TextArea,
+  textAreaVariants
 };

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

@@ -1 +1 @@
-export { default } from './TextArea';
+export { TextArea, type TextAreaProps } from './TextArea';

package/dist/components/Toast/Toast.js

@@ -1,51 +1,54 @@
 "use client";
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { cn as s } from "../../lib/utils.js";
-import { Viewport as o, Root as i, Provider as p } from "../../node_modules/.pnpm/@radix-ui_react-toast@1.2.6_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18.3.1_mux33mveszkw5z6iia6acnivvy/node_modules/@radix-ui/react-toast/dist/index.js";
-import * as l from "react";
-import { Fail as c } from "../Icons/Fail.js";
-import { Success as f } from "../Icons/Success.js";
-import { Typography as u } from "../Typography/Typography.js";
-const b = p, x = l.forwardRef(({ className: r, ...a }, t) => /* @__PURE__ */ e(
-  o,
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { Viewport, Root as Root2, Provider } from "../../node_modules/.pnpm/@radix-ui_react-toast@1.2.6_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18.3.1_mux33mveszkw5z6iia6acnivvy/node_modules/@radix-ui/react-toast/dist/index.js";
+import * as React from "react";
+import { Fail } from "../Icons/Fail.js";
+import { Success } from "../Icons/Success.js";
+import { Typography } from "../Typography/Typography.js";
+const ToastProvider = Provider;
+const ToastViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Viewport,
   {
-    ref: t,
-    className: s(
-      "fixed top-0 z-[100] flex max-h-screen w-full p-6 right-0 left-0 flex-col",
-      r
+    ref,
+    className: cn(
+      "fixed top-6 z-[100] flex max-h-screen w-full p-0.5 right-0 left-0 flex-col",
+      className
     ),
-    ...a
+    ...props
   }
 ));
-x.displayName = o.displayName;
-const v = l.forwardRef(({ className: r, title: a, variant: t, ...d }, n) => /* @__PURE__ */ e(
-  i,
-  {
-    ref: n,
-    className: s(
-      "group pointer-events-auto relative flex w-full items-center justify-center",
-      "transition-all",
-      "data-[swipe=cancel]:translate-x-0",
-      "data-[swipe=end]:animate-out",
-      "data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)]",
-      "data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]",
-      "data-[swipe=move]:transition-none",
-      "data-[state=closed]:animate-out",
-      "data-[state=closed]:slide-out-to-top-full",
-      "data-[state=closed]:fade-out-50",
-      "data-[state=open]:animate-in",
-      "data-[state=open]:slide-in-from-top-full"
-    ),
-    ...d,
-    children: /* @__PURE__ */ m("div", { className: "grid grid-cols-[auto_1fr] items-center gap-2 rounded-full bg-gray-0 h-9 pl-2 pr-3 border border-gray-200 shrink-0 text-gray-900", children: [
-      t === "success" ? /* @__PURE__ */ e(f, {}) : /* @__PURE__ */ e(c, {}),
-      /* @__PURE__ */ e("div", { className: "flex flex-1 items-center", children: /* @__PURE__ */ e(u, { variant: "subtitle", level: 3, children: a }) })
-    ] })
-  }
-));
-v.displayName = i.displayName;
+ToastViewport.displayName = Viewport.displayName;
+const Toast = React.forwardRef(({ className, title, variant, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Root2,
+    {
+      ref,
+      className: cn(
+        "group pointer-events-auto relative flex w-full items-center justify-center",
+        "transition-all",
+        "data-[swipe=cancel]:translate-x-0",
+        "data-[swipe=end]:animate-out",
+        "data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)]",
+        "data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]",
+        "data-[swipe=move]:transition-none",
+        "data-[state=closed]:animate-out",
+        "data-[state=closed]:slide-out-to-top-full",
+        "data-[state=closed]:fade-out-50",
+        "data-[state=open]:animate-in",
+        "data-[state=open]:slide-in-from-top-full"
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_1fr] items-center gap-2 rounded-full bg-gray-0 h-9 pl-2 pr-3 border border-gray-200 shrink-0 text-gray-900", children: [
+        variant === "success" ? /* @__PURE__ */ jsx(Success, {}) : /* @__PURE__ */ jsx(Fail, {}),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center", children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle", level: 3, children: title }) })
+      ] })
+    }
+  );
+});
+Toast.displayName = Root2.displayName;
 export {
-  v as Toast,
-  b as ToastProvider,
-  x as ToastViewport
+  Toast,
+  ToastProvider,
+  ToastViewport
 };

package/dist/components/Toast/Toaster.d.ts

@@ -1,3 +1,7 @@
-export declare function Toaster({ duration }: {
+declare function Toaster({ duration }: {
     duration?: number;
 }): import("react/jsx-runtime").JSX.Element;
+declare namespace Toaster {
+    var displayName: string;
+}
+export { Toaster };

package/dist/components/Toast/Toaster.js

@@ -1,14 +1,15 @@
 "use client";
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { ToastProvider as a, Toast as m, ToastViewport as n } from "./Toast.js";
-import { useToast as p } from "./use-toast.js";
-function u({ duration: t }) {
-  const { toasts: r } = p();
-  return /* @__PURE__ */ i(a, { duration: t, children: [
-    r.map(({ id: s, ...e }) => /* @__PURE__ */ o(m, { ...e }, s)),
-    /* @__PURE__ */ o(n, {})
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ToastProvider, Toast, ToastViewport } from "./Toast.js";
+import { useToast } from "./use-toast.js";
+function Toaster({ duration }) {
+  const { toasts } = useToast();
+  return /* @__PURE__ */ jsxs(ToastProvider, { duration, children: [
+    toasts.map(({ id, ...props }) => /* @__PURE__ */ jsx(Toast, { ...props }, id)),
+    /* @__PURE__ */ jsx(ToastViewport, {})
   ] });
 }
+Toaster.displayName = "Toaster";
 export {
-  u as Toaster
+  Toaster
 };

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

@@ -1,3 +1,3 @@
-export * from './Toast';
-export * from './Toaster';
-export * from './use-toast';
+export { Toast } from './Toast';
+export { Toaster } from './Toaster';
+export { useToast } from './use-toast';

package/dist/components/Toast/use-toast.d.ts

@@ -34,16 +34,8 @@ declare const toast: ({ ...props }: Toast) => {
 };
 declare function useToast(): {
     toast: {
-        success: (props: Omit<Toast, "variant">) => {
-            id: string;
-            dismiss: () => void;
-            update: (props: ToasterToast) => void;
-        };
-        error: (props: Omit<Toast, "variant">) => {
-            id: string;
-            dismiss: () => void;
-            update: (props: ToasterToast) => void;
-        };
+        success: (props: Omit<Toast, "variant">) => void;
+        error: (props: Omit<Toast, "variant">) => void;
     };
     dismiss: (toastId?: string) => void;
     toasts: ToasterToast[];

package/dist/components/Toast/use-toast.js

@@ -1,101 +1,133 @@
 "use client";
-import { useState as d, useEffect as p } from "react";
-const A = 1, f = 1e6;
-let T = 0;
-function O() {
-  return T = (T + 1) % Number.MAX_SAFE_INTEGER, T.toString();
+import haptics from "../../lib/haptics.js";
+import { useState, useEffect } from "react";
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1e6;
+let count = 0;
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
 }
-const a = /* @__PURE__ */ new Map(), c = (t) => {
-  if (a.has(t))
+const toastTimeouts = /* @__PURE__ */ new Map();
+const addToRemoveQueue = (toastId) => {
+  if (toastTimeouts.has(toastId)) {
     return;
-  const e = setTimeout(() => {
-    a.delete(t), r({
+  }
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
       type: "REMOVE_TOAST",
-      toastId: t
+      toastId
     });
-  }, f);
-  a.set(t, e);
-}, E = (t, e) => {
-  switch (e.type) {
+  }, TOAST_REMOVE_DELAY);
+  toastTimeouts.set(toastId, timeout);
+};
+const reducer = (state, action) => {
+  switch (action.type) {
     case "ADD_TOAST":
       return {
-        ...t,
-        toasts: [e.toast, ...t.toasts].slice(0, A)
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
       };
     case "UPDATE_TOAST":
       return {
-        ...t,
-        toasts: t.toasts.map(
-          (s) => s.id === e.toast.id ? { ...s, ...e.toast } : s
+        ...state,
+        toasts: state.toasts.map(
+          (t) => t.id === action.toast.id ? { ...t, ...action.toast } : t
         )
       };
     case "DISMISS_TOAST": {
-      const { toastId: s } = e;
-      return s ? c(s) : t.toasts.forEach((o) => {
-        c(o.id);
-      }), {
-        ...t,
-        toasts: t.toasts.map(
-          (o) => o.id === s || s === void 0 ? {
-            ...o,
-            open: !1
-          } : o
+      const { toastId } = action;
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast2) => {
+          addToRemoveQueue(toast2.id);
+        });
+      }
+      return {
+        ...state,
+        toasts: state.toasts.map(
+          (t) => t.id === toastId || toastId === void 0 ? {
+            ...t,
+            open: false
+          } : t
         )
       };
     }
     case "REMOVE_TOAST":
-      return e.toastId === void 0 ? {
-        ...t,
-        toasts: []
-      } : {
-        ...t,
-        toasts: t.toasts.filter((s) => s.id !== e.toastId)
+      if (action.toastId === void 0) {
+        return {
+          ...state,
+          toasts: []
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId)
       };
   }
-}, n = [];
-let i = { toasts: [] };
-function r(t) {
-  i = E(i, t), n.forEach((e) => {
-    e(i);
+};
+const listeners = [];
+let memoryState = { toasts: [] };
+function dispatch(action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
   });
 }
-const S = ({ ...t }) => {
-  const e = O(), s = (u) => r({
+const toast = ({ ...props }) => {
+  const id = genId();
+  const update = (props2) => dispatch({
     type: "UPDATE_TOAST",
-    toast: { ...u, id: e }
-  }), o = () => r({ type: "DISMISS_TOAST", toastId: e });
-  return r({
+    toast: { ...props2, id }
+  });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+  dispatch({
     type: "ADD_TOAST",
     toast: {
-      ...t,
-      id: e,
-      open: !0,
-      onOpenChange: (u) => {
-        u || o();
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
       }
     }
-  }), {
-    id: e,
-    dismiss: o,
-    update: s
+  });
+  return {
+    id,
+    dismiss,
+    update
   };
 };
-function m() {
-  const [t, e] = d(i);
-  return p(() => (n.push(e), () => {
-    const s = n.indexOf(e);
-    s > -1 && n.splice(s, 1);
-  }), [t]), {
-    ...t,
+function useToast() {
+  const [state, setState] = useState(memoryState);
+  useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+  return {
+    ...state,
     toast: {
-      success: (s) => S({ ...s, variant: "success" }),
-      error: (s) => S({ ...s, variant: "error" })
+      success: (props) => {
+        toast({ ...props, variant: "success" });
+        haptics.notification("success");
+      },
+      error: (props) => {
+        toast({ ...props, variant: "error" });
+        haptics.notification("error");
+      }
     },
-    dismiss: (s) => r({ type: "DISMISS_TOAST", toastId: s })
+    dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
   };
 }
 export {
-  E as reducer,
-  S as toast,
-  m as useToast
+  reducer,
+  toast,
+  useToast
 };