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

package/dist/components/Button/Button.d.ts

@@ -3,7 +3,6 @@ import { ButtonHTMLAttributes } from 'react';
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | null | undefined;
     size?: "sm" | "lg" | "icon" | null | undefined;
-    stateful?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -17,11 +16,6 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Va
      * @default "lg"
      */
     size?: "sm" | "lg" | "icon";
-    /**
-     * The state of the button
-     * @default undefined
-     */
-    state?: "pending" | "success" | "failed";
     /**
      * Whether the button should take up the full width of its container
      * @default false

package/dist/components/Button/Button.js

@@ -1,14 +1,11 @@
 "use client";
-import { jsxs as g, jsx as r } from "react/jsx-runtime";
-import { cn as m } from "../../lib/utils.js";
-import { Slot as b } 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 { cva as d } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { forwardRef as p } from "react";
-import { Fail as f } from "../Icons/Fail.js";
-import { Success as c } from "../Icons/Success.js";
-import { Spinner as y } from "../Spinner/Spinner.js";
-import { typographyVariants as u } from "../Typography/Typography.js";
-const v = d(
+import { jsx as l } from "react/jsx-runtime";
+import { cn as n } from "../../lib/utils.js";
+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 { cva as y } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef as d } from "react";
+import { typographyVariants as m } from "../Typography/Typography.js";
+const b = y(
   "flex items-center justify-center rounded-full gap-2 font-sans leading-[1.2] tracking-normal transition-colors",
   {
     variants: {
@@ -22,10 +19,6 @@ const v = d(
         lg: "h-14 min-w-14 px-4",
         icon: "size-10"
       },
-      stateful: {
-        true: "border-none bg-transparent fill-transparent text-transparent hover:bg-transparent active:bg-transparent disabled:bg-transparent disabled:text-transparent",
-        false: ""
-      },
       fullWidth: {
         true: "w-full",
         false: ""
@@ -37,36 +30,30 @@ const v = d(
       fullWidth: !1
     }
   }
-), x = p(
-  ({ variant: s = "primary", size: t = "lg", fullWidth: i, asChild: n, state: a, children: l, ...e }, o) => /* @__PURE__ */ g(
-    n ? b : "button",
+), f = d(
+  ({ variant: t = "primary", size: r = "lg", fullWidth: e, asChild: i, children: o, ...a }, g) => /* @__PURE__ */ l(
+    i ? s : "button",
     {
-      ref: o,
-      ...e,
-      className: m(
-        v({
-          variant: s,
-          size: t,
-          stateful: !!a,
-          fullWidth: i
+      ref: g,
+      ...a,
+      className: n(
+        b({
+          variant: t,
+          size: r,
+          fullWidth: e
         }),
-        u({
+        m({
           variant: "label",
-          level: t === "lg" ? 1 : 2
+          level: r === "lg" ? 1 : 2
         }),
-        e.className
+        a.className
       ),
-      children: [
-        !a && l,
-        a === "pending" && /* @__PURE__ */ r(y, { className: "absolute size-6" }),
-        a === "success" && /* @__PURE__ */ r(c, { className: "absolute size-6" }),
-        a === "failed" && /* @__PURE__ */ r(f, { className: "absolute size-6" })
-      ]
+      children: o
     }
   )
 );
-x.displayName = "Button";
+f.displayName = "Button";
 export {
-  x as Button,
-  x as default
+  f as Button,
+  f as default
 };

package/dist/components/Chip/Chip.d.ts

@@ -20,7 +20,7 @@ export interface ChipProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
 export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & VariantProps<(props?: ({
-    variant?: "error" | "success" | "default" | "warning" | "important" | null | undefined;
+    variant?: "error" | "default" | "success" | "warning" | "important" | null | undefined;
     isIcon?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & import('react').RefAttributes<HTMLDivElement>>;
 export default Chip;

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

@@ -0,0 +1,20 @@
+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 default LiveFeedback;

package/dist/components/LiveFeedback/LiveFeedback.js

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

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

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

package/dist/components/LiveFeedback/index.js

@@ -0,0 +1,2 @@
+import "react/jsx-runtime";
+import "../Typography/Typography.js";

package/dist/components/Toast/Toast.js

@@ -11,7 +11,7 @@ const b = p, x = l.forwardRef(({ className: r, ...a }, t) => /* @__PURE__ */ e(
   {
     ref: t,
     className: s(
-      "fixed top-0 z-[100] flex max-h-screen w-full p-4 right-0 left-0 flex-col",
+      "fixed top-0 z-[100] flex max-h-screen w-full p-6 right-0 left-0 flex-col",
       r
     ),
     ...a

package/dist/index.d.ts

@@ -33,4 +33,5 @@ export * from './components/TopBar';
 export * from './components/CountryDrawer';
 export * from './components/ToggleGroup';
 export * from './components/Tabs';
+export * from './components/LiveFeedback';
 export { default as uiKitTailwindPlugin } from './tailwind';

package/dist/index.js

@@ -1,105 +1,106 @@
-import { Button as m } from "./components/Button/Button.js";
-import { Checkbox as i } from "./components/Checkbox/Checkbox.js";
-import { Chip as f } from "./components/Chip/Chip.js";
-import { ColorPickerGroup as s, ColorPickerItem as g } from "./components/ColorPicker/ColorPicker.js";
-import { Flag as d } from "./components/Flag/Flag.js";
-import { LazyFlag as T } from "./components/Flag/LazyFlag.js";
-import { isSupportedCountryCode as C } from "./components/Flag/utils.js";
+import { Button as a } from "./components/Button/Button.js";
+import { Checkbox as l } from "./components/Checkbox/Checkbox.js";
+import { Chip as x } from "./components/Chip/Chip.js";
+import { ColorPickerGroup as g, ColorPickerItem as n } from "./components/ColorPicker/ColorPicker.js";
+import { Flag as u } from "./components/Flag/Flag.js";
+import { LazyFlag as D } from "./components/Flag/LazyFlag.js";
+import { isSupportedCountryCode as c } from "./components/Flag/utils.js";
 import * as r from "./components/Form/Form.js";
-import { Input as w, iconVariants as A, inputVariants as F } from "./components/Input/Input.js";
-import { ListItem as y } from "./components/ListItem/ListItem.js";
-import { NumberPad as I } from "./components/NumberPad/NumberPad.js";
-import { OTPField as b } from "./components/OTPField/OTPField.js";
-import { Pill as S } from "./components/Pill/Pill.js";
-import { RadioGroup as k } from "./components/RadioGroup/RadioGroup.js";
-import { RadioGroupItem as R } from "./components/RadioGroup/RadioGroupItem.js";
-import { Select as _ } from "./components/Select/Select.js";
-import { SearchField as z } from "./components/SearchField/SearchField.js";
-import { PhoneField as M } from "./components/PhoneField/PhoneField.js";
-import { getValidatedCountryCode as O } from "./components/PhoneField/utils.js";
-import { Spinner as j } from "./components/Spinner/Spinner.js";
-import { Switch as E } from "./components/Switch/Switch.js";
-import { Token as Q } from "./components/Token/Token.js";
-import { Toast as X, ToastProvider as Y, ToastViewport as Z } from "./components/Toast/Toast.js";
-import { Toaster as rr } from "./components/Toast/Toaster.js";
-import { reducer as er, toast as tr, useToast as pr } from "./components/Toast/use-toast.js";
-import { Typography as ar, typographyVariants as ir } from "./components/Typography/Typography.js";
-import { Drawer as fr, DrawerClose as xr, DrawerContent as sr, DrawerHeader as gr, DrawerTitle as nr, DrawerTrigger as dr } from "./components/Drawer/Drawer.js";
-import { Progress as Tr } from "./components/Progress/Progress.js";
+import { Input as A, iconVariants as F, inputVariants as P } from "./components/Input/Input.js";
+import { ListItem as h } from "./components/ListItem/ListItem.js";
+import { NumberPad as B } from "./components/NumberPad/NumberPad.js";
+import { OTPField as G } from "./components/OTPField/OTPField.js";
+import { Pill as V } from "./components/Pill/Pill.js";
+import { RadioGroup as L } from "./components/RadioGroup/RadioGroup.js";
+import { RadioGroupItem as H } from "./components/RadioGroup/RadioGroupItem.js";
+import { Select as v } from "./components/Select/Select.js";
+import { SearchField as K } from "./components/SearchField/SearchField.js";
+import { PhoneField as N } from "./components/PhoneField/PhoneField.js";
+import { getValidatedCountryCode as W } from "./components/PhoneField/utils.js";
+import { Spinner as q } from "./components/Spinner/Spinner.js";
+import { Switch as J } from "./components/Switch/Switch.js";
+import { Token as U } from "./components/Token/Token.js";
+import { Toast as Y, ToastProvider as Z, ToastViewport as $ } from "./components/Toast/Toast.js";
+import { Toaster as or } from "./components/Toast/Toaster.js";
+import { reducer as tr, toast as pr, useToast as mr } from "./components/Toast/use-toast.js";
+import { Typography as ir, typographyVariants as lr } from "./components/Typography/Typography.js";
+import { Drawer as xr, DrawerClose as sr, DrawerContent as gr, DrawerHeader as nr, DrawerTitle as dr, DrawerTrigger as ur } from "./components/Drawer/Drawer.js";
+import { Progress as Dr } from "./components/Progress/Progress.js";
 import "./components/TextArea/TextArea.js";
-import { WalletAddressField as Cr } from "./components/WalletAddressField/WalletAddressField.js";
-import { AlertDialog as wr, AlertDialogClose as Ar, AlertDialogContent as Fr, AlertDialogDescription as Pr, AlertDialogFooter as yr, AlertDialogHeader as hr, AlertDialogPortal as Ir, AlertDialogTitle as Br, AlertDialogTrigger as br } from "./components/AlertDialog/AlertDialog.js";
-import { BottomBar as Sr } from "./components/BottomBar/BottomBar.js";
-import { BulletList as kr } from "./components/BulletList/BulletList.js";
-import { BulletListItem as Rr } from "./components/BulletListItem/BulletListItem.js";
+import { WalletAddressField as cr } from "./components/WalletAddressField/WalletAddressField.js";
+import { AlertDialog as Ar, AlertDialogClose as Fr, AlertDialogContent as Pr, AlertDialogDescription as yr, AlertDialogFooter as hr, AlertDialogHeader as Ir, AlertDialogPortal as Br, AlertDialogTitle as br, AlertDialogTrigger as Gr } from "./components/AlertDialog/AlertDialog.js";
+import { BottomBar as Vr } from "./components/BottomBar/BottomBar.js";
+import { BulletList as Lr } from "./components/BulletList/BulletList.js";
+import { BulletListItem as Hr } from "./components/BulletListItem/BulletListItem.js";
 import "./components/BulletPoint/BulletPoint.js";
-import { Marble as _r } from "./components/Marble/Marble.js";
-import { TopBar as zr } from "./components/TopBar/TopBar.js";
-import { CountryDrawer as Mr } from "./components/CountryDrawer/CountryDrawer.js";
-import { ToggleGroupItem as Or, ToggleGroupRoot as Wr } from "./components/ToggleGroup/ToggleGroup.js";
-import { TabItem as qr, Tabs as Er } from "./components/Tabs/Tabs.js";
-import { default as Qr } from "./tailwind/index.js";
+import { Marble as vr } from "./components/Marble/Marble.js";
+import { TopBar as Kr } from "./components/TopBar/TopBar.js";
+import { CountryDrawer as Nr } from "./components/CountryDrawer/CountryDrawer.js";
+import { ToggleGroupItem as Wr, ToggleGroupRoot as jr } from "./components/ToggleGroup/ToggleGroup.js";
+import { TabItem as Er, Tabs as Jr } from "./components/Tabs/Tabs.js";
+import "react/jsx-runtime";
+import { default as Ur } from "./tailwind/index.js";
 export {
-  wr as AlertDialog,
-  Ar as AlertDialogClose,
-  Fr as AlertDialogContent,
-  Pr as AlertDialogDescription,
-  yr as AlertDialogFooter,
-  hr as AlertDialogHeader,
-  Ir as AlertDialogPortal,
-  Br as AlertDialogTitle,
-  br as AlertDialogTrigger,
-  Sr as BottomBar,
-  kr as BulletList,
-  Rr as BulletListItem,
-  m as Button,
-  i as Checkbox,
-  f as Chip,
-  s as ColorPickerGroup,
-  g as ColorPickerItem,
-  Mr as CountryDrawer,
-  fr as Drawer,
-  xr as DrawerClose,
-  sr as DrawerContent,
-  gr as DrawerHeader,
-  nr as DrawerTitle,
-  dr as DrawerTrigger,
-  d as Flag,
+  Ar as AlertDialog,
+  Fr as AlertDialogClose,
+  Pr as AlertDialogContent,
+  yr as AlertDialogDescription,
+  hr as AlertDialogFooter,
+  Ir as AlertDialogHeader,
+  Br as AlertDialogPortal,
+  br as AlertDialogTitle,
+  Gr as AlertDialogTrigger,
+  Vr as BottomBar,
+  Lr as BulletList,
+  Hr as BulletListItem,
+  a as Button,
+  l as Checkbox,
+  x as Chip,
+  g as ColorPickerGroup,
+  n as ColorPickerItem,
+  Nr as CountryDrawer,
+  xr as Drawer,
+  sr as DrawerClose,
+  gr as DrawerContent,
+  nr as DrawerHeader,
+  dr as DrawerTitle,
+  ur as DrawerTrigger,
+  u as Flag,
   r as Form,
-  w as Input,
-  T as LazyFlag,
-  y as ListItem,
-  _r as Marble,
-  I as NumberPad,
-  b as OTPField,
-  M as PhoneField,
-  S as Pill,
-  Tr as Progress,
-  k as RadioGroup,
-  R as RadioGroupItem,
-  z as SearchField,
-  _ as Select,
-  j as Spinner,
-  E as Switch,
-  qr as TabItem,
-  Er as Tabs,
-  X as Toast,
-  Y as ToastProvider,
-  Z as ToastViewport,
-  rr as Toaster,
-  Or as ToggleGroupItem,
-  Wr as ToggleGroupRoot,
-  Q as Token,
-  zr as TopBar,
-  ar as Typography,
-  Cr as WalletAddressField,
-  O as getValidatedCountryCode,
-  A as iconVariants,
-  F as inputVariants,
-  C as isSupportedCountryCode,
-  er as reducer,
-  tr as toast,
-  ir as typographyVariants,
-  Qr as uiKitTailwindPlugin,
-  pr as useToast
+  A as Input,
+  D as LazyFlag,
+  h as ListItem,
+  vr as Marble,
+  B as NumberPad,
+  G as OTPField,
+  N as PhoneField,
+  V as Pill,
+  Dr as Progress,
+  L as RadioGroup,
+  H as RadioGroupItem,
+  K as SearchField,
+  v as Select,
+  q as Spinner,
+  J as Switch,
+  Er as TabItem,
+  Jr as Tabs,
+  Y as Toast,
+  Z as ToastProvider,
+  $ as ToastViewport,
+  or as Toaster,
+  Wr as ToggleGroupItem,
+  jr as ToggleGroupRoot,
+  U as Token,
+  Kr as TopBar,
+  ir as Typography,
+  cr as WalletAddressField,
+  W as getValidatedCountryCode,
+  F as iconVariants,
+  P as inputVariants,
+  c as isSupportedCountryCode,
+  tr as reducer,
+  pr as toast,
+  lr as typographyVariants,
+  Ur as uiKitTailwindPlugin,
+  mr as useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worldcoin/mini-apps-ui-kit-react",
-  "version": "1.0.0-canary.8",
+  "version": "1.0.0-canary.9",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",