@worldcoin/mini-apps-ui-kit-react 0.0.1 → 0.0.3

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.
Files changed (26) hide show
  1. package/LICENSE.md +21 -0
  2. package/README.md +42 -5
  3. package/dist/_virtual/plugin.js +7 -0
  4. package/dist/components/Flag/index.d.ts +1 -0
  5. package/dist/components/Flag/index.js +6 -4
  6. package/dist/components/PhoneField/PhoneField.d.ts +6 -1
  7. package/dist/components/PhoneField/PhoneField.js +121 -117
  8. package/dist/components/PhoneField/constants.d.ts +1 -1
  9. package/dist/components/PhoneField/constants.js +4 -4
  10. package/dist/components/PhoneField/index.d.ts +1 -0
  11. package/dist/components/PhoneField/index.js +3 -1
  12. package/dist/components/PhoneField/utils.d.ts +1 -0
  13. package/dist/components/PhoneField/utils.js +20 -11
  14. package/dist/components/Pill/Pill.js +0 -1
  15. package/dist/components/RadioGroup/RadioGroup.js +18 -24
  16. package/dist/components/RadioGroup/RadioGroupItem.js +15 -30
  17. package/dist/components/Typography/Typography.d.ts +21 -33
  18. package/dist/components/Typography/Typography.js +15 -15
  19. package/dist/index.js +41 -37
  20. package/dist/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/public/create-plugin.js +24 -19
  21. package/dist/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/util/createPlugin.js +31 -25
  22. package/dist/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/plugin.js +9 -7
  23. package/dist/tailwind/index.js +6 -1
  24. package/package.json +15 -13
  25. package/public/globals.css +1 -1885
  26. package/public/SFMono-Regular.otf +0 -0
package/LICENSE.md ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Tools for Humanity
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  React components UI Kit library for Mini Apps
4
4
 
5
+ > **⚠️ Security Notice**: This library has not been reviewed for security vulnerabilities. Use in production environments is discouraged until a security audit has been completed.
6
+
5
7
  ## Getting Started
6
8
 
7
9
  - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
@@ -66,13 +68,48 @@ The library uses three fonts:
66
68
  Embed the following code in the `<head>` of your html to load the fonts:
67
69
 
68
70
  ```html
69
- <link rel="preconnect" href="https://fonts.googleapis.com">
70
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
71
- <link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Rubik:ital,wght@0,300..900;1,300..900&family=Sora:wght@600&display=swap" rel="stylesheet">
71
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
72
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
73
+ <link
74
+ href="https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Rubik:ital,wght@0,300..900;1,300..900&family=Sora:wght@600&display=swap"
75
+ rel="stylesheet"
76
+ />
72
77
  ```
73
78
 
74
79
  Or use the following code to load the fonts via CSS:
75
80
 
76
81
  ```css
77
- @import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Rubik:ital,wght@0,300..900;1,300..900&family=Sora:wght@100..800&display=swap');
78
- ```
82
+ @import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Rubik:ital,wght@0,300..900;1,300..900&family=Sora:wght@100..800&display=swap");
83
+ ```
84
+
85
+ ## Importing Styles
86
+
87
+ To use the UI Kit components with their proper styling, you need to import the styles in your application. Add the following import statement to your application's entry point (e.g., `app/layout.tsx` for Next.js or `main.tsx` for Vite):
88
+
89
+ ```typescript
90
+ import "@worldcoin/mini-apps-ui-kit-react/styles.css";
91
+ ```
92
+
93
+ ## Import Methods
94
+
95
+ The library supports two different import methods:
96
+
97
+ ### Default Import
98
+
99
+ Import components from the main entry point:
100
+
101
+ ```typescript
102
+ import { Button } from "@worldcoin/mini-apps-ui-kit-react";
103
+ ```
104
+
105
+ This method is simpler but includes all components in your bundle, even if you're not using them.
106
+
107
+ ### Component-Level Import
108
+
109
+ Import components directly from their individual modules:
110
+
111
+ ```typescript
112
+ import { Button } from "@worldcoin/mini-apps-ui-kit-react/Button";
113
+ ```
114
+
115
+ This method enables tree-shaking and reduces your final bundle size by only including the components you actually use. Recommended for production applications where bundle size is a concern.
package/dist/_virtual/plugin.js ADDED
@@ -0,0 +1,7 @@
1
+ import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
2
+ import { __require as o } from "../node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/plugin.js";
3
+ var t = o();
4
+ const p = /* @__PURE__ */ r(t);
5
+ export {
6
+ p as default
7
+ };
package/dist/components/Flag/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export * from './Flag';
2
2
  export * from './LazyFlag';
3
+ export { isSupportedCountryCode } from './utils';
3
4
  export type { CountryCode } from './Flag';
package/dist/components/Flag/index.js CHANGED
@@ -1,6 +1,8 @@
1
- import { Flag as a } from "./Flag.js";
2
- import { LazyFlag as f } from "./LazyFlag.js";
1
+ import { Flag as e } from "./Flag.js";
2
+ import { LazyFlag as t } from "./LazyFlag.js";
3
+ import { isSupportedCountryCode as f } from "./utils.js";
3
4
  export {
4
- a as Flag,
5
- f as LazyFlag
5
+ e as Flag,
6
+ t as LazyFlag,
7
+ f as isSupportedCountryCode
6
8
  };
package/dist/components/PhoneField/PhoneField.d.ts CHANGED
@@ -8,7 +8,12 @@ export interface PhoneFieldProps extends Omit<InputProps, "onChange" | "startAdo
8
8
  /**
9
9
  * Callback triggered when the phone number changes.
10
10
  */
11
- onChange?: (phone: string) => void;
11
+ onChange?: (phone: string, countryCode: CountryCode) => void;
12
+ /**
13
+ * List of countries to display in the country selector.
14
+ * If not provided, all countries will be displayed.
15
+ */
16
+ countries?: CountryCode[];
12
17
  /**
13
18
  * If true, the dial code will be hidden.
14
19
  * The dial code is still displayed at the start of the input and in the dropdown.
package/dist/components/PhoneField/PhoneField.js CHANGED
@@ -1,108 +1,112 @@
1
1
  "use client";
2
- import { jsx as o, jsxs as i } from "react/jsx-runtime";
3
- import { DROPDOWN_CONTAINER_STYLES as z } from "../../lib/constants/dropdownStyles.js";
4
- import { cn as G } from "../../lib/utils.js";
5
- import { Root as J, Trigger as K, Portal as Q, Content as Z, Viewport as ee, Item as oe } from "../../node_modules/.pnpm/@radix-ui_react-select@2.1.4_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18.3._atdh45n5c7sked5b6tbwgdz7re/node_modules/@radix-ui/react-select/dist/index.js";
6
- import { forwardRef as te, useRef as re, useState as w, useImperativeHandle as ne, useMemo as ae } from "react";
7
- import { usePhoneInput as le, parseCountry as I } from "../../node_modules/.pnpm/react-international-phone@4.4.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
8
- import { Drawer as se, DrawerTrigger as ie, DrawerContent as ce, DrawerClose as ue } from "../Drawer/Drawer.js";
9
- import { Input as de } from "../Input/Input.js";
10
- import { SearchField as me } from "../SearchField/SearchField.js";
11
- import { Typography as F } from "../Typography/Typography.js";
12
- import O from "./CountryListItem.js";
13
- import P from "./CountrySelectorButton.js";
14
- import { extendedCountries as c, DIAL_CODE_PREFIX as y, startAdornmentWidthByDialCodeLength as he } from "./constants.js";
15
- import { getValidatedCountryCode as x, filterCountries as pe } from "./utils.js";
16
- const fe = te(
2
+ import { jsx as o, jsxs as c } from "react/jsx-runtime";
3
+ import { DROPDOWN_CONTAINER_STYLES as J } from "../../lib/constants/dropdownStyles.js";
4
+ import { cn as K } from "../../lib/utils.js";
5
+ import { Root as Q, Trigger as Z, Portal as ee, Content as oe, Viewport as te, Item as re } from "../../node_modules/.pnpm/@radix-ui_react-select@2.1.4_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18.3._atdh45n5c7sked5b6tbwgdz7re/node_modules/@radix-ui/react-select/dist/index.js";
6
+ import { forwardRef as ne, useRef as ae, useState as w, useMemo as F, useImperativeHandle as se } from "react";
7
+ import { usePhoneInput as le, parseCountry as O } from "../../node_modules/.pnpm/react-international-phone@4.4.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
8
+ import { Drawer as ie, DrawerTrigger as ce, DrawerContent as ue, DrawerClose as de } from "../Drawer/Drawer.js";
9
+ import { Input as me } from "../Input/Input.js";
10
+ import { SearchField as he } from "../SearchField/SearchField.js";
11
+ import { Typography as P } from "../Typography/Typography.js";
12
+ import L from "./CountryListItem.js";
13
+ import R from "./CountrySelectorButton.js";
14
+ import { DIAL_CODE_PREFIX as g, startAdornmentWidthByDialCodeLength as pe } from "./constants.js";
15
+ import { getCountryDataListByCodes as fe, getValidatedCountryCode as u, filterCountries as Ce } from "./utils.js";
16
+ const ye = ne(
17
17
  ({
18
- value: R,
19
- onChange: u,
20
- placeholder: T = "Enter phone number",
21
- defaultCountryCode: l = "US",
22
- hideDialCode: d = !1,
23
- disableDialCodePrefill: $ = !0,
24
- disabled: s = !1,
25
- error: E = !1,
26
- isValid: L,
27
- endAdornment: b,
28
- endAdornmentWidth: V,
29
- countrySelectorMode: W = "dropdown",
30
- ..._
31
- }, B) => {
32
- const g = re(null), [m, h] = w(!1), [j, p] = w(!1), [f, N] = w(""), { inputValue: k, country: C, inputRef: n, handlePhoneValueChange: M, setCountry: q } = le(
18
+ value: T,
19
+ onChange: d,
20
+ countries: x,
21
+ placeholder: $ = "Enter phone number",
22
+ defaultCountryCode: n = "US",
23
+ hideDialCode: m = !1,
24
+ disableDialCodePrefill: E = !0,
25
+ disabled: l = !1,
26
+ error: b = !1,
27
+ isValid: V,
28
+ endAdornment: W,
29
+ endAdornmentWidth: B,
30
+ countrySelectorMode: _ = "dropdown",
31
+ ...j
32
+ }, k) => {
33
+ const N = ae(null), [h, p] = w(!1), [M, f] = w(!1), [C, S] = w(""), i = F(() => fe(x), [x]), { inputValue: q, country: y, inputRef: a, handlePhoneValueChange: H, setCountry: U } = le(
33
34
  {
34
- defaultCountry: l.toLowerCase(),
35
- disableDialCodePrefill: $,
36
- value: R,
37
- countries: c,
35
+ defaultCountry: n.toLowerCase(),
36
+ disableDialCodePrefill: E,
37
+ value: T,
38
+ countries: i,
38
39
  onChange: (e) => {
39
- u == null || u(e.phone);
40
+ d == null || d(
41
+ e.phone,
42
+ u(e.country.iso2, n)
43
+ );
40
44
  }
41
45
  }
42
- ), a = x(C.iso2, l), H = 2.8, S = `${y}${C.dialCode}`, U = d ? H : he[C.dialCode.length];
43
- ne(B, () => n.current);
46
+ ), s = u(y.iso2, n), X = 2.8, D = `${g}${y.dialCode}`, Y = m ? X : pe[y.dialCode.length];
47
+ se(k, () => a.current);
44
48
  const v = (e) => {
45
- e == null || e.preventDefault(), j && requestAnimationFrame(() => {
49
+ e == null || e.preventDefault(), M && requestAnimationFrame(() => {
46
50
  var t;
47
- (t = n.current) == null || t.focus();
48
- }), p(!1);
49
- }, X = (e) => {
51
+ (t = a.current) == null || t.focus();
52
+ }), f(!1);
53
+ }, z = (e) => {
50
54
  var r;
51
- const t = (r = g.current) == null ? void 0 : r.contains(e.target);
52
- p(!!t);
53
- }, D = (e) => {
54
- q(e.toLowerCase()), h(!1);
55
- }, Y = (e) => {
56
- N(e.target.value);
57
- }, A = ae(
58
- () => pe(c, f),
59
- [c, f]
55
+ const t = (r = N.current) == null ? void 0 : r.contains(e.target);
56
+ f(!!t);
57
+ }, A = (e) => {
58
+ U(e.toLowerCase()), p(!1);
59
+ }, G = (e) => {
60
+ S(e.target.value);
61
+ }, I = F(
62
+ () => Ce(i, C),
63
+ [i, C]
60
64
  );
61
65
  return /* @__PURE__ */ o(
62
- de,
66
+ me,
63
67
  {
64
- ..._,
65
- ref: n,
66
- value: k,
67
- onChange: M,
68
- placeholder: T,
69
- disabled: s,
70
- error: E,
71
- isValid: L,
72
- endAdornment: b,
73
- endAdornmentWidth: V,
74
- startAdornmentWidth: U,
75
- isFocused: m,
76
- startAdornment: W === "drawer" ? /* @__PURE__ */ i(
77
- se,
68
+ ...j,
69
+ ref: a,
70
+ value: q,
71
+ onChange: H,
72
+ placeholder: $,
73
+ disabled: l,
74
+ error: b,
75
+ isValid: V,
76
+ endAdornment: W,
77
+ endAdornmentWidth: B,
78
+ startAdornmentWidth: Y,
79
+ isFocused: h,
80
+ startAdornment: _ === "drawer" ? /* @__PURE__ */ c(
81
+ ie,
78
82
  {
79
- open: m,
80
- onOpenChange: h,
83
+ open: h,
84
+ onOpenChange: p,
81
85
  onClose: v,
82
86
  onAnimationEnd: (e) => {
83
- e && p(!0);
87
+ e && f(!0);
84
88
  },
85
89
  children: [
86
- /* @__PURE__ */ o(ie, { asChild: !0, className: "outline-none", children: /* @__PURE__ */ o(
87
- P,
90
+ /* @__PURE__ */ o(ce, { asChild: !0, className: "outline-none", children: /* @__PURE__ */ o(
91
+ R,
88
92
  {
89
- disabled: s,
90
- countryCode: a,
91
- hideDialCode: d,
92
- dialCode: S
93
+ disabled: l,
94
+ countryCode: s,
95
+ hideDialCode: m,
96
+ dialCode: D
93
97
  }
94
98
  ) }),
95
- /* @__PURE__ */ o(ce, { className: "h-[96%]", children: /* @__PURE__ */ i("div", { className: "max-w-md w-full mx-auto flex flex-col flex-grow", children: [
96
- /* @__PURE__ */ o(F, { variant: "subtitle", level: 2, className: "px-4 py-2", children: "Select country" }),
99
+ /* @__PURE__ */ o(ue, { className: "h-[96%]", children: /* @__PURE__ */ c("div", { className: "max-w-md w-full mx-auto flex flex-col flex-grow", children: [
100
+ /* @__PURE__ */ o(P, { variant: "subtitle", level: 2, className: "px-4 py-2", children: "Select country" }),
97
101
  /* @__PURE__ */ o("div", { className: "px-4 pt-2 pb-4", children: /* @__PURE__ */ o(
98
- me,
102
+ he,
99
103
  {
100
104
  placeholder: "Search name or number",
101
- value: f,
102
- onChange: Y
105
+ value: C,
106
+ onChange: G
103
107
  }
104
108
  ) }),
105
- /* @__PURE__ */ i(
109
+ /* @__PURE__ */ c(
106
110
  "div",
107
111
  {
108
112
  className: "no-scrollbar mx-auto w-full flex flex-col flex-grow flex-basis-0 overflow-auto p-2",
@@ -112,76 +116,76 @@ const fe = te(
112
116
  flexBasis: 0
113
117
  },
114
118
  children: [
115
- A.map((e) => {
116
- const t = I(e), r = x(
119
+ I.map((e) => {
120
+ const t = O(e), r = u(
117
121
  t.iso2,
118
- l
122
+ n
119
123
  );
120
- return /* @__PURE__ */ o(ue, { className: "block w-full", children: /* @__PURE__ */ o(
121
- O,
124
+ return /* @__PURE__ */ o(de, { className: "block w-full", children: /* @__PURE__ */ o(
125
+ L,
122
126
  {
123
127
  countryCode: r,
124
128
  countryName: t.name,
125
- dialCode: `${y}${t.dialCode}`,
129
+ dialCode: `${g}${t.dialCode}`,
126
130
  onClick: () => {
127
- D(r), N("");
131
+ A(r), S("");
128
132
  },
129
- isSelected: a === r
133
+ isSelected: s === r
130
134
  }
131
135
  ) }, r);
132
136
  }),
133
- A.length === 0 && /* @__PURE__ */ o(F, { variant: "body", level: 2, className: "text-center", children: "No countries found" })
137
+ I.length === 0 && /* @__PURE__ */ o(P, { variant: "body", level: 2, className: "text-center", children: "No countries found" })
134
138
  ]
135
139
  }
136
140
  )
137
141
  ] }) })
138
142
  ]
139
143
  }
140
- ) : /* @__PURE__ */ i(
141
- J,
144
+ ) : /* @__PURE__ */ c(
145
+ Q,
142
146
  {
143
- value: a,
144
- open: m,
145
- onOpenChange: h,
146
- onValueChange: D,
147
- disabled: s,
147
+ value: s,
148
+ open: h,
149
+ onOpenChange: p,
150
+ onValueChange: A,
151
+ disabled: l,
148
152
  children: [
149
- /* @__PURE__ */ o(K, { children: /* @__PURE__ */ o(
150
- P,
153
+ /* @__PURE__ */ o(Z, { children: /* @__PURE__ */ o(
154
+ R,
151
155
  {
152
- disabled: s,
153
- countryCode: a,
154
- hideDialCode: d,
155
- dialCode: S
156
+ disabled: l,
157
+ countryCode: s,
158
+ hideDialCode: m,
159
+ dialCode: D
156
160
  }
157
161
  ) }),
158
- /* @__PURE__ */ o(Q, { children: /* @__PURE__ */ o(
159
- Z,
162
+ /* @__PURE__ */ o(ee, { children: /* @__PURE__ */ o(
163
+ oe,
160
164
  {
161
165
  ref: (e) => {
162
- g.current = e, e && n.current && (e.style.width = `${n.current.offsetWidth}px`);
166
+ N.current = e, e && a.current && (e.style.width = `${a.current.offsetWidth}px`);
163
167
  },
164
168
  position: "popper",
165
- className: G(z, "-ml-3 mt-5 w-auto"),
169
+ className: K(J, "-ml-3 mt-5 w-auto"),
166
170
  onCloseAutoFocus: v,
167
- onPointerDown: X,
168
- children: /* @__PURE__ */ o(ee, { className: "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] p-2", children: c.map((e) => {
169
- const t = I(e), r = x(
171
+ onPointerDown: z,
172
+ children: /* @__PURE__ */ o(te, { className: "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] p-2", children: i.map((e) => {
173
+ const t = O(e), r = u(
170
174
  t.iso2,
171
- l
175
+ n
172
176
  );
173
177
  return /* @__PURE__ */ o(
174
- oe,
178
+ re,
175
179
  {
176
180
  value: r,
177
181
  className: "outline-none",
178
182
  children: /* @__PURE__ */ o(
179
- O,
183
+ L,
180
184
  {
181
185
  countryCode: r,
182
186
  countryName: t.name,
183
- dialCode: `${y}${t.dialCode}`,
184
- isSelected: a === r
187
+ dialCode: `${g}${t.dialCode}`,
188
+ isSelected: s === r
185
189
  }
186
190
  )
187
191
  },
@@ -197,8 +201,8 @@ const fe = te(
197
201
  );
198
202
  }
199
203
  );
200
- fe.displayName = "PhoneField";
204
+ ye.displayName = "PhoneField";
201
205
  export {
202
- fe as PhoneField,
203
- fe as default
206
+ ye as PhoneField,
207
+ ye as default
204
208
  };
package/dist/components/PhoneField/constants.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { CountryData } from 'react-international-phone';
2
- export declare const extendedCountries: CountryData[];
2
+ export declare const extendedCountryDataList: CountryData[];
3
3
  export declare const DIAL_CODE_PREFIX = "+";
4
4
  export declare const startAdornmentWidthByDialCodeLength: Record<string, number>;
package/dist/components/PhoneField/constants.js CHANGED
@@ -10,10 +10,10 @@ const r = new Set(
10
10
  ), l = Object.entries(i).filter(([o]) => m.includes(o.toLowerCase())).map(([o, t]) => {
11
11
  const { name: n, phone: a } = t, u = a[0].toString(), C = o.toLowerCase();
12
12
  return [n, C, u];
13
- }), L = [
13
+ }), w = [
14
14
  ...c,
15
15
  ...l
16
- ].sort((o, t) => o[0].localeCompare(t[0])), h = "+", S = {
16
+ ].sort((o, t) => o[0].localeCompare(t[0])), h = "+", D = {
17
17
  1: 4.4,
18
18
  2: 5.2,
19
19
  3: 5.8,
@@ -21,6 +21,6 @@ const r = new Set(
21
21
  };
22
22
  export {
23
23
  h as DIAL_CODE_PREFIX,
24
- L as extendedCountries,
25
- S as startAdornmentWidthByDialCodeLength
24
+ w as extendedCountryDataList,
25
+ D as startAdornmentWidthByDialCodeLength
26
26
  };
package/dist/components/PhoneField/index.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export * from './PhoneField';
2
+ export { getValidatedCountryCode } from './utils';
package/dist/components/PhoneField/index.js CHANGED
@@ -1,4 +1,6 @@
1
1
  import { PhoneField as r } from "./PhoneField.js";
2
+ import { getValidatedCountryCode as d } from "./utils.js";
2
3
  export {
3
- r as PhoneField
4
+ r as PhoneField,
5
+ d as getValidatedCountryCode
4
6
  };
package/dist/components/PhoneField/utils.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { CountryData } from 'react-international-phone';
2
2
  import { CountryCode } from '../Flag';
3
3
  export declare const getValidatedCountryCode: (code: string, defaultCountryCode: CountryCode) => CountryCode;
4
+ export declare const getCountryDataListByCodes: (countryCodes: CountryCode[] | undefined) => CountryData[];
4
5
  export declare const filterCountries: (countries: CountryData[], searchText: string) => CountryData[];
package/dist/components/PhoneField/utils.js CHANGED
@@ -1,14 +1,23 @@
1
1
  import { parseCountry as a } from "../../node_modules/.pnpm/react-international-phone@4.4.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
2
- import { isSupportedCountryCode as d } from "../Flag/utils.js";
3
- import { DIAL_CODE_PREFIX as u } from "./constants.js";
4
- const m = (o, e) => {
5
- const r = o.toUpperCase();
6
- return d(r) ? r : e;
7
- }, l = (o, e) => e ? o.filter((r) => {
8
- const t = a(r), s = t.name.toLowerCase(), C = `${u}${t.dialCode.toLowerCase()}`, n = e.toLowerCase();
9
- return s.includes(n) || C.includes(n);
10
- }) : o;
2
+ import { isSupportedCountryCode as u } from "../Flag/utils.js";
3
+ import { extendedCountryDataList as s, DIAL_CODE_PREFIX as p } from "./constants.js";
4
+ const f = (t, e) => {
5
+ const r = t.toUpperCase();
6
+ return u(r) ? r : e;
7
+ }, m = (t) => {
8
+ if (!(t != null && t.length))
9
+ return s;
10
+ const e = new Set(t);
11
+ return s.filter((r) => {
12
+ const o = a(r).iso2.toUpperCase();
13
+ return e.has(o);
14
+ });
15
+ }, L = (t, e) => e ? t.filter((r) => {
16
+ const o = a(r), i = o.name.toLowerCase(), C = `${p}${o.dialCode.toLowerCase()}`, n = e.toLowerCase();
17
+ return i.includes(n) || C.includes(n);
18
+ }) : t;
11
19
  export {
12
- l as filterCountries,
13
- m as getValidatedCountryCode
20
+ L as filterCountries,
21
+ m as getCountryDataListByCodes,
22
+ f as getValidatedCountryCode
14
23
  };
package/dist/components/Pill/Pill.js CHANGED
@@ -6,7 +6,6 @@ import { forwardRef as s } from "react";
6
6
  import { cn as m } from "../../lib/utils.js";
7
7
  import { typographyVariants as p } from "../Typography/Typography.js";
8
8
  const f = n(
9
- // TODO: Add disabled classes
10
9
  "inline-flex h-9 items-center rounded-full px-4 transition-colors duration-200",
11
10
  {
12
11
  variants: {
package/dist/components/RadioGroup/RadioGroup.js CHANGED
@@ -1,42 +1,36 @@
1
1
  import { jsx as s } from "react/jsx-runtime";
2
- import { Root as f } from "../../node_modules/.pnpm/@radix-ui_react-radio-group@1.2.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@_2u6lfd2xt65wmbxn7lgvaxqbmy/node_modules/@radix-ui/react-radio-group/dist/index.js";
3
- import { cva as n } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
4
- import { forwardRef as c } from "react";
5
- const d = n("flex", {
2
+ import { Root as d } from "../../node_modules/.pnpm/@radix-ui_react-radio-group@1.2.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@_2u6lfd2xt65wmbxn7lgvaxqbmy/node_modules/@radix-ui/react-radio-group/dist/index.js";
3
+ import { cva as f } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
4
+ import { forwardRef as n } from "react";
5
+ const c = f("flex disabled:cursor-not-allowed disabled:opacity-20", {
6
6
  variants: {
7
7
  orientation: {
8
8
  vertical: "flex-col",
9
9
  horizontal: "flex-row"
10
- },
11
- disabled: {
12
- true: "cursor-not-allowed opacity-20",
13
- // TODO: rework opacity to match design when it's provided
14
- false: ""
15
10
  }
16
11
  },
17
12
  defaultVariants: {
18
- orientation: "vertical",
19
- disabled: !1
13
+ orientation: "vertical"
20
14
  }
21
- }), m = c(
15
+ }), m = n(
22
16
  ({
23
- defaultValue: r,
24
- onChange: t,
17
+ defaultValue: a,
18
+ onChange: r,
25
19
  orientation: o = "vertical",
26
- disabled: a = !1,
27
- name: e,
28
- ...i
20
+ disabled: t = !1,
21
+ name: i,
22
+ ...e
29
23
  }, l) => /* @__PURE__ */ s(
30
- f,
24
+ d,
31
25
  {
32
26
  ref: l,
33
- defaultValue: r,
34
- onValueChange: t,
35
- className: d({ orientation: o, disabled: a }),
36
- disabled: a,
27
+ defaultValue: a,
28
+ onValueChange: r,
29
+ className: c({ orientation: o }),
30
+ disabled: t,
37
31
  orientation: o,
38
- name: e,
39
- ...i
32
+ name: i,
33
+ ...e
40
34
  }
41
35
  )
42
36
  );