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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,17 +1,17 @@
1
1
  "use client";
2
- import { jsx as i } from "react/jsx-runtime";
3
- import { forwardRef as B, useMemo as R, useImperativeHandle as W } from "react";
4
- 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";
5
- import { CountryDrawer as $ } from "../CountryDrawer/CountryDrawer.js";
6
- import { Input as b } from "../Input/Input.js";
7
- import j from "./CountrySelectorButton.js";
8
- import { DIAL_CODE_PREFIX as q, startAdornmentWidthByDialCodeLength as H } from "./constants.js";
9
- import { getCountryDataListByCodes as M, getValidatedCountryCode as d } from "./utils.js";
10
- const N = B(
2
+ import { jsx as a } from "react/jsx-runtime";
3
+ import { forwardRef as x, useImperativeHandle as B } from "react";
4
+ 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";
5
+ import { CountryDrawer as W } from "../CountryDrawer/CountryDrawer.js";
6
+ import { Input as _ } from "../Input/Input.js";
7
+ import $ from "./CountrySelectorButton.js";
8
+ import { DIAL_CODE_PREFIX as b, startAdornmentWidthByDialCodeLength as j } from "./constants.js";
9
+ import { getCountryDataListByCodes as q, getValidatedCountryCode as d } from "./utils.js";
10
+ const H = x(
11
11
  ({
12
12
  value: m,
13
13
  onChange: o,
14
- countries: r,
14
+ countries: i,
15
15
  label: f = "Phone",
16
16
  defaultCountryCode: t = "US",
17
17
  disableDialCodePrefill: c = !0,
@@ -24,16 +24,16 @@ const N = B(
24
24
  inputMode: A = "tel",
25
25
  autoComplete: w = "tel",
26
26
  autoCapitalize: P = "off",
27
- autoCorrect: L = "off",
28
- ...v
29
- }, E) => {
30
- const I = R(() => M(r), [r]), { inputValue: S, country: n, inputRef: a, handlePhoneValueChange: g, setCountry: F } = _(
27
+ autoCorrect: v = "off",
28
+ ...E
29
+ }, I) => {
30
+ const { inputValue: L, country: r, inputRef: n, handlePhoneValueChange: S, setCountry: g } = R(
31
31
  {
32
32
  defaultCountry: t.toLowerCase(),
33
33
  disableDialCodePrefill: c,
34
34
  disableDialCodeAndPrefix: !0,
35
35
  value: m,
36
- countries: I,
36
+ countries: q(i),
37
37
  onChange: (e) => {
38
38
  o == null || o(
39
39
  e.phone,
@@ -41,52 +41,52 @@ const N = B(
41
41
  );
42
42
  }
43
43
  }
44
- ), s = d(n.iso2, t), V = `${q}${n.dialCode}`, x = H[n.dialCode.length];
45
- return W(E, () => a.current), /* @__PURE__ */ i(
46
- b,
44
+ ), u = d(r.iso2, t), F = `${b}${r.dialCode}`, V = j[r.dialCode.length];
45
+ return B(I, () => n.current), /* @__PURE__ */ a(
46
+ _,
47
47
  {
48
- ...v,
49
- ref: a,
48
+ ...E,
49
+ ref: n,
50
50
  type: D,
51
51
  inputMode: A,
52
52
  autoComplete: w,
53
53
  autoCapitalize: P,
54
- autoCorrect: L,
55
- value: S,
56
- onChange: g,
54
+ autoCorrect: v,
55
+ value: L,
56
+ onChange: S,
57
57
  label: f,
58
58
  disabled: l,
59
59
  error: h,
60
60
  isValid: p,
61
61
  endAdornment: C,
62
62
  endAdornmentWidth: y,
63
- startAdornmentWidth: x,
63
+ startAdornmentWidth: V,
64
64
  showStartDivider: !0,
65
- startAdornment: /* @__PURE__ */ i(
66
- $,
65
+ startAdornment: /* @__PURE__ */ a(
66
+ W,
67
67
  {
68
- value: s,
68
+ value: u,
69
69
  defaultValue: t,
70
- countries: r,
70
+ countries: i,
71
71
  onAnimationEnd: (e) => {
72
72
  e || requestAnimationFrame(() => {
73
- var u;
74
- (u = a.current) == null || u.focus();
73
+ var s;
74
+ (s = n.current) == null || s.focus();
75
75
  });
76
76
  },
77
77
  onChange: (e) => {
78
- F(e.toLowerCase());
78
+ g(e.toLowerCase());
79
79
  },
80
80
  disabled: l,
81
- children: /* @__PURE__ */ i(j, { value: s, label: V })
81
+ children: /* @__PURE__ */ a($, { value: u, label: F })
82
82
  }
83
83
  )
84
84
  }
85
85
  );
86
86
  }
87
87
  );
88
- N.displayName = "PhoneField";
88
+ H.displayName = "PhoneField";
89
89
  export {
90
- N as PhoneField,
91
- N as default
90
+ H as PhoneField,
91
+ H as default
92
92
  };
@@ -1,50 +1,47 @@
1
1
  "use client";
2
- import { jsx as t, jsxs as m } from "react/jsx-runtime";
2
+ import { jsx as a, jsxs as c } from "react/jsx-runtime";
3
3
  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";
4
- 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";
5
- import * as n from "react";
6
- import { cn as o } from "../../lib/utils.js";
4
+ 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";
5
+ import * as o from "react";
6
+ import { cn as n } from "../../lib/utils.js";
7
7
  import { Typography as d } from "../Typography/Typography.js";
8
- const p = n.forwardRef(
9
- ({ children: r, ...a }, e) => /* @__PURE__ */ t(
10
- c,
8
+ const u = o.forwardRef(
9
+ ({ children: t, ...r }, e) => /* @__PURE__ */ a(
10
+ p,
11
11
  {
12
12
  ref: e,
13
13
  type: "single",
14
- className: "flex w-full justify-between px-5 items-center",
15
- ...a,
16
- children: /* @__PURE__ */ t("div", { className: "flex w-full", children: r })
14
+ className: "grid w-full px-5 items-center auto-cols-fr",
15
+ style: {
16
+ gridTemplateColumns: `repeat(${o.Children.count(t)}, 1fr)`
17
+ },
18
+ ...r,
19
+ children: t
17
20
  }
18
21
  )
19
22
  );
20
- p.displayName = "Tabs";
21
- const x = n.forwardRef(
22
- ({ icon: r, label: a, activeIcon: e, ...l }, i) => /* @__PURE__ */ m(
23
+ u.displayName = "Tabs";
24
+ const x = o.forwardRef(
25
+ ({ icon: t, label: r, altIcon: e, className: i, ...l }, m) => /* @__PURE__ */ c(
23
26
  f,
24
27
  {
25
- ref: i,
26
- className: o(
27
- "flex-1 flex flex-col items-center gap-1 relative min-w-0 group",
28
+ ref: m,
29
+ className: (n(
30
+ "w-full flex-1 flex flex-col items-center justify-center gap-1 relative min-w-0 group",
28
31
  "focus:outline-none transition-colors duration-200",
29
32
  "text-gray-350 hover:text-gray-500 data-[state=on]:text-gray-900"
30
- ),
33
+ ), i),
31
34
  ...l,
32
35
  children: [
33
- /* @__PURE__ */ t(
34
- s,
35
- {
36
- className: o("h-[1.625rem] shrink-0", e && "group-data-[state=on]:hidden"),
37
- children: r
38
- }
39
- ),
40
- e && /* @__PURE__ */ t(s, { className: "h-[1.625rem] shrink-0 hidden group-data-[state=on]:block", children: e }),
41
- a && /* @__PURE__ */ t(
36
+ /* @__PURE__ */ a(s, { className: n("h-[1.625rem] shrink-0", e && "group-data-[state=on]:hidden"), children: t }),
37
+ e && /* @__PURE__ */ a(s, { className: "h-[1.625rem] shrink-0 hidden group-data-[state=on]:block", children: e }),
38
+ r && /* @__PURE__ */ a(
42
39
  d,
43
40
  {
44
41
  as: "span",
45
42
  variant: "subtitle",
46
43
  className: "text-2xs truncate w-full text-center px-1 leading-none",
47
- children: a
44
+ children: r
48
45
  }
49
46
  )
50
47
  ]
@@ -54,5 +51,5 @@ const x = n.forwardRef(
54
51
  x.displayName = "TabItem";
55
52
  export {
56
53
  x as TabItem,
57
- p as Tabs
54
+ u as Tabs
58
55
  };
@@ -28,7 +28,7 @@ export interface TabsProps extends Omit<BaseToggleGroupProps, "type" | "size" |
28
28
  */
29
29
  children?: ReactNode;
30
30
  }
31
- export interface TabItemProps extends Omit<BaseToggleGroupItemProps, "className" | "children"> {
31
+ export interface TabItemProps extends Omit<BaseToggleGroupItemProps, "children"> {
32
32
  /**
33
33
  * The icon to display
34
34
  */
@@ -36,7 +36,7 @@ export interface TabItemProps extends Omit<BaseToggleGroupItemProps, "className"
36
36
  /**
37
37
  * The icon to display when the tab item is active
38
38
  */
39
- activeIcon?: ReactNode;
39
+ altIcon?: ReactNode;
40
40
  /**
41
41
  * The label text
42
42
  */
@@ -11,7 +11,7 @@ const b = p, x = l.forwardRef(({ className: r, ...a }, t) => /* @__PURE__ */ e(
11
11
  {
12
12
  ref: t,
13
13
  className: s(
14
- "fixed top-0 z-[100] flex max-h-screen w-full p-4 right-0 left-0 flex-col",
14
+ "fixed top-0 z-[100] flex max-h-screen w-full p-6 right-0 left-0 flex-col",
15
15
  r
16
16
  ),
17
17
  ...a
@@ -1,7 +1,7 @@
1
1
  import { default as React } from 'react';
2
2
  interface TopBarProps {
3
3
  /** Title displayed in the center */
4
- title: string;
4
+ title?: string;
5
5
  /** Element rendered on the left side */
6
6
  startAdornment?: React.ReactNode;
7
7
  /** Element rendered on the right side */
@@ -5,12 +5,12 @@ import { cn as o } from "../../lib/utils.js";
5
5
  const c = m("", {
6
6
  variants: {
7
7
  variant: {
8
- display: "font-display font-semibold leading-narrow tracking-[-0.02em]",
9
- heading: "font-display font-semibold leading-narrow tracking-[-0.01em]",
8
+ display: "font-sans font-semibold leading-narrow tracking-[-0.02em]",
9
+ heading: "font-sans font-semibold leading-narrow tracking-[-0.01em]",
10
10
  subtitle: "font-sans font-medium leading-narrow",
11
11
  label: "font-sans font-semibold leading-narrow",
12
12
  body: "font-sans font-normal leading-compact",
13
- number: "font-display font-semibold"
13
+ number: "font-sans font-semibold"
14
14
  },
15
15
  level: {
16
16
  1: "",
@@ -144,13 +144,13 @@ const c = m("", {
144
144
  level: 2
145
145
  }
146
146
  }), x = v(
147
- ({ variant: a = "body", level: e = 2, children: l, as: t = "p", className: s, ...n }, r) => /* @__PURE__ */ i(
148
- t,
147
+ ({ variant: a = "body", level: e = 2, children: t, as: l = "p", className: s, ...n }, r) => /* @__PURE__ */ i(
148
+ l,
149
149
  {
150
150
  className: o(c({ variant: a, level: e, className: s })),
151
151
  ref: r,
152
152
  ...n,
153
- children: l
153
+ children: t
154
154
  }
155
155
  )
156
156
  );
package/dist/index.d.ts CHANGED
@@ -32,4 +32,6 @@ export * from './components/Marble';
32
32
  export * from './components/TopBar';
33
33
  export * from './components/CountryDrawer';
34
34
  export * from './components/ToggleGroup';
35
+ export * from './components/Tabs';
36
+ export * from './components/LiveFeedback';
35
37
  export { default as uiKitTailwindPlugin } from './tailwind';
package/dist/index.js CHANGED
@@ -1,103 +1,106 @@
1
1
  import { Button as a } from "./components/Button/Button.js";
2
2
  import { Checkbox as l } from "./components/Checkbox/Checkbox.js";
3
- import { Chip as f } from "./components/Chip/Chip.js";
4
- import { ColorPickerGroup as g, ColorPickerItem as s } from "./components/ColorPicker/ColorPicker.js";
5
- import { Flag as d } from "./components/Flag/Flag.js";
3
+ import { Chip as x } from "./components/Chip/Chip.js";
4
+ import { ColorPickerGroup as g, ColorPickerItem as n } from "./components/ColorPicker/ColorPicker.js";
5
+ import { Flag as u } from "./components/Flag/Flag.js";
6
6
  import { LazyFlag as D } from "./components/Flag/LazyFlag.js";
7
- import { isSupportedCountryCode as C } from "./components/Flag/utils.js";
7
+ import { isSupportedCountryCode as c } from "./components/Flag/utils.js";
8
8
  import * as r from "./components/Form/Form.js";
9
- import { Input as c, iconVariants as w, inputVariants as F } from "./components/Input/Input.js";
10
- import { ListItem as y } from "./components/ListItem/ListItem.js";
9
+ import { Input as A, iconVariants as F, inputVariants as P } from "./components/Input/Input.js";
10
+ import { ListItem as h } from "./components/ListItem/ListItem.js";
11
11
  import { NumberPad as B } from "./components/NumberPad/NumberPad.js";
12
12
  import { OTPField as G } from "./components/OTPField/OTPField.js";
13
13
  import { Pill as V } from "./components/Pill/Pill.js";
14
14
  import { RadioGroup as L } from "./components/RadioGroup/RadioGroup.js";
15
- import { RadioGroupItem as R } from "./components/RadioGroup/RadioGroupItem.js";
16
- import { Select as H } from "./components/Select/Select.js";
17
- import { SearchField as _ } from "./components/SearchField/SearchField.js";
18
- import { PhoneField as K } from "./components/PhoneField/PhoneField.js";
19
- import { getValidatedCountryCode as N } from "./components/PhoneField/utils.js";
20
- import { Spinner as j } from "./components/Spinner/Spinner.js";
21
- import { Switch as E } from "./components/Switch/Switch.js";
22
- import { Token as Q } from "./components/Token/Token.js";
23
- import { Toast as X, ToastProvider as Y, ToastViewport as Z } from "./components/Toast/Toast.js";
24
- import { Toaster as rr } from "./components/Toast/Toaster.js";
25
- import { reducer as er, toast as tr, useToast as pr } from "./components/Toast/use-toast.js";
26
- import { Typography as mr, typographyVariants as lr } from "./components/Typography/Typography.js";
27
- import { Drawer as fr, DrawerClose as xr, DrawerContent as gr, DrawerHeader as sr, DrawerTitle as nr, DrawerTrigger as dr } from "./components/Drawer/Drawer.js";
15
+ import { RadioGroupItem as H } from "./components/RadioGroup/RadioGroupItem.js";
16
+ import { Select as v } from "./components/Select/Select.js";
17
+ import { SearchField as K } from "./components/SearchField/SearchField.js";
18
+ import { PhoneField as N } from "./components/PhoneField/PhoneField.js";
19
+ import { getValidatedCountryCode as W } from "./components/PhoneField/utils.js";
20
+ import { Spinner as q } from "./components/Spinner/Spinner.js";
21
+ import { Switch as J } from "./components/Switch/Switch.js";
22
+ import { Token as U } from "./components/Token/Token.js";
23
+ import { Toast as Y, ToastProvider as Z, ToastViewport as $ } from "./components/Toast/Toast.js";
24
+ import { Toaster as or } from "./components/Toast/Toaster.js";
25
+ import { reducer as tr, toast as pr, useToast as mr } from "./components/Toast/use-toast.js";
26
+ import { Typography as ir, typographyVariants as lr } from "./components/Typography/Typography.js";
27
+ import { Drawer as xr, DrawerClose as sr, DrawerContent as gr, DrawerHeader as nr, DrawerTitle as dr, DrawerTrigger as ur } from "./components/Drawer/Drawer.js";
28
28
  import { Progress as Dr } from "./components/Progress/Progress.js";
29
29
  import "./components/TextArea/TextArea.js";
30
- import { WalletAddressField as Cr } from "./components/WalletAddressField/WalletAddressField.js";
31
- 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";
32
- import { BottomBar as kr } from "./components/BottomBar/BottomBar.js";
33
- import { BulletList as br } from "./components/BulletList/BulletList.js";
34
- import { BulletListItem as vr } from "./components/BulletListItem/BulletListItem.js";
30
+ import { WalletAddressField as cr } from "./components/WalletAddressField/WalletAddressField.js";
31
+ 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";
32
+ import { BottomBar as Vr } from "./components/BottomBar/BottomBar.js";
33
+ import { BulletList as Lr } from "./components/BulletList/BulletList.js";
34
+ import { BulletListItem as Hr } from "./components/BulletListItem/BulletListItem.js";
35
35
  import "./components/BulletPoint/BulletPoint.js";
36
- import { Marble as Or } from "./components/Marble/Marble.js";
37
- import { TopBar as zr } from "./components/TopBar/TopBar.js";
38
- import { CountryDrawer as Mr } from "./components/CountryDrawer/CountryDrawer.js";
36
+ import { Marble as vr } from "./components/Marble/Marble.js";
37
+ import { TopBar as Kr } from "./components/TopBar/TopBar.js";
38
+ import { CountryDrawer as Nr } from "./components/CountryDrawer/CountryDrawer.js";
39
39
  import { ToggleGroupItem as Wr, ToggleGroupRoot as jr } from "./components/ToggleGroup/ToggleGroup.js";
40
- import { default as Er } from "./tailwind/index.js";
40
+ import { TabItem as Er, Tabs as Jr } from "./components/Tabs/Tabs.js";
41
+ import "react/jsx-runtime";
42
+ import { default as Ur } from "./tailwind/index.js";
41
43
  export {
42
- cr as AlertDialog,
43
- wr as AlertDialogClose,
44
- Fr as AlertDialogContent,
45
- Pr as AlertDialogDescription,
46
- yr as AlertDialogFooter,
47
- hr as AlertDialogHeader,
48
- Br as AlertDialogOverlay,
49
- Ir as AlertDialogPortal,
50
- Gr as AlertDialogTitle,
51
- Sr as AlertDialogTrigger,
52
- kr as BottomBar,
53
- br as BulletList,
54
- vr as BulletListItem,
44
+ Ar as AlertDialog,
45
+ Fr as AlertDialogClose,
46
+ Pr as AlertDialogContent,
47
+ yr as AlertDialogDescription,
48
+ hr as AlertDialogFooter,
49
+ Ir as AlertDialogHeader,
50
+ Br as AlertDialogPortal,
51
+ br as AlertDialogTitle,
52
+ Gr as AlertDialogTrigger,
53
+ Vr as BottomBar,
54
+ Lr as BulletList,
55
+ Hr as BulletListItem,
55
56
  a as Button,
56
57
  l as Checkbox,
57
- f as Chip,
58
+ x as Chip,
58
59
  g as ColorPickerGroup,
59
- s as ColorPickerItem,
60
- Mr as CountryDrawer,
61
- fr as Drawer,
62
- xr as DrawerClose,
60
+ n as ColorPickerItem,
61
+ Nr as CountryDrawer,
62
+ xr as Drawer,
63
+ sr as DrawerClose,
63
64
  gr as DrawerContent,
64
- sr as DrawerHeader,
65
- nr as DrawerTitle,
66
- dr as DrawerTrigger,
67
- d as Flag,
65
+ nr as DrawerHeader,
66
+ dr as DrawerTitle,
67
+ ur as DrawerTrigger,
68
+ u as Flag,
68
69
  r as Form,
69
- c as Input,
70
+ A as Input,
70
71
  D as LazyFlag,
71
- y as ListItem,
72
- Or as Marble,
72
+ h as ListItem,
73
+ vr as Marble,
73
74
  B as NumberPad,
74
75
  G as OTPField,
75
- K as PhoneField,
76
+ N as PhoneField,
76
77
  V as Pill,
77
78
  Dr as Progress,
78
79
  L as RadioGroup,
79
- R as RadioGroupItem,
80
- _ as SearchField,
81
- H as Select,
82
- j as Spinner,
83
- E as Switch,
84
- X as Toast,
85
- Y as ToastProvider,
86
- Z as ToastViewport,
87
- rr as Toaster,
80
+ H as RadioGroupItem,
81
+ K as SearchField,
82
+ v as Select,
83
+ q as Spinner,
84
+ J as Switch,
85
+ Er as TabItem,
86
+ Jr as Tabs,
87
+ Y as Toast,
88
+ Z as ToastProvider,
89
+ $ as ToastViewport,
90
+ or as Toaster,
88
91
  Wr as ToggleGroupItem,
89
92
  jr as ToggleGroupRoot,
90
- Q as Token,
91
- zr as TopBar,
92
- mr as Typography,
93
- Cr as WalletAddressField,
94
- N as getValidatedCountryCode,
95
- w as iconVariants,
96
- F as inputVariants,
97
- C as isSupportedCountryCode,
98
- er as reducer,
99
- tr as toast,
93
+ U as Token,
94
+ Kr as TopBar,
95
+ ir as Typography,
96
+ cr as WalletAddressField,
97
+ W as getValidatedCountryCode,
98
+ F as iconVariants,
99
+ P as inputVariants,
100
+ c as isSupportedCountryCode,
101
+ tr as reducer,
102
+ pr as toast,
100
103
  lr as typographyVariants,
101
- Er as uiKitTailwindPlugin,
102
- pr as useToast
104
+ Ur as uiKitTailwindPlugin,
105
+ mr as useToast
103
106
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worldcoin/mini-apps-ui-kit-react",
3
- "version": "1.0.0-canary.0",
3
+ "version": "1.0.0-canary.10",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -161,6 +161,14 @@
161
161
  "types": "./dist/components/TabItem/index.d.ts",
162
162
  "default": "./dist/components/TabItem/index.js"
163
163
  },
164
+ "./CircularIcon": {
165
+ "types": "./dist/components/CircularIcon/index.d.ts",
166
+ "default": "./dist/components/CircularIcon/index.js"
167
+ },
168
+ "./LiveFeedback": {
169
+ "types": "./dist/components/LiveFeedback/index.d.ts",
170
+ "default": "./dist/components/LiveFeedback/index.js"
171
+ },
164
172
  "./tailwind": {
165
173
  "types": "./dist/tailwind/index.d.ts",
166
174
  "default": "./dist/tailwind/index.js"