@worldcoin/mini-apps-ui-kit-react 1.0.0-canary.2 → 1.0.0-canary.20

package/dist/components/Chip/Chip.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 type ChipVariant = "default" | "success" | "warning" | "error" | "important";
-export interface ChipProps {
+interface ChipProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The variant of the chip. Default value is "default".
      */
@@ -19,8 +19,9 @@ export interface ChipProps {
      */
     className?: string;
 }
-export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & VariantProps<(props?: ({
-    variant?: "error" | "success" | "default" | "warning" | "important" | null | undefined;
+declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & VariantProps<(props?: ({
+    variant?: "error" | "default" | "success" | "warning" | "important" | null | undefined;
     isIcon?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & import('react').RefAttributes<HTMLDivElement>>;
-export default Chip;
+export { Chip };
+export type { ChipProps };

package/dist/components/Chip/Chip.js

@@ -1,9 +1,9 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { Slot as o } 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 l } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { forwardRef as f } from "react";
-import { Typography as m } from "../Typography/Typography.js";
-const c = l(
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Slot } 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 } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef } from "react";
+import { Typography } from "../Typography/Typography.js";
+const chipVariants = cva(
   "inline-flex h-7 items-center gap-2 rounded-full px-4 font-sans text-sm font-medium leading-none",
   {
     variants: {
@@ -21,17 +21,27 @@ const c = l(
     },
     defaultVariants: {
       variant: "default",
-      isIcon: !1
+      isIcon: false
     }
   }
-), d = f(
-  ({ className: e = "", icon: r, label: a, variant: i = "default" }, n) => /* @__PURE__ */ s("div", { ref: n, className: c({ variant: i, className: e, isIcon: !!r }), children: [
-    r && /* @__PURE__ */ t(o, { style: { width: "1rem", height: "1rem" }, children: r }),
-    /* @__PURE__ */ t(m, { variant: "subtitle", level: 4, children: a })
-  ] })
 );
-d.displayName = "Chip";
+const Chip = forwardRef(
+  ({ icon, label, variant = "default", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: chipVariants({ variant, className, isIcon: !!icon }),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx(Slot, { style: { width: "1rem", height: "1rem" }, children: icon }),
+          /* @__PURE__ */ jsx(Typography, { variant: "subtitle", level: 4, children: label })
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
 export {
-  d as Chip,
-  d as default
+  Chip
 };

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

@@ -1 +1 @@
-export * from './Chip';
+export { Chip, type ChipProps } from './Chip';

package/dist/components/CircularIcon/CircularIcon.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+type CircularIconSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface CircularIconProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    className?: string;
+    size?: CircularIconSize;
+}
+declare function CircularIcon({ children, className, size, ...props }: CircularIconProps): import("react/jsx-runtime").JSX.Element;
+export { CircularIcon };
+export type { CircularIconProps };

package/dist/components/CircularIcon/CircularIcon.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } 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 { cn } from "../../lib/utils.js";
+const sizeClasses = {
+  xs: "size-6",
+  sm: "size-11",
+  md: "size-12",
+  lg: "size-16",
+  xl: "size-[5.5rem]"
+};
+const iconClasses = {
+  xs: "size-[0.875rem]",
+  sm: "size-[1.5rem]",
+  md: "size-[1.625rem]",
+  lg: "size-[2.125rem]",
+  xl: "size-12"
+};
+function CircularIcon({ children, className, size = "md", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-full flex items-center justify-center",
+        sizeClasses[size],
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(Slot, { className: iconClasses[size], children })
+    }
+  );
+}
+export {
+  CircularIcon
+};

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

@@ -0,0 +1 @@
+export { CircularIcon, type CircularIconProps } from './CircularIcon';

package/dist/components/ClearButton/Clear.d.ts

@@ -4,5 +4,6 @@ interface ClearProps {
      */
     className?: string;
 }
-export declare function Clear({ className }: ClearProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare function Clear({ className }: ClearProps): import("react/jsx-runtime").JSX.Element;
+export { Clear };
+export type { ClearProps };

package/dist/components/ClearButton/Clear.js

@@ -1,7 +1,7 @@
-import { jsx as r } from "react/jsx-runtime";
-import { cn as t } from "../../lib/utils.js";
-function s({ className: e }) {
-  return /* @__PURE__ */ r(
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function Clear({ className }) {
+  return /* @__PURE__ */ jsx(
     "svg",
     {
       width: "24",
@@ -9,8 +9,8 @@ function s({ className: e }) {
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className: t("size-6", e),
-      children: /* @__PURE__ */ r(
+      className: cn("size-6", className),
+      children: /* @__PURE__ */ jsx(
         "path",
         {
           d: "M6.75729 17.2426L11.9999 12M17.2426 6.75736L11.9999 12M11.9999 12L6.75729 6.75736M11.9999 12L17.2426 17.2426",
@@ -23,5 +23,5 @@ function s({ className: e }) {
   );
 }
 export {
-  s as Clear
+  Clear
 };

package/dist/components/ClearButton/ClearButton.d.ts

@@ -10,6 +10,6 @@ interface ClearButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      */
     onClear?: () => void;
 }
-export declare const CLEAR_BUTTON_WIDTH = 1.25;
 declare const ClearButton: React.ForwardRefExoticComponent<ClearButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default ClearButton;
+export { ClearButton };
+export type { ClearButtonProps };

package/dist/components/ClearButton/ClearButton.js

@@ -1,27 +1,31 @@
-import { jsx as e } from "react/jsx-runtime";
-import * as m from "react";
-import { cn as u } from "../../lib/utils.js";
-import { Clear as l } from "./Clear.js";
-const B = 1.25, i = m.forwardRef(
-  ({ children: p, inputRef: t, className: a, onClear: r, ...n }, c) => {
-    const s = (o) => {
-      o.preventDefault(), o.stopPropagation(), t && "current" in t && t.current && (t.current.value = "", r == null || r());
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { Clear } from "./Clear.js";
+const ClearButton = React.forwardRef(
+  ({ children, inputRef, className, onClear, ...props }, ref) => {
+    const handleClear = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (inputRef && "current" in inputRef && inputRef.current) {
+        inputRef.current.value = "";
+        onClear == null ? void 0 : onClear();
+      }
     };
-    return /* @__PURE__ */ e(
+    return /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        ref: c,
-        className: u(a),
-        onMouseDown: s,
-        ...n,
-        children: /* @__PURE__ */ e(l, {})
+        ref,
+        className: cn(className),
+        onMouseDown: handleClear,
+        ...props,
+        children: /* @__PURE__ */ jsx(Clear, {})
       }
     );
   }
 );
-i.displayName = "ClearButton";
+ClearButton.displayName = "ClearButton";
 export {
-  B as CLEAR_BUTTON_WIDTH,
-  i as default
+  ClearButton
 };

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

@@ -1 +1 @@
-export { default } from './ClearButton';
+export { ClearButton, type ClearButtonProps } from './ClearButton';

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -11,6 +11,7 @@ interface ColorPickerGroupProps extends Omit<RadixRadioGroupProps, "value" | "on
     /** Callback fired when the selected color changes */
     onChange?: (value: string) => void;
 }
-export declare const ColorPickerItem: import('react').ForwardRefExoticComponent<ColorPickerItemProps & import('react').RefAttributes<HTMLButtonElement>>;
-export declare const ColorPickerGroup: import('react').ForwardRefExoticComponent<ColorPickerGroupProps & import('react').RefAttributes<HTMLDivElement>>;
-export default ColorPickerGroup;
+declare const ColorPickerItem: import('react').ForwardRefExoticComponent<ColorPickerItemProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const ColorPickerGroup: import('react').ForwardRefExoticComponent<ColorPickerGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { ColorPickerGroup, ColorPickerItem };
+export type { ColorPickerGroupProps, ColorPickerItemProps };

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,41 +1,39 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Item as n, Indicator as i, Root as c } 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";
-import { forwardRef as s } from "react";
-const f = s(
-  ({ value: e, ...r }, o) => /* @__PURE__ */ t(
-    n,
-    {
-      ref: o,
-      value: e,
-      className: "size-[2.5rem] cursor-default rounded-full outline-none flex items-center justify-center relative disabled:opacity-90 disabled:cursor-not-allowed",
-      style: {
-        background: e
-      },
-      ...r,
-      children: /* @__PURE__ */ t(
-        i,
-        {
-          className: "absolute flex size-[2.75rem] items-center rounded-full justify-center",
-          style: { boxShadow: `0px 0px 0px 4px ${e}` }
-        }
-      )
-    }
-  )
-), p = s(
-  ({ value: e, onChange: r, children: o, ...l }, a) => /* @__PURE__ */ t(
-    c,
-    {
-      ref: a,
-      value: e,
-      onValueChange: r,
-      className: "flex gap-4 items-center",
-      ...l,
-      children: o
-    }
-  )
+import { jsx } from "react/jsx-runtime";
+import { Item as Item2, Indicator, Root as Root2 } 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";
+import { forwardRef } from "react";
+const ColorPickerItem = forwardRef(
+  ({ value, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Item2,
+      {
+        ref,
+        value,
+        className: "size-[3.25rem] cursor-default rounded-full outline-none flex items-center justify-center relative disabled:opacity-90 disabled:cursor-not-allowed",
+        style: {
+          background: value
+        },
+        ...props,
+        children: /* @__PURE__ */ jsx(Indicator, { className: "size-11 rounded-full bg-transparent border-2 border-gray-0" })
+      }
+    );
+  }
+);
+const ColorPickerGroup = forwardRef(
+  ({ value, onChange, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Root2,
+      {
+        ref,
+        value,
+        onValueChange: onChange,
+        className: "flex gap-4 items-center",
+        ...props,
+        children
+      }
+    );
+  }
 );
 export {
-  p as ColorPickerGroup,
-  f as ColorPickerItem,
-  p as default
+  ColorPickerGroup,
+  ColorPickerItem
 };

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

@@ -1 +1,2 @@
-export * from './ColorPicker';
+export { ColorPickerGroup, ColorPickerItem } from './ColorPicker';
+export type { ColorPickerGroupProps, ColorPickerItemProps } from './ColorPicker';

package/dist/components/CountryDrawer/CountryDrawer.d.ts

@@ -1,12 +1,24 @@
 import { CountryCode } from '../Flag';
 interface CountryDrawerProps {
+    /** Currently selected country code */
     value: CountryCode;
+    /** Optional list of country codes to show. If not provided, shows all countries */
     countries?: CountryCode[];
+    /** Whether the drawer trigger is disabled */
     disabled?: boolean;
+    /** Default country code when no value is selected */
     defaultValue?: CountryCode;
+    /** Content to render as the drawer trigger */
     children: React.ReactNode;
+    /** Title text shown in the drawer header */
+    title?: string;
+    /** Label text shown in the search field */
+    searchLabel?: string;
+    /** Callback fired when a country is selected */
     onChange: (countryCode: string) => void;
+    /** Optional callback fired when drawer open/close animation completes */
     onAnimationEnd?: (open: boolean) => void;
 }
-export declare function CountryDrawer({ onChange, value, countries, onAnimationEnd, disabled, children, defaultValue, }: CountryDrawerProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare function CountryDrawer({ onChange, value, countries, onAnimationEnd, disabled, children, defaultValue, title, searchLabel, }: CountryDrawerProps): import("react/jsx-runtime").JSX.Element;
+export { CountryDrawer };
+export type { CountryDrawerProps };

package/dist/components/CountryDrawer/CountryDrawer.js

@@ -1,63 +1,74 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { useState as i, useRef as S } from "react";
-import { Button as w } from "../Button/Button.js";
-import { Drawer as v, DrawerTrigger as x, DrawerContent as D, DrawerClose as T } from "../Drawer/Drawer.js";
-import { XMark as F } from "../Icons/XMark.js";
-import { GroupedCountryList as N } from "../PhoneField/GroupedCountryList.js";
-import { SearchField as j } from "../SearchField/SearchField.js";
-import { TopBar as B } from "../TopBar/TopBar.js";
-import { useCountryFiltering as G } from "./useCountryFiltering.js";
-import { useCountryGrouping as O } from "./useCountryGrouping.js";
-function H({
-  onChange: s,
-  value: u,
-  countries: c,
-  onAnimationEnd: m,
-  disabled: f = !1,
-  children: h,
-  defaultValue: p = "US"
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { XMark } from "../Icons/XMark.js";
+import { GroupedCountryList } from "../PhoneField/GroupedCountryList.js";
+import { useCountryFiltering } from "./useCountryFiltering.js";
+import { useCountryGrouping } from "./useCountryGrouping.js";
+import { Drawer, DrawerTrigger, DrawerContent, DrawerClose } from "../Drawer/Drawer.js";
+import { TopBar } from "../TopBar/TopBar.js";
+import { Button } from "../Button/Button.js";
+import { SearchField } from "../SearchField/SearchField.js";
+function CountryDrawer({
+  onChange,
+  value,
+  countries,
+  onAnimationEnd,
+  disabled = false,
+  children,
+  defaultValue = "US",
+  title = "Country",
+  searchLabel
 }) {
-  const [t, o] = i(""), [n, a] = i(!1), d = S(null), C = (r) => {
-    o(r.target.value);
-  }, g = G({
-    countries: c,
-    searchText: t
-  }), y = O({
-    countries: g,
-    defaultValue: p
+  const [searchText, setSearchText] = useState("");
+  const [open, setOpen] = useState(false);
+  const searchRef = useRef(null);
+  const handleSearchChange = (event) => {
+    setSearchText(event.target.value);
+  };
+  const filteredCountries = useCountryFiltering({
+    countries,
+    searchText
   });
-  return /* @__PURE__ */ l(v, { open: n, onOpenChange: a, onAnimationEnd: m, height: "full", children: [
-    /* @__PURE__ */ e(x, { asChild: !0, className: "outline-none", disabled: f, children: h }),
-    /* @__PURE__ */ l(D, { children: [
-      /* @__PURE__ */ e(
-        B,
+  const groupedCountries = useCountryGrouping({
+    countries: filteredCountries,
+    defaultValue
+  });
+  const handleCountrySelect = (countryCode) => {
+    onChange(countryCode);
+    setSearchText("");
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Drawer, { open, onOpenChange: setOpen, onAnimationEnd, height: "full", children: [
+    /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, className: "outline-none", disabled, children }),
+    /* @__PURE__ */ jsxs(DrawerContent, { children: [
+      /* @__PURE__ */ jsx(
+        TopBar,
         {
-          title: "Country",
-          startAdornment: /* @__PURE__ */ e(T, { asChild: !0, children: /* @__PURE__ */ e(w, { variant: "tertiary", size: "icon", children: /* @__PURE__ */ e(F, {}) }) })
+          title,
+          startAdornment: /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "icon", children: /* @__PURE__ */ jsx(XMark, {}) }) })
         }
       ),
-      /* @__PURE__ */ e("div", { className: "p-6", children: /* @__PURE__ */ e(
-        j,
+      /* @__PURE__ */ jsx("div", { className: "p-6 shrink-0", children: /* @__PURE__ */ jsx(
+        SearchField,
         {
-          ref: d,
-          value: t,
-          onChange: C,
-          autoFocus: n
+          ref: searchRef,
+          value: searchText,
+          onChange: handleSearchChange,
+          label: searchLabel
         }
       ) }),
-      /* @__PURE__ */ e("div", { className: "no-scrollbar w-full overflow-auto px-6 h-full", children: /* @__PURE__ */ e(
-        N,
+      /* @__PURE__ */ jsx("div", { className: "no-scrollbar w-full overflow-auto px-6 grow", children: /* @__PURE__ */ jsx(
+        GroupedCountryList,
         {
-          groupedCountries: y,
-          onSelect: (r) => {
-            s(r), o(""), a(!1);
-          },
-          value: u
+          groupedCountries,
+          onSelect: handleCountrySelect,
+          value
         }
       ) })
     ] })
   ] });
 }
 export {
-  H as CountryDrawer
+  CountryDrawer
 };

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

@@ -1 +1 @@
-export * from './CountryDrawer';
+export { CountryDrawer, type CountryDrawerProps } from './CountryDrawer';

package/dist/components/CountryDrawer/useCountryFiltering.js

@@ -1,9 +1,10 @@
-import { defaultCountries 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 { getCountryDataListByCodes as i, filterCountries as n } from "../PhoneField/utils.js";
-function f({ countries: t, searchText: r }) {
-  const e = t ? i(t) : o;
-  return n(e, r);
+import { defaultCountries 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 { getCountryDataListByCodes, filterCountries } from "../PhoneField/utils.js";
+function useCountryFiltering({ countries, searchText }) {
+  const richCountries = countries ? getCountryDataListByCodes(countries) : R;
+  const filteredCountries = filterCountries(richCountries, searchText);
+  return filteredCountries;
 }
 export {
-  f as useCountryFiltering
+  useCountryFiltering
 };

package/dist/components/CountryDrawer/useCountryGrouping.js

@@ -1,17 +1,23 @@
-import { 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 { getValidatedCountryCode as p } from "../PhoneField/utils.js";
-function a({
-  countries: t,
-  defaultValue: n = "US"
+import { parseCountry as M } from "../../node_modules/.pnpm/react-international-phone@4.4.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
+import { getValidatedCountryCode } from "../PhoneField/utils.js";
+function useCountryGrouping({
+  countries,
+  defaultValue = "US"
 }) {
-  return t.reduce((r, u) => {
-    const e = s(u), o = e.name.charAt(0).toUpperCase();
-    return r[o] || (r[o] = []), r[o].push({
-      countryCode: p(e.iso2, n),
-      name: e.name
-    }), r;
+  const groupedCountries = countries.reduce((acc, country) => {
+    const parsedCountry = M(country);
+    const firstLetter = parsedCountry.name.charAt(0).toUpperCase();
+    if (!acc[firstLetter]) {
+      acc[firstLetter] = [];
+    }
+    acc[firstLetter].push({
+      countryCode: getValidatedCountryCode(parsedCountry.iso2, defaultValue),
+      name: parsedCountry.name
+    });
+    return acc;
   }, {});
+  return groupedCountries;
 }
 export {
-  a as useCountryGrouping
+  useCountryGrouping
 };