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

package/dist/components/PhoneField/PhoneField.js

@@ -1,218 +1,92 @@
 "use client";
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import { DROPDOWN_CONTAINER_STYLES as te } from "../../lib/constants/dropdownStyles.js";
-import { cn as oe } from "../../lib/utils.js";
-import { Root as re, Trigger as ne, Portal as ae, Content as le, Viewport as se, Item as ie } 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";
-import { forwardRef as ce, useRef as ue, useState as w, useMemo as F, useImperativeHandle as de } from "react";
-import { usePhoneInput as me, 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";
-import { Drawer as he, DrawerTrigger as fe, DrawerContent as pe, DrawerClose as Ce } from "../Drawer/Drawer.js";
-import { Input as ye } from "../Input/Input.js";
-import { SearchField as we } from "../SearchField/SearchField.js";
-import { Typography as P } from "../Typography/Typography.js";
-import L from "./CountryListItem.js";
-import R from "./CountrySelectorButton.js";
-import { DIAL_CODE_PREFIX as g, startAdornmentWidthByDialCodeLength as ge } from "./constants.js";
-import { getCountryDataListByCodes as xe, getValidatedCountryCode as u, filterCountries as Ne } from "./utils.js";
-const Se = ce(
+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(
   ({
-    value: T,
-    onChange: d,
-    countries: x,
-    placeholder: $ = "Enter phone number",
-    defaultCountryCode: n = "US",
-    hideDialCode: m = !1,
-    disableDialCodePrefill: E = !0,
-    disabled: s = !1,
-    error: b = !1,
-    isValid: V,
-    endAdornment: W,
-    endAdornmentWidth: B,
-    countrySelectorMode: _ = "dropdown",
-    type: j = "tel",
-    inputMode: k = "tel",
-    autoComplete: M = "tel",
-    autoCapitalize: q = "off",
-    autoCorrect: H = "off",
-    ...U
-  }, X) => {
-    const N = ue(null), [h, f] = w(!1), [Y, p] = w(!1), [C, S] = w(""), i = F(() => xe(x), [x]), { inputValue: z, country: y, inputRef: a, handlePhoneValueChange: G, setCountry: J } = me(
+    value: m,
+    onChange: o,
+    countries: r,
+    label: f = "Phone",
+    defaultCountryCode: t = "US",
+    disableDialCodePrefill: c = !0,
+    disabled: l = !1,
+    error: h = !1,
+    isValid: p,
+    endAdornment: C,
+    endAdornmentWidth: y,
+    type: D = "tel",
+    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 } = _(
       {
-        defaultCountry: n.toLowerCase(),
-        disableDialCodePrefill: E,
-        value: T,
-        countries: i,
+        defaultCountry: t.toLowerCase(),
+        disableDialCodePrefill: c,
+        disableDialCodeAndPrefix: !0,
+        value: m,
+        countries: I,
         onChange: (e) => {
-          d == null || d(
+          o == null || o(
             e.phone,
-            u(e.country.iso2, n)
+            d(e.country.iso2, t)
           );
         }
       }
-    ), l = u(y.iso2, n), K = 2.8, D = `${g}${y.dialCode}`, Q = m ? K : ge[y.dialCode.length];
-    de(X, () => a.current);
-    const v = (e) => {
-      e == null || e.preventDefault(), Y && requestAnimationFrame(() => {
-        var o;
-        (o = a.current) == null || o.focus();
-      }), p(!1);
-    }, Z = (e) => {
-      var r;
-      const o = (r = N.current) == null ? void 0 : r.contains(e.target);
-      p(!!o);
-    }, A = (e) => {
-      J(e.toLowerCase()), f(!1);
-    }, ee = (e) => {
-      S(e.target.value);
-    }, I = F(
-      () => Ne(i, C),
-      [i, C]
-    );
-    return /* @__PURE__ */ t(
-      ye,
+    ), s = d(n.iso2, t), V = `${q}${n.dialCode}`, x = H[n.dialCode.length];
+    return W(E, () => a.current), /* @__PURE__ */ i(
+      b,
       {
-        ...U,
+        ...v,
         ref: a,
-        type: j,
-        inputMode: k,
-        autoComplete: M,
-        autoCapitalize: q,
-        autoCorrect: H,
-        value: z,
-        onChange: G,
-        placeholder: $,
-        disabled: s,
-        error: b,
-        isValid: V,
-        endAdornment: W,
-        endAdornmentWidth: B,
-        startAdornmentWidth: Q,
-        isFocused: h,
-        startAdornment: _ === "drawer" ? /* @__PURE__ */ c(
-          he,
+        type: D,
+        inputMode: A,
+        autoComplete: w,
+        autoCapitalize: P,
+        autoCorrect: L,
+        value: S,
+        onChange: g,
+        label: f,
+        disabled: l,
+        error: h,
+        isValid: p,
+        endAdornment: C,
+        endAdornmentWidth: y,
+        startAdornmentWidth: x,
+        showStartDivider: !0,
+        startAdornment: /* @__PURE__ */ i(
+          $,
           {
-            open: h,
-            onOpenChange: f,
-            onClose: v,
+            value: s,
+            defaultValue: t,
+            countries: r,
             onAnimationEnd: (e) => {
-              e && p(!0);
+              e || requestAnimationFrame(() => {
+                var u;
+                (u = a.current) == null || u.focus();
+              });
             },
-            children: [
-              /* @__PURE__ */ t(fe, { asChild: !0, className: "outline-none", children: /* @__PURE__ */ t(
-                R,
-                {
-                  disabled: s,
-                  countryCode: l,
-                  hideDialCode: m,
-                  dialCode: D
-                }
-              ) }),
-              /* @__PURE__ */ t(pe, { className: "h-[96%]", children: /* @__PURE__ */ c("div", { className: "max-w-md w-full mx-auto flex flex-col flex-grow", children: [
-                /* @__PURE__ */ t(P, { variant: "subtitle", level: 2, className: "px-4 py-2", children: "Select country" }),
-                /* @__PURE__ */ t("div", { className: "px-4 pt-2 pb-4", children: /* @__PURE__ */ t(
-                  we,
-                  {
-                    placeholder: "Search name or number",
-                    value: C,
-                    onChange: ee
-                  }
-                ) }),
-                /* @__PURE__ */ c(
-                  "div",
-                  {
-                    className: "no-scrollbar mx-auto w-full flex flex-col flex-grow flex-basis-0 overflow-auto p-2",
-                    style: {
-                      // Explicitly setting flex-basis ensures that the remaining space in the flex container is used,
-                      // height issues are fixed, and proper scrolling is enabled.
-                      flexBasis: 0
-                    },
-                    children: [
-                      I.map((e) => {
-                        const o = O(e), r = u(
-                          o.iso2,
-                          n
-                        );
-                        return /* @__PURE__ */ t(Ce, { className: "block w-full", children: /* @__PURE__ */ t(
-                          L,
-                          {
-                            countryCode: r,
-                            countryName: o.name,
-                            dialCode: `${g}${o.dialCode}`,
-                            onClick: () => {
-                              A(r), S("");
-                            },
-                            isSelected: l === r
-                          }
-                        ) }, r);
-                      }),
-                      I.length === 0 && /* @__PURE__ */ t(P, { variant: "body", level: 2, className: "text-center", children: "No countries found" })
-                    ]
-                  }
-                )
-              ] }) })
-            ]
-          }
-        ) : /* @__PURE__ */ c(
-          re,
-          {
-            value: l,
-            open: h,
-            onOpenChange: f,
-            onValueChange: A,
-            disabled: s,
-            children: [
-              /* @__PURE__ */ t(ne, { children: /* @__PURE__ */ t(
-                R,
-                {
-                  disabled: s,
-                  countryCode: l,
-                  hideDialCode: m,
-                  dialCode: D
-                }
-              ) }),
-              /* @__PURE__ */ t(ae, { children: /* @__PURE__ */ t(
-                le,
-                {
-                  ref: (e) => {
-                    N.current = e, e && a.current && (e.style.width = `${a.current.offsetWidth}px`);
-                  },
-                  position: "popper",
-                  className: oe(te, "-ml-3 mt-5 w-auto"),
-                  onCloseAutoFocus: v,
-                  onPointerDown: Z,
-                  children: /* @__PURE__ */ t(se, { className: "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] p-2", children: i.map((e) => {
-                    const o = O(e), r = u(
-                      o.iso2,
-                      n
-                    );
-                    return /* @__PURE__ */ t(
-                      ie,
-                      {
-                        value: r,
-                        className: "outline-none",
-                        children: /* @__PURE__ */ t(
-                          L,
-                          {
-                            countryCode: r,
-                            countryName: o.name,
-                            dialCode: `${g}${o.dialCode}`,
-                            isSelected: l === r
-                          }
-                        )
-                      },
-                      r
-                    );
-                  }) })
-                }
-              ) })
-            ]
+            onChange: (e) => {
+              F(e.toLowerCase());
+            },
+            disabled: l,
+            children: /* @__PURE__ */ i(j, { value: s, label: V })
           }
         )
       }
     );
   }
 );
-Se.displayName = "PhoneField";
+N.displayName = "PhoneField";
 export {
-  Se as PhoneField,
-  Se as default
+  N as PhoneField,
+  N as default
 };

package/dist/components/PhoneField/constants.js

@@ -14,10 +14,10 @@ const r = new Set(
   ...c,
   ...l
 ].sort((o, t) => o[0].localeCompare(t[0])), h = "+", D = {
-  1: 4.4,
-  2: 5.2,
-  3: 5.8,
-  4: 6.2
+  1: 5.5,
+  2: 6,
+  3: 6.5,
+  4: 7
 };
 export {
   h as DIAL_CODE_PREFIX,

package/dist/components/Pill/Pill.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsx as i } from "react/jsx-runtime";
-import { Slot as l } 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 { jsx as l } from "react/jsx-runtime";
+import { Slot as i } 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 n } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import { forwardRef as s } from "react";
 import { cn as m } from "../../lib/utils.js";
@@ -19,16 +19,16 @@ const f = n(
     }
   }
 ), c = s(
-  ({ checked: t, children: r, asChild: a, ...o }, e) => /* @__PURE__ */ i(
-    a ? l : "button",
+  ({ checked: r, children: t, asChild: a, ...o }, e) => /* @__PURE__ */ l(
+    a ? i : "button",
     {
       ref: e,
       className: m(
-        f({ checked: t }),
-        p({ variant: "subtitle", level: 3 })
+        f({ checked: r }),
+        p({ variant: "label", level: 2 })
       ),
       ...o,
-      children: r
+      children: t
     }
   )
 );

package/dist/components/Progress/Progress.d.ts

@@ -0,0 +1,14 @@
+interface ProgressProps {
+    /** Value between 0 and 100 representing the progress percentage */
+    value: number;
+    /** Whether to use the child element as the progress indicator */
+    asChild?: boolean;
+    /** Maximum value of the progress bar */
+    max?: number;
+    /** A function to get the accessible label text representing the current value in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value. */
+    getValueLabel?: (value: number) => string;
+    /** The class name of the progress bar. To customize the background color of the progress bar, use background utility classes. To customize the indicator color, use text color utility classes. */
+    className?: string;
+}
+export declare const Progress: ({ value, asChild, max, getValueLabel, className }: ProgressProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Progress/Progress.js

@@ -0,0 +1,31 @@
+import { jsx as t } from "react/jsx-runtime";
+import { cn as n } from "../../lib/utils.js";
+import { Root as i, Indicator as l } from "../../node_modules/.pnpm/@radix-ui_react-progress@1.1.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18._wpsg2ubedou6txnsnvgmus4txq/node_modules/@radix-ui/react-progress/dist/index.js";
+const d = ({ value: r, asChild: e, max: o, getValueLabel: s, className: a }) => /* @__PURE__ */ t(
+  i,
+  {
+    className: n(
+      "relative h-1.5 w-full overflow-hidden rounded-full bg-gray-100",
+      a
+    ),
+    style: {
+      // Fix overflow clipping in Safari
+      // https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0
+      transform: "translateZ(0)"
+    },
+    value: r,
+    max: o,
+    asChild: e,
+    getValueLabel: s,
+    children: /* @__PURE__ */ t(
+      l,
+      {
+        className: "ease-[cubic-bezier(0.65, 0, 0.35, 1)] size-full bg-current transition-transform duration-[660ms]",
+        style: { transform: `translateX(-${100 - Math.min(r, 100)}%)` }
+      }
+    )
+  }
+);
+export {
+  d as Progress
+};

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

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

package/dist/components/Progress/index.js

@@ -0,0 +1,4 @@
+import { Progress as e } from "./Progress.js";
+export {
+  e as Progress
+};

package/dist/components/RadioGroup/RadioGroupItem.js

@@ -8,7 +8,7 @@ const m = c(
     {
       ref: d,
       value: a,
-      className: "h-6 w-6 rounded-full border-[0.09375rem] transition-all data-[state=checked]:border-gray-900 data-[state=unchecked]:border-gray-400 data-[state=checked]:bg-gray-900 data-[state=unchecked]:bg-transparent disabled:cursor-not-allowed disabled:opacity-20",
+      className: "size-6 rounded-full border-[0.09375rem] transition-all data-[state=checked]:border-gray-900 data-[state=unchecked]:border-gray-200 data-[state=checked]:bg-gray-900 data-[state=unchecked]:bg-transparent disabled:cursor-not-allowed disabled:opacity-50",
       disabled: r,
       ...t,
       children: /* @__PURE__ */ e(s, { className: "flex items-center justify-center", children: /* @__PURE__ */ e(i, { className: "text-gray-0" }) })

package/dist/components/SearchField/SearchField.d.ts

@@ -1,5 +1,5 @@
 import { InputProps } from '../Input';
-export interface SearchFieldProps extends Omit<InputProps, "startAdornment" | "startAdornmentWidth"> {
+export interface SearchFieldProps extends Omit<InputProps, "startAdornment" | "startAdornmentWidth" | "placeholder"> {
     /**
      * If true, the input will display in an error state with error styling
      */
@@ -18,6 +18,11 @@ export interface SearchFieldProps extends Omit<InputProps, "startAdornment" | "s
      * @default "Paste"
      */
     pasteButtonLabel?: string;
+    /**
+     * Label for the input
+     * @default "Search"
+     */
+    label?: string;
 }
 export declare const SearchField: import('react').ForwardRefExoticComponent<SearchFieldProps & import('react').RefAttributes<HTMLInputElement>>;
 export default SearchField;

package/dist/components/SearchField/SearchField.js

@@ -1,62 +1,64 @@
 "use client";
 import { jsx as a } from "react/jsx-runtime";
-import { createChangeEvent as i } from "../../lib/utils.js";
-import { forwardRef as v, useRef as I, useState as S, useImperativeHandle as T } from "react";
-import P from "../ClearButton/ClearButton.js";
-import { Magnifier as R } from "../Icons/Magnifier.js";
-import { Input as W } from "../Input/Input.js";
-import x, { PASTE_BUTTON_WIDTH as E } from "../PasteButton/PasteButton.js";
-const H = v(
+import { createChangeEvent as c } from "../../lib/utils.js";
+import { forwardRef as T, useRef as W, useState as i, useImperativeHandle as N } from "react";
+import R from "../ClearButton/ClearButton.js";
+import { Magnifier as x } from "../Icons/Magnifier.js";
+import { Input as E } from "../Input/Input.js";
+import H, { PASTE_BUTTON_WIDTH as _ } from "../PasteButton/PasteButton.js";
+const j = T(
   ({
-    showPasteButton: c,
-    pasteButtonLabel: l,
-    isValid: d,
-    disabled: f,
+    showPasteButton: l,
+    pasteButtonLabel: d,
+    isValid: s,
+    disabled: u,
     type: h = "search",
     autoComplete: A = "off",
     spellCheck: F = "false",
-    endAdornment: s,
-    endAdornmentWidth: B,
+    endAdornment: B,
+    endAdornmentWidth: C,
+    label: I = "Search",
     ...e
-  }, C) => {
-    const r = I(null), [g, o] = S(!1);
-    T(C, () => r.current);
-    let u = s, m = B;
-    return c && !f ? (u = /* @__PURE__ */ a(
-      x,
+  }, P) => {
+    const r = W(null), [S, o] = i(!1), [g, v] = i(!1);
+    N(P, () => r.current);
+    let f = B, m = C;
+    return l && !u && !g ? (f = /* @__PURE__ */ a(
+      H,
       {
         inputRef: r,
-        label: l,
+        label: d,
         onPaste: () => {
           var t;
           if (r.current) {
-            const n = i(r.current);
-            (t = e.onChange) == null || t.call(e, n);
+            const n = c(r.current);
+            (t = e.onChange) == null || t.call(e, n), v(!0);
           }
         }
       }
-    ), m = E) : g && !f && (u = /* @__PURE__ */ a(
-      P,
+    ), m = _) : S && !u && (f = /* @__PURE__ */ a(
+      R,
       {
         inputRef: r,
         onClear: () => {
           var t;
           if (r.current) {
-            const n = i(r.current);
+            const n = c(r.current);
             (t = e.onChange) == null || t.call(e, n);
           }
         }
       }
-    ), m = 1.25), /* @__PURE__ */ a(
-      W,
+    ), m = 2.3), /* @__PURE__ */ a(
+      E,
       {
         ...e,
         ref: r,
-        startAdornment: /* @__PURE__ */ a(R, {}),
-        isValid: d,
-        disabled: f,
+        startAdornment: /* @__PURE__ */ a(x, {}),
+        isValid: s,
+        disabled: u,
+        startAdornmentWidth: 2.3,
         endAdornmentWidth: m,
-        endAdornment: u,
+        endAdornment: f,
         type: h,
         autoComplete: A,
         spellCheck: F,
@@ -64,16 +66,18 @@ const H = v(
           var n;
           o(!0), (n = e.onFocus) == null || n.call(e, t);
         },
+        label: I,
         onBlur: (t) => {
           var n;
           o(!1), (n = e.onBlur) == null || n.call(e, t);
-        }
+        },
+        className: "rounded-full h-[3.125rem]"
       }
     );
   }
 );
-H.displayName = "SearchField";
+j.displayName = "SearchField";
 export {
-  H as SearchField,
-  H as default
+  j as SearchField,
+  j as default
 };