@tapcart/mobile-components 0.9.0 → 0.9.2

package/dist/components/hooks/use-scroll-direction-safe.d.ts

@@ -0,0 +1,8 @@
+type ScrollDirection = "up" | "down" | null;
+interface ScrollData {
+    direction: ScrollDirection;
+    scrollY: number;
+}
+declare function useScrollDirectionSafe(threshold?: number): ScrollData;
+export { useScrollDirectionSafe };
+//# sourceMappingURL=use-scroll-direction-safe.d.ts.map

package/dist/components/hooks/use-scroll-direction-safe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scroll-direction-safe.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-scroll-direction-safe.ts"],"names":[],"mappings":"AAWA,KAAK,eAAe,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;AAE3C,UAAU,UAAU;IAClB,SAAS,EAAE,eAAe,CAAA;IAC1B,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,iBAAS,sBAAsB,CAAC,SAAS,GAAE,MAAY,GAAG,UAAU,CA2EnE;AAED,OAAO,EAAE,sBAAsB,EAAE,CAAA"}

package/dist/components/hooks/use-scroll-direction-safe.js

@@ -0,0 +1,75 @@
+"use client";
+import { useState, useEffect, useRef } from "react";
+// Safe import of useTransition - will be undefined in older React versions
+let useTransition;
+try {
+    useTransition = require("react").useTransition;
+}
+catch (_a) {
+    // useTransition not available
+}
+function useScrollDirectionSafe(threshold = 100) {
+    const [scrollData, setScrollData] = useState({
+        direction: null,
+        scrollY: 0,
+    });
+    // Conditionally use useTransition if available
+    const transitionResult = useTransition === null || useTransition === void 0 ? void 0 : useTransition();
+    const [isPending, startTransition] = transitionResult || [
+        false,
+        (callback) => callback(),
+    ];
+    const scrollElement = useRef(null);
+    const hasScrollListener = useRef(false);
+    const lastScrollY = useRef(0);
+    const isBouncing = useRef(false);
+    useEffect(() => {
+        var _a;
+        if (typeof window === "undefined") {
+            return;
+        }
+        const updateScrollDirection = () => {
+            var _a, _b, _c;
+            if (document.body.hasAttribute("data-scroll-locked")) {
+                return;
+            }
+            const scrollY = ((_a = scrollElement.current) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0;
+            const scrollHeight = ((_b = scrollElement.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) || 0;
+            const clientHeight = ((_c = scrollElement.current) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0;
+            // Detect if the user is at the top or bottom of the page
+            if (scrollY <= 0 || scrollY + clientHeight >= scrollHeight) {
+                isBouncing.current = true;
+            }
+            else {
+                isBouncing.current = false;
+            }
+            // Prevent updating scroll direction if the page is bouncing
+            if (!isBouncing.current &&
+                Math.abs(scrollY - lastScrollY.current) > threshold) {
+                startTransition(() => {
+                    setScrollData({
+                        direction: scrollY > lastScrollY.current ? "down" : "up",
+                        scrollY,
+                    });
+                });
+                lastScrollY.current = scrollY > 0 ? scrollY : 0;
+            }
+        };
+        if (!scrollElement.current) {
+            scrollElement.current = document.getElementById("tc-vgsl");
+        }
+        if (!hasScrollListener.current) {
+            (_a = scrollElement.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", updateScrollDirection, {
+                passive: true,
+            });
+            hasScrollListener.current = true;
+        }
+        return () => {
+            var _a;
+            (_a = scrollElement.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", updateScrollDirection);
+            hasScrollListener.current = false;
+        };
+    }, [threshold, startTransition]);
+    return scrollData;
+}
+export { useScrollDirectionSafe };

package/dist/components/hooks/use-transition-compat.d.ts

@@ -0,0 +1,12 @@
+/**
+ * React version-aware useTransition compatibility hook
+ * Automatically detects React version and provides appropriate behavior
+ *
+ * Warning: This hook may cause your app to spontaneously time travel.
+ * Side effects include: temporal paradoxes and meeting your past self.
+ */
+export declare function useTransitionCompat(): [
+    boolean,
+    (callback: () => void) => void
+];
+//# sourceMappingURL=use-transition-compat.d.ts.map

package/dist/components/hooks/use-transition-compat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-transition-compat.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-transition-compat.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,wBAAgB,mBAAmB,IAAI;IACrC,OAAO;IACP,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI;CAC/B,CAuCA"}

package/dist/components/hooks/use-transition-compat.js

@@ -0,0 +1,42 @@
+"use client";
+import React from "react";
+/**
+ * React version-aware useTransition compatibility hook
+ * Automatically detects React version and provides appropriate behavior
+ *
+ * Warning: This hook may cause your app to spontaneously time travel.
+ * Side effects include: temporal paradoxes and meeting your past self.
+ */
+export function useTransitionCompat() {
+    const [fallbackIsPending, setFallbackIsPending] = React.useState(false);
+    const reactVersion = React.version;
+    const majorVersion = parseInt((reactVersion === null || reactVersion === void 0 ? void 0 : reactVersion.split(".")[0]) || "0", 10);
+    // Use native useTransition if available in React 18+
+    const hasNativeUseTransition = majorVersion >= 18 && "useTransition" in React;
+    const nativeUseTransition = hasNativeUseTransition
+        ? React.useTransition()
+        : null;
+    const startTransition = React.useCallback((callback) => {
+        if (nativeUseTransition) {
+            // Use native startTransition
+            nativeUseTransition[1](callback);
+            return;
+        }
+        setFallbackIsPending(true);
+        if (majorVersion >= 17) {
+            setTimeout(() => {
+                callback();
+                setFallbackIsPending(false);
+            }, 0);
+        }
+        else {
+            callback();
+            setFallbackIsPending(false);
+        }
+    }, [majorVersion, nativeUseTransition]);
+    // Return native pending state if available, otherwise fallback state
+    const isPending = nativeUseTransition
+        ? nativeUseTransition[0]
+        : fallbackIsPending;
+    return [isPending, startTransition];
+}

package/dist/components/hooks/use-transition-compat.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=use-transition-compat.test.d.ts.map

package/dist/components/hooks/use-transition-compat.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-transition-compat.test.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-transition-compat.test.ts"],"names":[],"mappings":""}

package/dist/components/hooks/use-transition-compat.test.js

@@ -0,0 +1,179 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/* eslint-disable no-undef */
+import { renderHook, act } from "@testing-library/react";
+import React from "react";
+import { useTransitionCompat } from "./use-transition-compat";
+// Mock React to control version and useTransition availability
+const mockReact = React;
+describe("useTransitionCompat", () => {
+    // Store original values to restore after tests
+    const originalVersion = React.version;
+    const originalUseTransition = React.useTransition;
+    afterEach(() => {
+        // Restore original React properties
+        mockReact.version = originalVersion;
+        if (originalUseTransition) {
+            mockReact.useTransition = originalUseTransition;
+        }
+        else {
+            delete mockReact.useTransition;
+        }
+        jest.clearAllTimers();
+        jest.useRealTimers();
+    });
+    describe("React 18+ with native useTransition", () => {
+        beforeEach(() => {
+            mockReact.version = "18.2.0";
+            mockReact.useTransition = jest.fn(() => [false, jest.fn()]);
+        });
+        it("should use native useTransition when available in React 18+", () => {
+            const mockStartTransition = jest.fn();
+            mockReact.useTransition = jest.fn(() => [false, mockStartTransition]);
+            const { result } = renderHook(() => useTransitionCompat());
+            const [isPending, startTransition] = result.current;
+            // Should initially not be pending
+            expect(isPending).toBe(false);
+            // Should call native useTransition
+            expect(mockReact.useTransition).toHaveBeenCalled();
+            // Test startTransition calls native function
+            const callback = jest.fn();
+            act(() => {
+                startTransition(callback);
+            });
+            expect(mockStartTransition).toHaveBeenCalledWith(callback);
+        });
+        it("should handle pending state from native useTransition", () => {
+            const mockStartTransition = jest.fn();
+            mockReact.useTransition = jest.fn(() => [true, mockStartTransition]);
+            const { result } = renderHook(() => useTransitionCompat());
+            const [isPending] = result.current;
+            expect(isPending).toBe(true);
+        });
+    });
+    describe("React 17 fallback behavior", () => {
+        beforeEach(() => {
+            mockReact.version = "17.0.2";
+            delete mockReact.useTransition;
+            jest.useFakeTimers();
+        });
+        it("should use setTimeout fallback for React 17", () => __awaiter(void 0, void 0, void 0, function* () {
+            const { result } = renderHook(() => useTransitionCompat());
+            const [initialPending, startTransition] = result.current;
+            // Initially should not be pending
+            expect(initialPending).toBe(false);
+            const callback = jest.fn();
+            // Start transition
+            act(() => {
+                startTransition(callback);
+            });
+            // Should be pending immediately after calling startTransition
+            expect(result.current[0]).toBe(true);
+            // Callback should not be called yet
+            expect(callback).not.toHaveBeenCalled();
+            // Fast-forward timers
+            act(() => {
+                jest.runAllTimers();
+            });
+            // Callback should now be called and pending should be false
+            expect(callback).toHaveBeenCalledTimes(1);
+            expect(result.current[0]).toBe(false);
+        }));
+    });
+    describe("React < 17 immediate execution", () => {
+        beforeEach(() => {
+            mockReact.version = "16.14.0";
+            delete mockReact.useTransition;
+        });
+        it("should execute callback immediately for React < 17", () => {
+            const { result } = renderHook(() => useTransitionCompat());
+            const [initialPending, startTransition] = result.current;
+            // Initially should not be pending
+            expect(initialPending).toBe(false);
+            const callback = jest.fn();
+            // Start transition
+            act(() => {
+                startTransition(callback);
+            });
+            // Callback should be called immediately and not be pending
+            expect(callback).toHaveBeenCalledTimes(1);
+            expect(result.current[0]).toBe(false);
+        });
+    });
+    describe("Edge cases", () => {
+        it("should handle missing React version gracefully", () => {
+            mockReact.version = undefined;
+            delete mockReact.useTransition;
+            const { result } = renderHook(() => useTransitionCompat());
+            const [isPending, startTransition] = result.current;
+            expect(isPending).toBe(false);
+            const callback = jest.fn();
+            act(() => {
+                startTransition(callback);
+            });
+            // Should execute immediately when version is unknown
+            expect(callback).toHaveBeenCalledTimes(1);
+            expect(result.current[0]).toBe(false);
+        });
+        it("should handle malformed version strings", () => {
+            mockReact.version = "not-a-version";
+            delete mockReact.useTransition;
+            const { result } = renderHook(() => useTransitionCompat());
+            const [isPending, startTransition] = result.current;
+            expect(isPending).toBe(false);
+            const callback = jest.fn();
+            act(() => {
+                startTransition(callback);
+            });
+            // Should execute immediately when version parsing fails
+            expect(callback).toHaveBeenCalledTimes(1);
+            expect(result.current[0]).toBe(false);
+        });
+        it("should handle React 18+ without useTransition (edge case)", () => {
+            mockReact.version = "18.0.0";
+            delete mockReact.useTransition;
+            jest.useFakeTimers();
+            const { result } = renderHook(() => useTransitionCompat());
+            const [initialPending, startTransition] = result.current;
+            expect(initialPending).toBe(false);
+            const callback = jest.fn();
+            act(() => {
+                startTransition(callback);
+            });
+            // Should fall back to setTimeout behavior even in React 18 if useTransition is missing
+            expect(result.current[0]).toBe(true);
+            act(() => {
+                jest.runAllTimers();
+            });
+            expect(callback).toHaveBeenCalledTimes(1);
+            expect(result.current[0]).toBe(false);
+        });
+    });
+    describe("Return value consistency", () => {
+        it("should always return tuple with boolean and function", () => {
+            mockReact.version = "18.2.0";
+            mockReact.useTransition = jest.fn(() => [false, jest.fn()]);
+            const { result } = renderHook(() => useTransitionCompat());
+            const [isPending, startTransition] = result.current;
+            expect(typeof isPending).toBe("boolean");
+            expect(typeof startTransition).toBe("function");
+        });
+        it("should maintain referential stability of startTransition function", () => {
+            mockReact.version = "17.0.0";
+            delete mockReact.useTransition;
+            const { result, rerender } = renderHook(() => useTransitionCompat());
+            const firstStartTransition = result.current[1];
+            rerender();
+            const secondStartTransition = result.current[1];
+            // Function reference should be stable due to useCallback
+            expect(firstStartTransition).toBe(secondStartTransition);
+        });
+    });
+});

package/dist/components/hooks/use-transition-shim.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Shim for useTransition that falls back gracefully on older React versions
+ * In older versions, we just execute the callback immediately without transition
+ * @returns [isPending, startTransition] - same signature as React's useTransition
+ */
+export declare function useTransitionShim(): [boolean, (callback: () => void) => void];
+//# sourceMappingURL=use-transition-shim.d.ts.map

package/dist/components/hooks/use-transition-shim.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-transition-shim.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-transition-shim.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,wBAAgB,iBAAiB,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC,CAoB7E"}

package/dist/components/hooks/use-transition-shim.js

@@ -0,0 +1,25 @@
+"use client";
+import { useTransition as useReactTransition } from "react";
+/**
+ * Shim for useTransition that falls back gracefully on older React versions
+ * In older versions, we just execute the callback immediately without transition
+ * @returns [isPending, startTransition] - same signature as React's useTransition
+ */
+export function useTransitionShim() {
+    // Check if useTransition exists (React 18+)
+    if (typeof useReactTransition === "function") {
+        try {
+            return useReactTransition();
+        }
+        catch (error) {
+            // Fallback if useTransition fails for any reason
+            console.warn("useTransition not available, falling back to immediate execution");
+        }
+    }
+    // Fallback for React < 18: execute immediately, never pending
+    const startTransition = (callback) => {
+        // Execute callback immediately in older React versions
+        callback();
+    };
+    return [false, startTransition];
+}

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+export interface QuantityPickerProps 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 QuantityPicker: React.ForwardRefExoticComponent<QuantityPickerProps & React.RefAttributes<HTMLDivElement>>;
+export { QuantityPicker };
+//# sourceMappingURL=quantity-picker%20copy.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-picker copy.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-picker copy.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"}

package/dist/components/ui/quantity-picker copy.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 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"]);
+    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 })] })));
+});
+QuantityPicker.displayName = "QuantityPicker";
+export { QuantityPicker };

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+export interface QuantityPickerProps 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;
+    setValue: (_: number) => void;
+    className?: string;
+    inputStyle?: React.CSSProperties;
+    buttonStyle?: React.CSSProperties;
+    buttonCornerRadius?: number;
+    max?: number;
+}
+declare const QuantityPicker: React.ForwardRefExoticComponent<QuantityPickerProps & React.RefAttributes<HTMLDivElement>>;
+export { QuantityPicker };
+//# sourceMappingURL=quantity-pickerDEP.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-pickerDEP.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-pickerDEP.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-pickerDEP.js

@@ -0,0 +1,88 @@
+"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";
+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 QuantityPicker = React.forwardRef((_a, ref) => {
+    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 [localValue, setLocalValue] = React.useState(value.toString());
+    React.useEffect(() => {
+        if (!isFocused) {
+            setLocalValue(value.toString());
+        }
+    }, [value, isFocused]);
+    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 });
+    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);
+                            setValue(clampedValue);
+                            setLocalValue(clampedValue.toString());
+                        }, onFocus: () => {
+                            setIsFocused(true);
+                        }, onChange: (e) => {
+                            const inputValue = e.target.value;
+                            if (inputValue === "") {
+                                setLocalValue("");
+                            }
+                            else {
+                                const parsedValue = parseInt(inputValue);
+                                if (!isNaN(parsedValue)) {
+                                    const clampedValue = Math.min(parsedValue, max);
+                                    setLocalValue(clampedValue.toString());
+                                }
+                            }
+                        }, 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: onIncreaseClick, iconUrl: increaseIconUrl, iconColor: iconColor, style: rightButtonStyle, disabled: isIncreaseDisabled || loading })] })), _jsx(LoadingDots, { show: loading, size: 1, iconColor: iconColor })] })));
+});
+QuantityPicker.displayName = "QuantityPicker";
+export { QuantityPicker };