@tapcart/mobile-components 0.8.49 → 0.8.50

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

@@ -11,13 +11,11 @@ export interface QuantityPickerProps extends React.HTMLAttributes<HTMLDivElement
     isIncreaseDisabled?: boolean;
     loading?: boolean;
     value: number;
-    onValueSet: (_: number) => void;
-    onAdjustQuantity: (_: number) => void;
+    setValue: (_: number) => void;
     className?: string;
     inputStyle?: React.CSSProperties;
     buttonStyle?: React.CSSProperties;
     buttonCornerRadius?: number;
-    debounceTime?: number;
     max?: number;
 }
 declare const QuantityPicker: React.ForwardRefExoticComponent<QuantityPickerProps & React.RefAttributes<HTMLDivElement>>;

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;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"}
+{"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"}

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

@@ -16,7 +16,6 @@ import { cn } from "../../lib/utils";
 import { Icon } from "./icon";
 import { useTap } from "./tap";
 import { LoadingDots } from "./loading-dots";
-import debounce from "lodash/debounce";
 const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled }) => {
     const { onTap, isPressed, ref: tapRef } = useTap();
     const [isButtonPressed, setIsButtonPressed] = React.useState(false);
@@ -42,23 +41,14 @@ const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled })
                 }, disabled: disabled, "aria-label": "Quantity button" })] })));
 };
 const QuantityPicker = React.forwardRef((_a, ref) => {
-    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"]);
+    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"]);
     const [isFocused, setIsFocused] = React.useState(false);
-    const pendingQuantityAdjustment = React.useRef(0);
-    const [localInputValue, setLocalInputValue] = React.useState(value);
-    // Update local state when external value changes
+    const [localValue, setLocalValue] = React.useState(value.toString());
     React.useEffect(() => {
-        if (pendingQuantityAdjustment.current === 0) {
-            setLocalInputValue(value);
+        if (!isFocused) {
+            setLocalValue(value.toString());
         }
-    }, [value]);
-    // Create debounced function for applying changes
-    const debouncedApplyChanges = React.useMemo(() => debounce(() => {
-        if (pendingQuantityAdjustment.current !== 0) {
-            onAdjustQuantity(pendingQuantityAdjustment.current);
-            pendingQuantityAdjustment.current = 0;
-        }
-    }, debounceTime), [debounceTime, onAdjustQuantity]);
+    }, [value, isFocused]);
     const leftButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopLeftRadius: buttonCornerRadius
             ? `${buttonCornerRadius}px`
             : undefined, borderBottomLeftRadius: buttonCornerRadius
@@ -70,56 +60,29 @@ const QuantityPicker = React.forwardRef((_a, ref) => {
             ? `${buttonCornerRadius}px`
             : undefined });
     const singleButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined });
-    const adjustQuantity = (amount) => {
-        const newAmount = localInputValue + amount;
-        const clampedNewAmount = Math.min(Math.max(newAmount, 0), max);
-        // Update local value immediately
-        setLocalInputValue(clampedNewAmount);
-        // Track pending change for batched update
-        pendingQuantityAdjustment.current += amount;
-        // Trigger debounced API update
-        debouncedApplyChanges();
-    };
-    const handleDecreaseClick = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        adjustQuantity(-1);
-        onDecreaseClick(e);
-    };
-    const handleIncreaseClick = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        adjustQuantity(1);
-        onIncreaseClick(e);
-    };
-    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) => {
+    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) => {
                             setIsFocused(false);
                             const parsedValue = parseInt(e.target.value) || 0;
                             const clampedValue = Math.min(parsedValue, max);
-                            // Cancel any pending debounced operations
-                            debouncedApplyChanges.cancel();
-                            // Update and apply changes
-                            const delta = clampedValue - value;
-                            pendingQuantityAdjustment.current = delta;
-                            setLocalInputValue(clampedValue);
-                            onValueSet(clampedValue);
+                            setValue(clampedValue);
+                            setLocalValue(clampedValue.toString());
                         }, onFocus: () => {
                             setIsFocused(true);
                         }, onChange: (e) => {
                             const inputValue = e.target.value;
                             if (inputValue === "") {
-                                setLocalInputValue(0);
+                                setLocalValue("");
                             }
                             else {
                                 const parsedValue = parseInt(inputValue);
                                 if (!isNaN(parsedValue)) {
                                     const clampedValue = Math.min(parsedValue, max);
-                                    setLocalInputValue(clampedValue);
+                                    setLocalValue(clampedValue.toString());
                                 }
                             }
-                        }, 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)
+                        }, 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)
                                 ? `${inputStyle.borderRadius}px`
-                                : 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 })] })));
+                                : 0 }), inputMode: "numeric" }), _jsx(IconButton, { handler: onIncreaseClick, iconUrl: increaseIconUrl, iconColor: iconColor, style: rightButtonStyle, disabled: isIncreaseDisabled || loading })] })), _jsx(LoadingDots, { show: loading, size: 1, iconColor: iconColor })] })));
 });
 QuantityPicker.displayName = "QuantityPicker";
 export { QuantityPicker };

package/dist/components/ui/quantity-pickerNEW.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export interface QuantityPickerNEWProps extends React.HTMLAttributes<HTMLDivElement> {
+    decreaseIconUrl: string;
+    increaseIconUrl: string;
+    deleteIconUrl: string;
+    isDeleteOnly: boolean;
+    iconColor: string;
+    onDecreaseClick: React.ReactEventHandler;
+    onIncreaseClick: React.ReactEventHandler;
+    isDecreaseDisabled?: boolean;
+    isIncreaseDisabled?: boolean;
+    loading?: boolean;
+    value: number;
+    onValueSet: (_: number) => void;
+    onAdjustQuantity: (_: number) => void;
+    className?: string;
+    inputStyle?: React.CSSProperties;
+    buttonStyle?: React.CSSProperties;
+    buttonCornerRadius?: number;
+    debounceTime?: number;
+    max?: number;
+}
+declare const QuantityPickerNEW: React.ForwardRefExoticComponent<QuantityPickerNEWProps & React.RefAttributes<HTMLDivElement>>;
+export { QuantityPickerNEW };
+//# sourceMappingURL=quantity-pickerNEW.d.ts.map

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

@@ -0,0 +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

@@ -0,0 +1,125 @@
+"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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Icon } from "./icon";
+import { useTap } from "./tap";
+import { LoadingDots } from "./loading-dots";
+import debounce from "lodash/debounce";
+const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled }) => {
+    const { onTap, isPressed, ref: tapRef } = useTap();
+    const [isButtonPressed, setIsButtonPressed] = React.useState(false);
+    // Handle press state manually for the invisible button
+    const handleMouseDown = React.useCallback(() => {
+        if (!disabled)
+            setIsButtonPressed(true);
+    }, [disabled]);
+    const handleMouseUp = React.useCallback(() => {
+        setIsButtonPressed(false);
+    }, []);
+    // 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: {
+                    top: "-8px",
+                    right: "-8px",
+                    bottom: "-8px",
+                    left: "-8px",
+                    opacity: 0,
+                    zIndex: 10,
+                }, disabled: disabled, "aria-label": "Quantity button" })] })));
+};
+const QuantityPickerNEW = React.forwardRef((_a, ref) => {
+    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"]);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const pendingQuantityAdjustment = React.useRef(0);
+    const [localInputValue, setLocalInputValue] = React.useState(value);
+    // Update local state when external value changes
+    React.useEffect(() => {
+        if (pendingQuantityAdjustment.current === 0) {
+            setLocalInputValue(value);
+        }
+    }, [value]);
+    // Create debounced function for applying changes
+    const debouncedApplyChanges = React.useMemo(() => debounce(() => {
+        if (pendingQuantityAdjustment.current !== 0) {
+            onAdjustQuantity(pendingQuantityAdjustment.current);
+            pendingQuantityAdjustment.current = 0;
+        }
+    }, debounceTime), [debounceTime, onAdjustQuantity]);
+    const leftButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopLeftRadius: buttonCornerRadius
+            ? `${buttonCornerRadius}px`
+            : undefined, borderBottomLeftRadius: buttonCornerRadius
+            ? `${buttonCornerRadius}px`
+            : undefined });
+    const rightButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopRightRadius: buttonCornerRadius
+            ? `${buttonCornerRadius}px`
+            : undefined, borderBottomRightRadius: buttonCornerRadius
+            ? `${buttonCornerRadius}px`
+            : undefined });
+    const singleButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined });
+    const adjustQuantity = (amount) => {
+        const newAmount = localInputValue + amount;
+        const clampedNewAmount = Math.min(Math.max(newAmount, 0), max);
+        // Update local value immediately
+        setLocalInputValue(clampedNewAmount);
+        // Track pending change for batched update
+        pendingQuantityAdjustment.current += amount;
+        // Trigger debounced API update
+        debouncedApplyChanges();
+    };
+    const handleDecreaseClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        adjustQuantity(-1);
+        onDecreaseClick(e);
+    };
+    const handleIncreaseClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        adjustQuantity(1);
+        onIncreaseClick(e);
+    };
+    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) => {
+                            setIsFocused(false);
+                            const parsedValue = parseInt(e.target.value) || 0;
+                            const clampedValue = Math.min(parsedValue, max);
+                            // Cancel any pending debounced operations
+                            debouncedApplyChanges.cancel();
+                            // Update and apply changes
+                            const delta = clampedValue - value;
+                            pendingQuantityAdjustment.current = delta;
+                            setLocalInputValue(clampedValue);
+                            onValueSet(clampedValue);
+                        }, onFocus: () => {
+                            setIsFocused(true);
+                        }, onChange: (e) => {
+                            const inputValue = e.target.value;
+                            if (inputValue === "") {
+                                setLocalInputValue(0);
+                            }
+                            else {
+                                const parsedValue = parseInt(inputValue);
+                                if (!isNaN(parsedValue)) {
+                                    const clampedValue = Math.min(parsedValue, max);
+                                    setLocalInputValue(clampedValue);
+                                }
+                            }
+                        }, 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)
+                                ? `${inputStyle.borderRadius}px`
+                                : 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 })] })));
+});
+QuantityPickerNEW.displayName = "QuantityPickerNEW";
+export { QuantityPickerNEW };

package/dist/index.d.ts

@@ -46,6 +46,7 @@ export * from "./components/ui/portal";
 export * from "./components/ui/price";
 export * from "./components/ui/product-card";
 export * from "./components/ui/quantity-picker";
+export * from "./components/ui/quantity-pickerNEW";
 export * from "./components/ui/progress-bar";
 export * from "./components/ui/radio-group";
 export * from "./components/ui/scroll-area";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -47,6 +47,8 @@ export * from "./components/ui/portal";
 export * from "./components/ui/price";
 export * from "./components/ui/product-card";
 export * from "./components/ui/quantity-picker";
+// TODO: make this the default quantity picker after new CartLineItem component is released
+export * from "./components/ui/quantity-pickerNEW";
 export * from "./components/ui/progress-bar";
 export * from "./components/ui/radio-group";
 export * from "./components/ui/scroll-area";

package/dist/lib/cart.util.d.ts

@@ -1,14 +1,21 @@
-import { EnrichedCart, CartCalculatedDiscount, CartCalculatedAppliedGiftCard } from "app-studio-types";
-export declare const getVariantPrice: ({ variantPrice, variantCompareAtPrice, quantity, currencyCode, sellingPlanAllocation, }: {
-    variantPrice: number;
-    variantCompareAtPrice: number;
+import { EnrichedCart, CartCalculatedDiscount, CartCalculatedAppliedGiftCard, ProductVariant } from "app-studio-types";
+export declare const getVariantPrice: ({ quantity, variant, sellingPlanAllocation, }: {
     quantity: number;
-    currencyCode: string;
+    variant: ProductVariant;
     sellingPlanAllocation?: {
         priceAdjustments: {
-            perDeliveryPrice?: number;
-            price: number;
-            compareAtPrice?: number;
+            perDeliveryPrice?: {
+                amount: string;
+                currencyCode: string;
+            };
+            price: {
+                amount: string;
+                currencyCode: string;
+            };
+            compareAtPrice?: {
+                amount: string;
+                currencyCode: string;
+            };
         }[];
     } | undefined;
 }) => {

package/dist/lib/cart.util.d.ts.map

@@ -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"}
+{"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

@@ -1,25 +1,27 @@
 import { getIdFromGid } from "./utils";
-export const getVariantPrice = ({ variantPrice, variantCompareAtPrice, quantity, currencyCode, sellingPlanAllocation = { priceAdjustments: [] }, }) => {
-    var _a;
+export const getVariantPrice = ({ quantity, variant, sellingPlanAllocation = { priceAdjustments: [] }, }) => {
+    var _a, _b, _c, _d;
     const isSubscription = ((_a = sellingPlanAllocation === null || sellingPlanAllocation === void 0 ? void 0 : sellingPlanAllocation.priceAdjustments) === null || _a === void 0 ? void 0 : _a.length) > 0;
     if (isSubscription) {
         const { perDeliveryPrice, price, compareAtPrice } = sellingPlanAllocation.priceAdjustments[0];
         const effectivePrice = perDeliveryPrice || price;
-        const subscriptionUnitPrice = perDeliveryPrice || 0;
-        const effectiveCompareAtPrice = compareAtPrice || price || 0;
+        const subscriptionUnitPrice = parseFloat((perDeliveryPrice === null || perDeliveryPrice === void 0 ? void 0 : perDeliveryPrice.amount) || "0") || 0;
+        const effectiveCompareAtPrice = parseFloat((compareAtPrice === null || compareAtPrice === void 0 ? void 0 : compareAtPrice.amount) || "0") ||
+            parseFloat((price === null || price === void 0 ? void 0 : price.amount) || "0") ||
+            0;
         return {
             price: subscriptionUnitPrice * quantity,
             compareAtPrice: effectiveCompareAtPrice * quantity,
-            currency: currencyCode,
+            currency: effectivePrice === null || effectivePrice === void 0 ? void 0 : effectivePrice.currencyCode,
             isSale: subscriptionUnitPrice < effectiveCompareAtPrice,
         };
     }
-    const variantUnitPrice = variantPrice || 0;
-    const variantComparePrice = variantCompareAtPrice || 0;
+    const variantUnitPrice = parseFloat((_b = variant === null || variant === void 0 ? void 0 : variant.price) === null || _b === void 0 ? void 0 : _b.amount) || 0;
+    const variantComparePrice = parseFloat((_c = variant === null || variant === void 0 ? void 0 : variant.compareAtPrice) === null || _c === void 0 ? void 0 : _c.amount) || 0;
     return {
         price: variantUnitPrice * quantity,
         compareAtPrice: variantComparePrice * quantity,
-        currency: currencyCode,
+        currency: (_d = variant === null || variant === void 0 ? void 0 : variant.price) === null || _d === void 0 ? void 0 : _d.currencyCode,
         isSale: variantUnitPrice < variantComparePrice,
     };
 };
@@ -79,21 +81,10 @@ const getAppliedGiftCards = (cart) => {
 const getSalesAmount = (cart) => {
     var _a;
     return (_a = cart.items) === null || _a === void 0 ? void 0 : _a.reduce((acc, item) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         const { compareAtPrice, price } = getVariantPrice({
             quantity: item.quantity || 1,
-            variantPrice: parseFloat(((_b = (_a = item.variantDetails) === null || _a === void 0 ? void 0 : _a.price) === null || _b === void 0 ? void 0 : _b.amount) || "0"),
-            variantCompareAtPrice: parseFloat(((_d = (_c = item.variantDetails) === null || _c === void 0 ? void 0 : _c.compareAtPrice) === null || _d === void 0 ? void 0 : _d.amount) || "0"),
-            currencyCode: ((_f = (_e = item.variantDetails) === null || _e === void 0 ? void 0 : _e.price) === null || _f === void 0 ? void 0 : _f.currencyCode) || "USD",
-            sellingPlanAllocation: {
-                priceAdjustments: [
-                    {
-                        price: parseFloat(((_h = (_g = item.variantDetails) === null || _g === void 0 ? void 0 : _g.price) === null || _h === void 0 ? void 0 : _h.amount) || "0"),
-                        compareAtPrice: parseFloat(((_k = (_j = item.variantDetails) === null || _j === void 0 ? void 0 : _j.compareAtPrice) === null || _k === void 0 ? void 0 : _k.amount) || "0"),
-                        perDeliveryPrice: parseFloat(((_m = (_l = item.variantDetails) === null || _l === void 0 ? void 0 : _l.price) === null || _m === void 0 ? void 0 : _m.amount) || "0"),
-                    },
-                ],
-            },
+            variant: item.variantDetails,
+            sellingPlanAllocation: item.sellingPlanAllocation,
         });
         if (compareAtPrice && compareAtPrice > price) {
             return acc + (compareAtPrice - price);

package/dist/styles.css

@@ -1065,6 +1065,9 @@ video {
 .h-full {
   height: 100%;
 }
+.h-screen {
+  height: 100vh;
+}
 .max-h-\[200px\] {
   max-height: 200px;
 }
@@ -1991,6 +1994,9 @@ video {
   font-size: 0.75rem;
   line-height: 1rem;
 }
+.font-bold {
+  font-weight: 700;
+}
 .font-medium {
   font-weight: 500;
 }
@@ -2183,6 +2189,10 @@ video {
 .text-textColors-strikethroughPriceText {
   color: var(--textColors-strikethroughPriceText);
 }
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
 .underline {
   text-decoration-line: underline;
 }

package/package.json

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