@worldcoin/mini-apps-ui-kit-react 1.0.0-canary.15 → 1.0.0-canary.16

package/dist/components/PhoneField/PhoneField.d.ts

@@ -1,6 +1,6 @@
 import { CountryCode } from '../Flag/Flag';
 import { InputProps } from '../Input';
-export interface PhoneFieldProps extends Omit<InputProps, "onChange" | "startAdornment" | "startAdornmentWidth" | "placeholder"> {
+export interface PhoneFieldProps extends Omit<InputProps, "onChange" | "startAdornment" | "placeholder"> {
     /**
      * Current phone number value.
      */
@@ -48,11 +48,6 @@ export interface PhoneFieldProps extends Omit<InputProps, "onChange" | "startAdo
      * The component should use currentColor to match the Input's styling.
      */
     endAdornment?: React.ReactNode;
-    /**
-     * Width of the end adornment in rem
-     * @default 1.25
-     */
-    endAdornmentWidth?: number;
 }
 export declare const PhoneField: import('react').ForwardRefExoticComponent<PhoneFieldProps & import('react').RefAttributes<HTMLDivElement>>;
 export default PhoneField;

package/dist/components/PhoneField/PhoneField.js

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

package/dist/components/PhoneField/constants.d.ts

@@ -1,4 +1,3 @@
 import { CountryData } from 'react-international-phone';
 export declare const extendedCountryDataList: CountryData[];
 export declare const DIAL_CODE_PREFIX = "+";
-export declare const startAdornmentWidthByDialCodeLength: Record<string, number>;

package/dist/components/PhoneField/constants.js

@@ -1,26 +1,20 @@
 import { countries as i } from "../../node_modules/.pnpm/countries-list@3.1.1/node_modules/countries-list/mjs/index.js";
 import { defaultCountries as e, parseCountry as s } from "../../node_modules/.pnpm/react-international-phone@4.4.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
-import { countryCodes as d } from "../Flag/constants.js";
+import { countryCodes as c } from "../Flag/constants.js";
 const r = new Set(
-  d.map((o) => o.toLowerCase())
-), c = e.filter(
+  c.map((o) => o.toLowerCase())
+), p = e.filter(
   (o) => r.has(s(o).iso2)
-), p = new Set(e.map((o) => s(o).iso2)), m = Array.from(r).filter(
-  (o) => !p.has(o)
-), l = Object.entries(i).filter(([o]) => m.includes(o.toLowerCase())).map(([o, t]) => {
+), d = new Set(e.map((o) => s(o).iso2)), m = Array.from(r).filter(
+  (o) => !d.has(o)
+), f = Object.entries(i).filter(([o]) => m.includes(o.toLowerCase())).map(([o, t]) => {
   const { name: n, phone: a } = t, u = a[0].toString(), C = o.toLowerCase();
   return [n, C, u];
-}), w = [
-  ...c,
-  ...l
-].sort((o, t) => o[0].localeCompare(t[0])), h = "+", D = {
-  1: 5.5,
-  2: 6,
-  3: 6.5,
-  4: 7
-};
+}), L = [
+  ...p,
+  ...f
+].sort((o, t) => o[0].localeCompare(t[0])), S = "+";
 export {
-  h as DIAL_CODE_PREFIX,
-  w as extendedCountryDataList,
-  D as startAdornmentWidthByDialCodeLength
+  S as DIAL_CODE_PREFIX,
+  L as extendedCountryDataList
 };

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

@@ -1,5 +1,5 @@
 import { InputProps } from '../Input';
-export interface SearchFieldProps extends Omit<InputProps, "startAdornment" | "startAdornmentWidth" | "placeholder"> {
+export interface SearchFieldProps extends Omit<InputProps, "startAdornment" | "placeholder"> {
     /**
      * If true, the input will display in an error state with error styling
      */

package/dist/components/SearchField/SearchField.js

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

package/dist/components/Select/Select.d.ts

@@ -1,4 +1,10 @@
 import * as RadixSelect from "@radix-ui/react-select";
+export declare const selectVariants: (props?: ({
+    error?: boolean | null | undefined;
+    isLabel?: boolean | null | undefined;
+    isFocused?: boolean | null | undefined;
+    variant?: "default" | "floating-label" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface SelectOption {
     /**
      * The value of the option.

package/dist/components/Select/Select.js

@@ -1,66 +1,98 @@
 "use client";
 import { jsxs as d, jsx as r } from "react/jsx-runtime";
 import { DROPDOWN_CONTAINER_STYLES as x } from "../../lib/constants/dropdownStyles.js";
-import { Root as N, Trigger as S, Value as I, Icon as R, Portal as V, Content as j, Viewport as A, Item as T, ItemText as D } 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 E, useState as C, useEffect as O } from "react";
-import { cn as t } from "../../lib/utils.js";
-import { ArrowDown as P } from "../Icons/ArrowDown.js";
-import { inputVariants as _ } from "../Input/Input.js";
-import { typographyVariants as m } from "../Typography/Typography.js";
-const $ = E(
+import { Root as N, Trigger as S, Value as V, Icon as I, Portal as R, Content as j, Viewport as A, Item as T, ItemText as D } 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 { cva as E } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef as F, useState as C, useEffect as L } from "react";
+import { cn as a } from "../../lib/utils.js";
+import { ArrowDown as O } from "../Icons/ArrowDown.js";
+import { typographyVariants as f } from "../Typography/Typography.js";
+const P = E(
+  a(
+    "flex items-center justify-between whitespace-nowrap [&>span:first-of-type]:line-clamp-1",
+    "peer h-[3.5rem] w-full rounded-[0.625rem] border border-gray-100 bg-gray-100 px-4 outline-none transition duration-300",
+    "placeholder:text-gray-500",
+    "focus:border-gray-300 focus:bg-gray-0 focus-visible:outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    // Radix Select styles
+    "data-[placeholder]:text-gray-500",
+    "data-[state=closed]:bg-gray-100 data-[state=closed]:border-gray-100"
+  ),
+  {
+    variants: {
+      error: {
+        true: "border-error-600 focus:border-error-600 bg-gray-0"
+      },
+      isLabel: {
+        true: "pt-6 pb-2 placeholder:text-transparent",
+        false: ""
+      },
+      isFocused: {
+        true: "focus:border-gray-300 focus:bg-gray-0 focus-visible:outline-none",
+        false: ""
+      },
+      variant: {
+        "floating-label": "pt-6 pb-2 placeholder:text-transparent",
+        default: ""
+      }
+    },
+    defaultVariants: {
+      error: !1,
+      isFocused: !1,
+      variant: "default"
+    }
+  }
+), _ = F(
   ({
     options: l = [],
-    placeholder: f = "Select...",
-    value: i,
-    onChange: h,
-    open: a,
+    placeholder: u = "Select...",
+    value: o,
+    onChange: m,
+    open: t,
     onOpenChange: s,
-    error: p = !1,
-    defaultOpen: o = !1,
-    disabled: u = !1,
-    name: g,
+    error: b = !1,
+    defaultOpen: i = !1,
+    disabled: g = !1,
+    name: p,
     defaultValue: y,
-    ...b
+    ...h
   }, v) => {
-    const [c, n] = C(a ?? o), w = (e) => {
-      n(e), s == null || s(e);
+    const [n, c] = C(t ?? i), w = (e) => {
+      c(e), s == null || s(e);
     };
-    return O(() => {
-      a !== void 0 && n(a);
-    }, [a]), Array.isArray(l) || console.error("`options` must be an array of objects with `value` and `label` keys."), /* @__PURE__ */ d(
+    return L(() => {
+      t !== void 0 && c(t);
+    }, [t]), Array.isArray(l) || console.error("`options` must be an array of objects with `value` and `label` keys."), /* @__PURE__ */ d(
       N,
       {
-        value: i,
-        open: c,
-        onValueChange: h,
-        defaultOpen: o,
+        value: o,
+        open: n,
+        onValueChange: m,
+        defaultOpen: i,
         onOpenChange: w,
-        name: g,
-        disabled: u,
+        name: p,
+        disabled: g,
         defaultValue: y,
-        ...b,
+        ...h,
         children: [
           /* @__PURE__ */ d(
             S,
             {
               ref: v,
-              className: t(
-                m({ variant: "body", level: 3 }),
-                _({ error: p, isFocused: c }),
-                "flex items-center justify-between whitespace-nowrap [&>span:first-of-type]:line-clamp-1",
-                "data-[placeholder]:text-gray-500",
-                "data-[state=closed]:bg-gray-100 data-[state=closed]:border-gray-100"
+              className: a(
+                f({ variant: "body" }),
+                P({ error: b, isFocused: n })
               ),
               children: [
-                /* @__PURE__ */ r(I, { placeholder: f }),
-                /* @__PURE__ */ r(R, { children: /* @__PURE__ */ r(P, { className: "text-gray-400 size-6" }) })
+                /* @__PURE__ */ r(V, { placeholder: u }),
+                /* @__PURE__ */ r(I, { children: /* @__PURE__ */ r(O, { className: "text-gray-400 size-6" }) })
               ]
             }
           ),
-          /* @__PURE__ */ r(V, { children: /* @__PURE__ */ r(j, { position: "popper", className: t(x), children: /* @__PURE__ */ r(
+          /* @__PURE__ */ r(R, { children: /* @__PURE__ */ r(j, { position: "popper", className: a(x), children: /* @__PURE__ */ r(
             A,
             {
-              className: t(
+              className: a(
                 "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] p-2",
                 l.length === 0 && "hidden"
               ),
@@ -68,10 +100,10 @@ const $ = E(
                 T,
                 {
                   value: e.value,
-                  className: t(
+                  className: a(
                     "w-full cursor-pointer select-none rounded-md p-2 font-sans outline-none hover:bg-gray-50",
-                    i === e.value && "bg-gray-100",
-                    m({ variant: "body", level: 2 })
+                    o === e.value && "bg-gray-100",
+                    f({ variant: "body", level: 3 })
                   ),
                   children: /* @__PURE__ */ r(D, { children: e.label })
                 },
@@ -84,8 +116,9 @@ const $ = E(
     );
   }
 );
-$.displayName = "Select";
+_.displayName = "Select";
 export {
-  $ as Select,
-  $ as default
+  _ as Select,
+  _ as default,
+  P as selectVariants
 };

package/dist/components/Select/index.js

@@ -1,4 +1,5 @@
-import { Select as r } from "./Select.js";
+import { Select as r, selectVariants as a } from "./Select.js";
 export {
-  r as Select
+  r as Select,
+  a as selectVariants
 };

package/dist/components/TextArea/TextArea.d.ts

@@ -1,7 +1,11 @@
 import { VariantProps } from 'class-variance-authority';
-import { inputVariants } from '../Input/Input';
 import * as React from "react";
-export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "className" | "style" | "placeholder">, VariantProps<typeof inputVariants> {
+export declare const textAreaVariants: (props?: ({
+    error?: boolean | null | undefined;
+    isFocused?: boolean | null | undefined;
+    variant?: "default" | "floating-label" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "className" | "style" | "placeholder">, VariantProps<typeof textAreaVariants> {
     /**
      * If true, the textarea will display in an error state with error styling
      */

package/dist/components/TextArea/TextArea.js

@@ -1,37 +1,55 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { cva as d } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import * as c from "react";
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { cva as c } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import * as p from "react";
 import { cn as r } from "../../lib/utils.js";
-import { inputVariants as x } from "../Input/Input.js";
 import { typographyVariants as l } from "../Typography/Typography.js";
-const u = d("min-h-[7.5rem] resize-y", {
-  variants: {
-    variant: {
-      "floating-label": "pt-8",
-      default: "pt-4"
+const b = c(
+  r(
+    "min-h-[7.5rem] resize-y peer w-full rounded-[0.625rem] border border-gray-100 bg-gray-100 px-4 outline-none transition duration-300",
+    "placeholder:text-gray-500",
+    "focus:border-gray-300 focus:bg-gray-0 focus-visible:outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  ),
+  {
+    variants: {
+      error: {
+        true: "border-error-600 focus:border-error-600 bg-gray-0"
+      },
+      isFocused: {
+        true: "focus:border-gray-300 focus:bg-gray-0 focus-visible:outline-none",
+        false: ""
+      },
+      variant: {
+        "floating-label": "pt-8 pb-2 placeholder:text-transparent",
+        default: "pt-4"
+      }
+    },
+    defaultVariants: {
+      error: !1,
+      isFocused: !1,
+      variant: "default"
     }
   }
-}), b = c.forwardRef(
-  ({ error: s, isFocused: m = !1, disabled: p, label: t, variant: e = "default", id: a, ...i }, f) => /* @__PURE__ */ n("div", { className: "relative flex w-full items-center group", children: [
-    /* @__PURE__ */ o(
+), g = p.forwardRef(
+  ({ error: s, isFocused: d = !1, disabled: i, label: e, variant: a = "default", id: o, ...n }, f) => /* @__PURE__ */ u("div", { className: "relative flex w-full items-center group", children: [
+    /* @__PURE__ */ t(
       "textarea",
       {
         ref: f,
-        id: a,
-        placeholder: t,
-        disabled: p,
+        id: o,
+        placeholder: e,
+        disabled: i,
         className: r(
-          x({ error: s, isFocused: m, variant: e }),
-          l({ variant: "body", level: 3 }),
-          u({ variant: e })
+          b({ error: s, isFocused: d, variant: a }),
+          l({ variant: "body" })
         ),
-        ...i
+        ...n
       }
     ),
-    e === "floating-label" && /* @__PURE__ */ o(
+    a === "floating-label" && /* @__PURE__ */ t(
       "label",
       {
-        htmlFor: a,
+        htmlFor: o,
         className: r(
           l({ variant: "body", level: 3 }),
           r(
@@ -42,13 +60,14 @@ const u = d("min-h-[7.5rem] resize-y", {
             "absolute text-gray-500 duration-300 transform text-xs top-0 pt-4 z-10 pl-4 w-full bg-gray-100 rounded-t-[0.625rem] border-t border-x border-gray-100"
           )
         ),
-        children: t
+        children: e
       }
     )
   ] })
 );
-b.displayName = "TextArea";
+g.displayName = "TextArea";
 export {
-  b as TextArea,
-  b as default
+  g as TextArea,
+  g as default,
+  b as textAreaVariants
 };