@tapcart/mobile-components 0.8.50 → 0.8.51

package/dist/components/ui/button.d.ts

@@ -17,9 +17,13 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     iconStrokeColor?: string;
     iconClassName?: string;
     iconPosition?: "left" | "right";
-    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    disableHaptic?: boolean;
 }
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Button: {
+    ({ className, labelClassName, labelStyle, variant, size, asChild, loading, icon, iconColor, iconStrokeColor, iconPosition, iconSize, iconUrl, iconClassName, onClick, disableHaptic, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const getButtonProps: (buttonConfig: TextStyle & BackgroundAndPadding & {
     iconColor: Color;
     iconDetails: {

package/dist/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAGL,KAAK,EAEL,SAAS,EAET,oBAAoB,EACrB,MAAM,iBAAiB,CAAA;AAMxB,QAAA,MAAM,cAAc;;;mFAgCnB,CAAA;AAwCD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;IACvD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;CAC9D;AAED,QAAA,MAAM,MAAM,uFA0GX,CAAA;AAGD,QAAA,MAAM,cAAc,iBACJ,SAAS,GACrB,oBAAoB,GAAG;IACrB,SAAS,EAAE,KAAK,CAAA;IAChB,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5B,gBAAgB,EAAE,OAAO,CAAA;CAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBJ,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAGL,KAAK,EAEL,SAAS,EAET,oBAAoB,EACrB,MAAM,iBAAiB,CAAA;AAMxB,QAAA,MAAM,cAAc;;;mFAgCnB,CAAA;AAwCD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;IACvD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,QAAA,MAAM,MAAM;qMAkBT,WAAW;;CA0Fb,CAAA;AAID,QAAA,MAAM,cAAc,iBACJ,SAAS,GACrB,oBAAoB,GAAG;IACrB,SAAS,EAAE,KAAK,CAAA;IAChB,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5B,gBAAgB,EAAE,OAAO,CAAA;CAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBJ,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/button.js

@@ -1,3 +1,4 @@
+"use client";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -16,8 +17,8 @@ import { cva } from "class-variance-authority";
 import { cn, getColor, getTextStyle, getBackgroundAndPaddingStyle, } from "../../lib/utils";
 import { Icon } from "./icon";
 import { Text } from "./text";
-import { useTap } from "./tap";
-import { useMergeRefs } from "../hooks/use-merge-refs";
+// @ts-ignore -- webbridge-react is not typed (yet)
+import { useActions } from "@tapcart/app-studio-sdk";
 const buttonVariants = cva("w-full flex rounded items-center justify-center transition-colors disabled:bg-stateColors-disabled disabled:border-stateColors-disabled disabled:pointer-events-none ring-offset-background overflow-elipse whitespace-nowrap truncate disabled:opacity-70 cursor-pointer", {
     variants: {
         size: {
@@ -80,11 +81,10 @@ const labelVariants = cva("truncate", {
         variant: "default",
     },
 });
-const Button = React.forwardRef((_a, ref) => {
-    var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon, iconColor, iconStrokeColor, iconPosition, iconSize, iconUrl, iconClassName, onClick } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon", "iconColor", "iconStrokeColor", "iconPosition", "iconSize", "iconUrl", "iconClassName", "onClick"]);
-    const { onTap, isPressed, ref: tapRef } = useTap();
-    const mergedRef = useMergeRefs(ref, tapRef);
-    const Comp = asChild ? Slot : "button";
+const Button = (_a) => {
+    var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon, iconColor, iconStrokeColor, iconPosition, iconSize, iconUrl, iconClassName, onClick, disableHaptic = false } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon", "iconColor", "iconStrokeColor", "iconPosition", "iconSize", "iconUrl", "iconClassName", "onClick", "disableHaptic"]);
+    const { action } = useActions();
+    const Comp = asChild ? Slot : (onClick ? "button" : "div");
     const IconButton = () => icon || iconUrl ? (_jsx(Icon, { name: icon, url: iconUrl, size: "sm", style: { color: iconColor } })) : null;
     // TODO: need to refactor icon sizing. This isnt extensible.
     const BasicButton = () => (_jsxs(_Fragment, { children: [icon || iconUrl ? (_jsx(Icon, { name: iconUrl ? undefined : icon, url: iconUrl, size: iconSize ? iconSize : "sm", className: cn(iconVariants({ variant }), {
@@ -92,15 +92,28 @@ const Button = React.forwardRef((_a, ref) => {
                     "ml-2": iconPosition === "right",
                 }, iconClassName), style: { color: iconColor } })) : null, !loading ? (_jsx(Text, Object.assign({ type: "body-primary", className: cn(labelVariants({ variant }), labelClassName), style: labelStyle }, { children: props.children }))) : (_jsx(_Fragment, {}))] }));
     const LoadingButton = () => (_jsx("div", Object.assign({ className: cn("flex items-center justify-center", size === "icon" ? "h-5" : "h-6") }, { children: _jsx(Icon, { className: cn(iconVariants({ variant }), "h-5 w-5 animate-spin"), name: "loader", style: { color: iconColor } }) })));
+    const handleClick = onClick
+        ? (e) => {
+            try {
+                onClick(e);
+                if (!disableHaptic) {
+                    action("trigger/haptic");
+                }
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+        : undefined;
     return (_jsx(Comp, Object.assign({ className: cn(buttonVariants({ variant, size }), className, {
             "pointer-events-none": loading,
             "flex-row-reverse": (icon || iconUrl) && iconPosition === "right",
-        }), ref: mergedRef, onClick: onTap(onClick) }, props, { children: loading ? (_jsx(LoadingButton, {})) : typeof props.children === "object" &&
+        }), onClick: handleClick }, props, { children: loading ? (_jsx(LoadingButton, {})) : typeof props.children === "object" &&
             React.isValidElement(props.children) ? ( // if children are passed as a valid React element
         props.children // render it
         ) : // otherwise use props
             size === "icon" ? (_jsx(IconButton, {})) : (_jsx(BasicButton, {})) })));
-});
+};
 Button.displayName = "Button";
 const getButtonProps = (buttonConfig) => {
     return {

package/dist/components/ui/carousel.d.ts

@@ -8,6 +8,7 @@ type UseAutoplayType = {
 };
 import Autoplay from "embla-carousel-autoplay";
 import Fade from "embla-carousel-fade";
+import { Button } from "../../components/ui/button";
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];
@@ -25,8 +26,14 @@ declare const CarouselContent: React.ForwardRefExoticComponent<React.HTMLAttribu
     showOverflow?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const CarouselItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<import("../../components/ui/button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const CarouselNext: React.ForwardRefExoticComponent<Omit<import("../../components/ui/button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const CarouselPrevious: {
+    ({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const CarouselNext: {
+    ({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 type CarouselDotsProps = {
     maxDots?: number;
     dotColor?: string;

package/dist/components/ui/carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../components/ui/carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,EAAE,EACvB,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,iBAAiB,EAAkB,MAAM,gBAAgB,CAAA;AAClE,KAAK,eAAe,GAAG;IACrB,iBAAiB,EAAE,OAAO,CAAA;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,qBAAqB,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAA;CACtD,CAAA;AAED,OAAO,QAAQ,MAAM,yBAAyB,CAAA;AAC9C,OAAO,IAAI,MAAM,qBAAqB,CAAA;AAQtC,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAC1C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAChE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAC/C,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAE9C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAA;IACnC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;CAC/C,CAAA;AA0BD,QAAA,MAAM,QAAQ,6HAuIb,CAAA;AAGD,QAAA,MAAM,eAAe;;wCAsBnB,CAAA;AAGF,QAAA,MAAM,YAAY,6GAmBhB,CAAA;AAGF,QAAA,MAAM,gBAAgB,kLA0BpB,CAAA;AAGF,QAAA,MAAM,YAAY,kLA0BhB,CAAA;AAGF,KAAK,iBAAiB,GAAG;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACzB,CAAA;AAED,QAAA,MAAM,YAAY,iIA+DjB,CAAA;AA8DD,QAAA,MAAM,WAAW,aACL,iBAAiB,GAAG,SAAS,KACtC,eA2CF,CAAA;AAED,OAAO,EACL,KAAK,WAAW,EAChB,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,CAAA"}
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../components/ui/carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,EAAE,EACvB,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,iBAAiB,EAAkB,MAAM,gBAAgB,CAAA;AAClE,KAAK,eAAe,GAAG;IACrB,iBAAiB,EAAE,OAAO,CAAA;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,qBAAqB,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAA;CACtD,CAAA;AAED,OAAO,QAAQ,MAAM,yBAAyB,CAAA;AAC9C,OAAO,IAAI,MAAM,qBAAqB,CAAA;AAItC,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAInD,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAC1C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAChE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAC/C,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAE9C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAA;IACnC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;CAC/C,CAAA;AA0BD,QAAA,MAAM,QAAQ,6HAuIb,CAAA;AAGD,QAAA,MAAM,eAAe;;wCAsBnB,CAAA;AAGF,QAAA,MAAM,YAAY,6GAmBhB,CAAA;AAGF,QAAA,MAAM,gBAAgB;6CAKnB,MAAM,cAAc,CAAC,aAAa,CAAC;;CAsBrC,CAAA;AAGD,QAAA,MAAM,YAAY;6CAKf,MAAM,cAAc,CAAC,aAAa,CAAC;;CAsBrC,CAAA;AAGD,KAAK,iBAAiB,GAAG;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACzB,CAAA;AAED,QAAA,MAAM,YAAY,iIA+DjB,CAAA;AA8DD,QAAA,MAAM,WAAW,aACL,iBAAiB,GAAG,SAAS,KACtC,eA2CF,CAAA;AAED,OAAO,EACL,KAAK,WAAW,EAChB,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,CAAA"}

package/dist/components/ui/carousel.js

@@ -119,21 +119,21 @@ const CarouselItem = React.forwardRef((_a, ref) => {
     return (_jsx("div", Object.assign({ ref: ref, role: "group", "aria-roledescription": "slide", className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className) }, props)));
 });
 CarouselItem.displayName = "CarouselItem";
-const CarouselPrevious = React.forwardRef((_a, ref) => {
+const CarouselPrevious = (_a) => {
     var { className, variant = "outline", size = "icon" } = _a, props = __rest(_a, ["className", "variant", "size"]);
     const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-    return (_jsxs(Button, Object.assign({ ref: ref, variant: variant, size: size, className: cn("absolute  h-8 w-8 rounded-full", orientation === "horizontal"
+    return (_jsxs(Button, Object.assign({ variant: variant, size: size, className: cn("absolute  h-8 w-8 rounded-full", orientation === "horizontal"
             ? "-left-12 top-1/2 -translate-y-1/2"
             : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollPrev }, props, { onClick: scrollPrev }, { children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), _jsx("span", Object.assign({ className: "sr-only" }, { children: "Previous slide" }))] })));
-});
+};
 CarouselPrevious.displayName = "CarouselPrevious";
-const CarouselNext = React.forwardRef((_a, ref) => {
+const CarouselNext = (_a) => {
     var { className, variant = "outline", size = "icon" } = _a, props = __rest(_a, ["className", "variant", "size"]);
     const { orientation, scrollNext, canScrollNext } = useCarousel();
-    return (_jsxs(Button, Object.assign({ ref: ref, variant: variant, size: size, className: cn("absolute h-8 w-8 rounded-full", orientation === "horizontal"
+    return (_jsxs(Button, Object.assign({ variant: variant, size: size, className: cn("absolute h-8 w-8 rounded-full", orientation === "horizontal"
             ? "-right-12 top-1/2 -translate-y-1/2"
             : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollNext }, props, { onClick: scrollNext }, { children: [_jsx(ArrowRight, { className: "h-4 w-4" }), _jsx("span", Object.assign({ className: "sr-only" }, { children: "Next slide" }))] })));
-});
+};
 CarouselNext.displayName = "CarouselNext";
 const CarouselDots = React.forwardRef((_a, ref) => {
     var _b;

package/dist/components/ui/favorite.d.ts

@@ -21,7 +21,11 @@ export interface FavoriteProps extends React.ButtonHTMLAttributes<HTMLButtonElem
     borderSides?: BorderSides;
     borderColorStyle?: string;
     borderPadding?: Partial<Spacing>;
+    disableHaptic?: boolean;
 }
-declare const Favorite: React.ForwardRefExoticComponent<FavoriteProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Favorite: {
+    ({ className, size, selected, onClick, iconUrl, showBackground, showBackgroundShadow, cornerRadius, layoutType, favoriteFillColor, disabledFillColor, backgroundColor, borderSides, borderColorStyle, borderPadding, disableHaptic, ...props }: FavoriteProps & VariantProps<typeof favoriteVariants>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { Favorite, favoriteVariants };
 //# sourceMappingURL=favorite.d.ts.map

package/dist/components/ui/favorite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../components/ui/favorite.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAGL,OAAO,EAER,MAAM,iBAAiB,CAAA;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAI3C,QAAA,MAAM,gBAAgB;;;;mFAuBpB,CAAA;AAEF,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EACP,sBAAsB,GACtB,WAAW,GACX,UAAU,GACV,aAAa,GACb,cAAc,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;CACjC;AAED,QAAA,MAAM,QAAQ,yFA2Db,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../components/ui/favorite.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,EAGL,OAAO,EAER,MAAM,iBAAiB,CAAA;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,QAAA,MAAM,gBAAgB;;;;mFAuBpB,CAAA;AAEF,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EACP,sBAAsB,GACtB,WAAW,GACX,UAAU,GACV,aAAa,GACb,cAAc,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;IAChC,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,QAAA,MAAM,QAAQ;oPAkBX,aAAa,GAAG,aAAa,uBAAuB,CAAC;;CA4CvD,CAAA;AAID,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/favorite.js

@@ -1,3 +1,4 @@
+"use client";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -10,12 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
 import { cva } from "class-variance-authority";
+// @ts-ignore -- webbridge-react is not typed (yet)
+import { useActions } from "@tapcart/app-studio-sdk";
 import { cn, getBorderSidesStyle, getPaddingStyle, } from "../../lib/utils";
 import { Icon } from "./icon";
-import { useTap } from "./tap";
-import { useMergeRefs } from "../hooks/use-merge-refs";
 const favoriteVariants = cva("flex p-2 gap-2 rounded-[4px]", {
     variants: {
         size: {
@@ -40,18 +40,27 @@ const favoriteVariants = cva("flex p-2 gap-2 rounded-[4px]", {
         layoutType: "below-image-on-right",
     },
 });
-const Favorite = React.forwardRef((_a, forwardedRef) => {
-    var { className, size = "small", selected = false, onClick, iconUrl = "https://storage.googleapis.com/tapcart-asset-uploads-prod/default-icon-options/Heart_1.svg", showBackground = false, showBackgroundShadow = false, cornerRadius = 4, layoutType = "below-image-on-right", favoriteFillColor = "#D91E18", disabledFillColor = "#727272", backgroundColor = "#FFFFFF", borderSides = ["all"], borderColorStyle = undefined, borderPadding = {} } = _a, props = __rest(_a, ["className", "size", "selected", "onClick", "iconUrl", "showBackground", "showBackgroundShadow", "cornerRadius", "layoutType", "favoriteFillColor", "disabledFillColor", "backgroundColor", "borderSides", "borderColorStyle", "borderPadding"]);
-    const { onTap, isPressed, ref: tapRef } = useTap();
-    const mergedRef = useMergeRefs(forwardedRef, tapRef);
-    return (_jsx("button", Object.assign({ onClick: onTap(onClick), ref: mergedRef, className: cn(favoriteVariants({
+const Favorite = (_a) => {
+    var { className, size = "small", selected = false, onClick, iconUrl = "https://storage.googleapis.com/tapcart-asset-uploads-prod/default-icon-options/Heart_1.svg", showBackground = false, showBackgroundShadow = false, cornerRadius = 4, layoutType = "below-image-on-right", favoriteFillColor = "#D91E18", disabledFillColor = "#727272", backgroundColor = "#FFFFFF", borderSides = ["all"], borderColorStyle = undefined, borderPadding = {}, disableHaptic = false } = _a, props = __rest(_a, ["className", "size", "selected", "onClick", "iconUrl", "showBackground", "showBackgroundShadow", "cornerRadius", "layoutType", "favoriteFillColor", "disabledFillColor", "backgroundColor", "borderSides", "borderColorStyle", "borderPadding", "disableHaptic"]);
+    const { action } = useActions();
+    const handleClick = (e) => {
+        try {
+            onClick(e);
+            if (!disableHaptic) {
+                action("trigger/haptic");
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    };
+    return (_jsx("button", Object.assign({ onClick: onClick, className: cn("cursor-pointer active:opacity-70", favoriteVariants({
             size,
             showBackgroundShadow,
             layoutType,
         }), className), style: Object.assign({}, (showBackground && Object.assign(Object.assign({ borderRadius: `${cornerRadius}px`, backgroundColor: backgroundColor, borderColor: borderColorStyle }, getBorderSidesStyle(borderSides)), getPaddingStyle(borderPadding)))) }, props, { children: _jsx(Icon, { url: iconUrl, size: size === "small" ? "xs" : "sm", style: {
-                opacity: isPressed ? 0.7 : 1,
                 color: selected ? favoriteFillColor : disabledFillColor,
             } }) })));
-});
+};
 Favorite.displayName = "Favorite";
 export { Favorite, favoriteVariants };

package/dist/components/ui/quantity-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"quantity-picker.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AA0ED,QAAA,MAAM,cAAc,4FA8HnB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"quantity-picker.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AA4FD,QAAA,MAAM,cAAc,4FA8HnB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/quantity-picker.js

@@ -14,11 +14,23 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import * as React from "react";
 import { cn } from "../../lib/utils";
 import { Icon } from "./icon";
-import { useTap } from "./tap";
 import { LoadingDots } from "./loading-dots";
-const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled }) => {
-    const { onTap, isPressed, ref: tapRef } = useTap();
+// @ts-ignore -- webbridge-react is not typed (yet)
+import { useActions } from "@tapcart/app-studio-sdk";
+const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled, disableHaptic = false, }) => {
     const [isButtonPressed, setIsButtonPressed] = React.useState(false);
+    const { action } = useActions();
+    const handleClick = (e) => {
+        try {
+            handler(e);
+            if (!disableHaptic) {
+                action("trigger/haptic");
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    };
     // Handle press state manually for the invisible button
     const handleMouseDown = React.useCallback(() => {
         if (!disabled)
@@ -30,8 +42,8 @@ const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled })
     // Calculate the visual styles for the button
     const visualButtonStyle = Object.assign({}, style);
     return (_jsxs("div", Object.assign({ className: "relative h-7 w-7", style: { touchAction: "manipulation" } }, { children: [_jsx("div", Object.assign({ className: cn("absolute inset-0 flex items-center justify-center bg-stateColors-skeleton border border-coreColors-dividingLines", className, disabled ? "opacity-50" : ""), style: visualButtonStyle, "aria-hidden": "true" }, { children: _jsx(Icon, { url: iconUrl, size: "sm", strokeColor: iconColor, strokeWidth: 4, style: {
-                        opacity: isPressed || isButtonPressed ? 0.7 : 1,
-                    } }) })), _jsx("button", { onClick: onTap(handler), onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleMouseDown, onTouchEnd: handleMouseUp, onTouchCancel: handleMouseUp, ref: tapRef, className: "absolute cursor-pointer", style: {
+                        opacity: isButtonPressed ? 0.7 : 1,
+                    } }) })), _jsx("button", { onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleMouseDown, onTouchEnd: handleMouseUp, onTouchCancel: handleMouseUp, className: "absolute cursor-pointer", style: {
                     top: "-8px",
                     right: "-8px",
                     bottom: "-8px",

package/dist/components/ui/radio-group.d.ts

@@ -10,12 +10,14 @@ export interface RadioGroupItemProps {
     onSelect?: React.ReactEventHandler;
     selected?: boolean;
     value: string;
+    onClick?: React.ReactEventHandler;
 }
 declare const radiogroupItemVariants: (props?: ({
     variant?: "default" | "selected" | "deactivated" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & RadioGroupItemProps & VariantProps<(props?: ({
-    variant?: "default" | "selected" | "deactivated" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
+declare const RadioGroupItem: {
+    ({ value, label, subtext, numberAmount, onSelect, onClick, selected, className, variant, ...props }: RadioGroupItemProps & VariantProps<typeof radiogroupItemVariants>): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
 export { RadioGroup, RadioGroupItem, radiogroupItemVariants };
 //# sourceMappingURL=radio-group.d.ts.map

package/dist/components/ui/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../components/ui/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAElE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAOjE,QAAA,MAAM,UAAU,+JAWd,CAAA;AAGF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,sBAAsB;;mFAc3B,CAAA;AAuCD,QAAA,MAAM,cAAc;;8HAkGnB,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,sBAAsB,EAAE,CAAA"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../components/ui/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAElE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,UAAU,+JAWd,CAAA;AAGF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;CAClC;AAED,QAAA,MAAM,sBAAsB;;mFAc3B,CAAA;AAqCD,QAAA,MAAM,cAAc;yGAWjB,mBAAmB,GAAG,aAAa,6BAA6B,CAAC;;CAsEnE,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,sBAAsB,EAAE,CAAA"}

package/dist/components/ui/radio-group.js

@@ -17,8 +17,6 @@ import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 import { Icon } from "./icon";
 import { Text } from "./text";
-import { useTap } from "./tap";
-import { useMergeRefs } from "../hooks/use-merge-refs";
 const RadioGroup = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (_jsx(RadioGroupPrimitive.Root, Object.assign({ className: cn("grid gap-4", className) }, props, { ref: ref })));
@@ -36,12 +34,10 @@ const radiogroupItemVariants = cva("grid grid-cols-[auto,auto,1fr] gap-2 items-c
         variant: "default",
     },
 });
-const RadioGroupItemLabels = ({ key, label, numberAmount, subtext, }) => (_jsxs("div", Object.assign({ className: "col-span-2" }, { children: [_jsxs("div", Object.assign({ className: "flex flex-row items-center" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "group-disabled:text-stateColors-disabled mr-2" }, { children: label })), numberAmount ? (_jsx(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor group-disabled:text-stateColors-disabled" }, { children: `(${numberAmount})` }))) : null] })), subtext ? (_jsx(Text, Object.assign({ type: "body-secondary", className: "group-disabled:text-stateColors-disabled mt-1" }, { children: subtext }))) : null] })));
-const RadioGroupItem = React.forwardRef((_a, ref) => {
-    var { value, label = "", subtext, numberAmount = 0, onSelect = () => { }, onClick = () => { }, selected = false, className, variant = "default", key } = _a, props = __rest(_a, ["value", "label", "subtext", "numberAmount", "onSelect", "onClick", "selected", "className", "variant", "key"]);
-    const { onTap, ref: tapRef } = useTap();
-    const mergedRef = useMergeRefs(ref, tapRef);
-    return (_jsx("div", Object.assign({ className: cn(radiogroupItemVariants({ variant }), className) }, { children: variant === "deactivated" ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "circle-off", size: "md", className: "text-stateColors-disabled" }), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext }, key)] })) : (_jsx(RadioGroupPrimitive.Item, Object.assign({ ref: mergedRef, value: value, onSelect: onSelect, checked: selected, onClick: onTap(onClick), className: cn("flex items-center justify-center active:opacity-70", className) }, props, { children: selected || variant === "selected" ? (_jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-center group" }, { children: [_jsx(Icon, { name: "circle-dot-filled", size: "md", className: "text-coreColors-brandColorPrimary z-10" }), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext }, key)] }))) : (_jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-center group" }, { children: [_jsxs("div", Object.assign({ className: "grid" }, { children: [_jsx(RadioGroupPrimitive.Indicator, Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: _jsx(Icon, { name: "circle-dot-filled", size: "md", className: "text-coreColors-brandColorPrimary z-10" }) })), _jsx("div", Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: _jsx(Icon, { name: "circle", size: "md", className: "col-start-1 row-start-1 text-coreColors-secondaryIcon items-center z-1" }) }))] })), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext }, key)] }))) }))) })));
-});
+const RadioGroupItemLabels = ({ label, numberAmount, subtext, }) => (_jsxs("div", Object.assign({ className: "col-span-2" }, { children: [_jsxs("div", Object.assign({ className: "flex flex-row items-center" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "group-disabled:text-stateColors-disabled mr-2" }, { children: label })), numberAmount ? (_jsx(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor group-disabled:text-stateColors-disabled" }, { children: `(${numberAmount})` }))) : null] })), subtext ? (_jsx(Text, Object.assign({ type: "body-secondary", className: "group-disabled:text-stateColors-disabled mt-1" }, { children: subtext }))) : null] })));
+const RadioGroupItem = (_a) => {
+    var { value, label = "", subtext, numberAmount = 0, onSelect = () => { }, onClick = () => { }, selected = false, className, variant = "default" } = _a, props = __rest(_a, ["value", "label", "subtext", "numberAmount", "onSelect", "onClick", "selected", "className", "variant"]);
+    return (_jsx("div", Object.assign({ className: cn(radiogroupItemVariants({ variant }), className) }, { children: variant === "deactivated" ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "circle-off", size: "md", className: "text-stateColors-disabled" }), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext })] })) : (_jsx(RadioGroupPrimitive.Item, Object.assign({ value: value, onSelect: onSelect, checked: selected, onClick: onClick, className: cn("flex items-center justify-center active:opacity-70 cursor-pointer", className) }, props, { children: selected || variant === "selected" ? (_jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-center group" }, { children: [_jsx(Icon, { name: "circle-dot-filled", size: "md", className: "text-coreColors-brandColorPrimary z-10" }), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext })] }))) : (_jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-center group" }, { children: [_jsxs("div", Object.assign({ className: "grid" }, { children: [_jsx(RadioGroupPrimitive.Indicator, Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: _jsx(Icon, { name: "circle-dot-filled", size: "md", className: "text-coreColors-brandColorPrimary z-10" }) })), _jsx("div", Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: _jsx(Icon, { name: "circle", size: "md", className: "col-start-1 row-start-1 text-coreColors-secondaryIcon items-center z-1" }) }))] })), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext })] }))) }))) })));
+};
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 export { RadioGroup, RadioGroupItem, radiogroupItemVariants };

package/dist/components/ui/selectors.d.ts

@@ -11,18 +11,12 @@ type SelectorsProps = React.ComponentPropsWithoutRef<"button"> & VariantProps<ty
     label?: string;
     key?: string;
     onSelect?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    disableHaptic?: boolean;
+};
+declare const Selectors: {
+    ({ label, selected, disabled, disabledClick, className, onSelect, disableHaptic, children, ...props }: SelectorsProps & VariantProps<typeof selectorsVariants>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
 };
-declare const Selectors: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
-    selected?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & {
-    disabled?: boolean | undefined;
-    disabledClick?: boolean | undefined;
-    selected?: boolean | undefined;
-    label?: string | undefined;
-    key?: string | undefined;
-    onSelect?: React.MouseEventHandler<HTMLButtonElement> | undefined;
-} & React.RefAttributes<HTMLButtonElement>>;
 type SelectorContainerProps = {
     children: React.ReactElement<SelectorsProps>[] | React.ReactElement<SelectorsProps>;
     containerRef: React.RefObject<HTMLDivElement>;

package/dist/components/ui/selectors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../components/ui/selectors.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,QAAA,MAAM,iBAAiB;;;mFAiBtB,CAAA;AACD,KAAK,cAAc,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAC5D,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAA;CAClE,CAAA;AAEH,QAAA,MAAM,SAAS;;;;;;;;;eAHA,MAAM,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS;2CA6CpE,CAAA;AACD,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EACJ,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,GACpC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;IACtC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AACD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA+CvD,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../components/ui/selectors.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,QAAA,MAAM,iBAAiB;;;mFAiBtB,CAAA;AACD,KAAK,cAAc,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAC5D,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAA;IACjE,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAEH,QAAA,MAAM,SAAS;2GAUZ,cAAc,GAAG,aAAa,wBAAwB,CAAC;;CAqCzD,CAAA;AAED,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EACJ,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,GACpC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;IACtC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AACD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA+CvD,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/ui/selectors.js

@@ -15,8 +15,8 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 import { Text } from "./text";
-import { useTap } from "./tap";
-import { useMergeRefs } from "../hooks/use-merge-refs";
+// @ts-ignore -- webbridge-react is not typed (yet)
+import { useActions } from "@tapcart/app-studio-sdk";
 const selectorsVariants = cva("flex py-2 px-4 whitespace-nowrap bg-coreColors-pageColor flex-row justify-center outline outline-1 rounded text-textColors-primaryColor outline-coreColors-dividingLines items-center", {
     variants: {
         selected: {
@@ -32,16 +32,26 @@ const selectorsVariants = cva("flex py-2 px-4 whitespace-nowrap bg-coreColors-pa
         selected: false,
     },
 });
-const Selectors = React.forwardRef((_a, ref) => {
-    var { label, selected, disabled = false, disabledClick = true, className, onSelect = () => { }, children } = _a, props = __rest(_a, ["label", "selected", "disabled", "disabledClick", "className", "onSelect", "children"]);
-    const { onTap, ref: tapRef } = useTap();
-    const mergedRef = useMergeRefs(ref, tapRef);
-    return (_jsx("button", Object.assign({ disabled: disabled && disabledClick, onClick: onTap(onSelect), className: cn(selectorsVariants({
+const Selectors = (_a) => {
+    var { label, selected, disabled = false, disabledClick = true, className, onSelect = () => { }, disableHaptic = false, children } = _a, props = __rest(_a, ["label", "selected", "disabled", "disabledClick", "className", "onSelect", "disableHaptic", "children"]);
+    const { action } = useActions();
+    const handleClick = (e) => {
+        try {
+            onSelect(e);
+            if (!disableHaptic) {
+                action("trigger/haptic");
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    };
+    return (_jsx("button", Object.assign({ disabled: disabled && disabledClick, onClick: handleClick, className: cn(selectorsVariants({
             selected: selected,
             className,
             disabled,
-        }), "group", className), ref: mergedRef }, props, { children: children ? (children) : (_jsx(Text, Object.assign({ type: "body-primary", color: "text-textColors-primaryColor" }, { children: label }))) })));
-});
+        }), "group", className) }, props, { children: children ? (children) : (_jsx(Text, Object.assign({ type: "body-primary", color: "text-textColors-primaryColor" }, { children: label }))) })));
+};
 const SelectorContainer = ({ children, containerRef, className, height, }) => {
     const [showFadeLeft, setShowFadeLeft] = React.useState(false);
     const [showFadeRight, setShowFadeRight] = React.useState(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.8.50",
+  "version": "0.8.51",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",