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

package/README.md

@@ -57,21 +57,12 @@ export default tseslint.config({
 });
 ```
 
-## Font Configuration
+## Font
 
 The library uses the following font **[TWK Lausanne](https://weltkern.com/typefaces/lausanne)** as the sans-serif font for all text `(--font-sans)`. 
 
 > **⚠️ License Notice**: TWK Lausanne is a commercial font that requires a license. Make sure you have obtained the appropriate license from [Weltkern](https://weltkern.com/typefaces/lausanne) before using it in your project.
 
-By default, the library sets `--font-sans` to **TWK Lausanne**, but you can override this CSS variable to use any other font of your choice:
-
-```css
-:root {
-  --font-sans: 'Your Font Name', sans-serif;
-}
-```
-
-You must import the font in your application before using it. The library does not include the font files - you need to handle the font loading yourself according to your license agreement.
 
 ## Importing Styles
 
@@ -81,33 +72,11 @@ To use the UI Kit components with their proper styling, you need to import the s
 import "@worldcoin/mini-apps-ui-kit-react/styles.css";
 ```
 
-## Import Methods
-
-The library supports two different import methods:
-
-### Default Import
-
-Import components from the main entry point:
-
-```typescript
-import { Button } from "@worldcoin/mini-apps-ui-kit-react";
-```
-
-This method is simpler but includes all components in your bundle, even if you're not using them.
-
-### Component-Level Import
-
-Import components directly from their individual modules:
-
-```typescript
-import { Button } from "@worldcoin/mini-apps-ui-kit-react/Button";
-```
-
-This method enables tree-shaking and reduces your final bundle size by only including the components you actually use. Recommended for production applications where bundle size is a concern.
-
 ## Icons
 
-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):
+The library uses a custom set of icons built on top of [Iconoir](https://iconoir.com/). While we provide our own custom set, we highly recommend using Iconoir directly for your miniapps as it offers a comprehensive and well-maintained icon system.
+
+To use Iconoir in your project, you'll need to install the [React package](https://www.npmjs.com/package/iconoir-react):
 
 ```bash
 npm install iconoir-react

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

@@ -5,7 +5,7 @@ declare const buttonVariants: (props?: ({
     size?: "sm" | "lg" | "icon" | 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"
@@ -27,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,18 +1,19 @@
 "use client";
-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(
+import { jsx } from "react/jsx-runtime";
+import haptics, { withHaptics } from "../../lib/haptics.js";
+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 disabled:bg-gray-100 disabled:text-gray-300",
+        secondary: "bg-transparent text-gray-900 border border-gray-200 disabled:text-gray-300 disabled:border-gray-100",
+        tertiary: "bg-gray-100 text-gray-900 disabled:text-gray-300 disabled:bg-gray-50"
       },
       size: {
         sm: "h-10 min-w-10 px-4",
@@ -27,33 +28,37 @@ const b = y(
     defaultVariants: {
       variant: "primary",
       size: "lg",
-      fullWidth: !1
+      fullWidth: false
     }
   }
-), f = d(
-  ({ variant: t = "primary", size: r = "lg", fullWidth: e, asChild: i, children: o, ...a }, g) => /* @__PURE__ */ l(
-    i ? s : "button",
-    {
-      ref: g,
-      ...a,
-      className: n(
-        b({
-          variant: t,
-          size: r,
-          fullWidth: e
-        }),
-        m({
-          variant: "label",
-          level: r === "lg" ? 1 : 2
-        }),
-        a.className
-      ),
-      children: o
-    }
-  )
 );
-f.displayName = "Button";
+const Button = forwardRef(
+  ({ variant = "primary", size = "lg", fullWidth, asChild, onClick, 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
+        ),
+        onClick: withHaptics(onClick, () => haptics.impact("light")),
+        children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
 export {
-  f as Button,
-  f 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 };

package/dist/components/Checkbox/Checkbox.js

@@ -1,23 +1,25 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Root as c, Indicator as s } from "../../node_modules/.pnpm/@radix-ui_react-checkbox@1.1.3_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18._5vtvszwgvdmnkk62ia2dob365m/node_modules/@radix-ui/react-checkbox/dist/index.js";
-import { forwardRef as i } from "react";
-import { Tick as n } from "../Icons/Tick.js";
-const l = i(
-  ({ checked: a, onChange: r, disabled: t = !1, ...o }, d) => /* @__PURE__ */ e(
-    c,
-    {
-      ref: d,
-      checked: a,
-      onCheckedChange: r,
-      disabled: t,
-      className: "flex size-6 items-center justify-center rounded-md border-[0.09375rem] transition-all data-[state=checked]:border-gray-900 data-[state=checked]:bg-gray-900 data-[state=unchecked]:border-gray-200 data-[state=unchecked]:bg-transparent disabled:cursor-not-allowed disabled:opacity-20",
-      ...o,
-      children: /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(n, { className: "text-gray-0" }) })
-    }
-  )
+import { jsx } from "react/jsx-runtime";
+import { withHaptics } from "../../lib/haptics.js";
+import { Root, Indicator } from "../../node_modules/.pnpm/@radix-ui_react-checkbox@1.1.3_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18._5vtvszwgvdmnkk62ia2dob365m/node_modules/@radix-ui/react-checkbox/dist/index.js";
+import { forwardRef } from "react";
+import { Tick } from "../Icons/Tick.js";
+const Checkbox = forwardRef(
+  ({ checked, onChange: onCheckedChange, disabled = false, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Root,
+      {
+        ref,
+        checked,
+        onCheckedChange: withHaptics(onCheckedChange),
+        disabled,
+        className: "flex size-6 items-center justify-center rounded-md border-[0.09375rem] transition-all data-[state=checked]:border-gray-900 data-[state=checked]:bg-gray-900 data-[state=unchecked]:border-gray-200 data-[state=unchecked]:bg-transparent disabled:cursor-not-allowed disabled:opacity-20",
+        ...props,
+        children: /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(Tick, { className: "text-gray-0" }) })
+      }
+    );
+  }
 );
-l.displayName = "Checkbox";
+Checkbox.displayName = "Checkbox";
 export {
-  l as Checkbox,
-  l as default
+  Checkbox
 };

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

@@ -1 +1 @@
-export * from './Checkbox';
+export { Checkbox, type CheckboxProps } from './Checkbox';