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

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,34 @@
+import { RadioGroupProps as RadixRadioGroupProps } from '@radix-ui/react-radio-group';
+export interface RadioGroupProps extends Omit<RadixRadioGroupProps, "onValueChange" | "onChange" | "className"> {
+    /**
+     * The value of the radio item that should be checked when initially rendered.
+     * Use when you do not need to control the state of the radio items.
+     */
+    defaultValue?: string;
+    /**
+     * The controlled value of the radio item to check.
+     * Should be used in conjunction with onChange.
+     */
+    value?: string;
+    /**
+     * Callback function that is triggered when the value of the radio group changes.
+     * @param value - The new value of the selected radio group item.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * When true, prevents the user from interacting with radio items.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The orientation of the radio group.
+     * @default "vertical"
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * The name of the group. Submitted with its owning form as part of a name/value pair.
+     */
+    name?: string;
+}
+export declare const RadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export default RadioGroup;

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,47 @@
+import { jsx as s } from "react/jsx-runtime";
+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";
+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 c } from "react";
+const d = n("flex", {
+  variants: {
+    orientation: {
+      vertical: "flex-col",
+      horizontal: "flex-row"
+    },
+    disabled: {
+      true: "cursor-not-allowed opacity-20",
+      // TODO: rework opacity to match design when it's provided
+      false: ""
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    disabled: !1
+  }
+}), m = c(
+  ({
+    defaultValue: r,
+    onChange: t,
+    orientation: o = "vertical",
+    disabled: a = !1,
+    name: e,
+    ...i
+  }, l) => /* @__PURE__ */ s(
+    f,
+    {
+      ref: l,
+      defaultValue: r,
+      onValueChange: t,
+      className: d({ orientation: o, disabled: a }),
+      disabled: a,
+      orientation: o,
+      name: e,
+      ...i
+    }
+  )
+);
+m.displayName = "RadioGroup";
+export {
+  m as RadioGroup,
+  m as default
+};

package/dist/components/RadioGroup/RadioGroupItem.d.ts

@@ -0,0 +1,13 @@
+import { RadioGroupItemProps as RadixRadioGroupItemProps } from '@radix-ui/react-radio-group';
+export interface RadioGroupItemProps extends Omit<RadixRadioGroupItemProps, "className"> {
+    /**
+     * The value of the radio group item.
+     */
+    value: string;
+    /**
+     * When true, prevents the user from interacting with the radio item.
+     */
+    disabled?: boolean;
+}
+export declare const RadioGroupItem: import('react').ForwardRefExoticComponent<RadioGroupItemProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default RadioGroupItem;

package/dist/components/RadioGroup/RadioGroupItem.js

@@ -0,0 +1,37 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Item as s, Indicator 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";
+import { cva as c } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef as i } from "react";
+import { Tick as m } from "../Icons/Tick.js";
+const n = c(
+  "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",
+  {
+    variants: {
+      disabled: {
+        true: "cursor-not-allowed opacity-20",
+        // TODO: rework opacity to match design when it's provided
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: !1
+    }
+  }
+), l = i(
+  ({ value: r, disabled: e, ...t }, o) => /* @__PURE__ */ a(
+    s,
+    {
+      ref: o,
+      value: r,
+      className: n({ disabled: e }),
+      disabled: e,
+      ...t,
+      children: /* @__PURE__ */ a(d, { className: "flex items-center justify-center", children: /* @__PURE__ */ a(m, { className: "text-gray-0" }) })
+    }
+  )
+);
+l.displayName = "RadioGroupItem";
+export {
+  l as RadioGroupItem,
+  l as default
+};

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

@@ -0,0 +1,2 @@
+export * from './RadioGroup';
+export * from './RadioGroupItem';

package/dist/components/RadioGroup/index.js

@@ -0,0 +1,6 @@
+import { RadioGroup as p } from "./RadioGroup.js";
+import { RadioGroupItem as m } from "./RadioGroupItem.js";
+export {
+  p as RadioGroup,
+  m as RadioGroupItem
+};

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

@@ -0,0 +1,23 @@
+import { InputProps } from '../Input';
+export interface SearchFieldProps extends Omit<InputProps, "startAdornment" | "startAdornmentWidth"> {
+    /**
+     * If true, the input will display in an error state with error styling
+     */
+    error?: boolean;
+    /**
+     * If true, the input will display in a valid state with success styling
+     */
+    isValid?: boolean;
+    /**
+     * If true, displays a paste button as an end adornment
+     * @default false
+     */
+    showPasteButton?: boolean;
+    /**
+     * Label for the paste button
+     * @default "Paste"
+     */
+    pasteButtonLabel?: string;
+}
+export declare const SearchField: import('react').ForwardRefExoticComponent<SearchFieldProps & import('react').RefAttributes<HTMLInputElement>>;
+export default SearchField;

package/dist/components/SearchField/SearchField.js

@@ -0,0 +1,43 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as A, useRef as h, useImperativeHandle as T } from "react";
+import { Magnifier as I } from "../Icons/Magnifier.js";
+import { Input as R } from "../Input/Input.js";
+import S, { PASTE_BUTTON_WIDTH as W } from "../PasteButton/PasteButton.js";
+const x = A(
+  ({
+    showPasteButton: m,
+    pasteButtonLabel: f,
+    isValid: d,
+    disabled: t,
+    type: a = "search",
+    autoComplete: i = "off",
+    spellCheck: l = "false",
+    endAdornment: p,
+    endAdornmentWidth: s,
+    ...u
+  }, c) => {
+    const e = h(null);
+    T(c, () => e.current);
+    let n = p, o = s;
+    return m && !t && (n = /* @__PURE__ */ r(S, { inputRef: e, label: f }), o = W), /* @__PURE__ */ r(
+      R,
+      {
+        ...u,
+        ref: e,
+        startAdornment: /* @__PURE__ */ r(I, {}),
+        isValid: d,
+        disabled: t,
+        endAdornmentWidth: o,
+        endAdornment: n,
+        type: a,
+        autoComplete: i,
+        spellCheck: l
+      }
+    );
+  }
+);
+x.displayName = "SearchField";
+export {
+  x as SearchField,
+  x as default
+};

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

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

package/dist/components/SearchField/index.js

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

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

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function ArrowDown(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/ArrowDown.js

@@ -0,0 +1,27 @@
+import { jsx as o } from "react/jsx-runtime";
+function n(r) {
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      width: "21",
+      height: "20",
+      viewBox: "0 0 21 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...r,
+      children: /* @__PURE__ */ o(
+        "path",
+        {
+          d: "M5.66602 7.5L9.95891 11.7929C10.2922 12.1262 10.4589 12.2929 10.666 12.2929C10.8731 12.2929 11.0398 12.1262 11.3731 11.7929L15.666 7.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+export {
+  n as ArrowDown
+};

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

@@ -0,0 +1,65 @@
+import * as RadixSelect from "@radix-ui/react-select";
+export interface SelectOption {
+    /**
+     * The value of the option.
+     */
+    value: string;
+    /**
+     * The label to display for the option.
+     */
+    label: string;
+}
+export interface SelectProps extends Omit<RadixSelect.SelectProps, "className" | "onValueChange" | "style"> {
+    /**
+     * The value of the select item that should be selected by default.
+     * Use when you do not need to control the state of the select items.
+     */
+    defaultValue?: string;
+    /**
+     * The controlled value of the select.
+     * Should be used in conjunction with onChange.
+     */
+    value?: string;
+    /**
+     * Callback triggered when the selected value changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * The options to display in the select dropdown.
+     */
+    options: SelectOption[];
+    /**
+     * The placeholder text to display when no value is selected.
+     */
+    placeholder?: string;
+    /**
+     * If true, the select will display in an error state with error styling
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * The open state of the select when it is initially rendered.
+     * Use when you do not need to control its open state.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * The controlled open state of the select. Must be used in conjunction with onOpenChange.
+     */
+    open?: boolean;
+    /**
+     * Callback triggered when the open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * When true, prevents the user from interacting with select.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The name of the select. Submitted with its owning form as part of a name/value pair.
+     */
+    name?: string;
+}
+export declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default Select;

package/dist/components/Select/Select.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { DROPDOWN_CONTAINER_STYLES as x } from "../../lib/constants/dropdownStyles.js";
+import { Root as N, Trigger as V, Value as S, Icon as I, Portal as R, Content as j, Viewport as A, Item as O, ItemText as T } 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 D } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef as E, useState as C, useEffect as P } from "react";
+import { cn as t } from "../../lib/utils.js";
+import { typographyVariants as u } from "../Typography/Typography.js";
+import { ArrowDown as _ } from "./ArrowDown.js";
+const $ = D(
+  "text-base flex h-[3.125rem] w-full min-w-[6rem] text-gray-900 cursor-pointer items-center justify-between whitespace-nowrap rounded-xl border-2 px-3 py-4 font-sans outline-none transition-all [&>span:first-of-type]:line-clamp-1 data-[placeholder]:text-gray-400",
+  {
+    variants: {
+      isOpen: {
+        true: "border-gray-200 bg-gray-0 shadow-card",
+        false: "border-gray-100 bg-gray-100"
+      },
+      defaultValue: {
+        true: "border-gray-200 bg-gray-0 text-gray-900",
+        false: ""
+      },
+      error: {
+        true: "shadow-none border-error-700 bg-error-100",
+        false: ""
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-20",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      isOpen: !1,
+      defaultValue: !1,
+      error: !1,
+      disabled: !1
+    }
+  }
+), k = E(
+  ({
+    options: l = [],
+    placeholder: g = "Select...",
+    value: o,
+    onChange: y,
+    open: a,
+    onOpenChange: s,
+    error: p = !1,
+    defaultOpen: i = !1,
+    disabled: n = !1,
+    name: h,
+    defaultValue: d,
+    ...b
+  }, w) => {
+    const [c, f] = C(a ?? i), v = (e) => {
+      f(e), s == null || s(e);
+    };
+    return P(() => {
+      a !== void 0 && f(a);
+    }, [a]), Array.isArray(l) || console.error("`options` must be an array of objects with `value` and `label` keys."), /* @__PURE__ */ m(
+      N,
+      {
+        value: o,
+        open: c,
+        onValueChange: y,
+        defaultOpen: i,
+        onOpenChange: v,
+        name: h,
+        disabled: n,
+        defaultValue: d,
+        ...b,
+        children: [
+          /* @__PURE__ */ m(
+            V,
+            {
+              ref: w,
+              className: t(
+                u({ variant: "body", level: 3 }),
+                $({
+                  isOpen: c,
+                  error: p,
+                  disabled: n,
+                  defaultValue: !!d
+                })
+              ),
+              children: [
+                /* @__PURE__ */ r(S, { placeholder: g }),
+                /* @__PURE__ */ r(I, { className: "h-5 w-5", children: /* @__PURE__ */ r(_, { className: "text-gray-900" }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ r(R, { children: /* @__PURE__ */ r(j, { position: "popper", className: t(x), children: /* @__PURE__ */ r(
+            A,
+            {
+              className: t(
+                "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] p-2",
+                l.length === 0 && "hidden"
+              ),
+              children: l.map((e) => /* @__PURE__ */ r(
+                O,
+                {
+                  value: e.value,
+                  className: t(
+                    "w-full cursor-pointer select-none rounded-md p-2 font-sans outline-none hover:bg-gray-100",
+                    o === e.value && "bg-gray-200",
+                    u({ variant: "body", level: 2 })
+                  ),
+                  children: /* @__PURE__ */ r(T, { children: e.label })
+                },
+                `${e.value}/${e.label}`
+              ))
+            }
+          ) }) })
+        ]
+      }
+    );
+  }
+);
+k.displayName = "Select";
+export {
+  k as Select,
+  k as default
+};

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

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

package/dist/components/Select/index.js

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

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,19 @@
+import { SwitchProps as RadixSwitchProps } from '@radix-ui/react-switch';
+export interface SwitchProps extends Omit<RadixSwitchProps, "onCheckedChange" | "onChange" | "className"> {
+    /**
+     * The checked state of the switch.
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Callback function that is triggered when the checked state changes.
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Disables the switch when set to true.
+     * @default false
+     */
+    disabled?: boolean;
+}
+export declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default Switch;

package/dist/components/Switch/Switch.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import { Root as s, Thumb as c } from "../../node_modules/.pnpm/@radix-ui_react-switch@1.1.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18.3._udl6ccyllphugejc6sszfrese4/node_modules/@radix-ui/react-switch/dist/index.js";
+import { forwardRef as l } from "react";
+const n = l(
+  ({ checked: e, onChange: t, disabled: r = !1, ...d }, o) => /* @__PURE__ */ a(
+    s,
+    {
+      ref: o,
+      checked: e,
+      onCheckedChange: t,
+      disabled: r,
+      className: "relative inline-flex h-auto w-10 items-center rounded-full border-2 transition-all data-[state=checked]:border-gray-900 data-[state=checked]:bg-gray-900 data-[state=unchecked]:border-gray-300 data-[state=unchecked]:bg-gray-300 disabled:cursor-not-allowed disabled:opacity-20",
+      ...d,
+      children: /* @__PURE__ */ a(c, { className: "bg-gray-0 block h-5 w-5 transform rounded-full transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0" })
+    }
+  )
+);
+n.displayName = "Switch";
+export {
+  n as Switch,
+  n as default
+};

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

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

package/dist/components/Switch/index.js

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

package/dist/components/Token/Token.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import * as tokens from "./icons";
+/**
+ * Props for the Token component
+ */
+interface TokenProps {
+    /** The token symbol to display (BTC, ETH, USDC, or WLD) */
+    value: keyof typeof tokens;
+    /** Width and height in pixels of the token icon (default: 40) */
+    size?: number;
+}
+export declare const Token: React.FC<TokenProps>;
+export default Token;

package/dist/components/Token/Token.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as r from "./icons/index.js";
+const c = ({ value: n, size: o = 40 }) => {
+  const t = r[n];
+  return /* @__PURE__ */ e(t, { width: o, height: o });
+};
+export {
+  c as Token,
+  c as default
+};

package/dist/components/Token/icons/btc.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const BTC: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default BTC;

package/dist/components/Token/icons/btc.js

@@ -0,0 +1,74 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+const e = (i) => /* @__PURE__ */ r(
+  "svg",
+  {
+    width: "88",
+    height: "88",
+    viewBox: "0 0 88 88",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...i,
+    children: [
+      /* @__PURE__ */ t("circle", { cx: "44", cy: "44", r: "44", fill: "#FF4231" }),
+      /* @__PURE__ */ t("circle", { cx: "44", cy: "44", r: "44", fill: "url(#paint0_radial_12_1265)" }),
+      /* @__PURE__ */ t("circle", { cx: "44", cy: "44", r: "44", fill: "url(#paint1_radial_12_1265)" }),
+      /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M56.8469 40.0108C57.4042 36.2846 54.5674 34.2816 50.6882 32.9454L51.9466 27.898L48.8741 27.1324L47.649 32.047C46.8412 31.8455 46.0117 31.6557 45.1873 31.4675L46.4212 26.5205L43.3506 25.7549L42.0915 30.8007C41.423 30.6485 40.7665 30.4981 40.1296 30.3396L40.1331 30.3237L35.896 29.2657L35.0787 32.5473C35.0787 32.5473 37.3583 33.0699 37.3102 33.102C38.5544 33.4126 38.7794 34.2362 38.7421 34.889L37.3086 40.6392C37.3943 40.661 37.5054 40.6925 37.628 40.7418C37.5255 40.7163 37.4164 40.6885 37.3032 40.6614L35.294 48.7167C35.1419 49.0947 34.756 49.662 33.8861 49.4466C33.9169 49.4912 31.6529 48.8893 31.6529 48.8893L30.1275 52.4063L34.1259 53.4031C34.8697 53.5896 35.5986 53.7848 36.3165 53.9683L35.045 59.0737L38.114 59.8393L39.3731 54.7881C40.2115 55.0157 41.0252 55.2257 41.8217 55.4236L40.5668 60.4509L43.6395 61.2165L44.9108 56.1207C50.1501 57.1123 54.0897 56.7125 55.7479 51.9736C57.0841 48.1581 55.6814 45.9574 52.925 44.5223C54.9326 44.0593 56.4448 42.7388 56.848 40.0112L56.8471 40.0105L56.8469 40.0108ZM49.8269 49.8547C48.8773 53.6701 42.4533 51.6076 40.3706 51.0904L42.0578 44.3267C44.1404 44.8466 50.8193 45.8756 49.827 49.8547H49.8269ZM50.7771 39.9555C49.9109 43.426 44.5641 41.6628 42.8297 41.2305L44.3594 35.0962C46.0938 35.5286 51.6794 36.3355 50.7774 39.9555H50.7771Z",
+          fill: "url(#paint2_linear_12_1265)"
+        }
+      ),
+      /* @__PURE__ */ r("defs", { children: [
+        /* @__PURE__ */ r(
+          "radialGradient",
+          {
+            id: "paint0_radial_12_1265",
+            cx: "0",
+            cy: "0",
+            r: "1",
+            gradientUnits: "userSpaceOnUse",
+            gradientTransform: "translate(83.9633 70.1674) rotate(170.361) scale(62.5095 57.5688)",
+            children: [
+              /* @__PURE__ */ t("stop", { stopColor: "#F39631" }),
+              /* @__PURE__ */ t("stop", { offset: "1", stopColor: "#F39631", stopOpacity: "0" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          "radialGradient",
+          {
+            id: "paint1_radial_12_1265",
+            cx: "0",
+            cy: "0",
+            r: "1",
+            gradientUnits: "userSpaceOnUse",
+            gradientTransform: "translate(6.45871 8.33481) rotate(71.0626) scale(53.4853 52.1862)",
+            children: [
+              /* @__PURE__ */ t("stop", { stopColor: "#FF9726" }),
+              /* @__PURE__ */ t("stop", { offset: "1", stopColor: "#FF9726", stopOpacity: "0" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          "linearGradient",
+          {
+            id: "paint2_linear_12_1265",
+            x1: "43.5222",
+            y1: "25.7549",
+            x2: "43.5222",
+            y2: "61.2165",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ t("stop", { offset: "0.5", stopColor: "white" }),
+              /* @__PURE__ */ t("stop", { offset: "1", stopColor: "white", stopOpacity: "0.8" })
+            ]
+          }
+        )
+      ] })
+    ]
+  }
+);
+export {
+  e as default
+};

package/dist/components/Token/icons/eth.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const ETH: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default ETH;