@worldcoin/mini-apps-ui-kit-react 1.0.1 → 1.1.0

package/dist/components/Haptic/Haptic.d.ts

@@ -0,0 +1,23 @@
+import { ImpactStyle, NotificationType } from '../../lib/haptics';
+type HapticPropsBase = {
+    children: React.ReactNode;
+    asChild?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
+type ImpactHapticProps = HapticPropsBase & {
+    variant: "impact";
+    type: ImpactStyle;
+};
+type NotificationHapticProps = HapticPropsBase & {
+    variant: "notification";
+    type: NotificationType;
+};
+type SelectionHapticProps = HapticPropsBase & {
+    variant: "selection";
+    type?: never;
+};
+type HapticProps = ImpactHapticProps | NotificationHapticProps | SelectionHapticProps;
+declare function Haptic({ children, variant, type, asChild, onClick, ...props }: HapticProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Haptic {
+    var displayName: string;
+}
+export { Haptic };

package/dist/components/Haptic/Haptic.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+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 haptics from "../../lib/haptics.js";
+function Haptic({
+  children,
+  variant = "selection",
+  type,
+  asChild,
+  onClick,
+  ...props
+}) {
+  const Component = asChild ? Slot : "div";
+  const handleInteraction = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    switch (variant) {
+      case "impact":
+        haptics.impact(type);
+        break;
+      case "notification":
+        haptics.notification(type);
+        break;
+      case "selection":
+        haptics.selection();
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsx(Component, { onClick: handleInteraction, ...props, children });
+}
+Haptic.displayName = "Haptic";
+export {
+  Haptic
+};

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

@@ -0,0 +1,2 @@
+export { Haptic } from './Haptic';
+export { useHaptics } from './use-haptics';

package/dist/components/Haptic/use-haptics.d.ts

@@ -0,0 +1,6 @@
+declare function useHaptics(): {
+    notification: (type: import('../../lib/haptics').NotificationType) => void;
+    selection: () => void;
+    impact: (type: import('../../lib/haptics').ImpactStyle) => void;
+};
+export { useHaptics };

package/dist/components/Haptic/use-haptics.js

@@ -0,0 +1,7 @@
+import haptics from "../../lib/haptics.js";
+function useHaptics() {
+  return haptics;
+}
+export {
+  useHaptics
+};

package/dist/index.d.ts

@@ -34,4 +34,5 @@ export { CountryDrawer } from './components/CountryDrawer';
 export { ToggleGroupRoot, ToggleGroupItem } from './components/ToggleGroup';
 export { Tabs, TabItem } from './components/Tabs';
 export { LiveFeedback } from './components/LiveFeedback';
+export { Haptic, useHaptics } from './components/Haptic';
 export { default as uiKitTailwindPlugin } from './tailwind';

package/dist/index.js

@@ -37,6 +37,8 @@ import { CountryDrawer } from "./components/CountryDrawer/CountryDrawer.js";
 import { ToggleGroupItem, ToggleGroupRoot } from "./components/ToggleGroup/ToggleGroup.js";
 import { TabItem, Tabs } from "./components/Tabs/Tabs.js";
 import { LiveFeedback } from "./components/LiveFeedback/LiveFeedback.js";
+import { Haptic } from "./components/Haptic/Haptic.js";
+import { useHaptics } from "./components/Haptic/use-haptics.js";
 export {
   AlertDialog,
   AlertDialogClose,
@@ -66,6 +68,7 @@ export {
   DrawerTrigger,
   Flag,
   Form,
+  Haptic,
   Input,
   ListItem,
   LiveFeedback,
@@ -93,5 +96,6 @@ export {
   Typography,
   WalletAddressField,
   default2 as uiKitTailwindPlugin,
+  useHaptics,
   useToast
 };

package/dist/lib/haptics.d.ts

@@ -16,7 +16,7 @@ declare global {
 declare const haptics: {
     notification: (type: NotificationType) => void;
     selection: () => void;
-    impact: (style: ImpactStyle) => void;
+    impact: (type: ImpactStyle) => void;
 };
 /**
  * Wraps a function with haptic feedback
@@ -26,3 +26,4 @@ declare const haptics: {
  */
 export declare function withHaptics<T extends (...args: any[]) => any>(fn: T | undefined, hapticFn?: () => void): T;
 export default haptics;
+export type { NotificationType, ImpactStyle, HapticFeedbackParams };

package/dist/lib/haptics.js

@@ -18,10 +18,10 @@ const haptics = {
       hapticsType: "selectionChanged"
     });
   },
-  impact: (style) => {
+  impact: (type) => {
     sendHapticFeedback({
       hapticsType: "impact",
-      style
+      style: type
     });
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worldcoin/mini-apps-ui-kit-react",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -15,7 +15,7 @@
   "peerDependencies": {
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "tailwindcss": "^3"
+    "tailwindcss": "^3 || ^4"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {
@@ -27,6 +27,7 @@
     "@eslint/js": "^9.13.0",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-mdx-gfm": "^8.6.12",
     "@storybook/addon-onboarding": "^8.4.7",
     "@storybook/blocks": "^8.4.7",
     "@storybook/manager-api": "^8.5.5",
@@ -236,6 +237,10 @@
       "types": "./dist/components/CircularState/index.d.ts",
       "default": "./dist/components/CircularState/index.js"
     },
+    "./Haptic": {
+      "types": "./dist/components/Haptic/index.d.ts",
+      "default": "./dist/components/Haptic/index.js"
+    },
     "./tailwind": {
       "types": "./dist/tailwind/index.d.ts",
       "import": "./dist/tailwind/index.js",