@tapcart/mobile-components 0.12.17 → 0.12.20

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

@@ -1 +1 @@
-{"version":3,"file":"use-infinite-scroll.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-scroll.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAmB,MAAM,iBAAiB,CAAA;AAE1E,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAG5D,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,GAAG,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;CACxC;AAED,UAAU,sBAAsB;IAE9B,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAGxC,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAGpC,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACrC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IAChD,YAAY,CAAC,EAAE,CACb,SAAS,EAAE,MAAM,EACjB,gBAAgB,EAAE,GAAG,GAAG,IAAI,EAC5B,GAAG,IAAI,EAAE,GAAG,EAAE,KACX,GAAG,CAAA;IACR,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,UAAU,uBAAuB;IAC/B,IAAI,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAA;IAC5B,KAAK,EAAE,GAAG,CAAA;IACV,oBAAoB,EAAE,OAAO,CAAA;IAC7B,aAAa,EAAE,OAAO,GAAG,SAAS,CAAA;IAClC,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE,OAAO,CAAA;IACtB,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAA;IAChD,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,oBAAoB,EAAE,GAAG,EAAE,CAAA;IAC3B,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;CACtB;AAED,eAAO,MAAM,sCAAsC,iBACnC,uBAAuB,OAsBtC,CAAA;AAED,QAAA,MAAM,YAAY,WAAY,MAAM,WAGnC,CAAA;AAED,QAAA,MAAM,iBAAiB,wLAgBpB,sBAAsB,KAAG,uBAwT3B,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"use-infinite-scroll.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-scroll.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAmB,MAAM,iBAAiB,CAAA;AAE1E,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAG5D,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,GAAG,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;CACxC;AAED,UAAU,sBAAsB;IAE9B,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAGxC,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAGpC,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACrC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IAChD,YAAY,CAAC,EAAE,CACb,SAAS,EAAE,MAAM,EACjB,gBAAgB,EAAE,GAAG,GAAG,IAAI,EAC5B,GAAG,IAAI,EAAE,GAAG,EAAE,KACX,GAAG,CAAA;IACR,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,UAAU,uBAAuB;IAC/B,IAAI,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAA;IAC5B,KAAK,EAAE,GAAG,CAAA;IACV,oBAAoB,EAAE,OAAO,CAAA;IAC7B,aAAa,EAAE,OAAO,GAAG,SAAS,CAAA;IAClC,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE,OAAO,CAAA;IACtB,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAA;IAChD,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,oBAAoB,EAAE,GAAG,EAAE,CAAA;IAC3B,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;CACtB;AAED,eAAO,MAAM,sCAAsC,iBACnC,uBAAuB,OAsBtC,CAAA;AAED,QAAA,MAAM,YAAY,WAAY,MAAM,WAGnC,CAAA;AAED,QAAA,MAAM,iBAAiB,wLAgBpB,sBAAsB,KAAG,uBAkU3B,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/hooks/use-infinite-scroll.js

@@ -205,7 +205,17 @@ customFetcher, customGetKey, shouldSkipFetch: shouldSkipFetchProp, }) => {
         isEndPointer = true;
     }
     else if (usingSearchClient) {
-        isEndPointer = !(searchClient === null || searchClient === void 0 ? void 0 : searchClient.getHasMore());
+        // Prefer the last page's `hasMore` from the SWR data (which is cache-stable
+        // and travels with the page payload) over `searchClient.getHasMore()`. The
+        // latter reads the client's in-memory `lastSearchResponse`, which is null
+        // when the page was served from the IDB cache without running the fetcher —
+        // that would wrongly report `isReachingEnd` and disable infinite scroll.
+        // Fall back to the client only before the first page resolves.
+        const lastPage = data[data.length - 1];
+        isEndPointer =
+            typeof (lastPage === null || lastPage === void 0 ? void 0 : lastPage.hasMore) === "boolean"
+                ? !lastPage.hasMore
+                : !(searchClient === null || searchClient === void 0 ? void 0 : searchClient.getHasMore());
     }
     else {
         isEndPointer = !((_f = (_e = data[data.length - 1]) === null || _e === void 0 ? void 0 : _e.pageData) === null || _f === void 0 ? void 0 : _f.cursorBlob);

package/dist/components/ui/video-enhanced.d.ts

@@ -7,11 +7,12 @@ type VideoAttributes = {
     autoplay: boolean;
     videoSound: boolean;
 };
-interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {
+interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "onLoadedData"> {
     src: string;
     videoAttributes: VideoAttributes;
     naturalAspectRatio?: string;
     className?: string;
+    onLoadedData?: (target: HTMLVideoElement | Event) => void;
 }
 declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<HTMLVideoElement>>;
 export { Video as VideoEnhanced };

package/dist/components/ui/video-enhanced.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video-enhanced.d.ts","sourceRoot":"","sources":["../../../components/ui/video-enhanced.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAA;IACxB,cAAc,EAAE,MAAM,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,UAAU,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACtE,GAAG,EAAE,MAAM,CAAA;IACX,eAAe,EAAE,eAAe,CAAA;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,KAAK,qFA4OV,CAAA;AAID,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,CAAA"}
+{"version":3,"file":"video-enhanced.d.ts","sourceRoot":"","sources":["../../../components/ui/video-enhanced.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAA;IACxB,cAAc,EAAE,MAAM,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,UAAU,UACR,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,cAAc,CAAC;IACzE,GAAG,EAAE,MAAM,CAAA;IACX,eAAe,EAAE,eAAe,CAAA;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAKlB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,GAAG,KAAK,KAAK,IAAI,CAAA;CAC1D;AAED,QAAA,MAAM,KAAK,qFAkQV,CAAA;AAID,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,CAAA"}

package/dist/components/ui/video-enhanced.js

@@ -28,6 +28,12 @@ const videoVariants = {
         contain: "object-contain",
     },
 };
+// If `loadeddata` (first frame, readyState 2) has not fired this long after
+// metadata is available, reveal anyway — the element is renderable and the
+// environment is not going to advance readyState on its own (no autoplay,
+// offscreen, or `preload="metadata"` honored). Healthy connections decode the
+// first frame well within this window, so they still reveal via `loadeddata`.
+const LOADED_DATA_FALLBACK_MS = 1000;
 const Video = React.forwardRef((_a, ref) => {
     var { src, videoAttributes, naturalAspectRatio = "1/1", className, onLoadedData } = _a, props = __rest(_a, ["src", "videoAttributes", "naturalAspectRatio", "className", "onLoadedData"]);
     const autoPlayEnabled = videoAttributes.autoplay && !videoAttributes.videoSound;
@@ -35,6 +41,12 @@ const Video = React.forwardRef((_a, ref) => {
     const videoRef = ref || internalRef;
     const observerRef = React.useRef(null);
     const lastPositionRef = React.useRef(0);
+    // The loaded-data effect runs once (empty deps), so read the callback
+    // through a ref to always invoke the latest one without re-arming listeners.
+    const onLoadedDataRef = React.useRef(onLoadedData);
+    React.useEffect(() => {
+        onLoadedDataRef.current = onLoadedData;
+    }, [onLoadedData]);
     const [isLoaded, setIsLoaded] = React.useState(false);
     const [isVisible, setIsVisible] = React.useState(false);
     const [isPlaying, setIsPlaying] = React.useState(false);
@@ -160,6 +172,25 @@ const Video = React.forwardRef((_a, ref) => {
         const video = videoRef.current;
         if (!video)
             return;
+        // Notify the parent at most once. Prefer `loadeddata` (first frame
+        // decoded, readyState >= 2), but fall back to a short timer armed on
+        // `loadedmetadata`: environments that honor `preload="metadata"` and
+        // defer/block autoplay (iOS WebView, Low Power Mode) or keep the element
+        // offscreen (e.g. a carousel slide that never intersects) can settle at
+        // readyState 1 and never advance to 2, so `loadeddata` never fires. The
+        // parent's fade-in (opacity-0 -> opacity-100) is gated on this callback,
+        // so without the fallback the video stays invisible forever.
+        let notified = false;
+        let metadataFallback = null;
+        const notifyLoaded = () => {
+            var _a;
+            if (notified)
+                return;
+            notified = true;
+            if (metadataFallback)
+                clearTimeout(metadataFallback);
+            (_a = onLoadedDataRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadedDataRef, video);
+        };
         const handleLoadedMetadata = () => {
             setIsLoaded(true);
             if (autoPlayEnabled && isVisible) {
@@ -169,23 +200,23 @@ const Video = React.forwardRef((_a, ref) => {
                     console.error("Error playing video:", error);
                 });
             }
-        };
-        const handleLoadedData = () => {
-            onLoadedData === null || onLoadedData === void 0 ? void 0 : onLoadedData({
-                target: video,
-            });
+            if (!notified && metadataFallback === null) {
+                metadataFallback = setTimeout(notifyLoaded, LOADED_DATA_FALLBACK_MS);
+            }
         };
         if (video.readyState >= 1) {
             handleLoadedMetadata();
         }
         if (video.readyState >= 2) {
-            handleLoadedData();
+            notifyLoaded();
         }
         video.addEventListener("loadedmetadata", handleLoadedMetadata);
-        video.addEventListener("loadeddata", handleLoadedData);
+        video.addEventListener("loadeddata", notifyLoaded);
         return () => {
             video.removeEventListener("loadedmetadata", handleLoadedMetadata);
-            video.removeEventListener("loadeddata", handleLoadedData);
+            video.removeEventListener("loadeddata", notifyLoaded);
+            if (metadataFallback)
+                clearTimeout(metadataFallback);
         };
     }, []);
     const videoStyle = {

package/dist/styles.css

@@ -997,6 +997,9 @@ video {
 .mt-0 {
   margin-top: 0px;
 }
+.mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -1183,6 +1186,9 @@ video {
 .h-\[68px\] {
   height: 68px;
 }
+.h-\[70px\] {
+  height: 70px;
+}
 .h-\[80vh\] {
   height: 80vh;
 }
@@ -1214,6 +1220,9 @@ video {
 .min-h-11 {
   min-height: 2.75rem;
 }
+.min-h-12 {
+  min-height: 3rem;
+}
 .min-h-16 {
   min-height: 4rem;
 }
@@ -1268,6 +1277,9 @@ video {
 .w-1\/2 {
   width: 50%;
 }
+.w-1\/3 {
+  width: 33.333333%;
+}
 .w-1\/4 {
   width: 25%;
 }
@@ -1316,6 +1328,9 @@ video {
 .w-4 {
   width: 1rem;
 }
+.w-4\/5 {
+  width: 80%;
+}
 .w-5 {
   width: 1.25rem;
 }
@@ -1340,6 +1355,9 @@ video {
 .w-\[138px\] {
   width: 138px;
 }
+.w-\[180px\] {
+  width: 180px;
+}
 .w-\[1px\] {
   width: 1px;
 }
@@ -1358,9 +1376,18 @@ video {
 .w-\[40px\] {
   width: 40px;
 }
+.w-\[42\%\] {
+  width: 42%;
+}
+.w-\[46px\] {
+  width: 46px;
+}
 .w-\[65\%\] {
   width: 65%;
 }
+.w-\[calc\(100\%-2rem\)\] {
+  width: calc(100% - 2rem);
+}
 .w-auto {
   width: auto;
 }
@@ -1390,6 +1417,9 @@ video {
 .min-w-6 {
   min-width: 1.5rem;
 }
+.min-w-8 {
+  min-width: 2rem;
+}
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -1400,6 +1430,9 @@ video {
 .max-w-\[140px\] {
   max-width: 140px;
 }
+.max-w-\[174px\] {
+  max-width: 174px;
+}
 .max-w-\[198px\] {
   max-width: 198px;
 }
@@ -1738,6 +1771,9 @@ video {
 .gap-4 {
   gap: 1rem;
 }
+.gap-5 {
+  gap: 1.25rem;
+}
 .gap-\[7px\] {
   gap: 7px;
 }
@@ -2280,6 +2316,10 @@ video {
   padding-left: 2rem;
   padding-right: 2rem;
 }
+.px-\[18px\] {
+  padding-left: 18px;
+  padding-right: 18px;
+}
 .px-\[7px\] {
   padding-left: 7px;
   padding-right: 7px;
@@ -2320,6 +2360,10 @@ video {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -2454,9 +2498,15 @@ video {
 .text-\[15px\] {
   font-size: 15px;
 }
+.text-\[16px\] {
+  font-size: 16px;
+}
 .text-\[18px\] {
   font-size: 18px;
 }
+.text-\[22px\] {
+  font-size: 22px;
+}
 .text-\[23px\] {
   font-size: 23px;
 }
@@ -2503,6 +2553,9 @@ video {
 .italic {
   font-style: italic;
 }
+.leading-4 {
+  line-height: 1rem;
+}
 .leading-6 {
   line-height: 1.5rem;
 }
@@ -2521,9 +2574,21 @@ video {
 .leading-\[160\%\] {
   line-height: 160%;
 }
+.leading-\[20px\] {
+  line-height: 20px;
+}
+.leading-\[22\.4px\] {
+  line-height: 22.4px;
+}
+.leading-\[22px\] {
+  line-height: 22px;
+}
 .leading-\[24px\] {
   line-height: 24px;
 }
+.leading-\[28px\] {
+  line-height: 28px;
+}
 .leading-none {
   line-height: 1;
 }
@@ -2993,6 +3058,9 @@ video {
 .ease-out {
   animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+.running {
+  animation-play-state: running;
+}
 .paused {
   animation-play-state: paused;
 }
@@ -3275,10 +3343,18 @@ body::-webkit-scrollbar {
   color: var(--stateColors-disabled);
 }
 
+.disabled\:opacity-40:disabled {
+  opacity: 0.4;
+}
+
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
 
+.disabled\:opacity-60:disabled {
+  opacity: 0.6;
+}
+
 .disabled\:opacity-70:disabled {
   opacity: 0.7;
 }

package/package.json

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