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

package/dist/components/PhoneField/PhoneField.js

@@ -1,17 +1,17 @@
 "use client";
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as B, useMemo as R, useImperativeHandle as W } from "react";
-import { usePhoneInput as _ } from "../../node_modules/.pnpm/react-international-phone@4.4.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
-import { CountryDrawer as $ } from "../CountryDrawer/CountryDrawer.js";
-import { Input as b } from "../Input/Input.js";
-import j from "./CountrySelectorButton.js";
-import { DIAL_CODE_PREFIX as q, startAdornmentWidthByDialCodeLength as H } from "./constants.js";
-import { getCountryDataListByCodes as M, getValidatedCountryCode as d } from "./utils.js";
-const N = B(
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as x, useImperativeHandle as B } from "react";
+import { usePhoneInput as R } from "../../node_modules/.pnpm/react-international-phone@4.4.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
+import { CountryDrawer as W } from "../CountryDrawer/CountryDrawer.js";
+import { Input as _ } from "../Input/Input.js";
+import $ from "./CountrySelectorButton.js";
+import { DIAL_CODE_PREFIX as b, startAdornmentWidthByDialCodeLength as j } from "./constants.js";
+import { getCountryDataListByCodes as q, getValidatedCountryCode as d } from "./utils.js";
+const H = x(
   ({
     value: m,
     onChange: o,
-    countries: r,
+    countries: i,
     label: f = "Phone",
     defaultCountryCode: t = "US",
     disableDialCodePrefill: c = !0,
@@ -24,16 +24,16 @@ const N = B(
     inputMode: A = "tel",
     autoComplete: w = "tel",
     autoCapitalize: P = "off",
-    autoCorrect: L = "off",
-    ...v
-  }, E) => {
-    const I = R(() => M(r), [r]), { inputValue: S, country: n, inputRef: a, handlePhoneValueChange: g, setCountry: F } = _(
+    autoCorrect: v = "off",
+    ...E
+  }, I) => {
+    const { inputValue: L, country: r, inputRef: n, handlePhoneValueChange: S, setCountry: g } = R(
       {
         defaultCountry: t.toLowerCase(),
         disableDialCodePrefill: c,
         disableDialCodeAndPrefix: !0,
         value: m,
-        countries: I,
+        countries: q(i),
         onChange: (e) => {
           o == null || o(
             e.phone,
@@ -41,52 +41,52 @@ const N = B(
           );
         }
       }
-    ), s = d(n.iso2, t), V = `${q}${n.dialCode}`, x = H[n.dialCode.length];
-    return W(E, () => a.current), /* @__PURE__ */ i(
-      b,
+    ), u = d(r.iso2, t), F = `${b}${r.dialCode}`, V = j[r.dialCode.length];
+    return B(I, () => n.current), /* @__PURE__ */ a(
+      _,
       {
-        ...v,
-        ref: a,
+        ...E,
+        ref: n,
         type: D,
         inputMode: A,
         autoComplete: w,
         autoCapitalize: P,
-        autoCorrect: L,
-        value: S,
-        onChange: g,
+        autoCorrect: v,
+        value: L,
+        onChange: S,
         label: f,
         disabled: l,
         error: h,
         isValid: p,
         endAdornment: C,
         endAdornmentWidth: y,
-        startAdornmentWidth: x,
+        startAdornmentWidth: V,
         showStartDivider: !0,
-        startAdornment: /* @__PURE__ */ i(
-          $,
+        startAdornment: /* @__PURE__ */ a(
+          W,
           {
-            value: s,
+            value: u,
             defaultValue: t,
-            countries: r,
+            countries: i,
             onAnimationEnd: (e) => {
               e || requestAnimationFrame(() => {
-                var u;
-                (u = a.current) == null || u.focus();
+                var s;
+                (s = n.current) == null || s.focus();
               });
             },
             onChange: (e) => {
-              F(e.toLowerCase());
+              g(e.toLowerCase());
             },
             disabled: l,
-            children: /* @__PURE__ */ i(j, { value: s, label: V })
+            children: /* @__PURE__ */ a($, { value: u, label: F })
           }
         )
       }
     );
   }
 );
-N.displayName = "PhoneField";
+H.displayName = "PhoneField";
 export {
-  N as PhoneField,
-  N as default
+  H as PhoneField,
+  H as default
 };

package/dist/components/Tabs/Tabs.js

@@ -1,50 +1,47 @@
 "use client";
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
+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 c, 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 n from "react";
-import { cn as o } from "../../lib/utils.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 p = n.forwardRef(
-  ({ children: r, ...a }, e) => /* @__PURE__ */ t(
-    c,
+const u = o.forwardRef(
+  ({ children: t, ...r }, e) => /* @__PURE__ */ a(
+    p,
     {
       ref: e,
       type: "single",
-      className: "flex w-full justify-between px-5 items-center",
-      ...a,
-      children: /* @__PURE__ */ t("div", { className: "flex w-full", children: r })
+      className: "grid w-full px-5 items-center auto-cols-fr",
+      style: {
+        gridTemplateColumns: `repeat(${o.Children.count(t)}, 1fr)`
+      },
+      ...r,
+      children: t
     }
   )
 );
-p.displayName = "Tabs";
-const x = n.forwardRef(
-  ({ icon: r, label: a, activeIcon: e, ...l }, i) => /* @__PURE__ */ m(
+u.displayName = "Tabs";
+const x = o.forwardRef(
+  ({ icon: t, label: r, altIcon: e, className: i, ...l }, m) => /* @__PURE__ */ c(
     f,
     {
-      ref: i,
-      className: o(
-        "flex-1 flex flex-col items-center gap-1 relative min-w-0 group",
+      ref: m,
+      className: (n(
+        "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,
       children: [
-        /* @__PURE__ */ t(
-          s,
-          {
-            className: o("h-[1.625rem] shrink-0", e && "group-data-[state=on]:hidden"),
-            children: r
-          }
-        ),
-        e && /* @__PURE__ */ t(s, { className: "h-[1.625rem] shrink-0 hidden group-data-[state=on]:block", children: e }),
-        a && /* @__PURE__ */ t(
+        /* @__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,
           {
             as: "span",
             variant: "subtitle",
             className: "text-2xs truncate w-full text-center px-1 leading-none",
-            children: a
+            children: r
           }
         )
       ]
@@ -54,5 +51,5 @@ const x = n.forwardRef(
 x.displayName = "TabItem";
 export {
   x as TabItem,
-  p as Tabs
+  u as Tabs
 };

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

@@ -28,7 +28,7 @@ export interface TabsProps extends Omit<BaseToggleGroupProps, "type" | "size" |
      */
     children?: ReactNode;
 }
-export interface TabItemProps extends Omit<BaseToggleGroupItemProps, "className" | "children"> {
+export interface TabItemProps extends Omit<BaseToggleGroupItemProps, "children"> {
     /**
      * The icon to display
      */
@@ -36,7 +36,7 @@ export interface TabItemProps extends Omit<BaseToggleGroupItemProps, "className"
     /**
      * The icon to display when the tab item is active
      */
-    activeIcon?: ReactNode;
+    altIcon?: ReactNode;
     /**
      * The label text
      */

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/components/TopBar/TopBar.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 interface TopBarProps {
     /** Title displayed in the center */
-    title: string;
+    title?: string;
     /** Element rendered on the left side */
     startAdornment?: React.ReactNode;
     /** Element rendered on the right side */

package/dist/components/Typography/Typography.js

@@ -5,12 +5,12 @@ import { cn as o } from "../../lib/utils.js";
 const c = m("", {
   variants: {
     variant: {
-      display: "font-display font-semibold leading-narrow tracking-[-0.02em]",
-      heading: "font-display font-semibold leading-narrow tracking-[-0.01em]",
+      display: "font-sans font-semibold leading-narrow tracking-[-0.02em]",
+      heading: "font-sans font-semibold leading-narrow tracking-[-0.01em]",
       subtitle: "font-sans font-medium leading-narrow",
       label: "font-sans font-semibold leading-narrow",
       body: "font-sans font-normal leading-compact",
-      number: "font-display font-semibold"
+      number: "font-sans font-semibold"
     },
     level: {
       1: "",
@@ -144,13 +144,13 @@ const c = m("", {
     level: 2
   }
 }), x = v(
-  ({ variant: a = "body", level: e = 2, children: l, as: t = "p", className: s, ...n }, r) => /* @__PURE__ */ i(
-    t,
+  ({ variant: a = "body", level: e = 2, children: t, as: l = "p", className: s, ...n }, r) => /* @__PURE__ */ i(
+    l,
     {
       className: o(c({ variant: a, level: e, className: s })),
       ref: r,
       ...n,
-      children: l
+      children: t
     }
   )
 );

package/dist/index.d.ts

@@ -32,4 +32,6 @@ export * from './components/Marble';
 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,103 +1,106 @@
 import { Button as a } from "./components/Button/Button.js";
 import { Checkbox as l } 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 { Flag as d } from "./components/Flag/Flag.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 { 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 { ListItem as y } from "./components/ListItem/ListItem.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 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 { 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 { 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 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 { 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 Or } from "./components/Marble/Marble.js";
-import { TopBar as zr } from "./components/TopBar/TopBar.js";
-import { CountryDrawer as Mr } from "./components/CountryDrawer/CountryDrawer.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 { default as Er } from "./tailwind/index.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 {
-  cr as AlertDialog,
-  wr 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,
+  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,
-  f as Chip,
+  x as Chip,
   g as ColorPickerGroup,
-  s as ColorPickerItem,
-  Mr as CountryDrawer,
-  fr as Drawer,
-  xr as DrawerClose,
+  n as ColorPickerItem,
+  Nr as CountryDrawer,
+  xr as Drawer,
+  sr as DrawerClose,
   gr as DrawerContent,
-  sr as DrawerHeader,
-  nr as DrawerTitle,
-  dr as DrawerTrigger,
-  d as Flag,
+  nr as DrawerHeader,
+  dr as DrawerTitle,
+  ur as DrawerTrigger,
+  u as Flag,
   r as Form,
-  c as Input,
+  A as Input,
   D as LazyFlag,
-  y as ListItem,
-  Or as Marble,
+  h as ListItem,
+  vr as Marble,
   B as NumberPad,
   G as OTPField,
-  K as PhoneField,
+  N as PhoneField,
   V as Pill,
   Dr as Progress,
   L as RadioGroup,
-  R as RadioGroupItem,
-  _ as SearchField,
-  H as Select,
-  j as Spinner,
-  E as Switch,
-  X as Toast,
-  Y as ToastProvider,
-  Z as ToastViewport,
-  rr as Toaster,
+  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,
-  Q as Token,
-  zr as TopBar,
-  mr as Typography,
-  Cr as WalletAddressField,
-  N as getValidatedCountryCode,
-  w as iconVariants,
-  F as inputVariants,
-  C as isSupportedCountryCode,
-  er as reducer,
-  tr as toast,
+  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,
-  Er as uiKitTailwindPlugin,
-  pr as useToast
+  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.0",
+  "version": "1.0.0-canary.10",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -161,6 +161,14 @@
       "types": "./dist/components/TabItem/index.d.ts",
       "default": "./dist/components/TabItem/index.js"
     },
+    "./CircularIcon": {
+      "types": "./dist/components/CircularIcon/index.d.ts",
+      "default": "./dist/components/CircularIcon/index.js"
+    },
+    "./LiveFeedback": {
+      "types": "./dist/components/LiveFeedback/index.d.ts",
+      "default": "./dist/components/LiveFeedback/index.js"
+    },
     "./tailwind": {
       "types": "./dist/tailwind/index.d.ts",
       "default": "./dist/tailwind/index.js"