@worldcoin/mini-apps-ui-kit-react 1.0.0-canary.0 → 1.0.0-canary.10

package/README.md

@@ -7,11 +7,11 @@ React components UI Kit library for Mini Apps
 ## Getting Started
 
 - [@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
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs**/**vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-## Tailwind Configuration
+## Tailwind **Configuration**
 
-- `./styles/globals.css`: is the main entrypoint for the tailwind css styles
+- `./**styles**/globals.css`: is the main entrypoint for the tailwind css styles
 - `./public/globals.css`: compiled tailwind css styles
 - `./src/tailwind`: tailwind plugin with uiKit tailwind presets
 
@@ -107,32 +107,30 @@ This method enables tree-shaking and reduces your final bundle size by only incl
 
 ## Icons
 
-The library uses [Hugeicons](https://hugeicons.com/) for its icon system. To use icons in your project, you'll need to install the [React package](https://www.npmjs.com/package/@hugeicons/react):
+The library uses [Iconoir](https://iconoir.com/) for its icon system. To use icons in your project, you'll need to install the [React package](https://www.npmjs.com/package/iconoir-react):
 
 ```bash
-npm install @hugeicons/react
+npm install iconoir-react
 # or
-yarn add @hugeicons/react
+yarn add iconoir-react
 ```
 
 Then you can import and use icons in your components:
 
 ```jsx
-import { HomeIcon } from '@hugeicons/react';
+import { Home } from 'iconoir-react';
 
 function MyComponent() {
-  return <HomeIcon size={24} />;
+  return <Home width={24} height={24} />;
 }
 ```
 
-Hugeicons provides a comprehensive set of icons across various categories including:
-- Navigation & UI elements
-- Social media
-- Business & Finance
-- Communication
-- Technology
-- And many more...
+Iconoir provides a comprehensive set of 1,600+ unique SVG icons, designed on a 24x24 pixels grid. The icons are:
+- 100% free and open source
+- Available in SVG, React, React Native, Flutter, Figma and Framer
+- Optimized for performance
+- Customizable with different sizes, colors, and styles
 
-You can browse the complete icon set at [hugeicons.com](https://hugeicons.com/).
+You can browse the complete icon set at [iconoir.com](https://iconoir.com/).
 
-Hugeicons is available under various license options. Please refer to their [website](https://hugeicons.com/) for detailed licensing information. 
+Iconoir is available under the MIT License. Please refer to their [website](https://iconoir.com/) for more details. 

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,22 @@
+import { BottomBarProps } from '../BottomBar';
+import { AlertDialogCloseProps, AlertDialogContentProps, AlertDialogDescriptionProps, AlertDialogHeaderProps, AlertDialogProps, AlertDialogTitleProps, AlertDialogTriggerProps } from './types';
+import * as React from "react";
+declare const AlertDialog: {
+    ({ dismissible, modal, ...props }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: typeof import('vaul').Portal;
+declare const AlertDialogClose: React.ForwardRefExoticComponent<AlertDialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: {
+    ({ icon, children, ...props }: AlertDialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogFooter: {
+    (props: BottomBarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export { AlertDialog, AlertDialogPortal, AlertDialogTrigger, AlertDialogClose, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, };

package/dist/components/AlertDialog/AlertDialog.js

@@ -2,50 +2,48 @@
 import { jsx as r, jsxs as n } from "react/jsx-runtime";
 import { cn as s } from "../../lib/utils.js";
 import * as i from "react";
-import { Drawer as t } from "../../node_modules/.pnpm/vaul@1.1.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18.3.18_react-dom@18.3._7iqkcrcg5qjc3n2ixm6rnrnx3e/node_modules/vaul/dist/index.js";
-import { BottomBar as g } from "../BottomBar/BottomBar.js";
-import { Button as f } from "../Button/Button.js";
-import { XMark as p } from "../Icons/XMark.js";
+import { Drawer as o } from "../../node_modules/.pnpm/vaul@1.1.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18.3.18_react-dom@18.3._7iqkcrcg5qjc3n2ixm6rnrnx3e/node_modules/vaul/dist/index.js";
+import { BottomBar as c } from "../BottomBar/BottomBar.js";
+import { Button as g } from "../Button/Button.js";
+import { XMark as f } from "../Icons/XMark.js";
 import { Typography as m } from "../Typography/Typography.js";
-import { AlertDialogContext as D, useAlertDialog as A } from "./use-alert-dialog.js";
-const y = ({ dismissible: e = !0, modal: l = !0, ...a }) => /* @__PURE__ */ r(D.Provider, { value: { dismissible: e }, children: /* @__PURE__ */ r(
-  t.Root,
+import { AlertDialogContext as p, useAlertDialog as D } from "./use-alert-dialog.js";
+const A = ({ dismissible: e = !0, modal: l = !0, ...t }) => /* @__PURE__ */ r(p.Provider, { value: { dismissible: e }, children: /* @__PURE__ */ r(
+  o.Root,
   {
     shouldScaleBackground: !1,
     dismissible: e,
     modal: l,
-    ...a
+    ...t
   }
 ) });
-y.displayName = "AlertDialog";
-const h = i.forwardRef((e, l) => /* @__PURE__ */ r(t.Trigger, { ref: l, ...e }));
+A.displayName = "AlertDialog";
+const h = i.forwardRef((e, l) => /* @__PURE__ */ r(o.Trigger, { ref: l, ...e }));
 h.displayName = "AlertDialogTrigger";
-const N = t.Portal, d = i.forwardRef((e, l) => /* @__PURE__ */ r(t.Close, { ref: l, ...e }));
+const u = o.Portal, d = i.forwardRef((e, l) => /* @__PURE__ */ r(o.Close, { ref: l, ...e }));
 d.displayName = "AlertDialogClose";
-const c = i.forwardRef(({ className: e, ...l }, a) => /* @__PURE__ */ r(
-  t.Overlay,
-  {
-    ref: a,
-    className: s("fixed inset-0 z-50 bg-gray-900/40", e),
-    ...l
-  }
-));
-c.displayName = "AlertDialogOverlay";
-const u = i.forwardRef(({ className: e, children: l, ...a }, o) => /* @__PURE__ */ n(N, { children: [
-  /* @__PURE__ */ r(c, {}),
+const y = i.forwardRef(({ className: e, children: l, ...t }, a) => /* @__PURE__ */ n(u, { children: [
   /* @__PURE__ */ r(
-    t.Content,
+    o.Overlay,
     {
-      ref: o,
+      ref: a,
+      className: s("fixed inset-0 z-50 bg-gray-900/40", e),
+      ...t
+    }
+  ),
+  /* @__PURE__ */ r(
+    o.Content,
+    {
+      ref: a,
       className: s("fixed inset-x-0 bottom-0 z-50 mt-24 h-auto", e),
-      ...a,
+      ...t,
       children: /* @__PURE__ */ r("div", { className: "flex flex-col rounded-[1.75rem] bg-gray-0 m-3 p-8", children: l })
     }
   )
 ] }));
-u.displayName = "AlertDialogContent";
-const x = ({ icon: e, children: l, ...a }) => {
-  const { dismissible: o } = A();
+y.displayName = "AlertDialogContent";
+const N = ({ icon: e, children: l, ...t }) => {
+  const { dismissible: a } = D();
   return /* @__PURE__ */ n(
     "div",
     {
@@ -53,42 +51,41 @@ const x = ({ icon: e, children: l, ...a }) => {
         "flex justify-between gap-4 mb-4 w-full",
         e ? "items-start" : "items-center"
       ),
-      ...a,
+      ...t,
       children: [
         /* @__PURE__ */ n("div", { className: "flex flex-col gap-6", children: [
           e,
           l
         ] }),
-        o && /* @__PURE__ */ r("div", { className: "shrink-0", children: /* @__PURE__ */ r(d, { asChild: !0, children: /* @__PURE__ */ r(f, { variant: "tertiary", size: "icon", children: /* @__PURE__ */ r(p, {}) }) }) })
+        a && /* @__PURE__ */ r("div", { className: "shrink-0", children: /* @__PURE__ */ r(d, { asChild: !0, children: /* @__PURE__ */ r(g, { variant: "tertiary", size: "icon", children: /* @__PURE__ */ r(f, {}) }) }) })
       ]
     }
   );
 };
-x.displayName = "AlertDialogHeader";
-const v = (e) => /* @__PURE__ */ r(g, { ...e });
-v.displayName = "AlertDialogFooter";
-const C = i.forwardRef(({ className: e, children: l, ...a }, o) => /* @__PURE__ */ r(t.Title, { ref: o, ...a, asChild: !0, children: /* @__PURE__ */ r(m, { variant: "heading", level: 2, children: l }) }));
-C.displayName = "AlertDialogTitle";
-const w = i.forwardRef(({ className: e, children: l, ...a }, o) => /* @__PURE__ */ r(
-  t.Description,
+N.displayName = "AlertDialogHeader";
+const x = (e) => /* @__PURE__ */ r(c, { ...e });
+x.displayName = "AlertDialogFooter";
+const v = i.forwardRef(({ className: e, children: l, ...t }, a) => /* @__PURE__ */ r(o.Title, { ref: a, ...t, asChild: !0, children: /* @__PURE__ */ r(m, { variant: "heading", level: 2, children: l }) }));
+v.displayName = "AlertDialogTitle";
+const C = i.forwardRef(({ className: e, children: l, ...t }, a) => /* @__PURE__ */ r(
+  o.Description,
   {
-    ref: o,
+    ref: a,
     className: s("text-gray-500 mb-8", e),
-    ...a,
+    ...t,
     asChild: !0,
     children: /* @__PURE__ */ r(m, { children: l })
   }
 ));
-w.displayName = "AlertDialogDescription";
+C.displayName = "AlertDialogDescription";
 export {
-  y as AlertDialog,
+  A as AlertDialog,
   d as AlertDialogClose,
-  u as AlertDialogContent,
-  w as AlertDialogDescription,
-  v as AlertDialogFooter,
-  x as AlertDialogHeader,
-  c as AlertDialogOverlay,
-  N as AlertDialogPortal,
-  C as AlertDialogTitle,
+  y as AlertDialogContent,
+  C as AlertDialogDescription,
+  x as AlertDialogFooter,
+  N as AlertDialogHeader,
+  u as AlertDialogPortal,
+  v as AlertDialogTitle,
   h as AlertDialogTrigger
 };

package/dist/components/AlertDialog/index.js

@@ -1,13 +1,12 @@
-import { AlertDialog as r, AlertDialogClose as o, AlertDialogContent as t, AlertDialogDescription as i, AlertDialogFooter as a, AlertDialogHeader as g, AlertDialogOverlay as D, AlertDialogPortal as A, AlertDialogTitle as n, AlertDialogTrigger as p } from "./AlertDialog.js";
+import { AlertDialog as o, AlertDialogClose as r, AlertDialogContent as t, AlertDialogDescription as i, AlertDialogFooter as a, AlertDialogHeader as g, AlertDialogPortal as D, AlertDialogTitle as A, AlertDialogTrigger as n } from "./AlertDialog.js";
 export {
-  r as AlertDialog,
-  o as AlertDialogClose,
+  o as AlertDialog,
+  r as AlertDialogClose,
   t as AlertDialogContent,
   i as AlertDialogDescription,
   a as AlertDialogFooter,
   g as AlertDialogHeader,
-  D as AlertDialogOverlay,
-  A as AlertDialogPortal,
-  n as AlertDialogTitle,
-  p as AlertDialogTrigger
+  D as AlertDialogPortal,
+  A as AlertDialogTitle,
+  n as AlertDialogTrigger
 };

package/dist/components/Button/Button.d.ts

@@ -3,10 +3,9 @@ import { ButtonHTMLAttributes } from 'react';
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | null | undefined;
     size?: "sm" | "lg" | "icon" | null | undefined;
-    stateful?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className">, VariantProps<typeof buttonVariants> {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     /**
      * The variant style to use
      * @default "primary"
@@ -17,11 +16,6 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
      * @default "lg"
      */
     size?: "sm" | "lg" | "icon";
-    /**
-     * The state of the button
-     * @default undefined
-     */
-    state?: "pending" | "success" | "failed";
     /**
      * Whether the button should take up the full width of its container
      * @default false

package/dist/components/Button/Button.js

@@ -1,15 +1,12 @@
 "use client";
-import { jsxs as g, jsx as a } from "react/jsx-runtime";
-import { cn as d } from "../../lib/utils.js";
-import { Slot as b } 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 m } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { forwardRef as p } from "react";
-import { Fail as f } from "../Icons/Fail.js";
-import { Success as y } from "../Icons/Success.js";
-import { Spinner as c } from "../Spinner/Spinner.js";
-import { typographyVariants as u } from "../Typography/Typography.js";
-const v = m(
-  "flex items-center justify-center rounded-full gap-2 font-display leading-[1.2] tracking-normal transition-colors",
+import { jsx as l } from "react/jsx-runtime";
+import { cn as n } from "../../lib/utils.js";
+import { Slot as s } 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 y } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef as d } from "react";
+import { typographyVariants as m } from "../Typography/Typography.js";
+const b = y(
+  "flex items-center justify-center rounded-full gap-2 font-sans leading-[1.2] tracking-normal transition-colors",
   {
     variants: {
       variant: {
@@ -22,10 +19,6 @@ const v = m(
         lg: "h-14 min-w-14 px-4",
         icon: "size-10"
       },
-      stateful: {
-        true: "border-none bg-transparent fill-transparent text-transparent hover:bg-transparent active:bg-transparent disabled:bg-transparent disabled:text-transparent",
-        false: ""
-      },
       fullWidth: {
         true: "w-full",
         false: ""
@@ -37,35 +30,30 @@ const v = m(
       fullWidth: !1
     }
   }
-), x = p(
-  ({ variant: e, size: t = "lg", fullWidth: s, asChild: i, state: r, children: n, ...l }, o) => /* @__PURE__ */ g(
-    i ? b : "button",
+), f = d(
+  ({ variant: t = "primary", size: r = "lg", fullWidth: e, asChild: i, children: o, ...a }, g) => /* @__PURE__ */ l(
+    i ? s : "button",
     {
-      ref: o,
-      className: d(
-        v({
-          variant: e,
-          size: t,
-          stateful: !!r,
-          fullWidth: s
+      ref: g,
+      ...a,
+      className: n(
+        b({
+          variant: t,
+          size: r,
+          fullWidth: e
         }),
-        u({
+        m({
           variant: "label",
-          level: t === "lg" ? 1 : 2
-        })
+          level: r === "lg" ? 1 : 2
+        }),
+        a.className
       ),
-      ...l,
-      children: [
-        !r && n,
-        r === "pending" && /* @__PURE__ */ a(c, { className: "absolute size-6" }),
-        r === "success" && /* @__PURE__ */ a(y, { className: "absolute size-6" }),
-        r === "failed" && /* @__PURE__ */ a(f, { className: "absolute size-6" })
-      ]
+      children: o
     }
   )
 );
-x.displayName = "Button";
+f.displayName = "Button";
 export {
-  x as Button,
-  x as default
+  f as Button,
+  f as default
 };

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 {
+export interface ChipProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The variant of the chip. Default value is "default".
      */
@@ -20,7 +20,7 @@ export interface ChipProps {
     className?: string;
 }
 export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & VariantProps<(props?: ({
-    variant?: "error" | "success" | "default" | "warning" | "important" | null | undefined;
+    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;

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

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

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

package/dist/components/CircularIcon/CircularIcon.js

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

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

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

package/dist/components/CircularIcon/index.js

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

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,35 +1,29 @@
 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(
+import { Item as n, Indicator as d, Root as i } 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 a } from "react";
+const f = a(
   ({ 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",
+      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: 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}` }
-        }
-      )
+      children: /* @__PURE__ */ t(d, { className: "size-11 rounded-full bg-transparent border-2 border-gray-0" })
     }
   )
-), p = s(
-  ({ value: e, onChange: r, children: o, ...l }, a) => /* @__PURE__ */ t(
-    c,
+), p = a(
+  ({ value: e, onChange: r, children: o, ...s }, l) => /* @__PURE__ */ t(
+    i,
     {
-      ref: a,
+      ref: l,
       value: e,
       onValueChange: r,
       className: "flex gap-4 items-center",
-      ...l,
+      ...s,
       children: o
     }
   )

package/dist/components/CountryDrawer/CountryDrawer.js

@@ -1,3 +1,4 @@
+"use client";
 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";

package/dist/components/LiveFeedback/LiveFeedback.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+interface LiveFeedbackProps {
+    /** The current state of the feedback. Controls which icon and label are shown. */
+    state?: "pending" | "success" | "failed";
+    /** The content to wrap with live feedback, typically a button or form element */
+    children: React.ReactNode;
+    /** Optional className to apply to the wrapper div */
+    className?: string;
+    /** Optional labels to show next to the icons for each state */
+    label?: {
+        /** Text to show during the pending state */
+        pending: string;
+        /** Text to show when operation succeeds */
+        success: string;
+        /** Text to show when operation fails */
+        failed: string;
+    };
+}
+declare function LiveFeedback({ state, children, className, label }: LiveFeedbackProps): import("react/jsx-runtime").JSX.Element;
+export default LiveFeedback;

package/dist/components/LiveFeedback/LiveFeedback.js

@@ -0,0 +1,48 @@
+import { jsxs as s, jsx as r, Fragment as c } from "react/jsx-runtime";
+import { cn as n } from "../../lib/utils.js";
+import { Fail as f } from "../Icons/Fail.js";
+import { Success as p } from "../Icons/Success.js";
+import { Spinner as t } from "../Spinner/Spinner.js";
+import { Typography as d } from "../Typography/Typography.js";
+function x({ state: e, children: m, className: o, label: i }) {
+  return /* @__PURE__ */ s("div", { className: n("relative", o), children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: n(
+          "w-full h-full",
+          e && "invisible"
+          // Hide children but preserve space
+        ),
+        children: m
+      }
+    ),
+    e && /* @__PURE__ */ s(
+      "div",
+      {
+        className: n(
+          "absolute inset-0 flex items-center justify-center gap-2",
+          e === "success" && "text-success-600",
+          e === "failed" && "text-error-600"
+        ),
+        children: [
+          e === "pending" && /* @__PURE__ */ s(c, { children: [
+            /* @__PURE__ */ r(t, { className: "size-6" }),
+            (i == null ? void 0 : i.pending) && /* @__PURE__ */ r(d, { variant: "label", level: 2, children: i.pending })
+          ] }),
+          e === "success" && /* @__PURE__ */ s(c, { children: [
+            /* @__PURE__ */ r(p, { className: "size-6" }),
+            (i == null ? void 0 : i.success) && /* @__PURE__ */ r(d, { variant: "label", level: 2, children: i.success })
+          ] }),
+          e === "failed" && /* @__PURE__ */ s(c, { children: [
+            /* @__PURE__ */ r(f, { className: "size-6" }),
+            (i == null ? void 0 : i.failed) && /* @__PURE__ */ r(d, { variant: "label", level: 2, children: i.failed })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  x as default
+};

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

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

package/dist/components/LiveFeedback/index.js

@@ -0,0 +1,2 @@
+import "react/jsx-runtime";
+import "../Typography/Typography.js";