@tapcart/mobile-components 0.8.49 → 0.8.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/components/ui/button.d.ts +6 -2
  2. package/dist/components/ui/button.d.ts.map +1 -1
  3. package/dist/components/ui/button.js +22 -9
  4. package/dist/components/ui/carousel.d.ts +9 -2
  5. package/dist/components/ui/carousel.d.ts.map +1 -1
  6. package/dist/components/ui/carousel.js +6 -6
  7. package/dist/components/ui/favorite.d.ts +5 -1
  8. package/dist/components/ui/favorite.d.ts.map +1 -1
  9. package/dist/components/ui/favorite.js +19 -10
  10. package/dist/components/ui/quantity-picker.d.ts +1 -3
  11. package/dist/components/ui/quantity-picker.d.ts.map +1 -1
  12. package/dist/components/ui/quantity-picker.js +29 -54
  13. package/dist/components/ui/quantity-pickerNEW.d.ts +25 -0
  14. package/dist/components/ui/quantity-pickerNEW.d.ts.map +1 -0
  15. package/dist/components/ui/quantity-pickerNEW.js +125 -0
  16. package/dist/components/ui/radio-group.d.ts +5 -3
  17. package/dist/components/ui/radio-group.d.ts.map +1 -1
  18. package/dist/components/ui/radio-group.js +5 -9
  19. package/dist/components/ui/selectors.d.ts +5 -11
  20. package/dist/components/ui/selectors.d.ts.map +1 -1
  21. package/dist/components/ui/selectors.js +19 -9
  22. package/dist/index.d.ts +1 -0
  23. package/dist/index.d.ts.map +1 -1
  24. package/dist/index.js +2 -0
  25. package/dist/lib/cart.util.d.ts +15 -8
  26. package/dist/lib/cart.util.d.ts.map +1 -1
  27. package/dist/lib/cart.util.js +12 -21
  28. package/dist/styles.css +10 -0
  29. package/package.json +1 -1
package/dist/components/ui/button.d.ts CHANGED
@@ -17,9 +17,13 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
17
17
  iconStrokeColor?: string;
18
18
  iconClassName?: string;
19
19
  iconPosition?: "left" | "right";
20
- onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
20
+ onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
21
+ disableHaptic?: boolean;
21
22
  }
22
- declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
23
+ declare const Button: {
24
+ ({ className, labelClassName, labelStyle, variant, size, asChild, loading, icon, iconColor, iconStrokeColor, iconPosition, iconSize, iconUrl, iconClassName, onClick, disableHaptic, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
25
+ displayName: string;
26
+ };
23
27
  declare const getButtonProps: (buttonConfig: TextStyle & BackgroundAndPadding & {
24
28
  iconColor: Color;
25
29
  iconDetails: {
package/dist/components/ui/button.d.ts.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  var __rest = (this && this.__rest) || function (s, e) {
2
3
  var t = {};
3
4
  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";
16
17
  import { cn, getColor, getTextStyle, getBackgroundAndPaddingStyle, } from "../../lib/utils";
17
18
  import { Icon } from "./icon";
18
19
  import { Text } from "./text";
19
- import { useTap } from "./tap";
20
- import { useMergeRefs } from "../hooks/use-merge-refs";
20
+ // @ts-ignore -- webbridge-react is not typed (yet)
21
+ import { useActions } from "@tapcart/app-studio-sdk";
21
22
  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", {
22
23
  variants: {
23
24
  size: {
@@ -80,11 +81,10 @@ const labelVariants = cva("truncate", {
80
81
  variant: "default",
81
82
  },
82
83
  });
83
- const Button = React.forwardRef((_a, ref) => {
84
- 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"]);
85
- const { onTap, isPressed, ref: tapRef } = useTap();
86
- const mergedRef = useMergeRefs(ref, tapRef);
87
- const Comp = asChild ? Slot : "button";
84
+ const Button = (_a) => {
85
+ 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"]);
86
+ const { action } = useActions();
87
+ const Comp = asChild ? Slot : (onClick ? "button" : "div");
88
88
  const IconButton = () => icon || iconUrl ? (_jsx(Icon, { name: icon, url: iconUrl, size: "sm", style: { color: iconColor } })) : null;
89
89
  // TODO: need to refactor icon sizing. This isnt extensible.
90
90
  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) => {
92
92
  "ml-2": iconPosition === "right",
93
93
  }, 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, {}))] }));
94
94
  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 } }) })));
95
+ const handleClick = onClick
96
+ ? (e) => {
97
+ try {
98
+ onClick(e);
99
+ if (!disableHaptic) {
100
+ action("trigger/haptic");
101
+ }
102
+ }
103
+ catch (error) {
104
+ console.error(error);
105
+ }
106
+ }
107
+ : undefined;
95
108
  return (_jsx(Comp, Object.assign({ className: cn(buttonVariants({ variant, size }), className, {
96
109
  "pointer-events-none": loading,
97
110
  "flex-row-reverse": (icon || iconUrl) && iconPosition === "right",
98
- }), ref: mergedRef, onClick: onTap(onClick) }, props, { children: loading ? (_jsx(LoadingButton, {})) : typeof props.children === "object" &&
111
+ }), onClick: handleClick }, props, { children: loading ? (_jsx(LoadingButton, {})) : typeof props.children === "object" &&
99
112
  React.isValidElement(props.children) ? ( // if children are passed as a valid React element
100
113
  props.children // render it
101
114
  ) : // otherwise use props
102
115
  size === "icon" ? (_jsx(IconButton, {})) : (_jsx(BasicButton, {})) })));
103
- });
116
+ };
104
117
  Button.displayName = "Button";
105
118
  const getButtonProps = (buttonConfig) => {
106
119
  return {
package/dist/components/ui/carousel.d.ts CHANGED
@@ -8,6 +8,7 @@ type UseAutoplayType = {
8
8
  };
9
9
  import Autoplay from "embla-carousel-autoplay";
10
10
  import Fade from "embla-carousel-fade";
11
+ import { Button } from "../../components/ui/button";
11
12
  type CarouselApi = UseEmblaCarouselType[1];
12
13
  type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
13
14
  type CarouselOptions = UseCarouselParameters[0];
@@ -25,8 +26,14 @@ declare const CarouselContent: React.ForwardRefExoticComponent<React.HTMLAttribu
25
26
  showOverflow?: boolean | undefined;
26
27
  } & React.RefAttributes<HTMLDivElement>>;
27
28
  declare const CarouselItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
28
- declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<import("../../components/ui/button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
29
- declare const CarouselNext: React.ForwardRefExoticComponent<Omit<import("../../components/ui/button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
29
+ declare const CarouselPrevious: {
30
+ ({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
31
+ displayName: string;
32
+ };
33
+ declare const CarouselNext: {
34
+ ({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
35
+ displayName: string;
36
+ };
30
37
  type CarouselDotsProps = {
31
38
  maxDots?: number;
32
39
  dotColor?: string;
package/dist/components/ui/carousel.d.ts.map CHANGED
@@ -1 +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"}
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;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 CHANGED
@@ -119,21 +119,21 @@ const CarouselItem = React.forwardRef((_a, ref) => {
119
119
  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)));
120
120
  });
121
121
  CarouselItem.displayName = "CarouselItem";
122
- const CarouselPrevious = React.forwardRef((_a, ref) => {
122
+ const CarouselPrevious = (_a) => {
123
123
  var { className, variant = "outline", size = "icon" } = _a, props = __rest(_a, ["className", "variant", "size"]);
124
124
  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
125
- return (_jsxs(Button, Object.assign({ ref: ref, variant: variant, size: size, className: cn("absolute h-8 w-8 rounded-full", orientation === "horizontal"
125
+ return (_jsxs(Button, Object.assign({ variant: variant, size: size, className: cn("absolute h-8 w-8 rounded-full", orientation === "horizontal"
126
126
  ? "-left-12 top-1/2 -translate-y-1/2"
127
127
  : "-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" }))] })));
128
- });
128
+ };
129
129
  CarouselPrevious.displayName = "CarouselPrevious";
130
- const CarouselNext = React.forwardRef((_a, ref) => {
130
+ const CarouselNext = (_a) => {
131
131
  var { className, variant = "outline", size = "icon" } = _a, props = __rest(_a, ["className", "variant", "size"]);
132
132
  const { orientation, scrollNext, canScrollNext } = useCarousel();
133
- return (_jsxs(Button, Object.assign({ ref: ref, variant: variant, size: size, className: cn("absolute h-8 w-8 rounded-full", orientation === "horizontal"
133
+ return (_jsxs(Button, Object.assign({ variant: variant, size: size, className: cn("absolute h-8 w-8 rounded-full", orientation === "horizontal"
134
134
  ? "-right-12 top-1/2 -translate-y-1/2"
135
135
  : "-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" }))] })));
136
- });
136
+ };
137
137
  CarouselNext.displayName = "CarouselNext";
138
138
  const CarouselDots = React.forwardRef((_a, ref) => {
139
139
  var _b;
package/dist/components/ui/favorite.d.ts CHANGED
@@ -21,7 +21,11 @@ export interface FavoriteProps extends React.ButtonHTMLAttributes<HTMLButtonElem
21
21
  borderSides?: BorderSides;
22
22
  borderColorStyle?: string;
23
23
  borderPadding?: Partial<Spacing>;
24
+ disableHaptic?: boolean;
24
25
  }
25
- declare const Favorite: React.ForwardRefExoticComponent<FavoriteProps & React.RefAttributes<HTMLButtonElement>>;
26
+ declare const Favorite: {
27
+ ({ 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;
28
+ displayName: string;
29
+ };
26
30
  export { Favorite, favoriteVariants };
27
31
  //# sourceMappingURL=favorite.d.ts.map
package/dist/components/ui/favorite.d.ts.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  var __rest = (this && this.__rest) || function (s, e) {
2
3
  var t = {};
3
4
  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) {
10
11
  return t;
11
12
  };
12
13
  import { jsx as _jsx } from "react/jsx-runtime";
13
- import * as React from "react";
14
14
  import { cva } from "class-variance-authority";
15
+ // @ts-ignore -- webbridge-react is not typed (yet)
16
+ import { useActions } from "@tapcart/app-studio-sdk";
15
17
  import { cn, getBorderSidesStyle, getPaddingStyle, } from "../../lib/utils";
16
18
  import { Icon } from "./icon";
17
- import { useTap } from "./tap";
18
- import { useMergeRefs } from "../hooks/use-merge-refs";
19
19
  const favoriteVariants = cva("flex p-2 gap-2 rounded-[4px]", {
20
20
  variants: {
21
21
  size: {
@@ -40,18 +40,27 @@ const favoriteVariants = cva("flex p-2 gap-2 rounded-[4px]", {
40
40
  layoutType: "below-image-on-right",
41
41
  },
42
42
  });
43
- const Favorite = React.forwardRef((_a, forwardedRef) => {
44
- 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"]);
45
- const { onTap, isPressed, ref: tapRef } = useTap();
46
- const mergedRef = useMergeRefs(forwardedRef, tapRef);
47
- return (_jsx("button", Object.assign({ onClick: onTap(onClick), ref: mergedRef, className: cn(favoriteVariants({
43
+ const Favorite = (_a) => {
44
+ 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"]);
45
+ const { action } = useActions();
46
+ const handleClick = (e) => {
47
+ try {
48
+ onClick(e);
49
+ if (!disableHaptic) {
50
+ action("trigger/haptic");
51
+ }
52
+ }
53
+ catch (error) {
54
+ console.error(error);
55
+ }
56
+ };
57
+ return (_jsx("button", Object.assign({ onClick: onClick, className: cn("cursor-pointer active:opacity-70", favoriteVariants({
48
58
  size,
49
59
  showBackgroundShadow,
50
60
  layoutType,
51
61
  }), 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: {
52
- opacity: isPressed ? 0.7 : 1,
53
62
  color: selected ? favoriteFillColor : disabledFillColor,
54
63
  } }) })));
55
- });
64
+ };
56
65
  Favorite.displayName = "Favorite";
57
66
  export { Favorite, favoriteVariants };
package/dist/components/ui/quantity-picker.d.ts CHANGED
@@ -11,13 +11,11 @@ export interface QuantityPickerProps extends React.HTMLAttributes<HTMLDivElement
11
11
  isIncreaseDisabled?: boolean;
12
12
  loading?: boolean;
13
13
  value: number;
14
- onValueSet: (_: number) => void;
15
- onAdjustQuantity: (_: number) => void;
14
+ setValue: (_: number) => void;
16
15
  className?: string;
17
16
  inputStyle?: React.CSSProperties;
18
17
  buttonStyle?: React.CSSProperties;
19
18
  buttonCornerRadius?: number;
20
- debounceTime?: number;
21
19
  max?: number;
22
20
  }
23
21
  declare const QuantityPicker: React.ForwardRefExoticComponent<QuantityPickerProps & React.RefAttributes<HTMLDivElement>>;
package/dist/components/ui/quantity-picker.d.ts.map CHANGED
@@ -1 +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;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,UAAU,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,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,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AA0ED,QAAA,MAAM,cAAc,4FAiLnB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}
1
+ {"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 CHANGED
@@ -14,12 +14,23 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
14
14
  import * as React from "react";
15
15
  import { cn } from "../../lib/utils";
16
16
  import { Icon } from "./icon";
17
- import { useTap } from "./tap";
18
17
  import { LoadingDots } from "./loading-dots";
19
- import debounce from "lodash/debounce";
20
- const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled }) => {
21
- const { onTap, isPressed, ref: tapRef } = useTap();
18
+ // @ts-ignore -- webbridge-react is not typed (yet)
19
+ import { useActions } from "@tapcart/app-studio-sdk";
20
+ const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled, disableHaptic = false, }) => {
22
21
  const [isButtonPressed, setIsButtonPressed] = React.useState(false);
22
+ const { action } = useActions();
23
+ const handleClick = (e) => {
24
+ try {
25
+ handler(e);
26
+ if (!disableHaptic) {
27
+ action("trigger/haptic");
28
+ }
29
+ }
30
+ catch (error) {
31
+ console.error(error);
32
+ }
33
+ };
23
34
  // Handle press state manually for the invisible button
24
35
  const handleMouseDown = React.useCallback(() => {
25
36
  if (!disabled)
@@ -31,8 +42,8 @@ const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled })
31
42
  // Calculate the visual styles for the button
32
43
  const visualButtonStyle = Object.assign({}, style);
33
44
  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: {
34
- opacity: isPressed || isButtonPressed ? 0.7 : 1,
35
- } }) })), _jsx("button", { onClick: onTap(handler), onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleMouseDown, onTouchEnd: handleMouseUp, onTouchCancel: handleMouseUp, ref: tapRef, className: "absolute cursor-pointer", style: {
45
+ opacity: isButtonPressed ? 0.7 : 1,
46
+ } }) })), _jsx("button", { onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleMouseDown, onTouchEnd: handleMouseUp, onTouchCancel: handleMouseUp, className: "absolute cursor-pointer", style: {
36
47
  top: "-8px",
37
48
  right: "-8px",
38
49
  bottom: "-8px",
@@ -42,23 +53,14 @@ const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled })
42
53
  }, disabled: disabled, "aria-label": "Quantity button" })] })));
43
54
  };
44
55
  const QuantityPicker = React.forwardRef((_a, ref) => {
45
- var { className, decreaseIconUrl, increaseIconUrl, deleteIconUrl, isDeleteOnly = false, iconColor, onDecreaseClick, onIncreaseClick, isDecreaseDisabled, isIncreaseDisabled, value, onValueSet, onAdjustQuantity, inputStyle, buttonStyle, buttonCornerRadius = 4, max = 99, loading = false, debounceTime = 300 } = _a, props = __rest(_a, ["className", "decreaseIconUrl", "increaseIconUrl", "deleteIconUrl", "isDeleteOnly", "iconColor", "onDecreaseClick", "onIncreaseClick", "isDecreaseDisabled", "isIncreaseDisabled", "value", "onValueSet", "onAdjustQuantity", "inputStyle", "buttonStyle", "buttonCornerRadius", "max", "loading", "debounceTime"]);
56
+ var { className, decreaseIconUrl, increaseIconUrl, deleteIconUrl, isDeleteOnly = false, iconColor, onDecreaseClick, onIncreaseClick, isDecreaseDisabled, isIncreaseDisabled, value, setValue, inputStyle, buttonStyle, buttonCornerRadius = 4, max = 99, loading = false } = _a, props = __rest(_a, ["className", "decreaseIconUrl", "increaseIconUrl", "deleteIconUrl", "isDeleteOnly", "iconColor", "onDecreaseClick", "onIncreaseClick", "isDecreaseDisabled", "isIncreaseDisabled", "value", "setValue", "inputStyle", "buttonStyle", "buttonCornerRadius", "max", "loading"]);
46
57
  const [isFocused, setIsFocused] = React.useState(false);
47
- const pendingQuantityAdjustment = React.useRef(0);
48
- const [localInputValue, setLocalInputValue] = React.useState(value);
49
- // Update local state when external value changes
58
+ const [localValue, setLocalValue] = React.useState(value.toString());
50
59
  React.useEffect(() => {
51
- if (pendingQuantityAdjustment.current === 0) {
52
- setLocalInputValue(value);
53
- }
54
- }, [value]);
55
- // Create debounced function for applying changes
56
- const debouncedApplyChanges = React.useMemo(() => debounce(() => {
57
- if (pendingQuantityAdjustment.current !== 0) {
58
- onAdjustQuantity(pendingQuantityAdjustment.current);
59
- pendingQuantityAdjustment.current = 0;
60
+ if (!isFocused) {
61
+ setLocalValue(value.toString());
60
62
  }
61
- }, debounceTime), [debounceTime, onAdjustQuantity]);
63
+ }, [value, isFocused]);
62
64
  const leftButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopLeftRadius: buttonCornerRadius
63
65
  ? `${buttonCornerRadius}px`
64
66
  : undefined, borderBottomLeftRadius: buttonCornerRadius
@@ -70,56 +72,29 @@ const QuantityPicker = React.forwardRef((_a, ref) => {
70
72
  ? `${buttonCornerRadius}px`
71
73
  : undefined });
72
74
  const singleButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined });
73
- const adjustQuantity = (amount) => {
74
- const newAmount = localInputValue + amount;
75
- const clampedNewAmount = Math.min(Math.max(newAmount, 0), max);
76
- // Update local value immediately
77
- setLocalInputValue(clampedNewAmount);
78
- // Track pending change for batched update
79
- pendingQuantityAdjustment.current += amount;
80
- // Trigger debounced API update
81
- debouncedApplyChanges();
82
- };
83
- const handleDecreaseClick = (e) => {
84
- e.preventDefault();
85
- e.stopPropagation();
86
- adjustQuantity(-1);
87
- onDecreaseClick(e);
88
- };
89
- const handleIncreaseClick = (e) => {
90
- e.preventDefault();
91
- e.stopPropagation();
92
- adjustQuantity(1);
93
- onIncreaseClick(e);
94
- };
95
- return (_jsxs("div", Object.assign({ className: cn("flex relative", className), ref: ref }, props, { children: [isDeleteOnly ? (_jsx(IconButton, { handler: handleDecreaseClick, iconUrl: deleteIconUrl, iconColor: iconColor, style: singleButtonStyle })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { handler: handleDecreaseClick, iconUrl: localInputValue === 1 ? deleteIconUrl : decreaseIconUrl, iconColor: iconColor, style: leftButtonStyle, disabled: isDecreaseDisabled || loading }), _jsx("input", { type: "number", pattern: "[0-9]*", disabled: loading, max: max, value: localInputValue, onBlur: (e) => {
75
+ return (_jsxs("div", Object.assign({ className: cn("flex relative", className), ref: ref }, props, { children: [isDeleteOnly ? (_jsx(IconButton, { handler: onDecreaseClick, iconUrl: deleteIconUrl, iconColor: iconColor, style: singleButtonStyle })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { handler: onDecreaseClick, iconUrl: value === 1 ? deleteIconUrl : decreaseIconUrl, iconColor: iconColor, style: leftButtonStyle, disabled: isDecreaseDisabled || loading }), _jsx("input", { type: "number", pattern: "[0-9]*", disabled: loading, max: max, value: localValue, onBlur: (e) => {
96
76
  setIsFocused(false);
97
77
  const parsedValue = parseInt(e.target.value) || 0;
98
78
  const clampedValue = Math.min(parsedValue, max);
99
- // Cancel any pending debounced operations
100
- debouncedApplyChanges.cancel();
101
- // Update and apply changes
102
- const delta = clampedValue - value;
103
- pendingQuantityAdjustment.current = delta;
104
- setLocalInputValue(clampedValue);
105
- onValueSet(clampedValue);
79
+ setValue(clampedValue);
80
+ setLocalValue(clampedValue.toString());
106
81
  }, onFocus: () => {
107
82
  setIsFocused(true);
108
83
  }, onChange: (e) => {
109
84
  const inputValue = e.target.value;
110
85
  if (inputValue === "") {
111
- setLocalInputValue(0);
86
+ setLocalValue("");
112
87
  }
113
88
  else {
114
89
  const parsedValue = parseInt(inputValue);
115
90
  if (!isNaN(parsedValue)) {
116
91
  const clampedValue = Math.min(parsedValue, max);
117
- setLocalInputValue(clampedValue);
92
+ setLocalValue(clampedValue.toString());
118
93
  }
119
94
  }
120
- }, className: "w-8 h-7 focus-visible:outline-no ne text-center bg-coreColors-inputBackground text-textColors-primaryColor border-t border-b border-coreColors-dividingLines", style: Object.assign(Object.assign({}, inputStyle), { borderRadius: (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.borderRadius)
95
+ }, className: "w-8 h-7 focus-visible:outline-none text-center bg-coreColors-inputBackground text-textColors-primaryColor border-t border-b border-coreColors-dividingLines", style: Object.assign(Object.assign({}, inputStyle), { borderRadius: (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.borderRadius)
121
96
  ? `${inputStyle.borderRadius}px`
122
- : 0 }), inputMode: "numeric" }), _jsx(IconButton, { handler: handleIncreaseClick, iconUrl: increaseIconUrl, iconColor: iconColor, style: rightButtonStyle, disabled: isIncreaseDisabled || loading || localInputValue >= max })] })), _jsx(LoadingDots, { show: loading, size: 1, iconColor: iconColor })] })));
97
+ : 0 }), inputMode: "numeric" }), _jsx(IconButton, { handler: onIncreaseClick, iconUrl: increaseIconUrl, iconColor: iconColor, style: rightButtonStyle, disabled: isIncreaseDisabled || loading })] })), _jsx(LoadingDots, { show: loading, size: 1, iconColor: iconColor })] })));
123
98
  });
124
99
  QuantityPicker.displayName = "QuantityPicker";
125
100
  export { QuantityPicker };
package/dist/components/ui/quantity-pickerNEW.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import * as React from "react";
2
+ export interface QuantityPickerNEWProps extends React.HTMLAttributes<HTMLDivElement> {
3
+ decreaseIconUrl: string;
4
+ increaseIconUrl: string;
5
+ deleteIconUrl: string;
6
+ isDeleteOnly: boolean;
7
+ iconColor: string;
8
+ onDecreaseClick: React.ReactEventHandler;
9
+ onIncreaseClick: React.ReactEventHandler;
10
+ isDecreaseDisabled?: boolean;
11
+ isIncreaseDisabled?: boolean;
12
+ loading?: boolean;
13
+ value: number;
14
+ onValueSet: (_: number) => void;
15
+ onAdjustQuantity: (_: number) => void;
16
+ className?: string;
17
+ inputStyle?: React.CSSProperties;
18
+ buttonStyle?: React.CSSProperties;
19
+ buttonCornerRadius?: number;
20
+ debounceTime?: number;
21
+ max?: number;
22
+ }
23
+ declare const QuantityPickerNEW: React.ForwardRefExoticComponent<QuantityPickerNEWProps & React.RefAttributes<HTMLDivElement>>;
24
+ export { QuantityPickerNEW };
25
+ //# sourceMappingURL=quantity-pickerNEW.d.ts.map
package/dist/components/ui/quantity-pickerNEW.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"quantity-pickerNEW.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-pickerNEW.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,sBACf,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,UAAU,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,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,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AA0ED,QAAA,MAAM,iBAAiB,+FAoLtB,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
package/dist/components/ui/quantity-pickerNEW.js ADDED
@@ -0,0 +1,125 @@
1
+ "use client";
2
+ var __rest = (this && this.__rest) || function (s, e) {
3
+ var t = {};
4
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
+ t[p] = s[p];
6
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
+ t[p[i]] = s[p[i]];
10
+ }
11
+ return t;
12
+ };
13
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
14
+ import * as React from "react";
15
+ import { cn } from "../../lib/utils";
16
+ import { Icon } from "./icon";
17
+ import { useTap } from "./tap";
18
+ import { LoadingDots } from "./loading-dots";
19
+ import debounce from "lodash/debounce";
20
+ const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled }) => {
21
+ const { onTap, isPressed, ref: tapRef } = useTap();
22
+ const [isButtonPressed, setIsButtonPressed] = React.useState(false);
23
+ // Handle press state manually for the invisible button
24
+ const handleMouseDown = React.useCallback(() => {
25
+ if (!disabled)
26
+ setIsButtonPressed(true);
27
+ }, [disabled]);
28
+ const handleMouseUp = React.useCallback(() => {
29
+ setIsButtonPressed(false);
30
+ }, []);
31
+ // Calculate the visual styles for the button
32
+ const visualButtonStyle = Object.assign({}, style);
33
+ 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: {
34
+ opacity: isPressed || isButtonPressed ? 0.7 : 1,
35
+ } }) })), _jsx("button", { onClick: onTap(handler), onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleMouseDown, onTouchEnd: handleMouseUp, onTouchCancel: handleMouseUp, ref: tapRef, className: "absolute cursor-pointer", style: {
36
+ top: "-8px",
37
+ right: "-8px",
38
+ bottom: "-8px",
39
+ left: "-8px",
40
+ opacity: 0,
41
+ zIndex: 10,
42
+ }, disabled: disabled, "aria-label": "Quantity button" })] })));
43
+ };
44
+ const QuantityPickerNEW = React.forwardRef((_a, ref) => {
45
+ var { className, decreaseIconUrl, increaseIconUrl, deleteIconUrl, isDeleteOnly = false, iconColor, onDecreaseClick, onIncreaseClick, isDecreaseDisabled, isIncreaseDisabled, value, onValueSet, onAdjustQuantity, inputStyle, buttonStyle, buttonCornerRadius = 4, max = 99, loading = false, debounceTime = 300 } = _a, props = __rest(_a, ["className", "decreaseIconUrl", "increaseIconUrl", "deleteIconUrl", "isDeleteOnly", "iconColor", "onDecreaseClick", "onIncreaseClick", "isDecreaseDisabled", "isIncreaseDisabled", "value", "onValueSet", "onAdjustQuantity", "inputStyle", "buttonStyle", "buttonCornerRadius", "max", "loading", "debounceTime"]);
46
+ const [isFocused, setIsFocused] = React.useState(false);
47
+ const pendingQuantityAdjustment = React.useRef(0);
48
+ const [localInputValue, setLocalInputValue] = React.useState(value);
49
+ // Update local state when external value changes
50
+ React.useEffect(() => {
51
+ if (pendingQuantityAdjustment.current === 0) {
52
+ setLocalInputValue(value);
53
+ }
54
+ }, [value]);
55
+ // Create debounced function for applying changes
56
+ const debouncedApplyChanges = React.useMemo(() => debounce(() => {
57
+ if (pendingQuantityAdjustment.current !== 0) {
58
+ onAdjustQuantity(pendingQuantityAdjustment.current);
59
+ pendingQuantityAdjustment.current = 0;
60
+ }
61
+ }, debounceTime), [debounceTime, onAdjustQuantity]);
62
+ const leftButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopLeftRadius: buttonCornerRadius
63
+ ? `${buttonCornerRadius}px`
64
+ : undefined, borderBottomLeftRadius: buttonCornerRadius
65
+ ? `${buttonCornerRadius}px`
66
+ : undefined });
67
+ const rightButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopRightRadius: buttonCornerRadius
68
+ ? `${buttonCornerRadius}px`
69
+ : undefined, borderBottomRightRadius: buttonCornerRadius
70
+ ? `${buttonCornerRadius}px`
71
+ : undefined });
72
+ const singleButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined });
73
+ const adjustQuantity = (amount) => {
74
+ const newAmount = localInputValue + amount;
75
+ const clampedNewAmount = Math.min(Math.max(newAmount, 0), max);
76
+ // Update local value immediately
77
+ setLocalInputValue(clampedNewAmount);
78
+ // Track pending change for batched update
79
+ pendingQuantityAdjustment.current += amount;
80
+ // Trigger debounced API update
81
+ debouncedApplyChanges();
82
+ };
83
+ const handleDecreaseClick = (e) => {
84
+ e.preventDefault();
85
+ e.stopPropagation();
86
+ adjustQuantity(-1);
87
+ onDecreaseClick(e);
88
+ };
89
+ const handleIncreaseClick = (e) => {
90
+ e.preventDefault();
91
+ e.stopPropagation();
92
+ adjustQuantity(1);
93
+ onIncreaseClick(e);
94
+ };
95
+ return (_jsxs("div", Object.assign({ className: cn("flex relative", className), ref: ref }, props, { children: [isDeleteOnly ? (_jsx(IconButton, { handler: handleDecreaseClick, iconUrl: deleteIconUrl, iconColor: iconColor, style: singleButtonStyle })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { handler: handleDecreaseClick, iconUrl: localInputValue === 1 ? deleteIconUrl : decreaseIconUrl, iconColor: iconColor, style: leftButtonStyle, disabled: isDecreaseDisabled || loading }), _jsx("input", { type: "number", pattern: "[0-9]*", disabled: loading, max: max, value: localInputValue, onBlur: (e) => {
96
+ setIsFocused(false);
97
+ const parsedValue = parseInt(e.target.value) || 0;
98
+ const clampedValue = Math.min(parsedValue, max);
99
+ // Cancel any pending debounced operations
100
+ debouncedApplyChanges.cancel();
101
+ // Update and apply changes
102
+ const delta = clampedValue - value;
103
+ pendingQuantityAdjustment.current = delta;
104
+ setLocalInputValue(clampedValue);
105
+ onValueSet(clampedValue);
106
+ }, onFocus: () => {
107
+ setIsFocused(true);
108
+ }, onChange: (e) => {
109
+ const inputValue = e.target.value;
110
+ if (inputValue === "") {
111
+ setLocalInputValue(0);
112
+ }
113
+ else {
114
+ const parsedValue = parseInt(inputValue);
115
+ if (!isNaN(parsedValue)) {
116
+ const clampedValue = Math.min(parsedValue, max);
117
+ setLocalInputValue(clampedValue);
118
+ }
119
+ }
120
+ }, className: "w-8 h-7 focus-visible:outline-no ne text-center bg-coreColors-inputBackground text-textColors-primaryColor border-t border-b border-coreColors-dividingLines", style: Object.assign(Object.assign({}, inputStyle), { borderRadius: (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.borderRadius)
121
+ ? `${inputStyle.borderRadius}px`
122
+ : 0 }), inputMode: "numeric" }), _jsx(IconButton, { handler: handleIncreaseClick, iconUrl: increaseIconUrl, iconColor: iconColor, style: rightButtonStyle, disabled: isIncreaseDisabled || loading || localInputValue >= max })] })), _jsx(LoadingDots, { show: loading, size: 1, iconColor: iconColor })] })));
123
+ });
124
+ QuantityPickerNEW.displayName = "QuantityPickerNEW";
125
+ export { QuantityPickerNEW };
package/dist/components/ui/radio-group.d.ts CHANGED
@@ -10,12 +10,14 @@ export interface RadioGroupItemProps {
10
10
  onSelect?: React.ReactEventHandler;
11
11
  selected?: boolean;
12
12
  value: string;
13
+ onClick?: React.ReactEventHandler;
13
14
  }
14
15
  declare const radiogroupItemVariants: (props?: ({
15
16
  variant?: "default" | "selected" | "deactivated" | null | undefined;
16
17
  } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
17
- declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & RadioGroupItemProps & VariantProps<(props?: ({
18
- variant?: "default" | "selected" | "deactivated" | null | undefined;
19
- } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
18
+ declare const RadioGroupItem: {
19
+ ({ value, label, subtext, numberAmount, onSelect, onClick, selected, className, variant, ...props }: RadioGroupItemProps & VariantProps<typeof radiogroupItemVariants>): import("react/jsx-runtime").JSX.Element;
20
+ displayName: string | undefined;
21
+ };
20
22
  export { RadioGroup, RadioGroupItem, radiogroupItemVariants };
21
23
  //# sourceMappingURL=radio-group.d.ts.map
package/dist/components/ui/radio-group.d.ts.map CHANGED
@@ -1 +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"}
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;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 CHANGED
@@ -17,8 +17,6 @@ import { cva } from "class-variance-authority";
17
17
  import { cn } from "../../lib/utils";
18
18
  import { Icon } from "./icon";
19
19
  import { Text } from "./text";
20
- import { useTap } from "./tap";
21
- import { useMergeRefs } from "../hooks/use-merge-refs";
22
20
  const RadioGroup = React.forwardRef((_a, ref) => {
23
21
  var { className } = _a, props = __rest(_a, ["className"]);
24
22
  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
36
34
  variant: "default",
37
35
  },
38
36
  });
39
- 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] })));
40
- const RadioGroupItem = React.forwardRef((_a, ref) => {
41
- 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"]);
42
- const { onTap, ref: tapRef } = useTap();
43
- const mergedRef = useMergeRefs(ref, tapRef);
44
- 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)] }))) }))) })));
45
- });
37
+ 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] })));
38
+ const RadioGroupItem = (_a) => {
39
+ 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"]);
40
+ 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 })] }))) }))) })));
41
+ };
46
42
  RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
47
43
  export { RadioGroup, RadioGroupItem, radiogroupItemVariants };
package/dist/components/ui/selectors.d.ts CHANGED
@@ -11,18 +11,12 @@ type SelectorsProps = React.ComponentPropsWithoutRef<"button"> & VariantProps<ty
11
11
  label?: string;
12
12
  key?: string;
13
13
  onSelect?: React.MouseEventHandler<HTMLButtonElement> | undefined;
14
+ disableHaptic?: boolean;
15
+ };
16
+ declare const Selectors: {
17
+ ({ label, selected, disabled, disabledClick, className, onSelect, disableHaptic, children, ...props }: SelectorsProps & VariantProps<typeof selectorsVariants>): import("react/jsx-runtime").JSX.Element;
18
+ displayName: string;
14
19
  };
15
- declare const Selectors: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
16
- selected?: boolean | null | undefined;
17
- disabled?: boolean | null | undefined;
18
- } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & {
19
- disabled?: boolean | undefined;
20
- disabledClick?: boolean | undefined;
21
- selected?: boolean | undefined;
22
- label?: string | undefined;
23
- key?: string | undefined;
24
- onSelect?: React.MouseEventHandler<HTMLButtonElement> | undefined;
25
- } & React.RefAttributes<HTMLButtonElement>>;
26
20
  type SelectorContainerProps = {
27
21
  children: React.ReactElement<SelectorsProps>[] | React.ReactElement<SelectorsProps>;
28
22
  containerRef: React.RefObject<HTMLDivElement>;
package/dist/components/ui/selectors.d.ts.map CHANGED
@@ -1 +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"}
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;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 CHANGED
@@ -15,8 +15,8 @@ import * as React from "react";
15
15
  import { cva } from "class-variance-authority";
16
16
  import { cn } from "../../lib/utils";
17
17
  import { Text } from "./text";
18
- import { useTap } from "./tap";
19
- import { useMergeRefs } from "../hooks/use-merge-refs";
18
+ // @ts-ignore -- webbridge-react is not typed (yet)
19
+ import { useActions } from "@tapcart/app-studio-sdk";
20
20
  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", {
21
21
  variants: {
22
22
  selected: {
@@ -32,16 +32,26 @@ const selectorsVariants = cva("flex py-2 px-4 whitespace-nowrap bg-coreColors-pa
32
32
  selected: false,
33
33
  },
34
34
  });
35
- const Selectors = React.forwardRef((_a, ref) => {
36
- var { label, selected, disabled = false, disabledClick = true, className, onSelect = () => { }, children } = _a, props = __rest(_a, ["label", "selected", "disabled", "disabledClick", "className", "onSelect", "children"]);
37
- const { onTap, ref: tapRef } = useTap();
38
- const mergedRef = useMergeRefs(ref, tapRef);
39
- return (_jsx("button", Object.assign({ disabled: disabled && disabledClick, onClick: onTap(onSelect), className: cn(selectorsVariants({
35
+ const Selectors = (_a) => {
36
+ var { label, selected, disabled = false, disabledClick = true, className, onSelect = () => { }, disableHaptic = false, children } = _a, props = __rest(_a, ["label", "selected", "disabled", "disabledClick", "className", "onSelect", "disableHaptic", "children"]);
37
+ const { action } = useActions();
38
+ const handleClick = (e) => {
39
+ try {
40
+ onSelect(e);
41
+ if (!disableHaptic) {
42
+ action("trigger/haptic");
43
+ }
44
+ }
45
+ catch (error) {
46
+ console.error(error);
47
+ }
48
+ };
49
+ return (_jsx("button", Object.assign({ disabled: disabled && disabledClick, onClick: handleClick, className: cn(selectorsVariants({
40
50
  selected: selected,
41
51
  className,
42
52
  disabled,
43
- }), "group", className), ref: mergedRef }, props, { children: children ? (children) : (_jsx(Text, Object.assign({ type: "body-primary", color: "text-textColors-primaryColor" }, { children: label }))) })));
44
- });
53
+ }), "group", className) }, props, { children: children ? (children) : (_jsx(Text, Object.assign({ type: "body-primary", color: "text-textColors-primaryColor" }, { children: label }))) })));
54
+ };
45
55
  const SelectorContainer = ({ children, containerRef, className, height, }) => {
46
56
  const [showFadeLeft, setShowFadeLeft] = React.useState(false);
47
57
  const [showFadeRight, setShowFadeRight] = React.useState(false);
package/dist/index.d.ts CHANGED
@@ -46,6 +46,7 @@ export * from "./components/ui/portal";
46
46
  export * from "./components/ui/price";
47
47
  export * from "./components/ui/product-card";
48
48
  export * from "./components/ui/quantity-picker";
49
+ export * from "./components/ui/quantity-pickerNEW";
49
50
  export * from "./components/ui/progress-bar";
50
51
  export * from "./components/ui/radio-group";
51
52
  export * from "./components/ui/scroll-area";
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"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"}
package/dist/index.js CHANGED
@@ -47,6 +47,8 @@ export * from "./components/ui/portal";
47
47
  export * from "./components/ui/price";
48
48
  export * from "./components/ui/product-card";
49
49
  export * from "./components/ui/quantity-picker";
50
+ // TODO: make this the default quantity picker after new CartLineItem component is released
51
+ export * from "./components/ui/quantity-pickerNEW";
50
52
  export * from "./components/ui/progress-bar";
51
53
  export * from "./components/ui/radio-group";
52
54
  export * from "./components/ui/scroll-area";
package/dist/lib/cart.util.d.ts CHANGED
@@ -1,14 +1,21 @@
1
- import { EnrichedCart, CartCalculatedDiscount, CartCalculatedAppliedGiftCard } from "app-studio-types";
2
- export declare const getVariantPrice: ({ variantPrice, variantCompareAtPrice, quantity, currencyCode, sellingPlanAllocation, }: {
3
- variantPrice: number;
4
- variantCompareAtPrice: number;
1
+ import { EnrichedCart, CartCalculatedDiscount, CartCalculatedAppliedGiftCard, ProductVariant } from "app-studio-types";
2
+ export declare const getVariantPrice: ({ quantity, variant, sellingPlanAllocation, }: {
5
3
  quantity: number;
6
- currencyCode: string;
4
+ variant: ProductVariant;
7
5
  sellingPlanAllocation?: {
8
6
  priceAdjustments: {
9
- perDeliveryPrice?: number;
10
- price: number;
11
- compareAtPrice?: number;
7
+ perDeliveryPrice?: {
8
+ amount: string;
9
+ currencyCode: string;
10
+ };
11
+ price: {
12
+ amount: string;
13
+ currencyCode: string;
14
+ };
15
+ compareAtPrice?: {
16
+ amount: string;
17
+ currencyCode: string;
18
+ };
12
19
  }[];
13
20
  } | undefined;
14
21
  }) => {
package/dist/lib/cart.util.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"cart.util.d.ts","sourceRoot":"","sources":["../../lib/cart.util.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,sBAAsB,EACtB,6BAA6B,EAG9B,MAAM,kBAAkB,CAAA;AAGzB,eAAO,MAAM,eAAe;kBAOZ,MAAM;2BACG,MAAM;cACnB,MAAM;kBACF,MAAM;;0BAEA;YAChB,gBAAgB,CAAC,EAAE,MAAM,CAAA;YACzB,KAAK,EAAE,MAAM,CAAA;YACb,cAAc,CAAC,EAAE,MAAM,CAAA;SACxB,EAAE;;;;;;;CA4BN,CAAA;AA2CD,eAAO,MAAM,oBAAoB,SAAU,MAAM,QAAQ,YAAY,YAMpE,CAAA;AAED,eAAO,MAAM,kBAAkB,SAAU,MAAM,QAAQ,YAAY,YAMlE,CAAA;AAoID,MAAM,MAAM,cAAc,GAAG;IAC3B,yBAAyB,EAAE,sBAAsB,EAAE,CAAA;IACnD,gBAAgB,EAAE,6BAA6B,EAAE,CAAA;IACjD,cAAc,EAAE,OAAO,CAAA;IACvB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,oBAAoB,EAAE,MAAM,CAAA;IAC5B,WAAW,EAAE,MAAM,CAAA;IACnB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,oBAAoB,EAAE,MAAM,CAAA;IAC5B,gBAAgB,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,cAUrC,CAAA;AAED,eAAO,MAAM,qBAAqB,SAAU,YAAY,KAAG,cA8B1D,CAAA;AAGD,eAAO,MAAM,mBAAmB;eACnB,MAAM;;;;;aAEG,MAAM;eAAS,MAAM;;;;oBAIN,MAAM;0BAAgB,MAAM;;;eAElD,MAAM;;;;;gBAML,MAAM;cACR,MAAM;;cAEN,MAAM;;;0BAIM;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,YAAY,EAAE,MAAM,CAAA;SAAE;oBAC9C,MAAM;;;;YAsCzB,CAAA"}
1
+ {"version":3,"file":"cart.util.d.ts","sourceRoot":"","sources":["../../lib/cart.util.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,sBAAsB,EACtB,6BAA6B,EAE7B,cAAc,EACf,MAAM,kBAAkB,CAAA;AAGzB,eAAO,MAAM,eAAe;cAKhB,MAAM;aACP,cAAc;;0BAEH;YAChB,gBAAgB,CAAC,EAAE;gBACjB,MAAM,EAAE,MAAM,CAAA;gBACd,YAAY,EAAE,MAAM,CAAA;aACrB,CAAA;YACD,KAAK,EAAE;gBACL,MAAM,EAAE,MAAM,CAAA;gBACd,YAAY,EAAE,MAAM,CAAA;aACrB,CAAA;YACD,cAAc,CAAC,EAAE;gBACf,MAAM,EAAE,MAAM,CAAA;gBACd,YAAY,EAAE,MAAM,CAAA;aACrB,CAAA;SACF,EAAE;;;;;;;CAgCN,CAAA;AA2CD,eAAO,MAAM,oBAAoB,SAAU,MAAM,QAAQ,YAAY,YAMpE,CAAA;AAED,eAAO,MAAM,kBAAkB,SAAU,MAAM,QAAQ,YAAY,YAMlE,CAAA;AAoHD,MAAM,MAAM,cAAc,GAAG;IAC3B,yBAAyB,EAAE,sBAAsB,EAAE,CAAA;IACnD,gBAAgB,EAAE,6BAA6B,EAAE,CAAA;IACjD,cAAc,EAAE,OAAO,CAAA;IACvB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,oBAAoB,EAAE,MAAM,CAAA;IAC5B,WAAW,EAAE,MAAM,CAAA;IACnB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,oBAAoB,EAAE,MAAM,CAAA;IAC5B,gBAAgB,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,cAUrC,CAAA;AAED,eAAO,MAAM,qBAAqB,SAAU,YAAY,KAAG,cA8B1D,CAAA;AAGD,eAAO,MAAM,mBAAmB;eACnB,MAAM;;;;;aAEG,MAAM;eAAS,MAAM;;;;oBAIN,MAAM;0BAAgB,MAAM;;;eAElD,MAAM;;;;;gBAML,MAAM;cACR,MAAM;;cAEN,MAAM;;;0BAIM;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,YAAY,EAAE,MAAM,CAAA;SAAE;oBAC9C,MAAM;;;;YAsCzB,CAAA"}
package/dist/lib/cart.util.js CHANGED
@@ -1,25 +1,27 @@
1
1
  import { getIdFromGid } from "./utils";
2
- export const getVariantPrice = ({ variantPrice, variantCompareAtPrice, quantity, currencyCode, sellingPlanAllocation = { priceAdjustments: [] }, }) => {
3
- var _a;
2
+ export const getVariantPrice = ({ quantity, variant, sellingPlanAllocation = { priceAdjustments: [] }, }) => {
3
+ var _a, _b, _c, _d;
4
4
  const isSubscription = ((_a = sellingPlanAllocation === null || sellingPlanAllocation === void 0 ? void 0 : sellingPlanAllocation.priceAdjustments) === null || _a === void 0 ? void 0 : _a.length) > 0;
5
5
  if (isSubscription) {
6
6
  const { perDeliveryPrice, price, compareAtPrice } = sellingPlanAllocation.priceAdjustments[0];
7
7
  const effectivePrice = perDeliveryPrice || price;
8
- const subscriptionUnitPrice = perDeliveryPrice || 0;
9
- const effectiveCompareAtPrice = compareAtPrice || price || 0;
8
+ const subscriptionUnitPrice = parseFloat((perDeliveryPrice === null || perDeliveryPrice === void 0 ? void 0 : perDeliveryPrice.amount) || "0") || 0;
9
+ const effectiveCompareAtPrice = parseFloat((compareAtPrice === null || compareAtPrice === void 0 ? void 0 : compareAtPrice.amount) || "0") ||
10
+ parseFloat((price === null || price === void 0 ? void 0 : price.amount) || "0") ||
11
+ 0;
10
12
  return {
11
13
  price: subscriptionUnitPrice * quantity,
12
14
  compareAtPrice: effectiveCompareAtPrice * quantity,
13
- currency: currencyCode,
15
+ currency: effectivePrice === null || effectivePrice === void 0 ? void 0 : effectivePrice.currencyCode,
14
16
  isSale: subscriptionUnitPrice < effectiveCompareAtPrice,
15
17
  };
16
18
  }
17
- const variantUnitPrice = variantPrice || 0;
18
- const variantComparePrice = variantCompareAtPrice || 0;
19
+ const variantUnitPrice = parseFloat((_b = variant === null || variant === void 0 ? void 0 : variant.price) === null || _b === void 0 ? void 0 : _b.amount) || 0;
20
+ const variantComparePrice = parseFloat((_c = variant === null || variant === void 0 ? void 0 : variant.compareAtPrice) === null || _c === void 0 ? void 0 : _c.amount) || 0;
19
21
  return {
20
22
  price: variantUnitPrice * quantity,
21
23
  compareAtPrice: variantComparePrice * quantity,
22
- currency: currencyCode,
24
+ currency: (_d = variant === null || variant === void 0 ? void 0 : variant.price) === null || _d === void 0 ? void 0 : _d.currencyCode,
23
25
  isSale: variantUnitPrice < variantComparePrice,
24
26
  };
25
27
  };
@@ -79,21 +81,10 @@ const getAppliedGiftCards = (cart) => {
79
81
  const getSalesAmount = (cart) => {
80
82
  var _a;
81
83
  return (_a = cart.items) === null || _a === void 0 ? void 0 : _a.reduce((acc, item) => {
82
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
83
84
  const { compareAtPrice, price } = getVariantPrice({
84
85
  quantity: item.quantity || 1,
85
- variantPrice: parseFloat(((_b = (_a = item.variantDetails) === null || _a === void 0 ? void 0 : _a.price) === null || _b === void 0 ? void 0 : _b.amount) || "0"),
86
- variantCompareAtPrice: parseFloat(((_d = (_c = item.variantDetails) === null || _c === void 0 ? void 0 : _c.compareAtPrice) === null || _d === void 0 ? void 0 : _d.amount) || "0"),
87
- currencyCode: ((_f = (_e = item.variantDetails) === null || _e === void 0 ? void 0 : _e.price) === null || _f === void 0 ? void 0 : _f.currencyCode) || "USD",
88
- sellingPlanAllocation: {
89
- priceAdjustments: [
90
- {
91
- price: parseFloat(((_h = (_g = item.variantDetails) === null || _g === void 0 ? void 0 : _g.price) === null || _h === void 0 ? void 0 : _h.amount) || "0"),
92
- compareAtPrice: parseFloat(((_k = (_j = item.variantDetails) === null || _j === void 0 ? void 0 : _j.compareAtPrice) === null || _k === void 0 ? void 0 : _k.amount) || "0"),
93
- perDeliveryPrice: parseFloat(((_m = (_l = item.variantDetails) === null || _l === void 0 ? void 0 : _l.price) === null || _m === void 0 ? void 0 : _m.amount) || "0"),
94
- },
95
- ],
96
- },
86
+ variant: item.variantDetails,
87
+ sellingPlanAllocation: item.sellingPlanAllocation,
97
88
  });
98
89
  if (compareAtPrice && compareAtPrice > price) {
99
90
  return acc + (compareAtPrice - price);
package/dist/styles.css CHANGED
@@ -1065,6 +1065,9 @@ video {
1065
1065
  .h-full {
1066
1066
  height: 100%;
1067
1067
  }
1068
+ .h-screen {
1069
+ height: 100vh;
1070
+ }
1068
1071
  .max-h-\[200px\] {
1069
1072
  max-height: 200px;
1070
1073
  }
@@ -1991,6 +1994,9 @@ video {
1991
1994
  font-size: 0.75rem;
1992
1995
  line-height: 1rem;
1993
1996
  }
1997
+ .font-bold {
1998
+ font-weight: 700;
1999
+ }
1994
2000
  .font-medium {
1995
2001
  font-weight: 500;
1996
2002
  }
@@ -2183,6 +2189,10 @@ video {
2183
2189
  .text-textColors-strikethroughPriceText {
2184
2190
  color: var(--textColors-strikethroughPriceText);
2185
2191
  }
2192
+ .text-white {
2193
+ --tw-text-opacity: 1;
2194
+ color: rgb(255 255 255 / var(--tw-text-opacity, 1));
2195
+ }
2186
2196
  .underline {
2187
2197
  text-decoration-line: underline;
2188
2198
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tapcart/mobile-components",
3
- "version": "0.8.49",
3
+ "version": "0.8.51",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "style": "dist/styles.css",