@tapcart/mobile-components 0.7.53 → 0.7.55

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 (36) hide show
  1. package/dist/components/hooks/use-click-outside.d.ts +6 -0
  2. package/dist/components/hooks/use-click-outside.d.ts.map +1 -0
  3. package/dist/components/hooks/use-click-outside.js +15 -0
  4. package/dist/components/hooks/use-outside-click.d.ts +7 -0
  5. package/dist/components/hooks/use-outside-click.d.ts.map +1 -0
  6. package/dist/components/hooks/use-outside-click.js +16 -0
  7. package/dist/components/hooks/use-tap.d.ts +7 -7
  8. package/dist/components/hooks/use-tap.js +97 -97
  9. package/dist/components/ui/drawer.d.ts +1 -0
  10. package/dist/components/ui/drawer.d.ts.map +1 -1
  11. package/dist/components/ui/drawer.js +3 -3
  12. package/dist/components/ui/tabs.d.ts.map +1 -1
  13. package/dist/components/ui/tabs.js +3 -1
  14. package/dist/components/ui/virtual-grid.d.ts +15 -0
  15. package/dist/components/ui/virtual-grid.d.ts.map +1 -0
  16. package/dist/components/ui/virtual-grid.js +58 -0
  17. package/dist/index.d.ts +1 -0
  18. package/dist/index.d.ts.map +1 -1
  19. package/dist/index.js +1 -0
  20. package/dist/styles.css +0 -3
  21. package/package.json +21 -20
  22. package/dist/components/ThemeProvider.d.ts +0 -3
  23. package/dist/components/ThemeProvider.d.ts.map +0 -1
  24. package/dist/components/ThemeProvider.js +0 -18
  25. package/dist/components/ThemeToggle.d.ts +0 -2
  26. package/dist/components/ThemeToggle.d.ts.map +0 -1
  27. package/dist/components/ThemeToggle.js +0 -8
  28. package/dist/components/hooks/use-block-conditionals.d.ts +0 -2
  29. package/dist/components/hooks/use-block-conditionals.d.ts.map +0 -1
  30. package/dist/components/hooks/use-block-conditionals.js +0 -2
  31. package/dist/components/ui/input.d.ts +0 -17
  32. package/dist/components/ui/input.d.ts.map +0 -1
  33. package/dist/components/ui/input.js +0 -35
  34. package/dist/components/ui/product-grid.d.ts +0 -15
  35. package/dist/components/ui/product-grid.d.ts.map +0 -1
  36. package/dist/components/ui/product-grid.js +0 -22
@@ -0,0 +1,6 @@
1
+ import React from "react"
2
+ export declare function useClickOutside(
3
+ ref: React.RefObject<HTMLElement>,
4
+ callback: () => void
5
+ ): void
6
+ //# sourceMappingURL=use-click-outside.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-click-outside.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-click-outside.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,eAAe,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAE,IAAI,CAa5F"}
@@ -0,0 +1,15 @@
1
+ "use client"
2
+ import React from "react"
3
+ export function useClickOutside(ref, callback) {
4
+ React.useEffect(() => {
5
+ const handleClickOutside = (event) => {
6
+ if (ref.current && !ref.current.contains(event.target)) {
7
+ callback()
8
+ }
9
+ }
10
+ document.addEventListener("mousedown", handleClickOutside)
11
+ return () => {
12
+ document.removeEventListener("mousedown", handleClickOutside)
13
+ }
14
+ }, [ref, callback])
15
+ }
@@ -0,0 +1,7 @@
1
+ import React from "react"
2
+ declare const useClickOutside: (
3
+ ref: React.RefObject<HTMLElement>,
4
+ callback: () => void
5
+ ) => void
6
+ export default useClickOutside
7
+ //# sourceMappingURL=use-outside-click.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-outside-click.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-outside-click.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,eAAe,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,YAAY,MAAM,IAAI,SAa/E,CAAC;AAEF,eAAe,eAAe,CAAC"}
@@ -0,0 +1,16 @@
1
+ "use client"
2
+ import React from "react"
3
+ const useClickOutside = (ref, callback) => {
4
+ React.useEffect(() => {
5
+ const handleClickOutside = (event) => {
6
+ if (ref.current && !ref.current.contains(event.target)) {
7
+ callback()
8
+ }
9
+ }
10
+ document.addEventListener("mousedown", handleClickOutside)
11
+ return () => {
12
+ document.removeEventListener("mousedown", handleClickOutside)
13
+ }
14
+ }, [ref, callback])
15
+ }
16
+ export default useClickOutside
@@ -1,8 +1,8 @@
1
- import React from "react";
1
+ import React from "react"
2
2
  declare const useTap: (tapThreshold?: number) => {
3
- onTap: (handler: (event: any) => void) => (event: any) => void;
4
- isPressed: boolean;
5
- ref: React.MutableRefObject<null>;
6
- };
7
- export { useTap };
8
- //# sourceMappingURL=use-tap.d.ts.map
3
+ onTap: (handler: (event: any) => void) => (event: any) => void
4
+ isPressed: boolean
5
+ ref: React.MutableRefObject<null>
6
+ }
7
+ export { useTap }
8
+ //# sourceMappingURL=use-tap.d.ts.map
@@ -1,100 +1,100 @@
1
- "use client";
2
- import { useState, useEffect, useCallback, useRef } from "react";
1
+ "use client"
2
+ import { useState, useEffect, useCallback, useRef } from "react"
3
3
  // Shared manager for all instances of the hook
4
4
  const tapManager = (() => {
5
- const elements = new Map();
6
- let isListening = false;
7
- const startListening = () => {
8
- if (isListening)
9
- return;
10
- const handleTouchStart = (e) => {
11
- const touch = e.touches[0];
12
- elements.forEach((data, el) => {
13
- if (el.contains(touch.target)) {
14
- data.touchStarted = true;
15
- data.touchMoved = false;
16
- data.startPosition = { x: touch.clientX, y: touch.clientY };
17
- // Don't set isPressed here, wait to determine if it's a tap or drag
18
- }
19
- });
20
- };
21
- const handleTouchMove = (e) => {
22
- const touch = e.touches[0];
23
- elements.forEach((data, el) => {
24
- if (data.touchStarted) {
25
- const deltaX = Math.abs(touch.clientX - data.startPosition.x);
26
- const deltaY = Math.abs(touch.clientY - data.startPosition.y);
27
- if (deltaX > data.tapThreshold || deltaY > data.tapThreshold) {
28
- data.touchMoved = true;
29
- data.setIsPressed(false);
30
- }
31
- }
32
- });
33
- };
34
- const handleTouchEnd = () => {
35
- elements.forEach((data) => {
36
- if (data.touchStarted) {
37
- data.touchStarted = false;
38
- if (!data.touchMoved) {
39
- // It's a tap, set isPressed briefly
40
- data.setIsPressed(true);
41
- setTimeout(() => data.setIsPressed(false), 100);
42
- }
43
- }
44
- });
45
- };
46
- document.addEventListener("touchstart", (e) => handleTouchStart(e), { passive: true });
47
- document.addEventListener("touchmove", (e) => handleTouchMove(e), { passive: true });
48
- document.addEventListener("touchend", () => handleTouchEnd(), {
49
- passive: true,
50
- });
51
- isListening = true;
52
- };
53
- return {
54
- register: (el, data) => {
55
- elements.set(el, data);
56
- startListening();
57
- },
58
- unregister: (el) => {
59
- elements.delete(el);
60
- },
61
- elements,
62
- };
63
- })();
5
+ const elements = new Map()
6
+ let isListening = false
7
+ const startListening = () => {
8
+ if (isListening) return
9
+ const handleTouchStart = (e) => {
10
+ const touch = e.touches[0]
11
+ elements.forEach((data, el) => {
12
+ if (el.contains(touch.target)) {
13
+ data.touchStarted = true
14
+ data.touchMoved = false
15
+ data.startPosition = { x: touch.clientX, y: touch.clientY }
16
+ // Don't set isPressed here, wait to determine if it's a tap or drag
17
+ }
18
+ })
19
+ }
20
+ const handleTouchMove = (e) => {
21
+ const touch = e.touches[0]
22
+ elements.forEach((data, el) => {
23
+ if (data.touchStarted) {
24
+ const deltaX = Math.abs(touch.clientX - data.startPosition.x)
25
+ const deltaY = Math.abs(touch.clientY - data.startPosition.y)
26
+ if (deltaX > data.tapThreshold || deltaY > data.tapThreshold) {
27
+ data.touchMoved = true
28
+ data.setIsPressed(false)
29
+ }
30
+ }
31
+ })
32
+ }
33
+ const handleTouchEnd = () => {
34
+ elements.forEach((data) => {
35
+ if (data.touchStarted) {
36
+ data.touchStarted = false
37
+ if (!data.touchMoved) {
38
+ // It's a tap, set isPressed briefly
39
+ data.setIsPressed(true)
40
+ setTimeout(() => data.setIsPressed(false), 100)
41
+ }
42
+ }
43
+ })
44
+ }
45
+ document.addEventListener("touchstart", (e) => handleTouchStart(e), {
46
+ passive: true,
47
+ })
48
+ document.addEventListener("touchmove", (e) => handleTouchMove(e), {
49
+ passive: true,
50
+ })
51
+ document.addEventListener("touchend", () => handleTouchEnd(), {
52
+ passive: true,
53
+ })
54
+ isListening = true
55
+ }
56
+ return {
57
+ register: (el, data) => {
58
+ elements.set(el, data)
59
+ startListening()
60
+ },
61
+ unregister: (el) => {
62
+ elements.delete(el)
63
+ },
64
+ elements,
65
+ }
66
+ })()
64
67
  const useTap = (tapThreshold = 10) => {
65
- const [isPressed, setIsPressed] = useState(false);
66
- const elementRef = useRef(null);
67
- useEffect(() => {
68
- const element = elementRef.current;
69
- if (!element)
70
- return;
71
- const data = {
72
- touchStarted: false,
73
- touchMoved: false,
74
- startPosition: { x: 0, y: 0 },
75
- setIsPressed,
76
- tapThreshold,
77
- };
78
- tapManager.register(element, data);
79
- return () => {
80
- tapManager.unregister(element);
81
- };
82
- }, [tapThreshold]);
83
- const onTap = useCallback((handler) => {
84
- return (event) => {
85
- const data = tapManager.elements.get(elementRef.current);
86
- if (!data)
87
- return;
88
- if (event.type === "touchend" && !data.touchMoved) {
89
- handler(event);
90
- }
91
- else if (event.type === "click" && !data.touchStarted) {
92
- handler(event);
93
- setIsPressed(true);
94
- setTimeout(() => setIsPressed(false), 100);
95
- }
96
- };
97
- }, []);
98
- return { onTap, isPressed, ref: elementRef };
99
- };
100
- export { useTap };
68
+ const [isPressed, setIsPressed] = useState(false)
69
+ const elementRef = useRef(null)
70
+ useEffect(() => {
71
+ const element = elementRef.current
72
+ if (!element) return
73
+ const data = {
74
+ touchStarted: false,
75
+ touchMoved: false,
76
+ startPosition: { x: 0, y: 0 },
77
+ setIsPressed,
78
+ tapThreshold,
79
+ }
80
+ tapManager.register(element, data)
81
+ return () => {
82
+ tapManager.unregister(element)
83
+ }
84
+ }, [tapThreshold])
85
+ const onTap = useCallback((handler) => {
86
+ return (event) => {
87
+ const data = tapManager.elements.get(elementRef.current)
88
+ if (!data) return
89
+ if (event.type === "touchend" && !data.touchMoved) {
90
+ handler(event)
91
+ } else if (event.type === "click" && !data.touchStarted) {
92
+ handler(event)
93
+ setIsPressed(true)
94
+ setTimeout(() => setIsPressed(false), 100)
95
+ }
96
+ }
97
+ }, [])
98
+ return { onTap, isPressed, ref: elementRef }
99
+ }
100
+ export { useTap }
@@ -31,6 +31,7 @@ declare const DrawerContentBase: React.ForwardRefExoticComponent<Omit<React.Deta
31
31
  backdropHexColor?: string | undefined;
32
32
  isSheet?: boolean | undefined;
33
33
  containerRef?: HTMLElement | undefined;
34
+ maxHeight?: string | undefined;
34
35
  } & React.RefAttributes<HTMLDivElement>>;
35
36
  declare const DrawerFooter: {
36
37
  ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../components/ui/drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAA;AAKhD,KAAK,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B,CAAA;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IACjE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,QAAA,MAAM,aAAa,8BAA0D,CAAA;AAG7E,QAAA,MAAM,YAAY;iCAAgC,iBAAiB;;CAgBlE,CAAA;AAGD,QAAA,MAAM,WAAW,4BAAsD,CAAA;AAGvE,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrE,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B,CAAA;AAED,QAAA,MAAM,MAAM;0CAAyC,WAAW;;CAS/D,CAAA;AAOD,QAAA,MAAM,aAAa;;wCAYlB,CAAA;AAUD,QAAA,MAAM,iBAAiB;;;;;wCAyCtB,CAAA;AA0BD,QAAA,MAAM,YAAY;8BAGf,MAAM,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,iBAAiB,qLASrB,CAAA;AAGF,KAAK,iBAAiB,GAAG;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACjD,CAAA;AAED,QAAA,MAAM,YAAY,0DAKf,iBAAiB,4CA8BnB,CAAA;AAED,QAAA,MAAM,aAAa,sCAIhB,MAAM,cAAc,CAAC,cAAc,CAAC,4CAMtC,CAAA;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,YAAY,GACb,CAAA"}
1
+ {"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../components/ui/drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAA;AAKhD,KAAK,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B,CAAA;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IACjE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,QAAA,MAAM,aAAa,8BAA0D,CAAA;AAG7E,QAAA,MAAM,YAAY;iCAAgC,iBAAiB;;CAgBlE,CAAA;AAGD,QAAA,MAAM,WAAW,4BAAsD,CAAA;AAGvE,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrE,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B,CAAA;AAED,QAAA,MAAM,MAAM;0CAAyC,WAAW;;CAS/D,CAAA;AAOD,QAAA,MAAM,aAAa;;wCAYlB,CAAA;AAWD,QAAA,MAAM,iBAAiB;;;;;;wCA0CtB,CAAA;AA0BD,QAAA,MAAM,YAAY;8BAGf,MAAM,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,iBAAiB,qLASrB,CAAA;AAGF,KAAK,iBAAiB,GAAG;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACjD,CAAA;AAED,QAAA,MAAM,YAAY,0DAKf,iBAAiB,4CA8BnB,CAAA;AAED,QAAA,MAAM,aAAa,sCAIhB,MAAM,cAAc,CAAC,cAAc,CAAC,4CAMtC,CAAA;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,YAAY,GACb,CAAA"}
@@ -47,10 +47,10 @@ const DrawerOverlay = React.forwardRef((_a, ref) => {
47
47
  });
48
48
  DrawerOverlay.displayName = "DrawerOverlay";
49
49
  const DrawerContentBase = React.forwardRef((_a, ref) => {
50
- var { className, children, hideBackdrop = false, backdropHexColor, isSheet = false, onAnimationEnd, containerRef } = _a, props = __rest(_a, ["className", "children", "hideBackdrop", "backdropHexColor", "isSheet", "onAnimationEnd", "containerRef"]);
50
+ var { className, children, hideBackdrop = false, backdropHexColor, isSheet = false, onAnimationEnd, containerRef, maxHeight } = _a, props = __rest(_a, ["className", "children", "hideBackdrop", "backdropHexColor", "isSheet", "onAnimationEnd", "containerRef", "maxHeight"]);
51
51
  const styles = isSheet
52
- ? { height: "calc(100vh - 112px)" }
53
- : { maxHeight: "calc(100vh - 112px)" };
52
+ ? { height: "calc(100dvh - 112px)" }
53
+ : { maxHeight: maxHeight || "calc(100dvh - 112px)" };
54
54
  return (_jsxs(DrawerPortal, Object.assign({ containerRef: containerRef }, { children: [hideBackdrop ? null : (_jsx(DrawerOverlay, { backdropHexColor: backdropHexColor })), _jsxs(DrawerPrimitive.Content, Object.assign({ ref: ref, style: styles, className: cn("fixed inset-x-0 bottom-0 z-50 flex h-auto flex-col rounded-t-2xl bg-coreColors-modalBackground", className) }, props, { "data-testid": "drawer-content" }, { children: [_jsx("div", { className: "mx-auto mb-2 mt-2 h-[4px] w-[40px] rounded-full bg-coreColors-dividingLines" }), children] }))] })));
55
55
  });
56
56
  DrawerContentBase.displayName = "DrawerContentBase";
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../components/ui/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAA;QACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;QACzB,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;QACjC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;KAChC,EAAE,CAAA;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACvC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAiDD,QAAA,MAAM,IAAI,kFA8HT,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,CAAA"}
1
+ {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../components/ui/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAA;QACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;QACzB,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;QACjC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;KAChC,EAAE,CAAA;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACvC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAiDD,QAAA,MAAM,IAAI,kFAgIT,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,CAAA"}
@@ -72,7 +72,9 @@ const Tabs = React.forwardRef((_a, ref) => {
72
72
  });
73
73
  }, [activeTab]);
74
74
  React.useEffect(() => {
75
- handleTabChanged();
75
+ setTimeout(() => {
76
+ handleTabChanged();
77
+ }, 100);
76
78
  window.addEventListener("resize", handleTabChanged);
77
79
  return () => {
78
80
  window.removeEventListener("resize", handleTabChanged);
@@ -0,0 +1,15 @@
1
+ import * as React from "react";
2
+ import { type VariantProps } from "class-variance-authority";
3
+ interface GridType {
4
+ className: any;
5
+ children: React.ReactNode;
6
+ overscan?: number;
7
+ }
8
+ declare const virtualGridVariants: (props?: ({
9
+ columns?: 1 | 2 | 3 | 4 | null | undefined;
10
+ } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
11
+ export interface VirtualGridProps extends GridType, VariantProps<typeof virtualGridVariants> {
12
+ }
13
+ declare function VirtualGrid({ className, columns, children, overscan, ...props }: VirtualGridProps): import("react/jsx-runtime").JSX.Element;
14
+ export { VirtualGrid, virtualGridVariants };
15
+ //# sourceMappingURL=virtual-grid.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"virtual-grid.d.ts","sourceRoot":"","sources":["../../../components/ui/virtual-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,UAAU,QAAQ;IAChB,SAAS,EAAE,GAAG,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,QAAA,MAAM,mBAAmB;;mFAYvB,CAAA;AAEF,MAAM,WAAW,gBACf,SAAQ,QAAQ,EACd,YAAY,CAAC,OAAO,mBAAmB,CAAC;CAAG;AAE/C,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAa,EACb,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAiDlB;AAED,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAA"}
@@ -0,0 +1,58 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ import * as React from "react";
14
+ import { cva } from "class-variance-authority";
15
+ import { Container } from "./container";
16
+ import { useVirtual } from "react-virtual";
17
+ import { cn } from "../../lib/utils";
18
+ const virtualGridVariants = cva("grid", {
19
+ variants: {
20
+ columns: {
21
+ 1: "grid-cols-1 gap-y-4",
22
+ 2: "grid-cols-2 gap-x-[7px] gap-y-4",
23
+ 3: "grid-cols-3 gap-x-[7px] gap-y-4",
24
+ 4: "grid-cols-4 gap-x-[7px] gap-y-4",
25
+ },
26
+ },
27
+ defaultVariants: {
28
+ columns: 2,
29
+ },
30
+ });
31
+ function VirtualGrid(_a) {
32
+ var { className, columns, children, overscan = 50 } = _a, props = __rest(_a, ["className", "columns", "children", "overscan"]);
33
+ const parentRef = React.useRef(null);
34
+ const childrenArray = React.Children.toArray(children);
35
+ const rowCount = Math.ceil(childrenArray.length / (columns || 2));
36
+ const rowVirtualizer = useVirtual({
37
+ size: rowCount,
38
+ parentRef,
39
+ estimateSize: React.useCallback(() => 100, []),
40
+ overscan,
41
+ });
42
+ const col = columns || 2;
43
+ React.useEffect(() => {
44
+ rowVirtualizer.measure();
45
+ }, [childrenArray.length]);
46
+ return (_jsx(Container, Object.assign({ style: { padding: "0" } }, { children: _jsx("div", Object.assign({ ref: parentRef }, { children: _jsx("div", Object.assign({ className: cn(virtualGridVariants({ columns }), className), style: {
47
+ height: rowVirtualizer.totalSize,
48
+ } }, props, { children: rowVirtualizer.virtualItems.map((virtualRow) => {
49
+ const rowStartIndex = virtualRow.index * col;
50
+ return (_jsx(React.Fragment, { children: Array.from({ length: col }).map((_, colIndex) => {
51
+ const index = rowStartIndex + colIndex;
52
+ if (index >= childrenArray.length)
53
+ return null;
54
+ return (_jsx("div", Object.assign({ ref: virtualRow.measureRef }, { children: childrenArray[index] }), index));
55
+ }) }, virtualRow.index));
56
+ }) })) })) })));
57
+ }
58
+ export { VirtualGrid, virtualGridVariants };
package/dist/index.d.ts CHANGED
@@ -27,6 +27,7 @@ export * from "./components/ui/dropdown";
27
27
  export * from "./components/ui/empty-message";
28
28
  export * from "./components/ui/favorite";
29
29
  export * from "./components/ui/grid";
30
+ export * from "./components/ui/virtual-grid";
30
31
  export * from "./components/ui/icon";
31
32
  export * from "./components/ui/image";
32
33
  export * from "./components/ui/Input/input";
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,EAAE,EACF,GAAG,EACH,QAAQ,EACR,4BAA4B,EAC5B,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,yBAAyB,EACzB,4BAA4B,EAC5B,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,wBAAwB,EACxB,4BAA4B,EAC5B,eAAe,EACf,cAAc,EACd,SAAS,EACT,4BAA4B,GAC7B,MAAM,aAAa,CAAA;AACpB,cAAc,2CAA2C,CAAA;AACzD,cAAc,mCAAmC,CAAA;AACjD,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,sCAAsC,CAAA;AACpD,cAAc,yCAAyC,CAAA;AACvD,cAAc,oCAAoC,CAAA;AAClD,cAAc,wCAAwC,CAAA;AACtD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sCAAsC,CAAA;AACpD,cAAc,oDAAoD,CAAA;AAClE,cAAc,kCAAkC,CAAA;AAChD,cAAc,2BAA2B,CAAA;AACzC,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,sCAAsC,CAAA;AACpD,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,0BAA0B,CAAA;AACxC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kDAAkD,CAAA;AAChE,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oCAAoC,CAAA;AAClD,cAAc,mCAAmC,CAAA;AACjD,cAAc,aAAa,CAAA;AAC3B,cAAc,6CAA6C,CAAA;AAC3D,cAAc,kDAAkD,CAAA;AAChE,cAAc,qBAAqB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,EAAE,EACF,GAAG,EACH,QAAQ,EACR,4BAA4B,EAC5B,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,yBAAyB,EACzB,4BAA4B,EAC5B,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,wBAAwB,EACxB,4BAA4B,EAC5B,eAAe,EACf,cAAc,EACd,SAAS,EACT,4BAA4B,GAC7B,MAAM,aAAa,CAAA;AACpB,cAAc,2CAA2C,CAAA;AACzD,cAAc,mCAAmC,CAAA;AACjD,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,sCAAsC,CAAA;AACpD,cAAc,yCAAyC,CAAA;AACvD,cAAc,oCAAoC,CAAA;AAClD,cAAc,wCAAwC,CAAA;AACtD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sCAAsC,CAAA;AACpD,cAAc,oDAAoD,CAAA;AAClE,cAAc,kCAAkC,CAAA;AAChD,cAAc,2BAA2B,CAAA;AACzC,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,sCAAsC,CAAA;AACpD,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,0BAA0B,CAAA;AACxC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kDAAkD,CAAA;AAChE,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oCAAoC,CAAA;AAClD,cAAc,mCAAmC,CAAA;AACjD,cAAc,aAAa,CAAA;AAC3B,cAAc,6CAA6C,CAAA;AAC3D,cAAc,kDAAkD,CAAA;AAChE,cAAc,qBAAqB,CAAA"}
package/dist/index.js CHANGED
@@ -28,6 +28,7 @@ export * from "./components/ui/dropdown";
28
28
  export * from "./components/ui/empty-message";
29
29
  export * from "./components/ui/favorite";
30
30
  export * from "./components/ui/grid";
31
+ export * from "./components/ui/virtual-grid";
31
32
  export * from "./components/ui/icon";
32
33
  export * from "./components/ui/image";
33
34
  export * from "./components/ui/Input/input";
package/dist/styles.css CHANGED
@@ -1109,9 +1109,6 @@ video {
1109
1109
  .w-\[40px\] {
1110
1110
  width: 40px;
1111
1111
  }
1112
- .w-\[45vw\] {
1113
- width: 45vw;
1114
- }
1115
1112
  .w-auto {
1116
1113
  width: auto;
1117
1114
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tapcart/mobile-components",
3
- "version": "0.7.53",
3
+ "version": "0.7.55",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "style": "dist/styles.css",
@@ -11,20 +11,6 @@
11
11
  "license": "SEE LICENSE IN LICENSE.md",
12
12
  "author": "Tapcart Inc.",
13
13
  "homepage": "https://tapcart.com",
14
- "scripts": {
15
- "clean": "rm -rf dist node_modules",
16
- "lint": "eslint \"**/*.ts*\"",
17
- "ui:add": "pnpm dlx shadcn-ui@latest add",
18
- "build:styles": "postcss styles/globals.css -o dist/styles.css",
19
- "build:ts": "tsc -p tsconfig.json && tsc-alias",
20
- "build": "pnpm run build:ts && pnpm run build:styles",
21
- "dev:ts": "tsc -w -p tsconfig.json",
22
- "dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
23
- "dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\"",
24
- "test": "jest",
25
- "test:silent": "jest --silent",
26
- "test:watch": "jest --watch"
27
- },
28
14
  "peerDependencies": {
29
15
  "react": "^18.0.0",
30
16
  "react-dom": "^18.0.0"
@@ -37,20 +23,20 @@
37
23
  "@types/pluralize": "^0.0.33",
38
24
  "@types/react": "^18.2.0",
39
25
  "@types/react-dom": "^18.2.0",
40
- "app-studio-types": "workspace:*",
41
26
  "autoprefixer": "^10.4.14",
42
27
  "chokidar-cli": "^3.0.0",
43
28
  "concurrently": "^8.2.2",
44
29
  "eslint": "^7.32.0",
45
- "eslint-config-custom": "workspace:*",
46
30
  "jest": "^29.7.0",
47
31
  "jest-environment-jsdom": "^29.7.0",
48
32
  "postcss": "^8.4.24",
49
33
  "tailwindcss": "^3.3.2",
50
34
  "ts-jest": "^29.2.5",
51
35
  "tsc-alias": "^1.8.10",
52
- "tsconfig": "workspace:*",
53
- "typescript": "^4.5.2"
36
+ "typescript": "^4.5.2",
37
+ "app-studio-types": "0.0.6",
38
+ "tsconfig": "0.0.0",
39
+ "eslint-config-custom": "0.0.0"
54
40
  },
55
41
  "dependencies": {
56
42
  "@radix-ui/react-accordion": "^1.1.2",
@@ -85,9 +71,24 @@
85
71
  "postcss-cli": "^11.0.0",
86
72
  "react-intersection-observer": "^9.10.2",
87
73
  "react-svg": "^16.1.34",
74
+ "react-virtual": "^2.10.4",
88
75
  "swr": "^2.2.5",
89
76
  "tailwind-merge": "^1.13.2",
90
77
  "tailwindcss-animate": "^1.0.6",
91
78
  "vaul": "0.9.1"
79
+ },
80
+ "scripts": {
81
+ "clean": "rm -rf dist node_modules",
82
+ "lint": "eslint \"**/*.ts*\"",
83
+ "ui:add": "pnpm dlx shadcn-ui@latest add",
84
+ "build:styles": "postcss styles/globals.css -o dist/styles.css",
85
+ "build:ts": "tsc -p tsconfig.json && tsc-alias",
86
+ "build": "pnpm run build:ts && pnpm run build:styles",
87
+ "dev:ts": "tsc -w -p tsconfig.json",
88
+ "dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
89
+ "dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\"",
90
+ "test": "jest",
91
+ "test:silent": "jest --silent",
92
+ "test:watch": "jest --watch"
92
93
  }
93
- }
94
+ }
@@ -1,3 +0,0 @@
1
- import { ThemeProviderProps } from "next-themes/dist/types";
2
- export declare function ThemeProvider({ children, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
3
- //# sourceMappingURL=ThemeProvider.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../components/ThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAEvE"}
@@ -1,18 +0,0 @@
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 } from "react/jsx-runtime";
14
- import { ThemeProvider as NextThemesProvider } from "next-themes";
15
- export function ThemeProvider(_a) {
16
- var { children } = _a, props = __rest(_a, ["children"]);
17
- return _jsx(NextThemesProvider, Object.assign({}, props, { children: children }));
18
- }
@@ -1,2 +0,0 @@
1
- export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;
2
- //# sourceMappingURL=ThemeToggle.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../components/ThemeToggle.tsx"],"names":[],"mappings":"AAOA,wBAAgB,WAAW,4CAc1B"}
@@ -1,8 +0,0 @@
1
- "use client";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { useTheme } from "next-themes";
4
- import { Button } from "../components/ui/button";
5
- export function ThemeToggle() {
6
- const { setTheme, theme } = useTheme();
7
- return (_jsxs(Button, Object.assign({ variant: "ghost", size: "sm", onClick: () => setTheme(theme === "light" ? "dark" : "light") }, { children: [_jsx("div", { className: "rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }), _jsx("div", { className: "absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }), _jsx("span", Object.assign({ className: "sr-only" }, { children: "Toggle theme" }))] })));
8
- }
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=use-block-conditionals.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-block-conditionals.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-block-conditionals.ts"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- "use client";
2
- export {};
@@ -1,17 +0,0 @@
1
- import * as React from "react";
2
- import { type VariantProps } from "class-variance-authority";
3
- declare const inputVariants: (props?: ({
4
- error?: boolean | null | undefined;
5
- } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
6
- export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">, VariantProps<typeof inputVariants> {
7
- id: string;
8
- label?: string;
9
- icon?: string;
10
- asChild?: boolean;
11
- value: string;
12
- placeholder: string;
13
- onChange: (_: string) => void;
14
- }
15
- declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
16
- export { Input };
17
- //# sourceMappingURL=input.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../components/ui/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,aAAa;;mFAalB,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,EACnE,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B;AAED,QAAA,MAAM,KAAK,qFAkDV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}
@@ -1,35 +0,0 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
- import * as React from "react";
14
- import { Slot } from "@radix-ui/react-slot";
15
- import { cva } from "class-variance-authority";
16
- import { cn } from "../../lib/utils";
17
- import { Icon } from "./icon";
18
- const inputVariants = cva("flex h-14 w-full rounded border border-coreColors-dividingLines bg-coreColors-inputBackground px-4 pt-5 pb-2 placeholder-shown:p-4 text-textColors-primaryColor text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-textColors-secondaryColor focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 focus:border-coreColors-brandColorPrimary peer data-[icon=true]:pr-10", {
19
- variants: {
20
- error: {
21
- true: "border-stateColors-error text-stateColors-error placeholder:text-stateColors-error focus:border-stateColors-error [&+label]:text-stateColors-error",
22
- false: "",
23
- },
24
- },
25
- defaultVariants: {
26
- error: false,
27
- },
28
- });
29
- const Input = React.forwardRef((_a, ref) => {
30
- var { className, error = false, id, type, label, icon, asChild, value, placeholder, onChange } = _a, props = __rest(_a, ["className", "error", "id", "type", "label", "icon", "asChild", "value", "placeholder", "onChange"]);
31
- const Comp = asChild ? Slot : "div";
32
- return (_jsxs(Comp, Object.assign({ className: "relative group" }, { children: [_jsx("input", Object.assign({ placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), id: id, type: type, className: cn(inputVariants({ error }), className), "data-icon": !!icon, ref: ref }, props)), label ? (_jsx("label", Object.assign({ htmlFor: id, className: "absolute text-[10px] text-textColors-secondaryColor group-active:text-coreColors-brandColorPrimary top-2 z-10 h-4 origin-[0] start-4 opacity-100 peer-placeholder-shown:opacity-0" }, { children: label }))) : null, icon ? (_jsx(Icon, { name: icon, "data-error": error, size: "sm", className: "absolute w-5 aspect-square fill-current text-textColors-secondaryColor top-[18px] z-10 origin-[0] end-4 peer-pr-8 icon data-[error=true]:text-stateColors-error" })) : null] })));
33
- });
34
- Input.displayName = "Input";
35
- export { Input };
@@ -1,15 +0,0 @@
1
- type Product = any;
2
- interface PageData {
3
- products: Product[];
4
- cursorBlob?: string;
5
- filtersData: any;
6
- }
7
- interface ProductGridItemsProps {
8
- initialData: PageData;
9
- loadMoreProducts: (params: any) => Promise<PageData>;
10
- queryVariables: Record<string, any>;
11
- config: Record<string, any>;
12
- }
13
- declare function ProductGrid({ loadMoreProducts, initialData, queryVariables, config, }: ProductGridItemsProps): import("react/jsx-runtime").JSX.Element;
14
- export { ProductGrid };
15
- //# sourceMappingURL=product-grid.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"product-grid.d.ts","sourceRoot":"","sources":["../../../components/ui/product-grid.tsx"],"names":[],"mappings":"AAkBA,KAAK,OAAO,GAAG,GAAG,CAAA;AAClB,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,GAAG,CAAA;CACjB;AAED,UAAU,qBAAqB;IAC7B,WAAW,EAAE,QAAQ,CAAA;IACrB,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAA;IACpD,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAC5B;AAED,iBAAS,WAAW,CAAC,EACnB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,MAAM,GACP,EAAE,qBAAqB,2CAmCvB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
@@ -1,22 +0,0 @@
1
- "use client";
2
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { useInfiniteScroll } from "../hooks/use-infinite-scroll";
4
- import { ProductCard } from "./product-card";
5
- const Loader = () => (_jsx("div", Object.assign({ className: "grid-cols-2 lg:grid-cols-3" }, { children: Array(4)
6
- .fill(0)
7
- .map((_, index) => (_jsx("div", { className: "aspect-[2/3] animate-pulse bg-neutral-100 dark:bg-neutral-900" }, index))) })));
8
- function ProductGrid({ loadMoreProducts, initialData, queryVariables, config, }) {
9
- const { data, error, isLoadingInitialData, isLoadingMore, isEmpty, isReachingEnd, ref, products, } = useInfiniteScroll({
10
- initialData,
11
- loadMoreProducts,
12
- queryVariables,
13
- });
14
- if (error)
15
- return _jsx("div", { children: "Failed to load data" });
16
- if (isLoadingInitialData)
17
- return _jsx(Loader, {});
18
- return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "grid-cols-2 lg:grid-cols-3" }, { children: products.map((product, i) => (_jsx(ProductCard, {
19
- // @ts-expect-error
20
- product: product, config: config, isLoading: false }, product.handle))) })), isLoadingMore ? _jsx(Loader, {}) : _jsx("div", { ref: ref })] }));
21
- }
22
- export { ProductGrid };