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

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/_virtual/_commonjsHelpers.js

@@ -1,6 +1,6 @@
-function e(t) {
-  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
 export {
-  e as getDefaultExportFromCjs
+  getDefaultExportFromCjs
 };

package/dist/_virtual/create-plugin.js

@@ -1,4 +1,4 @@
-var e = {};
+var createPlugin = {};
 export {
-  e as __exports
+  createPlugin as __exports
 };

package/dist/_virtual/createPlugin.js

@@ -1,4 +1,4 @@
-var e = {};
+var createPlugin = {};
 export {
-  e as __exports
+  createPlugin as __exports
 };

package/dist/_virtual/plugin.js

@@ -1,7 +1,7 @@
-import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as o } from "../node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/plugin.js";
-var t = o();
-const p = /* @__PURE__ */ r(t);
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
+import { __require as requirePlugin } from "../node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/plugin.js";
+var pluginExports = requirePlugin();
+const plugin = /* @__PURE__ */ getDefaultExportFromCjs(pluginExports);
 export {
-  p as default
+  plugin as default
 };

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

@@ -2,7 +2,7 @@ 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;
+    ({ dismissible, modal, repositionInputs, ...props }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,91 +1,96 @@
 "use client";
-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 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 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,
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { Drawer } 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 { XMark } from "../Icons/XMark.js";
+import { AlertDialogContext, useAlertDialog } from "./use-alert-dialog.js";
+import { BottomBar } from "../BottomBar/BottomBar.js";
+import { Typography } from "../Typography/Typography.js";
+import { Button } from "../Button/Button.js";
+const AlertDialog = ({
+  dismissible = true,
+  modal = true,
+  repositionInputs = false,
+  ...props
+}) => /* @__PURE__ */ jsx(AlertDialogContext.Provider, { value: { dismissible }, children: /* @__PURE__ */ jsx(
+  Drawer.Root,
   {
-    shouldScaleBackground: !1,
-    dismissible: e,
-    modal: l,
-    ...t
+    shouldScaleBackground: false,
+    dismissible,
+    modal,
+    repositionInputs,
+    ...props
   }
 ) });
-A.displayName = "AlertDialog";
-const h = i.forwardRef((e, l) => /* @__PURE__ */ r(o.Trigger, { ref: l, ...e }));
-h.displayName = "AlertDialogTrigger";
-const u = o.Portal, d = i.forwardRef((e, l) => /* @__PURE__ */ r(o.Close, { ref: l, ...e }));
-d.displayName = "AlertDialogClose";
-const y = i.forwardRef(({ className: e, children: l, ...t }, a) => /* @__PURE__ */ n(u, { children: [
-  /* @__PURE__ */ r(
-    o.Overlay,
+AlertDialog.displayName = "AlertDialog";
+const AlertDialogTrigger = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Drawer.Trigger, { ref, ...props }));
+AlertDialogTrigger.displayName = "AlertDialogTrigger";
+const AlertDialogPortal = Drawer.Portal;
+const AlertDialogClose = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Drawer.Close, { ref, ...props }));
+AlertDialogClose.displayName = "AlertDialogClose";
+const AlertDialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+  /* @__PURE__ */ jsx(
+    Drawer.Overlay,
     {
-      ref: a,
-      className: s("fixed inset-0 z-50 bg-gray-900/40", e),
-      ...t
+      ref,
+      className: cn("fixed inset-0 z-50 bg-gray-900/40", className),
+      ...props
     }
   ),
-  /* @__PURE__ */ r(
-    o.Content,
+  /* @__PURE__ */ jsx(
+    Drawer.Content,
     {
-      ref: a,
-      className: s("fixed inset-x-0 bottom-0 z-50 mt-24 h-auto", e),
-      ...t,
-      children: /* @__PURE__ */ r("div", { className: "flex flex-col rounded-[1.75rem] bg-gray-0 m-3 p-8", children: l })
+      ref,
+      className: cn("fixed inset-x-0 bottom-0 z-50 mt-24 h-auto", className),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col rounded-[1.75rem] bg-gray-0 m-3 p-8", children })
     }
   )
 ] }));
-y.displayName = "AlertDialogContent";
-const N = ({ icon: e, children: l, ...t }) => {
-  const { dismissible: a } = D();
-  return /* @__PURE__ */ n(
-    "div",
-    {
-      className: s(
-        "flex justify-between gap-4 mb-4 w-full",
-        e ? "items-start" : "items-center"
-      ),
-      ...t,
-      children: [
-        /* @__PURE__ */ n("div", { className: "flex flex-col gap-6", children: [
-          e,
-          l
-        ] }),
-        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, {}) }) }) })
-      ]
-    }
-  );
+AlertDialogContent.displayName = "AlertDialogContent";
+const AlertDialogHeader = ({ icon, children, ...props }) => {
+  const { dismissible } = useAlertDialog();
+  const closeButton = dismissible && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(AlertDialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "icon", children: /* @__PURE__ */ jsx(XMark, {}) }) }) });
+  const baseClasses = "flex justify-between w-full";
+  if (icon) {
+    return /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-col gap-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: cn(baseClasses), ...props, children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: icon }),
+        closeButton
+      ] }),
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn(baseClasses, "gap-4 mb-4 items-center"), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", children }),
+    closeButton
+  ] });
 };
-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,
+AlertDialogHeader.displayName = "AlertDialogHeader";
+const AlertDialogFooter = (props) => /* @__PURE__ */ jsx(BottomBar, { ...props });
+AlertDialogFooter.displayName = "AlertDialogFooter";
+const AlertDialogTitle = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(Drawer.Title, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsx(Typography, { variant: "heading", level: 2, children }) }));
+AlertDialogTitle.displayName = "AlertDialogTitle";
+const AlertDialogDescription = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  Drawer.Description,
   {
-    ref: a,
-    className: s("text-gray-500 mb-8", e),
-    ...t,
-    asChild: !0,
-    children: /* @__PURE__ */ r(m, { children: l })
+    ref,
+    className: cn("text-gray-500 mb-8", className),
+    ...props,
+    asChild: true,
+    children: /* @__PURE__ */ jsx(Typography, { children })
   }
 ));
-C.displayName = "AlertDialogDescription";
+AlertDialogDescription.displayName = "AlertDialogDescription";
 export {
-  A as AlertDialog,
-  d as AlertDialogClose,
-  y as AlertDialogContent,
-  C as AlertDialogDescription,
-  x as AlertDialogFooter,
-  N as AlertDialogHeader,
-  u as AlertDialogPortal,
-  v as AlertDialogTitle,
-  h as AlertDialogTrigger
+  AlertDialog,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger
 };

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

@@ -1 +1,2 @@
-export * from './AlertDialog';
+export { AlertDialog, AlertDialogPortal, AlertDialogTrigger, AlertDialogClose, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, } from './AlertDialog';
+export type { AlertDialogProps, AlertDialogContentProps, AlertDialogHeaderProps, AlertDialogTitleProps, AlertDialogDescriptionProps, AlertDialogTriggerProps, AlertDialogCloseProps, WithFadeFromProps, WithoutFadeFromProps, } from './types';

package/dist/components/AlertDialog/use-alert-dialog.js

@@ -1,11 +1,13 @@
-import { createContext as e, useContext as o } from "react";
-const r = e(void 0), i = () => {
-  const t = o(r);
-  if (t === void 0)
+import { createContext, useContext } from "react";
+const AlertDialogContext = createContext(void 0);
+const useAlertDialog = () => {
+  const context = useContext(AlertDialogContext);
+  if (context === void 0) {
     throw new Error("useAlertDialog must be used within an AlertDialog");
-  return t;
+  }
+  return context;
 };
 export {
-  r as AlertDialogContext,
-  i as useAlertDialog
+  AlertDialogContext,
+  useAlertDialog
 };

package/dist/components/BottomBar/BottomBar.d.ts

@@ -2,12 +2,13 @@ import { VariantProps } from 'class-variance-authority';
 declare const bottomBarVariants: (props?: ({
     direction?: "horizontal" | "vertical" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface BottomBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className">, VariantProps<typeof bottomBarVariants> {
+interface BottomBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className">, VariantProps<typeof bottomBarVariants> {
     /**
      * The direction of the bottom bar
      * @default "horizontal"
      */
     direction?: "horizontal" | "vertical";
 }
-export declare const BottomBar: import('react').ForwardRefExoticComponent<BottomBarProps & import('react').RefAttributes<HTMLDivElement>>;
-export {};
+declare const BottomBar: import('react').ForwardRefExoticComponent<BottomBarProps & import('react').RefAttributes<HTMLDivElement>>;
+export { BottomBar };
+export type { BottomBarProps };

package/dist/components/BottomBar/BottomBar.js

@@ -1,8 +1,8 @@
 "use client";
-import { jsx as i } from "react/jsx-runtime";
-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 l } from "react";
-const s = e("w-full gap-4", {
+import { jsx } from "react/jsx-runtime";
+import { cva } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef } from "react";
+const bottomBarVariants = cva("w-full gap-4", {
   variants: {
     direction: {
       horizontal: "grid grid-cols-1 [&>*]:col-span-1 [&:has(>*:nth-child(2))]:grid-cols-2",
@@ -12,10 +12,13 @@ const s = e("w-full gap-4", {
   defaultVariants: {
     direction: "horizontal"
   }
-}), c = l(
-  ({ children: r, direction: o, ...t }, a) => /* @__PURE__ */ i("div", { ref: a, className: s({ direction: o }), ...t, children: r })
+});
+const BottomBar = forwardRef(
+  ({ children, direction, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: bottomBarVariants({ direction }), ...props, children });
+  }
 );
-c.displayName = "BottomBar";
+BottomBar.displayName = "BottomBar";
 export {
-  c as BottomBar
+  BottomBar
 };

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

@@ -1 +1 @@
-export * from './BottomBar';
+export { BottomBar, type BottomBarProps } from './BottomBar';

package/dist/components/BulletList/BulletList.d.ts

@@ -1,10 +1,15 @@
-import { ComponentProps, ReactElement } from 'react';
-import { BulletListItemProps } from '../BulletListItem/BulletListItem';
-export interface BulletListProps extends ComponentProps<"div"> {
+import { ComponentProps, ReactElement, ReactNode } from 'react';
+interface BulletListProps extends ComponentProps<"div"> {
     /**
      * Children should be BulletListItem components, but any ReactNode is accepted for compatibility
      */
     children: ReactElement<BulletListItemProps>[] | ReactElement<BulletListItemProps>;
 }
-export declare const BulletList: import('react').ForwardRefExoticComponent<Omit<BulletListProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-export default BulletList;
+declare const BulletList: import('react').ForwardRefExoticComponent<Omit<BulletListProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+interface BulletListItemProps extends ComponentProps<"div"> {
+    children?: ReactNode;
+    bulletPoint: ReactNode;
+}
+declare const BulletListItem: import('react').ForwardRefExoticComponent<Omit<BulletListItemProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { BulletList, BulletListItem };
+export type { BulletListProps, BulletListItemProps };

package/dist/components/BulletList/BulletList.js

@@ -1,11 +1,31 @@
-import { jsx as e } from "react/jsx-runtime";
-import { cn as s } from "../../lib/utils.js";
-import { forwardRef as i } from "react";
-const m = i(
-  ({ children: t, className: r, ...o }, a) => /* @__PURE__ */ e("div", { ref: a, className: s("grid gap-y-5 content-start", r), ...o, children: t })
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { forwardRef } from "react";
+import { Typography } from "../Typography/Typography.js";
+const BulletList = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("grid gap-y-5 content-start", className), ...props, children });
+  }
 );
-m.displayName = "BulletList";
+BulletList.displayName = "BulletList";
+const BulletListItem = forwardRef(
+  ({ children, className, bulletPoint, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("grid grid-cols-[auto_1fr] gap-x-3 items-center", className),
+        ...props,
+        children: [
+          bulletPoint,
+          /* @__PURE__ */ jsx(Typography, { className: "text-gray-500", children })
+        ]
+      }
+    );
+  }
+);
+BulletListItem.displayName = "BulletListItem";
 export {
-  m as BulletList,
-  m as default
+  BulletList,
+  BulletListItem
 };

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

@@ -1 +1 @@
-export * from './BulletList';
+export { BulletList, BulletListItem, type BulletListProps, type BulletListItemProps, } from './BulletList';

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 ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     /**
      * The variant style to use
      * @default "primary"
@@ -17,11 +16,6 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Va
      * @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
@@ -33,5 +27,6 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Va
      */
     asChild?: boolean;
 }
-export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
-export default Button;
+declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { Button };
+export type { ButtonProps };

package/dist/components/Button/Button.js

@@ -1,31 +1,24 @@
 "use client";
-import { jsxs as g, jsx as r } from "react/jsx-runtime";
-import { cn as m } 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 d } 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 c } from "../Icons/Success.js";
-import { Spinner as y } from "../Spinner/Spinner.js";
-import { typographyVariants as u } from "../Typography/Typography.js";
-const v = d(
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+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 { typographyVariants } from "../Typography/Typography.js";
+const buttonVariants = cva(
   "flex items-center justify-center rounded-full gap-2 font-sans leading-[1.2] tracking-normal transition-colors",
   {
     variants: {
       variant: {
-        primary: "bg-gray-900 text-gray-0 hover:bg-gray-700 active:bg-gray-700 disabled:bg-gray-100 disabled:text-gray-300",
-        secondary: "bg-transparent text-gray-900 border border-gray-200 hover:bg-gray-50 active:bg-gray-50 disabled:text-gray-300 disabled:border-gray-100",
-        tertiary: "bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-200 disabled:text-gray-300 disabled:bg-gray-50"
+        primary: "bg-gray-900 text-gray-0 hover:bg-gray-700 disabled:bg-gray-100 disabled:text-gray-300",
+        secondary: "bg-transparent text-gray-900 border border-gray-200 hover:bg-gray-50 disabled:text-gray-300 disabled:border-gray-100",
+        tertiary: "bg-gray-100 text-gray-900 hover:bg-gray-200 disabled:text-gray-300 disabled:bg-gray-50"
       },
       size: {
         sm: "h-10 min-w-10 px-4",
         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: ""
@@ -34,39 +27,36 @@ const v = d(
     defaultVariants: {
       variant: "primary",
       size: "lg",
-      fullWidth: !1
+      fullWidth: false
     }
   }
-), x = p(
-  ({ variant: s = "primary", size: t = "lg", fullWidth: i, asChild: n, state: a, children: l, ...e }, o) => /* @__PURE__ */ g(
-    n ? b : "button",
-    {
-      ref: o,
-      ...e,
-      className: m(
-        v({
-          variant: s,
-          size: t,
-          stateful: !!a,
-          fullWidth: i
-        }),
-        u({
-          variant: "label",
-          level: t === "lg" ? 1 : 2
-        }),
-        e.className
-      ),
-      children: [
-        !a && l,
-        a === "pending" && /* @__PURE__ */ r(y, { className: "absolute size-6" }),
-        a === "success" && /* @__PURE__ */ r(c, { className: "absolute size-6" }),
-        a === "failed" && /* @__PURE__ */ r(f, { className: "absolute size-6" })
-      ]
-    }
-  )
 );
-x.displayName = "Button";
+const Button = forwardRef(
+  ({ variant = "primary", size = "lg", fullWidth, asChild, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        ...props,
+        className: cn(
+          buttonVariants({
+            variant,
+            size,
+            fullWidth
+          }),
+          typographyVariants({
+            variant: "label",
+            level: size === "lg" ? 1 : 2
+          }),
+          props.className
+        ),
+        children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
 export {
-  x as Button,
-  x as default
+  Button
 };

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

@@ -1 +1 @@
-export * from './Button';
+export { Button, type ButtonProps } from './Button';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import { CheckboxProps as RadixCheckboxProps } from '@radix-ui/react-checkbox';
-export interface CheckboxProps extends Omit<RadixCheckboxProps, "onCheckedChange" | "onChange" | "className"> {
+interface CheckboxProps extends Omit<RadixCheckboxProps, "onCheckedChange" | "onChange" | "className"> {
     /**
      * Whether to forward the root element
      * @default false
@@ -35,5 +35,6 @@ export interface CheckboxProps extends Omit<RadixCheckboxProps, "onCheckedChange
      */
     value?: string;
 }
-export declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLButtonElement>>;
-export default Checkbox;
+declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { Checkbox };
+export type { CheckboxProps };