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

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/components/Button/Button.js

@@ -1,5 +1,6 @@
 "use client";
 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";
@@ -10,9 +11,9 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        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"
+        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",
@@ -32,7 +33,7 @@ const buttonVariants = cva(
   }
 );
 const Button = forwardRef(
-  ({ variant = "primary", size = "lg", fullWidth, asChild, children, ...props }, ref) => {
+  ({ variant = "primary", size = "lg", fullWidth, asChild, onClick, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
       Comp,
@@ -51,6 +52,7 @@ const Button = forwardRef(
           }),
           props.className
         ),
+        onClick: withHaptics(onClick, () => haptics.impact("light")),
         children
       }
     );

package/dist/components/Checkbox/Checkbox.js

@@ -1,4 +1,5 @@
 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";
@@ -9,7 +10,7 @@ const Checkbox = forwardRef(
       {
         ref,
         checked,
-        onCheckedChange,
+        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,

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

@@ -20,7 +20,7 @@ interface ChipProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
 declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & VariantProps<(props?: ({
-    variant?: "error" | "default" | "success" | "warning" | "important" | null | undefined;
+    variant?: "success" | "warning" | "error" | "default" | "important" | null | undefined;
     isIcon?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & import('react').RefAttributes<HTMLDivElement>>;
 export { Chip };

package/dist/components/CircularState/CircularState.d.ts

@@ -0,0 +1,8 @@
+import { CircularIconProps } from '../CircularIcon/CircularIcon';
+interface CircularStateProps extends Omit<CircularIconProps, "children"> {
+    /** The state to display in the circular icon. */
+    value: "success" | "error" | "warning" | "pending" | "critical";
+}
+declare function CircularState({ value, size, className, ...props }: CircularStateProps): import("react/jsx-runtime").JSX.Element;
+export { CircularState };
+export type { CircularStateProps };

package/dist/components/CircularState/CircularState.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { CircularIcon } from "../CircularIcon/CircularIcon.js";
+import { Clock } from "../Icons/Clock.js";
+import { Tick } from "../Icons/Tick.js";
+import { Warning } from "../Icons/Warning.js";
+import { XMark } from "../Icons/XMark.js";
+const icon = {
+  success: /* @__PURE__ */ jsx(Tick, {}),
+  error: /* @__PURE__ */ jsx(XMark, {}),
+  warning: /* @__PURE__ */ jsx(Warning, {}),
+  pending: /* @__PURE__ */ jsx(Clock, {}),
+  critical: /* @__PURE__ */ jsx(XMark, {})
+};
+const iconClasses = {
+  success: "bg-success-600",
+  error: "bg-gray-400",
+  warning: "bg-warning-600",
+  pending: "bg-gray-400",
+  critical: "bg-error-600"
+};
+function CircularState({ value, size, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    CircularIcon,
+    {
+      className: cn(
+        "text-gray-0",
+        size !== "xs" && "shadow-[inset_0_0_0_1px_rgba(255,255,255,0.3)]",
+        iconClasses[value],
+        "bg-[radial-gradient(111.32%_111.8%_at_22.73%_0%,_rgba(255,255,255,0.2)_0%,_rgba(255,255,255,0)_100%)]",
+        className
+      ),
+      size,
+      ...props,
+      children: icon[value]
+    }
+  );
+}
+export {
+  CircularState
+};

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

@@ -0,0 +1,2 @@
+export { CircularState } from './CircularState';
+export type { CircularStateProps } from './CircularState';

package/dist/components/ClearButton/ClearButton.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import haptics from "../../lib/haptics.js";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
 import { Clear } from "./Clear.js";
@@ -10,6 +11,7 @@ const ClearButton = React.forwardRef(
       if (inputRef && "current" in inputRef && inputRef.current) {
         inputRef.current.value = "";
         onClear == null ? void 0 : onClear();
+        haptics.impact("light");
       }
     };
     return /* @__PURE__ */ jsx(

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { withHaptics } from "../../lib/haptics.js";
 import { Item as Item2, Indicator, Root as Root2 } from "../../node_modules/.pnpm/@radix-ui_react-radio-group@1.2.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@_2u6lfd2xt65wmbxn7lgvaxqbmy/node_modules/@radix-ui/react-radio-group/dist/index.js";
 import { forwardRef } from "react";
 const ColorPickerItem = forwardRef(
@@ -25,7 +26,7 @@ const ColorPickerGroup = forwardRef(
       {
         ref,
         value,
-        onValueChange: onChange,
+        onValueChange: withHaptics(onChange),
         className: "flex gap-4 items-center",
         ...props,
         children

package/dist/components/CountryDrawer/CountryDrawer.js

@@ -1,11 +1,12 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
+import { VisuallyHidden } from "../../node_modules/.pnpm/@radix-ui_react-visually-hidden@1.1.3_@types_react-dom@18.3.5_@types_react@18.3.18__@types_re_cidkwodbmpmiwtvvmizcw56fem/node_modules/@radix-ui/react-visually-hidden/dist/index.js";
 import { useState, useRef } from "react";
 import { XMark } from "../Icons/XMark.js";
 import { GroupedCountryList } from "../PhoneField/GroupedCountryList.js";
 import { useCountryFiltering } from "./useCountryFiltering.js";
 import { useCountryGrouping } from "./useCountryGrouping.js";
-import { Drawer, DrawerTrigger, DrawerContent, DrawerClose } from "../Drawer/Drawer.js";
+import { Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerClose } from "../Drawer/Drawer.js";
 import { TopBar } from "../TopBar/TopBar.js";
 import { Button } from "../Button/Button.js";
 import { SearchField } from "../SearchField/SearchField.js";
@@ -42,6 +43,7 @@ function CountryDrawer({
   return /* @__PURE__ */ jsxs(Drawer, { open, onOpenChange: setOpen, onAnimationEnd, height: "full", children: [
     /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, className: "outline-none", disabled, children }),
     /* @__PURE__ */ jsxs(DrawerContent, { children: [
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: title }) }),
       /* @__PURE__ */ jsx(
         TopBar,
         {

package/dist/components/Flag/constants.d.ts

@@ -1 +1,23 @@
+/**
+ * Unsupported countries:
+ * - Antarctica (AQ)
+ * - Bouvet Island (BV)
+ * - Christmas Island (CX)
+ * - Western Sahara (EH)
+ * - French Guiana (GF)
+ * - South Georgia and the South Sandwich Islands (GS)
+ * - Heard Island and McDonald Islands (HM)
+ * - Saint Kitts and Nevis (KN)
+ * - Saint Martin (MF)
+ * - New Caledonia (NC)
+ * - Saint Pierre and Miquelon (PM)
+ * - Reunion (RE)
+ * - Saint Helena (SH)
+ * - Svalbard and Jan Mayen (SJ)
+ * - French Southern Territories (TF)
+ * - U.S. Minor Outlying Islands (UM)
+ * - U.S. Virgin Islands (VI)
+ * - Wallis and Futuna (WF)
+ * - Mayotte (YT)
+ */
 export declare const countryCodes: readonly ["AD", "AE", "AF", "AG", "AI", "AL", "AM", "AO", "AR", "AS", "AT", "AU", "AW", "AX", "AZ", "BA", "BB", "BD", "BE", "BF", "BG", "BH", "BI", "BJ", "BL", "BM", "BN", "BO", "BQ", "BR", "BS", "BT", "BW", "BY", "BZ", "CA", "CC", "CD", "CF", "CG", "CH", "CI", "CK", "CL", "CM", "CN", "CO", "CR", "CU", "CV", "CW", "CY", "CZ", "DE", "DJ", "DK", "DM", "DO", "DZ", "EC", "EE", "EG", "ER", "ES", "ET", "EU", "FI", "FJ", "FK", "FM", "FO", "FR", "GA", "GB", "GD", "GE", "GG", "GH", "GI", "GL", "GM", "GN", "GP", "GQ", "GR", "GT", "GU", "GW", "GY", "HK", "HN", "HR", "HT", "HU", "ID", "IE", "IL", "IM", "IN", "IO", "IQ", "IR", "IS", "IT", "JE", "JM", "JO", "JP", "KE", "KG", "KH", "KI", "KM", "KP", "KR", "KW", "KY", "KZ", "LA", "LB", "LC", "LI", "LK", "LR", "LS", "LT", "LU", "LV", "LY", "MA", "MC", "MD", "ME", "MG", "MH", "MK", "ML", "MM", "MN", "MO", "MP", "MQ", "MR", "MS", "MT", "MU", "MV", "MW", "MX", "MY", "MZ", "NA", "NE", "NF", "NG", "NI", "NL", "NO", "NP", "NR", "NU", "NZ", "OM", "PA", "PE", "PF", "PG", "PH", "PK", "PL", "PN", "PR", "PS", "PT", "PW", "PY", "QA", "RO", "RS", "RU", "RW", "SA", "SB", "SC", "SD", "SE", "SG", "SI", "SK", "SL", "SM", "SN", "SO", "SR", "SS", "ST", "SV", "SX", "SY", "SZ", "TC", "TD", "TG", "TH", "TJ", "TK", "TL", "TM", "TN", "TO", "TR", "TT", "TV", "TW", "TZ", "UA", "UG", "US", "UY", "UZ", "VA", "VC", "VE", "VG", "VN", "VU", "WS", "XK", "YE", "ZA", "ZM", "ZW"];

package/dist/components/Flag/constants.js

@@ -1,4 +1,237 @@
-const countryCodes = ["AD", "AE", "AF", "AG", "AI", "AL", "AM", "AO", "AR", "AS", "AT", "AU", "AW", "AX", "AZ", "BA", "BB", "BD", "BE", "BF", "BG", "BH", "BI", "BJ", "BL", "BM", "BN", "BO", "BQ", "BR", "BS", "BT", "BW", "BY", "BZ", "CA", "CC", "CD", "CF", "CG", "CH", "CI", "CK", "CL", "CM", "CN", "CO", "CR", "CU", "CV", "CW", "CY", "CZ", "DE", "DJ", "DK", "DM", "DO", "DZ", "EC", "EE", "EG", "ER", "ES", "ET", "EU", "FI", "FJ", "FK", "FM", "FO", "FR", "GA", "GB", "GD", "GE", "GG", "GH", "GI", "GL", "GM", "GN", "GP", "GQ", "GR", "GT", "GU", "GW", "GY", "HK", "HN", "HR", "HT", "HU", "ID", "IE", "IL", "IM", "IN", "IO", "IQ", "IR", "IS", "IT", "JE", "JM", "JO", "JP", "KE", "KG", "KH", "KI", "KM", "KP", "KR", "KW", "KY", "KZ", "LA", "LB", "LC", "LI", "LK", "LR", "LS", "LT", "LU", "LV", "LY", "MA", "MC", "MD", "ME", "MG", "MH", "MK", "ML", "MM", "MN", "MO", "MP", "MQ", "MR", "MS", "MT", "MU", "MV", "MW", "MX", "MY", "MZ", "NA", "NE", "NF", "NG", "NI", "NL", "NO", "NP", "NR", "NU", "NZ", "OM", "PA", "PE", "PF", "PG", "PH", "PK", "PL", "PN", "PR", "PS", "PT", "PW", "PY", "QA", "RO", "RS", "RU", "RW", "SA", "SB", "SC", "SD", "SE", "SG", "SI", "SK", "SL", "SM", "SN", "SO", "SR", "SS", "ST", "SV", "SX", "SY", "SZ", "TC", "TD", "TG", "TH", "TJ", "TK", "TL", "TM", "TN", "TO", "TR", "TT", "TV", "TW", "TZ", "UA", "UG", "US", "UY", "UZ", "VA", "VC", "VE", "VG", "VN", "VU", "WS", "XK", "YE", "ZA", "ZM", "ZW"];
+const countryCodes = [
+  "AD",
+  "AE",
+  "AF",
+  "AG",
+  "AI",
+  "AL",
+  "AM",
+  "AO",
+  "AR",
+  "AS",
+  "AT",
+  "AU",
+  "AW",
+  "AX",
+  "AZ",
+  "BA",
+  "BB",
+  "BD",
+  "BE",
+  "BF",
+  "BG",
+  "BH",
+  "BI",
+  "BJ",
+  "BL",
+  "BM",
+  "BN",
+  "BO",
+  "BQ",
+  "BR",
+  "BS",
+  "BT",
+  "BW",
+  "BY",
+  "BZ",
+  "CA",
+  "CC",
+  "CD",
+  "CF",
+  "CG",
+  "CH",
+  "CI",
+  "CK",
+  "CL",
+  "CM",
+  "CN",
+  "CO",
+  "CR",
+  "CU",
+  "CV",
+  "CW",
+  "CY",
+  "CZ",
+  "DE",
+  "DJ",
+  "DK",
+  "DM",
+  "DO",
+  "DZ",
+  "EC",
+  "EE",
+  "EG",
+  "ER",
+  "ES",
+  "ET",
+  "EU",
+  "FI",
+  "FJ",
+  "FK",
+  "FM",
+  "FO",
+  "FR",
+  "GA",
+  "GB",
+  "GD",
+  "GE",
+  "GG",
+  "GH",
+  "GI",
+  "GL",
+  "GM",
+  "GN",
+  "GP",
+  "GQ",
+  "GR",
+  "GT",
+  "GU",
+  "GW",
+  "GY",
+  "HK",
+  "HN",
+  "HR",
+  "HT",
+  "HU",
+  "ID",
+  "IE",
+  "IL",
+  "IM",
+  "IN",
+  "IO",
+  "IQ",
+  "IR",
+  "IS",
+  "IT",
+  "JE",
+  "JM",
+  "JO",
+  "JP",
+  "KE",
+  "KG",
+  "KH",
+  "KI",
+  "KM",
+  "KP",
+  "KR",
+  "KW",
+  "KY",
+  "KZ",
+  "LA",
+  "LB",
+  "LC",
+  "LI",
+  "LK",
+  "LR",
+  "LS",
+  "LT",
+  "LU",
+  "LV",
+  "LY",
+  "MA",
+  "MC",
+  "MD",
+  "ME",
+  "MG",
+  "MH",
+  "MK",
+  "ML",
+  "MM",
+  "MN",
+  "MO",
+  "MP",
+  "MQ",
+  "MR",
+  "MS",
+  "MT",
+  "MU",
+  "MV",
+  "MW",
+  "MX",
+  "MY",
+  "MZ",
+  "NA",
+  "NE",
+  "NF",
+  "NG",
+  "NI",
+  "NL",
+  "NO",
+  "NP",
+  "NR",
+  "NU",
+  "NZ",
+  "OM",
+  "PA",
+  "PE",
+  "PF",
+  "PG",
+  "PH",
+  "PK",
+  "PL",
+  "PN",
+  "PR",
+  "PS",
+  "PT",
+  "PW",
+  "PY",
+  "QA",
+  "RO",
+  "RS",
+  "RU",
+  "RW",
+  "SA",
+  "SB",
+  "SC",
+  "SD",
+  "SE",
+  "SG",
+  "SI",
+  "SK",
+  "SL",
+  "SM",
+  "SN",
+  "SO",
+  "SR",
+  "SS",
+  "ST",
+  "SV",
+  "SX",
+  "SY",
+  "SZ",
+  "TC",
+  "TD",
+  "TG",
+  "TH",
+  "TJ",
+  "TK",
+  "TL",
+  "TM",
+  "TN",
+  "TO",
+  "TR",
+  "TT",
+  "TV",
+  "TW",
+  "TZ",
+  "UA",
+  "UG",
+  "US",
+  "UY",
+  "UZ",
+  "VA",
+  "VC",
+  "VE",
+  "VG",
+  "VN",
+  "VU",
+  "WS",
+  "XK",
+  "YE",
+  "ZA",
+  "ZM",
+  "ZW"
+];
 export {
   countryCodes
 };

package/dist/components/Icons/Clock.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export declare function Clock(props: HTMLAttributes<SVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Icons/Clock.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function Clock(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "48",
+      height: "48",
+      viewBox: "0 0 48 48",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M24 12L24 24L36 24", stroke: "white", strokeWidth: "3" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z",
+            stroke: "white",
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Clock
+};

package/dist/components/Icons/Warning.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export declare function Warning(props: HTMLAttributes<SVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Icons/Warning.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+function Warning(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "44",
+      height: "44",
+      viewBox: "0 0 44 44",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M22 0.835449L42.6702 38.0417H1.32983L22 0.835449ZM23.375 15.125V25.2083H20.625V15.125H23.375ZM20.6213 32.5505L23.3987 32.5499L23.3981 29.7999L20.6207 29.8005L20.6213 32.5505Z",
+          fill: "white"
+        }
+      )
+    }
+  );
+}
+export {
+  Warning
+};

package/dist/components/LiveFeedback/LiveFeedback.js

@@ -1,10 +1,28 @@
+"use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import haptics from "../../lib/haptics.js";
 import { cn } from "../../lib/utils.js";
+import { useRef, useEffect } from "react";
 import { Fail } from "../Icons/Fail.js";
 import { Success } from "../Icons/Success.js";
 import { Spinner } from "../Spinner/Spinner.js";
 import { Typography } from "../Typography/Typography.js";
+function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
 function LiveFeedback({ state, children, className, label }) {
+  const prevState = usePrevious(state);
+  if (state !== prevState) {
+    if (state === "success") {
+      haptics.notification("success");
+    } else if (state === "failed") {
+      haptics.notification("error");
+    }
+  }
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ jsx(
       "div",

package/dist/components/NumberPad/Delete.js

@@ -8,6 +8,7 @@ function Delete(props) {
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
+      "data-testid": "delete-icon",
       ...props,
       children: /* @__PURE__ */ jsx(
         "path",

package/dist/components/NumberPad/NumberPad.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import haptics from "../../lib/haptics.js";
 import { cn } from "../../lib/utils.js";
 import { useLongPress } from "../../node_modules/.pnpm/@uidotdev_usehooks@2.4.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@uidotdev/usehooks/index.js";
 import { typographyVariants } from "../Typography/Typography.js";
@@ -32,6 +33,7 @@ const NumberPad = ({
     console.error("NumberPad value must be a valid number or empty string");
   }
   const handleButtonClick = (buttonValue) => {
+    haptics.impact("light");
     if (!onChange || disabled) return;
     if (buttonValue === "del") {
       onChange(value.slice(0, -1));
@@ -53,11 +55,11 @@ const NumberPad = ({
       disabled,
       className: cn(
         typographyVariants({ variant: "heading", level: 3 }),
-        "h-12 min-w-28 flex items-center justify-center select-none group",
-        "disabled:text-gray-300 disabled:cursor-not-allowed disabled:active:bg-transparent"
+        "h-12 min-w-28 flex items-center justify-center select-none",
+        "disabled:text-gray-300 disabled:cursor-not-allowed"
       ),
       ...button.value === "del" ? longPressAttributes : {},
-      children: /* @__PURE__ */ jsx("span", { className: "duration-200 transition-colors size-12 flex items-center justify-center rounded-full group-active:bg-gray-50", children: button.label || button.value })
+      children: /* @__PURE__ */ jsx("span", { className: "duration-200 transition-colors size-12 flex items-center justify-center rounded-full", children: button.label || button.value })
     },
     button.value
   )) });

package/dist/components/OTPField/OTPField.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, Fragment } from "react/jsx-runtime";
+import { withHaptics } from "../../lib/haptics.js";
 import { cn } from "../../lib/utils.js";
 import { cva } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import { OTPInput as Lt, REGEXP_ONLY_DIGITS as Kt, REGEXP_ONLY_CHARS as Jt, REGEXP_ONLY_DIGITS_AND_CHARS as Qt } from "../../node_modules/.pnpm/input-otp@1.4.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/input-otp/dist/index.js";
@@ -34,7 +35,7 @@ const inputModeDictionary = {
   digitsAndChars: "text"
 };
 const OTPField = React.forwardRef(
-  ({ maxLength = 6, error, children, mode = "digits", pattern, ...props }, ref) => {
+  ({ maxLength = 6, error, children, mode = "digits", pattern, onChange, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Lt,
       {
@@ -43,6 +44,7 @@ const OTPField = React.forwardRef(
         maxLength,
         inputMode: inputModeDictionary[mode],
         pattern: pattern || patternDictionary[mode],
+        onChange: withHaptics(onChange),
         containerClassName: "flex items-center gap-2 has-[:disabled]:opacity-50",
         render: ({ slots }) => /* @__PURE__ */ jsx(Fragment, { children: slots.map(({ isActive, char }, idx) => /* @__PURE__ */ jsx(
           "div",