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

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,22 @@
+import { BottomBarProps } from '../BottomBar';
+import { AlertDialogCloseProps, AlertDialogContentProps, AlertDialogDescriptionProps, AlertDialogHeaderProps, AlertDialogProps, AlertDialogTitleProps, AlertDialogTriggerProps } from './types';
+import * as React from "react";
+declare const AlertDialog: {
+    ({ dismissible, modal, ...props }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: typeof import('vaul').Portal;
+declare const AlertDialogClose: React.ForwardRefExoticComponent<AlertDialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: {
+    ({ icon, children, ...props }: AlertDialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogFooter: {
+    (props: BottomBarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export { AlertDialog, AlertDialogPortal, AlertDialogTrigger, AlertDialogClose, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, };

package/dist/components/AlertDialog/AlertDialog.js

@@ -2,50 +2,48 @@
 import { jsx as r, jsxs as n } from "react/jsx-runtime";
 import { cn as s } from "../../lib/utils.js";
 import * as i from "react";
-import { Drawer as t } from "../../node_modules/.pnpm/vaul@1.1.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18.3.18_react-dom@18.3._7iqkcrcg5qjc3n2ixm6rnrnx3e/node_modules/vaul/dist/index.js";
-import { BottomBar as g } from "../BottomBar/BottomBar.js";
-import { Button as f } from "../Button/Button.js";
-import { XMark as p } from "../Icons/XMark.js";
+import { Drawer as o } from "../../node_modules/.pnpm/vaul@1.1.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18.3.18_react-dom@18.3._7iqkcrcg5qjc3n2ixm6rnrnx3e/node_modules/vaul/dist/index.js";
+import { BottomBar as c } from "../BottomBar/BottomBar.js";
+import { Button as g } from "../Button/Button.js";
+import { XMark as f } from "../Icons/XMark.js";
 import { Typography as m } from "../Typography/Typography.js";
-import { AlertDialogContext as D, useAlertDialog as A } from "./use-alert-dialog.js";
-const y = ({ dismissible: e = !0, modal: l = !0, ...a }) => /* @__PURE__ */ r(D.Provider, { value: { dismissible: e }, children: /* @__PURE__ */ r(
-  t.Root,
+import { AlertDialogContext as p, useAlertDialog as D } from "./use-alert-dialog.js";
+const A = ({ dismissible: e = !0, modal: l = !0, ...t }) => /* @__PURE__ */ r(p.Provider, { value: { dismissible: e }, children: /* @__PURE__ */ r(
+  o.Root,
   {
     shouldScaleBackground: !1,
     dismissible: e,
     modal: l,
-    ...a
+    ...t
   }
 ) });
-y.displayName = "AlertDialog";
-const h = i.forwardRef((e, l) => /* @__PURE__ */ r(t.Trigger, { ref: l, ...e }));
+A.displayName = "AlertDialog";
+const h = i.forwardRef((e, l) => /* @__PURE__ */ r(o.Trigger, { ref: l, ...e }));
 h.displayName = "AlertDialogTrigger";
-const N = t.Portal, d = i.forwardRef((e, l) => /* @__PURE__ */ r(t.Close, { ref: l, ...e }));
+const u = o.Portal, d = i.forwardRef((e, l) => /* @__PURE__ */ r(o.Close, { ref: l, ...e }));
 d.displayName = "AlertDialogClose";
-const c = i.forwardRef(({ className: e, ...l }, a) => /* @__PURE__ */ r(
-  t.Overlay,
-  {
-    ref: a,
-    className: s("fixed inset-0 z-50 bg-gray-900/40", e),
-    ...l
-  }
-));
-c.displayName = "AlertDialogOverlay";
-const u = i.forwardRef(({ className: e, children: l, ...a }, o) => /* @__PURE__ */ n(N, { children: [
-  /* @__PURE__ */ r(c, {}),
+const y = i.forwardRef(({ className: e, children: l, ...t }, a) => /* @__PURE__ */ n(u, { children: [
   /* @__PURE__ */ r(
-    t.Content,
+    o.Overlay,
     {
-      ref: o,
+      ref: a,
+      className: s("fixed inset-0 z-50 bg-gray-900/40", e),
+      ...t
+    }
+  ),
+  /* @__PURE__ */ r(
+    o.Content,
+    {
+      ref: a,
       className: s("fixed inset-x-0 bottom-0 z-50 mt-24 h-auto", e),
-      ...a,
+      ...t,
       children: /* @__PURE__ */ r("div", { className: "flex flex-col rounded-[1.75rem] bg-gray-0 m-3 p-8", children: l })
     }
   )
 ] }));
-u.displayName = "AlertDialogContent";
-const x = ({ icon: e, children: l, ...a }) => {
-  const { dismissible: o } = A();
+y.displayName = "AlertDialogContent";
+const N = ({ icon: e, children: l, ...t }) => {
+  const { dismissible: a } = D();
   return /* @__PURE__ */ n(
     "div",
     {
@@ -53,42 +51,41 @@ const x = ({ icon: e, children: l, ...a }) => {
         "flex justify-between gap-4 mb-4 w-full",
         e ? "items-start" : "items-center"
       ),
-      ...a,
+      ...t,
       children: [
         /* @__PURE__ */ n("div", { className: "flex flex-col gap-6", children: [
           e,
           l
         ] }),
-        o && /* @__PURE__ */ r("div", { className: "shrink-0", children: /* @__PURE__ */ r(d, { asChild: !0, children: /* @__PURE__ */ r(f, { variant: "tertiary", size: "icon", children: /* @__PURE__ */ r(p, {}) }) }) })
+        a && /* @__PURE__ */ r("div", { className: "shrink-0", children: /* @__PURE__ */ r(d, { asChild: !0, children: /* @__PURE__ */ r(g, { variant: "tertiary", size: "icon", children: /* @__PURE__ */ r(f, {}) }) }) })
       ]
     }
   );
 };
-x.displayName = "AlertDialogHeader";
-const v = (e) => /* @__PURE__ */ r(g, { ...e });
-v.displayName = "AlertDialogFooter";
-const C = i.forwardRef(({ className: e, children: l, ...a }, o) => /* @__PURE__ */ r(t.Title, { ref: o, ...a, asChild: !0, children: /* @__PURE__ */ r(m, { variant: "heading", level: 2, children: l }) }));
-C.displayName = "AlertDialogTitle";
-const w = i.forwardRef(({ className: e, children: l, ...a }, o) => /* @__PURE__ */ r(
-  t.Description,
+N.displayName = "AlertDialogHeader";
+const x = (e) => /* @__PURE__ */ r(c, { ...e });
+x.displayName = "AlertDialogFooter";
+const v = i.forwardRef(({ className: e, children: l, ...t }, a) => /* @__PURE__ */ r(o.Title, { ref: a, ...t, asChild: !0, children: /* @__PURE__ */ r(m, { variant: "heading", level: 2, children: l }) }));
+v.displayName = "AlertDialogTitle";
+const C = i.forwardRef(({ className: e, children: l, ...t }, a) => /* @__PURE__ */ r(
+  o.Description,
   {
-    ref: o,
+    ref: a,
     className: s("text-gray-500 mb-8", e),
-    ...a,
+    ...t,
     asChild: !0,
     children: /* @__PURE__ */ r(m, { children: l })
   }
 ));
-w.displayName = "AlertDialogDescription";
+C.displayName = "AlertDialogDescription";
 export {
-  y as AlertDialog,
+  A as AlertDialog,
   d as AlertDialogClose,
-  u as AlertDialogContent,
-  w as AlertDialogDescription,
-  v as AlertDialogFooter,
-  x as AlertDialogHeader,
-  c as AlertDialogOverlay,
-  N as AlertDialogPortal,
-  C as AlertDialogTitle,
+  y as AlertDialogContent,
+  C as AlertDialogDescription,
+  x as AlertDialogFooter,
+  N as AlertDialogHeader,
+  u as AlertDialogPortal,
+  v as AlertDialogTitle,
   h as AlertDialogTrigger
 };

package/dist/components/AlertDialog/index.js

@@ -1,13 +1,12 @@
-import { AlertDialog as r, AlertDialogClose as o, AlertDialogContent as t, AlertDialogDescription as i, AlertDialogFooter as a, AlertDialogHeader as g, AlertDialogOverlay as D, AlertDialogPortal as A, AlertDialogTitle as n, AlertDialogTrigger as p } from "./AlertDialog.js";
+import { AlertDialog as o, AlertDialogClose as r, AlertDialogContent as t, AlertDialogDescription as i, AlertDialogFooter as a, AlertDialogHeader as g, AlertDialogPortal as D, AlertDialogTitle as A, AlertDialogTrigger as n } from "./AlertDialog.js";
 export {
-  r as AlertDialog,
-  o as AlertDialogClose,
+  o as AlertDialog,
+  r as AlertDialogClose,
   t as AlertDialogContent,
   i as AlertDialogDescription,
   a as AlertDialogFooter,
   g as AlertDialogHeader,
-  D as AlertDialogOverlay,
-  A as AlertDialogPortal,
-  n as AlertDialogTitle,
-  p as AlertDialogTrigger
+  D as AlertDialogPortal,
+  A as AlertDialogTitle,
+  n as AlertDialogTrigger
 };

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

@@ -6,7 +6,7 @@ declare const buttonVariants: (props?: ({
     stateful?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className">, VariantProps<typeof buttonVariants> {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     /**
      * The variant style to use
      * @default "primary"

package/dist/components/Button/Button.js

@@ -1,14 +1,14 @@
 "use client";
-import { jsxs as g, jsx as a } from "react/jsx-runtime";
-import { cn as b } from "../../lib/utils.js";
-import { Slot as d } 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 m } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+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 = m(
+const v = d(
   "flex items-center justify-center rounded-full gap-2 font-sans leading-[1.2] tracking-normal transition-colors",
   {
     variants: {
@@ -38,28 +38,29 @@ const v = m(
     }
   }
 ), x = p(
-  ({ variant: e, size: t = "lg", fullWidth: s, asChild: i, state: r, children: n, ...o }, l) => /* @__PURE__ */ g(
-    i ? d : "button",
+  ({ variant: s = "primary", size: t = "lg", fullWidth: i, asChild: n, state: a, children: l, ...e }, o) => /* @__PURE__ */ g(
+    n ? b : "button",
     {
-      ref: l,
-      className: b(
+      ref: o,
+      ...e,
+      className: m(
         v({
-          variant: e,
+          variant: s,
           size: t,
-          stateful: !!r,
-          fullWidth: s
+          stateful: !!a,
+          fullWidth: i
         }),
         u({
           variant: "label",
           level: t === "lg" ? 1 : 2
-        })
+        }),
+        e.className
       ),
-      ...o,
       children: [
-        !r && n,
-        r === "pending" && /* @__PURE__ */ a(y, { className: "absolute size-6" }),
-        r === "success" && /* @__PURE__ */ a(c, { className: "absolute size-6" }),
-        r === "failed" && /* @__PURE__ */ a(f, { className: "absolute size-6" })
+        !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" })
       ]
     }
   )

package/dist/index.js

@@ -1,103 +1,102 @@
-import { Button as a } from "./components/Button/Button.js";
-import { Checkbox as l } from "./components/Checkbox/Checkbox.js";
+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 g, ColorPickerItem as s } from "./components/ColorPicker/ColorPicker.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 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 c, iconVariants as w, inputVariants as F } from "./components/Input/Input.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 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 R } from "./components/RadioGroup/RadioGroupItem.js";
-import { Select as H } from "./components/Select/Select.js";
-import { SearchField as _ } from "./components/SearchField/SearchField.js";
-import { PhoneField as K } from "./components/PhoneField/PhoneField.js";
-import { getValidatedCountryCode as N } from "./components/PhoneField/utils.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 mr, typographyVariants as lr } from "./components/Typography/Typography.js";
-import { Drawer as fr, DrawerClose as xr, DrawerContent as gr, DrawerHeader as sr, DrawerTitle as nr, DrawerTrigger as dr } from "./components/Drawer/Drawer.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 Dr } from "./components/Progress/Progress.js";
 import "./components/TextArea/TextArea.js";
 import { WalletAddressField as Cr } from "./components/WalletAddressField/WalletAddressField.js";
-import { AlertDialog as cr, AlertDialogClose as wr, AlertDialogContent as Fr, AlertDialogDescription as Pr, AlertDialogFooter as yr, AlertDialogHeader as hr, AlertDialogOverlay as Br, AlertDialogPortal as Ir, AlertDialogTitle as Gr, AlertDialogTrigger as Sr } from "./components/AlertDialog/AlertDialog.js";
-import { BottomBar as kr } from "./components/BottomBar/BottomBar.js";
-import { BulletList as br } from "./components/BulletList/BulletList.js";
-import { BulletListItem as vr } from "./components/BulletListItem/BulletListItem.js";
+import { AlertDialog as wr, AlertDialogClose as Ar, AlertDialogContent as Fr, AlertDialogDescription as Pr, AlertDialogFooter as yr, AlertDialogHeader as hr, AlertDialogPortal as Br, AlertDialogTitle as Ir, 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 Rr } from "./components/BulletListItem/BulletListItem.js";
 import "./components/BulletPoint/BulletPoint.js";
-import { Marble as Or } from "./components/Marble/Marble.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 Wr, ToggleGroupRoot as jr } from "./components/ToggleGroup/ToggleGroup.js";
-import { default as Er } from "./tailwind/index.js";
+import { ToggleGroupItem as Or, ToggleGroupRoot as Wr } from "./components/ToggleGroup/ToggleGroup.js";
+import { default as qr } from "./tailwind/index.js";
 export {
-  cr as AlertDialog,
-  wr as AlertDialogClose,
+  wr as AlertDialog,
+  Ar as AlertDialogClose,
   Fr as AlertDialogContent,
   Pr as AlertDialogDescription,
   yr as AlertDialogFooter,
   hr as AlertDialogHeader,
-  Br as AlertDialogOverlay,
-  Ir as AlertDialogPortal,
-  Gr as AlertDialogTitle,
-  Sr as AlertDialogTrigger,
-  kr as BottomBar,
-  br as BulletList,
-  vr as BulletListItem,
-  a as Button,
-  l as Checkbox,
+  Br as AlertDialogPortal,
+  Ir as AlertDialogTitle,
+  Gr as AlertDialogTrigger,
+  Vr as BottomBar,
+  Lr as BulletList,
+  Rr as BulletListItem,
+  m as Button,
+  i as Checkbox,
   f as Chip,
-  g as ColorPickerGroup,
-  s as ColorPickerItem,
+  s as ColorPickerGroup,
+  g as ColorPickerItem,
   Mr as CountryDrawer,
   fr as Drawer,
   xr as DrawerClose,
-  gr as DrawerContent,
-  sr as DrawerHeader,
+  sr as DrawerContent,
+  gr as DrawerHeader,
   nr as DrawerTitle,
   dr as DrawerTrigger,
   d as Flag,
   r as Form,
-  c as Input,
+  w as Input,
   D as LazyFlag,
   y as ListItem,
-  Or as Marble,
+  _r as Marble,
   B as NumberPad,
   G as OTPField,
-  K as PhoneField,
+  M as PhoneField,
   V as Pill,
   Dr as Progress,
   L as RadioGroup,
   R as RadioGroupItem,
-  _ as SearchField,
-  H as Select,
+  z as SearchField,
+  _ as Select,
   j as Spinner,
   E as Switch,
   X as Toast,
   Y as ToastProvider,
   Z as ToastViewport,
   rr as Toaster,
-  Wr as ToggleGroupItem,
-  jr as ToggleGroupRoot,
+  Or as ToggleGroupItem,
+  Wr as ToggleGroupRoot,
   Q as Token,
   zr as TopBar,
-  mr as Typography,
+  ar as Typography,
   Cr as WalletAddressField,
-  N as getValidatedCountryCode,
-  w as iconVariants,
+  O as getValidatedCountryCode,
+  A as iconVariants,
   F as inputVariants,
   C as isSupportedCountryCode,
   er as reducer,
   tr as toast,
-  lr as typographyVariants,
-  Er as uiKitTailwindPlugin,
+  ir as typographyVariants,
+  qr as uiKitTailwindPlugin,
   pr as useToast
 };

package/package.json

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